/* ═══════════════════════════════════════════════════════════════
   TOKENS DE TEMA · claro por defecto, oscuro con [data-theme=dark]
   Cada color de la hoja pasa por aquí; no hay valores fijos abajo.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --paper:255,255,255;          /* superficies translúcidas, rgba(var(--paper),x) */
  --paper-solid:#ffffff;        /* superficie opaca */
  --rim:rgba(255,255,255,.85);  /* canto de luz dentro de box-shadow */
  --shade:15,23,42;             /* sombras proyectadas */
  --ink:15,23,42;               /* bordes y tintes sutiles, rgba(var(--ink),x) */
  --t-1:#0f172a;--t-2:#334155;--t-3:#475569;--t-4:#64748b;--t-5:#94a3b8;
  --sep:#cbd5e1;
  --av-a:#eef2f7;--av-b:#e2e8f0;
  --aurora-a:#f3f6fb;--aurora-b:#eef2f8;
}
/* ═══════════════════════════════════════════════════════════════
   HotelOS · Tema Liquid Glass
   Basado en LIQUID_GLASS_DESIGN.md. Capa desmontable: quitar el
   <link> en index.html restaura el diseño anterior. Cero JS.
   Regla 1: vidrio solo en capas que flotan (nav, barras, modales,
   toasts, controles segmentados). Contenido y tarjetas: sólidos.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --lg-blur:18px;
  --lg-sat:170%;
  --lg-bg:rgba(var(--paper),.58);          /* frost ≈ .35 */
  --lg-bg-strong:rgba(var(--paper),.80);   /* frost ≈ .6  */
  --lg-bg-soft:rgba(var(--paper),.42);
  --lg-border:rgba(var(--paper),.72);
  --lg-border-deep:rgba(var(--ink),.08);
  --lg-rim:inset 0 1px 0 var(--rim),inset 0 -1px 0 var(--rim),inset 1px 0 0 var(--rim),inset -1px 0 0 var(--rim);
  --lg-shadow:0 8px 32px rgba(var(--shade),.10),0 1px 2px rgba(var(--shade),.05);
  --lg-shadow-lg:0 24px 64px rgba(var(--shade),.16),0 2px 6px rgba(var(--shade),.06);
  --lg-radius:20px;
  --lg-radius-sm:14px;

  /* Tokens base retocados: bordes más suaves, radios más "squircle" */
  --border:rgba(var(--ink),.08);
  --border2:rgba(var(--ink),.14);
  --radius:18px;--radius2:12px;
  --shadow-card:0 1px 2px rgba(var(--shade),.04),0 6px 20px rgba(var(--shade),.05);
  --shadow-md:0 10px 36px rgba(var(--shade),.10);
}

/* ── Material base ──────────────────────────────────────────── */
.lg-glass,
.app-sidebar,.top-bar,.bottom-nav,.modal,.toast,
.segment-control,.floor-toggle,.pay-tab,.sidebar-toggle,
.stats-bar-v2 .sk,.caja-header,.turno-badge,.search-box input,
.cal-toolbar,.cal-range-bar,.geo-ac-panel{
  background:linear-gradient(135deg,rgba(var(--paper),.72) 0%,var(--lg-bg) 60%,rgba(var(--paper),.50) 100%);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  border:1px solid var(--lg-border);
  box-shadow:var(--lg-rim),var(--lg-shadow);
}

/* ── Fondo "aurora": el vidrio necesita algo que refractar ───── */
#app,#login-screen{overflow:hidden;
  background:
    radial-gradient(ellipse 70% 55% at 8% 0%,rgba(14,165,233,.28) 0%,transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 12%,rgba(139,92,246,.20) 0%,transparent 60%),
    radial-gradient(ellipse 70% 60% at 90% 100%,rgba(16,185,129,.20) 0%,transparent 60%),
    radial-gradient(ellipse 50% 40% at 30% 100%,rgba(245,158,11,.16) 0%,transparent 60%),
    linear-gradient(180deg,var(--aurora-a) 0%,var(--aurora-b) 100%);
  background-attachment:fixed;
}
#app::before,#login-screen::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 20% 30%,rgba(56,189,248,.35) 0,transparent 28%),
    radial-gradient(circle at 78% 25%,rgba(167,139,250,.28) 0,transparent 26%),
    radial-gradient(circle at 65% 80%,rgba(52,211,153,.26) 0,transparent 30%),
    radial-gradient(circle at 25% 85%,rgba(251,191,36,.20) 0,transparent 26%);
  filter:blur(40px);
  animation:lgAurora 26s ease-in-out infinite alternate;
}
@keyframes lgAurora{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(3%,-4%,0) scale(1.06)}
  100%{transform:translate3d(-3%,3%,0) scale(1.02)}
}
#app>.app-col{position:relative;z-index:1}
@media(min-width:900px){#app>.app-sidebar{position:relative}}
#login-screen>*{position:relative;z-index:1}

/* ── LOGIN ──────────────────────────────────────────────────── */
.lbox{
  background:linear-gradient(160deg,rgba(var(--paper),.88) 0%,var(--lg-bg-strong) 55%,rgba(var(--paper),.66) 100%);
  -webkit-backdrop-filter:blur(28px) saturate(var(--lg-sat));backdrop-filter:blur(28px) saturate(var(--lg-sat));
  border:1px solid var(--lg-border);border-radius:28px;
  box-shadow:var(--lg-rim),var(--lg-shadow-lg);
}
.lbox-icon{
  background:linear-gradient(145deg,rgba(var(--paper),.95),rgba(224,242,254,.75));
  border:1px solid rgba(var(--paper),.9);border-radius:20px;
  box-shadow:inset 0 1px 0 var(--rim),0 6px 18px rgba(14,165,233,.18);
}
#login-screen .inp,.otp-cell{
  background:rgba(var(--paper),.7);border:1px solid rgba(var(--ink),.10);
  box-shadow:inset 0 1px 0 var(--rim);
}
#login-screen .inp:focus,.otp-cell:focus{background:var(--paper-solid);border-color:var(--accent);box-shadow:0 0 0 4px rgba(14,165,233,.16),inset 0 1px 0 var(--rim)}
.l-social-btn{
  background:rgba(var(--paper),.65);border:1px solid rgba(var(--paper),.85);border-radius:16px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 var(--rim),0 2px 8px rgba(var(--shade),.05);
}
.l-social-btn:hover{background:var(--paper-solid);border-color:rgba(14,165,233,.35)}

/* ── Botón acento (píldora de vidrio tintado) ───────────────── */
#login-screen .btn-primary,.btn-primary,.pay-tab.active,.hotel-badge{
  background:linear-gradient(180deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 45%),linear-gradient(135deg,#22b4ef 0%,#0891b2 100%);
  border:1px solid rgba(var(--paper),.45);
  box-shadow:inset 0 1px 0 var(--rim),inset 0 -1px 0 rgba(var(--shade),.08),0 6px 18px rgba(14,165,233,.32);
}
#login-screen .btn-primary{border-radius:16px}
#login-screen .btn-primary:hover,.btn-primary:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 var(--rim),0 10px 26px rgba(14,165,233,.38)}
.btn{border-radius:var(--lg-radius-sm)}
.btn-danger{
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0) 45%),linear-gradient(135deg,#f87171,#dc2626);
  border:1px solid rgba(var(--paper),.4);box-shadow:inset 0 1px 0 var(--rim),0 6px 16px rgba(220,38,38,.25);
}

/* ── SIDEBAR ─────────────────────────────────────────────────── */
.app-sidebar{
  border:none;border-right:1px solid var(--lg-border);
  box-shadow:var(--lg-rim),12px 0 40px rgba(var(--shade),.06);
}
@media(max-width:899px){
  .app-sidebar{
    top:max(10px,var(--safe-top));bottom:max(10px,var(--safe-bottom));left:10px;
    border-radius:var(--lg-radius);border:1px solid var(--lg-border);
    transform:translateX(calc(-100% - 12px));
    box-shadow:var(--lg-rim),var(--lg-shadow-lg);
  }
  body.sidebar-open .app-sidebar{transform:translateX(0)}
  .sidebar-backdrop{background:rgba(var(--ink),.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
}
.sidebar-brand{border-bottom:1px solid rgba(var(--ink),.06)}
.sidebar-logo-mark{
  border-radius:13px;
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 50%),linear-gradient(135deg,#22b4ef,#06b6d4);
  box-shadow:inset 0 1px 0 var(--rim),0 6px 16px rgba(14,165,233,.3);
}
.sidebar-link{border-radius:14px;color:var(--t-2)}
.sidebar-link:hover{background:rgba(var(--paper),.55);color:var(--accent2)}
.sidebar-link.active{
  background:linear-gradient(180deg,var(--paper-solid),rgba(var(--paper),.85));color:var(--accent2);
  box-shadow:inset 0 1px 0 var(--rim),0 1px 2px rgba(var(--shade),.06),0 6px 16px rgba(var(--shade),.06),0 0 0 1px rgba(14,165,233,.12);
}
.sidebar-foot{border-top:1px solid rgba(var(--ink),.06)}
.sidebar-foot a:hover{background:rgba(var(--paper),.6)}

/* ── TOP BAR ─────────────────────────────────────────────────── */
.top-bar{
  border:none;border-bottom:1px solid var(--lg-border);
  box-shadow:inset 0 1px 0 var(--rim),0 4px 24px rgba(var(--shade),.05);
  position:sticky;top:0;z-index:50;
}
.sidebar-toggle{border-radius:13px;background:rgba(var(--paper),.55)}
.sidebar-toggle:hover{background:var(--paper-solid)}
.hotel-badge{border-radius:999px}
.turno-badge{border-radius:999px;background:rgba(var(--paper),.55)}
.turno-badge.abierto{color:var(--green);border-color:rgba(5,150,105,.35);background:var(--tint-green)}

/* ── BOTTOM NAV (píldora flotante en móvil) ──────────────────── */
@media(max-width:899px){
  .bottom-nav{
    left:12px;right:12px;bottom:max(10px,env(safe-area-inset-bottom,0px));
    border:1px solid var(--lg-border);border-radius:26px;
    padding:6px 6px;padding-bottom:6px;
    box-shadow:var(--lg-rim),0 12px 40px rgba(var(--shade),.16);
  }
  .app-col > .content{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px) + 12px)}
}
.bottom-nav{border-top:none}
.nav-btn{border-radius:20px;transition:background .18s,color .18s,transform .18s}
.nav-btn.active{
  background:linear-gradient(180deg,var(--paper-solid),rgba(var(--paper),.85));color:var(--accent2);
  box-shadow:inset 0 1px 0 var(--rim),0 2px 8px rgba(var(--shade),.08),0 0 0 1px rgba(14,165,233,.12);
}
@media(pointer:coarse){.nav-btn:active{transform:scale(.94)}}

/* ── STATS (KPIs de vidrio ligero) ───────────────────────────── */
.stats-bar-v2 .sk{border-radius:18px;overflow:hidden}
.stats-bar-v2 .sk::before{height:3px;top:0;left:14px;right:14px;border-radius:0 0 3px 3px;opacity:.9}
.stats-bar-v2 .sk:hover{background:linear-gradient(135deg,rgba(var(--paper),.85),rgba(var(--paper),.62));transform:translateY(-2px);box-shadow:var(--lg-rim),var(--lg-shadow-lg)}
.stats-bar-v2 .sk-bar{background:rgba(var(--ink),.06)}
.caja-kpi{background:rgba(var(--paper),.82);border-radius:18px;border-color:var(--lg-border);box-shadow:var(--lg-rim),var(--shadow-card)}
.caja-header{border-radius:var(--lg-radius)}

/* ── CONTROLES SEGMENTADOS / FILTROS ─────────────────────────── */
.segment-control{border-radius:16px;padding:4px}
.segment-btn{border-radius:12px;color:var(--t-3)}
.segment-btn.active{background:var(--paper-solid);box-shadow:inset 0 1px 0 var(--rim),0 1px 3px rgba(var(--shade),.10),0 4px 12px rgba(var(--shade),.06)}
.floor-toggle{border-radius:12px;color:var(--t-3)}
.floor-toggle.active{background:var(--paper-solid);color:var(--accent2);border-color:rgba(14,165,233,.3);box-shadow:inset 0 1px 0 var(--rim),0 4px 12px rgba(14,165,233,.12)}
.pay-tab{border-radius:12px;color:var(--t-3)}
.search-box input{border-radius:16px;box-shadow:var(--lg-rim),0 2px 8px rgba(var(--shade),.04)}
.search-box input:focus{background:var(--paper-solid);border-color:var(--accent);box-shadow:0 0 0 4px rgba(14,165,233,.16)}

/* ── CONTENIDO SÓLIDO (regla 1: el cuerpo no es vidrio) ──────── */
/* Solo la tarjeta de habitación es una tarjeta suelta. Huéspedes, agenda,
   solicitudes y movimientos son filas dentro de una lista y su contenedor
   ya pone fondo, borde y sombra: repetirlos aquí dejaba sombras cuadradas
   asomando por las esquinas del contenedor redondeado. */
.room-card-v2{
  background:rgba(var(--paper),.92);
  border:1px solid rgba(var(--paper),.9);
  border-radius:18px;
  box-shadow:0 1px 0 var(--rim) inset,var(--shadow-card);
}
.guest-card,.desc-sol-card,.mov-item{box-shadow:none}
.room-card-v2::before{width:4px;border-radius:18px 0 0 18px}
.room-card-v2:hover{background:var(--paper-solid);transform:translateY(-3px);box-shadow:0 1px 0 var(--rim) inset,0 14px 36px rgba(var(--shade),.10)}
.room-card-v2.libre{border-color:rgba(5,150,105,.22)}
.room-card-v2.ocupada{border-color:rgba(220,38,38,.22)}
.room-card-v2.limpieza{border-color:rgba(202,138,4,.26)}
.room-card-v2.mantenimiento{border-color:rgba(234,88,12,.22)}
.rc-pill{border-radius:8px;background:rgba(var(--ink),.05)}
.floor-header{color:var(--t-2)}
input,select,textarea{background:rgba(var(--paper),.78);border-color:rgba(var(--ink),.10);box-shadow:inset 0 1px 0 var(--rim)}
input:focus,select:focus,textarea:focus{background:var(--paper-solid);box-shadow:0 0 0 3px rgba(14,165,233,.16)}
.cal-matrix{background:rgba(var(--paper),.9)}

