/* =============================================================================
   Accesos apartamentos — sistema de diseño
   -----------------------------------------------------------------------------
   Coral de marca (#ff5a5f) usado como ACENTO, no como fondo: manda el blanco y
   una escala de grises templada. El color se reserva para lo accionable y para
   los estados, que es lo que hay que ver de un vistazo.

   Dos disposiciones de verdad, no una estirada:
     · móvil  → app a pantalla completa con barra de pestañas abajo
     · ≥960px → barra lateral fija + cabecera de página + contenido ancho

   Índice
     1. Tokens (claro y oscuro)      6. Formularios
     2. Base y tipografía            7. Tablas y listas
     3. Disposición                  8. Avisos, vacíos y actividad
     4. Navegación                   9. Diálogos, toasts y cargas
     5. Tarjetas, botones, badges   10. Portal del huésped
   ============================================================================ */

/* ============================================================ 1. TOKENS ==== */
:root{
  /* Marca */
  --coral:#ff5a5f;
  --coral-fuerte:#f0353b;
  --coral-hondo:#c22026;
  --coral-tenue:#fff1f1;

  /* Superficies y texto */
  --fondo:#f4f5f7;
  --superficie:#ffffff;
  --superficie-2:#fafbfc;
  --superficie-3:#f0f2f5;
  --tinta:#16181d;
  --tinta-2:#464d5c;
  /* Justo por encima del 4.5:1 también sobre --superficie-3, que es donde el texto
     secundario se quedaba corto (avisos, pistas de formulario, pies de tarjeta) */
  --tinta-3:#646b79;
  --linea:#e3e6ec;
  --linea-fuerte:#cfd4dd;

  /* Estados */
  --ok:#0f7c4a;        --ok-fondo:#e6f6ed;
  --warn:#9a5b06;      --warn-fondo:#fdf3e2;
  --bad:#c62828;       --bad-fondo:#fdecec;
  --blue:#1d4ed8;      --blue-fondo:#e8effd;

  /* Forma */
  --r-xs:6px; --r-sm:9px; --r:13px; --r-lg:18px; --r-full:999px;

  /* Profundidad: sombras muy suaves, casi solo para despegar del fondo */
  --s-1:0 1px 2px rgba(16,18,24,.05), 0 0 0 1px rgba(16,18,24,.04);
  --s-2:0 4px 12px rgba(16,18,24,.07), 0 0 0 1px rgba(16,18,24,.04);
  --s-3:0 16px 40px rgba(16,18,24,.14), 0 0 0 1px rgba(16,18,24,.06);

  /* Ritmo */
  --e:cubic-bezier(.2,.7,.3,1);
  --anchura-lateral:260px;
}

@media (prefers-color-scheme: dark){
  :root{
    --coral:#ff6b70;
    --coral-fuerte:#ff8085;
    --coral-hondo:#ffa5a8;
    --coral-tenue:#2b1a1c;

    --fondo:#101116;
    --superficie:#181A21;
    --superficie-2:#1E212A;
    --superficie-3:#242833;
    --tinta:#eceef3;
    --tinta-2:#b0b8c6;
    --tinta-3:#8b93a2;
    --linea:#282c37;
    --linea-fuerte:#3a4050;

    --ok:#4ade80;        --ok-fondo:#12261b;
    --warn:#fbbf24;      --warn-fondo:#2a2110;
    --bad:#f87171;       --bad-fondo:#2c1618;
    --blue:#7ea8ff;      --blue-fondo:#151d2f;

    --s-1:0 1px 2px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.05);
    --s-2:0 6px 16px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.05);
    --s-3:0 20px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08);
  }
}

/* =========================================== 2. BASE Y TIPOGRAFÍA ========= */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",sans-serif;
  background:var(--fondo);
  color:var(--tinta);
  font-size:14px;
  line-height:1.5;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{line-height:1.25;letter-spacing:-.012em;font-weight:650}
h1{font-size:22px} h2{font-size:17px} h3{font-size:15px} h4{font-size:13.5px}
a{color:inherit}
b,strong{font-weight:650}
:where(button,input,select,textarea){font:inherit;color:inherit}

