/* Senbeach PMS — sistema interno.
   Marca: #a8c424 primario, #12b99f secundario, #FFFFFF, #191414.
   Rojo y ambar existen SOLO como estado operativo: en software de
   operacion el color es seguridad, no identidad. */
:root{
  --verde:#a8c424; --verde-osc:#93ad1a; --verde-suave:#EEF4D8; --verde-tinta:#3E5200;
  --turquesa:#12b99f; --turquesa-suave:#DFF4F0;
  --negro:#191414; --blanco:#FFFFFF;
  --alerta:#C0392B; --aviso:#E08A1E;
  --n0:#FFFFFF; --n1:#F4F5F1; --n2:#ECEEE7; --n3:#DDE0D6; --n4:#80857A; --n5:#4A4D45;
  --lat:#151111; --lat-2:#1F1A1A; --lat-linea:#2B2626; --lat-tinta:#B9BCB2;
  --r:14px; --r-sm:9px;
  --sombra-1:0 1px 2px rgba(25,20,20,.04), 0 1px 3px rgba(25,20,20,.04);
  --sombra:0 1px 2px rgba(25,20,20,.05), 0 10px 28px -16px rgba(25,20,20,.28);
  --anillo:0 0 0 3px rgba(18,185,159,.22);
  --trans:180ms cubic-bezier(.22,.7,.32,1);
  --f-cuerpo:"Plus Jakarta Sans", Poppins, system-ui, sans-serif; --f-titulo:var(--f-cuerpo); --t-peso:700;
  --prim:var(--verde); --prim-osc:var(--verde-osc); --prim-tinta:var(--negro);
  --menu-on-bg:rgba(168,196,36,.13); --menu-on-tinta:#fff; --menu-on-ico:var(--verde);
  --kpi-barra:linear-gradient(90deg, var(--verde), var(--turquesa));
}
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
body{ margin:0; font-family:var(--f-cuerpo); background:var(--n1); color:var(--negro); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; transition:background 300ms ease; }
h1,h2,h3,h4{ margin:0; font-family:var(--f-titulo); font-weight:var(--t-peso); letter-spacing:-.02em; }
a{ color:inherit; }
.mono{ font-family:"IBM Plex Mono",monospace; font-size:.92em; }
:focus-visible{ outline:2px solid var(--turquesa); outline-offset:2px; }
b, .kpi b, td{ font-variant-numeric:tabular-nums; }

/* ---------- Estructura ---------- */
.app{ display:grid; grid-template-columns:252px minmax(0,1fr); min-height:100vh; }
.principal{ min-width:0; display:flex; flex-direction:column; }
@media(min-width:901px){ .app{ background:linear-gradient(90deg, var(--lat) 0 252px, transparent 252px); } }

.lateral{ background:var(--lat); color:#fff; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; border-right:1px solid var(--lat-linea); }
.marca{ padding:20px 18px 18px; display:flex; align-items:center; gap:11px; }
.marca svg{ width:36px; height:36px; flex:none; filter:drop-shadow(0 4px 10px rgba(168,196,36,.25)); }
.marca b{ font-size:15.5px; display:block; line-height:1.15; letter-spacing:-.01em; }
.marca span span{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--n4); }

