@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

:root{
  --bg: #0b111a;
  --panel: #101a26;
  --panel-alt: #131f2b;
  --panel-raised: #18232f;
  --border: #2b313d;
  --border-soft: rgba(255,255,255,0.10);
  --text: #f5f7fa;
  --text-muted: #aab3c2;
  --text-dim: #6b7484;
  --gold: #d6aa55;
  --gold-bright: #e8c675;
  --terracota: #e96b50;
  --confirmed: #47b881;
  --confirmed-bg: rgba(71,184,129,0.14);
  --pending: #4fb0c9;
  --pending-bg: rgba(79,176,201,0.14);
  --walkin: #9aa3b2;
  --walkin-bg: rgba(154,163,178,0.14);
  --cancelled: #e5636a;
  --cancelled-bg: rgba(229,99,106,0.14);
  /* Variables específicas para el nuevo "Resumen del día" (tarjetas tipo
     informe) — no reemplazan las de arriba, se suman para ese componente. */
  --rdd-marfil: #f4efe5;
  --rdd-marfil-text: #2b2418;
  --rdd-marfil-text-dim: #8a7a5c;
  --rdd-marfil-icon: #7b5513;
  --rdd-panel: #171e27;
  --rdd-panel-border: #2a3440;
  --rdd-amber: #e9aa35;
  --rdd-blue: #7dc7e8;
  --radius: 10px;
  --radius-lg: 16px;
}
*{box-sizing:border-box; margin:0; padding:0;}
/* Seguro global anti-desplazamiento horizontal: si algún elemento suelto
   (una tarjeta, un carrusel, una lista de mesas) se pasa del ancho de la
   pantalla, esto evita que arrastre TODA la página al lado — solo se ve
   recortado ese elemento puntual, en vez de mover la pantalla completa. */
html, body{overflow-x:hidden; max-width:100%; overscroll-behavior-x:none;}
body{
  background:
    radial-gradient(ellipse 900px 500px at 15% -8%, rgba(41,58,82,0.35) 0%, rgba(41,58,82,0) 60%),
    linear-gradient(180deg, #0d141f 0%, var(--bg) 45%, #0a0f17 100%);
  background-attachment:fixed;
  color:var(--text);
  font-family:'Inter',sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:var(--border); border-radius:4px;}
::-webkit-scrollbar-track{background:transparent;}

.mono{font-family:'JetBrains Mono',monospace;}
button{font-family:inherit; cursor:pointer; border:none;}
input,select,textarea{font-family:inherit;}

/* ===== HEADER ===== */
.app{display:flex; flex-direction:column; height:100vh;}
header{
  background:var(--panel);
  border-bottom:1px solid var(--border);
  padding:14px 20px;
  display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
  flex-shrink:0;
}
.brand{
  font-family:'Fraunces',serif; font-weight:700; font-size:19px;
  color:var(--gold-bright); letter-spacing:0.3px; white-space:nowrap;
}
.brand span{color:var(--text-dim); font-weight:400; font-size:13px; margin-left:8px;}

/* ===== ENCABEZADO FIJO CON LOGO (aparece en todas las pantallas) ===== */
.logo-header{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:14px 16px 10px; background:var(--panel); flex-shrink:0;
  border-bottom:1px solid var(--border-soft); position:relative;
}
.logo-header-img{height:44px; width:auto; display:block;}
.logo-header-sub{
  font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--text-dim);
}
/* ===== NUEVA RESERVA: botón fijo arriba a la izquierda, junto al logo ===== */
/* Visible siempre, sin importar en cuál de las 4 pestañas estés parado —
   antes era un botón flotante abajo y a veces tapaba contenido (por
   ejemplo, en Salones se montaba encima de las mesas). Aquí arriba no
   estorba nada. */