/* Números siempre alineados: importes, códigos, contadores */
.num,.stat b,.codigo b,.tabla td.num,.importe{font-variant-numeric:tabular-nums}

.muted{color:var(--tinta-3);font-size:12.5px;line-height:1.55}
.muted-2{color:var(--tinta-2);font-size:13px;line-height:1.55}
.mini{font-size:11.5px}
.centrado{text-align:center}
.nowrap{white-space:nowrap}
.romper{word-break:break-all}
.crece{flex:1;min-width:0}

/* Iconos: heredan color y se alinean con la línea de texto */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:18px;height:18px;flex:0 0 auto;vertical-align:-3.5px}
.ic-sm{width:15px;height:15px;vertical-align:-2.5px}
.ic-lg{width:22px;height:22px;vertical-align:-5px}
.ic-xl{width:30px;height:30px;vertical-align:0}

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2.5px solid var(--coral);
  outline-offset:2px;
  border-radius:var(--r-xs);
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ================================================== 3. DISPOSICIÓN ======== */
.marco{display:flex;flex-direction:column;min-height:100vh}
.lateral{display:none}

.cabecera{
  position:sticky;top:0;z-index:30;
  background:color-mix(in srgb, var(--superficie) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--linea);
  padding:11px 16px;
  display:flex;align-items:center;gap:12px;
}
.cabecera .titulo{font-size:16.5px;font-weight:680;letter-spacing:-.015em;line-height:1.2}
.cabecera .sub{font-size:11.5px;color:var(--tinta-3);margin-top:1px}
.cabecera .acciones{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0}
.volver{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;margin-left:-6px;border-radius:var(--r-sm);
  color:var(--tinta-2);flex-shrink:0;text-decoration:none;
  transition:background .15s var(--e), color .15s var(--e);
}
.volver:hover{background:var(--superficie-3);color:var(--tinta)}

.principal{
  flex:1;padding:14px 14px calc(76px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:12px;
}

.seccion{
  font-size:11px;font-weight:700;color:var(--tinta-3);
  text-transform:uppercase;letter-spacing:.07em;
  margin:8px 2px -4px;display:flex;align-items:center;gap:9px;
}
.seccion::after{content:"";flex:1;height:1px;background:var(--linea)}

.fila{display:flex;justify-content:space-between;align-items:center;gap:10px}
.fila-arriba{align-items:flex-start}
.pila{display:flex;flex-direction:column;gap:12px;min-width:0}
.duo{display:flex;flex-direction:column;gap:12px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rejilla{display:grid;grid-template-columns:1fr;gap:12px}

/* ==================================================== 4. NAVEGACIÓN ======= */
.pestanas{
  position:fixed;bottom:0;left:0;right:0;z-index:40;
  display:flex;
  background:color-mix(in srgb, var(--superficie) 92%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--linea);
  padding-bottom:env(safe-area-inset-bottom);
}
.pestanas a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:9px 0 8px;font-size:10.5px;font-weight:560;
  color:var(--tinta-3);text-decoration:none;position:relative;
  transition:color .15s var(--e);
}
.pestanas a .ic{width:21px;height:21px;vertical-align:0}
.pestanas a.on{color:var(--coral)}
.pestanas a.on::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:2.5px;border-radius:0 0 3px 3px;background:var(--coral);
}

/* ========================= 5. TARJETAS, BOTONES, BADGES =================== */
.tarjeta{
  background:var(--superficie);
  border-radius:var(--r);
  padding:14px;
  box-shadow:var(--s-1);
}
.tarjeta.plana{box-shadow:none;border:1px solid var(--linea)}
.tarjeta.suave{background:var(--superficie-3);box-shadow:none}
.tarjeta.ajustada{padding:11px 13px}
.tarjeta.holgada{padding:18px}
a.tarjeta{display:block;text-decoration:none;color:inherit;
          transition:box-shadow .16s var(--e), transform .16s var(--e)}
a.tarjeta:hover{box-shadow:var(--s-2);transform:translateY(-1px)}
a.tarjeta:active{transform:translateY(0)}