/* ── MODALES (vidrio fuerte, una sola capa) ──────────────────── */
.modal-bg{background:rgba(var(--ink),.30);backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%)}
.modal{
  background:linear-gradient(160deg,rgba(var(--paper),.92) 0%,var(--lg-bg-strong) 55%,rgba(var(--paper),.74) 100%);
  -webkit-backdrop-filter:blur(30px) saturate(var(--lg-sat));backdrop-filter:blur(30px) saturate(var(--lg-sat));
  border:1px solid var(--lg-border);border-radius:26px;
  box-shadow:var(--lg-rim),var(--lg-shadow-lg);
}
@media(min-width:600px){.modal{border-radius:24px}}
.modal-actions .btn{border-radius:14px}
/* dentro del modal el contenido es sólido: sin vidrio sobre vidrio */
.modal .caja-kpi,.modal .segment-control,.modal .pay-tab{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(var(--paper),.75)}
.modal .pay-tab.active{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 45%),linear-gradient(135deg,#22b4ef,#0891b2)}

/* ── TOAST (píldora de vidrio) ───────────────────────────────── */
.toast{border-radius:999px;padding:11px 20px;box-shadow:var(--lg-rim),var(--lg-shadow-lg)}
.toast.ok{border-color:rgba(5,150,105,.35)}
.toast.err{border-color:rgba(220,38,38,.35)}

/* ── CALENDARIO ──────────────────────────────────────────────── */
.cal-toolbar{border-radius:var(--lg-radius);padding:10px 14px;margin-bottom:12px}
.cal-range-bar{border-radius:16px}
.cal-nav-btn,.cal-refresh,.agenda-refresh{background:rgba(var(--paper),.7);border-radius:12px;border:1px solid var(--lg-border);box-shadow:inset 0 1px 0 var(--rim)}
.cal-nav-btn:hover,.cal-refresh:hover{background:var(--paper-solid)}

/* ── ACCESIBILIDAD ───────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  #app::before,#login-screen::before{animation:none}
  .room-card-v2,.stats-bar-v2 .sk,.nav-btn,.btn-primary{transition:none}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
  .lg-glass,.app-sidebar,.top-bar,.bottom-nav,.modal,.toast,.lbox,
  .segment-control,.floor-toggle,.pay-tab,.sidebar-toggle,
  .stats-bar-v2 .sk,.caja-header,.turno-badge,.search-box input,
  .cal-toolbar,.cal-range-bar,.geo-ac-panel,.l-social-btn{
    background:var(--paper-solid);backdrop-filter:none;-webkit-backdrop-filter:none;
    border-color:var(--sep);
  }
  #app::before,#login-screen::before{display:none}
  .room-card-v2,.guest-card,.ag-card{background:var(--paper-solid);border-color:var(--sep)}
}
/* Safari / Firefox sin backdrop-filter: subir opacidad para mantener legibilidad */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .lg-glass,.app-sidebar,.top-bar,.bottom-nav,.modal,.toast,.lbox,
  .segment-control,.stats-bar-v2 .sk,.caja-header,.search-box input,.cal-toolbar{
    background:rgba(var(--paper),.94);
  }
}
.l-divider::before,.l-divider::after{background:linear-gradient(90deg,transparent,rgba(var(--ink),.18),transparent)}

/* ══════════════════════════════════════════════════════════════
   CALENDARIO · rediseño Liquid Glass
   Una sola capa de vidrio (la barra de mes). La grilla es contenido
   sólido; las reservas son "píldoras" con luz de borde.
   ══════════════════════════════════════════════════════════════ */
.cal-view{background:transparent;border:none;box-shadow:none;border-radius:0}
.cal-view-inner{padding:0}

/* barra de mes */
.cal-toolbar{border-radius:999px;padding:8px 10px 8px 8px;margin-bottom:12px}
.cal-toolbar-nav{gap:4px}
.cal-toolbar h2{font-size:1.05rem;padding:0 10px;min-width:170px;text-align:center}
.cal-nav-btn,.cal-refresh{width:36px;height:36px;border-radius:999px;background:rgba(var(--paper),.7);border:1px solid rgba(var(--paper),.9);box-shadow:inset 0 1px 0 var(--rim),0 1px 3px rgba(var(--shade),.06)}
.cal-nav-btn:hover,.cal-refresh:hover{background:var(--paper-solid);transform:translateY(-1px)}
.cal-refresh{color:var(--accent2)}