.btn-nueva-reserva-header{
  position:absolute; top:10px; left:12px; z-index:60;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:transparent; border:none; padding:0;
}
.btn-nueva-reserva-header .fab-icon{
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(150deg, var(--gold-bright) 0%, var(--gold) 55%, #a97f3f 100%);
  color:#1a1408;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:400; line-height:1;
  box-shadow:0 3px 10px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-nueva-reserva-header:active .fab-icon{background:var(--gold-bright); transform:scale(0.94);}
.btn-nueva-reserva-header span:last-child{
  font-size:9px; font-weight:700; color:var(--gold-bright); letter-spacing:0.2px;
  white-space:nowrap;
}
/* Control superior derecho: versión + usuario dentro de UNA misma cápsula,
   apiladas en dos líneas (versión arriba, "GF · Salir" abajo), en vez de
   dos elementos posicionados por separado — así nunca pueden quedar
   montados uno sobre el otro, sin importar la resolución. El número de
   versión visible aquí se sincroniza por JS desde .version-tag (ver
   sincronizarVersionHeader más abajo), que sigue siendo la única fuente
   del texto de versión a actualizar en cada release. */
.header-userbox{
  position:absolute; top:10px; right:12px; z-index:60;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:rgba(0,0,0,0.28); border:1px solid rgba(214,170,85,0.35);
  border-radius:16px; padding:8px 14px;
}
.header-userbox .header-version-line{
  font-size:10px; font-weight:600; color:var(--text-dim);
  font-family:'JetBrains Mono',monospace; letter-spacing:0.3px; white-space:nowrap;
}
.btn-cerrar-sesion-header{
  position:static; flex-direction:row; gap:4px;
  background:none; border:none; padding:0 !important;
}
.btn-cerrar-sesion-header span{font-size:11px !important; color:var(--text-dim) !important;}
.btn-cerrar-sesion-header span:first-child{color:var(--gold-bright) !important; font-weight:700;}
.date-nav{display:flex; align-items:center; gap:6px;}
.date-nav-solicitudes{
  justify-content:space-between; gap:10px; margin:12px 16px 0; padding:10px 12px;
  background:var(--panel-alt); border:1px solid var(--border); border-radius:14px;
  flex-shrink:0;
}
.date-nav-solicitudes .date-label{flex:1;}
.alerta-atrasadas{
  display:flex; align-items:flex-start; gap:10px;
  background:rgba(233,107,80,0.14); border-bottom:1px solid var(--terracota);
  color:#f0a998; font-size:12.5px; font-weight:600; padding:11px 16px;
  cursor:pointer; line-height:1.4; flex-shrink:0;
}
.alerta-atrasadas:hover{background:rgba(233,107,80,0.22);}
.alerta-atrasadas svg{flex-shrink:0;}
.alerta-atrasadas .alerta-atrasadas-icono{color:var(--terracota); margin-top:1px;}
.alerta-atrasadas .alerta-atrasadas-texto{flex:1;}
.alerta-atrasadas .alerta-atrasadas-chevron{color:var(--terracota); margin-top:3px;}
.date-nav button{
  width:30px; height:30px; border-radius:8px; background:var(--panel-alt);
  border:1px solid var(--border); color:var(--text-muted); font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.date-nav button:hover{color:var(--gold-bright); border-color:var(--gold);}
.date-label{
  font-size:13.5px; font-weight:600; min-width:190px; text-align:center;
  text-transform:capitalize; cursor:pointer; padding:4px 8px; border-radius:8px;
}
.date-label:hover{background:var(--panel-alt);}
.date-label .grupo{display:block; font-size:10.5px; font-weight:500; color:var(--text-dim); text-transform:none;}

.turnos{display:flex; gap:6px;}
/* Fila de acciones del día (Especiales / Bloquear día): va SIEMPRE en su
   propia línea, centrada, debajo del selector de fecha — antes estos
   botones quedaban sueltos a la derecha de las flechas de fecha, pegados
   sin relación visual clara con nada. width:100% obliga al contenedor
   flex-wrap del <header> a bajarla de línea siempre, en cualquier ancho. */
.dia-acciones-row{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.turno-cena-slot{
  display:flex; justify-content:flex-end; margin-left:auto;
  /* El ancho real lo fija alinearBotonCena() en JS, midiendo Cena 1 +
     Cena 2 en la fila de abajo, para que "Total Cena" quede exactamente
     del mismo ancho que esos dos botones juntos — nunca más ancho. */
  width:var(--cena-slot-w, 140px);
}
.turno-cena-slot .turno-pill{width:100%; justify-content:center;}
.turno-pill{
  background:var(--panel-alt); border:1px solid var(--border); color:var(--text-muted);
  padding:8px 14px; border-radius:999px; font-size:12.5px; font-weight:600;
  display:flex; align-items:center; gap:7px; transition:all .15s;
}
.turno-pill.off{opacity:.4;}
.turno-pill.active{
  background:linear-gradient(135deg, var(--gold) 0%, #a97f3f 100%);
  border-color:var(--gold); color:#1a1408;
}
.turno-pill .dot{width:6px; height:6px; border-radius:50%; background:currentColor;}

.new-btn{
  background:var(--gold); color:#1a1408; font-weight:700; font-size:13px;
  padding:9px 16px; border-radius:8px; display:flex; align-items:center; gap:6px;
}
.new-btn:hover{background:var(--gold-bright);}

/* ===== BOTÓN FLOTANTE GLOBAL: NUEVA RESERVA ===== */
/* Se movió arriba, junto al logo (ver .btn-nueva-reserva-header) — antes
   flotaba abajo a la derecha y en algunas pantallas (como Salones) tapaba
   contenido real. */
.clear-btn{
  background:transparent; color:var(--cancelled); font-weight:600; font-size:12px;
  padding:9px 13px; border-radius:8px; border:1px solid var(--cancelled);
  display:flex; align-items:center; gap:6px; white-space:nowrap;
}
.clear-btn:hover{background:var(--cancelled-bg);}
.especial-btn{
  background:transparent; color:var(--gold-bright); font-weight:600; font-size:12px;
  padding:9px 13px; border-radius:8px; border:1px solid var(--gold);
  display:flex; align-items:center; gap:6px; white-space:nowrap;
}
.especial-btn:hover{background:rgba(201,161,90,0.12);}
.especial-btn.activo{background:var(--gold); color:#1a1408;}
.especial-btn svg{width:15px; height:15px; flex-shrink:0;}
.especial-btn .especial-chevron{margin-left:auto; width:14px; height:14px; flex-shrink:0;}
.filtro-especiales-row{
  display:flex; justify-content:center; padding:10px 16px 0;
  background:var(--panel); flex-shrink:0;
}
.filtro-especiales-row .especial-btn{width:100%; justify-content:center; padding:11px;}

.buscador-cliente-wrap{
  display:flex; align-items:center; gap:8px; margin:10px 16px 0;
  background:var(--panel-alt); border:1px solid var(--border); border-radius:12px;
  padding:9px 12px; flex-shrink:0;
}
.buscador-cliente-icono{display:flex; align-items:center; opacity:.7;}
.buscador-cliente-icono svg{width:15px; height:15px;}
.buscador-cliente-input{
  flex:1; background:none; border:none; outline:none; color:var(--text);
  font-size:14px; font-family:inherit;
}
.buscador-cliente-input::placeholder{color:var(--text-dim);}
.buscador-cliente-limpiar{
  background:none; border:none; color:var(--text-dim); font-size:13px;
  cursor:pointer; padding:2px 4px;
}

/* ===== FILTRO POR FECHA DE RESERVA EN SOLICITUDES ===== */
/* Este filtro es únicamente visual: trabaja sobre las solicitudes que ya
   están cargadas y nunca escribe ni modifica datos en Firebase. */
.filtro-fecha-reserva-wrap{margin:10px 16px 0; flex-shrink:0;}
.filtro-fecha-reserva-btn{
  width:100%; display:flex; align-items:center; gap:9px; padding:11px 13px;
  background:var(--panel-alt); border:1px solid var(--gold); border-radius:12px;
  color:var(--gold-bright); font-family:inherit; font-size:12.5px; font-weight:700;
  cursor:pointer; text-align:left;
}
.filtro-fecha-reserva-btn:hover{background:rgba(201,161,90,0.10);}
.filtro-fecha-reserva-btn.activo{background:rgba(201,161,90,0.14);}
.filtro-fecha-reserva-btn svg{width:17px; height:17px; flex-shrink:0;}
.filtro-fecha-reserva-btn .filtro-fecha-texto{flex:1;}
.filtro-fecha-reserva-btn .filtro-fecha-chevron{transition:transform .18s;}
.filtro-fecha-reserva-btn.abierto .filtro-fecha-chevron{transform:rotate(180deg);}
.filtro-fecha-reserva-panel{
  display:none; margin-top:7px; padding:14px; background:var(--panel-alt);
  border:1px solid var(--border); border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
}
.filtro-fecha-reserva-panel.abierto{display:block;}
.filtro-fecha-reserva-titulo{
  text-align:center; color:var(--text); font-size:14px; font-weight:700;
  margin-bottom:12px;
}
.filtro-fecha-reserva-panel .cal-days-inline .cal-day{height:40px;}
.filtro-fecha-reserva-resumen{
  min-height:18px; margin-top:11px; padding-top:11px;
  border-top:1px solid var(--border-soft); color:var(--text-muted);
  font-size:11.5px; font-weight:600; text-align:center;
}
.filtro-fecha-reserva-acciones{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px;}
.filtro-fecha-aplicar,.filtro-fecha-limpiar{
  padding:10px 8px; border-radius:9px; font-family:inherit;
  font-size:12px; font-weight:700; cursor:pointer;
}
.filtro-fecha-aplicar{background:var(--gold); border:1px solid var(--gold); color:#1a1408;}
.filtro-fecha-limpiar{background:transparent; border:1px solid var(--gold); color:var(--gold-bright);}
.filtro-fecha-aplicar:disabled{opacity:.45; cursor:not-allowed;}

/* ===== RESUMEN DE SOLICITUDES DEL DÍA (arriba de la lista) ===== */
.resumen-sol-dia{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  padding:12px 16px 0; background:var(--panel);
}
.resumen-sol-card{
  background:var(--panel-alt); border:1px solid var(--border); border-radius:14px;
  padding:12px 6px; text-align:center;
}
.resumen-sol-card.total{background:rgba(230,180,90,0.14); border-color:var(--gold);}
.resumen-sol-icon{display:flex; align-items:center; justify-content:center; margin-bottom:4px; color:var(--text-dim);}
.resumen-sol-icon svg{width:16px; height:16px;}
.resumen-sol-card.total .resumen-sol-icon{color:var(--gold-bright);}
.resumen-sol-num{font-size:20px; font-weight:800; color:var(--text);}
.resumen-sol-card.total .resumen-sol-num{color:var(--gold-bright);}
.resumen-sol-label{font-size:10px; color:var(--text-muted); text-transform:uppercase; font-weight:700; margin-top:2px;}

/* ===== TABS + STATS BAR ===== */
.subbar{
  background:var(--panel); border-bottom:1px solid var(--border);
  padding:10px 20px; display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  flex-shrink:0;
}
.tabs{display:flex; gap:4px; background:var(--panel-alt); padding:3px; border-radius:9px;}
.tab{
  padding:7px 14px; border-radius:7px; font-size:12.5px; font-weight:600;
  color:var(--text-muted); background:transparent;
}
.tab.active{background:var(--panel-raised); color:var(--gold-bright);}
.stats{display:flex; gap:16px; margin-left:auto; flex-wrap:wrap;}
.stat{font-size:12px; color:var(--text-muted); display:flex; gap:6px; align-items:baseline;}
.stat b{color:var(--text); font-size:14px; font-family:'JetBrains Mono',monospace;}
.stat .max{color:var(--text-dim);}

/* ===== MAIN LAYOUT ===== */
/* "Por día" ahora funciona igual en computador que en celular: un solo panel
   visible a la vez (Lista / Plano / Resumen, controlado por las pestañas de
   arriba), sin scroll propio — toda la pantalla scrollea de una sola pieza
   (ver #pantallaPorDia más abajo). Antes en computador se veían las tres
   columnas al mismo tiempo, cada una con su propio scroll interno; eso, sumado
   al bloque de calendario que nunca se encoge, era lo que generaba el efecto
   de "dos scrolls" y contenido que no se alcanzaba a bajar del todo. */
main{flex:none; display:block; overflow:visible; min-height:0;}
.panel-lista, .panel-plano, .panel-resumen{display:none; min-height:0; overflow-y:visible;}
.panel-lista.mobile-active, .panel-plano.mobile-active, .panel-resumen.mobile-active{display:block;}
.panel-lista{width:100%; padding:14px;}
.panel-plano{padding:8px;}
.panel-resumen{padding:20px;}

/* ===== RESERVATION CARDS ===== */
.res-card{
  background:var(--panel-alt); border:1px solid var(--border-soft); border-radius:var(--radius);
  padding:12px 13px; margin-bottom:8px; cursor:pointer; transition:border-color .15s;
}
.res-card:hover{border-color:var(--gold);}
.cancelada-card{opacity:.55;}
.solicitud-card{border-color:#c79bff; border-width:1.5px;}
.lista-espera-card{border-color:#e8a33d; border-width:1.5px;}
.solicitud-hint{
  margin-top:8px; padding-top:8px; border-top:1px dashed rgba(199,155,255,0.3);
  font-size:11px; color:#c79bff; font-weight:600; line-height:1.4;
}
.aprobacion-hint{
  margin-top:8px; padding-top:8px; border-top:1px dashed rgba(232,163,61,0.3);
  font-size:11px; color:#e8a33d; font-weight:600; line-height:1.4;
}
.aprobada-tag{
  font-size:10px; font-weight:700; color:#e8a33d; border:1px solid #e8a33d;
  padding:2px 7px; border-radius:999px;
}
.btn-ver-comprobante{
  display:inline-flex; align-items:center; gap:4px; min-height:22px; line-height:1.3;
  font-family:inherit; font-size:10px; font-weight:700; color:var(--confirmed); border:1px solid var(--confirmed);
  background:transparent; -webkit-appearance:none; appearance:none;
  padding:2px 8px; border-radius:999px; cursor:pointer; flex-shrink:0; white-space:nowrap;
}
.modal-comprobante{
  background:rgba(71,184,129,0.08); border:1px solid var(--confirmed); border-radius:10px;
  padding:12px 14px; margin-top:-6px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.modal-comprobante-txt{font-size:12.5px; color:var(--confirmed); font-weight:600;}
.modal-comprobante .btn-ver-comprobante{padding:6px 12px; font-size:11.5px;}
.res-top{display:flex; justify-content:space-between; align-items:flex-start; gap:8px;}
.res-top-right{display:flex; flex-direction:column; align-items:flex-end; gap:4px;}
.edit-hint{font-size:10px; color:var(--text-dim); font-weight:500;}
.res-hora{font-family:'JetBrains Mono',monospace; font-weight:600; font-size:14px; color:var(--gold-bright);}
.res-hora-salida{font-size:11.5px; font-weight:500; color:var(--text-muted);}
.btn-descargar-informe{
  display:block; width:calc(100% - 32px); margin:14px 16px; padding:12px;
  background:var(--panel-alt); border:1px solid var(--border); color:var(--gold-bright);
  border-radius:12px; font-size:13.5px; font-weight:600; cursor:pointer;
}
.btn-descargar-informe:active{border-color:var(--gold);}

/* ===== INFORME IMPRIMIBLE (overlay dentro de la misma app) ===== */
.modal.informe-modal{
  max-width:900px; width:100%; background:#fff; color:#1a1a1a; padding:18px;
  max-height:92vh; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y;
}
.informe-toolbar{display:flex; gap:10px; margin-bottom:16px; position:sticky; top:0; background:#fff; padding-bottom:8px;}
.informe-header h1{font-size:19px; margin:0 0 2px; color:#1a1a1a;}
.informe-subtitulo{color:#555; font-size:13px; margin-bottom:18px;}
.informe-turno{margin-bottom:26px;}
.informe-turno h2{font-size:15px; background:#f1e6cf; color:#1a1408; padding:8px 10px; border-radius:6px; margin-bottom:8px;}
.informe-turno table{width:100%; border-collapse:collapse; font-size:11.5px; color:#1a1a1a;}
.informe-turno th, .informe-turno td{border:1px solid #ccc; padding:5px 6px; text-align:left; vertical-align:top;}
.informe-turno th{background:#faf6ec;}
/* Al imprimir (o "Guardar como PDF"), solo se imprime el informe — el
   resto de la app (que sigue detrás, cargada normalmente) queda oculto.
   Esto es lo que evita tener que abrir una pestaña/ventana nueva: ya no
   hay que salir de la app para imprimir, y "Cerrar" solo cierra el
   informe sin afectar nada más. */
/* Al imprimir el informe (con o sin plano de evento adentro), la hoja
   queda mucho mejor en horizontal — tanto la tabla como el plano son más
   anchos que altos. "11in 8.5in" (ancho × alto) es carta horizontal —
   se usa así, con las medidas explícitas, en vez de la palabra clave
   "landscape", porque algunos navegadores (incluido Safari en iPhone al
   "Guardar como PDF") la respetan de forma más confiable. */
@page{ size: 11in 8.5in; margin: 10mm; }
@media print{
  /* OJO: antes esto usaba visibility:hidden en todo body *, lo cual deja
     el resto de la app (con sus imágenes enormes en base64: logo, fotos
     de eventos, etc.) todavía "presente" para el motor de impresión,
     solo invisible — eso inflaba muchísimo el PDF y en el celular hacía
     que Safari cortara la impresión a la mitad (una sola hoja de varias).
     display:none sí saca esos elementos del flujo por completo. */
  body > *:not(#overlayInforme){display:none !important;}
  #overlayInforme{position:static; display:block !important; background:#fff; padding:0; inset:auto;}
  #overlayInforme .informe-modal{position:static; max-width:none; max-height:none; overflow:visible; box-shadow:none; border:none; padding:12px; margin:0;}
  .informe-toolbar{display:none;}
  .informe-turno, .ie-total-card, .ie-bloque-gestion{break-inside:avoid; page-break-inside:avoid;}
  .informe-header{break-after:avoid; page-break-after:avoid;}
  table{break-inside:auto;}
  tr{break-inside:avoid; page-break-inside:avoid;}
  thead{display:table-header-group;}
  /* El plano tiene ~100 mesas, cada una con esquinas redondeadas y un
     reborde/outline propio — motor de impresión de Safari genera un PDF
     bastante más pesado por tener que rasterizar cada esquina curva y
     cada capa de sombra por separado. Sin tocar el tamaño de letra ni la
     posición de nada (o sea, sin perder legibilidad), aquí se aplanan
     esas esquinas y se les quita cualquier sombra — en papel, un cuadrito
     con esquina recta se ve prácticamente igual a uno con esquina curva
     de 2px, pero el archivo pesa bastante menos. */
  .plano-mesa-core, .plano-cell, .plano-canvas-app, .plano-canvas-scroll-wrap,
  .plano-zoneblock, .evento-promotor-banner{
    border-radius:0 !important; box-shadow:none !important;
  }
  .plano-canvas-scroll-wrap, .plano-canvas-app{break-inside:avoid; page-break-inside:avoid;}
  .plano-mesa-core.p-ocupada, .plano-mesa-core.p-pendiente{outline-width:1px !important;}
}
.ie-total-card{
  background:#f1e6cf; border:1px solid #d4af37; border-radius:8px;
  padding:16px 10px; text-align:center; margin-bottom:16px;
}
.ie-total-num{font-size:38px; font-weight:800; color:#1a1408; line-height:1;}
.ie-total-label{font-size:12px; font-weight:700; color:#6b5a2a; letter-spacing:.5px; margin-top:4px;}
.ie-bloque-gestion{border-radius:8px; padding:12px 14px; margin-bottom:16px;}
.ie-bloque-general{background:#fdf2f2; border:1px solid #e8b8b8;}
.ie-bloque-especial{background:#fdf8ea; border:1px solid #e8c96a;}
.ie-bloque-dato{background:#f3f3f3; border:1px solid #d8d8d8;}
.ie-fila-metrica{display:flex; justify-content:space-between; gap:10px; font-size:13px; color:#1a1a1a; padding:3px 0;}
.ie-formula{margin-top:8px; font-size:11px; color:#999; font-family:monospace;}
.ie-dato-pill{
  background:#e2e2e2; color:#555; font-size:10.5px; font-weight:700;
  padding:3px 9px; border-radius:20px; white-space:nowrap;
}
.btn-toggle-hora-salida{
  background:none; border:1px dashed var(--border); color:var(--text-dim);
  font-size:12.5px; padding:9px 12px; border-radius:9px; width:100%; text-align:left; cursor:pointer;
}
.btn-toggle-hora-salida.abierto{color:var(--gold-bright); border-color:var(--gold);}
.btn-confirmar-hora{
  width:100%; padding:12px; border-radius:10px; margin-top:12px; cursor:pointer;
  background:var(--panel-alt); border:1.5px solid var(--gold); color:var(--gold-bright);
  font-size:13.5px; font-weight:700;
}
.btn-confirmar-hora.confirmada{background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:#1a1408; border-color:var(--gold-bright);}
.res-nombre{font-weight:600; font-size:13.5px; margin-top:3px;}
.res-meta{font-size:11.5px; color:var(--text-muted); margin-top:4px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; max-width:100%;}
.res-meta span{overflow-wrap:anywhere; max-width:100%;}
.tel-destacado{font-size:15px !important; font-weight:800; color:#ffffff !important; letter-spacing:.3px;}
.contacto-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; font-size:16px;
  text-decoration:none; flex-shrink:0; background:var(--panel-raised);
  border:1px solid var(--border);
}
.contacto-icon-btn:active{transform:scale(0.92);}
.contacto-icon-btn.contacto-llamar{border-color:#4a9eff;}
.contacto-icon-btn.contacto-whatsapp{border-color:#25d366;}
.contacto-icon-btn.contacto-email{border-color:#e8a33d;}
.contacto-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:10px; padding-top:10px; flex-wrap:wrap;
  border-top:1px dashed rgba(255,255,255,0.14);
}
.contacto-row-iconos{display:flex; gap:20px; flex-shrink:0;}
.categoria-cliente-badge{
  font-size:10.5px; font-weight:700; padding:5px 10px; border-radius:20px;
  white-space:nowrap; flex-shrink:0; margin-left:auto;
  font-family:inherit; cursor:pointer;
}
.categoria-cliente-badge:active{transform:scale(0.96);}
.categoria-cliente-badge.cat-nuevo{background:rgba(125,199,232,0.15); color:var(--rdd-blue, #7dc7e8); border:1px solid rgba(125,199,232,0.4);}
.categoria-cliente-badge.cat-a{background:rgba(71,184,129,0.15); color:var(--confirmed); border:1px solid rgba(71,184,129,0.4);}
.categoria-cliente-badge.cat-aa{background:rgba(214,170,85,0.18); color:var(--gold-bright); border:1px solid rgba(214,170,85,0.5);}
.categoria-cliente-badge.cat-aaa{background:rgba(233,107,80,0.18); color:var(--terracota); border:1px solid rgba(233,107,80,0.5);}
/* Fila fija de "identificación" (código, hora de solicitud, iniciales de
   quien la tomó): siempre abajo del todo y pegada a la derecha, separada
   de los demás datos — así la tarjeta se ve ordenada sin importar cuántos
   datos tenga arriba (mesa, celular, comprobante, etc.), en vez de que
   estas tres cosas queden saltando de posición según lo que quepa. */
.res-firma, .sc-firma{
  display:flex; justify-content:flex-end; align-items:center; gap:8px;
  margin-top:8px; padding-top:8px; border-top:1px dashed var(--border);
}
.badge{
  font-size:10px; font-weight:700; padding:3px 8px; border-radius:999px;
  text-transform:uppercase; letter-spacing:0.3px; white-space:nowrap;
}
.badge.confirmada{background:var(--confirmed-bg); color:var(--confirmed);}
.badge.pendiente{background:var(--pending-bg); color:var(--pending);}
.badge.walkin{background:var(--walkin-bg); color:var(--walkin);}
.badge.cancelada{background:var(--cancelled-bg); color:var(--cancelled);}
.badge.solicitud{background:rgba(180,120,255,0.16); color:#c79bff;}
.badge.pendiente_aprobacion{background:rgba(232,163,61,0.16); color:#e8a33d;}
.badge.mensaje_enviado{background:rgba(154,163,178,0.16); color:#9aa3b2;}
.badge.lista_espera{background:rgba(232,163,61,0.16); color:#e8a33d;}
.badge.turno-badge{background:var(--panel-raised); color:var(--text-dim); border:1px solid var(--border);}
.badge.franja-badge{background:rgba(201,161,90,0.16); color:var(--gold); border:1px solid var(--gold);}
.vip-tag{
  font-size:10px; font-weight:700; color:var(--gold-bright); border:1px solid var(--gold);
  padding:2px 7px; border-radius:999px;
}
.especial-tag{
  font-size:10px; font-weight:700; color:#1a1408; background:var(--gold);
  padding:2px 7px; border-radius:999px;
}
.codigo-reserva-tag{
  font-size:10px; font-weight:700; font-family:'JetBrains Mono',monospace;
  color:var(--text-dim); background:var(--panel-raised); border:1px solid var(--border);
  padding:2px 7px; border-radius:999px; letter-spacing:0.3px;
}
.empty-state{color:var(--text-dim); font-size:12.5px; text-align:center; padding:40px 10px;}

/* ===== AVISO FLOTANTE: SOLICITUD NUEVA ===== */
/* Cuadrito translúcido que aparece arriba de TODO (sobre cualquier
   pestaña en la que esté el usuario) cada vez que llega una solicitud
   nueva por Firestore, con sonido (ver sonarAvisoNuevaSolicitud). Se
   queda visible — no desaparece solo — hasta que Guillermo lo cierre
   con la X o entre a la pestaña "Solicitudes"; mientras tanto, si
   llegan más solicitudes sin que lo haya cerrado, el contador sube
   ("Tienes 2 solicitudes nuevas...", "Tienes 3...") en vez de abrir
   varios avisos encima uno de otro. */
.toast-nueva-solicitud{
  position:fixed; top:14px; left:50%; z-index:300;
  width:min(92vw, 380px);
  display:flex; align-items:center; gap:10px;
  background:rgba(19,31,44,0.78); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(214,170,85,0.5); border-radius:14px;
  padding:12px 12px 12px 14px; color:var(--text);
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
  opacity:0; transform:translateX(-50%) translateY(-130%);
  transition:transform .35s cubic-bezier(.2,.9,.3,1.3), opacity .3s ease;
  pointer-events:none;
}
.toast-nueva-solicitud.visible{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.toast-bell{font-size:18px; flex-shrink:0;}
.toast-nueva-solicitud span:not(.toast-bell){flex:1; font-size:13px; font-weight:700; line-height:1.35;}
.toast-cerrar{
  background:rgba(255,255,255,0.08); border:none; color:var(--text-muted);
  font-size:13px; width:24px; height:24px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.toast-cerrar:active{background:rgba(255,255,255,0.16);}

.input-compacto{max-width:150px;}
/* ===== SEGURO DE FECHA Y HORA (reservas ya agendadas) ===== */
.hora-fecha-lock-banner{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:rgba(230,180,90,0.12); border:1px solid var(--gold); border-radius:10px;
  padding:9px 12px; margin-bottom:10px; font-size:12.5px; font-weight:700; color:var(--gold-bright);
}
.hora-fecha-lock-banner button{
  margin-left:auto; background:var(--gold); color:#1a1408; border:none;
  border-radius:8px; padding:6px 12px; font-size:12px; font-weight:700;
}
.bloqueado-visual{opacity:0.45; pointer-events:none; filter:grayscale(0.3);}
/* ===== ABONOS DEL COVER (pagos parciales, uno o varios) ===== */
.cover-abonos-lista{display:flex; flex-direction:column; gap:6px; margin-top:6px;}
.cover-abono-item{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:var(--panel-alt); border:1px solid var(--border); border-radius:8px;
  padding:7px 10px; font-size:12.5px;
}
.cover-abono-item-acciones{display:flex; align-items:center; gap:4px; flex-shrink:0;}
.cover-abono-ver, .cover-abono-quitar{
  background:none; border:none; font-size:13px;
  width:24px; height:24px; border-radius:50%; flex-shrink:0;
}
.cover-abono-ver{color:var(--gold-bright);}
.cover-abono-ver:active{background:rgba(214,170,85,0.15);}
.cover-abono-quitar{color:var(--cancelled);}
.cover-abono-quitar:active{background:rgba(229,99,106,0.15);}
.link-quitar-abono-legacy{
  background:none; border:none; padding:0; font:inherit; font-size:inherit;
  color:var(--cancelled); text-decoration:underline; cursor:pointer;
}
#coverAbonosResumen{font-size:12.5px; font-weight:700; margin-top:8px;}
#coverAbonosResumen.pendiente{color:#e8a33d;}
#coverAbonosResumen.completo{color:var(--confirmed);}
.nuevo-abono-cover-form{
  margin-top:10px; background:var(--panel); border:1px solid var(--border);
  border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:10px;
}
.nuevo-abono-cover-form .field{margin:0;}
.nuevo-abono-cover-botones{display:flex; gap:8px;}
.nuevo-abono-cover-botones .btn{flex:1; padding:9px; font-size:13px;}
.nuevo-abono-cover-aviso{
  font-size:11.5px; font-weight:700; color:#e8a33d; text-align:center;
  background:rgba(232,163,61,0.12); border:1px solid #e8a33d; border-radius:8px;
  padding:6px 8px;
}
.btn-cargar-abono{
  font-weight:800 !important; box-shadow:0 0 0 2px rgba(230,180,90,0.25);
}

/* ===== FILA DE ESTADO (conexión + presencia) ===== */
/* Antes "Conectado a la base de datos" y "En línea ahora" eran dos franjas
   completas apiladas, cada una ocupando el ancho entero — se veían como dos
   componentes sueltos y desperdiciaban alto. Ahora van en la misma fila,
   cada una dentro de su propia cápsula compacta; en pantallas angostas se
   envuelven a la línea siguiente pero conservan la forma de cápsula. */
.estado-row{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px 16px; background:var(--panel); border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.estado-conexion{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px; font-size:11.5px; font-weight:600; color:var(--text-muted);
  background:var(--panel-alt); border:1px solid var(--border); border-radius:999px;
  flex-shrink:0;
}
.estado-conexion-dot{
  width:8px; height:8px; border-radius:50%; background:#e8a33d; flex-shrink:0;
  box-shadow:0 0 0 3px rgba(232,163,61,0.2);
}
.estado-conexion.conectado{color:var(--confirmed);}
.estado-conexion.conectado .estado-conexion-dot{background:var(--confirmed); box-shadow:0 0 0 3px rgba(71,184,129,0.2);}
.estado-conexion.desconectado{color:var(--cancelled);}
.estado-conexion.desconectado .estado-conexion-dot{background:var(--cancelled); box-shadow:0 0 0 3px rgba(229,99,106,0.2);}
.btn-forzar-conexion{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; font-size:11.5px; font-weight:600;
  color:var(--cancelled); background:var(--panel-alt); border:1px solid var(--cancelled);
  border-radius:999px; flex-shrink:0; cursor:pointer;
}
.btn-forzar-conexion:active{opacity:0.7;}

/* ===== USUARIOS EN LÍNEA (solo visible para Administrador) ===== */
.usuarios-en-linea{
  display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:6px 12px; font-size:11px;
  background:var(--panel-alt); border:1px solid var(--border); border-radius:999px;
  flex-shrink:0;
}
.usuarios-en-linea-label{color:var(--text-muted); font-weight:600; white-space:nowrap; display:inline-flex; align-items:center; gap:6px;}
.usuarios-en-linea-lista{display:flex; gap:6px; flex-wrap:wrap;}
.usuario-en-linea-chip{
  display:inline-flex; align-items:center; gap:5px;
  background:var(--panel-raised); border:1px solid var(--border); border-radius:20px;
  padding:3px 9px 3px 7px; font-size:11px; font-weight:700; color:var(--text);
}
.usuario-en-linea-chip .punto{
  width:6px; height:6px; border-radius:50%; background:var(--confirmed);
  box-shadow:0 0 0 2px rgba(71,184,129,0.25); flex-shrink:0;
}

/* ===== Banner del evento (solo para el rol "Promotor de eventos") ===== */
.evento-promotor-banner{
  margin:0 auto 12px; border-radius:14px; overflow:hidden;
  border:2px solid var(--gold); box-shadow:0 0 14px 1px rgba(201,161,90,0.35);
  background:var(--panel-alt);
  /* La única forma de bajarle la altura SIN recortar nada de la
     publicidad es angostar el contenedor — como la imagen escala
     manteniendo su proporción real (height:auto, abajo), un ancho menor
     baja la altura en la misma proporción, completa, solo más chica. */
  max-width:68%;
}
.evento-promotor-banner img{ width:100%; height:auto; display:block; }
.evento-promotor-banner-texto{
  padding:9px 12px; font-size:13px; font-weight:700; color:var(--gold-bright);
  text-align:center; line-height:1.35;
}
/* ===== APP TOGGLE (Solicitudes / Por día / Salones) ===== */
.app-toggle{
  display:flex; background:var(--panel); border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.app-toggle-btn{
  flex:1; padding:11px 6px; background:transparent; color:var(--text-muted);
  font-size:12px; font-weight:700; border-bottom:2.5px solid transparent;
  border-right:1px solid var(--border-soft);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  text-align:center;
}
.app-toggle-btn:last-child{border-right:none;}
.app-toggle-icon{font-size:17px; line-height:1; display:flex; align-items:center; justify-content:center;}
.app-toggle-icon svg{width:18px; height:18px; display:block; stroke:currentColor;}
.app-toggle-label{display:flex; align-items:center; gap:5px; white-space:nowrap;}
.app-toggle-btn.active{color:var(--gold-bright); border-bottom-color:var(--gold);}
.badge-count{
  background:#c79bff; color:#1a1230; font-size:11px; font-weight:800;
  padding:1px 7px; border-radius:999px; min-width:18px;
}
.badge-count.zero{background:var(--panel-raised); color:var(--text-dim);}
.header-simple{
  background:var(--panel); border-bottom:1px solid var(--border); padding:14px 20px; flex-shrink:0;
}
#pantallaSolicitudes, #pantallaPorDia, #pantallaSalones, #pantallaConfig{display:flex; flex-direction:column; flex:1; min-height:0;}
/* Las 4 pantallas (Solicitudes, Por día, Salones, Config) scrollean como una
   sola pieza cada una — sin scrolls anidados adentro. Antes cada pantalla
   tenía su lista/panel interno con su propio overflow-y:auto por separado,
   lo que generaba DOS scrolls metidos uno dentro del otro en computador (uno
   en la pantalla completa y otro adentro del panel): se sentía trabado y a
   veces no dejaba bajar del todo. Ahora es igual en cualquier tamaño de
   pantalla — un solo scroll por pantalla, como en celular pero más grande. */
#pantallaSolicitudes, #pantallaPorDia, #pantallaSalones, #pantallaConfig{overflow-y:auto; -webkit-overflow-scrolling:touch;}

/* ===== SOLICITUDES SCREEN ===== */
/* La lista de tarjetas NO tiene su propio scroll — solo scrollea la
   pantalla completa (#pantallaSolicitudes, arriba). */
.solicitudes-panel{flex:none; overflow-y:visible; padding:16px; min-height:0;}
.solicitudes-empty{color:var(--text-dim); font-size:13px; text-align:center; padding:60px 20px; line-height:1.6;}
.solicitud-card-global{
  background:var(--panel-alt); border:1.5px solid #c79bff; border-radius:var(--radius);
  padding:13px; margin-bottom:10px; cursor:pointer;
}
.solicitud-card-global.card-por-aprobar{border-color:#e8a33d;}
.solicitud-card-global.card-por-aprobar .sc-fecha{color:#e8a33d;}
.solicitud-card-global.card-aprobada{border-color:var(--confirmed); opacity:.85;}
.solicitud-card-global.card-aprobada .sc-fecha{color:var(--confirmed);}
.solicitud-card-global.card-mensaje-enviado{border-color:#9aa3b2; opacity:.85;}
.solicitud-card-global.card-lista-espera{border-color:#e8a33d;}
.solicitud-card-global.card-lista-espera .sc-fecha{color:#e8a33d;}
.mensaje-enviado-hint{
  margin-top:8px; padding-top:8px; border-top:1px dashed rgba(154,163,178,0.3);
  font-size:11px; color:#9aa3b2; font-weight:600; line-height:1.4;
}
.historial-aprobada-hint{
  margin-top:8px; padding-top:8px; border-top:1px dashed rgba(71,184,129,0.3);
  font-size:11px; color:var(--confirmed); font-weight:600; line-height:1.4;
}
.solicitud-card-global .sc-top{display:flex; justify-content:space-between; align-items:flex-start; gap:8px;}
.solicitud-card-global .sc-fecha{font-size:11.5px; color:#c79bff; font-weight:700; text-transform:capitalize;}
.solicitud-card-global .sc-hora{font-family:'JetBrains Mono',monospace; font-weight:600; font-size:14px; color:var(--gold-bright); margin-top:2px;}
.solicitud-card-global .sc-nombre{font-weight:600; font-size:14px; margin-top:2px;}
.solicitud-card-global .sc-meta{font-size:11.5px; color:var(--text-muted); margin-top:6px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; max-width:100%;}
.solicitud-card-global .sc-meta span{overflow-wrap:anywhere; max-width:100%;}
.solicitud-card-global .sc-obs{font-size:11.5px; color:#c79bff; margin-top:8px; padding-top:8px; border-top:1px dashed rgba(199,155,255,0.3); line-height:1.4;}

/* ===== RESUMEN DEL DÍA POR TURNO (siempre visible, no depende del filtro) ===== */
.resumen-dia-turnos{
  margin-top:14px; padding:14px; background:var(--panel-raised);
  border:1px solid var(--gold); border-radius:12px;
}
.resumen-dia-titulo{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;
  color:var(--gold-bright); margin-bottom:2px; text-align:center;
}
.resumen-dia-fecha{
  font-size:11px; color:var(--text-dim); text-align:center; margin-bottom:10px;
}
.resumen-dia-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.resumen-dia-canceladas{
  margin-top:10px; padding-top:10px; border-top:1px dashed rgba(255,255,255,0.14);
  font-size:12px; font-weight:700; color:var(--cancelled); text-align:center;
}
.resumen-dia-card{
  background:var(--panel-alt); border-radius:8px; padding:8px 4px; text-align:center;
  border:1px solid transparent;
}
.resumen-dia-card.activo{border-color:var(--gold);}
.resumen-dia-card.total{background:rgba(230,180,90,0.14); border-color:var(--gold);}
.resumen-dia-card-label{font-size:9.5px; color:var(--text-dim); text-transform:uppercase; font-weight:700;}
.resumen-dia-card-num{font-size:20px; font-weight:800; color:var(--text); margin-top:2px;}
.resumen-dia-card-unidad{font-size:10px; font-weight:700; color:var(--text-dim); margin-left:3px;}
.resumen-dia-card.total .resumen-dia-card-num{color:var(--gold-bright);}
.resumen-dia-card-sub{font-size:10px; color:var(--text-dim); margin-top:1px;}

/* ===== RESUMEN DEL TURNO (al pie de la Lista) — tarjeta tipo informe,
   con fondo claro para que resalte y se sienta como un reporte impreso,
   en vez de mezclarse con el resto de la pantalla oscura. ===== */
.resumen-turno{
  margin-top:18px;
  background:linear-gradient(180deg, #faf6ee, #f2ebda);
  border-radius:18px;
  padding:20px 16px 18px;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
}
.resumen-turno-title{
  font-family:'Fraunces',serif; font-size:19px; font-weight:700; color:#5c3f16;
  margin-bottom:2px;
}
.resumen-turno-fecha{
  font-size:12px; color:#9c8a68; margin-bottom:16px; font-weight:600;
}
.resumen-grid-mini{display:flex; gap:10px; margin-bottom:14px;}
.resumen-mini{
  flex:1; background:var(--panel-alt); border:1px solid var(--border-soft); border-radius:var(--radius);
  padding:10px; text-align:center;
}
.resumen-mini-val{font-family:'JetBrains Mono',monospace; font-size:18px; font-weight:700; color:var(--text);}
.resumen-mini-label{font-size:11px; color:var(--text-muted); font-weight:600; margin-top:3px;}
.resumen-seccion{margin-bottom:13px; padding-bottom:13px; border-bottom:1px solid #e3d6b8;}
.resumen-seccion:last-of-type{border-bottom:none; margin-bottom:6px; padding-bottom:0;}
.resumen-seccion-head{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:8px;
}
.resumen-seccion-head > span:first-child{
  font-size:12px; font-weight:800; color:#5c3f16;
  text-transform:uppercase; letter-spacing:0.4px;
}
.resumen-seccion-head > span:last-child{
  font-family:'JetBrains Mono',monospace; font-size:17px; font-weight:800; color:#241d10;
}
.resumen-fila{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:12.5px; padding:7px 10px; background:#fffdf8; border-radius:8px; margin-bottom:5px;
  border-left:3px solid #c9a15a;
}
.resumen-fila-label{color:#3a2f1a; font-weight:600; overflow-wrap:anywhere;}
.resumen-fila-nombre{color:#9c8a68; font-weight:400;}
.resumen-fila-val{font-family:'JetBrains Mono',monospace; color:#5c3f16; font-weight:700; white-space:nowrap;}
.resumen-vacio{border-left-color:#e3d6b8; color:#a99c7f; font-style:italic;}
.resumen-subsalon{margin-bottom:10px; margin-left:4px;}
.resumen-subsalon-head{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:11.5px; font-weight:700; color:#5c3f16; margin-bottom:5px;
}
.resumen-total{
  display:flex; justify-content:space-between; align-items:center;
  background:#241d10;
  border-radius:14px; padding:16px;
  margin-top:8px;
}
.resumen-total > span:first-child{ font-size:13px; font-weight:700; color:#e9d9b3; }
.resumen-total > span:last-child{ font-family:'JetBrains Mono',monospace; font-size:21px; font-weight:800; color:#f0c869; }
.resumen-total-sub{font-size:10.5px; font-weight:500; color:#a99c7f;}

/* ===== RESUMEN DEL DÍA — componente nuevo (tarjetas + panel de estados +
   preferencia de mesa + franja de total). Usado en "Solicitudes" y
   "Por día". Namespace .rdd- para no chocar con nada más de la app. ===== */
.rdd{ margin-top:14px; }
.rdd-header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:14px; flex-wrap:wrap;
}
.rdd-titulo{
  font-family:'Fraunces',serif; font-size:22px; font-weight:700; color:var(--text); margin:0;
}
.rdd-fecha-pill{
  display:flex; align-items:center; gap:6px;
  background:var(--rdd-panel); border:1px solid var(--rdd-panel-border); border-radius:20px;
  padding:6px 13px; font-size:12.5px; font-weight:700; color:var(--text); white-space:nowrap;
}
.rdd-fecha-pill svg{ width:14px; height:14px; color:var(--gold); flex-shrink:0; }

.rdd-cards-top{ display:flex; gap:10px; margin-bottom:14px; }
.rdd-card{
  flex:1; min-width:0; display:flex; align-items:center; gap:12px;
  background:var(--rdd-marfil); border-radius:14px; padding:14px;
}
.rdd-card-icon{
  width:44px; height:44px; border-radius:50%; background:rgba(123,85,19,0.12);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.rdd-card-icon svg{ width:22px; height:22px; color:var(--rdd-marfil-icon); }
.rdd-card-num{ font-size:26px; font-weight:800; color:var(--rdd-marfil-text); line-height:1.1; }
.rdd-card-label{ font-size:12px; font-weight:600; color:var(--rdd-marfil-text-dim); margin-top:1px; }

.rdd-panel{
  background:var(--rdd-panel); border:1px solid var(--rdd-panel-border); border-radius:14px;
  padding:14px; margin-bottom:12px;
}
.rdd-panel-head{
  display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px;
}
.rdd-panel-title{ font-size:15.5px; font-weight:700; color:var(--text); }
.rdd-panel-cols{ display:flex; gap:18px; }
.rdd-panel-cols span{ font-size:10px; font-weight:700; color:var(--text-muted); width:60px; flex-shrink:0; text-align:right; white-space:nowrap; }

.rdd-row{
  display:flex; align-items:center; gap:10px;
  padding:10px 0; border-bottom:1px solid var(--rdd-panel-border);
}
.rdd-row:last-child{ border-bottom:none; padding-bottom:2px; }
.rdd-row-icon{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.rdd-row-icon svg{ width:15px; height:15px; }
.rdd-row-icon.ok{ background:rgba(37,182,111,0.15); }
.rdd-row-icon.ok svg{ color:var(--confirmed); }
.rdd-row-icon.amber{ background:rgba(233,170,53,0.15); }
.rdd-row-icon.amber svg{ color:var(--rdd-amber); }
.rdd-row-icon.neutro{ background:rgba(237,238,241,0.1); }
.rdd-row-icon.neutro svg{ color:var(--text-muted); }
.rdd-row-icon.blue{ background:rgba(125,199,232,0.15); }
.rdd-row-icon.blue svg{ color:var(--rdd-blue); }
.rdd-row-icon.rojo{ background:rgba(229,99,106,0.15); }
.rdd-row-icon.rojo svg{ color:var(--cancelled); }
.rdd-row-label{ flex:1; min-width:0; font-size:12.5px; font-weight:600; color:var(--text); overflow-wrap:anywhere; }
.rdd-row-val{ width:60px; flex-shrink:0; text-align:right; font-size:12px; font-weight:700; color:var(--text); white-space:nowrap; }
.rdd-row-val.cero{ color:var(--text-dim); font-weight:600; }

.rdd-mesa-grid{ display:flex; gap:10px; }
.rdd-mesa-card{
  flex:1; min-width:0; background:var(--rdd-marfil); border-radius:14px; padding:13px;
}
.rdd-mesa-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.rdd-mesa-head svg{ width:18px; height:18px; color:var(--rdd-marfil-icon); flex-shrink:0; }
.rdd-mesa-head span{ font-size:11.5px; font-weight:800; color:var(--rdd-marfil-text); text-transform:uppercase; letter-spacing:0.3px; }
.rdd-mesa-nums{ display:flex; gap:10px; padding-top:9px; border-top:1px solid rgba(123,85,19,0.15); }
.rdd-mesa-nums > div{ font-size:14.5px; font-weight:800; color:var(--rdd-marfil-text); }
.rdd-mesa-nums > div small{ font-size:10.5px; font-weight:600; color:var(--rdd-marfil-text-dim); margin-left:3px; }

.rdd-total{
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(135deg, var(--gold-bright), var(--gold));
  border-radius:14px; padding:14px 16px; margin-top:2px;
}
.rdd-total-label{ flex:1; min-width:0; font-size:11px; font-weight:800; color:#3a2a0a; text-transform:uppercase; letter-spacing:0.3px; }
.rdd-total-label small{ display:block; font-size:10.5px; font-weight:600; color:#5c4212; text-transform:none; margin-top:2px; overflow-wrap:break-word; }
.rdd-total-divider{ width:1px; flex-shrink:0; align-self:stretch; background:rgba(58,42,10,0.25); }
.rdd-total-num{ flex-shrink:0; font-size:20px; font-weight:800; color:#241a05; line-height:1.15; text-align:center; }
.rdd-total-num small{ display:block; font-size:9.5px; font-weight:800; color:#5c4212; letter-spacing:0.3px; }
@media (max-width:360px){
  .rdd-titulo{ font-size:19px; }
  .rdd-card-num{ font-size:22px; }
  .rdd-total{ flex-wrap:wrap; row-gap:8px; }
}

/* ===== INFORME EJECUTIVO MENSUAL (cartelera descargable) ===== */
.btn-informe-ejecutivo{
  width:100%; margin-top:10px; padding:13px; border-radius:12px;
  background:linear-gradient(135deg, var(--gold-bright), var(--gold));
  color:#241a05; border:none; font-size:14px; font-weight:800; cursor:pointer;
}
.btn-informe-ejecutivo:active{ opacity:.85; }

.ie-overlay-scroll{
  position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:500;
  display:none; flex-direction:column; align-items:center;
  padding:16px 10px; overflow:auto;
}
.ie-overlay-scroll.open{ display:flex; }
.ie-toolbar{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  margin-bottom:14px; position:sticky; top:0; z-index:2; padding:6px 0;
}
.ie-toolbar button{
  padding:11px 16px; border-radius:10px; font-size:13px; font-weight:700; border:none; cursor:pointer;
}
.ie-btn-descargar{ background:var(--gold-bright); color:#241a05; }
.ie-btn-pdf{ background:var(--panel-raised); color:var(--text); border:1px solid var(--border) !important; }
.ie-btn-guardar-toque{ background:#2d4a3e; color:#c9f2dd; border:1px solid #3f6b57 !important; }
.ie-hint-guardar{ color:var(--gold-bright); font-size:13px; font-weight:600; max-width:600px; margin:0 auto 12px; line-height:1.5; padding:0 10px; }
.ie-btn-cerrar{ background:transparent; color:var(--text-muted); border:1px solid var(--border) !important; }
.ie-loading{ color:var(--gold-bright); font-size:14px; font-weight:700; padding:60px 20px; text-align:center; }
.ie-vacio{ color:var(--text-muted); font-size:14px; padding:60px 20px; text-align:center; max-width:400px; }

.ie-scale-wrap{ overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; }

/* La cartelera en sí — tamaño fijo (la mitad de 3300x2100, para que
   html2canvas la capture a escala 2 y salga exacta a 3300x2100). No usa
   ninguna variable CSS del resto de la app: es un documento visual aparte,
   pensado para verse igual sin importar el tema del navegador. */
.ie-poster{
  width:1650px; height:800px; flex-shrink:0;
  background:#0d1420;
  color:#f4efe5; font-family:'Inter',sans-serif; position:relative;
  padding:30px 44px; box-sizing:border-box;
  display:flex; flex-direction:column; gap:14px;
}
.ie-header{ display:flex; justify-content:space-between; align-items:flex-start; }
.ie-header-marca{ font-size:13px; letter-spacing:3px; color:#c9a15a; font-weight:700; }
.ie-header-tag{ font-size:10.5px; letter-spacing:2px; color:#7d8896; text-align:right; line-height:1.6; }
.ie-titulo-wrap{ text-align:center; }
.ie-marca-central{
  font-family:'Fraunces',serif; font-size:26px; letter-spacing:6px; color:#f4efe5;
  border-top:1px solid #3a3120; border-bottom:1px solid #3a3120; display:inline-block; padding:2px 22px;
}
.ie-titulo{ font-size:38px; font-weight:800; letter-spacing:1px; color:#f4efe5; margin-top:10px; }
.ie-subtitulo{ font-size:15px; color:#b7ab8f; margin-top:4px; }

.ie-kpis{ display:flex; gap:14px; }
.ie-kpi{
  flex:1; border:1px solid #3a3120; border-radius:10px; padding:14px 16px;
  display:flex; align-items:center; gap:14px; background:rgba(201,161,90,0.04);
}
.ie-kpi-icon{ font-size:26px; color:#c9a15a; flex-shrink:0; }
.ie-kpi-num{ font-size:30px; font-weight:800; color:#f4efe5; line-height:1; }
.ie-kpi-label{ font-size:11px; letter-spacing:1px; color:#9c8a68; margin-top:4px; font-weight:700; }
.ie-kpi-quote{
  width:230px; flex-shrink:0; font-family:'Fraunces',serif; font-style:italic; font-size:14.5px;
  color:#c9a15a; text-align:center; display:flex; align-items:center; justify-content:center; line-height:1.4;
  border-left:1px solid #3a3120; padding-left:16px;
}

.ie-main-row{ display:flex; gap:14px; flex:1; min-height:0; }
.ie-panel{ border:1px solid #3a3120; border-radius:10px; padding:16px 18px; background:rgba(255,255,255,0.015); }
.ie-panel-titulo{ font-size:13.5px; font-weight:800; letter-spacing:1.5px; color:#f4efe5; margin-bottom:12px; }

.ie-panel-servicio{ width:520px; flex-shrink:0; display:flex; flex-direction:column; justify-content:center; }
.ie-dona-row{ display:flex; align-items:center; gap:18px; margin-bottom:10px; }
.ie-dona{ width:130px; height:130px; border-radius:50%; flex-shrink:0; position:relative; display:flex; align-items:center; justify-content:center; }
.ie-dona-hueco{ position:absolute; width:78px; height:78px; border-radius:50%; background:#10151d; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ie-dona-hueco b{ font-size:19px; color:#f4efe5; }
.ie-dona-hueco span{ font-size:8px; color:#9c8a68; letter-spacing:1px; }
.ie-servicio-lista{ flex:1; display:flex; flex-direction:column; gap:10px; }
.ie-servicio-fila{ display:flex; align-items:center; gap:10px; }
.ie-servicio-icon{ font-size:17px; width:22px; text-align:center; flex-shrink:0; }
.ie-servicio-info{ flex:1; }
.ie-servicio-nombre{ font-size:12px; font-weight:800; letter-spacing:0.5px; color:#f4efe5; }
.ie-servicio-barra-bg{ height:8px; border-radius:5px; background:#20242c; margin-top:5px; overflow:hidden; }
.ie-servicio-barra{ height:100%; border-radius:5px; }
.ie-servicio-cifras{ font-size:11.5px; color:#b7ab8f; margin-top:3px; }
.ie-badges-row{ display:flex; gap:10px; margin-top:12px; }
.ie-badge{ flex:1; border-radius:8px; padding:9px 11px; font-size:11.5px; font-weight:800; text-align:center; }
.ie-badge-mayor{ background:rgba(201,161,90,0.18); color:#e8c987; border:1px solid #6b5a2f; }
.ie-badge-menor{ background:rgba(195,92,68,0.18); color:#d99a86; border:1px solid #6b3c2f; }
.ie-nota-desayuno{
  margin-top:12px; font-size:10.5px; line-height:1.5; color:#a89878;
  background:rgba(201,161,90,0.06); border-left:3px solid #6b5a2f; padding:9px 11px; border-radius:6px;
}

.ie-panel-diario{ flex:1; display:flex; flex-direction:column; min-width:0; }
.ie-chart-leyenda{ font-size:10.5px; color:#9c8a68; margin-bottom:8px; }
.ie-barras{ flex:1; display:flex; align-items:flex-end; gap:3px; min-height:0; }
.ie-barra-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; min-width:0; }
.ie-barra-num{ font-size:8.5px; color:#e8c987; font-weight:700; margin-bottom:2px; white-space:nowrap; }
.ie-barra{ width:100%; border-radius:3px 3px 0 0; background:#3a3f4a; }
.ie-barra.pico{ background:#d9a84e; }
.ie-barra-dia{ font-size:8px; color:#7d8896; margin-top:4px; }

.ie-footer-row{ display:flex; gap:14px; }
.ie-panel-lectura{ flex:1.4; }
.ie-lectura-item{ display:flex; gap:10px; margin-bottom:9px; align-items:flex-start; }
.ie-lectura-num{
  width:20px; height:20px; border-radius:50%; background:#c9a15a; color:#1a1408;
  font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px;
}
.ie-lectura-texto{ font-size:11.5px; line-height:1.45; color:#e2dcc8; }
.ie-panel-oportunidad{
  flex:1; background:linear-gradient(160deg, #7a4a34, #5c3527);
  border:1px solid #8a5a40; display:flex; flex-direction:column; justify-content:center;
}
.ie-panel-oportunidad .ie-panel-titulo{ color:#f4e3d3; }
.ie-panel-oportunidad-texto{ font-size:12.5px; line-height:1.5; color:#f4e3d3; }

.ie-footer{ display:flex; justify-content:space-between; align-items:center; font-size:9.5px; letter-spacing:1.5px; color:#7d8896; border-top:1px solid #2a2418; padding-top:10px; }

.ie-especiales-row{
  border:1px solid #3a3120; border-radius:10px; padding:12px 20px;
  display:flex; align-items:center; gap:22px; background:rgba(201,161,90,0.05);
}
.ie-especiales-titulo{ font-size:12.5px; font-weight:800; letter-spacing:1.5px; color:#e8c987; white-space:nowrap; }
.ie-especiales-cards{ flex:1; display:flex; gap:22px; }
.ie-especiales-card{ flex:1; text-align:center; }
.ie-especiales-num{ font-size:26px; font-weight:800; color:#f4efe5; line-height:1; }
.ie-especiales-label{ font-size:9.5px; letter-spacing:1px; color:#9c8a68; font-weight:700; margin-top:4px; }

@media (max-width:900px){
  .ie-scale-wrap{ display:flex; justify-content:flex-start; }
}

/* ===== FLOOR PLAN ===== */
.salon-group{margin-bottom:26px;}
.salon-head{
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
  font-family:'Fraunces',serif; font-size:15px; font-weight:600; color:var(--text);
}
.salon-head .count{font-family:'Inter'; font-size:11px; color:var(--text-dim); font-weight:500;}
.salon-head.vip{color:var(--gold-bright);}
.salon-head .crown{color:var(--gold);}
.mesas-grid{display:flex; flex-wrap:wrap; gap:10px;}
.mesa{
  min-width:64px; min-height:64px; border-radius:12px; border:1.5px solid var(--border);
  background:var(--panel-alt); display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:6px; position:relative; transition:transform .12s;
}
.mesa:hover{transform:translateY(-2px);}
.mesa .num{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:13px;}
.mesa .cap{font-size:9.5px; color:var(--text-dim); margin-top:1px;}
.mesa.ocupada{background:var(--confirmed-bg); border-color:var(--confirmed);}
.mesa.ocupada .num{color:var(--confirmed);}
.mesa.pendiente{background:var(--pending-bg); border-color:var(--pending);}
.mesa.pendiente .num{color:var(--pending);}
.mesa.libre .num{color:var(--text-muted);}
.mesa.vip{border-style:dashed; border-color:var(--gold);}
.mesa .guest{font-size:9px; color:var(--text-muted); max-width:58px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:1px;}

.legend{display:flex; gap:16px; margin-bottom:20px; flex-wrap:wrap;}
.legend-item{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-muted);}
.legend-dot{width:10px; height:10px; border-radius:3px;}

/* ===== PLANO REAL (día/turno sobre el plano maestro) ===== */
.plano-vacio{
  text-align:center; padding:40px 20px; color:var(--text-muted); font-size:13.5px; line-height:1.6;
}
.plano-canvas-app{
  position:relative; width:100%; aspect-ratio: 1079 / 760; border-radius:10px;
  border:1px solid var(--border); background:#fbf8f1; overflow:hidden;
}
.plano-canvas-scroll-wrap{ position:relative; width:100%; overflow:hidden; border-radius:10px; border:1px solid var(--border); }
/* Zoom manual del selector de mesa: en celular el usuario hace zoom con los
   dedos (pellizcar), pero en computador con mouse no hay ese gesto — estos
   botones (y la rueda del mouse / arrastrar con el mouse, ver JS) permiten
   acercar/alejar y moverse por el plano cuando se ve muy chiquito. */
.plano-zoom-toolbar{
  position:static; display:flex; align-items:center; justify-content:flex-end; gap:4px;
  margin:0 0 6px auto; width:fit-content;
  background:rgba(10,25,26,0.88); border:1px solid var(--border); border-radius:9px; padding:4px 5px;
}
.plano-zoom-toolbar button{
  background:var(--panel-alt); color:var(--text); border:1px solid var(--border-soft); border-radius:6px;
  width:26px; height:26px; font-size:15px; font-weight:700; line-height:1; cursor:pointer; padding:0;
}
.plano-zoom-toolbar button.plano-zoom-reset{width:auto; padding:0 8px; font-size:11px; font-weight:600;}
.plano-zoom-toolbar button:disabled{opacity:.4; cursor:default;}
.plano-zoom-toolbar span{font-size:11px; color:var(--text-muted); min-width:34px; text-align:center; font-weight:600;}
.plano-canvas-scroll-wrap.zoom-activo{cursor:grab;}
.plano-canvas-scroll-wrap.zoom-activo.arrastrando{cursor:grabbing;}
.plano-canvas-app.evento{ width:880px; height:640px; min-height:0; aspect-ratio:unset; border:none; border-radius:0; }
.plano-canvas-app.evento .plano-mesa-core{ left:4%; top:4%; right:4%; bottom:4%; font-size:13px; line-height:1.15; padding:0 1px; }
.plano-canvas-app.evento .plano-mesa-cap{ font-size:10px; opacity:1; font-weight:600; }
.plano-canvas-app.evento .plano-mesa-precio{ font-size:9.5px; opacity:1; font-weight:800; color:#fff; white-space:nowrap; }
.plano-canvas-app.evento .plano-guest{ font-size:9.5px; font-weight:700; opacity:1; }
.plano-zona-label-lateral{
  position:absolute; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; z-index:4;
  writing-mode: vertical-rl; letter-spacing:1.5px;
}
.plano-zona-label-lateral.flip{ transform:rotate(180deg); }
.plano-zoneblock{
  position:absolute; display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:11px; font-weight:700; color:rgba(0,0,0,0.55); line-height:1.1; padding:2px;
}
/* Vista de solo lectura (plano en vivo, "Ver mesas", informe imprimible):
   cuando el salón entero está reservado, se marca igual que una mesa
   ocupada, con el nombre del cliente encima — antes se veía siempre
   "libre" aunque estuviera reservado, porque solo la cuadrícula de mesas
   sueltas mostraba quién la tenía. */
.plano-zoneblock-reservado{
  flex-direction:column; box-shadow:inset 0 0 0 3px var(--confirmed); outline:2px solid var(--confirmed); z-index:4;
}
.plano-zoneblock-guest{font-size:7px; font-weight:800; margin-top:2px; background:rgba(0,0,0,0.55); color:#fff; padding:1px 5px; border-radius:4px;}
/* Salones seleccionables dentro del selector de mesas (Puerta de Oro,
   Curramba, Arenosa, Lobby 1/2) — mismos tres estados que una mesa suelta:
   libre (se puede tocar), elegida (dorada, ya asignada a esta reserva),
   ocupada (roja, otra reserva del mismo día/turno ya la tiene). */
.plano-zoneblock-libre{cursor:pointer; box-shadow:inset 0 0 0 2px rgba(255,255,255,0.35);}
.plano-zoneblock-libre:hover{box-shadow:inset 0 0 0 2px var(--gold-bright);}
.plano-zoneblock-elegida{cursor:pointer; box-shadow:inset 0 0 0 3px var(--gold-bright); outline:2px solid var(--gold-bright); z-index:4;}
.plano-zoneblock-ocupada{cursor:not-allowed; opacity:0.45; box-shadow:inset 0 0 0 2px #c0392b;}
.plano-gridzone{position:absolute; display:grid; gap:0;}
.plano-cell{border:1px solid rgba(18,71,74,0.18); position:relative;}
.plano-mesa-core{
  position:absolute; left:2%; top:2%; right:2%; bottom:2%;
  background:#0a2f31; border:1px solid #444; border-radius:2px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:6px; font-weight:800; color:#fff; cursor:pointer; overflow:hidden;
  text-align:center; gap:0;
}
.plano-mesa-core.p-libre{background:#0a2f31; border-color:#444;}
/* En un plano de evento el fondo de la mesa toma el color de su zona
   (ver colorMesa en buildZoneGridPlano) — ahí, un reborde del mismo
   verde/celeste de siempre quedaba invisible sobre esos colores. Con
   negro y un poco más grueso, una mesa ocupada se distingue de un
   vistazo sin importar el color de la zona en la que esté. */
.plano-mesa-core.p-ocupada{background:var(--confirmed); color:#0c2417; border-color:#111;}
.plano-mesa-core.p-pendiente{background:var(--pending); color:#062a33; border-color:#111;}
/* El marco negro va hacia AFUERA (como el aro dorado de p-elegida, abajo)
   para no comerle espacio a las letras de adentro — por eso es "outline"
   y no "border": usa el margen clarito que ya deja el diseño alrededor de
   cada mesa, en vez de reducir el cuadro de color. */
.plano-mesa-core.p-ocupada, .plano-mesa-core.p-pendiente{outline:1.5px solid #111; outline-offset:0;}
.plano-mesa-core.p-sinvincular{background:#555; opacity:.5; cursor:default;}
.plano-guest{font-size:5px; font-weight:700; margin-top:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1; text-align:center;}

/* ===== PLANO FORMATO LIBRE (mesas/zonas con posición y tamaño propios,
   igual que en el editor de Salones) — usado cuando el plano General fue
   reemplazado por un plano de formato libre (ver PLANO_MAESTRO_FORMATO en
   app.js) y también para planos de evento guardados en ese mismo formato.
   Namespace .plano-*-libre para no tocar nada de la cuadrícula clásica
   (.plano-mesa-core, .plano-gridzone, etc.), que sigue exactamente igual. ===== */
.plano-canvas-libre{
  position:absolute; left:0; top:0; background:#fbf8f1; border-radius:10px; overflow:hidden;
}
/* Cuando el selector de mesas ("Elige la mesa") muestra un plano libre, el
   contenedor #mesaPickerCanvas (que por defecto trae el tamaño/proporción
   fija de la cuadrícula clásica, ver .plano-canvas-app arriba) se neutraliza
   por completo — el tamaño real lo pone .plano-canvas-libre (arriba, ya
   posicionado en absoluto) y el recorte/alto visible lo controla el propio
   scroll-wrap que lo envuelve (igual que ya pasa con .evento). */
.plano-canvas-app.libre{
  width:100%; height:0; min-height:0; aspect-ratio:unset;
  border:none; border-radius:0; background:transparent; overflow:visible;
}
.plano-mesa-libre{
  position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#0a2f31; border:1px solid #444; border-radius:6px;
  font-size:13px; font-weight:800; color:#fff; cursor:pointer; overflow:hidden;
  text-align:center; gap:0; line-height:1.1; padding:0 2px;
}
.plano-mesa-libre.circulo{border-radius:50%;}
.plano-mesa-libre.p-libre{background:#0a2f31; border-color:#444;}
.plano-mesa-libre.p-ocupada{background:var(--confirmed); color:#0c2417; border-color:#111; outline:1.5px solid #111;}
.plano-mesa-libre.p-pendiente{background:var(--pending); color:#062a33; border-color:#111; outline:1.5px solid #111;}
.plano-mesa-libre.p-elegida{background:var(--gold); color:#1a1408; border-color:var(--gold-bright); outline:2px solid var(--gold-bright); z-index:5;}
.plano-mesa-libre.p-ocupada-otra{background:#c0392b; color:#fff; border-color:#c0392b; cursor:not-allowed;}
.plano-mesa-libre .plano-mesa-cap{font-size:10px; font-weight:600; opacity:.92;}
.plano-mesa-libre .plano-mesa-precio{font-size:9.5px; font-weight:800; color:#fff; white-space:nowrap;}
/* El nombre del cliente es lo más importante para ubicar la reserva de un
   vistazo en el plano del día — más grande y en negrita que el resto del
   texto de la mesa, pero siempre en una sola línea con "…" al final (nunca
   se sale del cuadrito, aunque el nombre sea largo). */
.plano-mesa-libre .plano-guest{
  font-size:11.5px; font-weight:800; margin-top:1px; width:100%;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-align:center;
}
.plano-mesa-libre .plano-res-pax, .plano-zona-libre .plano-res-pax{
  font-size:10.5px; font-weight:800; margin-top:1px; width:100%; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; opacity:.95;
}
.plano-zona-libre{
  position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; border-radius:8px; font-size:13px; font-weight:800;
  color:rgba(0,0,0,0.55); line-height:1.15; padding:2px; pointer-events:none;
  overflow:hidden;
}
.plano-zona-libre-sub{font-size:10.5px; font-weight:700; opacity:.85; margin-top:2px;}
/* Zonas reservables (kind 'vip' o 'lobby' — salones VIP y lobbies
   completos): a diferencia de una zona decorativa (tarima, barra, franja,
   que quedan con pointer-events:none arriba), estas sí se pueden tocar
   para reservarlas o ver su reserva, igual que una mesa. */
.plano-zona-libre.reservable{pointer-events:auto; cursor:pointer; border:1px solid rgba(0,0,0,0.18);}
.plano-zona-libre.reservable.p-ocupada{background:var(--confirmed); color:#0c2417; outline:1.5px solid #111;}
.plano-zona-libre.reservable.p-pendiente{background:var(--pending); color:#062a33; outline:1.5px solid #111;}
.plano-zona-libre.reservable.p-elegida{background:var(--gold); color:#1a1408; outline:2px solid var(--gold-bright); z-index:5;}
.plano-zona-libre.reservable.p-ocupada-otra{background:#c0392b; color:#fff; cursor:not-allowed;}
.plano-zona-libre .plano-guest{
  font-size:12px; font-weight:800; margin-top:3px; width:100%;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-align:center;
}

/* ===== RESUMEN ===== */
.resumen-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-bottom:24px;}
.kpi{background:var(--panel-alt); border:1px solid var(--border-soft); border-radius:var(--radius-lg); padding:18px;}
.kpi .label{font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; font-weight:600;}
.kpi .value{font-family:'Fraunces',serif; font-size:32px; font-weight:600; margin-top:6px; color:var(--gold-bright);}
.kpi .sub{font-size:11.5px; color:var(--text-dim); margin-top:4px;}
.bar-row{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.bar-row .bl{width:90px; font-size:12px; color:var(--text-muted); flex-shrink:0;}
.bar-track{flex:1; height:8px; background:var(--panel-raised); border-radius:4px; overflow:hidden;}
.bar-fill{height:100%; background:linear-gradient(90deg, var(--gold) 0%, var(--gold-bright) 100%); border-radius:4px;}
.bar-val{width:70px; text-align:right; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-muted); flex-shrink:0;}
.section-title{font-family:'Fraunces',serif; font-size:16px; font-weight:600; margin:24px 0 14px;}

/* ===== CALENDAR PICKER ===== */
.cal-modal{max-width:320px; padding:18px;}
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.cal-head .cal-title{font-family:'Inter',sans-serif; font-size:16px; font-weight:700; text-transform:capitalize;}
.cal-nav-btn{
  width:30px; height:30px; border-radius:8px; background:var(--panel-alt);
  border:1px solid var(--border); color:var(--text-muted); font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.cal-nav-btn:hover{color:var(--gold-bright); border-color:var(--gold);}
.cal-weekdays{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:6px;}
.cal-weekdays span{font-size:10px; text-align:center; color:var(--text-dim); font-weight:700; text-transform:uppercase;}
.cal-days{display:grid; grid-template-columns:repeat(7,1fr); gap:3px;}
.cal-day{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center; position:relative;
  border-radius:8px; font-size:12.5px; font-family:'JetBrains Mono',monospace;
  color:var(--text); background:transparent; border:1px solid transparent;
}
.cal-day:hover{background:var(--panel-alt); border-color:var(--border);}
.cal-day.muted{color:var(--text-dim); opacity:.4;}
.cal-day.today{border-color:var(--gold); color:var(--gold-bright);}
.cal-day.selected{background:var(--gold); color:#1a1408; font-weight:700;}

/* ===== CALENDARIO EMBEBIDO EN "POR DÍA" / SOLICITUDES ===== */
.calendario-inline-wrap{
  margin:12px 16px; background:var(--panel-alt); border:1px solid var(--border);
  border-radius:16px; padding:16px; flex-shrink:0;
}
.cal-days-inline .cal-day{
  aspect-ratio:auto; height:44px; flex-direction:column; gap:1px; position:relative;
}
.cal-day-marcas{display:flex; align-items:center; justify-content:center; height:14px;}
/* Contador de reservas por día: reemplaza el punto verde anterior por el
   número real de reservas — así se ve de un vistazo cuántas hay, no solo
   que "hay algo". Va en una etiqueta pequeña propia, debajo del número del
   día, para que nunca se monte encima ni se vea apretado. */
.cal-day-count{
  font-size:9px; font-weight:700; line-height:1; font-family:'JetBrains Mono',monospace;
  color:#0a0f14; background:var(--gold-bright); border-radius:6px;
  padding:1.5px 5px; white-space:nowrap;
}
.cal-day-count.especial{background:linear-gradient(135deg, var(--gold-bright), #ffd76a); box-shadow:0 0 0 1px rgba(255,215,106,0.5);}
.cal-day-count.bloqueado{background:#e05a5a; color:#fff; font-size:9px;}
.cal-day-lock{font-size:9px; margin-left:2px;}
.cal-day-bloqueado{opacity:0.75;}
.cal-day-bloqueado::after{content:''; position:absolute; inset:0; border:1px solid rgba(224,90,90,0.5); border-radius:inherit; pointer-events:none;}
.aviso-bloqueo-dia{
  background:rgba(224,90,90,0.12); border:1px solid #e05a5a; color:#f0a3a7;
  font-size:12px; line-height:1.5; padding:10px 12px; border-radius:10px; margin-bottom:10px;
}
.cal-day-count.pendiente{background:#e8a33d; color:#1a1408;}
.cal-day.selected .cal-day-count{background:#1a1408; color:var(--gold-bright);}
.cal-inline-leyenda{
  display:flex; justify-content:center; gap:16px; margin-top:12px; padding-top:12px;
  border-top:1px solid var(--border-soft);
  font-size:10.5px; color:var(--text-dim);
}
.cal-inline-leyenda span{display:flex; align-items:center; gap:5px;}
.cal-aviso-navegando{
  margin-top:12px; padding:10px 12px; background:rgba(232,163,61,0.1);
  border:1px solid #e8a33d; border-radius:8px; color:#e8a33d;
  font-size:11.5px; line-height:1.5; text-align:center;
}
.cal-dot-leyenda{width:6px; height:6px; border-radius:50%; background:var(--confirmed); display:inline-block;}
.cal-dot-leyenda.cal-dot-pendiente{background:#e8a33d;}
.cal-star-leyenda{font-size:11px;}
.cal-jump{display:flex; gap:8px; margin-top:14px;}
.cal-jump select{
  flex:1; background:var(--panel-alt); border:1px solid var(--border); color:var(--text);
  padding:8px 9px; border-radius:8px; font-size:12.5px;
}
.cal-today-btn{
  margin-top:10px; width:100%; padding:9px; border-radius:8px; background:var(--panel-alt);
  border:1px solid var(--border); color:var(--text-muted); font-size:12.5px; font-weight:600;
}
.cal-today-btn:hover{color:var(--gold-bright); border-color:var(--gold);}

/* ===== MODAL ===== */
.overlay{
  position:fixed; inset:0; background:rgba(8,10,13,0.72); display:none;
  align-items:center; justify-content:center; z-index:100; padding:16px; overflow-x:hidden;
}
.overlay.open{display:flex;}
/* Este modal en particular tiene que poder abrirse DESDE la pantalla de
   login (para crear el primer usuario administrador) — #loginScreen tiene
   z-index:999, más alto que el de un overlay normal (100), así que sin
   esto el modal se abría pero quedaba tapado detrás de la pantalla negra
   de login, sin verse ni poder tocarse. */
#overlayUsuario{z-index:1002;}

/* ===== BOTÓN "ASIGNAR MESA" (abre el plano visual) ===== */
.btn-elegir-mesa{
  width:100%; text-align:left; background:var(--panel-alt); border:1px solid var(--border); color:var(--text);
  padding:9px 11px; border-radius:8px; font-size:12.5px; font-family:inherit;
}

/* ===== SELECTOR VISUAL DE MESA (elegir/unir mesas sobre el plano) ===== */
.mesa-picker-overlay{
  position:fixed; inset:0; background:rgba(8,10,13,0.85); display:none;
  align-items:center; justify-content:center; z-index:200; padding:12px;
}
.mesa-picker-overlay.open{display:flex;}
.mesa-picker-box{
  background:var(--panel); border:1px solid var(--border); border-radius:14px;
  width:100%; max-width:520px; max-height:92vh; overflow-y:auto; padding:16px;
}
.mesa-picker-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:6px;}
.mesa-picker-title{font-family:'Fraunces',serif; font-weight:700; font-size:17px;}
.mesa-picker-sub{font-size:11.5px; color:var(--text-dim); margin-top:2px;}
.mesa-picker-cerrar{background:transparent; border:none; color:var(--text-dim); font-size:16px; padding:4px 8px;}
.mesa-picker-hint{font-size:11.5px; color:var(--text-muted); line-height:1.5; margin-bottom:12px;}
.mesa-picker-footer{margin-top:14px;}
.mesa-picker-seleccion{font-size:12.5px; color:var(--gold-bright); font-weight:600; margin-bottom:10px; min-height:16px;}
.mesa-picker-botones{display:flex; gap:10px;}
.mesa-picker-botones .btn{flex:1;}
.plano-mesa-core.p-elegida{background:var(--gold); color:#1a1408; border-color:var(--gold-bright); outline:2px solid var(--gold-bright); z-index:5;}
.plano-mesa-core.p-ocupada-otra{background:#c0392b; color:#fff; border-color:#c0392b; cursor:not-allowed;}

/* ===== VISOR DE COMPROBANTE (dentro de la app, no abre pestaña nueva) ===== */
.comprobante-viewer-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.94); display:none;
  align-items:center; justify-content:center; z-index:300; padding:20px;
}
.comprobante-viewer-overlay.open{display:flex;}
.comprobante-viewer-img{max-width:100%; max-height:100%; object-fit:contain; border-radius:6px;}
.comprobante-viewer-cerrar{
  position:fixed; top:16px; right:16px; width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,0.12); color:#fff; font-size:18px; border:none;
  display:flex; align-items:center; justify-content:center; z-index:301;
}
.modal{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg);
  width:100%; max-width:460px; max-height:90vh; overflow-y:auto; overflow-x:hidden; padding:22px;
}
.modal h3{font-family:'Fraunces',serif; font-size:19px; margin-bottom:4px;}
.modal .modal-sub{font-size:12px; color:var(--text-dim); margin-bottom:18px;}
.field{margin-bottom:13px;}
.field-check-cover{margin-bottom:13px;}
.checkbox-label{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text); cursor:pointer;}
.checkbox-label input[type="checkbox"]{width:18px; height:18px;}
/* ===== NIVELES DE ACCESO (rol de usuario) ===== */
.rol-opciones{display:flex; flex-direction:column; gap:8px; margin-top:4px;}
.rol-opcion{
  display:flex; align-items:flex-start; gap:10px; padding:10px 12px;
  border:1px solid var(--border); border-radius:10px; cursor:pointer;
}
.rol-opcion:has(input:checked){border-color:var(--gold-bright); background:rgba(230,180,70,0.08);}
.rol-opcion input{margin-top:3px;}
.rol-opcion strong{display:block; font-size:13px; color:var(--text);}
.rol-opcion span{display:block; font-size:11.5px; color:var(--text-dim); margin-top:2px; line-height:1.4;}
.bloqueo-turno-fila{display:flex; align-items:center; gap:8px;}
.bloqueo-turno-bloque{margin-bottom:6px;}
.bloqueo-evento-bloque{
  margin-bottom:6px; padding:10px; border-radius:10px;
  border:1px solid var(--gold); background:rgba(214,170,85,0.08);
}
.bloqueo-evento-bloque .rol-opcion{align-items:center;}
.bloqueo-show-imagen{margin-top:8px; padding:10px; background:var(--panel-alt); border-radius:10px; border:1px dashed var(--border);}
.bloqueo-show-imagen label{display:block; font-size:11px; color:var(--text-dim); margin-bottom:6px;}
.bloqueo-show-imagen input[type="file"]{width:100%; font-size:11.5px; color:var(--text);}
.bloqueo-tipo-select{
  flex:0 0 150px; font-size:10.5px; padding:8px 6px; border-radius:8px;
  border:1px solid var(--border); background:var(--panel-alt); color:var(--text);
}
.rol-badge{
  display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:0.3px;
  padding:2px 7px; border-radius:20px; text-transform:uppercase; margin-left:6px;
  vertical-align:middle;
}
.rol-badge-admin{background:rgba(230,180,70,0.18); color:var(--gold-bright);}
.rol-badge-operativo{background:rgba(90,150,200,0.18); color:#6db3e8;}
.rol-badge-consulta{background:rgba(150,150,150,0.18); color:var(--text-dim);}
/* Aviso visual cuando un usuario "consulta" abre una reserva: la deja ver
   todo, pero con un aviso arriba del formulario para que quede claro por
   qué no puede tocar nada — mejor que un candado sin explicación. */
.modal-solo-lectura .modal::before{
  content:'👁 Modo consulta — solo puedes ver esta reserva, no editarla.';
  display:block; background:rgba(150,150,150,0.15); color:var(--text-dim);
  font-size:11.5px; padding:8px 12px; border-radius:8px; margin-bottom:12px; text-align:center;
}
.modal-solo-lectura .modal input:disabled,
.modal-solo-lectura .modal select:disabled,
.modal-solo-lectura .modal textarea:disabled{opacity:0.7; cursor:default;}
/* Reserva de un día que ya pasó: se puede seguir viendo, pero no editar ni
   reenviar para aprobación — el evento ya ocurrió (o no), así que
   modificarla después no tiene sentido operativo y solo generaría
   confusión sobre qué pasó realmente ese día. */
.modal-reserva-vencida .modal::before{
  content:'🔒 Esta reserva ya pasó (' attr(data-fecha-vencida) ') y quedó bloqueada — no se puede editar ni reenviar para aprobación.';
  display:block; background:rgba(224,90,90,0.12); color:#e5636a;
  font-size:11.5px; padding:8px 12px; border-radius:8px; margin-bottom:12px; text-align:center;
}
.modal-reserva-vencida .modal input:disabled,
.modal-reserva-vencida .modal select:disabled,
.modal-reserva-vencida .modal textarea:disabled{opacity:0.7; cursor:default;}
.modal-reserva-vencida #estadoSelect, .modal-reserva-vencida #btnElegirMesa{pointer-events:none; opacity:0.7;}
.field label{font-size:11.5px; font-weight:600; color:var(--text-muted); display:block; margin-bottom:5px; text-transform:uppercase; letter-spacing:0.3px;}
.fecha-solicitud-hint{text-transform:none; font-weight:400; color:var(--text-dim); letter-spacing:0;}
.turno-invalido-aviso{
  margin-top:8px; padding:9px 11px; border-radius:8px;
  background:rgba(232,163,61,0.1); border:1px solid #e8a33d;
  color:#e8a33d; font-size:11.5px; line-height:1.5;
}
.field input, .field select, .field textarea{
  width:100%; background:var(--panel-alt); border:1px solid var(--border); color:var(--text);
  padding:9px 11px; border-radius:8px; font-size:13.5px;
}
.field textarea{resize:vertical; min-height:52px;}
/* Celular con código de país: select fijo a la izquierda + el número
   local a la derecha, para no adivinar el país del cliente por la
   cantidad de dígitos (lo cual fallaba con celulares de otros países
   usando WhatsApp por wifi en Colombia). Colombia queda seleccionada por
   defecto en los tres formularios donde se toma un celular. */
.celular-con-codigo{display:flex; gap:6px;}
.celular-con-codigo select{flex:0 0 76px; width:76px; padding:9px 4px; font-size:12.5px;}
.celular-con-codigo input{flex:1; min-width:0;}
/* Fila "Celular / Cantidad de personas": el celular necesita mucho más
   ancho (código + número completo) que la cantidad de personas, que nunca
   pasa de 3 dígitos — antes se repartían 50/50 y el celular quedaba
   apretado mientras "personas" sobraba espacio de sobra. */
.field-celular-completo{flex:3 1 0;}
.field-pax-chico{flex:0 0 78px; max-width:78px;}
.field-pax-chico input{padding-left:8px; padding-right:8px; text-align:center;}
.field-row{display:flex; gap:10px;}
.field-row .field{flex:1;}
.estado-select{display:flex; gap:6px; flex-wrap:wrap;}
.estado-opt{
  padding:7px 12px; border-radius:999px; font-size:11.5px; font-weight:700; border:1.5px solid var(--border);
  background:var(--panel-alt); color:var(--text-muted);
}
.estado-opt.sel-confirmada.on{background:var(--confirmed-bg); border-color:var(--confirmed); color:var(--confirmed);}
.estado-opt.sel-pendiente.on{background:var(--pending-bg); border-color:var(--pending); color:var(--pending);}
.estado-opt.sel-walkin.on{background:var(--walkin-bg); border-color:var(--walkin); color:var(--walkin);}
.estado-opt.sel-cancelada.on{background:var(--cancelled-bg); border-color:var(--cancelled); color:var(--cancelled);}
.estado-opt.sel-franja.on{background:rgba(201,161,90,0.16); border-color:var(--gold); color:var(--gold);}
.modal-actions{display:flex; gap:10px; margin-top:18px;}
.canal-nuevo-opts{display:flex; flex-direction:column; gap:10px;}
.canal-nuevo-btn{
  display:flex; align-items:center; gap:12px; text-align:left;
  background:var(--panel-alt); border:1.5px solid var(--border); color:var(--text);
  padding:14px; border-radius:var(--radius); font-size:20px;
}
.canal-nuevo-btn:hover{border-color:var(--gold);}
.canal-nuevo-btn span{font-size:14px; font-weight:600;}
.canal-nuevo-sub{font-size:11px; font-weight:400; color:var(--text-dim);}
.whatsapp-nota{
  font-size:11.5px; color:var(--text-muted); background:var(--panel-alt);
  border-radius:8px; padding:10px 12px; margin-top:4px; line-height:1.5;
}
.btn{padding:10px 16px; border-radius:8px; font-size:13px; font-weight:600; flex:1; text-align:center;}
.btn-primary{background:var(--gold); color:#1a1408;}
.btn-primary:hover{background:var(--gold-bright);}
.btn-ghost{background:var(--panel-alt); color:var(--text-muted); border:1px solid var(--border);}
.btn-ghost:hover{color:var(--text);}
.btn-danger{background:transparent; color:var(--cancelled); border:1px solid var(--cancelled);}
.modal-actions-wrap{margin-bottom:10px;}
.btn-aprobacion{
  width:100%; padding:11px; border-radius:8px; font-size:13px; font-weight:700;
  background:rgba(232,163,61,0.14); color:#e8a33d; border:1.5px solid #e8a33d;
}
.btn-aprobacion:hover{background:rgba(232,163,61,0.24);}

/* ===== SALONES Y MESAS ===== */
/* Igual que en Solicitudes: sin scroll propio, solo scrollea la pantalla
   completa (#pantallaSalones / #pantallaConfig, más arriba), para evitar
   el doble scroll en computador. */
.salones-panel{flex:none; overflow-y:visible; padding:16px; min-height:0;}
.config-panel{flex:none; overflow-y:visible; padding:16px; min-height:0;}

/* ===== CONFIGURACIÓN: MENSAJES DE WHATSAPP ===== */
/* Grupos: cada uno junta los bloques que pertenecen al mismo tema (mensajes,
   carrusel, usuarios) bajo un encabezado propio, en vez de una sola lista
   larga de bloques sueltos sin relación visible entre ellos. */
.config-grupo{margin-bottom:14px;}
.config-grupo-titulo{
  font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--text-dim); margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--border-soft);
}
/* Encabezado tocable de cada sección de Config: colapsada por defecto, se
   abre solo la que se toca, en vez de mostrar de una vez el "reguero"
   entero de mensajes + carrusel + usuarios + zona de peligro. */
.config-grupo-header{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--panel-alt); border:1px solid var(--border); border-radius:12px;
  padding:14px 16px; cursor:pointer; font-size:13.5px; font-weight:700; color:var(--text);
  text-align:left; font-family:inherit;
}
.config-grupo-header:active{border-color:var(--gold);}
.config-grupo-header-peligro{border-color:rgba(224,90,90,0.4); color:#e05a5a;}
.config-grupo-chevron{font-size:16px; color:var(--text-dim); transition:transform .15s;}
.config-grupo-chevron.abierto{transform:rotate(90deg); color:var(--gold-bright);}
.config-grupo-contenido{padding-top:14px;}
.config-mensaje-bloque{
  background:var(--panel-alt); border:1px solid var(--border); border-radius:12px;
  padding:16px; margin-bottom:16px;
}
.config-grupo .config-mensaje-bloque:last-child{margin-bottom:0;}
.config-mensaje-titulo{font-size:14px; font-weight:700; color:var(--gold-bright); margin-bottom:6px;}
.config-mensaje-sub{font-size:11.5px; color:var(--text-dim); line-height:1.55; margin-bottom:12px;}
.config-mensaje-sub code{
  background:var(--panel-raised); padding:1px 5px; border-radius:4px; color:var(--gold-bright);
  font-family:'JetBrains Mono',monospace; font-size:11px;
}
.config-mensaje-textarea{
  width:100%; background:var(--bg); border:1px solid var(--border); border-radius:8px;
  color:var(--text); font-size:13px; line-height:1.5; padding:12px;
  font-family:inherit; resize:vertical;
}
.config-mensaje-textarea:focus{border-color:var(--gold); outline:none;}
.config-mensaje-acciones{display:flex; align-items:center; gap:10px; margin-top:12px;}

/* Carrusel de eventos: cuadrícula de fotos ya montadas, cada una con su
   botón de borrar encima — así Guillermo ve de una vez qué hay puesto,
   sin tener que abrir nada para saberlo. */
.carrusel-config-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:6px 0 12px;}
.carrusel-config-item{position:relative; border-radius:10px; overflow:hidden; border:1px solid var(--border); display:flex; flex-direction:column;}
.carrusel-config-item img{width:100%; aspect-ratio:1; object-fit:cover; display:block;}
.carrusel-config-numero{
  position:absolute; top:6px; left:6px; min-width:22px; height:22px; padding:0 6px; border-radius:999px;
  background:var(--gold-bright); color:#1a1408; font-size:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center; z-index:2;
}
.carrusel-config-borrar{
  position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%;
  background:rgba(20,10,10,0.75); color:#f5b5b5; font-size:12px; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,0.15); z-index:2;
}
.carrusel-config-mover-bar{display:flex; gap:4px; padding:5px;}
.carrusel-config-mover-bar button{
  flex:1; padding:7px 4px; border-radius:7px; background:var(--panel-alt); color:var(--text);
  font-size:11px; font-weight:700; border:1px solid var(--border);
}
.carrusel-config-mover-bar button:disabled{opacity:0.3;}

.config-peligro-bloque{
  background:rgba(200,60,60,0.08); border:1px solid #b23a3a; border-radius:12px;
  padding:16px; margin-bottom:16px;
}
.config-peligro-titulo{font-size:14px; font-weight:700; color:#e5636a; margin-bottom:6px;}
.btn-borrar-todo{
  width:100%; background:transparent; border:1.5px solid #b23a3a; color:#e5636a;
  font-weight:700; font-size:13.5px; padding:12px; border-radius:8px;
}
.btn-borrar-todo:active{background:rgba(200,60,60,0.15);}

.btn-config-guardar{
  background:var(--gold); color:#1a1408; font-weight:700; font-size:13px;
  padding:9px 16px; border-radius:8px; border:none;
}
.btn-config-restaurar{
  background:transparent; color:var(--text-dim); font-weight:600; font-size:12.5px;
  padding:9px 12px; border-radius:8px; border:1px solid var(--border);
}
.config-mensaje-ok{color:var(--confirmed); font-size:12.5px; font-weight:700;}
.btn-nuevo-salon{width:100%; margin-bottom:16px; padding:12px;}

/* ===== CAPACIDAD POR TURNO (pantalla Salones) ===== */
.capacidad-turnos-panel{
  background:var(--panel-alt); border:1px solid var(--border); border-radius:12px;
  padding:14px; margin-bottom:16px;
}
.capacidad-turnos-title{font-size:14px; font-weight:700; color:var(--gold-bright); margin-bottom:4px;}
.capacidad-turnos-sub{font-size:11.5px; color:var(--text-dim); line-height:1.5; margin-bottom:12px;}
.capacidad-grupo{margin-bottom:12px;}
.capacidad-grupo:last-child{margin-bottom:0;}
.capacidad-grupo-label{font-size:12px; font-weight:700; color:var(--text); margin-bottom:6px;}
.capacidad-grupo-turnos{display:grid; grid-template-columns:1fr; gap:8px;}
.capacidad-turno-item{
  display:flex; flex-direction:column; gap:4px; background:var(--panel-raised);
  border-radius:8px; padding:8px;
}
.capacidad-turno-label{font-size:10px; color:var(--text-dim); text-transform:uppercase; font-weight:700;}
.capacidad-turno-item input{
  background:var(--bg); border:1px solid var(--border); border-radius:6px;
  color:var(--text); font-size:15px; font-weight:700; padding:6px 8px; width:100%;
}
.capacidad-turno-item input:focus{border-color:var(--gold); outline:none;}
.capacidad-turno-item.turno-inactivo{opacity:.55;}
.capacidad-turno-activo-row{display:flex; align-items:center; justify-content:space-between; gap:6px;}
.capacidad-turno-activo-row .switch-mini{position:relative; width:32px; height:18px; flex-shrink:0;}
.capacidad-turno-activo-row .switch-mini input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;}
.capacidad-turno-activo-row .switch-mini .track{position:absolute; inset:0; background:var(--border); border-radius:20px; transition:background .15s;}
.capacidad-turno-activo-row .switch-mini .track::after{content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; background:#fff; border-radius:50%; transition:transform .15s;}
.capacidad-turno-activo-row .switch-mini input:checked + .track{background:var(--confirmed);}
.capacidad-turno-activo-row .switch-mini input:checked + .track::after{transform:translateX(14px);}
.capacidad-turno-horas-row{display:flex; align-items:center; gap:4px;}
.capacidad-turno-horas-row input[type="time"]{font-size:11.5px; font-weight:600; padding:5px 4px;}
.capacidad-turno-horas-row span{font-size:10px; color:var(--text-dim);}
.salon-card-admin{
  background:var(--panel-alt); border:1px solid var(--border-soft); border-radius:var(--radius);
  padding:14px; margin-bottom:12px;
}
.salon-card-admin.es-vip{border-color:var(--gold);}
.salon-card-admin-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.salon-card-admin-nombre{font-family:'Fraunces',serif; font-size:15px; font-weight:600;}
.salon-card-admin-nombre .crown{color:var(--gold);}
.salon-card-admin-count{font-size:11px; color:var(--text-dim); margin-top:2px;}
.btn-editar-salon{
  background:var(--panel-raised); color:var(--text-muted); border:1px solid var(--border);
  padding:6px 12px; border-radius:7px; font-size:11.5px; font-weight:600;
}
.salon-card-admin-mesas{display:flex; flex-wrap:wrap; gap:6px;}
.mesa-chip-admin{
  background:var(--panel-raised); border:1px solid var(--border); border-radius:7px;
  padding:5px 9px; font-size:11px; font-family:'JetBrains Mono',monospace; color:var(--text-muted);
}
.listaMesasTemp-row{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--panel-alt); border:1px solid var(--border); border-radius:8px;
  padding:8px 11px; margin-bottom:6px; font-size:12.5px;
}
.listaMesasTemp-row .quitar-mesa{color:var(--cancelled); font-weight:700; cursor:pointer; padding:0 4px;}
.agregar-mesa-row{gap:8px; margin-top:8px;}
.agregar-mesa-row input{flex:1;}
.btn-agregar-mesa{
  background:var(--panel-raised); color:var(--gold-bright); border:1px solid var(--gold);
  padding:0 14px; border-radius:8px; font-size:12.5px; font-weight:700; white-space:nowrap;
}

/* ===== BOTTOM NAV (mobile) ===== */
.bottom-nav{display:none;}

/* ===== RESPONSIVE ===== */
.version-tag{
  position:fixed; top:8px; right:12px; font-size:10px; color:var(--text-dim);
  font-family:'JetBrains Mono',monospace; z-index:1001; pointer-events:none; opacity:.85;
  background:rgba(0,0,0,0.35); padding:2px 7px; border-radius:6px;
}

/* ===== LOGIN ===== */
/* Todo cabe en una sola pantalla, sin bajar el dedo: el flyer arriba se
   encoge automáticamente (manteniendo su forma, sin recortarse ni
   deformarse) hasta el espacio que le sobre después de acomodar el
   formulario abajo — que siempre se ve completo y del mismo tamaño. */
#loginScreen{
  position:fixed; inset:0; z-index:999; overflow:hidden; background:#000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:8px; gap:6px;
}
/* En vez de adivinar un porcentaje fijo de la pantalla para la imagen (que
   dejaba espacio negro sin usar en pantallas más altas), la imagen ahora
   crece con flex para llenar TODO el espacio que le sobre después de
   acomodar el formulario de abajo (que sí tiene tamaño fijo) — sin
   recortarse ni deformarse, gracias a object-fit:contain. */
.login-banner{
  flex:1 1 0; min-height:0; width:100%; align-self:stretch;
  object-fit:contain; display:block;
}
.login-box{
  width:100%; max-width:340px; flex-shrink:0; background:rgba(18,21,26,0.92);
  border:1px solid var(--border); border-radius:16px; padding:20px 22px; box-shadow:0 10px 40px rgba(0,0,0,0.5);
}
.login-title{color:var(--gold-bright); font-size:14px; font-weight:700; text-align:center; margin-bottom:14px; letter-spacing:0.5px;}
.login-field{margin-bottom:10px;}
.login-field label{display:block; font-size:11.5px; color:var(--text-dim); margin-bottom:4px;}
.login-field input{
  width:100%; padding:9px 12px; border-radius:10px; border:1px solid var(--border);
  background:var(--panel-alt); color:var(--text); font-size:14px;
}
.login-pass-wrap{position:relative;}
.login-pass-wrap input{padding-right:40px;}
.login-eye{
  position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none;
  color:var(--text-dim); cursor:pointer; font-size:16px; padding:4px;
}
.login-btn{
  width:100%; padding:11px; border-radius:10px; border:none; background:var(--gold-bright);
  color:#1a1400; font-weight:700; font-size:14px; cursor:pointer; margin-top:2px;
}
.login-btn:disabled{opacity:0.6; cursor:not-allowed;}
.login-error{color:#e57373; font-size:12px; text-align:center; margin-top:8px; min-height:14px;}
.login-forgot{display:block; text-align:center; font-size:11.5px; color:var(--text-dim); margin-top:10px; text-decoration:underline; cursor:pointer; background:none; border:none;}
.login-bootstrap{display:block; text-align:center; font-size:11.5px; color:var(--gold-bright); margin-top:8px; text-decoration:underline; cursor:pointer; background:none; border:none;}

@media (max-width: 860px){
  header{padding:12px 14px; gap:10px;}
  .brand span{display:none;}
  .turnos{margin-left:0; order:3; width:100%; overflow-x:auto; gap:4px;}
  /* 5 pestañas (Todos/Desayuno/Almuerzo/Cena 1/Cena 2) tienen que caber
     sin scroll horizontal en una pantalla de celular normal — más chicas
     que en computador, sin el puntico de color (ahorra espacio) y sin
     partir el texto en dos líneas. "Cena" va aparte, arriba, en su propia
     fila junto a Especiales/Bloquear día (ver .turno-cena-slot). */
  .turno-pill{padding:6px 8px; font-size:10.5px; gap:0; white-space:nowrap; flex:1 1 auto; justify-content:center;}
  .turno-pill .dot{display:none;}
  .turno-cena-slot{min-width:90px;}
  .new-btn span{display:none;}
  .clear-btn span{display:none;}
  .clear-btn{padding:9px 10px;}
  .especial-btn span{display:none;}
  .especial-btn{padding:9px 10px;}
  .subbar{padding:8px 14px;}
  .stats{display:none;}
  /* En celular se navega Lista/Plano/Resumen con la barra inferior en vez
     de las pestañas de arriba (que sí se usan en computador) — el resto del
     comportamiento (un panel visible a la vez, un solo scroll por pantalla)
     ya es igual en cualquier tamaño de pantalla, ver reglas generales arriba. */
  .tabs{display:none;}
  main{min-height:120px;}
  .bottom-nav{
    display:flex; border-top:1px solid var(--border); background:var(--panel);
    flex-shrink:0; position:sticky; bottom:0; z-index:50;
  }
  .bottom-nav button{
    flex:1; padding:10px 4px 12px; background:transparent; color:var(--text-dim);
    font-size:10.5px; font-weight:600; display:flex; flex-direction:column; align-items:center; gap:3px;
  }
  .bottom-nav button.active{color:var(--gold-bright);}
  .bottom-nav .icon{font-size:17px;}
}

/* ===== v3.72 · Nueva reserva por teléfono — rediseño móvil ===== */
.reserva-modal-v372{max-width:460px;padding:18px;border-radius:16px;background:#151922;border-color:#343b47;}
.reserva-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;}
.reserva-modal-head h3{font-size:22px;margin:0;color:#f3f4f6;}
.reserva-modal-head .modal-sub{margin:5px 0 0;font-size:12px;}
.reserva-modal-x{width:34px;height:34px;border-radius:50%;background:transparent;border:1px solid #697280;color:#c9ced6;font-size:25px;line-height:1;flex:0 0 auto;}
.reserva-modal-v372 .field{margin-bottom:11px;}
.reserva-modal-v372 .field label{font-size:11px;text-transform:none;letter-spacing:0;color:#aeb5c0;}
.reserva-modal-v372 .field input,.reserva-modal-v372 .field select,.reserva-modal-v372 .field textarea{padding:10px 11px;border-radius:9px;font-size:13px;background:#171c25;}
.phone-section-title{display:flex;align-items:center;gap:8px;color:var(--gold-bright);font-size:14px;font-weight:800;margin:5px 0 9px;}
.phone-client-title{padding-top:2px;margin-top:10px;}
.phone-hidden-control{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;padding:0!important;border:0!important;}
.phone-date-carousel{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:1px 0 5px;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;}
.phone-date-carousel::-webkit-scrollbar{display:none;}
.phone-date-card{flex:0 0 67px;height:88px;border-radius:11px;border:1px solid #48515f;background:#11151c;color:#f0f2f5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;scroll-snap-align:start;}
.phone-date-card .dow{font-size:10px;font-weight:700;}.phone-date-card .num{font-size:27px;line-height:1;font-weight:850;margin:3px 0;}.phone-date-card .mon{font-size:10px;font-weight:700;}
.phone-date-card.active{background:linear-gradient(180deg,#f0c25b,#d7a53c);border-color:#f0c25b;color:#111;}
.phone-calendar-card{flex-basis:73px;color:var(--gold-bright);font-size:10.5px;font-weight:700;line-height:1.15;}
.phone-cal-icon{font-size:24px;line-height:1;margin-bottom:3px;}
.phone-date-detail-row{display:grid;grid-template-columns:1.2fr 1fr;gap:7px;margin-top:6px;}
.phone-date-summary{min-height:43px;border:1px solid #343b47;border-radius:9px;background:#11151c;color:#e8eaed;padding:9px 10px;display:flex;align-items:center;font-size:11px;text-transform:capitalize;}
.phone-turn-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;}
.phone-turn-buttons button{border:1px solid #343b47;background:#11151c;color:#9da5b0;border-radius:9px;padding:6px 3px;font-size:9px;font-weight:700;line-height:1.1;}
.phone-turn-buttons button.active{background:rgba(224,187,120,.16);border-color:var(--gold);color:var(--gold-bright);}
.phone-time-grid{display:grid;grid-template-columns:1fr auto 1fr 1fr;gap:7px;align-items:end;}
.phone-wheel-col label{text-align:center!important;color:#b8bec7!important;font-size:10px!important;margin-bottom:4px!important;}
.phone-time-colon{align-self:center;color:var(--gold-bright);font-size:23px;font-weight:850;padding-bottom:35px;}
.phone-wheel{height:108px;overflow-y:auto;padding:36px 0;scroll-snap-type:y mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior-y:contain;border:1px solid #343b47;border-radius:10px;background:linear-gradient(to bottom,#11151c 0 33.33%,#252b35 33.33% 66.66%,#11151c 66.66% 100%);}
.phone-wheel::-webkit-scrollbar{display:none;}
.phone-wheel-item{height:36px;display:flex;align-items:center;justify-content:center;scroll-snap-align:center;scroll-snap-stop:always;color:#6f7782;opacity:.48;font-size:15px;font-weight:700;user-select:none;-webkit-user-select:none;transition:font-size .12s,color .12s,opacity .12s;}
.phone-wheel-item.near{color:#a7adb5;opacity:.72;font-size:17px;}.phone-wheel-item.selected{color:#fff;opacity:1;font-size:25px;font-weight:850;}
.phone-estado-select{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
.phone-estado-select .estado-opt{border-radius:10px;padding:10px 5px;font-size:12px;justify-content:center;}
.phone-estado-select .estado-opt span{margin-left:3px;}
.phone-two-cols{gap:8px;}.phone-two-cols .field{min-width:0;}
.phone-mesa-btn{min-height:42px;white-space:normal;line-height:1.25;}
.phone-obs-field label{color:var(--gold-bright)!important;}.phone-obs-field textarea{min-height:76px;}
.phone-actions{display:grid;grid-template-columns:1fr 1.25fr;gap:8px;margin-top:14px;}.phone-actions .btn-danger{grid-column:1/-1;}
.phone-actions .btn-primary{background:linear-gradient(180deg,#e7ba59,#cfa04b);color:#18130a;font-weight:800;}
.phone-approval-btn{margin-top:8px;border-color:#d99b2d!important;color:#e3a739!important;background:rgba(217,155,45,.07)!important;}
#fPax{text-align:center;}#fPax::placeholder{color:#707985;opacity:.6;}
.phone-calendar-overlay{position:fixed;inset:0;z-index:240;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(5,7,10,.82);}
.phone-calendar-overlay.open{display:flex;}.phone-calendar-box{width:min(100%,340px);background:#171c25;border:1px solid #3a424f;border-radius:15px;padding:14px;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.phone-calendar-head{display:grid;grid-template-columns:36px 1fr 36px;align-items:center;gap:8px;margin-bottom:10px;}.phone-calendar-head strong{text-align:center;text-transform:capitalize;color:#f0c25b;font-size:14px;}.phone-calendar-head button,.phone-calendar-close{background:#11151c;border:1px solid #343b47;color:#d7dbe0;border-radius:8px;padding:8px;}
.phone-calendar-weekdays,.phone-calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}.phone-calendar-weekdays span{text-align:center;font-size:9px;color:#767f8c;font-weight:700;padding:4px 0;}.phone-calendar-day{aspect-ratio:1;border-radius:8px;background:#11151c;border:1px solid transparent;color:#e7e9ec;font-size:11px;}.phone-calendar-day.today{border-color:var(--gold);}.phone-calendar-day.selected{background:var(--gold);color:#16120a;font-weight:800;}.phone-calendar-day.empty{visibility:hidden;}.phone-calendar-close{width:100%;margin-top:10px;}
@media(max-width:390px){.reserva-modal-v372{padding:14px}.phone-date-card{flex-basis:62px;height:84px}.phone-date-detail-row{grid-template-columns:1fr}.phone-two-cols{display:grid;grid-template-columns:1fr 1fr}.phone-actions{grid-template-columns:1fr 1.2fr}}
/* La fila de celular necesita su propia proporción (no 50/50) también en
   pantallas angostas — esta regla, más específica, gana sobre la genérica
   de arriba. */
@media(max-width:390px){.field-row-celular{display:flex !important;}}