.tarjeta.acento{border-left:3px solid var(--coral)}
.tarjeta.aviso{border-left:3px solid var(--warn)}
.tarjeta.peligro{border-left:3px solid var(--bad)}

.form-tarjeta{display:flex;flex-direction:column;gap:11px}

/* Titular de tarjeta: el patrón «icono + texto» que se repite por todo el panel */
.tit{font-size:13.5px;font-weight:650;display:flex;align-items:center;gap:8px;min-width:0}
.tit>.ic{color:var(--tinta-3)}

/* Espaciado suelto, para no repetir el mismo margin-top en cada plantilla */
.mt-xs{margin-top:4px} .mt-sm{margin-top:8px} .mt-md{margin-top:12px}
.auto{align-self:flex-start}
.ancho-auto{width:auto}

/* Botones ------------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 16px;border:1px solid transparent;border-radius:var(--r-sm);
  background:var(--coral);color:#fff;
  font-size:13.5px;font-weight:620;letter-spacing:-.006em;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .15s var(--e), box-shadow .15s var(--e),
             transform .1s var(--e), opacity .15s var(--e);
}
.btn:hover{background:var(--coral-fuerte)}
.btn:active{transform:scale(.985)}
.btn.bloque{width:100%}
.btn.sm{padding:8px 12px;font-size:12.5px;border-radius:var(--r-xs);gap:6px}
.btn.lg{padding:13px 20px;font-size:15px}

.btn.sec{background:var(--superficie);color:var(--tinta);
         border-color:var(--linea-fuerte);box-shadow:var(--s-1)}
.btn.sec:hover{background:var(--superficie-3)}

.btn.fantasma{background:transparent;color:var(--tinta-2);border-color:transparent}
.btn.fantasma:hover{background:var(--superficie-3);color:var(--tinta)}

.btn.mal{background:transparent;color:var(--bad);
         border-color:color-mix(in srgb, var(--bad) 40%, transparent)}
.btn.mal:hover{background:var(--bad-fondo)}

.btn:disabled,.btn.des{
  background:var(--superficie-3);color:var(--tinta-3);border-color:transparent;
  cursor:not-allowed;box-shadow:none;
}
.btn:disabled:hover,.btn.des:hover{background:var(--superficie-3);transform:none}

.btn-icono{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:var(--r-sm);border:none;background:transparent;
  color:var(--tinta-2);cursor:pointer;
  transition:background .15s var(--e), color .15s var(--e);
}
.btn-icono:hover{background:var(--superficie-3);color:var(--tinta)}

.botonera{display:flex;gap:8px;flex-wrap:wrap}
.botonera>*{flex:1;min-width:max-content}
.botonera .btn{width:100%}

/* Badges ------------------------------------------------------------------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:640;
  padding:3.5px 9px;border-radius:var(--r-full);white-space:nowrap;
  background:var(--superficie-3);color:var(--tinta-2);
}
.badge .ic{width:13px;height:13px;vertical-align:0}
.badge.ok{background:var(--ok-fondo);color:var(--ok)}
.badge.blue{background:var(--blue-fondo);color:var(--blue)}
.badge.warn{background:var(--warn-fondo);color:var(--warn)}
.badge.bad{background:var(--bad-fondo);color:var(--bad)}
.badge.grey{background:var(--superficie-3);color:var(--tinta-3)}
.badge.accent{background:var(--coral);color:#fff}
.badge.contorno{background:transparent;border:1px solid var(--linea-fuerte);color:var(--tinta-2)}
a.badge{text-decoration:none;transition:background .15s var(--e)}

.punto{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}

/* Tonos sueltos, para teñir un icono según el estado que venga del servidor */
.t-ok{color:var(--ok)} .t-bad{color:var(--bad)} .t-warn{color:var(--warn)}
.t-blue{color:var(--blue)} .t-accent{color:var(--coral)} .t-grey{color:var(--tinta-3)}