/* leyenda: chips */
.cal-legend{gap:6px;margin-bottom:12px;padding:0}
.cal-legend-item{gap:6px;font-size:0.6875rem;font-weight:700;color:var(--t-2);background:rgba(var(--paper),.55);border:1px solid rgba(var(--paper),.85);border-radius:999px;padding:4px 10px 4px 6px;box-shadow:inset 0 1px 0 var(--rim)}
.cal-legend-dot{width:12px;height:12px;border-radius:999px;box-shadow:inset 0 1px 0 var(--rim),0 1px 2px rgba(var(--shade),.15)}
.cal-legend-dot.free{background:linear-gradient(135deg,#6ee7b7,#10b981)}
.cal-legend-dot.busy{background:linear-gradient(135deg,#fcd34d,#f59e0b)}
.cal-legend-dot.reserved{background:linear-gradient(135deg,#93c5fd,#3b82f6)}
.cal-legend-dot.closed{background:linear-gradient(135deg,var(--av-b),var(--sep))}

/* barra de selección de rango */
.cal-range-bar{border-radius:999px;padding:8px 8px 8px 16px;background:linear-gradient(135deg,var(--tint-green),rgba(167,243,208,.6));border:1px solid rgba(var(--paper),.9);box-shadow:inset 0 1px 0 var(--rim),0 6px 18px rgba(5,150,105,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.cal-range-bar-cancel{border-radius:999px;padding:7px 14px;background:var(--paper-solid);border:1px solid rgba(5,150,105,.25);box-shadow:0 1px 3px rgba(var(--shade),.08)}

/* contenedor de la grilla: tarjeta sólida */
.cal-scroll{background:var(--paper-solid);border:1px solid rgba(var(--paper),.9);border-radius:20px;box-shadow:inset 0 1px 0 var(--rim),var(--shadow-card)}
.cal-scroll::-webkit-scrollbar{height:8px}
.cal-scroll::-webkit-scrollbar-thumb{background:rgba(var(--ink),.18);border:2px solid var(--paper-solid);border-radius:99px}
.cal-scroll::-webkit-scrollbar-track{background:transparent}

/* grilla */
.cal-matrix{font-size:0.6875rem}
.cal-matrix th,.cal-matrix td{border-right:none;border-bottom:1px solid rgba(var(--ink),.045)}
.cal-matrix thead th{position:sticky;top:0;z-index:4;background:var(--paper-solid)}
.cal-matrix thead .cal-room-h{z-index:7}
.cal-matrix thead tr th{border-bottom:1px solid rgba(var(--ink),.08)}
/* columnas: rejilla punteada sutil en vez de bordes */
.cal-matrix tbody td.cal-cell{background-image:linear-gradient(to bottom,rgba(var(--ink),.06) 40%,transparent 40%);background-size:1px 6px;background-repeat:repeat-y;background-position:right top}
.cal-matrix tbody tr:nth-child(even) td{background-color:transparent}
/* El `background` corto del original (filas pares) reseteaba size/repeat del separador punteado y lo azulejaba como banda: redeclarar los tres */
.cal-matrix tbody tr:nth-child(even) td.cal-cell{background-size:1px 6px;background-repeat:repeat-y;background-position:right top}
.cal-matrix tbody tr:hover td.cal-cell{background-color:rgba(14,165,233,.045)}
.cal-matrix tbody tr:hover .cal-room-h{background:rgba(var(--paper),.6);color:var(--accent2)}

/* columna de habitación */
.cal-matrix .cal-room-h{background:var(--paper-solid);font-size:0.75rem;padding:6px 8px;border-right:1px solid rgba(var(--ink),.08)!important;box-shadow:6px 0 14px rgba(var(--shade),.04)}
.cal-matrix tbody .cal-room-h{font-weight:800;color:var(--t-1);letter-spacing:-.01em}
.cal-matrix tbody tr:nth-child(even) .cal-room-h{background:var(--paper-solid)}
.cal-matrix thead .cal-room-h{background:var(--paper-solid)!important;color:var(--t-4);font-size:0.5625rem;letter-spacing:.1em}
@media(min-width:640px){.cal-matrix .cal-room-h{padding:8px 12px;font-size:0.8125rem}}

/* cabecera de días */
.cal-matrix .cal-day-h{padding:8px 2px 7px;font-size:0.8125rem;font-weight:700;color:var(--t-2);background:var(--paper-solid)}
.cal-matrix .cal-day-h small{font-size:0.5625rem;font-weight:600;color:var(--t-4);margin-top:3px}
.cal-matrix .cal-day-h--weekend{background:var(--paper-solid);color:var(--c-violet)}
.cal-matrix .cal-day-h--weekend small{color:var(--c-violet-l)}
.cal-matrix .cal-day-h--today{background:linear-gradient(180deg,#fde68a,#fbbf24)!important;color:var(--c-amber-dd);border-radius:10px 10px 0 0;box-shadow:inset 0 1px 0 var(--rim)}
.cal-matrix .cal-day-h--today::before{display:none}
.cal-matrix .cal-day-h--today::after{display:none}
.cal-matrix .cal-day-h--today small{color:var(--c-amber-dd);font-weight:700}

/* celdas */
.cal-matrix .cal-cell{height:44px;padding:5px 2px}
@media(min-width:640px){.cal-matrix .cal-cell{height:46px;padding:5px 3px}}
.cal-cell-inner{border-radius:8px}
.cal-cell--free:hover .cal-cell-inner{background:rgba(16,185,129,.12);box-shadow:inset 0 0 0 1.5px rgba(16,185,129,.45)}
.cal-cell--sel-start .cal-cell-inner,.cal-cell--sel-end .cal-cell-inner{background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 50%),linear-gradient(135deg,#34d399,#059669);box-shadow:inset 0 1px 0 var(--rim),0 4px 10px rgba(5,150,105,.3)}
.cal-cell--sel-start .cal-cell-inner{border-radius:999px 0 0 999px}
.cal-cell--sel-end .cal-cell-inner{border-radius:0 999px 999px 0}
.cal-cell--sel-start.cal-cell--sel-end .cal-cell-inner{border-radius:999px}
.cal-cell--sel-mid .cal-cell-inner,.cal-cell--hover-range .cal-cell-inner{background:rgba(16,185,129,.18)}
.cal-cell--hover-end .cal-cell-inner{border-radius:0 999px 999px 0;background:linear-gradient(135deg,#34d399,#059669)}

/* reservas: píldoras con luz de borde */
.cal-matrix .cal-cell--bar{padding:6px 2px}
.cal-cell--bar .cal-cell-inner{height:32px;margin-top:0;font-size:0.6875rem;font-weight:800;padding:0 8px;border-radius:0;box-shadow:inset 0 1px 0 var(--rim),inset 0 -1px 0 rgba(var(--shade),.06),0 3px 8px rgba(var(--shade),.10);transition:transform .15s,box-shadow .15s}
.cal-cell--bar.bar-start .cal-cell-inner{border-radius:999px 0 0 999px;padding-left:12px}
.cal-cell--bar.bar-end .cal-cell-inner{border-radius:0 999px 999px 0}
.cal-cell--bar.bar-single .cal-cell-inner{border-radius:999px;padding-left:10px}
.cal-cell--bar.bar-start .cal-cell-inner::before{content:'';width:7px;height:7px;border-radius:999px;background:currentColor;opacity:.55;margin-right:6px;flex-shrink:0}
.cal-cell--bar.bar-activa .cal-cell-inner{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 50%),linear-gradient(135deg,#fcd34d,#f59e0b);color:var(--c-amber-dd)}
.cal-cell--bar.bar-reservada .cal-cell-inner{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 50%),linear-gradient(135deg,#7dd3fc,#3b82f6);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.15)}
.cal-cell--bar.bar-cerrada .cal-cell-inner{background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0) 50%),linear-gradient(135deg,var(--av-b),var(--sep));color:var(--t-3);box-shadow:inset 0 1px 0 var(--rim),0 1px 3px rgba(var(--shade),.06)}
.cal-cell--bar:hover .cal-cell-inner{filter:none;transform:translateY(-1px);box-shadow:inset 0 1px 0 var(--rim),0 8px 18px rgba(var(--shade),.16)}
.cal-cell--bar:focus-visible{outline:none}
.cal-cell--bar:focus-visible .cal-cell-inner{box-shadow:0 0 0 2px var(--rim),0 0 0 4px var(--accent)}

.cal-hint{margin-top:12px;color:var(--t-3)}
.cal-legacy-banner{border-radius:16px;background:rgba(255,251,235,.85);border-color:rgba(253,230,138,.9)}
.hotel-badge,.turno-badge{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.top-bar .user-info{white-space:nowrap}

/* ══════════════════════════════════════════════════════════════
   HABITACIONES · sin rayas de color. El estado se expresa con un
   tinte suave en la tarjeta, un punto y la etiqueta (estilo Apple).
   ══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   MODAL DE HABITACIÓN · cabecera tintada sin bloques duros,
   franja de datos como píldoras, secciones en tarjetas hundidas
   y acciones como píldoras (estilo Apple).
   ══════════════════════════════════════════════════════════════ */
.rm-header-bg{padding:24px 24px 20px;align-items:center}
.rm-header.libre .rm-header-bg{background:linear-gradient(160deg,rgba(209,250,229,.9) 0%,rgba(var(--paper),0) 70%)}
.rm-header.ocupada .rm-header-bg{background:linear-gradient(160deg,rgba(254,226,226,.9) 0%,rgba(var(--paper),0) 70%)}
.rm-header.limpieza .rm-header-bg{background:linear-gradient(160deg,var(--tint-amber) 0%,rgba(var(--paper),0) 70%)}
.rm-header.mantenimiento .rm-header-bg{background:linear-gradient(160deg,rgba(255,237,213,.9) 0%,rgba(var(--paper),0) 70%)}
.rm-header.bloqueada .rm-header-bg{background:linear-gradient(160deg,rgba(226,232,240,.9) 0%,rgba(var(--paper),0) 70%)}
.rm-icon{width:52px;height:52px;border-radius:18px;border:1px solid rgba(var(--paper),.7);box-shadow:inset 0 1px 0 var(--rim),0 6px 16px rgba(var(--shade),.14)}
.rm-header .rm-icon{background-image:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 50%),var(--rm-grad)}
.rm-header.libre .rm-icon{--rm-grad:linear-gradient(135deg,#34d399,#059669)}
.rm-header.ocupada .rm-icon{--rm-grad:linear-gradient(135deg,#f87171,#dc2626)}
.rm-header.limpieza .rm-icon{--rm-grad:linear-gradient(135deg,#fbbf24,#d97706)}
.rm-header.mantenimiento .rm-icon{--rm-grad:linear-gradient(135deg,#fb923c,#ea580c)}
.rm-header.bloqueada .rm-icon{--rm-grad:linear-gradient(135deg,var(--t-4),var(--t-4))}
.rm-room-num{font-size:1.375rem}
.rm-status-chip{border-radius:999px;padding:4px 10px}
.rm-close{width:32px;height:32px;background:rgba(var(--paper),.75);border:1px solid rgba(var(--paper),.9);box-shadow:inset 0 1px 0 var(--rim),0 2px 6px rgba(var(--shade),.08)}

/* franja piso / camas / precio → tarjeta con separadores suaves */
.rm-info-strip{border-top:none;background:transparent;margin:0 18px 4px;gap:8px}
.rm-info-item{border-right:none;background:rgba(var(--ink),.045);border-radius:14px;padding:10px 8px}
.rm-info-item-label{color:var(--t-4)}
.rm-info-item-val{font-size:0.875rem}

.rm-body{padding:16px 22px 22px}
.rm-section-label{color:var(--t-4);margin-bottom:8px;padding-left:2px}
.rm-timeline,.rm-guest-card{background:rgba(var(--ink),.04);border:none;border-radius:18px;box-shadow:inset 0 1px 2px rgba(var(--shade),.04)}
.rm-tl-track{height:6px;background:rgba(var(--ink),.08);border-radius:99px}
.rm-tl-progress{border-radius:99px;box-shadow:0 1px 4px rgba(14,165,233,.4)}
.rm-guest-details dd{font-size:0.9375rem}
.rm-divider{background:linear-gradient(90deg,transparent,rgba(var(--ink),.12),transparent)}

/* acciones: píldoras */
.rm-actions{gap:10px}
.rm-actions .btn{border-radius:999px;min-height:48px}
.rm-actions .btn-next-solid,.btn-next-solid{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 45%),linear-gradient(135deg,#34d399,#059669);border:1px solid rgba(var(--paper),.4);box-shadow:inset 0 1px 0 var(--rim),0 6px 16px rgba(5,150,105,.28)}
.btn-cancel-solid{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 45%),linear-gradient(135deg,#fb7185,#e11d48);border:1px solid rgba(var(--paper),.4);box-shadow:inset 0 1px 0 var(--rim),0 6px 16px rgba(225,29,72,.25)}
.rm-actions .btn-danger{box-shadow:inset 0 1px 0 var(--rim),0 6px 16px rgba(220,38,38,.28)}
.rm-actions .btn-secondary,.btn-secondary{background:rgba(var(--ink),.05);color:var(--t-1);border:1px solid rgba(var(--paper),.8);box-shadow:inset 0 1px 0 var(--rim)}
.rm-actions .btn-secondary:hover,.btn-secondary:hover{background:var(--paper-solid);box-shadow:inset 0 1px 0 var(--rim),0 4px 12px rgba(var(--shade),.08)}
.rm-actions-secondary .btn{border-radius:18px}
.modal-actions .btn,.btn-row .btn{border-radius:999px}
.modal-close{background:rgba(var(--ink),.06);color:var(--t-3)}

/* ══════════════════════════════════════════════════════════════
   MODAL DE HABITACIÓN · versión compacta
   Menos alto muerto: cabecera más baja, secciones juntas,
   botones de 44px y etiquetas más pequeñas.
   ══════════════════════════════════════════════════════════════ */
.rm-header-bg{padding:16px 18px 14px;gap:12px}
.rm-icon{width:44px;height:44px;border-radius:15px}
.rm-icon svg{width:22px;height:22px}
.rm-room-num{font-size:1.1875rem}
.rm-sub-line{margin-top:2px;font-size:0.6875rem}
.rm-status-chip{font-size:0.5625rem;padding:3px 9px}
.rm-close{top:12px;right:12px;width:28px;height:28px}

.rm-info-strip{margin:0 14px 2px;gap:6px}
.rm-info-item{padding:7px 6px;border-radius:12px}
.rm-info-item-label{font-size:0.5rem;margin-bottom:1px}
.rm-info-item-val{font-size:0.8125rem}

.rm-body{padding:12px 16px 16px}
.rm-section-label{font-size:0.5625rem;margin-bottom:5px}
.rm-timeline,.rm-guest-card{padding:10px 12px;margin-bottom:10px;border-radius:14px}
.rm-tl-track{margin:7px 0 6px;height:5px}
.rm-tl-labels{font-size:0.5625rem}
.rm-tl-label strong{font-size:0.6875rem}
.rm-guest-name{font-size:0.8125rem;gap:5px}
.rm-guest-details{gap:6px 14px;margin-top:9px}
.rm-guest-details dt{font-size:0.5625rem}
.rm-guest-details dd{font-size:0.8125rem}
.rm-saldo-highlight{font-size:0.8125rem}
.rm-divider{margin:10px 0}

.rm-actions{gap:7px}
.rm-actions .btn{min-height:44px;font-size:0.8438rem;gap:7px}
.rm-actions .btn svg{width:17px;height:17px}
.rm-actions-secondary{gap:7px}
.rm-actions-secondary .btn{min-height:52px;font-size:0.6562rem;gap:3px;border-radius:14px}
.rm-actions-secondary .btn svg{width:19px;height:19px;opacity:.75}

/* ══════════════════════════════════════════════════════════════
   ICONOS DE ACCIÓN CON COLOR SEMÁNTICO
   En los botones secundarios el icono lleva el color de su acción
   (el texto se mantiene neutro para no gritar). En los sólidos el
   icono hereda el blanco del botón.
   ══════════════════════════════════════════════════════════════ */
.btn-secondary svg,.rm-actions .btn-secondary svg,.rm-actions-secondary .btn svg{opacity:1}

/* dinero → verde */
.btn.act-pago svg{color:var(--c-green)}
/* calendario / estadía → azul */
.btn.act-estadia svg{color:var(--c-blue)}
/* huésped → índigo */
.btn.act-huesped svg{color:var(--c-indigo-l)}
/* limpieza → ámbar */
.btn.act-limpieza svg{color:var(--c-amber)}
/* mantenimiento → naranja */
.btn.act-mant svg{color:var(--c-orange)}
/* bloquear → gris pizarra */
.btn.act-bloquear svg{color:var(--t-4)}
/* liberar / marcar disponible en botón secundario → verde */
.btn-secondary.act-libre svg{color:var(--c-green)}

/* en botones sólidos el icono sigue siendo blanco */
.btn-next-solid svg,.btn-primary svg,.btn-danger svg,.btn-cancel-solid svg{color:#fff!important}

/* halo suave detrás del icono en los secundarios de la rejilla */
.rm-actions-secondary .btn svg{padding:0}
.rm-actions-secondary .btn.act-limpieza{background:rgba(217,119,6,.08)}
.rm-actions-secondary .btn.act-mant{background:rgba(234,88,12,.08)}
.rm-actions-secondary .btn.act-bloquear{background:rgba(100,116,139,.08)}
.rm-actions-secondary .btn:hover{background:var(--paper-solid)}

/* Detalles del huésped: mantener dos columnas también en móvil (más compacto) */
@media(max-width:420px){
  .rm-guest-details{grid-template-columns:1fr 1fr;gap:8px 12px}
  .rm-guest-details dd{font-size:0.7812rem}
}

/* ══════════════════════════════════════════════════════════════
   CAJA · rediseño
   Sin líneas de color: los KPI se tintan. Jerarquía: el neto manda,
   los movimientos son una lista limpia con monto tabular.
   ══════════════════════════════════════════════════════════════ */
.caja-header{border-radius:22px;padding:14px 16px;margin-bottom:12px}
.caja-header-icon{width:46px;height:46px;border-radius:16px;border:1px solid rgba(var(--paper),.7);box-shadow:inset 0 1px 0 var(--rim),0 6px 16px rgba(var(--shade),.12)}
.caja-header-icon.abierto{background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 50%),linear-gradient(135deg,#fcd34d,#f59e0b)}
.caja-header-icon.tarde{background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 50%),linear-gradient(135deg,#fb923c,#ea580c)}
.caja-header-icon.noche{background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 50%),linear-gradient(135deg,#a5b4fc,#6366f1)}
.caja-header-icon svg{width:22px;height:22px}
.caja-header-title{font-size:1rem;letter-spacing:-.02em}
.caja-header-sub{font-size:0.7188rem;margin-top:2px}
.caja-header .btn-danger{border-radius:999px!important;font-size:0.75rem;padding:8px 16px!important}

/* KPIs tintados, sin barra superior */
.caja-kpis{gap:8px;margin-bottom:12px}
.caja-kpi::before{display:none}
.caja-kpi{border-radius:18px;padding:12px 14px;border:1px solid rgba(var(--paper),.9);box-shadow:inset 0 1px 0 var(--rim),var(--shadow-card)}
.caja-kpi.kpi-green{background:linear-gradient(140deg,var(--tint-green),rgba(var(--paper),.75))}
.caja-kpi.kpi-blue{background:linear-gradient(140deg,rgba(219,234,254,.85),rgba(var(--paper),.75))}
.caja-kpi.kpi-red{background:linear-gradient(140deg,rgba(254,226,226,.85),rgba(var(--paper),.75))}
.caja-kpi.kpi-gold{background:linear-gradient(140deg,var(--tint-amber),rgba(var(--paper),.7))}
.caja-kpi-label{font-size:0.5938rem;color:var(--t-4);margin-bottom:4px;letter-spacing:.07em}
.caja-kpi-val{font-size:1.3125rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
/* el neto es el dato principal: ocupa toda la fila */
.caja-kpi.kpi-gold{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:14px 18px}
.caja-kpi.kpi-gold .caja-kpi-label{margin-bottom:0}
.caja-kpi.kpi-gold .caja-kpi-val{font-size:1.625rem;color:var(--c-amber-d)}

/* botón registrar movimiento: píldora, no bloque */
.caja-content-wrap .btn-primary,#caja-content .btn-primary.btn-full{border-radius:999px!important}
#caja-content > div > .btn-primary{border-radius:999px!important}

/* lista de movimientos */
.movs-section{border-radius:22px;padding:6px 8px 8px;background:rgba(var(--paper),.92);border:1px solid rgba(var(--paper),.9);box-shadow:inset 0 1px 0 var(--rim),var(--shadow-card)}
.movs-header{padding:12px 12px 10px;margin-bottom:2px;border-bottom:1px solid rgba(var(--ink),.06)}
.movs-header h3{font-size:0.8125rem}
.mov-list{gap:0}
.mov-item{border-radius:14px;padding:11px 12px;gap:11px;position:relative;background:none;border:none}
.mov-item+.mov-item::before{content:'';position:absolute;top:0;left:43px;right:12px;height:1px;background:rgba(var(--ink),.055)}
.mov-item:hover{background:rgba(14,165,233,.05)}
.mov-item:hover::before,.mov-item:hover+.mov-item::before{opacity:0}
.mov-desc{font-size:0.8438rem;font-weight:650}
.mov-meta{font-size:0.6562rem;color:var(--t-4);margin-top:2px;text-transform:capitalize}
.mov-monto{font-size:0.9062rem;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.mov-monto.blue{color:var(--c-blue)}

/* estado sin turno */
.caja-no-turno{border-radius:24px;background:rgba(var(--paper),.75);border:1px solid rgba(var(--paper),.9);box-shadow:inset 0 1px 0 var(--rim),var(--shadow-card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.caja-no-turno-icon{border-radius:22px;border:1px solid rgba(var(--paper),.9);box-shadow:inset 0 1px 0 var(--rim),0 6px 18px rgba(14,165,233,.15)}
.caja-no-turno .btn-primary{border-radius:999px!important}

/* Botón principal de caja: píldora (gana al border-radius en línea) */
.btn.act-mov,.btn.act-abrir-turno,.btn.act-cerrar-turno{border-radius:999px!important}
.btn.act-mov{min-height:50px!important;font-size:0.9062rem!important;letter-spacing:.01em}

/* ── Movimientos: pastilla con flecha, un solo bloque ─────────── */
.mov-dot{
  width:26px;height:26px;border-radius:999px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 1px 0 var(--rim);
}
.mov-dot::after{
  content:'';width:14px;height:14px;display:block;
  background:currentColor;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v13M6.5 12.5 12 18l5.5-5.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v13M6.5 12.5 12 18l5.5-5.5'/%3E%3C/svg%3E");
}
.mov-dot.ingreso{background:rgba(5,150,105,.13);color:var(--c-green)}
.mov-dot.transferencia{background:rgba(37,99,235,.13);color:var(--c-blue)}
.mov-dot.egreso{background:rgba(220,38,38,.13);color:var(--c-red)}
.mov-dot.retiro{background:rgba(234,88,12,.13);color:var(--c-orange)}
.mov-dot.transferencia::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h13l-3.5-3.5M20 16H7l3.5 3.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h13l-3.5-3.5M20 16H7l3.5 3.5'/%3E%3C/svg%3E")}
.mov-dot.egreso::after,.mov-dot.retiro::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V6M6.5 11.5 12 6l5.5 5.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V6M6.5 11.5 12 6l5.5 5.5'/%3E%3C/svg%3E")}
/* Sin soporte de mask: se ve la pastilla de color, nunca un hueco */
@supports not ((-webkit-mask-image:url('')) or (mask-image:url(''))){
  .mov-dot::after{width:9px;height:9px;border-radius:999px;background:currentColor}
}
.mov-item+.mov-item::before{left:49px}

/* ── Caja · resumen al estilo Apple ────────────────────────────
   Cifra principal grande y desnuda, sin caja ni etiqueta gritada.
   Debajo, lista agrupada: concepto a la izquierda, importe a la
   derecha, separadores finos. Como Ajustes o Wallet.            */
.caja-kpis{
  display:flex!important;flex-direction:column;grid-template-columns:none!important;
  gap:0!important;margin-bottom:14px;
}
/* Neto: titular, fuera de cualquier tarjeta */
.caja-kpi.kpi-gold{
  background:none!important;border:none!important;box-shadow:none!important;
  border-radius:0!important;padding:2px 4px 14px!important;
  display:block;grid-column:auto;order:-1;
}
.caja-kpi.kpi-gold .caja-kpi-label{
  font-size:0.8125rem;font-weight:500;color:var(--t-4);
  text-transform:lowercase;letter-spacing:0;margin-bottom:1px;
}
.caja-kpi.kpi-gold .caja-kpi-label::first-letter{text-transform:uppercase}
.caja-kpi.kpi-gold .caja-kpi-val{
  font-size:2.375rem;font-weight:700;letter-spacing:-.045em;color:var(--t-1);
  font-variant-numeric:tabular-nums;line-height:1.08;
}
/* Desglose: lista agrupada */
.caja-kpi:not(.kpi-gold){
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  background:rgba(var(--paper),.92)!important;
  border:none!important;border-radius:0!important;box-shadow:none!important;
  padding:13px 16px!important;position:relative;
}
.caja-kpi::before{display:none!important}
.caja-kpi.kpi-green{border-radius:16px 16px 0 0!important;box-shadow:inset 0 1px 0 var(--rim)!important}
.caja-kpi.kpi-red{border-radius:0 0 16px 16px!important;box-shadow:0 6px 20px rgba(var(--shade),.05)!important}
.caja-kpi:not(.kpi-gold):not(.kpi-green)::after{
  content:'';position:absolute;top:0;left:16px;right:16px;height:1px;
  background:rgba(var(--ink),.07);
}
.caja-kpi:not(.kpi-gold) .caja-kpi-label{
  font-size:0.875rem;font-weight:450;color:var(--t-1);
  text-transform:none;letter-spacing:0;margin-bottom:0;
}
.caja-kpi:not(.kpi-gold) .caja-kpi-val{
  font-size:0.9375rem;font-weight:600;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.caja-kpi-val.green{color:var(--c-green)}
.caja-kpi-val.blue{color:var(--c-blue)}
.caja-kpi-val.red{color:var(--c-red)}

@media(max-width:560px){
  .caja-kpi.kpi-gold .caja-kpi-val{font-size:2rem}
  .caja-kpi.kpi-gold .caja-kpi-label{font-size:0.7812rem}
  .caja-kpi:not(.kpi-gold){padding:12px 14px!important}
  .caja-header{padding:12px 14px}
  .caja-header-title{font-size:0.9375rem}
  .mov-desc{font-size:0.8125rem}
  .mov-monto{font-size:0.8438rem}
}

/* ══════════════════════════════════════════════════════════════
   CAMPOS DE FORMULARIO · etiquetas, inputs y SELECT
   El desplegable nativo lo pinta el sistema operativo y no acepta
   CSS. En Chromium moderno `appearance:base-select` devuelve el
   control al documento y `::picker(select)` permite estilizar el
   panel. Donde no exista, el select cerrado sigue cuidado y el
   panel vuelve a ser el del sistema.
   ══════════════════════════════════════════════════════════════ */
label{
  font-size:0.7812rem;font-weight:500;color:var(--t-3);
  text-transform:none;letter-spacing:0;margin-bottom:6px;
}
input,select,textarea{
  border-radius:14px;padding:12px 14px;font-size:0.9375rem;
  border:1px solid rgba(var(--ink),.12);
  background-color:rgba(var(--paper),.85);
  box-shadow:inset 0 1px 0 var(--rim);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
input:focus,select:focus,textarea:focus{
  background-color:#fff;border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(14,165,233,.15),inset 0 1px 0 var(--rim);
}
input::placeholder,textarea::placeholder{color:var(--t-4)}

/* ── Select: base para todos los navegadores ── */
select{
  -webkit-appearance:none;appearance:none;
  padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
}
select:focus{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230284c7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
}

/* ── Select estilizable (Chromium 135+) ── */
@supports (appearance:base-select){
  select,::picker(select){appearance:base-select}

  select,select:focus,select:open,select:hover{
    background-image:none!important;
  }
  select{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:11px 12px 11px 14px;
    text-align:left;font-family:inherit;color:var(--text);
  }
  /* la flecha pasa a ser un elemento propio: puede animarse */
  select::picker-icon{
    color:var(--t-4);transition:transform .22s cubic-bezier(.4,0,.2,1);
    content:'';width:20px;height:20px;flex-shrink:0;
    background:currentColor;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
    -webkit-mask-size:contain;mask-size:contain;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:center;mask-position:center;
  }
  select:open::picker-icon{transform:rotate(180deg);color:var(--accent2)}
  select:open{border-color:var(--accent);box-shadow:0 0 0 4px rgba(14,165,233,.15)}

  /* el panel: vidrio, como los menús contextuales de macOS */
  ::picker(select){
    border:1px solid var(--lg-border);
    border-radius:18px;
    padding:6px;
    margin-top:7px;
    /* mismo material que sidebar y modales: frost ~.55 */
    background:linear-gradient(150deg,rgba(var(--paper),.72) 0%,rgba(var(--paper),.60) 55%,rgba(var(--paper),.52) 100%);
    -webkit-backdrop-filter:blur(30px) saturate(190%);backdrop-filter:blur(30px) saturate(190%);
    box-shadow:var(--lg-rim),0 16px 44px rgba(var(--shade),.20),0 2px 8px rgba(var(--shade),.08);
    opacity:0;transform:translateY(-6px) scale(.98);
    transition:opacity .16s ease,transform .16s cubic-bezier(.4,0,.2,1),overlay .16s allow-discrete,display .16s allow-discrete;
    max-height:min(340px,60vh);overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;scrollbar-color:rgba(var(--ink),.22) transparent;
  }
  ::picker(select)::-webkit-scrollbar{width:9px}
  ::picker(select)::-webkit-scrollbar-thumb{background:rgba(var(--ink),.2);border:3px solid transparent;background-clip:content-box;border-radius:99px}
  ::picker(select)::-webkit-scrollbar-track{background:transparent}
  ::picker(select):popover-open{opacity:1;transform:translateY(0) scale(1)}
  @starting-style{
    ::picker(select):popover-open{opacity:0;transform:translateY(-6px) scale(.98)}
  }

  option{
    display:flex;align-items:center;gap:9px;
    padding:9px 12px;border-radius:11px;
    font-size:0.9062rem;color:var(--text);
    background:transparent;cursor:pointer;
    transition:background .1s;
  }
  option:hover,option:focus{
    background:linear-gradient(135deg,rgba(var(--paper),.85),rgba(var(--paper),.55));
    color:var(--accent2);outline:none;
    box-shadow:inset 0 1px 0 var(--rim),0 1px 3px rgba(var(--shade),.06);
  }
  option:checked{font-weight:600;color:var(--accent2)}
  option:checked:not(:hover){background:rgba(var(--paper),.42);box-shadow:inset 0 1px 0 var(--rim)}
  /* marca de verificación en la opción activa, alineada a la izquierda */
  option::checkmark{
    order:-1;content:'';width:16px;height:16px;flex-shrink:0;
    background:currentColor;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 10 18l9.5-11'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 10 18l9.5-11'/%3E%3C/svg%3E");
    -webkit-mask-size:contain;mask-size:contain;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  }
  option:not(:checked)::checkmark{opacity:0}
  /* el texto de la opción elegida, dentro del botón cerrado */
  selectedcontent{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  select selectedcontent::checkmark{display:none}
}

/* Fecha y hora: quitar el icono gris del sistema, dejar el nuestro */
input[type="date"],input[type="time"]{cursor:pointer}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{
  opacity:.45;cursor:pointer;transition:opacity .15s;border-radius:6px;padding:2px;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator{opacity:.8}

/* El desplegable respeta la preferencia de transparencia reducida */
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
  ::picker(select){
    background:var(--paper-solid)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    border-color:var(--sep)!important;
  }
  option:hover,option:focus{background:var(--tint-sky)!important;box-shadow:none!important}
  option:checked:not(:hover){background:#f1f5f9!important;box-shadow:none!important}
}

/* ══════════════════════════════════════════════════════════════
   OCUPACIÓN · resumen estilo Apple
   El patrón de Almacenamiento del iPhone: una cifra que manda,
   una barra apilada que muestra la proporción real, y la leyenda
   como filtros. Nada de cuatro tarjetas compitiendo entre sí.
   ══════════════════════════════════════════════════════════════ */
.occ{
  margin-bottom:16px;padding:16px 18px 14px;
  background:linear-gradient(150deg,rgba(var(--paper),.80),rgba(var(--paper),.62));
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  border:1px solid var(--lg-border);border-radius:22px;
  box-shadow:var(--lg-rim),var(--lg-shadow);
}
.occ-head{margin-bottom:14px}
.occ-kicker{font-size:0.8125rem;font-weight:500;color:var(--t-4);margin:0 0 1px}
.occ-figure{
  font-size:2.5rem;font-weight:700;letter-spacing:-.05em;color:var(--t-1);
  line-height:1.02;margin:0;font-variant-numeric:tabular-nums;
}
.occ-figure span{font-size:1.5rem;font-weight:600;letter-spacing:-.02em;color:var(--t-4);margin-left:2px}
.occ-sub{font-size:0.8125rem;color:var(--t-4);margin:3px 0 0}

/* barra apilada: un solo riel, segmentos proporcionales */
.occ-bar{
  display:flex;gap:2px;height:11px;margin-bottom:14px;
  border-radius:999px;overflow:hidden;
  background:rgba(var(--ink),.06);
  box-shadow:inset 0 1px 2px rgba(var(--shade),.06);
}
.occ-seg{
  display:block;min-width:4px;
  transition:width .55s cubic-bezier(.4,0,.2,1);
  box-shadow:inset 0 1px 0 var(--rim);
}
.occ-seg:first-child{border-radius:999px 0 0 999px}
.occ-seg:last-child{border-radius:0 999px 999px 0}
.occ-seg:only-child{border-radius:999px}
.occ-seg.green{background:linear-gradient(180deg,#34d399,#059669)}
.occ-seg.red{background:linear-gradient(180deg,#f87171,#dc2626)}
.occ-seg.amber{background:linear-gradient(180deg,#fbbf24,#d97706)}
.occ-seg.orange{background:linear-gradient(180deg,#fb923c,#ea580c)}
.occ-seg.empty{background:rgba(var(--ink),.08)}

/* leyenda = filtros */
.occ-legend{display:flex;flex-wrap:wrap;gap:6px}
.occ-item{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px 7px 10px;border-radius:999px;
  border:1px solid transparent;background:rgba(var(--paper),.55);
  font-family:inherit;font-size:0.8125rem;font-weight:500;color:var(--t-2);
  cursor:pointer;transition:background .15s,box-shadow .15s,border-color .15s;
  box-shadow:inset 0 1px 0 var(--rim);
}
.occ-item:hover{background:var(--paper-solid);box-shadow:inset 0 1px 0 var(--rim),0 2px 8px rgba(var(--shade),.07)}
.occ-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.occ-dot{
  width:9px;height:9px;border-radius:999px;flex-shrink:0;
  box-shadow:inset 0 1px 0 var(--rim);
}
.occ-item.green .occ-dot{background:linear-gradient(135deg,#6ee7b7,#059669)}
.occ-item.red .occ-dot{background:linear-gradient(135deg,#fca5a5,#dc2626)}
.occ-item.amber .occ-dot{background:linear-gradient(135deg,#fde68a,#d97706)}
.occ-item.orange .occ-dot{background:linear-gradient(135deg,#fdba74,#ea580c)}
.occ-count{font-weight:650;font-variant-numeric:tabular-nums;color:var(--t-1);margin-left:1px}
/* filtro activo */
.occ-item.is-on{background:var(--paper-solid);box-shadow:inset 0 1px 0 var(--rim),0 3px 10px rgba(var(--shade),.10)}
.occ-item.green.is-on{border-color:rgba(5,150,105,.35);color:var(--c-green-d)}
.occ-item.red.is-on{border-color:rgba(220,38,38,.35);color:var(--c-red-d)}
.occ-item.amber.is-on{border-color:rgba(202,138,4,.4);color:var(--c-amber-dd)}
.occ-item.orange.is-on{border-color:rgba(234,88,12,.35);color:var(--c-orange-d)}
.occ-item.is-on .occ-count{color:inherit}

@media(max-width:560px){
  .occ{padding:14px 15px 12px;border-radius:20px}
  .occ-figure{font-size:2.125rem}
  .occ-figure span{font-size:1.3125rem}
  .occ-item{font-size:0.7812rem;padding:6px 11px 6px 9px}
}
@media(prefers-reduced-motion:reduce){.occ-seg{transition:none}}

/* ── Barra de filtros: sin duplicar la leyenda ─────────────────
   La leyenda del resumen ya filtra por estado (y alterna al volver
   a tocarla). El control segmentado repetía lo mismo, así que la
   fila queda con búsqueda y agrupar por piso.                    */
.filters-bar-v2 .segment-control{display:none}
.filters-bar-v2{gap:8px;margin-bottom:14px;flex-wrap:nowrap}
.filters-bar-v2 .room-search-wrap{flex:1;min-width:0;margin-left:0}
.room-search-input{
  width:100%;border-radius:999px;padding:11px 16px 11px 38px;font-size:0.9062rem;
  background-color:rgba(var(--paper),.72);border:1px solid var(--lg-border);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  box-shadow:inset 0 1px 0 var(--rim);
}
.room-search-input:focus{background-color:#fff;border-color:var(--accent);box-shadow:0 0 0 4px rgba(14,165,233,.15)}
.room-search-wrap svg{left:15px}
.floor-toggle{
  border-radius:999px;padding:9px 15px;font-size:0.8125rem;font-weight:500;flex-shrink:0;
  background-color:rgba(var(--paper),.72);border:1px solid var(--lg-border);
  box-shadow:inset 0 1px 0 var(--rim);
}
.floor-toggle:hover{background-color:#fff}
.floor-toggle.active{background-color:#fff;color:var(--accent2);border-color:rgba(14,165,233,.35);box-shadow:inset 0 1px 0 var(--rim),0 3px 10px rgba(14,165,233,.14)}

/* ══════════════════════════════════════════════════════════════
   TARJETAS DE HABITACIÓN · lenguaje Apple
   Antes el estado se repetía tres veces: punto, franja de color y
   etiqueta en versalitas. Ahora hay un solo indicador. La tarjeta
   es neutra y el color sale del texto, como en Ajustes o Archivos.
   ══════════════════════════════════════════════════════════════ */
.rooms-grid{gap:12px;align-items:start}

.room-card-v2,
.room-card-v2.libre,.room-card-v2.ocupada,
.room-card-v2.limpieza,.room-card-v2.mantenimiento{
  background:linear-gradient(160deg,rgba(var(--paper),.95),rgba(var(--paper),.88));
  border:1px solid var(--lg-border);border-radius:20px;
  box-shadow:inset 0 1px 0 var(--rim),var(--shadow-card);
}
.room-card-v2.bloqueada{background:rgba(248,250,252,.85);opacity:.72}
.room-card-v2::before{display:none}
.room-card-v2:hover{
  background:var(--paper-solid);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 var(--rim),0 14px 34px rgba(var(--shade),.11);
}

.rc-body{padding:15px 17px 15px;gap:0}
.rc-header{align-items:center;margin-bottom:2px}
.rc-num{font-size:1.1875rem;font-weight:700;letter-spacing:-.03em;color:var(--t-1)}
/* el punto ya no va en el número: iba duplicado con la etiqueta */
.rc-num::before{display:none}

/* Estado: un punto y una palabra, sin píldora ni versalitas */
.rc-estado-label{
  display:inline-flex;align-items:center;gap:6px;
  background:none!important;padding:0!important;border-radius:0!important;
  font-size:0.8125rem;font-weight:500;text-transform:none;letter-spacing:0;
}
.rc-estado-label::before{
  content:'';width:8px;height:8px;border-radius:999px;flex-shrink:0;
  background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 14%,transparent);
}
.rc-estado-label.libre{color:var(--c-green)}
.rc-estado-label.ocupada{color:var(--c-red)}
.rc-estado-label.limpieza{color:var(--c-amber-d)}
.rc-estado-label.mantenimiento{color:var(--c-orange)}
.rc-estado-label.bloqueada{color:var(--t-4)}

/* Metadatos en una sola línea, separados por punto medio */
.rc-info{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-top:3px;flex-wrap:nowrap;
}
.rc-meta-line{
  font-size:0.8438rem;color:var(--t-4);font-weight:400;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rc-sep{margin:0 6px;color:var(--sep)}
.rc-price{
  font-size:0.875rem;font-weight:600;color:var(--t-1);flex-shrink:0;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}

/* Huésped: bloque inferior anclado al pie de la tarjeta */
.rc-guest{
  margin-top:12px;padding-top:11px;border-top:none;position:relative;
}
.rc-guest::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:rgba(var(--ink),.08);
}
.rc-guest-name{font-size:0.8438rem;font-weight:600;color:var(--t-1)}
.rc-meta{gap:5px;margin-top:5px}
.rc-checkout-badge,.rc-payment-indicator{
  border-radius:999px;padding:3px 9px;font-size:0.6875rem;font-weight:550;
}
.rc-checkout-badge svg{width:11px;height:11px}


.floor-header{
  border-bottom:none;color:var(--t-4);font-size:0.8125rem;font-weight:600;
  text-transform:none;letter-spacing:0;padding:12px 4px 2px;
}
@media(max-width:560px){
  .rc-body{padding:13px 15px}
  .rc-num{font-size:1.125rem}
  .rc-type,.rc-pill{font-size:0.8125rem}
}

/* Filtros en móvil: piso y búsqueda comparten línea (el original los apilaba) */
@media(max-width:640px){
  .filters-bar-v2{flex-direction:row!important;align-items:center!important;gap:8px}
  .filters-bar-v2 .room-search-wrap{flex:1;min-width:0}
  .floor-toggle{padding:9px 13px}
  .room-search-input{padding:10px 14px 10px 36px;font-size:0.875rem}
  .occ-legend{gap:5px}
}

/* ── Rejilla de habitaciones: filas perfectamente alineadas ────
   Todas las tarjetas comparten estructura (título, metadatos y
   pie), así que se igualan sin dejar huecos.                    */
.rooms-grid{align-items:stretch;grid-auto-rows:1fr}
.rooms-grid>.room-card-v2{height:100%}
.room-card-v2 .rc-body{height:100%}
.rc-guest{margin-top:auto}

/* Pie de las habitaciones sin huésped */
.rc-guest--vacia{display:flex;align-items:center}
.rc-vacia-text{
  font-size:0.8125rem;color:var(--t-4);font-weight:400;
  display:inline-flex;align-items:center;gap:7px;
}
.rc-vacia-text::before{
  content:'';width:13px;height:13px;flex-shrink:0;
  background:currentColor;opacity:.75;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5 11 15.5 16.5 9'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5 11 15.5 16.5 9'/%3E%3C/svg%3E");
}
.room-card-v2.libre .rc-vacia-text{color:var(--c-green)}
.room-card-v2.limpieza .rc-vacia-text,
.room-card-v2.mantenimiento .rc-vacia-text,
.room-card-v2.bloqueada .rc-vacia-text{color:var(--t-4)}
/* reloj y candado en lugar del check para los estados que no admiten entrada */
.room-card-v2.limpieza .rc-vacia-text::before,
.room-card-v2.mantenimiento .rc-vacia-text::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3 1.8'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3 1.8'/%3E%3C/svg%3E");
}
.room-card-v2.bloqueada .rc-vacia-text::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='10' rx='2.5'/%3E%3Cpath d='M7.5 10.5V7a4.5 4.5 0 0 1 9 0v3.5'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='10' rx='2.5'/%3E%3Cpath d='M7.5 10.5V7a4.5 4.5 0 0 1 9 0v3.5'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════════════════════════
   HUÉSPEDES · lista estilo Contactos
   Antes cada fila dedicaba una franja entera a decir "Sin correo"
   y un guion suelto. Un dato que falta se omite, no se anuncia.
   ══════════════════════════════════════════════════════════════ */
.guests-header h2{font-size:1.375rem;font-weight:700;letter-spacing:-.03em}
.guests-header-icon{
  width:38px;height:38px;border-radius:13px;
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 50%),linear-gradient(135deg,#38bdf8,#0284c7);
  border:1px solid rgba(var(--paper),.7);
  box-shadow:inset 0 1px 0 var(--rim),0 5px 14px rgba(14,165,233,.25);
}
.guests-header-icon svg{color:#fff}

/* una sola tarjeta con filas, no tarjetas sueltas */
.guest-list{
  gap:0;border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg,rgba(var(--paper),.94),rgba(var(--paper),.86));
  border:1px solid var(--lg-border);
  box-shadow:inset 0 1px 0 var(--rim),var(--shadow-card);
}
.guest-card{
  display:flex;align-items:center;gap:13px;
  background:none;border:none;border-radius:0;
  padding:12px 14px 12px 15px;position:relative;overflow:visible;
  transition:background .14s;
}
.guest-card+.guest-card::before{
  content:'';position:absolute;top:0;left:64px;right:0;height:1px;
  background:rgba(var(--ink),.07);
}
.guest-card:hover{background:rgba(14,165,233,.055);transform:none;box-shadow:none;border-color:transparent}
.guest-card:hover+.guest-card::before,.guest-card:hover::before{opacity:0}
.guest-card:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:12px}

.gc-avatar{
  width:38px;height:38px;border-radius:999px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:0.8438rem;font-weight:600;letter-spacing:.01em;color:var(--t-3);
  background:linear-gradient(160deg,var(--av-a),var(--av-b));
  border:1px solid rgba(var(--paper),.9);
  box-shadow:inset 0 1px 0 var(--rim);
}
.gc-info{flex:1;min-width:0}
.gc-name{
  font-size:0.9375rem;font-weight:600;color:var(--t-1);letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gc-meta{
  font-size:0.8125rem;color:var(--t-4);margin-top:2px;font-weight:400;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* recuento con su unidad: un número suelto no se entiende */
.gc-stays{
  flex-shrink:0;font-size:0.7812rem;font-weight:500;color:var(--t-4);
  white-space:nowrap;
}
/* chevron: indica que la fila abre */
.gc-chevron{
  width:8px;height:13px;flex-shrink:0;margin-left:2px;
  background:var(--sep);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1.5 1.5 5 5-5 5'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1.5 1.5 5 5-5 5'/%3E%3C/svg%3E");
}
.guest-card:hover .gc-chevron{background:var(--accent2)}

@media(max-width:480px){
  .gc-stays{display:none}
  .guest-card{padding:11px 12px 11px 13px;gap:11px}
  .gc-avatar{width:36px;height:36px;font-size:0.8125rem}
  .guest-card+.guest-card::before{left:60px}
}

/* ── Ficha de huésped: compacta, sin repetir datos ─────────────
   La franja superior mostraba correo y ciudad, que ya se editan
   en el formulario. Las estancias pasaron al subtítulo.        */
.rm-body--guest{padding:13px 18px 14px}
.rm-body--guest .form-grid{gap:10px!important}
.rm-body--guest .form-group label{margin-bottom:4px;font-size:0.75rem}
.rm-body--guest input,.rm-body--guest select{padding:10px 13px;font-size:0.9062rem;border-radius:12px}
.rm-body--guest select{padding-right:38px}
.rm-body--guest .rm-section-label{margin-bottom:6px}
.rm-body--guest .rm-divider{margin:12px 0 10px}
.rm-body--guest .btn-primary{border-radius:999px!important;min-height:46px!important}
.rm-body--guest>div[style*="margin-top:14px"]{margin-top:12px!important}
/* el historial ya no necesita su propio scroll dentro del scroll */
.rm-body--guest .guest-detail-hist-scroll{max-height:none;overflow:visible}

/* ══════════════════════════════════════════════════════════════
   AGENDA · itinerario de llegadas
   Tres filas fijas por reserva: quién y dónde, la estadía y el
   dinero. Sin franjas para datos que faltan, sin versalitas.
   ══════════════════════════════════════════════════════════════ */
.agenda-header h2{font-size:1.375rem;font-weight:700;letter-spacing:-.03em}
.agenda-header-icon{
  width:38px;height:38px;border-radius:13px;
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 50%),linear-gradient(135deg,#38bdf8,#0284c7);
  border:1px solid rgba(var(--paper),.7);
  box-shadow:inset 0 1px 0 var(--rim),0 5px 14px rgba(14,165,233,.25);
}
.agenda-header-icon svg{color:#fff}
.agenda-refresh{border-radius:999px;padding:9px 16px;font-size:0.8125rem;font-weight:500}

.agenda-day-h{
  font-size:0.8125rem;font-weight:600;color:var(--t-4);
  text-transform:none;letter-spacing:0;
  padding:16px 4px 8px;border-bottom:none;
}
.agenda-day-h:first-child{padding-top:4px}

.ag-card{
  background:linear-gradient(160deg,rgba(var(--paper),.95),rgba(var(--paper),.88));
  border:1px solid var(--lg-border);border-radius:20px;
  box-shadow:inset 0 1px 0 var(--rim),var(--shadow-card);
  margin-bottom:8px;padding:13px 16px;overflow:visible;
  transition:background .15s,transform .15s,box-shadow .15s;
}
.ag-card:hover{background:var(--paper-solid);transform:translateY(-2px);box-shadow:inset 0 1px 0 var(--rim),0 12px 30px rgba(var(--shade),.10)}
.ag-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* fila 1: habitación y huésped */
.ag-card-top{
  display:flex;align-items:baseline;gap:8px;
  padding:0;border:none;background:none;margin-bottom:7px;
}
.ag-card-room{font-size:0.9688rem;font-weight:650;color:var(--t-1);letter-spacing:-.01em;flex-shrink:0}
.ag-card-guest{
  font-size:0.9062rem;font-weight:400;color:var(--t-3);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ag-card-guest::before{content:'\00b7';margin-right:7px;color:var(--sep)}
.ag-chevron{
  width:7px;height:12px;flex-shrink:0;align-self:center;background:var(--sep);
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1.5 1.5 5 5-5 5'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1.5 1.5 5 5-5 5'/%3E%3C/svg%3E");
}
.ag-card:hover .ag-chevron{background:var(--accent2)}

/* fila 2: la estadía, leída de un vistazo */
.ag-card-stay{
  display:flex;align-items:center;gap:9px;
  font-size:0.8438rem;color:var(--t-2);margin-bottom:7px;flex-wrap:wrap;
}
.ag-stay-in,.ag-stay-out{font-weight:500}
.ag-stay-out{color:var(--t-4)}
.ag-stay-arrow{
  width:15px;height:10px;flex-shrink:0;background:var(--t-4);
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h19M15 2l6 6-6 6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h19M15 2l6 6-6 6'/%3E%3C/svg%3E");
}

/* fila 3: dinero y la acción destructiva, discreta */
.ag-card-money{
  display:flex;align-items:center;gap:10px;
  padding-top:9px;position:relative;
}
.ag-card-money::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:rgba(var(--ink),.07);
}
.ag-total{font-size:0.875rem;font-weight:600;color:var(--t-1);font-variant-numeric:tabular-nums}
.ag-saldo{font-size:0.8125rem;font-weight:500;font-variant-numeric:tabular-nums}
.ag-saldo.warn{color:var(--c-orange)}
.ag-saldo.ok{color:var(--c-green)}
.ag-saldo::before{content:'\00b7';margin-right:8px;color:var(--sep);font-weight:400}
.ag-cancel{
  margin-left:auto;flex-shrink:0;
  background:none;border:none;padding:4px 2px;
  font-family:inherit;font-size:0.8125rem;font-weight:500;color:var(--c-red);
  cursor:pointer;border-radius:8px;transition:color .15s;
}
.ag-cancel:hover{color:var(--c-red-dd);text-decoration:underline}
.ag-cancel:focus-visible{outline:2px solid var(--red);outline-offset:2px}

@media(max-width:480px){
  .ag-card{padding:12px 14px;border-radius:18px}
  .ag-card-room{font-size:0.9375rem}
  .ag-card-guest{font-size:0.875rem}
  .ag-card-stay{font-size:0.8125rem;gap:7px}
}

/* ══════════════════════════════════════════════════════════════
   FICHA DE HUÉSPED · cabecera y pie fijos, cuerpo desplazable
   La acción principal no debe perderse al bajar por el historial.
   ══════════════════════════════════════════════════════════════ */
.modal--guest{
  padding:0!important;
  display:flex!important;flex-direction:column!important;
  max-height:min(88dvh,780px)!important;
  overflow:hidden!important;
}
.modal--guest .rm-header{flex-shrink:0}
.modal--guest .rm-body--guest{
  flex:1;min-height:0;overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(var(--ink),.22) transparent;
  max-height:none;
}
.modal--guest .rm-footer{
  flex-shrink:0;padding:12px 18px;
  padding-bottom:max(12px,env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,rgba(var(--paper),.75),rgba(var(--paper),.92));
  -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  border-top:1px solid rgba(var(--ink),.08);
}
.modal--guest .rm-footer .btn-primary{border-radius:999px!important;min-height:48px;font-size:0.9062rem}

/* Barra de desplazamiento fina en todos los modales, no la del sistema */
.modal::-webkit-scrollbar,.rm-body::-webkit-scrollbar,
.modal--guest .rm-body--guest::-webkit-scrollbar{width:10px}
.modal::-webkit-scrollbar-thumb,.rm-body::-webkit-scrollbar-thumb,
.modal--guest .rm-body--guest::-webkit-scrollbar-thumb{
  background:rgba(var(--ink),.18);
  border:3px solid transparent;background-clip:content-box;border-radius:99px;
}
.modal::-webkit-scrollbar-thumb:hover,.rm-body::-webkit-scrollbar-thumb:hover,
.modal--guest .rm-body--guest::-webkit-scrollbar-thumb:hover{background:rgba(var(--ink),.3);background-clip:content-box}
.modal::-webkit-scrollbar-track,.rm-body::-webkit-scrollbar-track,
.modal--guest .rm-body--guest::-webkit-scrollbar-track{background:transparent}
.modal,.rm-body{scrollbar-width:thin;scrollbar-color:rgba(var(--ink),.22) transparent}

/* El campo de localidad libre ocupa media columna, no una fila entera */
#gd-ciudad-otra-wrap,#gd-pais-otra-wrap{max-width:calc(50% - 6px)}
@media(max-width:560px){
  #gd-ciudad-otra-wrap,#gd-pais-otra-wrap{max-width:none}
  .modal--guest{max-height:min(92dvh,860px)!important}
  .modal--guest .rm-footer{padding:11px 15px}
}

/* ── Altura de la aplicación ───────────────────────────────────
   El original encadena min-height: 100vh / 100dvh / 100svh /
   -webkit-fill-available. Gana la última, que se resuelve contra
   un body sin altura y deja la app más corta que la ventana: se
   veía una franja de fondo muerta abajo. Con html y body al 100%
   y una altura de viewport dinámica, la app llena la pantalla.  */
html{height:100%}
body{min-height:100%;background:var(--aurora-b)}
#app{
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh;
}
@supports not (height:100dvh){
  #app{height:100vh!important;min-height:100vh!important}
}

/* ══════════════════════════════════════════════════════════════
   DESCANSOS · rediseño
   Las celdas ya no se rellenan de color sólido con el nombre en
   blanco encima: el color tiñe el fondo y da color al texto, como
   en Calendario. Los contadores pasan a lista agrupada.
   ══════════════════════════════════════════════════════════════ */
.desc-header h2{font-size:1.375rem;font-weight:700;letter-spacing:-.03em}
.desc-header-icon{
  width:38px;height:38px;border-radius:13px;
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 50%),linear-gradient(135deg,#a78bfa,#7c3aed);
  border:1px solid rgba(var(--paper),.7);
  box-shadow:inset 0 1px 0 var(--rim),0 5px 14px rgba(124,58,237,.25);
}
.desc-header-icon svg{color:#fff}
.desc-nav{gap:4px}
.desc-nav-btn{
  width:34px;height:34px;border-radius:999px;
  background:rgba(var(--paper),.72);border:1px solid var(--lg-border);
  box-shadow:inset 0 1px 0 var(--rim);
}
.desc-nav-btn:hover{background:var(--paper-solid);transform:translateY(-1px)}
/* 'Septiembre De 2026' -> 'Septiembre de 2026' */
.desc-month{
  font-size:0.9688rem;font-weight:600;letter-spacing:-.02em;min-width:160px;
  text-transform:lowercase;
}
.desc-month::first-letter{text-transform:uppercase}

/* Contadores: lista agrupada, no tarjetas con versalitas */
.desc-resumen{
  display:block;gap:0;margin-bottom:14px;
  border-radius:16px;overflow:hidden;
  background:rgba(var(--paper),.92);border:1px solid var(--lg-border);
  box-shadow:inset 0 1px 0 var(--rim),var(--shadow-card);
}
.desc-resumen-card{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  background:none;border:none;border-radius:0;padding:12px 16px;
  min-width:0;position:relative;
}
.desc-resumen-card+.desc-resumen-card::before{
  content:'';position:absolute;top:0;left:16px;right:16px;height:1px;
  background:rgba(var(--ink),.07);
}
.desc-resumen-label{
  font-size:0.875rem;font-weight:400;color:var(--t-1);
  text-transform:none;letter-spacing:0;margin-bottom:0;
}
.desc-resumen-val{font-size:0.9375rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--t-1)}
.desc-resumen-val span{font-size:0.8125rem;font-weight:400;color:var(--t-4)}

/* Leyenda como chips */
.desc-legend{gap:6px;margin-bottom:12px;padding:0}
.desc-legend-item{
  gap:7px;font-size:0.7812rem;font-weight:500;color:var(--t-2);
  background:rgba(var(--paper),.6);border:1px solid rgba(var(--paper),.85);
  border-radius:999px;padding:5px 11px 5px 9px;
  box-shadow:inset 0 1px 0 var(--rim);
}
.desc-legend-dot{width:9px;height:9px;border-radius:999px;box-shadow:inset 0 1px 0 var(--rim)}

/* Calendario */
.desc-cal{
  background:rgba(var(--paper),.94);border:1px solid var(--lg-border);
  border-radius:20px;box-shadow:inset 0 1px 0 var(--rim),var(--shadow-card);margin-bottom:14px;
}
.desc-cal-head{background:none;border-bottom:1px solid rgba(var(--ink),.08)}
.desc-cal-head span{
  font-size:0.7188rem;font-weight:500;color:var(--t-4);
  text-transform:none;letter-spacing:0;padding:11px 4px;
}
.desc-day{
  min-height:66px;padding:6px;
  border-right:1px solid rgba(var(--ink),.055);
  border-bottom:1px solid rgba(var(--ink),.055);
}
.desc-cal-grid>.desc-day:nth-last-child(-n+7){border-bottom:none}
.desc-day:hover{background:rgba(124,58,237,.05)}
.desc-day.sunday{background:rgba(124,58,237,.025)}
.desc-day.today{background:none}
.desc-day-num{
  font-size:0.8125rem;font-weight:500;color:var(--t-2);margin-bottom:3px;
  font-variant-numeric:tabular-nums;
}
.desc-day.today .desc-day-num{
  background:linear-gradient(180deg,#fbbf24,#f59e0b);color:#fff;
  width:23px;height:23px;font-size:0.75rem;font-weight:650;
  box-shadow:inset 0 1px 0 var(--rim),0 2px 6px rgba(245,158,11,.35);
}
.desc-day.past{opacity:.45}

/* Día con descanso: tinte del color, no bloque sólido */
.desc-day.desc-taken{
  background:color-mix(in srgb,var(--desc-color) 15%,transparent)!important;
  color:inherit!important;
}
.desc-day.desc-taken:hover{background:color-mix(in srgb,var(--desc-color) 24%,transparent)!important}
.desc-day.desc-taken .desc-day-num{
  color:color-mix(in srgb,var(--desc-color) 78%,var(--t-1));font-weight:650;
}
.desc-day.desc-taken.today .desc-day-num{color:#fff}
/* marca lateral para distinguir de un simple fondo */
.desc-day.desc-taken::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--desc-color);
}
/* Nombre en el color, no blanco sobre relleno (solo dentro del calendario) */
.desc-day .desc-chip{
  font-size:0.6562rem;font-weight:550;line-height:1.5;
  padding:1px 0;border-radius:0;background:none!important;
  color:color-mix(in srgb,var(--chip-color,var(--t-4)) 80%,var(--t-1))!important;
  display:flex;align-items:center;gap:5px;
}
.desc-day .desc-chip::before{
  content:'';width:6px;height:6px;border-radius:999px;flex-shrink:0;
  background:var(--chip-color,var(--t-4));
}
.desc-day .desc-chip.me{outline:none;font-weight:700}
/* Etiqueta de rol en la lista de solicitudes: píldora tenue */
.desc-sol-card-name .desc-chip{
  font-size:0.6875rem;font-weight:550;padding:2px 8px;border-radius:999px;
  letter-spacing:0;text-transform:none;
}
.desc-sol-card-name .desc-chip.admin{background:rgba(99,102,241,.14)!important;color:var(--c-indigo-d)!important}
.desc-sol-card-name .desc-chip.recepcion{background:rgba(5,150,105,.14)!important;color:var(--c-green-d)!important}
.desc-sol-card-name .desc-chip.limpieza{background:rgba(202,138,4,.16)!important;color:var(--c-amber-dd)!important}
.desc-sol-card-name .desc-chip.mantenimiento{background:rgba(234,88,12,.14)!important;color:var(--c-orange-d)!important}

/* Solicitudes pendientes */
.desc-solicitudes{
  background:rgba(var(--paper),.92);border:1px solid var(--lg-border);
  border-radius:20px;box-shadow:inset 0 1px 0 var(--rim),var(--shadow-card);
  padding:6px 8px 8px;
}
.desc-solicitudes h3{
  font-size:0.8125rem;font-weight:600;color:var(--t-4);
  padding:11px 10px 9px;margin:0;
  border-bottom:1px solid rgba(var(--ink),.07);
}
/* Sin sombra: hereda una de la regla de tarjetas de contenido y, al quitarle
   el radio, proyectaba esquinas cuadradas dentro del contenedor redondeado. */
.desc-sol-card{
  background:none!important;border:none!important;box-shadow:none!important;
  border-radius:0!important;padding:12px 10px 10px;margin-bottom:0;
}
.desc-sol-card+.desc-sol-card{border-top:1px solid rgba(var(--ink),.07)}
.desc-sol-card-actions{gap:8px;margin-top:10px}
.desc-sol-card-actions{gap:14px;align-items:center}
.desc-sol-card-actions .btn{
  border-radius:999px!important;min-height:36px;font-size:0.8125rem;font-weight:550;
  padding:7px 18px!important;flex:0 0 auto;
}
.desc-sol-card-actions .btn-next-solid{
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 45%),linear-gradient(135deg,#34d399,#059669);
  box-shadow:inset 0 1px 0 var(--rim),0 4px 12px rgba(5,150,105,.22);
}
/* rechazar no compite: texto rojo, como cancelar en la agenda */
.desc-sol-card-actions .btn-danger{
  background:none!important;border:none!important;box-shadow:none!important;
  color:var(--c-red)!important;padding:7px 4px!important;font-weight:500;
}
.desc-sol-card-actions .btn-danger:hover{color:var(--c-red-dd)!important;text-decoration:underline;transform:none}

@media(max-width:560px){
  .desc-day{min-height:58px;padding:5px}
  .desc-day-num{font-size:0.75rem}
  .desc-chip{font-size:0.5938rem;gap:4px}
  .desc-chip::before{width:5px;height:5px}
  .desc-month{min-width:0;font-size:0.9062rem}
  .desc-cal-head span{font-size:0.6875rem;padding:9px 2px}
}
.desc-sol-card-name{font-size:0.875rem;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.desc-sol-card-dates{font-size:0.8125rem;color:var(--t-4);margin-bottom:0}

/* ── Cerrar siempre en rojo (convención del proyecto) ──────────
   La X de la esquina y el botón de cerrar comparten código de
   color: salir se reconoce igual en cualquier modal.            */
.rm-close,.modal-close{
  color:var(--c-red)!important;
  background:rgba(220,38,38,.09)!important;
  border:1px solid rgba(220,38,38,.18)!important;
  box-shadow:inset 0 1px 0 var(--rim)!important;
}
.rm-close:hover,.modal-close:hover{
  color:#fff!important;
  background:linear-gradient(135deg,#f87171,#dc2626)!important;
  border-color:rgba(220,38,38,.4)!important;
  box-shadow:inset 0 1px 0 var(--rim),0 4px 12px rgba(220,38,38,.28)!important;
}
.rm-close:focus-visible,.modal-close:focus-visible{outline:2px solid #dc2626;outline-offset:2px}

/* Botones de descarte del pie: cerrar y cancelar */
.btn-secondary.btn-cerrar,
.modal-actions .btn-cerrar,
.btn-row .btn-cerrar{
  background:rgba(220,38,38,.08)!important;
  color:var(--c-red-d)!important;
  border:1px solid rgba(220,38,38,.18)!important;
  box-shadow:inset 0 1px 0 var(--rim)!important;
}
.btn-cerrar:hover{
  background:rgba(220,38,38,.14)!important;color:var(--c-red-dd)!important;
  border-color:rgba(220,38,38,.3)!important;
}

/* ═══════════════════════════════════════════════════════════════
   CORRECCIONES DE LA AUDITORÍA HIG (2026-09-14)
   Medidas contra las guías, no por criterio propio.
   ═══════════════════════════════════════════════════════════════ */

/* 1 · Objetivos táctiles
   "Offer sufficiently sized controls. mobile 44x44 pt por defecto,
   28x28 pt mínimo." Los chips de la leyenda de ocupación filtran la
   rejilla y medían 30px de alto; el botón de piso, 37px. */
@media(pointer:coarse),(max-width:899px){
  .occ-item{min-height:44px;padding-top:0;padding-bottom:0}
  .floor-toggle{min-height:44px}
  .sidebar-toggle{width:44px;height:44px}
  .nav-btn{min-height:48px}
  .cal-nav-btn,.cal-refresh,.agenda-refresh,.desc-nav-btn{min-width:44px;min-height:44px}
  .rc-pill,.rc-price{min-height:auto}
  /* separación entre controles contiguos: la guía pide holgura, no solo tamaño */
  .occ-legend{gap:8px}
  .filters-bar-v2{gap:10px}
}

/* 2 · Liquid Glass fuera de la capa de contenido
   "Don't use Liquid Glass in the content layer. Including it in the
   content layer creates unnecessary complexity and confusing visual
   hierarchy." El vidrio queda solo en barra lateral, barra superior,
   navegación inferior, modales y avisos. */
.occ,.caja-header,.cal-toolbar,.cal-range-bar,.geo-ac-panel,
.room-search-input,.floor-toggle,.segment-control,
input,select,textarea,.turno-badge{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
.occ{background:rgba(var(--paper),.88)}
.caja-header,.cal-toolbar,.cal-range-bar{background:rgba(var(--paper),.92)}
.room-search-input,.floor-toggle{background-color:rgba(var(--paper),.92)}
.turno-badge{background:rgba(var(--paper),.9)}

/* 3 · Tamaño mínimo de texto
   "Minimum size: mobile 11 pt." Ningún texto informativo baja de ahí. */
.rc-estado-label,.sk-label,.caja-kpi-label,.desc-chip,
.rc-checkout-badge,.rc-payment-indicator,.tag,.seg-count{
  font-size:0.6875rem;
}

/* ── Barra de rango del calendario ─────────────────────────────
   Bug del original: `.cal-range-bar{display:flex}` le ganaba al
   atributo `hidden`, así que "Elegí el día de salida" salía nada
   más abrir el calendario, sin haber tocado ninguna celda.       */
.cal-range-bar[hidden]{display:none!important}


:root[data-theme="dark"]{
  --paper:24,33,52;
  --paper-solid:#182134;
  --rim:rgba(255,255,255,.06);
  --shade:0,0,0;
  --ink:148,163,184;
  --t-1:#f1f5f9;--t-2:#e2e8f0;--t-3:#cbd5e1;--t-4:#94a3b8;--t-5:#64748b;
  --sep:#334155;
  --av-a:#2b3850;--av-b:#1f2a3f;
  --aurora-a:#0b1220;--aurora-b:#0e1628;
  /* tokens del CSS original de cada panel, redefinidos para que sus
     componentes sin rediseñar también pasen a oscuro */
  --bg:#0b1220;--bg2:#111a2e;--bg3:#182134;--card:#151f33;
  --border:#243049;--border2:#334155;
  --text:#f1f5f9;--muted:#94a3b8;--muted2:#64748b;
  --accent-soft:rgba(14,165,233,.16);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 28px rgba(0,0,0,.45);
  --shadow-card:0 1px 2px rgba(0,0,0,.25),0 6px 20px rgba(0,0,0,.3);
  --lg-border:rgba(255,255,255,.08);
  --ag-border:rgba(255,255,255,.08);
  color-scheme:dark;
}

/* Ajustes oscuros de recepción: fondos aurora y componentes del CSS
   original que traían blanco fijo en lugar de tokens. */
:root[data-theme="dark"] body{background:#0b1220}
:root[data-theme="dark"] #app,:root[data-theme="dark"] #login-screen{
  background:
    radial-gradient(ellipse 70% 55% at 8% 0%,rgba(14,165,233,.16) 0%,transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 12%,rgba(139,92,246,.14) 0%,transparent 60%),
    radial-gradient(ellipse 70% 60% at 90% 100%,rgba(16,185,129,.12) 0%,transparent 60%),
    linear-gradient(180deg,var(--aurora-a) 0%,var(--aurora-b) 100%);
}
:root[data-theme="dark"] #app::before,:root[data-theme="dark"] #login-screen::before{opacity:.55}
:root[data-theme="dark"] .modal,:root[data-theme="dark"] .top-bar,:root[data-theme="dark"] .bottom-nav,
:root[data-theme="dark"] .cal-view,:root[data-theme="dark"] .cal-scroll,
:root[data-theme="dark"] .cal-matrix thead th,:root[data-theme="dark"] .cal-matrix .cal-room-h,
:root[data-theme="dark"] .cal-matrix .cal-day-h,:root[data-theme="dark"] .cal-matrix tbody tr:nth-child(even) .cal-room-h,
:root[data-theme="dark"] .movs-section,:root[data-theme="dark"] .caja-no-turno,
:root[data-theme="dark"] .desc-cal,:root[data-theme="dark"] .desc-solicitudes,:root[data-theme="dark"] .desc-resumen,
:root[data-theme="dark"] .guest-list,:root[data-theme="dark"] .ag-card,:root[data-theme="dark"] .room-card-v2,
:root[data-theme="dark"] .occ,:root[data-theme="dark"] .caja-header,:root[data-theme="dark"] .cal-toolbar{
  background:rgba(var(--paper),.88);
}
:root[data-theme="dark"] .room-card-v2:hover,:root[data-theme="dark"] .ag-card:hover{background:rgba(var(--paper),1)}
:root[data-theme="dark"] .cal-matrix .cal-day-h--today,:root[data-theme="dark"] .cal-matrix .cal-day-h--today small{color:#78350f}
:root[data-theme="dark"] .cal-matrix tbody tr:nth-child(even) td.cal-cell{background-color:rgba(255,255,255,.03)}
:root[data-theme="dark"] .cal-matrix tbody tr:nth-child(even) .cal-room-h{background:rgba(var(--paper),.95)}
.cal-toolbar h2{text-transform:none}
:root[data-theme="dark"] .cal-matrix .cal-day-h--weekend{color:#c4b5fd}
:root[data-theme="dark"] .cal-matrix .cal-day-h--weekend small{color:#a78bfa}
:root[data-theme="dark"] .cal-matrix tbody td.cal-cell{background-image:linear-gradient(to bottom,rgba(var(--ink),.18) 40%,transparent 40%)}
:root[data-theme="dark"] .cal-cell--bar.bar-cerrada .cal-cell-inner{background:linear-gradient(135deg,#475569,#334155);color:#e2e8f0}
:root[data-theme="dark"] .rc-guest-name,:root[data-theme="dark"] .gc-name,:root[data-theme="dark"] .ag-card-room,
:root[data-theme="dark"] .mov-desc,:root[data-theme="dark"] .rc-num,:root[data-theme="dark"] .rm-room-num,
:root[data-theme="dark"] .rm-guest-details dd,:root[data-theme="dark"] .rm-info-item-val,
:root[data-theme="dark"] .caja-kpi-val,:root[data-theme="dark"] .caja-kpi-label,:root[data-theme="dark"] .caja-kpi:not(.kpi-gold) .caja-kpi-label,
:root[data-theme="dark"] .desc-resumen-label,:root[data-theme="dark"] .desc-resumen-val,
:root[data-theme="dark"] .occ-figure,:root[data-theme="dark"] .occ-count,:root[data-theme="dark"] .rc-price{color:var(--t-1)}
:root[data-theme="dark"] .rm-info-item,:root[data-theme="dark"] .rm-timeline,:root[data-theme="dark"] .rm-guest-card,
:root[data-theme="dark"] .caja-kpi:not(.kpi-gold),:root[data-theme="dark"] .rc-pill,
:root[data-theme="dark"] .segment-control,:root[data-theme="dark"] .desc-day.today .desc-day-num{background:rgba(var(--ink),.12)}
:root[data-theme="dark"] .segment-btn.active,:root[data-theme="dark"] .occ-item.is-on,:root[data-theme="dark"] .floor-toggle.active,
:root[data-theme="dark"] .sidebar-link.active,:root[data-theme="dark"] .nav-btn.active{background:rgba(var(--paper),1);color:#7dd3fc}
:root[data-theme="dark"] .sidebar-link,:root[data-theme="dark"] .segment-btn,:root[data-theme="dark"] .occ-item{color:var(--t-2)}
:root[data-theme="dark"] .rc-estado-label.libre,:root[data-theme="dark"] .ag-saldo.ok,:root[data-theme="dark"] .caja-kpi-val.green{color:#34d399}
:root[data-theme="dark"] .rc-estado-label.ocupada,:root[data-theme="dark"] .caja-kpi-val.red{color:#f87171}
:root[data-theme="dark"] .rc-estado-label.limpieza{color:#fbbf24}
:root[data-theme="dark"] .rc-estado-label.mantenimiento,:root[data-theme="dark"] .ag-saldo.warn{color:#fb923c}
:root[data-theme="dark"] .caja-kpi-val.blue,:root[data-theme="dark"] .mov-monto.blue{color:#60a5fa}
:root[data-theme="dark"] .mov-monto.pos{color:#34d399}
:root[data-theme="dark"] .mov-monto.neg{color:#f87171}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea,:root[data-theme="dark"] #login-screen .inp{
  background-color:rgba(var(--paper),.9);color:var(--t-1);border-color:rgba(var(--ink),.22);
}
:root[data-theme="dark"] input::placeholder,:root[data-theme="dark"] #login-screen .inp::placeholder{color:var(--t-4)}
:root[data-theme="dark"] ::picker(select){background:rgba(var(--paper),.96)}
:root[data-theme="dark"] option{color:var(--t-1)}
:root[data-theme="dark"] .toast{background:rgba(var(--paper),.96);color:var(--t-1)}
:root[data-theme="dark"] .lbox{background:linear-gradient(160deg,rgba(var(--paper),.92),rgba(var(--paper),.8))}
:root[data-theme="dark"] .lbrand span{-webkit-text-fill-color:transparent}
:root[data-theme="dark"] .l-social-btn{background:rgba(var(--paper),.8);color:var(--t-1)}
:root[data-theme="dark"] .desc-day.desc-taken .desc-day-num{color:color-mix(in srgb,var(--desc-color) 70%,#fff)}
:root[data-theme="dark"] .desc-day .desc-chip{color:color-mix(in srgb,var(--chip-color,#94a3b8) 70%,#fff)!important}

/* Etiqueta solo para lectores de pantalla (la guía visual va en el placeholder) */
.lbl-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:root[data-theme="dark"] .turno-badge.abierto{color:#34d399;border-color:rgba(52,211,153,.35)}
:root[data-theme="dark"] .hotel-badge{color:#7dd3fc;background:rgba(14,165,233,.18)}
:root[data-theme="dark"] .rc-estado-label,:root[data-theme="dark"] .rm-status-chip{filter:brightness(1.35)}

/* Colores semánticos de texto: más luminosos en oscuro para mantener 4.5:1 sobre tintas */
:root{--c-red:#dc2626;--c-red-d:#b91c1c;--c-red-dd:#991b1b;--c-green:#059669;--c-green-d:#047857;--c-amber:#d97706;--c-amber-d:#b45309;--c-amber-dd:#92400e;--c-orange:#ea580c;--c-orange-d:#c2410c;--c-blue:#2563eb;--c-indigo-d:#4338ca;--c-indigo-l:#6366f1;--c-violet:#6d28d9;--c-violet-l:#8b5cf6;--tint-amber:rgba(254,243,199,.9);--tint-green:rgba(209,250,229,.85);--tint-sky:#e0f2fe}
:root[data-theme="dark"]{--c-red:#f87171;--c-red-d:#fca5a5;--c-red-dd:#fecaca;--c-green:#34d399;--c-green-d:#6ee7b7;--c-amber:#fbbf24;--c-amber-d:#fcd34d;--c-amber-dd:#fde68a;--c-orange:#fb923c;--c-orange-d:#fdba74;--c-blue:#60a5fa;--c-indigo-d:#c7d2fe;--c-indigo-l:#a5b4fc;--c-violet:#c4b5fd;--c-violet-l:#c4b5fd;--tint-amber:rgba(251,191,36,.18);--tint-green:rgba(52,211,153,.18);--tint-sky:rgba(56,189,248,.18)}

/* ── Modo oscuro · fila con switch en el menú lateral ─────────────
   Interruptor tipo iOS: pista 51×31, botón 27, verde del sistema al
   activar. El icono cambia sol/luna con el tema.                  */
.theme-row{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:8px;border-radius:14px;background:rgba(var(--ink),.045)}
.theme-row-ico{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;color:var(--t-3);flex-shrink:0}
.theme-row-ico svg{width:19px;height:19px}
.theme-row-ico .ico-moon{display:none}
:root[data-theme="dark"] .theme-row-ico .ico-sun{display:none}
:root[data-theme="dark"] .theme-row-ico .ico-moon{display:block;color:#fbbf24}
.theme-row-txt{flex:1;font-size:0.875rem;font-weight:500;color:var(--t-2);white-space:nowrap}
.theme-switch{position:relative;width:51px;height:31px;flex-shrink:0;border-radius:999px;padding:0;border:0;cursor:pointer;
  background:rgba(var(--ink),.22);box-shadow:inset 0 0 0 1px rgba(var(--ink),.06);transition:background .25s cubic-bezier(.2,.8,.2,1)}
.theme-switch-knob{position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.28),0 1px 1px rgba(0,0,0,.12);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.theme-switch[aria-checked="true"]{background:#34c759}
.theme-switch[aria-checked="true"] .theme-switch-knob{transform:translateX(20px)}
.theme-switch:focus-visible{outline:2px solid var(--accent,#0ea5e9);outline-offset:2px}
.theme-switch:active .theme-switch-knob{width:31px}
.theme-switch[aria-checked="true"]:active .theme-switch-knob{transform:translateX(16px)}
@media(prefers-reduced-motion:reduce){.theme-switch,.theme-switch-knob{transition:none}}

/* ── Oscuro · modal de habitación ─────────────────────────────────
   Las tintas pastel de la cabecera (menta, rosa…) sobre fondo oscuro
   daban un gris verdoso sucio. En oscuro el color entra como un halo
   de baja opacidad y las fichas se separan por borde, no por relleno. */
:root[data-theme="dark"] .modal{background:rgba(24,33,52,.97)}
:root[data-theme="dark"] .rm-header .rm-header-bg{background:linear-gradient(160deg,var(--rm-halo) 0%,transparent 62%)}
:root[data-theme="dark"] .rm-header.libre{--rm-halo:rgba(52,211,153,.14)}
:root[data-theme="dark"] .rm-header.ocupada{--rm-halo:rgba(248,113,113,.14)}
:root[data-theme="dark"] .rm-header.limpieza{--rm-halo:rgba(251,191,36,.14)}
:root[data-theme="dark"] .rm-header.mantenimiento{--rm-halo:rgba(251,146,60,.14)}
:root[data-theme="dark"] .rm-header.bloqueada{--rm-halo:rgba(148,163,184,.14)}
:root[data-theme="dark"] .rm-icon{border-color:rgba(255,255,255,.14)}
:root[data-theme="dark"] .rm-info-item{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
:root[data-theme="dark"] .rm-info-item-label{color:var(--t-4)}
:root[data-theme="dark"] .rm-info-item-val{color:var(--t-1)}
:root[data-theme="dark"] .rm-actions-secondary .btn,:root[data-theme="dark"] .rm-actions-secondary .btn.act-limpieza,
:root[data-theme="dark"] .rm-actions-secondary .btn.act-mant,:root[data-theme="dark"] .rm-actions-secondary .btn.act-bloquear{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);color:var(--t-2);box-shadow:none;
}
:root[data-theme="dark"] .rm-actions-secondary .btn:hover{background:rgba(255,255,255,.09)}
:root[data-theme="dark"] .rm-status-chip,:root[data-theme="dark"] .rc-estado-label{filter:none}
:root[data-theme="dark"] .rm-status-chip.libre{color:#34d399;background:rgba(52,211,153,.16)}
:root[data-theme="dark"] .rm-status-chip.ocupada{color:#f87171;background:rgba(248,113,113,.16)}
:root[data-theme="dark"] .rm-status-chip.limpieza{color:#fbbf24;background:rgba(251,191,36,.16)}
:root[data-theme="dark"] .rm-status-chip.mantenimiento{color:#fb923c;background:rgba(251,146,60,.16)}
:root[data-theme="dark"] .rm-status-chip.bloqueada{color:var(--t-3);background:rgba(148,163,184,.16)}
:root[data-theme="dark"] .rm-close{background:rgba(248,113,113,.16)}

/* ── Oscuro · asistentes de check-in y reserva (modal--reserva) ─────
   El CSS original pinta la cabecera en azul pastel y los bloques en
   blanco; aquí pasan a superficie oscura con halo azul suave.        */
:root[data-theme="dark"] .modal--reserva .wiz-top{background:linear-gradient(135deg,rgba(59,130,246,.18),rgba(var(--paper),0) 70%);border-bottom-color:rgba(255,255,255,.08)}
:root[data-theme="dark"] .modal--reserva .wiz-pill{color:#93c5fd;background:rgba(59,130,246,.18)}
:root[data-theme="dark"] .modal--reserva .wiz-close.modal-close{background:rgba(248,113,113,.16);border-color:transparent;color:#f87171}
:root[data-theme="dark"] .modal--reserva .wiz-close.modal-close:hover{background:rgba(248,113,113,.26);color:#fca5a5}
:root[data-theme="dark"] .modal--reserva .wiz-banner,:root[data-theme="dark"] .modal--reserva .rf-progress,:root[data-theme="dark"] .modal--reserva .ci-progress{background:transparent;border-bottom-color:rgba(255,255,255,.08)}
:root[data-theme="dark"] .modal--reserva .rf-progress::before,:root[data-theme="dark"] .modal--reserva .ci-progress::before{background:rgba(255,255,255,.12)}
:root[data-theme="dark"] .modal--reserva .ci-block,:root[data-theme="dark"] .modal--reserva .rf-block,:root[data-theme="dark"] .modal--reserva .precio-preview{
  background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);
}
:root[data-theme="dark"] .modal--reserva .ci-block-title{color:var(--t-4);border-bottom-color:rgba(255,255,255,.08)}
:root[data-theme="dark"] .modal--reserva .wiz-banner-warn{background:rgba(251,146,60,.12);border-color:rgba(251,146,60,.28);color:#fdba74}
:root[data-theme="dark"] .modal--reserva .wiz-banner-warn strong{color:#fdba74}
:root[data-theme="dark"] .counter-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:var(--t-1)}
:root[data-theme="dark"] .pay-tab{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:var(--t-3)}
:root[data-theme="dark"] .pay-tab.active{background:rgba(14,165,233,.2);border-color:rgba(56,189,248,.4);color:#7dd3fc}
:root[data-theme="dark"] .ci-vuelto-display{background:rgba(52,211,153,.12);color:#34d399}
:root[data-theme="dark"] .rf-dot-num,:root[data-theme="dark"] .ci-dot-num{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:var(--t-3)}
:root[data-theme="dark"] .rf-dot.active .rf-dot-num,:root[data-theme="dark"] .ci-dot.active .ci-dot-num{background:var(--accent);border-color:var(--accent);color:#fff}
:root[data-theme="dark"] .rf-dot.active .rf-dot-label,:root[data-theme="dark"] .ci-dot.active .ci-dot-label{color:#7dd3fc}

/* ═══ Funciones 2026-09 · alertas, limpieza, WhatsApp, tarifa, conteo ═══ */
.alertas-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.alerta-chip{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:6px 14px 6px 8px;border-radius:999px;border:1px solid var(--lg-border);
  background:rgba(var(--paper),.7);box-shadow:inset 0 1px 0 var(--rim);font:inherit;font-size:.8125rem;font-weight:500;color:var(--t-2);cursor:pointer;transition:transform .15s,background .15s}
.alerta-chip:hover{transform:translateY(-1px);background:var(--paper-solid)}
.alerta-chip strong{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;color:#fff;font-size:.75rem;font-weight:700}
.alerta-chip.al-sky strong{background:#0ea5e9}.alerta-chip.al-red strong{background:#dc2626}.alerta-chip.al-amber strong{background:#d97706}
.alerta-chip.al-violet strong{background:#7c3aed}.alerta-chip.al-green strong{background:#059669}
.nav-badge{position:absolute;top:6px;right:10px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#dc2626;color:#fff;font-size:.6875rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.nav-badge[hidden]{display:none}
.sidebar-link{position:relative}
.modal--alertas{max-width:520px}
.al-sec{margin-bottom:10px}
.al-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid rgba(var(--ink),.07)}
.al-row:last-child{border-bottom:0}
.al-main{font-weight:600;font-size:.875rem;color:var(--t-1)}
.al-sub{font-size:.8125rem;color:var(--t-4);margin-top:2px}
.btn-wa{width:38px;height:38px;border-radius:999px;border:0;background:rgba(37,211,102,.16);color:#16a34a;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .15s,transform .15s}
.btn-wa:hover{background:rgba(37,211,102,.28);transform:translateY(-1px)}
.btn-wa svg{width:20px;height:20px}
:root[data-theme="dark"] .btn-wa{color:#4ade80}
.ag-card-money .btn-wa{margin-left:auto}
.limpieza-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.limpieza-kpi{display:flex;gap:16px;font-size:.8125rem;color:var(--t-4)}
.limpieza-kpi strong{color:var(--t-1);font-size:1rem;margin-right:4px}
.hk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.hk-card{background:rgba(var(--paper),.82);border:1px solid var(--lg-border);border-radius:20px;padding:14px 16px;box-shadow:inset 0 1px 0 var(--rim)}
.hk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.hk-room{font-weight:700;font-size:1rem;color:var(--t-1)}
.hk-meta{font-size:.75rem;color:var(--t-4)}
.hk-prog{width:92px;height:6px;border-radius:999px;background:rgba(var(--ink),.1);overflow:hidden}
.hk-prog span{display:block;height:100%;background:linear-gradient(90deg,#34d399,#059669);transition:width .25s}
.hk-list{list-style:none;margin:0 0 12px;padding:0}
.hk-item label{display:flex;align-items:center;gap:10px;min-height:40px;font-size:.875rem;color:var(--t-2);cursor:pointer}
.hk-item input{width:20px;height:20px;accent-color:#059669;flex-shrink:0}
.hk-item.is-done span{text-decoration:line-through;color:var(--t-4)}
.hk-actions{display:flex;gap:8px}
.hk-actions .btn{flex:1;min-height:42px;border-radius:12px}
.tarifa-sug{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 6px;padding:10px 12px;border-radius:12px;background:rgba(14,165,233,.09);border:1px solid rgba(14,165,233,.22)}
.tarifa-sug-l{display:block;font-size:.6875rem;color:var(--t-4)}
.tarifa-sug strong{font-size:1rem;color:var(--t-1);margin-right:6px}
.tarifa-sug small{font-size:.75rem;color:var(--t-4)}
.tarifa-sug .btn{min-height:36px;padding:6px 14px;border-radius:999px}
.cc-icon{background:linear-gradient(135deg,#60a5fa,#2563eb);color:#fff}
.cc-lead{font-size:.8438rem;color:var(--t-3);line-height:1.5;margin:0 0 14px}
.cc-result{border-radius:14px;padding:12px 14px;margin-bottom:14px;border:1px solid transparent}
.cc-result.ok{background:rgba(5,150,105,.1);border-color:rgba(5,150,105,.25)}
.cc-result.sobra{background:rgba(37,99,235,.1);border-color:rgba(37,99,235,.25)}
.cc-result.falta{background:rgba(220,38,38,.1);border-color:rgba(220,38,38,.25)}
.cc-row{display:flex;justify-content:space-between;font-size:.8438rem;padding:3px 0;color:var(--t-2)}
.cc-dif{border-top:1px solid rgba(var(--ink),.1);margin-top:4px;padding-top:8px;font-weight:700;color:var(--t-1)}
.cc-result.falta .cc-dif strong{color:var(--c-red)}.cc-result.sobra .cc-dif strong{color:var(--c-blue)}.cc-result.ok .cc-dif strong{color:var(--c-green)}
.lang-row{display:flex;gap:6px;padding:4px 12px 8px}
.lang-btn{flex:1;min-height:32px;border-radius:999px;border:1px solid var(--lg-border);background:rgba(var(--paper),.5);font:inherit;font-size:.75rem;font-weight:600;color:var(--t-3);cursor:pointer}
.lang-btn.is-on{background:var(--paper-solid);color:var(--accent2);box-shadow:inset 0 1px 0 var(--rim)}

/* ═══ Oscuro · más vidrio ═══════════════════════════════════════
   Con superficies al 88 % y aurora tenue el material se leía como
   cartón gris. En oscuro el vidrio se ve por contraste: fondo con
   color real detrás, capas funcionales al 55–62 % con blur alto y
   un canto de luz visible.                                        */
:root[data-theme="dark"]{--rim:rgba(255,255,255,.14)}
:root[data-theme="dark"] #app,:root[data-theme="dark"] #login-screen{
  background:
    radial-gradient(ellipse 60% 50% at 6% 4%,rgba(14,165,233,.42) 0%,transparent 60%),
    radial-gradient(ellipse 55% 45% at 96% 10%,rgba(139,92,246,.40) 0%,transparent 60%),
    radial-gradient(ellipse 60% 50% at 88% 96%,rgba(16,185,129,.30) 0%,transparent 60%),
    radial-gradient(ellipse 50% 40% at 20% 90%,rgba(245,158,11,.20) 0%,transparent 60%),
    linear-gradient(180deg,#0b1220 0%,#0e1628 100%);
}
:root[data-theme="dark"] #app::before,:root[data-theme="dark"] #login-screen::before{opacity:.9}
:root[data-theme="dark"] .top-bar,:root[data-theme="dark"] .bottom-nav,:root[data-theme="dark"] .app-sidebar{
  background:rgba(var(--paper),.55);backdrop-filter:blur(28px) saturate(1.6);-webkit-backdrop-filter:blur(28px) saturate(1.6);
  border-color:rgba(255,255,255,.10);box-shadow:inset 0 1px 0 var(--rim),0 10px 40px rgba(0,0,0,.35);
}
:root[data-theme="dark"] .modal{background:rgba(var(--paper),.72);backdrop-filter:blur(34px) saturate(1.6);-webkit-backdrop-filter:blur(34px) saturate(1.6);
  border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 var(--rim),0 30px 80px rgba(0,0,0,.55)}
:root[data-theme="dark"] .modal-bg{background:rgba(5,9,18,.55)}
:root[data-theme="dark"] .room-card-v2,:root[data-theme="dark"] .ag-card,:root[data-theme="dark"] .guest-list,:root[data-theme="dark"] .occ,
:root[data-theme="dark"] .caja-header,:root[data-theme="dark"] .movs-section,:root[data-theme="dark"] .cal-view,:root[data-theme="dark"] .cal-toolbar,
:root[data-theme="dark"] .desc-cal,:root[data-theme="dark"] .desc-solicitudes,:root[data-theme="dark"] .desc-resumen,:root[data-theme="dark"] .hk-card,
:root[data-theme="dark"] .caja-no-turno,:root[data-theme="dark"] .caja-kpi:not(.kpi-gold){
  background:rgba(var(--paper),.62);border-color:rgba(255,255,255,.09);box-shadow:inset 0 1px 0 var(--rim),0 8px 24px rgba(0,0,0,.22);
}
:root[data-theme="dark"] .room-card-v2:hover,:root[data-theme="dark"] .ag-card:hover{background:rgba(var(--paper),.8)}
:root[data-theme="dark"] .cal-scroll,:root[data-theme="dark"] .cal-matrix thead th,:root[data-theme="dark"] .cal-matrix .cal-room-h,:root[data-theme="dark"] .cal-matrix .cal-day-h{background:rgba(var(--paper),.7)}
:root[data-theme="dark"] .lbox{background:linear-gradient(160deg,rgba(var(--paper),.7),rgba(var(--paper),.55));border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(30px) saturate(1.5);-webkit-backdrop-filter:blur(30px) saturate(1.5)}
:root[data-theme="dark"] .toast{background:rgba(var(--paper),.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.12)}
:root[data-theme="dark"] .sidebar-link.active,:root[data-theme="dark"] .nav-btn.active,:root[data-theme="dark"] .segment-btn.active,:root[data-theme="dark"] .occ-item.is-on{background:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 var(--rim)}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea,:root[data-theme="dark"] #login-screen .inp{background-color:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
@media(prefers-reduced-transparency:reduce){
  :root[data-theme="dark"] .top-bar,:root[data-theme="dark"] .bottom-nav,:root[data-theme="dark"] .app-sidebar,:root[data-theme="dark"] .modal{background:rgba(var(--paper),.96);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ═══ Novedades (campana) ═══════════════════════════════════════ */
.news-bell{position:relative;width:40px;height:40px;border-radius:999px;margin-right:8px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(var(--paper),.62);border:1px solid var(--lg-border,var(--ag-border));box-shadow:inset 0 1px 0 var(--rim);color:var(--t-2);cursor:pointer;transition:background .15s,transform .15s,color .15s}
.news-bell:hover{background:var(--paper-solid);transform:translateY(-1px);color:var(--accent2,var(--ag-accent-2))}
.news-bell svg{width:19px;height:19px}
.news-bell-dot{position:absolute;top:7px;right:8px;width:9px;height:9px;border-radius:999px;background:#dc2626;box-shadow:0 0 0 2px var(--paper-solid)}
.news-bell-dot[hidden]{display:none}
@media(pointer:coarse){.news-bell{width:44px;height:44px}}
.modal--news{max-width:560px;padding:0!important;overflow:hidden}
.news-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 22px 14px;background:linear-gradient(160deg,rgba(14,165,233,.14),rgba(var(--paper),0) 75%)}
.news-kicker{margin:0 0 2px;font-size:.8125rem;color:var(--t-4)}
.news-title{margin:0;font-size:1.25rem;font-weight:700;letter-spacing:-.02em;color:var(--t-1)}
.news-close{width:34px;height:34px;border-radius:999px;border:0;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:rgba(220,38,38,.12);color:var(--c-red);cursor:pointer}
.news-body{padding:4px 22px 8px;max-height:min(60vh,520px);overflow-y:auto}
.news-intro{font-size:.875rem;color:var(--t-3);line-height:1.55;margin:0 0 14px}
.news-group{margin-bottom:14px}
.news-group h3{margin:0 0 6px;font-size:.8125rem;font-weight:600;color:var(--t-4)}
.news-group ul{margin:0;padding-left:18px;font-size:.875rem;color:var(--t-2);line-height:1.5}
.news-group li{margin:3px 0}
.news-foot{padding:12px 22px 18px;display:flex;justify-content:flex-end}
.news-foot .btn{min-width:140px;border-radius:999px}

/* Cabeceras de modal por clase (antes: estilos inline en JS) */
.rm-header--guest .rm-header-bg{background:linear-gradient(160deg,rgba(219,234,254,.9) 0%,rgba(var(--paper),0) 70%)}
.rm-header--guest .rm-icon{--rm-grad:linear-gradient(135deg,#60a5fa,#3b82f6);font-size:1rem;font-weight:800;color:#fff}
.rm-header--cierre .rm-header-bg{background:linear-gradient(160deg,rgba(254,226,226,.9) 0%,rgba(var(--paper),0) 70%)}
.rm-header--cierre .rm-icon{--rm-grad:linear-gradient(135deg,#f87171,#dc2626);color:#fff}
:root[data-theme="dark"] .rm-header--guest{--rm-halo:rgba(96,165,250,.16)}
:root[data-theme="dark"] .rm-header--cierre{--rm-halo:rgba(248,113,113,.16)}
:root[data-theme="dark"] .modal--news{background:rgba(var(--paper),.9)}

/* Check-out: aviso de "todo pagado" y cobro solo cuando hay saldo */
.co-pagado{margin-top:14px;padding:12px 14px;border-radius:12px;background:rgba(5,150,105,.1);border:1px solid rgba(5,150,105,.25);color:var(--c-green);font-size:.875rem;font-weight:600}
#co-pago.is-over{border-color:var(--c-red);box-shadow:0 0 0 3px rgba(220,38,38,.15)}
.caja-kpi-val.orange{color:var(--c-orange)}
.caja-kpi.kpi-orange .caja-kpi-label{color:var(--t-4)}