.menu{ padding:6px 12px 14px; flex:1; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--lat-linea) transparent; }
.menu h5{ font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#6E7268; margin:18px 10px 6px; }
.menu h5:first-child{ margin-top:6px; }
.menu a{ position:relative; display:flex; align-items:center; gap:11px; color:var(--lat-tinta); padding:9px 11px; border-radius:var(--r-sm); font-size:13.5px; text-decoration:none; transition:background var(--trans), color var(--trans); }
.menu a svg{ width:18px; height:18px; flex:none; opacity:.85; transition:color var(--trans), opacity var(--trans); }
.menu a:hover{ background:var(--lat-2); color:#fff; }
.menu a:hover svg{ opacity:1; }
.menu a.on{ background:var(--menu-on-bg); color:var(--menu-on-tinta); font-weight:600; }
.menu a.on svg{ color:var(--menu-on-ico); opacity:1; }
.menu a.on::before{ content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--menu-on-ico); }
.menu .pill{ margin-left:auto; background:var(--alerta); color:#fff; font-size:10px; font-weight:700; border-radius:20px; padding:1px 7px; }

.usuario{ margin:0 12px 12px; padding:10px; border-radius:var(--r-sm); background:var(--lat-2); display:flex; align-items:center; gap:10px; font-size:12.5px; }
.avatar{ width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg, var(--turquesa), var(--verde)); color:var(--negro); display:grid; place-items:center; font-weight:700; font-size:12px; flex:none; }
.usuario .quien{ min-width:0; }
.usuario .quien b{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.usuario small{ display:block; color:var(--n4); font-size:11px; }
.usuario form{ margin-left:auto; }
.usuario button{ background:none; border:none; color:var(--n4); cursor:pointer; width:32px; height:32px; border-radius:8px; display:grid; place-items:center; transition:background var(--trans), color var(--trans); }
.usuario button:hover{ background:var(--lat-linea); color:#fff; }
.usuario button svg{ width:17px; height:17px; }

.tope{ background:rgba(255,255,255,.86); backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%); border-bottom:1px solid var(--n3); padding:0 26px; min-height:66px; display:flex; align-items:center; gap:14px; position:sticky; top:0; z-index:30; }
.tope-titulo{ min-width:0; }
.tope h1{ font-size:19px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tope .fecha{ font-size:12px; color:var(--n4); }
.tope-acciones{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.abrir-menu{ display:none; width:40px; height:40px; border:1px solid var(--n3); border-radius:var(--r-sm); background:var(--n0); cursor:pointer; place-items:center; color:var(--negro); flex:none; }
.abrir-menu svg{ width:20px; height:20px; }
.vivo{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; color:var(--n5); background:var(--n0); border:1px solid var(--n3); border-radius:20px; padding:5px 12px; }
.latido{ width:7px; height:7px; border-radius:50%; background:var(--verde); box-shadow:0 0 0 0 rgba(168,196,36,.6); animation:latir 1.8s ease-out infinite; }
@keyframes latir{ 0%{ box-shadow:0 0 0 0 rgba(168,196,36,.55); } 80%,100%{ box-shadow:0 0 0 7px rgba(168,196,36,0); } }
main{ padding:24px 26px 40px; max-width:1500px; width:100%; }
.velo-menu{ display:none; }

@media(max-width:900px){
  .app{ grid-template-columns:1fr; }
  .lateral{ position:fixed; inset:0 auto 0 0; width:272px; z-index:80; transform:translateX(-100%); transition:transform 260ms cubic-bezier(.22,.7,.32,1); box-shadow:0 0 50px rgba(0,0,0,.35); }
  .lateral.abierto{ transform:none; }
  .velo-menu:not([hidden]){ display:block; position:fixed; inset:0; z-index:70; background:rgba(25,20,20,.45); backdrop-filter:blur(2px); }
  .abrir-menu{ display:grid; }
  .tope{ padding:0 14px; min-height:60px; }
  .tope h1{ font-size:16.5px; }
  .tope .fecha{ display:none; }
  .tope .vivo{ display:none; }
  main{ padding:16px 14px 32px; }
}
@media(max-width:560px){
  .tope-acciones .btn-p span{ display:none; }
  .tope-acciones .btn-p{ padding:0; width:40px; height:40px; justify-content:center; }
}

/* ---------- Botones ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:36px; border:1px solid var(--n3); background:var(--n0); color:var(--negro); border-radius:var(--r-sm); padding:7px 14px; font-size:13px; font-weight:500; cursor:pointer; font-family:inherit; text-decoration:none; transition:background var(--trans), border-color var(--trans), box-shadow var(--trans), transform 120ms ease; box-shadow:var(--sombra-1); }
.btn svg{ width:16px; height:16px; flex:none; }
.btn:hover{ border-color:var(--n4); background:var(--n1); }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:none; box-shadow:var(--anillo); border-color:var(--turquesa); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn-p{ background:var(--prim); border-color:var(--prim); color:var(--prim-tinta); font-weight:600; box-shadow:0 1px 2px rgba(25,20,20,.08), 0 6px 16px -8px color-mix(in srgb, var(--prim) 70%, transparent); }
.btn-p:hover{ background:var(--prim-osc); border-color:var(--prim-osc); }
.btn-x{ min-height:30px; padding:4px 11px; font-size:12px; border-radius:8px; }

/* ---------- Tarjetas y rejillas ---------- */
.tarjeta{ background:var(--n0); border:1px solid var(--n3); border-radius:var(--r); box-shadow:var(--sombra-1); overflow:hidden; }
.tarjeta > header{ padding:15px 18px; border-bottom:1px solid var(--n2); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tarjeta > header h3{ font-size:14.5px; }
.cuerpo{ padding:18px; }
.rejilla{ display:grid; gap:16px; }
.g6{ grid-template-columns:repeat(6,1fr); } .g4{ grid-template-columns:repeat(4,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); } .g2{ grid-template-columns:1.6fr 1fr; }
@media(max-width:1250px){ .g6{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:1000px){ .g4,.g3,.g2{ grid-template-columns:1fr 1fr; } }
@media(max-width:680px){ .g6{ grid-template-columns:1fr 1fr; } .g4,.g3,.g2{ grid-template-columns:1fr; } }

.kpi{ position:relative; background:var(--n0); border:1px solid var(--n3); border-radius:var(--r); padding:15px 16px 14px; box-shadow:var(--sombra-1); overflow:hidden; transition:box-shadow var(--trans), transform var(--trans); }
.kpi:hover{ box-shadow:var(--sombra); transform:translateY(-1px); }
.kpi::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--kpi-barra); opacity:.9; }
.kpi span{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--n4); font-weight:600; }
.kpi b{ display:block; font-size:28px; font-weight:700; letter-spacing:-.03em; line-height:1.15; margin-top:4px; }
.kpi i{ font-style:normal; font-size:11.5px; color:var(--n5); }
.kpi.urg{ border-color:#EFC2BC; background:linear-gradient(180deg, #FFF8F7, var(--n0) 60%); }
.kpi.urg::before{ background:var(--alerta); }
.kpi.urg b{ color:var(--alerta); }
.kpi-dona{ display:flex; align-items:center; justify-content:space-between; gap:6px; }
.kpi-dona svg{ flex:none; }
.kpi-dona .pista{ stroke:var(--n2); }
.kpi-dona .valor{ stroke:var(--verde); transition:stroke-dashoffset 400ms ease; }
@media(max-width:680px){ .kpi b{ font-size:23px; } }

/* ---------- Graficos ---------- */
.grafico-grid{ stroke:var(--n2); stroke-dasharray:4 4; }
.grafico-eje{ fill:var(--n4); font-family:var(--f-cuerpo); }
.grafico-area{ fill:url(#gr-ocupacion); }
.grafico-linea{ stroke:var(--turquesa); fill:none; }
.grafico-punto{ stroke:var(--turquesa); fill:var(--n0); }
.grafico-valor{ fill:var(--negro); font-weight:600; font-family:var(--f-cuerpo); }
.grad-a{ stop-color:var(--turquesa); stop-opacity:.28; }
.grad-b{ stop-color:var(--turquesa); stop-opacity:0; }

.dona-fila{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.dona-fila svg{ flex:none; }
.dona-leyenda{ display:flex; flex-direction:column; gap:8px; flex:1; min-width:180px; }
.dona-leyenda .fila{ display:flex; align-items:center; gap:9px; font-size:12.5px; padding:6px 10px; border-radius:8px; background:var(--n1); }
.dona-leyenda .punto{ width:9px; height:9px; border-radius:50%; flex:none; }
.dona-leyenda .num{ margin-left:auto; display:flex; align-items:baseline; gap:7px; }
.dona-leyenda .num small{ color:var(--n4); font-size:11px; font-weight:500; font-variant-numeric:tabular-nums; }
.dona-leyenda .num b{ font-size:13.5px; min-width:16px; text-align:right; }
.pt-sucia{ background:var(--aviso); } .pt-limpieza{ background:var(--turquesa); }
.pt-lista{ background:var(--verde); } .pt-ocupada{ background:var(--negro); }
.pt-bloqueada{ background:var(--alerta); }
.seg-sucia{ stroke:var(--aviso); } .seg-limpieza{ stroke:var(--turquesa); }
.seg-lista{ stroke:var(--verde); } .seg-ocupada{ stroke:var(--negro); }
.seg-bloqueada{ stroke:var(--alerta); }

/* ---------- Etiquetas de estado ---------- */
.et{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; padding:3px 10px; border-radius:20px; white-space:nowrap; border:1px solid; line-height:1.5; }
.et::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.e-lista{ color:#4A6100; background:#EEF4D8; border-color:#CFDF9A; }
.e-ocupada{ color:#0B5F52; background:#DFF4F0; border-color:#9BDBD0; }
.e-limpieza{ color:#0B5F52; background:#DFF4F0; border-color:#9BDBD0; }
.e-sucia{ color:#8A5A00; background:#FBF0DA; border-color:#EBD09A; }
.e-bloqueada{ color:#7A2018; background:#FAE6E3; border-color:#E8B7B1; }

/* ---------- Tablas ---------- */
table{ width:100%; border-collapse:collapse; font-size:13px; }
th,td{ text-align:left; padding:11px 16px; border-bottom:1px solid var(--n2); vertical-align:middle; }
th{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--n4); font-weight:600; background:#FAFBF8; position:sticky; top:0; z-index:1; }
tbody tr{ transition:background 120ms ease; }
tbody tr:hover{ background:#F8FAF3; }
tbody tr:last-child td{ border-bottom:none; }
.tabla-env{ overflow-x:auto; }

/* ---------- Planning (rack) ---------- */
.rack-env{ overflow:auto; border:1px solid var(--n3); border-radius:var(--r); background:var(--n0); box-shadow:var(--sombra-1); }
.rack{ min-width:960px; }
.rack-cab{ display:grid; border-bottom:1px solid var(--n3); background:#FAFBF8; position:sticky; top:0; z-index:2; }
.rack-cab div{ padding:9px 4px; text-align:center; font-size:11px; border-left:1px solid var(--n2); }
.rack-cab div:first-child{ text-align:left; padding-left:14px; border-left:none; font-weight:600; }
.rack-cab b{ display:block; font-size:13px; } .rack-cab small{ color:var(--n4); font-size:10px; text-transform:uppercase; }
.rack-cab .hoy{ background:var(--verde); border-radius:8px 8px 0 0; }
.rack-cab .hoy small{ color:var(--verde-tinta); }
.rack-fila{ display:grid; border-bottom:1px solid var(--n2); position:relative; height:48px; }
.rack-fila:last-child{ border-bottom:none; } .rack-fila:hover{ background:#F8FAF3; }
.rack-uni{ padding:6px 14px; border-right:1px solid var(--n3); display:flex; flex-direction:column; justify-content:center; background:var(--n0); }
.rack-uni b{ font-size:13px; } .rack-uni small{ font-size:10.5px; color:var(--n4); }
.rack-celda{ border-left:1px solid var(--n2); }
.rack-celda.hoy{ background:rgba(168,196,36,.10); }
.barra{ position:absolute; height:32px; top:8px; border-radius:8px; padding:0 10px; display:flex; align-items:center; font-size:11.5px; font-weight:600; overflow:hidden; white-space:nowrap; border:1px solid transparent; transition:transform var(--trans), box-shadow var(--trans); box-shadow:0 1px 2px rgba(25,20,20,.08); }
.barra:hover{ transform:translateY(-2px); box-shadow:var(--sombra); z-index:4; }
.b-encasa{ background:var(--verde); color:var(--negro); }
.b-confirmada{ background:var(--turquesa); color:var(--negro); }
.b-retenida{ background:var(--n0); border:1.5px dashed var(--turquesa); color:var(--n5); box-shadow:none; }
.b-bloqueo{ background:repeating-linear-gradient(45deg,var(--n2),var(--n2) 5px,var(--n3) 5px,var(--n3) 10px); color:var(--n5); border-color:var(--n3); box-shadow:none; }

/* ---------- Limpieza ---------- */
.hk{ display:grid; grid-template-columns:repeat(auto-fill,minmax(225px,1fr)); gap:14px; }
.hab{ background:var(--n0); border:1px solid var(--n3); border-left:4px solid var(--n3); border-radius:var(--r); padding:14px 15px; box-shadow:var(--sombra-1); transition:box-shadow var(--trans), transform var(--trans); }
.hab:hover{ box-shadow:var(--sombra); transform:translateY(-2px); }
.hab.s-sucia{ border-left-color:var(--aviso); }
.hab.s-limpieza{ border-left-color:var(--turquesa); }
.hab.s-lista{ border-left-color:var(--verde); }
.hab.s-bloqueada{ border-left-color:var(--alerta); }
.hab .fila1{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.hab b{ font-size:15px; }
.hab .meta{ font-size:11.5px; color:var(--n4); min-height:34px; }
.hab .acciones{ display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }

/* ---------- Mapa de puertas ---------- */
.mapa-piso{ margin-bottom:28px; }
.mapa-piso:last-child{ margin-bottom:0; }
.mapa-piso h4{ font-size:12.5px; color:var(--n5); display:flex; align-items:center; gap:10px; margin-bottom:12px; text-transform:uppercase; letter-spacing:.08em; }
.mapa-piso h4::after{ content:""; height:1px; flex:1; background:var(--n3); }
.mapa-piso h4 span{ background:var(--n0); border:1px solid var(--n3); color:var(--n5); font-size:10px; font-weight:700; padding:2px 9px; border-radius:20px; letter-spacing:0; }

.puertas{ display:grid; grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); gap:16px; }
.puerta{ background:var(--n0); border:1px solid var(--n3); border-radius:var(--r); padding:16px 14px 15px; text-align:center; box-shadow:var(--sombra-1); transition:box-shadow var(--trans), transform var(--trans), border-color var(--trans); }
.puerta:hover{ box-shadow:var(--sombra); transform:translateY(-3px); }
.puerta .cod{ font-size:15px; margin-bottom:1px; }
.puerta .tipo{ font-size:11px; color:var(--n4); margin-bottom:10px; }

.hoja{ width:76px; height:112px; margin:0 auto 12px; position:relative; }
.hoja svg{ width:100%; height:100%; }
.hoja .marco{ fill:var(--n1); stroke:var(--n3); stroke-width:2; }
.hoja .panel{ transition:fill 200ms; }
.hoja .veta{ stroke:rgba(25,20,20,.08); stroke-width:1.2; fill:none; }
.hoja .picaporte{ fill:var(--n0); stroke:rgba(25,20,20,.18); stroke-width:1; }
.hoja .mirilla{ stroke:rgba(25,20,20,.18); stroke-width:1.4; }
.hoja .icono{ fill:none; }

.p-sucia .panel{ fill:var(--aviso); } .p-sucia .icono{ stroke:var(--negro); color:var(--negro); }
.p-limpieza .panel{ fill:var(--turquesa); } .p-limpieza .icono{ stroke:#fff; color:#fff; }
.p-lista .panel{ fill:var(--verde); } .p-lista .icono{ stroke:var(--negro); color:var(--negro); }
.p-ocupada .panel{ fill:var(--negro); } .p-ocupada .icono{ stroke:#fff; color:#fff; fill:#fff; }
.p-bloqueada .panel{ fill:var(--alerta); } .p-bloqueada .icono{ stroke:#fff; color:#fff; fill:#fff; }

.puerta .meta{ font-size:11px; color:var(--n5); min-height:32px; line-height:1.45; margin-top:2px; }
.puerta .meta b{ color:var(--negro); font-weight:600; }
.puerta .acciones{ display:flex; gap:5px; margin-top:10px; flex-wrap:wrap; justify-content:center; }
@keyframes destello{ 0%{ box-shadow:0 0 0 0 rgba(18,185,159,.5); } 70%{ box-shadow:0 0 0 11px rgba(18,185,159,0); } 100%{ box-shadow:0 0 0 0 rgba(18,185,159,0); } }
.puerta.recien-cambiada{ animation:destello 1.3s ease-out 2; border-color:var(--turquesa); }

/* ---------- Zonas comunes ---------- */
.zona-fila{ display:grid; grid-template-columns:170px 1fr; gap:14px; align-items:center; padding:12px 0; border-bottom:1px solid var(--n2); }
.zona-fila:last-child{ border-bottom:none; }
.zona-fila > b small{ display:block; font-weight:400; color:var(--n4); font-size:11px; }
@media(max-width:620px){ .zona-fila{ grid-template-columns:1fr; gap:6px; } }
.linea{ position:relative; height:36px; background:var(--n1); border-radius:var(--r-sm); border:1px solid var(--n2); }
.bloque{ position:absolute; top:4px; height:26px; border-radius:6px; font-size:11px; font-weight:600; display:flex; align-items:center; padding:0 8px; overflow:hidden; white-space:nowrap; }
.z-huesped{ background:var(--turquesa); color:var(--negro); }
.z-evento{ background:var(--verde); color:var(--negro); }
.z-mantenimiento{ background:repeating-linear-gradient(45deg,#ECEEE7,#ECEEE7 5px,#D9DDD2 5px,#D9DDD2 10px); color:var(--n5); }

/* ---------- Avisos, vacios, notas ---------- */
.ev{ display:flex; gap:11px; padding:12px 18px; border-bottom:1px solid var(--n2); font-size:12.5px; align-items:flex-start; }
.ev:last-child{ border-bottom:none; }
.ev .pt{ width:8px; height:8px; border-radius:50%; margin-top:6px; flex:none; background:var(--turquesa); box-shadow:0 0 0 3px rgba(18,185,159,.15); }
.ev.a .pt{ background:var(--aviso); box-shadow:0 0 0 3px rgba(224,138,30,.15); }
.ev.r .pt{ background:var(--alerta); box-shadow:0 0 0 3px rgba(192,57,43,.15); }
.vacio{ text-align:center; padding:38px 20px; color:var(--n4); font-size:13px; }
.nota{ font-size:12px; color:var(--n5); background:var(--n0); border:1px solid var(--n3); border-left:3px solid var(--turquesa); padding:11px 14px; border-radius:var(--r-sm); margin-top:14px; }

.flash{ padding:12px 16px; border-radius:var(--r-sm); font-size:13px; margin-bottom:16px; font-weight:500; display:flex; align-items:center; gap:10px; box-shadow:var(--sombra-1); }
.flash::before{ content:""; width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; }
.flash.ok{ background:var(--verde-suave); border:1px solid #CFDF9A; color:var(--verde-tinta); }
.flash.error{ background:#FAE6E3; border:1px solid #E8B7B1; color:#7A2018; }

/* ---------- Formularios ---------- */
.filtros{ display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; }
.filtros .campo{ margin-bottom:0; width:180px; }
.filtros .campo input{ padding:8px 11px; font-size:13px; }

.campo{ margin-bottom:14px; }
.campo label{ display:block; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--n5); margin-bottom:6px; }
.campo input,.campo select,.campo textarea{ width:100%; border:1px solid var(--n3); border-radius:var(--r-sm); padding:10px 13px; font-family:inherit; font-size:14px; background:var(--n0); color:var(--negro); transition:border-color var(--trans), box-shadow var(--trans); box-shadow:var(--sombra-1); }
.campo input:hover,.campo select:hover,.campo textarea:hover{ border-color:var(--n4); }
.campo textarea{ resize:vertical; min-height:70px; }
.campo input:focus,.campo select:focus,.campo textarea:focus{ outline:none; border-color:var(--turquesa); box-shadow:var(--anillo); }

.opciones-unidad{ display:grid; grid-template-columns:repeat(auto-fill,minmax(195px,1fr)); gap:10px; }
.opcion-unidad{ display:block; border:1px solid var(--n3); border-radius:var(--r-sm); padding:12px 14px; cursor:pointer; background:var(--n0); transition:border-color var(--trans), background var(--trans), box-shadow var(--trans); }
.opcion-unidad:hover{ border-color:var(--turquesa); }
.opcion-unidad input{ margin-right:8px; accent-color:var(--verde); }
.opcion-unidad:has(input:checked){ border-color:var(--verde); background:var(--verde-suave); box-shadow:0 0 0 3px rgba(168,196,36,.18); }
.opcion-unidad small{ display:block; color:var(--n4); font-size:11.5px; margin-top:2px; }
.check-linea{ display:flex; gap:9px; align-items:flex-start; font-size:13px; margin-top:8px; }
.check-linea input{ margin-top:3px; accent-color:var(--verde); width:16px; height:16px; flex:none; }

.medio-fila{ display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:12.5px; }
.medio-fila .nombre{ width:110px; flex:none; color:var(--n5); }
.medio-fila .pista{ flex:1; height:10px; background:var(--n2); border-radius:20px; overflow:hidden; }
.medio-fila .valor{ height:100%; background:linear-gradient(90deg, var(--turquesa), var(--verde)); border-radius:20px; }
.medio-fila .monto{ width:84px; flex:none; text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }

/* ---------- Pantalla de entrada ---------- */
.entrar{
  min-height:100vh; display:grid; place-items:center; padding:20px;
  background-color:var(--negro);
  background-image:linear-gradient(160deg, rgba(25,20,20,.35), rgba(25,20,20,.85)), url('../img/hero-piscina.jpg');
  background-size:cover; background-position:center 32%; background-repeat:no-repeat;
}
.entrar .caja{ background:rgba(255,255,255,.94); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.6); border-radius:20px; padding:36px 34px 30px; width:min(410px,100%); box-shadow:0 30px 80px -30px rgba(0,0,0,.6); }
.entrar .logo-entrar{ width:48px; height:48px; filter:drop-shadow(0 6px 14px rgba(168,196,36,.35)); }
.entrar h1{ font-size:22px; margin:18px 0 4px; }
.entrar p{ color:var(--n4); font-size:13px; margin:0 0 24px; }
.err{ color:var(--alerta); font-size:12px; margin-top:-6px; margin-bottom:10px; }
.demo{ margin-top:22px; padding-top:16px; border-top:1px solid var(--n2); font-size:11.5px; color:var(--n4); line-height:1.7; }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* =====================================================================
   ESTILO TROPICAL (elegido) — turquesa y lima a sangre, formas redondas
   ===================================================================== */
:root{
  --n0:#FFFFFF; --n1:#F2FAF7; --n2:#E3F3EE; --n3:#CFE8E1; --n4:#6E8A85; --n5:#3F5A55;
  --negro:#0F2B27;
  --lat:#0B5F52; --lat-2:#0E7062; --lat-linea:#12806F; --lat-tinta:#D5F1EA;
  --f-titulo:"Bricolage Grotesque", system-ui, sans-serif; --t-peso:800;
  --prim:#a8c424; --prim-osc:#97b21c; --prim-tinta:#0F2B27;
  --menu-on-bg:#a8c424; --menu-on-tinta:#0F2B27; --menu-on-ico:#0F2B27;
  --kpi-barra:#12b99f;
  --r:20px; --r-sm:12px;
}
.lateral{ background:linear-gradient(180deg, #0B5F52 0%, #0A4F45 100%); border-right:none; }
.menu h5{ color:#8FD3C5; }
.menu a.on::before{ display:none; }
.menu a{ border-radius:100px; }
.usuario{ background:rgba(255,255,255,.08); border-radius:16px; }
.tope h1{ font-size:21px; }
.kpi{ border:none; box-shadow:0 2px 0 rgba(15,43,39,.05), 0 14px 30px -20px rgba(11,95,82,.45); }
.kpi::before{ height:6px; border-radius:0 0 6px 6px; inset:0 18px auto 18px; }
.kpi b{ font-family:var(--f-titulo); }
.tarjeta{ border:none; box-shadow:0 2px 0 rgba(15,43,39,.04), 0 16px 34px -24px rgba(11,95,82,.45); }
.btn{ border-radius:100px; }
.campo input, .campo select, .campo textarea{ border-radius:12px; }

/* =====================================================================
   MODO OSCURO (data-modo="oscuro" en <html>)
   ===================================================================== */
[data-modo="oscuro"]{
  color-scheme:dark;
  --n0:#14201D; --n1:#0C1513; --n2:#1B2A26; --n3:#28403A; --n4:#86A099; --n5:#B1C6C0;
  --negro:#E6F1ED;
  --lat:#07332C; --lat-2:#0B4038; --lat-linea:#124B42; --lat-tinta:#BFE3DA;
  --verde-suave:#22331A; --verde-tinta:#CDE47F; --turquesa-suave:#12332D;
  --alerta:#FF8A7A; --aviso:#F0B04A;
  --sombra-1:0 1px 2px rgba(0,0,0,.4);
  --sombra:0 2px 4px rgba(0,0,0,.4), 0 12px 30px -16px rgba(0,0,0,.7);
  --anillo:0 0 0 3px rgba(47,209,180,.3);
}
[data-modo="oscuro"] .tope{ background:rgba(20,32,29,.9); }
[data-modo="oscuro"] th, [data-modo="oscuro"] .rack-cab{ background:#182622; }
[data-modo="oscuro"] tbody tr:hover, [data-modo="oscuro"] .rack-fila:hover{ background:#18241F; }
[data-modo="oscuro"] .kpi.urg{ background:linear-gradient(180deg, #2A1715, var(--n0) 60%); border-color:#5A2A25; }
[data-modo="oscuro"] .e-lista{ color:#CDE47F; background:#22331A; border-color:#3B5220; }
[data-modo="oscuro"] .e-ocupada, [data-modo="oscuro"] .e-limpieza{ color:#7FE0CF; background:#12332D; border-color:#1F5A4F; }
[data-modo="oscuro"] .e-sucia{ color:#F0B04A; background:#3A2A0A; border-color:#6B4C12; }
[data-modo="oscuro"] .e-bloqueada{ color:#FF8A7A; background:#3A1714; border-color:#6B2A24; }
[data-modo="oscuro"] .flash.ok{ background:#22331A; border-color:#3B5220; color:#CDE47F; }
[data-modo="oscuro"] .flash.error{ background:#3A1714; border-color:#6B2A24; color:#FF8A7A; }
[data-modo="oscuro"] .z-mantenimiento, [data-modo="oscuro"] .b-bloqueo{ background:repeating-linear-gradient(45deg,#1B2A26,#1B2A26 5px,#28403A 5px,#28403A 10px); color:var(--n5); }
[data-modo="oscuro"] .entrar .caja{ background:rgba(20,32,29,.95); border-color:rgba(255,255,255,.08); }
[data-modo="oscuro"] .p-ocupada .panel{ fill:#3A4B47; }
[data-modo="oscuro"] .pt-ocupada{ background:#5D7A73; }
[data-modo="oscuro"] .seg-ocupada{ stroke:#5D7A73; }

.boton-modo{ width:36px; height:36px; border-radius:50%; border:1px solid var(--n3); background:var(--n0); color:var(--negro); cursor:pointer; display:grid; place-items:center; flex:none; }
.boton-modo:hover{ border-color:var(--n4); }
.boton-modo svg{ width:17px; height:17px; }
.boton-modo .sol{ display:none; }
[data-modo="oscuro"] .boton-modo .luna{ display:none; } [data-modo="oscuro"] .boton-modo .sol{ display:block; }

/* ---------- Reservas ---------- */
.lista-cab{ flex-direction:column; align-items:stretch !important; gap:12px !important; }
.buscador-reservas{ position:relative; }
.buscador-reservas svg{ position:absolute; left:13px; top:50%; width:17px; height:17px; transform:translateY(-50%); color:var(--n4); }
.buscador-reservas input{ width:100%; border:1px solid var(--n3); border-radius:var(--r-sm); padding:11px 14px 11px 40px; font:inherit; font-size:14px; background:var(--n0); color:var(--negro); }
.buscador-reservas input:focus{ outline:none; border-color:var(--turquesa); box-shadow:var(--anillo); }
.pestanas{ display:flex; gap:4px; flex-wrap:wrap; }
.pestanas a{ text-decoration:none; font-size:12.5px; font-weight:600; color:var(--n5); padding:6px 13px; border-radius:100px; border:1px solid transparent; }
.pestanas a:hover{ background:var(--n1); }
.pestanas a.on{ background:var(--prim); color:var(--prim-tinta); }
.sub{ color:var(--n4); font-size:11.5px; }
.fila-link{ cursor:pointer; }
.fila-link a{ text-decoration:none; }
.saldo{ color:var(--alerta); font-weight:700; }
.e-neutra{ color:var(--n5); background:var(--n1); border-color:var(--n3); }
.canal{ font-size:11px; font-weight:700; padding:2px 9px; border-radius:6px; background:var(--n1); color:var(--n5); }
.canal-web{ background:var(--verde-suave); color:var(--verde-tinta); }
.paginar{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 16px; border-top:1px solid var(--n2); }
.paginar .btn[aria-disabled]{ opacity:.4; pointer-events:none; }
.volver-lista{ display:inline-flex; align-items:center; gap:7px; text-decoration:none; color:var(--n5); font-weight:600; font-size:13px; margin-bottom:14px; }
.volver-lista svg{ width:16px; height:16px; }
.ficha-cab{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.ficha-cab h2{ font-size:26px; margin:2px 0 4px; }
.ficha-codigo{ display:inline-block; font-size:12px; font-weight:600; background:var(--n0); border:1px dashed var(--n3); border-radius:6px; padding:3px 9px; }
.ficha-acciones{ display:flex; gap:8px; }
.btn-peligro{ background:var(--alerta); border-color:var(--alerta); color:#fff; font-weight:600; }
.btn-peligro:hover{ filter:brightness(1.08); background:var(--alerta); }
.estadia-fila{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.estadia-fila + .estadia-fila{ border-top:1px solid var(--n2); }
.estadia-fechas{ display:flex; align-items:center; gap:16px; }
.estadia-fechas > div{ display:flex; flex-direction:column; }
.estadia-fechas b{ font-size:17px; }
.estadia-fechas svg{ width:20px; height:20px; color:var(--n4); }
.estadia-datos{ display:flex; flex-direction:column; align-items:flex-end; gap:5px; font-size:13px; }
.cuenta-fila{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--n2); font-size:13.5px; }
.cuenta-fila:last-child{ border-bottom:none; }
.cuenta-fila span{ color:var(--n5); }
.cuenta-fila b{ text-align:right; word-break:break-word; }
.cuenta-fila.total b{ font-size:20px; }
.nota-reserva{ font-size:13px; color:var(--n5); line-height:1.6; }
.modal{ border:none; border-radius:var(--r); padding:24px; width:min(460px,92vw); background:var(--n0); color:var(--negro); box-shadow:var(--sombra); }
.modal::backdrop{ background:rgba(10,20,18,.55); backdrop-filter:blur(2px); }
.modal h3{ font-size:19px; margin-bottom:6px; }
.modal-botones{ display:flex; justify-content:flex-end; gap:8px; margin-top:6px; }
@media(max-width:700px){
  .tabla-reservas thead{ display:none; }
  .tabla-reservas tr{ display:grid; grid-template-columns:1fr auto; gap:2px 12px; padding:12px 14px; border-bottom:1px solid var(--n2); }
  .tabla-reservas td{ border:none; padding:2px 0; text-align:left !important; }
  .tabla-reservas td:nth-child(5){ grid-column:2; grid-row:1; justify-self:end; }
  .tabla-reservas td:nth-child(6){ display:none; }
  .estadia-datos{ align-items:flex-start; }
}

/* ---------- Aviso de reserva nueva ---------- */
.avisos{ position:fixed; right:18px; bottom:18px; z-index:200; display:flex; flex-direction:column; gap:10px; max-width:340px; }
.aviso-reserva{ display:flex; flex-direction:column; gap:2px; text-decoration:none; color:var(--negro); background:var(--n0); border:1px solid var(--n3); border-left:5px solid var(--prim); border-radius:var(--r-sm); padding:12px 16px; box-shadow:var(--sombra); animation:avisoEntra 360ms cubic-bezier(.22,.7,.32,1); transition:opacity 400ms ease, transform 400ms ease; }
.aviso-reserva b{ font-size:13.5px; }
.aviso-reserva span{ font-size:13px; color:var(--n5); }
.aviso-reserva small{ font-size:12px; color:var(--n4); }
.aviso-reserva.fuera{ opacity:0; transform:translateX(20px); }
@keyframes avisoEntra{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@media(max-width:680px){
  .kpis-compactos{ grid-template-columns:repeat(3,1fr) !important; gap:8px; }
  .kpis-compactos .kpi{ padding:12px 10px 10px; }
  .kpis-compactos .kpi span{ font-size:9px; letter-spacing:.06em; }
  .kpis-compactos .kpi b{ font-size:18px; }
  .kpis-compactos .kpi i{ display:none; }
  .pestanas{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -4px; padding:0 4px; }
  .pestanas::-webkit-scrollbar{ display:none; }
  .pestanas a{ white-space:nowrap; }
}
.grafico-vacio{ margin:-110px auto 70px; text-align:center; max-width:380px; font-size:12.5px; color:var(--n5); background:var(--n0); border:1px dashed var(--n3); border-radius:var(--r-sm); padding:10px 14px; position:relative; }
.reciente{ display:grid; grid-template-columns:90px 1.6fr 1fr 80px 110px; gap:12px; align-items:center; padding:11px 18px; border-bottom:1px solid var(--n2); text-decoration:none; color:inherit; font-size:13px; }
.reciente:last-child{ border-bottom:none; }
.reciente:hover{ background:var(--n1); }
@media(max-width:700px){ .reciente{ grid-template-columns:1fr auto; } .reciente > span:nth-child(3), .reciente > span:nth-child(4){ display:none; } }
@media(max-width:680px){
  .g4{ grid-template-columns:1fr 1fr; }
  .g4 .kpi, .g6 .kpi{ padding:12px 12px 10px; }
  .puertas{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .puerta{ padding:12px 8px; }
  .hoja{ width:58px; height:86px; }
  .grafico-vacio{ margin:8px 0 0; max-width:none; }
}

/* ---------- Menu plegable (solo escritorio) ---------- */
.marca{ position:relative; }
.plegar{ margin-left:auto; width:32px; height:32px; border-radius:9px; border:1px solid var(--lat-linea); background:transparent; color:var(--lat-tinta); display:grid; place-items:center; cursor:pointer; flex:none; transition:background var(--trans), color var(--trans); }
.plegar:hover{ background:var(--lat-2); color:#fff; }
.plegar svg{ width:17px; height:17px; transition:transform 260ms ease; }
.app, .lateral{ transition:grid-template-columns 260ms cubic-bezier(.22,.7,.32,1), width 260ms ease; }
@media(min-width:901px){
  [data-menu="corto"] .app{ grid-template-columns:76px minmax(0,1fr); background:linear-gradient(90deg, var(--lat) 0 76px, transparent 76px); }
  [data-menu="corto"] .marca{ flex-direction:column; padding:16px 10px 12px; gap:10px; }
  [data-menu="corto"] .marca-txt,
  [data-menu="corto"] .menu a > span,
  [data-menu="corto"] .usuario .quien,
  [data-menu="corto"] .usuario form{ display:none; }
  [data-menu="corto"] .plegar{ margin:0; }
  [data-menu="corto"] .plegar svg{ transform:scaleX(-1); }
  [data-menu="corto"] .menu{ padding:4px 10px 14px; }
  [data-menu="corto"] .menu h5{ font-size:0; height:1px; background:var(--lat-linea); margin:12px 8px; }
  [data-menu="corto"] .menu h5:first-child{ display:none; }
  [data-menu="corto"] .menu a{ justify-content:center; padding:11px 0; }
  [data-menu="corto"] .menu a svg{ width:20px; height:20px; }
  [data-menu="corto"] .menu a.on::before{ left:-10px; }
  [data-menu="corto"] .menu .pill{ position:absolute; top:4px; right:6px; margin:0; padding:0 5px; font-size:9px; }
  [data-menu="corto"] .usuario{ justify-content:center; margin:0 10px 12px; padding:8px 0; }
}
@media(max-width:900px){ .plegar{ display:none; } }

/* ---------- Graficos ---------- */
.grafico{ display:block; height:auto; max-height:300px; }
.vacio-grafico{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; min-height:200px; padding:20px; color:var(--n5); }
.vacio-grafico svg{ width:38px; height:38px; color:var(--turquesa); margin-bottom:4px; }
.vacio-grafico b{ color:var(--negro); font-size:14.5px; }
.vacio-grafico span{ font-size:12.5px; max-width:320px; }
.vacio-grafico .btn{ margin-top:8px; }

/* ---------- Planning ---------- */
.barra-planning{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; background:var(--n0); border:1px solid var(--n3); border-radius:var(--r); padding:10px 14px; box-shadow:var(--sombra-1); }
.nav-semanas{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.rango-planning{ margin:0 8px; font-size:15px; }
.ir-fecha input{ border:1px solid var(--n3); border-radius:var(--r-sm); padding:6px 10px; font:inherit; font-size:12.5px; background:var(--n0); color:var(--negro); }
.leyenda-planning{ display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--n5); }
.leyenda-planning span{ display:inline-flex; align-items:center; gap:6px; }
.lg{ width:22px; height:12px; border-radius:4px; display:inline-block; position:static; }
.rack-cab .finde, .rack-celda.finde{ background:color-mix(in srgb, var(--n1) 70%, transparent); }
.rack-cab .hoy{ color:var(--negro); }
a.barra{ text-decoration:none; cursor:pointer; }
.barra span{ overflow:hidden; text-overflow:ellipsis; }
.barra.corte{ border-top-left-radius:0; border-bottom-left-radius:0; }
.rack-pie{ background:var(--n1); height:40px; }
.pie-celda{ display:grid; place-items:center; }
.pct{ font-size:11px; font-weight:700; padding:1px 6px; border-radius:6px; }
.pbaja{ color:var(--n4); } .pmedia{ color:var(--aviso); background:color-mix(in srgb, var(--aviso) 14%, transparent); } .palta{ color:#fff; background:var(--turquesa); }

/* ---------- Bitacora ---------- */
.filtros-bitacora{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.filtros-bitacora select{ border:1px solid var(--n3); border-radius:var(--r-sm); padding:10px 12px; font:inherit; font-size:13px; background:var(--n0); color:var(--negro); }
.dia-bitacora{ padding:10px 18px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--n4); background:var(--n1); border-bottom:1px solid var(--n2); }
.reg-bitacora{ display:grid; grid-template-columns:52px 14px 1fr 200px; gap:12px; align-items:center; padding:11px 18px; border-bottom:1px solid var(--n2); font-size:13px; }
.reg-bitacora .hora{ color:var(--n4); font-size:12px; }
.punto-b{ width:9px; height:9px; border-radius:50%; background:var(--turquesa); }
.punto-b.p-r{ background:var(--alerta); } .punto-b.p-v{ background:var(--verde); } .punto-b.p-g{ background:var(--n3); }
.reg-bitacora .que{ display:flex; flex-direction:column; min-width:0; }
.reg-bitacora .que span{ color:var(--n5); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; }
.reg-bitacora .quien{ text-align:right; display:flex; flex-direction:column; font-weight:600; }
.reg-bitacora .quien small{ color:var(--n4); font-weight:400; font-size:11px; }
@media(max-width:700px){ .reg-bitacora{ grid-template-columns:44px 12px 1fr; } .reg-bitacora .quien{ grid-column:3; text-align:left; } }

/* ---------- Caja ---------- */
.pill-mini{ display:inline-block; margin-left:4px; background:var(--alerta); color:#fff; font-size:10px; border-radius:20px; padding:0 6px; }
.tabla-caja a{ text-decoration:none; }
.lineas-hora{ background-image:repeating-linear-gradient(90deg, transparent 0, transparent calc(12.5% - 1px), var(--n2) calc(12.5% - 1px), var(--n2) 12.5%); }
.flash:has(.btn){ flex-wrap:wrap; }
.flash .btn{ flex:none; }
@media(max-width:700px){
  .tabla-caja thead{ display:none; }
  .tabla-caja tr{ display:grid; grid-template-columns:1fr auto; gap:4px 12px; padding:12px 14px; border-bottom:1px solid var(--n2); }
  .tabla-caja td{ border:none; padding:0; text-align:left !important; }
  .tabla-caja td:nth-child(1){ grid-column:2; grid-row:1; text-align:right !important; }
  .tabla-caja td:nth-child(2){ grid-column:1; grid-row:1; }
  .tabla-caja td:nth-child(3){ grid-column:1 / -1; font-size:12.5px; }
  .tabla-caja td:nth-child(4){ grid-column:1; font-size:12px; color:var(--n5); }
  .tabla-caja td:nth-child(5){ grid-column:2; grid-row:3; text-align:right !important; }
  .tabla-caja td:nth-child(6){ grid-column:1; }
  .tabla-caja td:nth-child(7){ grid-column:2; text-align:right !important; }
  .barra-planning{ padding:10px; }
  .rango-planning{ margin:0 4px; font-size:13.5px; }
}
.aviso-retenida{ background:var(--verde-suave); border:1px solid #E8C77A; color:#7A5300; }
[data-modo="oscuro"] .aviso-retenida{ background:#3A2A0A; border-color:#6B4C12; color:#F0B04A; }
.ficha-acciones form{ margin:0; }

/* ---------- Correos a huespedes ---------- */
.bandeja{ display:grid; grid-template-columns:minmax(280px,380px) 1fr; gap:16px; align-items:start; }
.bandeja-lista{ max-height:calc(100vh - 170px); overflow:auto; }
.correo-item{ display:grid; gap:4px; padding:13px 18px; border-bottom:1px solid var(--n2); text-decoration:none; color:inherit; transition:background var(--trans); border-left:3px solid transparent; }
.correo-item:hover{ background:var(--n1); }
.correo-item.on{ background:var(--n1); border-left-color:var(--turquesa); }
.correo-cab{ display:flex; justify-content:space-between; gap:10px; font-size:13px; }
.correo-cab b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.correo-asunto{ font-size:12.5px; color:var(--n5); }
.correo-pie{ display:flex; gap:6px; }
.bandeja-vista header{ display:flex; justify-content:space-between; align-items:flex-start; }
.bandeja-vista iframe{ display:block; width:100%; height:calc(100vh - 240px); min-height:520px; border:0; background:#F2FAF7; }
@media (max-width:900px){ .bandeja{ grid-template-columns:1fr; } .bandeja-lista{ max-height:none; } }

/* ---------- Devoluciones ---------- */
.tarjeta-alerta{ border-color:#E8C77A; }
.tarjeta-alerta > header{ display:flex; gap:8px; align-items:center; }
.devolucion-fila{ display:grid; grid-template-columns:1fr 210px 180px auto; gap:10px; align-items:center; padding:12px 18px; border-top:1px solid var(--n2); }
.devolucion-fila .dev-quien{ display:grid; gap:2px; font-size:13px; }
.devolucion-fila .dev-quien b{ font-size:16px; }
.devolucion-fila select, .devolucion-fila input{ min-height:36px; border:1px solid var(--n3); border-radius:var(--r-sm); padding:6px 10px; font:inherit; font-size:13px; background:var(--n0); color:inherit; }
@media (max-width:900px){ .devolucion-fila{ grid-template-columns:1fr; } }
.politica-caja{ border-radius:var(--r-sm); padding:10px 12px; font-size:12.5px; margin:4px 0 12px; }
.politica-caja.ok{ background:var(--verde-suave); color:var(--verde-tinta); }
.politica-caja.vencida{ background:#FDF0DC; color:#7A5300; }
[data-modo="oscuro"] .politica-caja.vencida{ background:#3A2A0A; color:#F0B04A; }

/* =====================================================================
   AVISOS EN VIVO: campana, panel y tostadas
   ===================================================================== */
.campana-env{ position:relative; }
.campana{ position:relative; width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--n3); border-radius:50%; background:var(--n0); color:var(--negro); cursor:pointer; box-shadow:var(--sombra-1); transition:border-color var(--trans), transform var(--trans); }
.campana:hover{ border-color:var(--turquesa); }
.campana svg{ width:19px; height:19px; }
.campana.con-avisos svg{ animation:campanear 1.2s ease 1; transform-origin:50% 4px; }
.campana-n{ position:absolute; top:-4px; right:-4px; min-width:19px; height:19px; padding:0 5px; border-radius:10px; background:var(--alerta); color:#fff; font-size:11px; font-weight:700; display:grid; place-items:center; box-shadow:0 0 0 2px var(--n0); animation:saltito 400ms cubic-bezier(.3,1.6,.5,1); }
@keyframes campanear{ 0%,100%{ transform:rotate(0); } 15%{ transform:rotate(14deg); } 30%{ transform:rotate(-12deg); } 45%{ transform:rotate(9deg); } 60%{ transform:rotate(-6deg); } 75%{ transform:rotate(3deg); } }
@keyframes saltito{ from{ transform:scale(.3); } to{ transform:scale(1); } }
.panel-avisos{ position:absolute; right:0; top:calc(100% + 10px); width:min(380px, calc(100vw - 24px)); max-height:min(520px, 70vh); display:flex; flex-direction:column; background:var(--n0); border:1px solid var(--n3); border-radius:var(--r); box-shadow:var(--sombra); z-index:150; overflow:hidden; animation:desplegar 200ms cubic-bezier(.22,.7,.32,1); transform-origin:top right; }
.panel-avisos[hidden]{ display:none; }
.panel-avisos header{ display:flex; justify-content:space-between; align-items:center; padding:13px 16px; border-bottom:1px solid var(--n2); }
.panel-avisos .vivo{ display:inline-flex !important; }
.lista-avisos{ overflow:auto; }
.avisos-vacio{ padding:26px 18px; margin:0; text-align:center; color:var(--n4); font-size:13px; }
@keyframes desplegar{ from{ opacity:0; transform:scale(.96) translateY(-6px); } to{ opacity:1; transform:none; } }
.aviso-item{ display:flex; gap:12px; padding:12px 16px; border-bottom:1px solid var(--n2); text-decoration:none; color:var(--negro); transition:background var(--trans); position:relative; }
.aviso-item:hover{ background:var(--n1); }
.aviso-item.nuevo{ background:var(--turquesa-suave); }
.aviso-item.nuevo::after{ content:""; position:absolute; right:14px; top:16px; width:8px; height:8px; border-radius:50%; background:var(--turquesa); }
.aviso-ic{ width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center; background:var(--n2); color:var(--n5); }
.aviso-ic svg{ width:18px; height:18px; }
.t-ok .aviso-ic{ background:var(--verde-suave); color:var(--verde-tinta); }
.t-aviso .aviso-ic{ background:#FDF0DC; color:#8A5A00; }
.t-alerta .aviso-ic{ background:#FDECEA; color:var(--alerta); }
.t-info .aviso-ic{ background:var(--turquesa-suave); color:#0B7A68; }
[data-modo="oscuro"] .t-aviso .aviso-ic{ background:#3A2A0A; color:#F0B04A; }
[data-modo="oscuro"] .t-alerta .aviso-ic{ background:#3A1612; }
[data-modo="oscuro"] .t-info .aviso-ic{ color:#5FE0C8; }
.aviso-txt{ display:grid; gap:1px; min-width:0; padding-right:10px; }
.aviso-txt b{ font-size:13.5px; }
.aviso-txt span{ font-size:12.5px; color:var(--n5); overflow:hidden; text-overflow:ellipsis; }
.aviso-txt small{ font-size:11.5px; color:var(--n4); }
.aviso-reserva{ flex-direction:row; align-items:flex-start; gap:12px; border-left-width:5px; }
.aviso-reserva.t-alerta{ border-left-color:var(--alerta); }
.aviso-reserva.t-aviso{ border-left-color:var(--aviso); }
.aviso-reserva.t-info{ border-left-color:var(--turquesa); }
.menu a.novedad::after{ content:""; position:absolute; right:12px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:var(--alerta); box-shadow:0 0 0 0 rgba(192,57,43,.5); animation:latir 1.8s ease-out infinite; }

/* =====================================================================
   ENCABEZADO DE MODULO Y FORMULARIOS
   ===================================================================== */
.cab-modulo{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.cab-modulo > p{ max-width:70ch; }
.cab-acciones{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.form-ancho{ max-width:880px; }
.form-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; }
.form-4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 14px; }
@media(max-width:760px){ .form-2, .form-4{ grid-template-columns:1fr 1fr; } }
@media(max-width:480px){ .form-2{ grid-template-columns:1fr; } }
.barra-guardar{ position:sticky; bottom:0; display:flex; justify-content:flex-end; gap:10px; padding:14px 0; background:linear-gradient(180deg, transparent, var(--n1) 40%); z-index:5; }
.btn-peligro-suave{ color:var(--alerta); }
.btn-peligro-suave:hover{ background:#FDECEA; border-color:#F3C1BA; }
[data-modo="oscuro"] .btn-peligro-suave:hover{ background:#3A1612; border-color:#5A2620; }
.con-prefijo{ display:flex; align-items:stretch; border:1px solid var(--n3); border-radius:var(--r-sm); overflow:hidden; background:var(--n0); box-shadow:var(--sombra-1); }
.con-prefijo span{ padding:10px 0 10px 12px; font-size:13px; color:var(--n4); white-space:nowrap; }
.campo .con-prefijo input{ border:0; box-shadow:none; padding-left:2px; }
.contador-txt{ float:right; font-weight:500; letter-spacing:0; text-transform:none; color:var(--n4); }

/* Interruptor */
.interruptores{ display:flex; gap:22px; align-items:center; flex-wrap:wrap; padding-top:4px; }
.interruptor{ display:inline-flex; align-items:center; gap:11px; cursor:pointer; font-size:13.5px; }
.interruptor input{ position:absolute; opacity:0; width:1px; height:1px; }
.interruptor .pista{ position:relative; width:42px; height:24px; flex:none; border-radius:20px; background:var(--n3); transition:background var(--trans); }
.interruptor .pista::after{ content:""; position:absolute; left:3px; top:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform 220ms cubic-bezier(.3,1.4,.5,1); }
.interruptor input:checked + .pista{ background:var(--turquesa); }
.interruptor input:checked + .pista::after{ transform:translateX(18px); }
.interruptor input:focus-visible + .pista{ box-shadow:var(--anillo); }
.interruptor > span:last-child{ display:grid; }
.interruptor small{ font-size:12px; }

/* =====================================================================
   USUARIOS
   ===================================================================== */
.rejilla-personas{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:14px; }
.persona{ background:var(--n0); border:1px solid var(--n3); border-radius:var(--r); padding:18px; box-shadow:var(--sombra-1); display:grid; gap:12px; transition:box-shadow var(--trans), transform var(--trans); }
.persona:hover{ box-shadow:var(--sombra); transform:translateY(-2px); }
.persona.inactiva{ opacity:.62; }
.persona.inactiva:hover{ opacity:1; }
.persona-cab{ display:flex; gap:12px; align-items:center; min-width:0; }
.persona-quien{ display:grid; min-width:0; }
.persona-quien b, .persona-quien small{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.avatar-g{ width:46px; height:46px; flex:none; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:15px; color:#fff; background:linear-gradient(135deg,#12b99f,#0B5F52); }
.avatar-g.av-g{ background:linear-gradient(135deg,#a8c424,#5d7a00); }
.avatar-g.av-r{ background:linear-gradient(135deg,#12b99f,#0B5F52); }
.avatar-g.av-l{ background:linear-gradient(135deg,#7FB3F5,#3366B8); }
.avatar-g.av-c{ background:linear-gradient(135deg,#F5A97F,#C0582B); }
.avatar-g.av-m{ background:linear-gradient(135deg,#B9A0E8,#6B4FB0); }
.persona-datos{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:12.5px; }
.chip-rol{ font-size:12px; font-weight:600; padding:3px 10px; border-radius:20px; background:var(--n2); }
.persona-ult{ margin:0; font-size:12.5px; }
.persona-acciones{ display:flex; gap:8px; }
.roles-opciones{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.rol-op{ position:relative; cursor:pointer; }
.rol-op input{ position:absolute; opacity:0; }
.rol-op span{ display:grid; gap:2px; padding:13px 14px; border:1.5px solid var(--n3); border-radius:var(--r-sm); background:var(--n0); transition:border-color var(--trans), background var(--trans), transform var(--trans); }
.rol-op:hover span{ border-color:var(--n4); }
.rol-op input:checked + span{ border-color:var(--turquesa); background:var(--turquesa-suave); transform:scale(1.02); }
.rol-op input:focus-visible + span{ box-shadow:var(--anillo); }

/* =====================================================================
   CONTENIDO DEL SITIO
   ===================================================================== */
.rejilla-dptos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.dpto-admin{ display:block; background:var(--n0); border:1px solid var(--n3); border-radius:var(--r); overflow:hidden; text-decoration:none; color:var(--negro); box-shadow:var(--sombra-1); transition:box-shadow var(--trans), transform var(--trans); }
.dpto-admin:hover{ box-shadow:var(--sombra); transform:translateY(-3px); }
.dpto-admin.oculto .dpto-admin-foto img{ filter:grayscale(.8); opacity:.7; }
.dpto-admin-foto{ position:relative; aspect-ratio:16/10; background:var(--n2); overflow:hidden; }
.dpto-admin-foto img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 600ms cubic-bezier(.22,.7,.32,1); }
.dpto-admin:hover .dpto-admin-foto img{ transform:scale(1.05); }
.dpto-admin-foto .et{ position:absolute; left:10px; top:10px; box-shadow:var(--sombra-1); }
.sin-foto{ height:100%; display:grid; place-items:center; align-content:center; gap:6px; color:var(--n4); font-size:12.5px; }
.sin-foto svg{ width:34px; height:34px; }
.dpto-admin-cuerpo{ display:grid; gap:4px; padding:14px 16px 16px; }
.dpto-admin-cuerpo b{ font-size:15px; }
.dpto-admin-cuentas{ display:flex; gap:12px; font-size:12px; color:var(--n5); margin-top:4px; }
.editor-dpto{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:18px; align-items:start; }
@media(max-width:1100px){ .editor-dpto{ grid-template-columns:1fr; } }
.ambientes-edit{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.amb-edit{ position:relative; display:grid; gap:8px; padding:12px; border:1px dashed var(--n3); border-radius:var(--r-sm); background:var(--n1); transition:opacity 200ms ease, transform 200ms ease; }
.amb-edit input, .amb-edit textarea{ width:100%; border:1px solid var(--n3); border-radius:8px; padding:8px 10px; font:inherit; font-size:13px; background:var(--n0); color:var(--negro); resize:vertical; }
.amb-edit input{ font-weight:600; }
.amb-edit.saliendo{ opacity:0; transform:scale(.95); }
.quitar-amb{ position:absolute; top:-9px; right:-9px; width:24px; height:24px; border-radius:50%; border:1px solid var(--n3); background:var(--n0); color:var(--n5); cursor:pointer; font-size:16px; line-height:1; display:grid; place-items:center; box-shadow:var(--sombra-1); }
.quitar-amb:hover{ color:var(--alerta); border-color:var(--alerta); }
.zona-subir{ display:grid; justify-items:center; gap:4px; padding:24px 16px; border:2px dashed var(--n3); border-radius:var(--r); text-align:center; cursor:pointer; color:var(--n5); transition:border-color var(--trans), background var(--trans), transform var(--trans); }
.zona-subir:hover, .zona-subir.encima{ border-color:var(--turquesa); background:var(--turquesa-suave); }
.zona-subir.encima{ transform:scale(1.02); }
.zona-subir svg{ width:30px; height:30px; color:var(--turquesa); }
.zona-subir input{ position:absolute; opacity:0; width:1px; height:1px; }
.previas{ display:flex; gap:6px; flex-wrap:wrap; margin:10px 0; }
.previas img{ width:64px; height:64px; object-fit:cover; border-radius:8px; animation:aparecer 260ms ease both; }
.subir-fotos .btn{ width:100%; }
.fotos-admin{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-top:16px; }
.foto-admin{ position:relative; display:grid; gap:6px; }
.foto-admin img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; background:var(--n2); }
.portada-et{ position:absolute; left:8px; top:8px; }
.foto-titulo input{ width:100%; border:1px solid transparent; border-radius:6px; padding:5px 7px; font:inherit; font-size:12.5px; background:transparent; color:var(--negro); }
.foto-titulo input:hover{ border-color:var(--n3); }
.foto-titulo input:focus{ outline:none; border-color:var(--turquesa); background:var(--n0); }
.foto-botones{ position:absolute; right:6px; top:6px; display:flex; gap:4px; opacity:0; transition:opacity var(--trans); }
.foto-admin:hover .foto-botones, .foto-admin:focus-within .foto-botones{ opacity:1; }
@media(hover:none){ .foto-botones{ opacity:1; } }
.ib{ width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:8px; background:rgba(255,255,255,.92); color:#191414; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.2); transition:transform 120ms ease, background var(--trans); }
.ib:hover{ transform:scale(1.1); }
.ib svg{ width:15px; height:15px; }
.ib-peligro:hover{ background:#C0392B; color:#fff; }
.unidades-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.chip-unidad{ display:grid; text-align:left; padding:8px 12px; border-radius:10px; border:1px solid var(--n3); background:var(--n1); color:var(--n5); cursor:pointer; font:inherit; transition:transform var(--trans), border-color var(--trans); }
.chip-unidad small{ font-size:11px; }
.chip-unidad.on{ background:var(--verde-suave); border-color:#CFDF9A; color:var(--verde-tinta); }
.chip-unidad:hover{ transform:translateY(-2px); }
.agregar-unidad{ display:grid; grid-template-columns:1fr 90px auto; gap:10px; align-items:end; }
.lista-preguntas{ display:grid; gap:10px; }
.pregunta-admin summary{ display:flex; align-items:center; gap:12px; padding:14px 16px; cursor:pointer; list-style:none; }
.pregunta-admin summary::-webkit-details-marker{ display:none; }
.pregunta-admin[open] summary{ border-bottom:1px solid var(--n2); }
.pregunta-admin .num{ width:28px; height:28px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--n2); font-size:12px; font-weight:700; }
.pregunta-admin .txt{ flex:1; display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:14px; }
.pregunta-admin.oculta .txt b{ color:var(--n4); }
.orden-botones{ display:flex; gap:4px; }
.orden-botones .ib{ background:var(--n2); color:var(--negro); box-shadow:none; }
.pregunta-pie{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.pegajosa{ position:sticky; top:84px; }

/* =====================================================================
   RESPUESTA VISUAL GENERAL
   ===================================================================== */
@keyframes aparecer{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.aparecer{ animation:aparecer 380ms cubic-bezier(.22,.7,.32,1) both; animation-delay:var(--d, 0ms); }
main > *{ animation:aparecer 320ms cubic-bezier(.22,.7,.32,1) both; }
main > *:nth-child(2){ animation-delay:40ms; } main > *:nth-child(3){ animation-delay:80ms; } main > *:nth-child(4){ animation-delay:120ms; }
.flash{ animation:flashEntra 420ms cubic-bezier(.3,1.4,.5,1) both; }
.flash.saliendo{ transition:opacity 300ms ease, transform 300ms ease, margin 300ms ease; opacity:0; transform:translateY(-6px); }
@keyframes flashEntra{ from{ opacity:0; transform:translateY(-10px) scale(.98); } to{ opacity:1; transform:none; } }
.btn:active{ transform:scale(.97); }
.btn.cargando{ pointer-events:none; opacity:.85; }
.btn.cargando::before{ content:""; width:14px; height:14px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:girar 700ms linear infinite; }
@keyframes girar{ to{ transform:rotate(360deg); } }
.menu a svg{ transition:transform var(--trans); }
.menu a:hover svg{ transform:scale(1.12); }
.tarjeta{ transition:box-shadow var(--trans); }
@media (prefers-reduced-motion: reduce){
  .aparecer, main > *, .flash, .panel-avisos, .campana-n, .campana.con-avisos svg{ animation:none !important; }
}

/* ---------- Estado de las habitaciones: dona animada, barras y unidades ---------- */
.estado-hab{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:28px; align-items:center; }
@media(max-width:640px){ .estado-hab{ grid-template-columns:1fr; justify-items:center; } .estado-detalle{ width:100%; } }
.dona-env{ position:relative; width:188px; height:188px; }
.dona-grande{ width:100%; height:100%; transform:rotate(0deg); filter:drop-shadow(0 10px 18px rgba(11,95,82,.18)); }
.dona-centro{ fill:var(--n1); }
.dona-pista{ stroke:var(--n2); }
.dona-seg{ animation:dibujarSeg 900ms cubic-bezier(.22,.7,.32,1) forwards; animation-delay:calc(var(--n) * 120ms); transition:stroke-width var(--trans); cursor:default; }
.dona-seg:hover{ stroke-width:15; }
@keyframes dibujarSeg{ from{ stroke-dasharray:0 100; } }
.dona-texto{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center; text-align:center; pointer-events:none; }
.dona-texto b{ font-size:38px; line-height:1; font-weight:800; letter-spacing:-.03em; }
.dona-texto span{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--n4); margin-top:2px; }
.dona-texto em{ font-style:normal; margin-top:8px; font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:20px; background:var(--n2); color:var(--negro); }
.pt-fondo-lista{ background:var(--verde-suave) !important; color:var(--verde-tinta) !important; }
.pt-fondo-ocupada{ background:var(--n2) !important; }
.pt-fondo-limpieza{ background:var(--turquesa-suave) !important; color:#0B7A68 !important; }
.pt-fondo-sucia{ background:#FDF0DC !important; color:#8A5A00 !important; }
.pt-fondo-bloqueada{ background:#FDECEA !important; color:var(--alerta) !important; }
.estado-detalle{ display:grid; gap:16px; min-width:0; }
.estado-hab .dona-leyenda{ gap:6px; min-width:0; }
.estado-hab .dona-leyenda .fila{ display:grid; grid-template-columns:10px 92px minmax(0,1fr) 22px; align-items:center; gap:10px; padding:7px 10px; transition:background var(--trans); }
.estado-hab .dona-leyenda .fila:hover{ background:var(--n2); }
.estado-hab .dona-leyenda .fila.cero{ opacity:.5; }
.estado-hab .dona-leyenda b{ text-align:right; font-size:13.5px; }
.estado-hab .barra{ height:7px; border-radius:7px; background:var(--n2); overflow:hidden; }
.estado-hab .barra i{ display:block; height:100%; border-radius:7px; transform-origin:left; animation:crecerBarra 800ms cubic-bezier(.22,.7,.32,1) both; animation-delay:calc(var(--n) * 90ms + 200ms); }
@keyframes crecerBarra{ from{ transform:scaleX(0); } }
.unidades-mini{ display:flex; flex-wrap:wrap; gap:6px; }
.un-mini{ display:grid; gap:0; padding:6px 10px 6px 12px; border-radius:10px; background:var(--n1); border:1px solid var(--n3); border-left:4px solid var(--n3); font-size:12px; line-height:1.2; transition:transform var(--trans); }
.un-mini:hover{ transform:translateY(-2px); }
.un-mini small{ font-size:10.5px; color:var(--n4); }
.un-mini.u-lista{ border-left-color:var(--verde); }
.un-mini.u-ocupada{ border-left-color:var(--negro); }
.un-mini.u-limpieza{ border-left-color:var(--turquesa); }
.un-mini.u-sucia{ border-left-color:var(--aviso); }
.un-mini.u-bloqueada{ border-left-color:var(--alerta); }
@media (prefers-reduced-motion: reduce){ .dona-seg, .estado-hab .barra i{ animation:none; } }
.estado-hab .barra{ display:block; }

/* =====================================================================
   BARRA DE FECHA (mapa, zonas, restaurante)
   ===================================================================== */
.barra-fecha{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.bf-flecha{ width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--n3); border-radius:50%; background:var(--n0); color:var(--negro); box-shadow:var(--sombra-1); transition:border-color var(--trans), transform var(--trans); }
.bf-flecha:hover{ border-color:var(--turquesa); transform:scale(1.06); }
.bf-flecha svg{ width:18px; height:18px; }
.bf-fecha{ position:relative; display:grid; padding:6px 18px; border:1px solid var(--n3); border-radius:14px; background:var(--n0); box-shadow:var(--sombra-1); cursor:pointer; min-width:190px; }
.bf-fecha:hover{ border-color:var(--turquesa); }
.bf-rotulo{ font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--turquesa); }
.bf-fecha b{ font-size:14.5px; }
.bf-fecha input{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; }
.bf-fecha input::-webkit-calendar-picker-indicator{ position:absolute; inset:0; width:100%; height:100%; cursor:pointer; }
.barra-fecha .vivo{ margin-left:auto; }

/* Mapa: movimientos y pedidos del dia */
.puerta.con-llegada{ border-color:var(--turquesa); box-shadow:0 0 0 3px rgba(18,185,159,.14); }
.mov{ display:block; font-weight:700; font-size:11px; }
.mov-llega{ color:#0B7A68; }
.mov-sale{ color:var(--aviso); }
[data-modo="oscuro"] .mov-llega{ color:#5FE0C8; }
.pedido{ display:inline-block; margin:3px 3px 0 0; padding:2px 8px; border-radius:20px; font-size:10.5px; font-weight:700; background:#FDF0DC; color:#8A5A00; }
[data-modo="oscuro"] .pedido{ background:#3A2A0A; color:#F0B04A; }

/* Filas de pedidos por atender (zonas, limpieza) */
.pedido-fila{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 18px; border-top:1px solid var(--n2); }
.pedido-fila .pf-quien{ display:grid; flex:1; min-width:200px; font-size:13px; }
.pedido-fila select, .pedido-fila input{ min-height:36px; border:1px solid var(--n3); border-radius:var(--r-sm); padding:6px 9px; font:inherit; font-size:13px; background:var(--n0); color:inherit; }
.pf-horas{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--n5); }
.pf-pedidos{ display:flex; gap:4px; flex-wrap:wrap; }

/* Zonas: bloques que se pueden liberar */
form.bloque{ margin:0; gap:6px; padding-right:4px; }
form.bloque span{ overflow:hidden; text-overflow:ellipsis; }
.bloque-x{ margin-left:auto; flex:none; width:18px; height:18px; border:0; border-radius:50%; background:rgba(0,0,0,.14); color:inherit; font-size:13px; line-height:1; cursor:pointer; opacity:0; transition:opacity var(--trans); }
form.bloque:hover .bloque-x, .bloque-x:focus-visible{ opacity:1; }
@media(hover:none){ .bloque-x{ opacity:1; } }

/* =====================================================================
   RESTAURANTE
   ===================================================================== */
.desayunos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px; padding:14px 18px 18px; }
.desayuno{ display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--n3); border-radius:var(--r-sm); background:var(--n0); transition:opacity var(--trans); }
.desayuno.servido{ opacity:.6; }
.d-num{ width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:12px; background:#FDF0DC; color:#8A5A00; font-weight:800; font-size:17px; }
[data-modo="oscuro"] .d-num{ background:#3A2A0A; color:#F0B04A; }
.d-quien{ display:grid; flex:1; min-width:0; font-size:13px; }
.comanda{ padding:14px 18px; border-top:1px solid var(--n2); }
.comanda:first-of-type{ border-top:0; }
.comanda-cab{ display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:13px; margin-bottom:8px; }
.comanda-lineas{ list-style:none; margin:0 0 8px; padding:0; font-size:12.5px; color:var(--n5); }
.comanda-lineas li{ display:flex; justify-content:space-between; padding:3px 0; border-bottom:1px dashed var(--n2); }
.comanda-pie{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.comanda-pie > b{ font-size:17px; }
.comanda-acc{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.agregar-linea{ display:flex; gap:4px; }
.agregar-linea select, .agregar-linea input, .linea-nueva select, .linea-nueva input{ min-height:34px; border:1px solid var(--n3); border-radius:var(--r-sm); padding:5px 8px; font:inherit; font-size:12.5px; background:var(--n0); color:inherit; }
.agregar-linea select{ max-width:170px; }
.agregar-linea input{ width:54px; }
.linea-nueva{ display:grid; grid-template-columns:1fr 70px; gap:6px; margin-bottom:6px; }
.total-comanda{ display:flex; justify-content:space-between; align-items:baseline; padding:10px 0 14px; border-top:1px solid var(--n2); }
.total-comanda b{ font-size:22px; }

/* =====================================================================
   MEDIOS DE PAGO
   ===================================================================== */
.cuenta-banco{ position:relative; padding:14px 14px 14px 52px; border:1px solid var(--n3); border-radius:var(--r-sm); margin-bottom:12px; background:var(--n1); }
.cb-num{ position:absolute; left:14px; top:14px; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:var(--turquesa); color:#fff; font-weight:700; font-size:12px; }
.deuna-config{ display:grid; grid-template-columns:1fr 220px; gap:20px; align-items:start; }
.qr-vista{ display:grid; place-items:center; min-height:200px; border:2px dashed var(--n3); border-radius:var(--r); padding:12px; text-align:center; }
.qr-vista img{ max-width:100%; border-radius:10px; }
@media(max-width:700px){ .deuna-config{ grid-template-columns:1fr; } }
.extras-panel{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.extra-op{ position:relative; cursor:pointer; }
.extra-op input{ position:absolute; opacity:0; }
.extra-op span{ display:grid; gap:2px; padding:10px 12px; border:1.5px solid var(--n3); border-radius:var(--r-sm); background:var(--n0); font-size:13px; transition:border-color var(--trans), background var(--trans); }
.extra-op small{ font-size:11.5px; color:var(--n4); }
.extra-op:hover span{ border-color:var(--n4); }
.extra-op input:checked + span{ border-color:var(--turquesa); background:var(--turquesa-suave); }
.extra-op input:focus-visible + span{ box-shadow:var(--anillo); }
.agregar-extra{ display:flex; gap:8px; border-top:1px solid var(--n2); }
.agregar-extra select{ flex:1; min-height:34px; border:1px solid var(--n3); border-radius:var(--r-sm); padding:5px 9px; font:inherit; font-size:13px; background:var(--n0); color:inherit; }
@media(max-width:560px){ .extras-panel{ grid-template-columns:1fr; } }
.campo .extra-op{ display:block; font-size:13px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--negro); margin:0; }
.extra-op b{ font-weight:600; }
.tarjeta > .cuerpo.cuenta-fila{ padding:12px 18px; border-top:1px solid var(--n2); align-items:center; }
.tarjeta > header + .cuerpo.cuenta-fila{ border-top:0; }

/* Cobrar: enlaces de pago desde la ficha */
.tarjeta-cobro > header{ display:flex; gap:8px; align-items:center; }
.enlace-listo{ display:grid; gap:10px; background:var(--verde-suave); border-bottom:1px solid var(--n2); }
.enlace-caja{ display:flex; gap:6px; }
.enlace-caja input{ flex:1; min-width:0; border:1px solid var(--n3); border-radius:var(--r-sm); padding:7px 10px; font:inherit; font-size:12px; background:var(--n0); color:var(--negro); }
.btn-wa{ background:#25D366; border-color:#25D366; color:#0B2E1A; font-weight:600; justify-self:start; }
.btn-wa:hover{ filter:brightness(1.06); }
.montos-rapidos{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.chip-monto{ border:1px solid var(--n3); background:var(--n1); color:var(--negro); border-radius:20px; padding:6px 11px; font:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:border-color var(--trans), background var(--trans); }
.chip-monto:hover{ border-color:var(--turquesa); background:var(--turquesa-suave); }
.cobro-pendiente{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; border-top:1px solid var(--n2); font-size:13px; }
.cobro-acc{ display:flex; gap:6px; }
.opciones-cobro{ display:grid; gap:12px; margin:6px 0 14px; padding:12px; border-radius:var(--r-sm); background:var(--n1); }

/* ===== Check-in y check-out por QR ===== */
.escaner-env, .qr-env{ max-width:560px; margin:0 auto; display:grid; gap:16px; }
.escaner{ padding:14px; }
.camara{ position:relative; aspect-ratio:1/1; border-radius:var(--r); overflow:hidden; background:radial-gradient(circle at 50% 40%, #12806F 0%, #0B3F37 70%); }
.camara video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .3s; }
.camara.activa video{ opacity:1; }
.mira{ position:absolute; inset:16%; pointer-events:none; opacity:.35; transition:opacity .3s; }
.camara.activa .mira{ opacity:1; }
.mira span{ position:absolute; width:34px; height:34px; border:4px solid #a8c424; }
.mira span:nth-child(1){ left:0; top:0; border-right:0; border-bottom:0; border-top-left-radius:14px; }
.mira span:nth-child(2){ right:0; top:0; border-left:0; border-bottom:0; border-top-right-radius:14px; }
.mira span:nth-child(3){ left:0; bottom:0; border-right:0; border-top:0; border-bottom-left-radius:14px; }
.mira span:nth-child(4){ right:0; bottom:0; border-left:0; border-top:0; border-bottom-right-radius:14px; }
.linea-scan{ position:absolute; left:6%; right:6%; height:3px; top:0; border-radius:3px; background:linear-gradient(90deg, transparent, #a8c424, transparent); box-shadow:0 0 14px #a8c424; display:none; }
.camara.activa .linea-scan{ display:block; animation:barrido 2.2s ease-in-out infinite; }
@keyframes barrido{ 0%,100%{ top:4%; } 50%{ top:94%; } }
.camara.leido .mira span{ border-color:#fff; }
.camara.leido::after{ content:""; position:absolute; inset:0; background:rgba(168,196,36,.35); animation:destello .5s ease-out; }
@keyframes destello{ from{ opacity:1; } to{ opacity:0; } }
.camara-estado{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:8px; padding:24px; text-align:center; color:#fff; }
.camara-estado[hidden]{ display:none; }
.camara-estado svg{ width:54px; height:54px; color:#a8c424; }
.camara-estado b{ font-size:17px; }
.camara-estado span{ font-size:13px; color:#CFE8E1; max-width:300px; }
.camara-estado .btn{ margin-top:8px; }
.escaner-ayuda{ margin:12px 4px 2px; text-align:center; font-size:13px; color:var(--n5); }
.buscar-fila{ display:flex; gap:8px; }
.buscar-fila input{ flex:1; min-width:0; text-transform:uppercase; font-family:"IBM Plex Mono",monospace; }

.qr-ficha{ padding:20px; display:grid; gap:16px; }
.qr-cab{ display:flex; gap:14px; align-items:center; }
.qr-cab h2{ margin:0; font-size:20px; }
.qr-cab .sub{ margin:4px 0 0; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.qr-datos{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.qr-datos > div{ background:var(--n1); border-radius:var(--r-sm); padding:10px; display:grid; gap:2px; }
.qr-datos small{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--n4); font-weight:700; }
.qr-datos b{ font-size:15px; }
.qr-datos span{ font-size:11.5px; color:var(--n5); }
.qr-limpieza{ display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--n5); }
.qr-cuenta{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; border-radius:var(--r-sm); font-weight:700; }
.qr-cuenta span{ display:grid; gap:2px; }
.qr-cuenta small{ font-weight:500; font-size:12px; opacity:.8; }
.qr-cuenta b{ font-size:22px; }
.qr-cuenta.debe{ background:#FBF0DA; color:#8A5A00; }
.qr-cuenta.al-dia{ background:#EEF4D8; color:#4A6100; }
.qr-pedidos{ margin-top:-6px; }
.btn-qr{ width:100%; display:flex; align-items:center; justify-content:center; gap:10px; padding:18px; border:0; border-radius:100px; font:inherit; font-size:17px; font-weight:800; cursor:pointer; transition:transform .15s, box-shadow .15s; }
.btn-qr svg{ width:24px; height:24px; }
.btn-qr:active{ transform:scale(.98); }
.btn-qr.entrada{ background:#a8c424; color:#0F2B27; box-shadow:0 12px 26px -14px #7f9a10; }
.btn-qr.salida{ background:#0B5F52; color:#fff; box-shadow:0 12px 26px -14px #0B5F52; }
.qr-motivo{ padding:14px 16px; border-radius:var(--r-sm); font-size:14px; font-weight:600; line-height:1.45; }
.qr-motivo.n-aviso{ background:#FBF0DA; color:#8A5A00; }
.qr-motivo.n-error{ background:#FCE4E1; color:#A1322A; }
.qr-motivo.n-info, .qr-motivo.n-ok{ background:var(--n1); color:var(--n5); }
.qr-enlaces{ display:flex; gap:8px; flex-wrap:wrap; }
.qr-enlaces .btn{ flex:1; justify-content:center; }
@media (max-width:520px){ .qr-datos{ grid-template-columns:repeat(2, 1fr); } }
[data-modo="oscuro"] .camara-estado span{ color:#9FC7BE; }
[data-modo="oscuro"] .qr-datos > div{ background:#182622; }
[data-modo="oscuro"] .qr-cuenta.debe, [data-modo="oscuro"] .qr-motivo.n-aviso{ background:#3A2A0A; color:#F0B04A; }
[data-modo="oscuro"] .qr-cuenta.al-dia{ background:#22331A; color:#CDE47F; }
[data-modo="oscuro"] .qr-motivo.n-error{ background:#3A1A17; color:#F29C93; }
[data-modo="oscuro"] .qr-motivo.n-info, [data-modo="oscuro"] .qr-motivo.n-ok{ background:#182622; color:#B7CCC7; }
@media (prefers-reduced-motion: reduce){ .camara.activa .linea-scan{ animation:none; top:50%; } }

/* ===== Ingreso ===== */
.entrar{ padding-top:max(24px, env(safe-area-inset-top)); padding-bottom:max(24px, env(safe-area-inset-bottom)); }
.entrar .clave{ position:relative; }
.entrar .clave input{ padding-right:46px; }
.entrar .clave button{ position:absolute; right:4px; top:50%; transform:translateY(-50%); width:38px; height:38px; border:0; background:none; color:var(--n4); border-radius:8px; display:grid; place-items:center; cursor:pointer; }
.entrar .clave button[aria-pressed="true"]{ color:var(--turquesa); }
.entrar .clave button svg{ width:19px; height:19px; }
.entrar .recordar{ display:flex; gap:10px; align-items:flex-start; margin:4px 0 6px; font-size:13px; color:var(--n5); cursor:pointer; }
.entrar .recordar input{ width:18px; height:18px; margin:1px 0 0; accent-color:var(--turquesa); flex:none; }

/* ===== App en el celular (PWA) ===== */
a, button, .btn, input, select, label{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.barra-app{ display:none; }
.instalar-app{ margin:0 12px 10px; padding:10px 12px; display:flex; align-items:center; gap:11px; border:1px dashed rgba(168,196,36,.6); border-radius:16px; background:rgba(168,196,36,.1); color:#fff; font:inherit; text-align:left; cursor:pointer; }
.instalar-app svg{ width:22px; height:22px; color:#a8c424; flex:none; }
.instalar-app b{ display:block; font-size:13px; }
.instalar-app small{ display:block; font-size:11px; color:#9FC7BE; }
[data-menu="corto"] .instalar-app span{ display:none; }

.carga-pagina{ position:fixed; left:0; top:0; height:3px; width:0; z-index:400; background:linear-gradient(90deg, #12b99f, #a8c424); box-shadow:0 0 10px rgba(168,196,36,.7); opacity:0; pointer-events:none; }
.carga-pagina.activa{ opacity:1; animation:cargaPagina 8s cubic-bezier(.1,.7,.2,1) forwards; }
@keyframes cargaPagina{ from{ width:0; } 10%{ width:45%; } to{ width:92%; } }

.sin-red{ position:fixed; left:50%; transform:translateX(-50%); top:calc(env(safe-area-inset-top) + 70px); z-index:250; display:flex; align-items:center; gap:10px; width:min(520px, calc(100% - 24px)); padding:11px 14px; border-radius:14px; background:#3A1A17; color:#FCE4E1; font-size:13px; font-weight:600; box-shadow:0 14px 30px -12px rgba(0,0,0,.5); }
.sin-red svg{ width:20px; height:20px; flex:none; }

.tirar-recarga{ position:fixed; top:calc(env(safe-area-inset-top) + 8px); left:50%; transform:translate(-50%, 0); z-index:60; width:40px; height:40px; border-radius:50%; background:var(--n0); color:var(--turquesa); box-shadow:0 6px 18px rgba(15,43,39,.22); display:grid; place-items:center; opacity:0; pointer-events:none; transition:opacity .15s; }
.tirar-recarga svg{ width:20px; height:20px; }
.tirar-recarga.visible{ opacity:1; }
.tirar-recarga.listo{ color:#fff; background:var(--turquesa); }
.tirar-recarga.girando svg{ animation:girar .7s linear infinite; }
@keyframes girar{ to{ transform:rotate(360deg); } }

.hoja-ios{ position:fixed; inset:0; z-index:300; background:rgba(15,43,39,.5); display:flex; align-items:flex-end; justify-content:center; padding:12px; }
.hoja-ios-caja{ width:min(460px, 100%); background:var(--n0); border-radius:22px; padding:20px 20px calc(16px + env(safe-area-inset-bottom)); box-shadow:0 -10px 40px rgba(0,0,0,.25); }
.hoja-ios-caja b{ font-size:17px; }
.hoja-ios-caja ol{ margin:12px 0 16px; padding-left:20px; display:grid; gap:8px; color:var(--n5); }
.hoja-ios-caja .btn{ width:100%; padding:12px; }

@media(max-width:900px){
  /* La app ocupa toda la pantalla: respeta la muesca y la barra de gestos. */
  .tope{ padding-top:env(safe-area-inset-top); min-height:calc(60px + env(safe-area-inset-top)); }
  .lateral{ padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); }
  .abrir-menu{ display:none; }
  main{ padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
  .avisos{ right:12px; left:12px; max-width:none; bottom:calc(84px + env(safe-area-inset-bottom)); }

  .barra-app{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60; align-items:flex-end; justify-content:space-around; gap:2px; padding:6px 6px calc(6px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.92); backdrop-filter:blur(16px) saturate(170%); -webkit-backdrop-filter:blur(16px) saturate(170%); border-top:1px solid var(--n3); box-shadow:0 -8px 24px -18px rgba(15,43,39,.4); }
  .barra-app a, .barra-app button{ flex:1; min-width:0; max-width:110px; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px 4px; border:0; background:none; font:inherit; font-size:10.5px; font-weight:600; color:var(--n4); text-decoration:none; border-radius:14px; cursor:pointer; transition:color .15s; }
  .barra-app svg{ width:24px; height:24px; padding:3px 10px; box-sizing:content-box; border-radius:20px; transition:background .2s, color .2s; }
  .barra-app span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .barra-app a.on{ color:var(--negro); }
  .barra-app a.on svg{ background:#E3F3EE; color:#0B5F52; }
  .barra-app a:active svg, .barra-app button:active svg{ transform:scale(.9); }
  .barra-app a.central{ margin-top:-26px; color:var(--negro); }
  .barra-app a.central svg{ width:28px; height:28px; padding:15px; border-radius:50%; background:#a8c424; color:#0F2B27; box-shadow:0 10px 22px -8px rgba(127,154,16,.9), 0 0 0 5px var(--n1); }
  .barra-app a.central.on svg{ background:#0B5F52; color:#fff; }

  /* iPhone no hace zoom al escribir si la letra mide 16 px o mas. */
  .app input:not([type=checkbox]):not([type=radio]):not([type=range]), .app select, .app textarea, .entrar input:not([type=checkbox]){ font-size:16px; }
  .btn{ min-height:42px; }
  .btn-x{ min-height:34px; }
}
.modo-app body, .modo-app{ overscroll-behavior-y:contain; }
[data-modo="oscuro"] .barra-app{ background:rgba(20,32,29,.92); border-top-color:#22332F; }
[data-modo="oscuro"] .barra-app a.on svg{ background:#1F3A34; color:#8FE3CF; }
[data-modo="oscuro"] .barra-app a.central svg{ box-shadow:0 10px 22px -8px rgba(0,0,0,.8), 0 0 0 5px var(--n1); }
[data-modo="oscuro"] .tirar-recarga{ background:#1B2A26; }
@media (prefers-reduced-motion: reduce){ .carga-pagina.activa{ animation:none; width:70%; } }

/* ===== Factura electronica ===== */
.factura-acciones{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.factura-acciones form{ margin:0; }
.factura-resumen{ display:flex; flex-wrap:wrap; gap:6px 14px; padding:10px 12px; margin-bottom:12px; border-radius:var(--r-sm); background:var(--n1); font-size:12.5px; color:var(--n5); }
.factura-resumen b{ color:var(--negro); }
.factura-resumen .t{ margin-left:auto; font-weight:700; }
.factura-error{ display:grid; gap:4px; background:#FCE4E1; color:#7A2018; font-size:12.5px; }
[data-modo="oscuro"] .factura-error{ background:#3A1A17; color:#F29C93; }
.estado-sri{ display:grid; gap:10px; }
.estado-sri .fila{ display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:var(--r-sm); background:var(--n1); }
.estado-sri .fila svg{ width:20px; height:20px; flex:none; margin-top:1px; }
.estado-sri .fila.si svg{ color:#5d7a00; }
.estado-sri .fila.no svg{ color:#B42318; }
.estado-sri .fila b{ display:block; }
.estado-sri .fila span{ font-size:12.5px; color:var(--n5); }

/* ===== Promociones ===== */
.rejilla-promos{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:14px; }
.promo-tarjeta{ background:var(--n0); border:1px solid var(--n3); border-radius:var(--r); padding:16px; display:grid; gap:12px; box-shadow:var(--sombra-1); }
.promo-tarjeta.pausada{ opacity:.7; }
.promo-cab{ display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; }
.promo-cab b{ display:block; font-size:15px; }
.promo-valor{ min-width:60px; height:60px; padding:0 8px; border-radius:16px; display:grid; place-items:center; background:#B42318; color:#fff; font-weight:800; font-size:18px; letter-spacing:-.02em; }
.promo-cod{ padding:1px 7px; border-radius:6px; border:1px dashed var(--turquesa); color:var(--negro); font-weight:600; }
.promo-cond{ margin:0; padding:0; list-style:none; display:grid; gap:4px; font-size:12.5px; color:var(--n5); }
.promo-cond li::before{ content:"·"; margin-right:6px; color:var(--turquesa); font-weight:800; }
.promo-pie{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding-top:10px; border-top:1px solid var(--n2); font-size:12.5px; color:var(--n5); }
.promo-pie b{ color:var(--negro); }
.promo-acc{ display:flex; gap:6px; }
.promo-acc form{ margin:0; }
.promo-editor{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; align-items:start; }
.promo-vista{ position:sticky; top:84px; background:var(--n0); border:1px solid var(--n3); border-radius:var(--r); padding:16px; box-shadow:var(--sombra-1); }
.pv-franja{ display:flex; gap:12px; align-items:center; padding:12px; border-radius:var(--r-sm); background:linear-gradient(120deg, #EEF4D8, var(--n0)); border:1px solid #CFDF9A; }
.pv-pct{ flex:none; min-width:54px; height:54px; padding:0 6px; border-radius:14px; display:grid; place-items:center; background:#B42318; color:#fff; font-weight:800; }
.pv-franja b{ display:block; }
.pv-franja small{ display:block; font-size:11.5px; color:var(--n5); }
.pv-franja code{ font-weight:800; border:1px dashed var(--turquesa); border-radius:5px; padding:0 5px; }
.pv-ejemplo{ display:grid; gap:6px; font-size:13px; }
.pv-ejemplo > div{ display:flex; justify-content:space-between; }
.pv-ejemplo .pv-desc{ color:#4A6100; font-weight:700; }
.pv-ejemplo .pv-total{ padding-top:8px; border-top:1px solid var(--n3); font-weight:800; font-size:14px; }
.opciones-seg{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.opciones-seg label{ cursor:pointer; }
.opciones-seg input{ position:absolute; opacity:0; }
.opciones-seg span{ display:block; height:100%; padding:12px 14px; border:1.5px solid var(--n3); border-radius:var(--r-sm); transition:border-color var(--trans), background var(--trans); }
.opciones-seg span b{ display:block; font-size:13.5px; }
.opciones-seg span small{ font-size:12px; color:var(--n5); }
.opciones-seg input:checked + span{ border-color:var(--turquesa); background:color-mix(in srgb, var(--turquesa) 8%, var(--n0)); }
.opciones-seg input:focus-visible + span{ box-shadow:var(--anillo); }
.opciones-seg.compacto span{ padding:9px 12px; text-align:center; }
.chips-tipos{ display:flex; flex-wrap:wrap; gap:8px; }
.chips-tipos input{ position:absolute; opacity:0; }
.chips-tipos span{ display:inline-block; padding:7px 14px; border-radius:100px; border:1.5px solid var(--n3); font-size:13px; font-weight:600; cursor:pointer; }
.chips-tipos input:checked + span{ background:var(--turquesa); border-color:var(--turquesa); color:#fff; }
.form-4{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
@media(max-width:1100px){ .promo-editor{ grid-template-columns:1fr; } .promo-vista{ position:static; } }
@media(max-width:760px){ .form-4{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .opciones-seg{ grid-template-columns:1fr; } }
[data-modo="oscuro"] .pv-franja{ background:linear-gradient(120deg, #22331A, var(--n0)); border-color:#3B5220; }

/* ===== Guia de cobros ===== */
.guia{ display:grid; gap:16px; max-width:1200px; }
.guia-estado-lista{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.ge{ display:flex; gap:12px; padding:12px 14px; border-radius:var(--r-sm); background:var(--n1); }
.ge b{ display:block; font-size:13.5px; }
.ge span{ font-size:12.5px; color:var(--n5); }
.ge-ic{ width:28px; height:28px; flex:none; border-radius:50%; display:grid; place-items:center; color:#fff; }
.ge-ic svg{ width:16px; height:16px; }
.ge.si .ge-ic{ background:#5d7a00; }
.ge.no .ge-ic{ background:#C27A00; }
.guia-tabs{ display:inline-flex; gap:4px; padding:4px; border-radius:100px; background:var(--n0); border:1px solid var(--n3); justify-self:start; }
.guia-tabs button{ border:0; background:none; font:inherit; font-weight:700; font-size:13.5px; padding:9px 20px; border-radius:100px; color:var(--n5); cursor:pointer; }
.guia-tabs button[aria-selected="true"]{ background:var(--negro); color:var(--n0); }
.guia-flujo{ display:grid; gap:16px; }
.guia-flujo[hidden]{ display:none; }
.carriles{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; position:relative; }
.carril{ border-radius:var(--r); padding:16px; border:1px solid var(--n3); background:var(--n0); box-shadow:var(--sombra-1); position:relative; }
.carril:not(:last-child)::after{ content:"→"; position:absolute; right:-14px; top:50%; transform:translate(50%, -50%); width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--n0); border:1px solid var(--n3); font-weight:800; color:var(--turquesa); z-index:2; }
.carril h4{ display:flex; align-items:center; gap:10px; margin:0 0 10px; font-size:14.5px; }
.carril h4 span{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:13px; color:#fff; }
.carril.huesped h4 span{ background:#3366B8; }
.carril.sistema h4 span{ background:var(--turquesa); }
.carril.caja h4 span{ background:#C0582B; }
.carril ol{ margin:0; padding-left:18px; display:grid; gap:8px; font-size:13px; color:var(--n5); }
.carril ol b{ color:var(--negro); }
.guia-modos{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.modo{ padding:14px 16px; border-radius:var(--r); border:1.5px solid var(--n3); background:var(--n0); }
.modo.actual{ border-color:var(--turquesa); box-shadow:0 0 0 3px color-mix(in srgb, var(--turquesa) 15%, transparent); }
.modo b{ font-size:14px; margin-right:8px; }
.modo p{ margin:8px 0 0; font-size:13px; color:var(--n5); }
.guia-casos{ background:var(--n0); border:1px solid var(--n3); border-radius:var(--r); padding:14px 16px; }
.guia-casos h4{ margin:0 0 8px; font-size:14px; }
.guia-casos details{ border-top:1px solid var(--n2); padding:10px 0; }
.guia-casos summary{ cursor:pointer; font-weight:600; font-size:13.5px; }
.guia-casos p{ margin:8px 0 0; font-size:13px; color:var(--n5); }
@media(max-width:900px){ .guia-estado-lista, .carriles, .guia-modos{ grid-template-columns:1fr; } .carril:not(:last-child)::after{ right:50%; top:auto; bottom:-14px; transform:translate(50%, 50%) rotate(90deg); } }

.opciones-seg label, .opciones-seg span{ text-transform:none; letter-spacing:0; }


/* Nueva reserva: total en vivo con los pedidos */
.total-reserva{ margin:4px 0 14px; padding:14px 16px; border-radius:var(--r-sm); background:var(--n1); border:1px solid var(--n3); display:grid; gap:6px; font-size:13px; }
.tr-filas{ display:grid; gap:4px; color:var(--n5); }
.tr-filas div, .tr-total, .tr-sub{ display:flex; justify-content:space-between; gap:10px; }
.tr-total{ padding-top:8px; border-top:1px solid var(--n3); font-size:15px; font-weight:800; }
.tr-total b{ font-size:18px; }
.tr-sub{ color:var(--n5); font-size:12.5px; }
.tr-sub b{ color:var(--negro); }

.interruptor.apagado{ opacity:.5; cursor:not-allowed; }


/* Nueva reserva: servicios con cantidad */
.extra-op.con-cant{ display:grid; gap:6px; }
.extra-op > label{ display:flex; gap:10px; align-items:flex-start; cursor:pointer; }
.extra-cant{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--n5); padding-left:26px; }
.extra-cant input{ width:58px; border:1px solid var(--n3); border-radius:8px; padding:5px 8px; font:inherit; font-weight:700; background:var(--n0); color:var(--negro); }
.extra-cant input{ position:static; opacity:1; }
.extra-op.con-cant > label span{ display:grid; }

/* Servicios y tarifas */
.tabla-tarifas input[type=number]{ width:100%; max-width:130px; border:1px solid var(--n3); border-radius:var(--r-sm); padding:7px 10px; font:inherit; font-weight:700; background:var(--n0); color:var(--negro); }
.tabla-tarifas td{ vertical-align:middle; }