/* Estadísticas ------------------------------------------------------------- */
.estadisticas{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{
  background:var(--superficie);border-radius:var(--r);padding:14px 12px;
  box-shadow:var(--s-1);display:flex;flex-direction:column;gap:2px;
}
.stat b{font-size:26px;font-weight:680;letter-spacing:-.03em;line-height:1.1;color:var(--tinta)}
.stat .et{font-size:11.5px;color:var(--tinta-3);font-weight:530}
.stat .ic{color:var(--coral);margin-bottom:5px}

/* Control segmentado (filtros) --------------------------------------------- */
.segmentado{
  display:inline-flex;gap:2px;padding:3px;background:var(--superficie-3);
  border-radius:var(--r-sm);overflow-x:auto;max-width:100%;scrollbar-width:none;
}
.segmentado::-webkit-scrollbar{display:none}
.segmentado a{
  padding:6px 13px;border-radius:var(--r-xs);font-size:12.5px;font-weight:590;
  color:var(--tinta-2);text-decoration:none;white-space:nowrap;
  transition:background .15s var(--e), color .15s var(--e);
}
.segmentado a:hover{color:var(--tinta)}
.segmentado a.on{background:var(--superficie);color:var(--tinta);box-shadow:var(--s-1)}

/* ================================================== 6. FORMULARIOS ======== */
.campo{display:flex;flex-direction:column;gap:5px;min-width:0}
.campo>label,label.et{font-size:12px;font-weight:580;color:var(--tinta-2)}
.campo .pista{font-size:11.5px;color:var(--tinta-3);line-height:1.5}

.f{
  width:100%;
  border:1px solid var(--linea-fuerte);border-radius:var(--r-sm);
  padding:10px 12px;font-size:14px;
  background:var(--superficie);color:var(--tinta);
  transition:border-color .15s var(--e), box-shadow .15s var(--e);
}
.f::placeholder{color:var(--tinta-3)}
.f:hover:not(:focus){border-color:var(--tinta-3)}
.f:focus{
  outline:none;border-color:var(--coral);
  box-shadow:0 0 0 3.5px color-mix(in srgb, var(--coral) 18%, transparent);
}
textarea.f{min-height:150px;line-height:1.6;resize:vertical;font-family:inherit}
select.f{
  appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2379808f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:16px;
}
.f.derecha{text-align:right}
.f.corto{max-width:120px}

/* Buscador con lupa dentro */
.buscador{position:relative;flex:1;min-width:0}
.buscador>.ic{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  color:var(--tinta-3);pointer-events:none;
}
.buscador .f{padding-left:36px}

/* Grupo importe con símbolo */
.con-simbolo{display:flex;align-items:center;gap:6px}
.con-simbolo .simbolo{font-size:14px;color:var(--tinta-3);font-weight:560}

/* Interruptor: sustituye a los checkbox de configuración */
.interruptor{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  cursor:pointer;padding:2px 0;position:relative;
}
.interruptor .txt{min-width:0}
.interruptor .txt b{font-size:13.5px;display:block}
.interruptor .txt span{font-size:11.5px;color:var(--tinta-3);line-height:1.5;display:block;margin-top:2px}
.interruptor input{position:absolute;opacity:0;width:0;height:0}
.palanca{
  position:relative;flex:0 0 auto;width:42px;height:25px;border-radius:var(--r-full);
  background:var(--linea-fuerte);margin-top:2px;transition:background .2s var(--e);
}
.palanca::after{
  content:"";position:absolute;top:2.5px;left:2.5px;width:20px;height:20px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:transform .2s var(--e);
}
.interruptor input:checked + .palanca{background:var(--coral)}
.interruptor input:checked + .palanca::after{transform:translateX(17px)}
.interruptor input:focus-visible + .palanca{outline:2.5px solid var(--coral);outline-offset:2px}

/* Casilla de consentimiento (portal) */
.casilla{display:flex;gap:11px;align-items:flex-start;cursor:pointer}
.casilla input{width:20px;height:20px;flex:0 0 auto;margin-top:1px;
               accent-color:var(--coral);cursor:pointer}

/* ============================================ 7. TABLAS Y LISTAS ========== */
.tabla-caja{background:var(--superficie);border-radius:var(--r);
            box-shadow:var(--s-1);overflow:hidden}
.tabla{width:100%;border-collapse:collapse;font-size:13.5px}
.tabla th{
  text-align:left;font-size:11px;font-weight:660;color:var(--tinta-3);
  text-transform:uppercase;letter-spacing:.06em;
  padding:11px 16px;background:var(--superficie-2);border-bottom:1px solid var(--linea);
  white-space:nowrap;
}
.tabla td{padding:12px 16px;border-bottom:1px solid var(--linea);vertical-align:middle}
.tabla tr:last-child td{border-bottom:none}
.tabla tbody tr{transition:background .12s var(--e)}
.tabla tbody tr:hover{background:var(--superficie-2)}
.tabla a{text-decoration:none;color:inherit}
.tabla td.num{text-align:right}
.tabla td.encoge{width:1%;white-space:nowrap}
.tabla .principal-celda{font-weight:620;font-size:14px}

/*
  Tabla responsiva: el MISMO marcado se presenta como tabla en escritorio y como
  lista de tarjetas en móvil, sin duplicar los bucles de Thymeleaf. Cada celda
  lleva data-et con su etiqueta, que en móvil pasa a leerse delante del dato.
*/
@media (max-width:959.98px){
  .tabla-caja:has(.responsiva){background:none;box-shadow:none;border-radius:0;overflow:visible}
  .responsiva,.responsiva tbody,.responsiva tr,.responsiva td{display:block;width:auto}
  .responsiva thead{display:none}
  .responsiva tr{
    background:var(--superficie);border-radius:var(--r);box-shadow:var(--s-1);
    padding:13px;margin-bottom:10px;
  }
  .responsiva tr:last-child{margin-bottom:0}
  .responsiva tr:hover{background:var(--superficie)}
  .responsiva td{border:none;padding:0}
  .responsiva td+td{margin-top:5px}
  .responsiva td.encoge{width:auto}
  .responsiva td.num{text-align:left}
  /* La celda principal manda: título de la tarjeta */
  .responsiva td.principal-celda{font-size:14.5px;font-weight:640}
  /* Celdas secundarias con su etiqueta delante */
  .responsiva td[data-et]::before{
    content:attr(data-et) " · ";
    color:var(--tinta-3);font-size:11.5px;font-weight:560;
  }
  .responsiva td[data-et]{font-size:12.5px;color:var(--tinta-2)}
  /* Fila superior de la tarjeta: título a la izquierda, estado a la derecha */
  .responsiva td.cabeza{display:flex;justify-content:space-between;align-items:center;gap:10px}
  .responsiva td.acciones-celda{margin-top:11px}
}

/* Lista de navegación (ajustes) */
.lista-nav{display:flex;flex-direction:column;background:var(--superficie);
           border-radius:var(--r);box-shadow:var(--s-1);overflow:hidden}
.lista-nav a{
  display:flex;align-items:center;gap:12px;padding:14px 15px;
  text-decoration:none;color:inherit;border-bottom:1px solid var(--linea);
  transition:background .12s var(--e);
}
.lista-nav a:last-child{border-bottom:none}
.lista-nav a:hover{background:var(--superficie-2)}
.lista-nav>a>.ic:first-child{color:var(--tinta-3)}
.lista-nav .txt{flex:1;min-width:0}
.lista-nav .txt b{font-size:13.5px;display:block}
.lista-nav .txt span{font-size:11.5px;color:var(--tinta-3);display:block;margin-top:1px}
.lista-nav .flecha{color:var(--tinta-3);flex:0 0 auto}

/* ================================ 8. AVISOS, VACÍOS Y ACTIVIDAD ========== */
.alerta{
  display:flex;gap:11px;align-items:flex-start;
  padding:12px 14px;border-radius:var(--r-sm);font-size:13px;line-height:1.5;
}
.alerta>.ic{flex:0 0 auto;margin-top:1px}
.alerta.ok{background:var(--ok-fondo);color:var(--ok)}
.alerta.error,.alerta.bad{background:var(--bad-fondo);color:var(--bad)}
.alerta.warn{background:var(--warn-fondo);color:var(--warn)}
.alerta.info{background:var(--blue-fondo);color:var(--blue)}
.alerta b{font-weight:660}

.vacio{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:38px 20px;text-align:center;
  background:var(--superficie);border-radius:var(--r);box-shadow:var(--s-1);
}
.vacio>.ic{color:var(--tinta-3);opacity:.45}
.vacio b{font-size:14px;font-weight:620}
.vacio span{font-size:12.5px;color:var(--tinta-3);max-width:34ch;line-height:1.55}

.actividad{display:flex;flex-direction:column}
.actividad .ev{
  display:flex;gap:11px;align-items:flex-start;
  padding:10px 0;border-bottom:1px solid var(--linea);font-size:12.5px;line-height:1.5;
}
.actividad .ev:last-child{border-bottom:none;padding-bottom:0}
.actividad .ev:first-child{padding-top:0}
.actividad .ev>.ic{margin-top:1px;flex:0 0 auto}
.actividad .ic.ok{color:var(--ok)} .actividad .ic.bad{color:var(--bad)}
.actividad .ic.blue{color:var(--blue)} .actividad .ic.accent{color:var(--coral)}
.actividad .ic.grey{color:var(--tinta-3)}
.actividad .cuando{color:var(--tinta-3);font-size:11px;flex:0 0 auto;
                   white-space:nowrap;margin-top:1px}

/* Caja del código de acceso */
.codigo{
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--coral) 9%, var(--superficie)),
    var(--superficie) 70%);
  border:1px solid color-mix(in srgb, var(--coral) 28%, transparent);
  border-radius:var(--r-lg);padding:18px 16px;text-align:center;
}
.codigo .et{font-size:11.5px;font-weight:620;color:var(--coral-hondo);
            text-transform:uppercase;letter-spacing:.07em}
