@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Playfair+Display:wght@700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
:root{
  --bg:#0E0B0C; --charcoal:#1B1517; --charcoal-2:#221B1D; --curtain:#5C1A1F;
  --gold:#C89B3C; --gold-bright:#E4BE6D; --amber:#F5B942; --cream:#F3E9D6; --muted:#A89A8C;
  --line:rgba(200,155,60,0.22); --danger:#C25B4A;
  --font-display:'Bebas Neue', sans-serif; --font-serif:'Playfair Display', serif;
  --font-body:'Inter', sans-serif; --font-mono:'IBM Plex Mono', monospace;
}
html{ -webkit-text-size-adjust:100%; }
body{ background:var(--bg); color:var(--cream); font-family:var(--font-body); font-size:18px; line-height:1.5; min-height:100vh; }
button{ font:inherit; cursor:pointer; }
.oculto{ display:none !important; }

/* Encabezado */
header{ position:sticky; top:0; z-index:20; background:var(--bg); border-bottom:1px solid var(--line); padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.marca{ font-family:var(--font-display); font-size:1.7rem; letter-spacing:0.05em; line-height:1; white-space:nowrap; }
.marca span{ color:var(--gold); }
header .marca{ font-size:1.45rem; flex-shrink:0; }
.cabecera-der{ display:flex; align-items:center; justify-content:flex-end; gap:10px; flex:1; min-width:0; }
.usuario{ font-size:0.85rem; color:var(--muted); text-align:right; line-height:1.3; min-width:0; overflow:hidden; }
#nombreUsuario{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.btn-menu{ flex-shrink:0; }
.btn-menu{ min-width:48px; height:48px; border-radius:12px; border:1px solid var(--gold); background:none; color:var(--gold-bright); font-size:1.4rem; }

main{ max-width:640px; margin:0 auto; padding:16px 16px 120px; }
h1{ font-family:var(--font-display); font-size:2.2rem; letter-spacing:0.03em; line-height:1.05; margin:8px 0 14px; }
h2.seccion{ font-family:var(--font-display); font-size:1.6rem; letter-spacing:0.03em; margin:26px 0 12px; }
.ayuda{ color:var(--muted); font-size:0.95rem; }

/* Botones grandes, pensados para dedos y vista cansada */
.btn{ display:block; width:100%; min-height:56px; border-radius:14px; border:1px solid var(--gold); background:none; color:var(--gold-bright); font-weight:600; font-size:1.05rem; padding:14px 18px; text-align:center; }
.btn-solido{ background:var(--gold); color:var(--bg); }
.btn-peligro{ border-color:var(--danger); color:#F0A79A; }
.btn-gris{ border-color:rgba(243,233,214,0.25); color:var(--cream); }
.btn + .btn{ margin-top:12px; }
.btn:disabled{ opacity:0.5; }

/* Acceso */
.acceso{ max-width:420px; margin:12vh auto 0; padding:0 16px; text-align:center; }
.acceso .marca{ font-size:3rem; }
.acceso p{ margin:10px 0 24px; color:var(--muted); }
.acceso p b{ color:var(--cream); }
.pin{ width:100%; font-size:2rem; letter-spacing:0.4em; text-align:center; padding:14px; border-radius:14px; border:1px solid var(--line); background:var(--charcoal); color:var(--cream); margin-bottom:16px; }
.pin.usuario-admin{ font-size:1.3rem; letter-spacing:0.05em; }
.pin::placeholder{ color:var(--muted); letter-spacing:0.05em; font-size:1.1rem; }

/* Menú de administrador */
.menu-capa{ position:fixed; inset:0; z-index:40; background:rgba(0,0,0,0.6); }
.menu-panel{ position:absolute; top:0; right:0; width:min(86vw, 340px); height:100%; background:var(--charcoal-2); border-left:1px solid var(--line); padding:20px 16px; overflow-y:auto; }
.menu-panel .marca{ margin-bottom:22px; }
.menu-item{ display:block; width:100%; text-align:left; min-height:56px; padding:14px 16px; border-radius:12px; border:1px solid var(--line); background:var(--charcoal); color:var(--cream); font-weight:600; margin-bottom:10px; }
.menu-item.activo{ border-color:var(--gold); color:var(--gold-bright); }
.menu-nota{ font-size:0.85rem; color:var(--muted); margin-top:18px; }

/* Pestañas */
.pestanas{ display:flex; gap:8px; margin:4px 0 18px; }
.pestana{ flex:1; min-height:50px; border-radius:999px; border:1px solid var(--line); background:var(--charcoal); color:var(--muted); font-weight:600; }
.pestana.activa{ background:var(--gold); color:var(--bg); border-color:var(--gold); }

/* Lista de eventos */
.mes{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.12em; color:var(--gold); font-size:0.9rem; margin:22px 0 10px; }
.evento{ display:flex; gap:14px; width:100%; text-align:left; background:var(--charcoal); border:1px solid var(--line); border-radius:14px; padding:14px; color:var(--cream); margin-bottom:10px; }
.evento.apagado{ opacity:0.65; }
.dia{ flex:0 0 58px; text-align:center; border-right:1px solid var(--line); padding-right:12px; }
.dia b{ display:block; font-family:var(--font-display); font-size:2.1rem; line-height:1; color:var(--gold-bright); }
.dia small{ font-size:0.8rem; color:var(--muted); text-transform:uppercase; }
.ev-info{ min-width:0; }
.ev-nombre{ font-weight:600; font-size:1.05rem; word-wrap:break-word; }
.ev-horario, .ev-fechas{ color:var(--muted); font-size:0.92rem; }
.chip{ display:inline-block; margin:6px 6px 0 0; font-size:0.75rem; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.05em; padding:3px 9px; border-radius:999px; border:1px solid var(--gold); color:var(--gold-bright); }
.chip.gratis{ background:var(--gold); color:var(--bg); }
.chip.cancelado{ border-color:var(--danger); color:#F0A79A; }
.chip.oculto-web{ border-color:var(--muted); color:var(--cream); background:rgba(243,233,214,0.12); }
.vacio{ text-align:center; color:var(--muted); padding:40px 10px; }

.flotante{ position:fixed; left:16px; right:16px; bottom:16px; max-width:608px; margin:0 auto; z-index:30; box-shadow:0 8px 28px rgba(0,0,0,0.6); }

/* Formulario */
.campo{ margin-bottom:18px; }
label, .etiqueta{ display:block; font-weight:600; margin-bottom:6px; color:var(--gold-bright); }
.opcional{ font-weight:400; color:var(--muted); font-size:0.85rem; }
input[type=text], input[type=date], input[type=time], input[type=url], input[type=password], input[type=tel], textarea{ width:100%; font:inherit; font-size:1.05rem; padding:13px 14px; border-radius:12px; border:1px solid var(--line); background:var(--charcoal); color:var(--cream); min-height:54px; }
input:focus, textarea:focus{ outline:2px solid var(--gold); outline-offset:1px; }
textarea{ min-height:110px; resize:vertical; }
input[type=date]::-webkit-calendar-picker-indicator, input[type=time]::-webkit-calendar-picker-indicator{ filter:invert(0.85); }
.nota{ font-size:0.88rem; color:var(--muted); margin-top:6px; }

.renglon{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.renglon input{ flex:1; min-width:0; }
.renglon .a{ color:var(--muted); }
.quitar{ flex:0 0 46px; height:46px; border-radius:50%; border:1px solid var(--danger); background:none; color:#F0A79A; font-size:1.2rem; }
.mini{ background:none; border:none; color:var(--gold-bright); text-decoration:underline; padding:6px 0; font-size:0.95rem; text-align:left; }

.segmento{ display:flex; gap:8px; }
.segmento button{ flex:1; min-width:0; min-height:58px; border-radius:12px; border:1px solid var(--line); background:var(--charcoal); color:var(--muted); font-weight:600; font-size:0.95rem; line-height:1.25; padding:8px 10px; white-space:normal; }
.segmento button.activa{ border-color:var(--gold); color:var(--bg); background:var(--gold); }

.aviso{ border:1px solid var(--danger); color:#F0A79A; border-radius:12px; padding:12px 14px; margin-bottom:16px; font-size:0.95rem; }
.aviso-info{ border-color:var(--gold); color:var(--gold-bright); }

/* Vista previa: copia del estilo de las tarjetas del sitio */
.previa-titulo{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); font-size:0.8rem; margin:26px 0 8px; }
.ticket{ position:relative; background:var(--charcoal); border:1px solid var(--line); border-radius:6px; overflow:hidden; display:flex; flex-direction:column; }
.ticket-top{ padding:1.4rem 1.4rem 1.1rem; }
.ticket-date{ font-family:var(--font-mono); font-size:0.85rem; letter-spacing:0.06em; color:var(--gold); text-transform:uppercase; }
.ticket-title{ font-family:var(--font-serif); font-weight:700; font-size:1.4rem; margin-top:0.6rem; color:var(--cream); word-wrap:break-word; }
.ticket-sub{ font-size:1rem; color:var(--muted); margin-top:0.3rem; white-space:pre-line; }
.ticket-divider{ position:relative; border-top:2px dashed rgba(243,233,214,0.18); }
.ticket-divider::before, .ticket-divider::after{ content:""; position:absolute; top:50%; transform:translateY(-50%); width:20px; height:20px; border-radius:50%; background:var(--bg); }
.ticket-divider::before{ left:-10px; } .ticket-divider::after{ right:-10px; }
.ticket-bottom{ padding:1.1rem 1.4rem 1.4rem; display:flex; align-items:center; justify-content:space-between; gap:0.8rem; }
.ticket-bottom-stack{ flex-direction:column; align-items:stretch; gap:0.7rem; }
.ticket-meta{ display:flex; flex-direction:column; font-family:var(--font-mono); font-size:0.92rem; color:var(--muted); gap:0.15rem; }
.ticket-meta strong{ color:var(--amber); font-weight:500; }
.ticket-time-row{ display:block; }
.ticket-price{ color:var(--muted); font-size:0.85rem; }
.ticket-btn{ border:1px solid var(--gold); color:var(--gold-bright); font-size:0.92rem; text-transform:uppercase; padding:0.85rem 1.3rem; border-radius:999px; white-space:nowrap; }
.ticket-cancelled{ opacity:0.6; } .ticket-cancelled .ticket-date{ color:var(--danger); }
.ticket-free-note{ display:inline-block; padding:0.55rem 1.1rem; border:1px solid var(--gold); border-radius:999px; color:var(--gold); font-family:var(--font-mono); font-size:0.78rem; text-transform:uppercase; white-space:nowrap; }
.ticket-free-special{ display:inline-block; padding:0.6rem 1.2rem; background:var(--gold); border-radius:999px; color:var(--bg); font-family:var(--font-mono); font-size:0.78rem; font-weight:600; text-transform:uppercase; text-align:center; }
.previa-oculta .ticket{ opacity:0.4; }

.acciones{ margin-top:26px; }
.separador{ height:1px; background:var(--line); margin:26px 0; }

/* Usuarios */
.tarjeta{ background:var(--charcoal); border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:12px; }
.usuario-fila{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.usuario-nombre{ font-weight:600; font-size:1.05rem; word-wrap:break-word; }
.usuario-acciones{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.usuario-acciones button{ flex:1 1 140px; min-height:48px; border-radius:12px; border:1px solid var(--line); background:none; color:var(--cream); font-weight:600; font-size:0.92rem; padding:8px 10px; }
.usuario-acciones button.peligro{ border-color:var(--danger); color:#F0A79A; }
.invitacion{ text-align:center; }
.invitacion h2{ font-family:var(--font-display); font-size:1.8rem; letter-spacing:0.03em; }
.qr{ display:inline-block; background:#fff; padding:14px; border-radius:12px; margin:14px auto; }
.qr img, .qr canvas{ display:block; width:220px; height:220px; }
.link-invitacion{ width:100%; font-family:var(--font-mono); font-size:0.8rem; padding:10px; border-radius:10px; border:1px solid var(--line); background:var(--bg); color:var(--cream); margin:6px 0 14px; }

/* Ventana de confirmación y avisos */
.capa{ position:fixed; inset:0; z-index:50; background:rgba(0,0,0,0.7); display:flex; align-items:flex-end; justify-content:center; padding:16px; }
.ventana{ width:100%; max-width:480px; background:var(--charcoal-2); border:1px solid var(--line); border-radius:18px; padding:22px 18px 18px; }
.ventana h2{ font-family:var(--font-display); font-size:1.9rem; letter-spacing:0.03em; margin-bottom:8px; }
.ventana p{ color:var(--muted); margin-bottom:18px; }
.ventana input{ margin-bottom:16px; }
.toast{ position:fixed; left:16px; right:16px; top:16px; z-index:60; max-width:480px; margin:0 auto; background:var(--charcoal-2); border:1px solid var(--gold); color:var(--cream); border-radius:14px; padding:14px 16px; font-weight:500; box-shadow:0 8px 28px rgba(0,0,0,0.6); }
.toast.error{ border-color:var(--danger); }
.cargando{ text-align:center; color:var(--muted); padding:40px 0; }

/* App instalada: respetar la muesca y la barra de inicio del iPhone */
header{ padding-top:calc(12px + env(safe-area-inset-top)); padding-left:calc(16px + env(safe-area-inset-left)); padding-right:calc(16px + env(safe-area-inset-right)); }
.flotante{ bottom:calc(16px + env(safe-area-inset-bottom)); }
.acceso{ padding-top:env(safe-area-inset-top); }
.toast{ top:calc(16px + env(safe-area-inset-top)); }
.capa{ padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
.pasos-instalar{ text-align:left; margin:0 0 20px; padding-left:22px; color:var(--cream); }
.pasos-instalar li{ margin-bottom:10px; }
.btn-texto{ display:block; width:100%; background:none; border:none; color:var(--gold-bright); text-decoration:underline; padding:14px 0; font-size:0.95rem; }

/* Botón flotante: ancho entre márgenes (sin esto, width:100% lo saca de la pantalla) */
.flotante{ width:auto; left:calc(16px + env(safe-area-inset-left)); right:calc(16px + env(safe-area-inset-right)); }
/* Sin zoom por doble toque, sin menú al mantener presionado y sin seleccionar texto (salvo en campos) */
html, body{ touch-action:manipulation; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
input, textarea{ -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; }
/* iPhone hace zoom al tocar un campo con letra menor a 16px */
.link-invitacion{ font-size:16px; }

/* Inicio y editor del sitio web */
.opcion-grande{ display:block; width:100%; text-align:left; background:var(--charcoal); border:1px solid var(--gold); border-radius:16px; padding:22px 18px; margin-bottom:14px; color:var(--cream); }
.opcion-grande b{ display:block; font-family:var(--font-display); font-size:2rem; letter-spacing:0.04em; font-weight:400; color:var(--gold-bright); }
.opcion-grande span{ color:var(--muted); font-size:0.95rem; }
.fotos{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin-bottom:10px; }
.foto{ position:relative; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--charcoal); }
.foto img{ display:block; width:100%; aspect-ratio:1/1; object-fit:contain; background:#000; }
.foto .etiqueta-foto{ position:absolute; top:6px; left:6px; font-family:var(--font-mono); font-size:0.7rem; background:var(--gold); color:var(--bg); border-radius:999px; padding:2px 8px; }
.foto .barra{ display:flex; }
.foto .barra button{ flex:1; min-height:44px; border:none; border-top:1px solid var(--line); background:none; color:var(--cream); font-size:1.1rem; }
.foto .barra button + button{ border-left:1px solid var(--line); }
.foto .barra button.peligro{ color:#F0A79A; }
.foto .barra button:disabled{ opacity:0.3; }
.item-lista{ display:flex; gap:6px; align-items:center; margin-bottom:8px; }
.item-lista input{ flex:1; min-width:0; }
.item-lista button{ flex:0 0 42px; height:42px; border-radius:10px; border:1px solid var(--line); background:none; color:var(--cream); }
.item-lista button.peligro{ border-color:var(--danger); color:#F0A79A; }
.item-lista button:disabled{ opacity:0.3; }
.seccion-galeria{ border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:16px; background:var(--charcoal); }
.seccion-galeria .cabeza{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:12px; }
.seccion-galeria .cabeza b{ font-family:var(--font-mono); color:var(--gold); font-size:0.85rem; text-transform:uppercase; letter-spacing:0.08em; }
.botonera{ display:flex; gap:6px; }
.botonera button{ min-width:42px; height:42px; border-radius:10px; border:1px solid var(--line); background:none; color:var(--cream); padding:0 10px; }
.botonera button.peligro{ border-color:var(--danger); color:#F0A79A; }
.botonera button:disabled{ opacity:0.3; }
.agregar-fotos{ display:block; width:100%; min-height:52px; border:1px dashed var(--gold); border-radius:12px; color:var(--gold-bright); text-align:center; padding:14px; cursor:pointer; }
.agregar-fotos input{ display:none; }