.codigo b{
  display:block;margin:9px 0 11px;
  font-size:38px;font-weight:700;letter-spacing:.16em;line-height:1;
  color:var(--tinta);user-select:all;-webkit-user-select:all;
}
.codigo.bloqueado{background:var(--superficie-3);border-color:var(--linea)}
.codigo.bloqueado .et{color:var(--tinta-3)}
.codigo.bloqueado b{color:var(--tinta-3);letter-spacing:.1em}

/* Enlace copiable */
.copiable{display:flex;align-items:center;gap:9px;
          background:var(--superficie-3);border-radius:var(--r-sm);padding:9px 11px}
.copiable code{
  flex:1;min-width:0;font-size:11.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--tinta-2);word-break:break-all;line-height:1.45;
}

/* ==================================== 9. DIÁLOGOS, TOASTS Y CARGAS ======== */
.spinner{
  display:inline-block;width:15px;height:15px;flex:0 0 auto;
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
  opacity:.9;animation:girar .65s linear infinite;vertical-align:-2.5px;
}
.spinner.grande{width:30px;height:30px;border-width:2.5px;vertical-align:0}
@keyframes girar{to{transform:rotate(360deg)}}

/* Barra de progreso superior mientras se envía algo */
.progreso{
  position:fixed;top:0;left:0;height:2.5px;width:0;z-index:100;
  background:var(--coral);box-shadow:0 0 10px var(--coral);
  transition:width .25s var(--e), opacity .3s var(--e);
}

dialog{
  border:none;padding:0;background:transparent;color:inherit;
  max-width:min(420px, calc(100vw - 32px));width:100%;
  /* El reset de arriba pone margin:0 a todo y eso descentra los dialog nativos,
     que se colocan solos con margin:auto. Aquí se les devuelve. */
  margin:auto;
}
dialog::backdrop{
  background:rgba(10,11,15,.5);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
dialog[open]{animation:entrar .22s var(--e)}
dialog[open]::backdrop{animation:aparecer .22s var(--e)}
@keyframes entrar{from{opacity:0;transform:translateY(14px) scale(.97)}}
@keyframes aparecer{from{opacity:0}}

.dlg{
  background:var(--superficie);border-radius:var(--r-lg);box-shadow:var(--s-3);
  padding:22px;display:flex;flex-direction:column;gap:14px;text-align:left;
}
.dlg .icono-dlg{
  width:44px;height:44px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  background:var(--coral-tenue);color:var(--coral-fuerte);
}
.dlg .icono-dlg.peligro{background:var(--bad-fondo);color:var(--bad)}
.dlg h3{font-size:16.5px;font-weight:670}
.dlg p{font-size:13.5px;color:var(--tinta-2);line-height:1.55}
.dlg .pie-dlg{display:flex;gap:9px;margin-top:2px}
.dlg .pie-dlg .btn{flex:1}
.dlg.espera{align-items:center;text-align:center;padding:32px 26px}
.dlg.espera .spinner{color:var(--coral)}

/* Toasts */
.toasts{
  position:fixed;z-index:90;display:flex;flex-direction:column;gap:9px;
  left:12px;right:12px;top:calc(10px + env(safe-area-inset-top));
  pointer-events:none;
}
.toast{
  display:flex;align-items:flex-start;gap:11px;pointer-events:auto;
  background:var(--superficie);border-radius:var(--r);box-shadow:var(--s-3);
  padding:13px 14px;font-size:13.5px;line-height:1.45;font-weight:540;
  animation:toast-entra .3s var(--e);
  border-left:3px solid var(--tinta-3);
}
.toast.ok{border-left-color:var(--ok)} .toast.ok>.ic{color:var(--ok)}
.toast.error{border-left-color:var(--bad)} .toast.error>.ic{color:var(--bad)}
.toast>.ic{flex:0 0 auto;margin-top:1px}
.toast .cerrar{
  margin-left:auto;flex:0 0 auto;background:none;border:none;cursor:pointer;
  color:var(--tinta-3);padding:1px;border-radius:var(--r-xs);
}
.toast .cerrar:hover{color:var(--tinta)}
.toast.saliendo{animation:toast-sale .25s var(--e) forwards}
@keyframes toast-entra{from{opacity:0;transform:translateY(-14px)}}
@keyframes toast-sale{to{opacity:0;transform:translateY(-10px)}}

/* ============================================= 10. PORTAL DEL HUÉSPED ===== */
.portal .principal{padding-bottom:28px;max-width:520px;margin:0 auto;width:100%}
.portal .cabecera{justify-content:space-between}
.portal .marca{display:flex;align-items:center;gap:9px;font-weight:670;font-size:15.5px}
.portal .marca>.ic{color:var(--coral)}

.idiomas{display:inline-flex;gap:2px;padding:3px;background:var(--superficie-3);
         border-radius:var(--r-full)}
.idiomas a{
  padding:4px 11px;border-radius:var(--r-full);font-size:11.5px;font-weight:620;
  color:var(--tinta-3);text-decoration:none;transition:all .15s var(--e);
}
.idiomas a.on{background:var(--superficie);color:var(--tinta);box-shadow:var(--s-1)}

.estancia{display:flex;background:var(--superficie);border-radius:var(--r);
          box-shadow:var(--s-1);overflow:hidden}
.estancia>div{flex:1;padding:14px 12px;text-align:center;min-width:0}
.estancia>div+div{border-left:1px solid var(--linea)}
.estancia .et{font-size:11px;color:var(--tinta-3);font-weight:600;
              text-transform:uppercase;letter-spacing:.06em;
              display:flex;align-items:center;justify-content:center;gap:5px}
.estancia .dia{font-size:15px;font-weight:660;margin:5px 0 2px;display:block}

.pantalla-mensaje{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:15px;padding:44px 24px;min-height:62vh;
}
.pantalla-mensaje .emblema{
  width:70px;height:70px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--superficie-3);color:var(--tinta-3);
}
.pantalla-mensaje .emblema.acento{background:var(--coral-tenue);color:var(--coral-fuerte)}
.pantalla-mensaje h2{font-size:19px}
.pantalla-mensaje p{font-size:13.5px;color:var(--tinta-2);line-height:1.6;max-width:38ch}

.pie{
  font-size:11.5px;color:var(--tinta-3);text-align:center;line-height:1.7;
  margin-top:auto;padding-top:22px;
}

/* Acceso al panel */
.acceso{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.acceso-caja{width:100%;max-width:390px;display:flex;flex-direction:column;gap:15px}
.acceso-logo{
  width:54px;height:54px;border-radius:var(--r);margin:0 auto 12px;
  background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px color-mix(in srgb, var(--coral) 35%, transparent);
}

/* =============================================================================
   ESCRITORIO (≥960px) — no es el móvil ensanchado: cambia la disposición.
   La barra lateral sustituye a las pestañas, la cabecera pasa a ser cabecera de
   página con sus acciones, y las listas de tarjetas se convierten en tablas.
   ============================================================================ */
@media (min-width:960px){
  .pestanas{display:none}

  .marco{margin-left:var(--anchura-lateral)}
  .principal{padding:22px 32px 44px;gap:16px;max-width:1180px;width:100%;margin:0 auto}

  /* --- Barra lateral fija --- */
  .lateral{
    display:flex;flex-direction:column;gap:5px;
    position:fixed;left:0;top:0;bottom:0;width:var(--anchura-lateral);z-index:50;
    background:var(--superficie);border-right:1px solid var(--linea);
    padding:20px 14px 16px;
  }
  .lateral .logo{
    display:flex;align-items:center;gap:11px;padding:2px 8px 20px;
    text-decoration:none;color:inherit;
  }
  .lateral .logo .marca-ic{
    width:36px;height:36px;border-radius:var(--r-sm);flex:0 0 auto;
    background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 12px color-mix(in srgb, var(--coral) 32%, transparent);
  }
  .lateral .logo b{font-size:14.5px;font-weight:670;letter-spacing:-.015em;
                   display:block;line-height:1.25}
  .lateral .logo span{font-size:11px;color:var(--tinta-3);display:block}

  .lateral nav{display:flex;flex-direction:column;gap:2px}
  .lateral nav a{
    display:flex;align-items:center;gap:11px;
    padding:9.5px 11px;border-radius:var(--r-sm);
    font-size:13.5px;font-weight:560;color:var(--tinta-2);text-decoration:none;
    transition:background .15s var(--e), color .15s var(--e);
  }
  .lateral nav a:hover{background:var(--superficie-3);color:var(--tinta)}
  .lateral nav a.on{background:var(--coral-tenue);color:var(--coral-hondo);font-weight:640}

  .lateral .abajo{margin-top:auto;display:flex;flex-direction:column;gap:2px;
                  padding-top:14px;border-top:1px solid var(--linea)}
  .lateral .abajo a,.lateral .abajo button{
    display:flex;align-items:center;gap:11px;width:100%;
    padding:9px 11px;border-radius:var(--r-sm);border:none;background:none;
    font-size:12.5px;color:var(--tinta-3);text-decoration:none;cursor:pointer;text-align:left;
    transition:background .15s var(--e), color .15s var(--e);
  }
  .lateral .abajo a:hover,.lateral .abajo button:hover{background:var(--superficie-3);color:var(--tinta)}

  /* --- Cabecera de página --- */
  .cabecera{
    position:static;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
    border-bottom:none;padding:30px 32px 2px;max-width:1180px;width:100%;margin:0 auto;
    align-items:flex-end;
  }
  .cabecera .titulo{font-size:26px;font-weight:690;letter-spacing:-.025em}
  .cabecera .sub{font-size:13px;margin-top:3px}
  .volver{margin-left:-8px;margin-bottom:3px}

  /* --- Rejillas --- */
  .duo{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:20px;align-items:start}
  .duo.parejo{grid-template-columns:1fr 1fr}
  .rejilla{grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:14px}
  .estadisticas{gap:14px}
  .stat{padding:17px 16px}
  .stat b{font-size:30px}

  .tarjeta{padding:16px 17px}
  .tarjeta.holgada{padding:22px}

  .filtros{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .filtros .buscador{max-width:340px;flex:0 1 340px}

  .toasts{left:auto;right:22px;top:22px;width:360px}

  /* El portal del huésped no se ensancha: sigue siendo una columna cómoda */
  .portal.marco{margin-left:0}
  .portal .cabecera{max-width:520px;padding:22px 20px 6px}
  .portal .principal{padding:10px 20px 40px}
}

/* Solo móvil / solo escritorio */
@media (max-width:959.98px){
  .solo-escritorio{display:none !important}
}
@media (min-width:960px){
  .solo-movil{display:none !important}
}