/* ==================================================================
   ARGRESIDENCE — CAPA v10 · "SUAVE Y LIMPIA"
   ------------------------------------------------------------------
   Se carga después de style.css y no borra nada: ajusta. La v7 trajo
   carácter (tipografía, degradés, movimiento); con el tiempo la suma de
   capas dejó demasiadas cosas compitiendo: botones de seis colores en
   una misma ficha, bordes fuertes, sombras en reposo, rojo donde no
   había un problema. Esta capa baja el volumen.

   Reglas (ver DESIGN.md §9):
     1. El color informa, no decora. Un solo acento por pantalla; verde,
        ámbar y rojo quedan para estado.
     2. Tres niveles de botón y nada más: primario (tinta), secundario
        (blanco con borde) y tonal (tinte suave). El rojo sólo en lo que
        destruye.
     3. Superficies planas, bordes finos, sombra sólo en lo que flota.
     4. Más aire, menos líneas. Radios más amplios y parejos.
     5. Movimiento corto y sereno: nada rebota porque sí.
   ================================================================== */

:root{
  /* Lienzo apenas más claro y neutro; superficies blancas limpias */
  --color-bg: #f7f7f4; --bg-canvas: #f7f7f4;
  --color-surface-2: #f3f3ef;
  --color-border: #e9e7e0; --color-border-strong: #d9d6cd; --color-border-light: #f0eee8;
  --hairline: rgba(14,33,72,.075); --hairline-strong: rgba(14,33,72,.12);
  --color-text: #171a20; --color-text-secondary: #434a57; --color-text-muted: #6b7382; --color-text-subtle: #9aa2ae;

  /* Sombras: más difusas y más livianas */
  --shadow-xs: 0 1px 2px rgba(14,33,72,.04);
  --shadow-sm: 0 1px 2px rgba(14,33,72,.04), 0 6px 16px -6px rgba(14,33,72,.06);
  --shadow-md: 0 2px 6px rgba(14,33,72,.05), 0 14px 32px -10px rgba(14,33,72,.12);
  --shadow-lg: 0 8px 20px rgba(14,33,72,.06), 0 32px 70px -18px rgba(14,33,72,.22);
  --shadow-raised: 0 1px 2px rgba(14,33,72,.04), 0 8px 20px -8px rgba(14,33,72,.08);
  --shadow-elevated: 0 4px 10px rgba(14,33,72,.05), 0 22px 48px -14px rgba(14,33,72,.16);
  --shadow-raised-0: 0 1px 2px rgba(14,33,72,0), 0 8px 20px -8px rgba(14,33,72,0);
  --shadow-elevated-0: 0 4px 10px rgba(14,33,72,0), 0 22px 48px -14px rgba(14,33,72,0);

  /* Radios: un escalón más amplios */
  --radius: 12px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 26px;

  /* Movimiento: sereno */
  --ease-spring: cubic-bezier(.3, 1.25, .5, 1);
  --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 360ms;

  /* Tonos de estado (fondo suave + tinta) para botones y avisos tonales */
  --tone-blue-bg: #eef3fe;  --tone-blue-ink: #1d4ed8;
  --tone-green-bg: #e8f7ef; --tone-green-ink: #0b7d53;
  --tone-amber-bg: #fdf3df; --tone-amber-ink: #9a5b00;
  --tone-red-bg: #fdeeed;   --tone-red-ink: #c9302a;
  --tone-violet-bg: #f1ebfd;--tone-violet-ink: #6233c9;
  --tone-slate-bg: #f1f3f6; --tone-slate-ink: #3d4757;
  --focus-ring: 0 0 0 3px rgba(37,99,235,.18);
}

/* ------------------------------------------------------------------
   BASE
   ------------------------------------------------------------------ */
body{
  font-size: 14px;
  background:
    radial-gradient(1200px 560px at 86% -12%, rgba(79,156,240,.07) 0%, transparent 62%),
    var(--bg-canvas);
  background-attachment: fixed;
}
::selection{ background: rgba(37,99,235,.18); }
*{ scrollbar-width: thin; scrollbar-color: #d6d9e0 transparent; }
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb{ background: #d6d9e0; border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover{ background: #b9bfca; background-clip: content-box; border: 3px solid transparent; }
*::-webkit-scrollbar-track{ background: transparent; }
:focus-visible{ outline: 2px solid rgba(37,99,235,.55); outline-offset: 2px; border-radius: 8px; }
button:focus:not(:focus-visible){ outline: none; }
kbd{ font-family: var(--font-body); }
.app{ padding: 12px 14px 0; }

/* ------------------------------------------------------------------
   BARRA SUPERIOR — plana, con la navegación en pastillas
   ------------------------------------------------------------------ */
.topbar{
  min-height: 54px; padding: 0 10px 0 16px; gap: 10px; margin-bottom: 12px;
  border-radius: 18px; border: 1px solid var(--hairline);
  background: rgba(255,255,255,.86); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: var(--shadow-sm);
}
.topbar-panels{ gap: 10px; }
.logo{ font-size: 16px; font-weight: 750; letter-spacing: -.03em; margin-right: 6px; }
.section-nav{ border-bottom: 0; gap: 2px; align-self: center; }
.snav-btn{
  height: 34px; padding: 0 13px; border-radius: 999px;
  font-family: var(--font-body); font-size: 13px; font-weight: 550; letter-spacing: 0;
  color: var(--color-text-muted);
}
.snav-btn::after{ display: none; }
.snav-btn:not(.active):hover{ background: var(--color-surface-2); color: var(--color-text); }
.snav-btn.active{ background: var(--color-primary); color: #fff; font-weight: 650; }
#snav-super{ background: var(--tone-violet-bg) !important; color: var(--tone-violet-ink) !important; }
#snav-super.active{ background: var(--tone-violet-ink) !important; color: #fff !important; }
.topbar-right{ gap: 6px; flex-wrap: nowrap; }

/* Búsqueda */
.topbar-search{ position: relative; display: flex; align-items: center; }
.tsearch{ position: relative; display: flex; align-items: center; }
.tsearch-ic{ position: absolute; left: 12px; width: 15px; height: 15px; stroke: var(--color-text-subtle); fill: none; stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.topbar-search input[type="search"]{
  width: clamp(170px, 19vw, 300px) !important; height: 36px; padding: 0 58px 0 34px;
  border-radius: 999px; border: 1px solid transparent; background: var(--color-surface-2);
  font: 400 13px var(--font-body); color: var(--color-text); outline: none;
}
.topbar-search input[type="search"]::-webkit-search-cancel-button{ display: none; }
.topbar-search input[type="search"]:hover{ background: #eeeee9; }
.topbar-search input[type="search"]:focus{ background: #fff; border-color: rgba(37,99,235,.5); box-shadow: var(--focus-ring); }
.tsearch-kbd{ position: absolute; right: 10px; font-size: 10px; font-weight: 600; color: var(--color-text-subtle); padding: 3px 6px; border-radius: 6px; background: #fff; border: 1px solid var(--color-border); pointer-events: none; }
.tsearch:focus-within .tsearch-kbd{ opacity: 0; }
.tsearch-results{
  position: absolute; top: 44px; right: 0; width: 400px; max-width: 92vw; max-height: 380px; overflow: auto;
  background: #fff; border: 1px solid var(--hairline); border-radius: 16px; box-shadow: var(--shadow-lg); z-index: 150; padding: 6px;
}
.tsearch-results > div{ border-radius: 10px; border-bottom: 0 !important; }
/* Filtros de tiempo: sólo mientras se busca */
.tsearch-filters{ display: none; position: absolute; top: 44px; right: 0; z-index: 151; gap: 4px; padding: 6px 8px; background: #fff; border-radius: 12px 12px 0 0; }
.topbar-search:has(#search-input:not(:placeholder-shown)) .tsearch-filters{ display: flex; }
.topbar-search:has(#search-input:not(:placeholder-shown)) .tsearch-results{ top: 78px; border-top-left-radius: 0; border-top-right-radius: 0; }
.topbar-search:has(#search-input:not(:placeholder-shown)) .tsearch-filters{ width: 400px; max-width: 92vw; border: 1px solid var(--hairline); border-bottom: 0; }
.snav-btn.flt{ height: 24px; padding: 0 10px; font-size: 11px; background: var(--color-surface-2); color: var(--color-text-muted); }
.snav-btn.flt.active{ background: var(--tone-blue-bg); color: var(--tone-blue-ink); }
@media (max-width: 1240px){ .topbar-search #flt-past{ display: inline-flex; } }
@media (max-width: 1080px){ .topbar-search #flt-current, .topbar-search #flt-future{ display: inline-flex; } }
@media (max-width: 1280px){ .tsearch-kbd{ display: none; } .topbar-search input[type="search"]{ padding-right: 14px; width: clamp(130px, 15vw, 220px) !important; } }

/* Botones de icono de la barra: un solo estilo */
.voice-btn{
  width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--color-text-secondary);
}
.voice-btn svg{ width: 18px; height: 18px; stroke-width: 1.8; }
.voice-btn:hover{ background: var(--color-surface-2); color: var(--color-text); border: 0; transform: none; }
.voice-btn.listening{ background: var(--tone-violet-bg); color: var(--tone-violet-ink); }
#snav-settings.active{ background: var(--color-primary); color: #fff; }
.notif-badge{ border: 2px solid #fff; }

/* Menú de la persona */
.user-menu{ position: relative; margin-left: 2px; }
.user-btn{ display: inline-flex; align-items: center; gap: 8px; padding: 3px; border: 0; background: transparent; border-radius: 999px; cursor: pointer; }
.user-btn:hover{ background: var(--color-surface-2); }
.user-ava{
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  font: 700 12px/1 var(--font-body); letter-spacing: .02em; color: #fff;
  background: linear-gradient(135deg, #24406f, #2f6bf0);
}
.user-ava.lg{ width: 40px; height: 40px; font-size: 14px; }
.user-pop{
  position: absolute; top: 46px; right: 0; width: 264px; z-index: 160; padding: 6px;
  background: #fff; border: 1px solid var(--hairline); border-radius: 16px; box-shadow: var(--shadow-lg);
  animation: soft-pop .16s var(--ease-out) both; transform-origin: top right;
}
.user-pop[hidden]{ display: none; }
.user-pop-head{ display: flex; gap: 11px; align-items: center; padding: 10px 10px 12px; }
.user-pop-head b{ display: block; font: 650 14px/1.2 var(--font-body); color: var(--color-text); }
.user-pop-head span:not(.user-ava){ font-size: 11.5px; color: var(--color-text-muted); }
.user-pop > button{
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none; cursor: pointer;
  border-radius: 10px; font: 500 13px var(--font-body); color: var(--color-text-secondary); text-align: left;
}
.user-pop > button svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.user-pop > button:hover{ background: var(--color-surface-2); color: var(--color-text); }
.user-pop > button.danger{ color: var(--tone-red-ink); }
.user-pop > button.danger:hover{ background: var(--tone-red-bg); }
.user-pop > button kbd{ margin-left: auto; font-size: 10.5px; font-weight: 600; padding: 2px 6px; border-radius: 6px; background: var(--color-surface-2); color: var(--color-text-muted); }
.user-pop hr{ border: 0; border-top: 1px solid var(--hairline); margin: 6px 4px; }
@keyframes soft-pop{ from{ opacity: 0; transform: translateY(-6px) scale(.97); } to{ opacity: 1; transform: none; } }

/* Atajos */
.sc-sub{ font-size: 12.5px; color: var(--color-text-muted); margin: -6px 0 14px; }
.sc-group{ margin-bottom: 14px; }
.sc-title{ display: block; font: 700 10.5px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-subtle); margin-bottom: 6px; }
.sc-row{ display: flex; align-items: center; gap: 14px; padding: 7px 0; border-top: 1px solid var(--hairline); font-size: 13px; color: var(--color-text-secondary); }
.sc-keys{ display: inline-flex; gap: 4px; min-width: 92px; }
.sc-keys kbd{ min-width: 26px; text-align: center; font-size: 11px; font-weight: 650; padding: 4px 7px; border-radius: 7px; background: #fff; border: 1px solid var(--color-border-strong); box-shadow: 0 1.5px 0 var(--color-border-strong); color: var(--color-text); }

/* ------------------------------------------------------------------
   BOTONES — tres niveles
   ------------------------------------------------------------------ */
.nbtn, .mb, .st-btn, .ac-btn{ letter-spacing: 0; }
/* quitar el barrido blanco de la v7.3: en superficies planas ya no hace falta */
.nbtn::after, .mb.primary::after, .mb.green::after{ display: none !important; }
.nbtn:hover, .mb.primary:hover, .mb.green:hover{ transform: none; }

.nbtn{
  height: 36px; padding: 0 16px; border-radius: 999px; font: 650 13px/1 var(--font-body);
  background: var(--color-primary); box-shadow: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.nbtn:hover{ background: #16305f; }
.nbtn:active{ transform: scale(.98); }
.nbtn.green{ background: var(--color-primary); }
.nbtn.green:hover{ background: #16305f; }
.login-card .nbtn{ height: 46px; box-shadow: 0 8px 22px rgba(14,33,72,.2); }

.mb{
  min-height: 36px; padding: 0 15px; border-radius: 999px; font: 600 13px/1 var(--font-body);
  border: 1px solid transparent; box-shadow: none !important; gap: 7px;
}
.mb:active{ transform: scale(.98); }
.mb .ico{ width: 15px; height: 15px; }
.mb.primary{ background: var(--color-primary); color: #fff; border: 1px solid transparent; }
.mb.primary:hover{ background: #16305f; transform: none; }
.mb.sec{ background: #fff; color: var(--color-text-secondary); border-color: var(--color-border-strong); }
.mb.sec:hover{ background: var(--color-surface-2); border-color: var(--color-border-strong); color: var(--color-text); }
/* Variantes de color → tonales */
.mb.green{ background: var(--tone-green-bg); color: var(--tone-green-ink); border-color: transparent; }
.mb.green:hover{ background: #d9f1e5; box-shadow: none; }
.mb.warn{ background: var(--tone-amber-bg); color: var(--tone-amber-ink); border-color: transparent; }
.mb.warn:hover{ background: #fbe9c6; }
.mb.block{ background: var(--tone-violet-bg); color: var(--tone-violet-ink); border-color: transparent; }
.mb.block:hover{ background: #e6dcfb; box-shadow: none; }
.mb.danger{ background: #fff; color: var(--tone-red-ink); border-color: #f3c5c2; }
.mb.danger:hover{ background: var(--tone-red-bg); }
.mb.ai{ border-radius: 999px; }
.mb:disabled, .nbtn:disabled{ opacity: .5; cursor: not-allowed; }
.mactions{ gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hairline); justify-content: flex-end; }
.mactions .mb.danger{ margin-right: auto; }

/* Botones con color escrito en línea dentro de la ficha de reserva y otros
   modales: se llevan a tonal sin tocar el HTML que los genera. */
.modal-box .mb[style*="background:#25d366"], .modal-box .mb[style*="background: #25d366"]{ background: var(--tone-green-bg) !important; color: var(--tone-green-ink) !important; border-color: transparent !important; }

/* ------------------------------------------------------------------
   BARRA DE HERRAMIENTAS DE RESERVAS
   ------------------------------------------------------------------ */
.toolbar{ gap: 10px; padding: 0 2px 12px; background: transparent; border: 0; box-shadow: none; }
.toggle-view{ padding: 3px; border-radius: 999px; background: var(--color-surface-2); border: 0; }
.toggle-view .tvb{ height: 30px; padding: 0 16px; font: 600 12.5px/1 var(--font-body); white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; }
.toggle-view::before{ background: #fff; box-shadow: 0 1px 3px rgba(14,33,72,.12), 0 0 0 1px rgba(14,33,72,.04); top: 3px; bottom: 3px; }
.toggle-view .tvb.active{ color: var(--color-primary); }
.nav-dates{ gap: 5px; }
.nav-dates .nbtn{
  height: 34px; padding: 0 12px; border-radius: 999px; background: #fff; color: var(--color-text-secondary);
  border: 1px solid var(--color-border-strong); font-weight: 600; font-size: 12.5px;
}
.nav-dates .nbtn:hover{ background: var(--color-surface-2); color: var(--color-text); border-color: var(--color-border-strong); }
.nav-dates .nbtn.green{ background: var(--tone-blue-bg); color: var(--tone-blue-ink); border-color: transparent; }
.nav-dates .nbtn.green:hover{ background: #e2ebfd; }
#days-visible-sel{ height: 34px !important; border-radius: 999px !important; border: 1px solid var(--color-border-strong) !important; background: #fff !important; padding: 0 12px !important; font-size: 12.5px !important; color: var(--color-text-secondary) !important; }
.toolbar > button[onclick="openLegendEditor()"]{ width: 36px; height: 36px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; color: var(--color-text-secondary) !important; display: grid; place-items: center; }
.toolbar > button[onclick="openLegendEditor()"]:hover{ background: var(--color-surface-2) !important; }
.date-picker-dropdown{ border-radius: 14px; border: 1px solid var(--hairline); box-shadow: var(--shadow-lg); padding: 12px; }

/* ------------------------------------------------------------------
   PESTAÑAS DE SECCIÓN (CRM / Analytics / Marketing / Administración)
   ------------------------------------------------------------------ */
.admin-tabs{ gap: 4px !important; border-bottom: 0 !important; padding: 0 !important; margin-bottom: 18px !important; }
.atab, .ctab, .mtab, .antab{
  height: 36px; padding: 0 14px !important; border-radius: 999px !important;
  font: 550 13px/1 var(--font-body) !important; color: var(--color-text-muted) !important; gap: 7px;
}
.atab::after, .ctab::after, .mtab::after, .antab::after{ display: none !important; }
.atab:hover, .ctab:hover, .mtab:hover, .antab:hover{ background: var(--color-surface-2) !important; color: var(--color-text) !important; transform: none !important; }
.atab:hover .ico, .ctab:hover .ico, .mtab:hover .ico, .antab:hover .ico{ transform: none !important; }
.atab.active, .ctab.active, .mtab.active, .antab.active,
.section-content .atab.active, .section-content .ctab.active, .section-content .mtab.active{
  background: color-mix(in srgb, var(--sec-accent, var(--color-accent)) 10%, #fff) !important;
  color: color-mix(in srgb, var(--sec-accent, var(--color-accent)) 82%, #0e2148) !important; font-weight: 650 !important;
}
.atab .ico, .ctab .ico, .mtab .ico, .antab .ico, .ctab svg{ width: 16px !important; height: 16px !important; opacity: .85; }

/* ------------------------------------------------------------------
   GRILLA — mismas reglas, menos tinta
   ------------------------------------------------------------------ */
.grid-wrap{ border-radius: 20px; border: 1px solid var(--hairline); box-shadow: var(--shadow-sm); background: #fff; }
.grid-header{ background: var(--grid-header-bg, #fbfcfe); border-bottom: 1px solid var(--hairline-strong); box-shadow: none; }
.ghc{ border-right: 1px solid var(--grid-line, #e7ebf1); }
.ghc-num{ font-family: var(--font-body); font-weight: 700; font-size: 18px; letter-spacing: -.03em; }
.ghc-dow{ font-weight: 650; opacity: .6; }
.ghc.tod{ background: #f1f5ff; }
.ghc-label{ background: var(--grid-header-bg, #fbfcfe); border-right: 1px solid var(--hairline-strong); box-shadow: none; }
.ghc-label-t{ font-family: var(--font-body); font-weight: 700; }
.rh-cell, .bl.bl-room{ box-shadow: none; }
.rh-cell{ border-right: 1px solid var(--hairline-strong); }
.rh-txt b, .bl-room .rm-name{ font-weight: 700; }
.rh-ic, .bl-ic{ border-radius: 8px; box-shadow: 0 0 0 1px var(--hairline); }
.cell{ border-right: 1px solid var(--grid-line, #e7ebf1); }
.bed-row{ border-bottom: 1px solid var(--grid-line, #e7ebf1); }
.cell.tod{ background: #f6f9ff; }

.bkpill{
  top: 4px; bottom: 4px; border: 0; font-weight: 600 !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bd) 26%, transparent), 0 1px 2px rgba(14,33,72,.05);
}
.bkpill:hover{
  transform: translateY(-1px); filter: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bd) 45%, transparent), 0 6px 14px -4px rgba(14,33,72,.22);
}
.bkp-edge{ width: 4px; }
.bkp-payedge{ width: 6px; box-shadow: none; opacity: .92; }
.bkp-chan{ border-radius: 5px; opacity: .92; }
.bkp-pax{ border-radius: 6px; }

/* Aviso de pre-reservas vencidas: tinte suave, no un cartel rojo */
#prereserva-alert > div, .pre-alert, .tv .pre-alert{
  border-radius: 14px !important; border: 1px solid #f6d4d1 !important; background: #fff7f6 !important; box-shadow: none !important;
}

/* ------------------------------------------------------------------
   VISTA DE HOY
   ------------------------------------------------------------------ */
.tv{ gap: 14px; }
.tv-head{ border-radius: 22px; padding: 24px 28px; border-color: var(--hairline); background: #fff; }
.tv-head h2{ font-weight: 750; }
.tv-stat{ border-left: 1px solid var(--hairline); border-radius: 18px; padding: 15px 18px; }
.tv-stat b{ font-family: var(--font-body); font-weight: 700; font-size: 22px; }
.tv-stat-ic{ border-radius: 12px; width: 36px; height: 36px; }
.tv-col, .tv-beds{ border-radius: 20px; }
.tv-col-head b{ font-weight: 700; }
.tv-row-bar{ width: 3px; opacity: .85; }
.tv-chip{ font-weight: 600; }

/* ------------------------------------------------------------------
   MODALES Y FORMULARIOS
   ------------------------------------------------------------------ */
.modal-overlay{ background: rgba(13,21,38,.38); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal-box{
  border-radius: 24px; border: 0; padding: 26px 28px 24px; box-shadow: var(--shadow-lg);
  animation: soft-modal .26s var(--ease-out) both;
}
@keyframes soft-modal{ from{ opacity: 0; transform: translateY(14px) scale(.985); } to{ opacity: 1; transform: none; } }
.modal-box h3{ font-size: 20px; font-weight: 750; letter-spacing: -.025em; margin-bottom: 14px; padding-bottom: 0; border-bottom: 0; }
.section-label{ font-size: 10.5px; letter-spacing: .1em; color: var(--color-text-muted) !important; margin: 18px 0 8px; }
.section-label::before{ display: none; }
.eyebrow::before{ width: 14px; height: 2px; opacity: .7; }
.mrow{ border-bottom: 1px solid var(--hairline); padding: 9px 0; }

.form-row{ gap: 6px; margin-bottom: 12px; }
.form-row label{ font-size: 12px; font-weight: 600; color: var(--color-text-secondary); letter-spacing: 0; text-transform: none; }
.form-row input, .form-row select, .form-row textarea,
.modal-box input[type="text"], .modal-box input[type="email"], .modal-box input[type="number"], .modal-box input[type="date"], .modal-box input[type="time"], .modal-box input[type="tel"], .modal-box select, .modal-box textarea{
  min-height: 40px; padding: 9px 13px; border-radius: 12px; border: 1px solid var(--color-border-strong); background: #fff;
  font-size: 13.5px; color: var(--color-text); box-shadow: none;
}
.form-row input:hover, .form-row select:hover, .form-row textarea:hover{ border-color: #c5c1b6; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus,
.modal-box input:focus, .modal-box select:focus, .modal-box textarea:focus{ border-color: rgba(37,99,235,.6); box-shadow: var(--focus-ring); outline: none; }
.two-col{ gap: 12px; }
.winline{ border-radius: 12px; border: 1px solid #f3dfb3; background: #fffaf0; color: #7a5200; padding: 10px 13px; font-size: 12.5px; line-height: 1.5; }

/* Ficha de reserva: los botones de acción dejan de ser un arcoíris */
.modal-box .bk-2col + div .mb, .modal-box .bk-actions .mb{ min-height: 38px; }
.arsel-btn, .ardate-btn{ border-radius: 12px !important; min-height: 40px; border-color: var(--color-border-strong) !important; }
.arsel-menu, .ardate-pop{ border-radius: 14px !important; border: 1px solid var(--hairline) !important; box-shadow: var(--shadow-lg) !important; }

/* Asistente de nueva reserva */
.wz-step{ border-radius: 14px !important; }

/* ------------------------------------------------------------------
   TARJETAS Y PANELES COMPARTIDOS
   ------------------------------------------------------------------ */
.scard, .fcard, .admin-panel, .st-card, .an-card, .ib-side, .ib-list, .ib-detail{ border-color: var(--hairline); box-shadow: none; }
.st-card, .an-card{ border-radius: 20px; }
.scard:hover, .fcard:hover{ box-shadow: var(--shadow-raised); }
.data-table th{ font-weight: 650; letter-spacing: .04em; }
.notif-panel{ border-radius: 18px !important; border: 1px solid var(--hairline) !important; box-shadow: var(--shadow-lg) !important; }
.loading-overlay{ background: rgba(247,247,244,.55); backdrop-filter: blur(2px); }

/* Héroes de sección: mismo carácter, bordes más amables */
.st-hero, .cx-board, .ops-bar, .an-period, .mk-hero, .ac-hero{ border-radius: 24px !important; }
.st-hero, .cx-board, .ops-bar, .an-period{ box-shadow: none !important; border-color: var(--hairline) !important; }

/* ------------------------------------------------------------------
   TOASTS Y DIÁLOGOS (js/ui/01-feedback.js)
   ------------------------------------------------------------------ */
.ui-toasts{ position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 3200; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: max-content; max-width: calc(100vw - 28px); }
.ui-toast{
  pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; max-width: 460px;
  padding: 11px 12px 11px 14px; border-radius: 16px; background: #171d2b; color: #f3f5f9;
  font: 500 13px/1.45 var(--font-body); box-shadow: 0 14px 40px rgba(13,21,38,.32);
  animation: ui-toast-in .28s var(--ease-out) both;
}
.ui-toast.out{ animation: ui-toast-out .24s ease forwards; }
.ui-toast-ic{ width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.ui-toast-ic svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.ui-toast.ok .ui-toast-ic{ color: #4ade80; } .ui-toast.warn .ui-toast-ic{ color: #fbbf24; } .ui-toast.err .ui-toast-ic{ color: #f87171; } .ui-toast.info .ui-toast-ic{ color: #93c5fd; }
.ui-toast-tx{ flex: 1; overflow-wrap: anywhere; }
.ui-toast-x{ border: 0; background: none; color: rgba(243,245,249,.5); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.ui-toast-x:hover{ color: #fff; }
@keyframes ui-toast-in{ from{ opacity: 0; transform: translateY(14px) scale(.96); } to{ opacity: 1; transform: none; } }
@keyframes ui-toast-out{ to{ opacity: 0; transform: translateY(8px) scale(.97); } }
body.ari-open .ui-toasts{ left: calc(50% - 210px); }
@media (max-width: 1359px){ body.ari-open .ui-toasts{ left: 50%; } }

.ui-dialogs{ position: relative; z-index: 3100; }
.ui-dlg-wrap{ position: fixed; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(13,21,38,.36); backdrop-filter: blur(3px); animation: ari-fade .16s ease both; }
.ui-dlg-wrap.out{ opacity: 0; transition: opacity .16s ease; }
.ui-dlg{
  width: 100%; max-width: 420px; background: #fff; border-radius: 22px; padding: 22px 22px 18px; box-shadow: var(--shadow-lg);
  display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; animation: soft-modal .22s var(--ease-out) both;
}
.ui-dlg-ic{ width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--tone-blue-bg); color: var(--tone-blue-ink); }
.ui-dlg-ic svg{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-dlg.ok .ui-dlg-ic{ background: var(--tone-green-bg); color: var(--tone-green-ink); }
.ui-dlg.warn .ui-dlg-ic{ background: var(--tone-amber-bg); color: var(--tone-amber-ink); }
.ui-dlg.err .ui-dlg-ic, .ui-dlg.danger .ui-dlg-ic{ background: var(--tone-red-bg); color: var(--tone-red-ink); }
.ui-dlg-main{ min-width: 0; padding-top: 2px; }
.ui-dlg h4{ font: 700 16px/1.3 var(--font-display); letter-spacing: -.015em; color: var(--color-text); margin: 0 0 4px; }
.ui-dlg-tx{ font-size: 13.5px; line-height: 1.55; color: var(--color-text-secondary); overflow-wrap: anywhere; max-height: 46vh; overflow-y: auto; }
.ui-dlg-tx p{ margin: 0 0 8px; } .ui-dlg-tx p:last-child{ margin-bottom: 0; }
.ui-dlg-in{ width: 100%; margin-top: 10px; height: 42px; padding: 0 13px; border-radius: 12px; border: 1px solid var(--color-border-strong); font: 400 14px var(--font-body); outline: none; }
.ui-dlg-in:focus{ border-color: rgba(37,99,235,.6); box-shadow: var(--focus-ring); }
.ui-dlg-f{ grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.ui-dlg-b{ height: 38px; padding: 0 17px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; font: 650 13px/1 var(--font-body); }
.ui-dlg-b.primary{ background: var(--color-primary); color: #fff; } .ui-dlg-b.primary:hover{ background: #16305f; }
.ui-dlg-b.danger{ background: #d9342c; color: #fff; } .ui-dlg-b.danger:hover{ background: #bf2a23; }
.ui-dlg-b.sec{ background: #fff; color: var(--color-text-secondary); border-color: var(--color-border-strong); } .ui-dlg-b.sec:hover{ background: var(--color-surface-2); }
.ui-dlg-b:active{ transform: scale(.97); }

/* ------------------------------------------------------------------
   LOGIN
   ------------------------------------------------------------------ */
.login-shell{ border-radius: 30px; border: 0; box-shadow: var(--shadow-lg); }
.login-field input{ border-width: 1px; border-radius: 14px; }
.login-field > label{ letter-spacing: .06em; }

/* ------------------------------------------------------------------
   TELÉFONO
   ------------------------------------------------------------------ */
@media (max-width: 900px){
  .app{ padding: 8px 8px 0; }
  .topbar{ min-height: 50px; border-radius: 16px; background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .topbar-panels .snav-btn{ height: 44px; border-radius: 12px; }
  .topbar-panels .snav-btn.active{ background: var(--color-primary); color: #fff; }
  .topbar-panels .topbar-right{ gap: 10px; }
  .topbar-panels .topbar-search{ flex-direction: column; align-items: stretch; }
  .topbar-panels .tsearch{ width: 100%; }
  .topbar-panels .tsearch-filters{ position: static; display: flex; width: auto !important; border: 0 !important; padding: 6px 0 0; }
  .topbar-panels .tsearch-results{ position: static; width: 100% !important; margin-top: 6px; top: auto !important; border-radius: 14px !important; }
  .topbar-panels .ari-top-btn{ align-self: stretch; justify-content: flex-start; height: 44px; }
  .topbar-panels .user-menu{ margin: 4px 0 0; }
  .topbar-panels .user-btn{ display: none; }
  .topbar-panels .user-pop{ position: static; display: block !important; width: auto; box-shadow: none; border-radius: 14px; animation: none; }
  .modal-box{ border-radius: 22px 22px 0 0; padding: 22px 18px 20px; }
  .ui-toasts{ bottom: 84px; }
  .toolbar{ padding-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce){
  .modal-box, .ui-dlg, .ui-toast, .user-pop{ animation: none !important; }
}

/* El engranaje de Configuración tenía estilo propio por id: se alinea con el resto */
#snav-settings{ width: 36px; height: 36px; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: var(--color-text-secondary); font-size: 0; display: inline-flex; align-items: center; justify-content: center; }
#snav-settings svg{ width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#snav-settings:hover{ background: var(--color-surface-2) !important; color: var(--color-text); transform: none; }
#snav-settings.active{ background: var(--color-primary) !important; color: #fff; }

/* Bandas de habitación y de grupo en la grilla: neutras, sin beige */
.rh-spacer{ background: var(--grid-room-bg, #f4f6fa); }
.room-header-row .rh-cell, .rh-cell{ background: var(--grid-room-bg, #f4f6fa); }

/* Ficha de reserva (dos columnas): compacta para que entre sin scroll */
.modal-box:has(.bk-2col){ padding: 22px 26px 20px; }
.modal-box:has(.bk-2col) .mrow{ padding: 7px 0; }
.modal-box:has(.bk-2col) input[type="text"], .modal-box:has(.bk-2col) input[type="email"], .modal-box:has(.bk-2col) input[type="tel"]{ min-height: 36px; padding: 7px 12px; }
.modal-box:has(.bk-2col) .section-label{ margin: 14px 0 6px; }
.modal-box:has(.bk-2col) .mactions{ margin-top: 14px; padding-top: 12px; }

/* ------------------------------------------------------------------
   TIPOGRAFÍA DE TITULARES — misma voz, menos peso
   Los titulares de sección venían en 800 y muy grandes: gritaban al
   lado de una interfaz que ahora es calma. Un escalón menos de peso y
   de tamaño; las cifras clave en Inter tabular, que se lee más limpio.
   ------------------------------------------------------------------ */
.an-head-title, .st-hero-title, .cx-board-title, .admin-hero-title, .tv-head h2, .fl-hero-title, .tp-hero-title, .ac-les-head h1, .caja-date, .caja-hero-date{
  font-weight: 700 !important; letter-spacing: -.028em !important;
}
.an-head-title{ font-size: clamp(1.6rem, 2.8vw, 2.3rem) !important; }
.an-big-val, .ah-stat-num, .tp-stat-num, .stat-num, .tv-occ-txt b{ font-family: var(--font-body) !important; font-weight: 700 !important; letter-spacing: -.035em !important; }
.an-big-val{ font-size: clamp(1.6rem, 2.7vw, 2.25rem) !important; }
.modal-box h3, .ui-dlg h4{ font-family: var(--font-display); }

/* Resultados del buscador */
.tsearch-results > div[onclick]{ padding: 9px 11px !important; }
.tsearch-results > div[onclick]:hover{ background: var(--color-surface-2) !important; }
.sr-empty{ padding: 12px 11px 8px; font-size: 12.5px; color: var(--color-text-muted); }
.sr-ari{ display: flex; align-items: center; gap: 11px; padding: 10px 11px !important; margin-top: 4px; cursor: pointer; border-top: 1px solid var(--hairline) !important; border-radius: 0 0 10px 10px !important; }
.sr-ari:hover{ background: #f2f6ff !important; }
.sr-ari div{ flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sr-ari b{ font-size: 13px; font-weight: 650; color: var(--color-primary); }
.sr-ari span:not(.ari-orb){ font-size: 11.5px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-ari kbd{ font-size: 10px; padding: 2px 6px; border-radius: 6px; background: var(--color-surface-2); color: var(--color-text-muted); }

/* ARREGLO (teléfono): el menú lateral vive dentro de .topbar, que es sticky con
   z-index 100 y por eso arma su propio contexto de apilado. El velo oscuro
   (.nav-scrim, z-index 199) quedaba ENCIMA del menú: se veía borroso y cada
   toque cerraba el panel en vez de navegar. Con el menú abierto la barra sube
   por encima del velo. */
@media (max-width: 900px){
  body.nav-open .topbar{ z-index: 210; }
}
@media (max-width: 900px){
  .topbar-panels .section-nav{ align-self: stretch; }
  .topbar-panels .snav-btn{ justify-content: flex-start; width: 100%; }
  .topbar-panels .snav-btn.flt{ width: auto; height: 30px; border-radius: 999px; }
  .topbar-panels .snav-btn.flt.active{ background: var(--tone-blue-bg); color: var(--tone-blue-ink); }
  .topbar-panels .notif-wrap, .topbar-panels .voice-btn, .topbar-panels #snav-settings{ align-self: flex-start; }
  .topbar-panels .topbar-right > .voice-btn, .topbar-panels .topbar-right > .notif-wrap, .topbar-panels .topbar-right > #snav-settings{ display: inline-flex; }
  body.nav-open .ari-fab{ opacity: 0; pointer-events: none; }
  /* Los iconos sueltos del panel van en una sola fila */
  .topbar-panels .topbar-right{ flex-direction: row; flex-wrap: wrap; align-items: center; }
  .topbar-panels .topbar-search, .topbar-panels .ari-top-btn, .topbar-panels .user-menu{ flex: 1 1 100%; }
}

/* Carga: una pastilla discreta arriba. El velo sigue frenando clics dobles
   mientras se guarda, pero ya no tapa ni desenfoca la pantalla. */
.loading-overlay{ background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; align-items: flex-start !important; cursor: progress; }
.loading-pill{ margin-top: 14px; display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px 8px 11px; border-radius: 999px; background: #171d2b; color: #f3f5f9; font: 600 12.5px/1 var(--font-body); box-shadow: 0 10px 30px rgba(13,21,38,.28); animation: ui-toast-in .2s var(--ease-out) both; }
.loading-pill .loading-spinner{ width: 15px; height: 15px; border-width: 2px; border-color: rgba(255,255,255,.25); border-top-color: #fff; }

/* La barra nunca desborda: lo que cede es el buscador. Con el panel de Ari
   abierto al costado, su botón sobra (se cierra desde el panel). */
.topbar-right{ flex-shrink: 1; min-width: 0; }
.topbar-search{ flex: 0 1 auto; min-width: 0; }
.topbar-search input[type="search"]{ min-width: 120px; }
@media (min-width: 1360px){
  body.ari-open .ari-top-btn{ display: none; }
  body.ari-open .tsearch-kbd{ display: none; }
  body.ari-open .topbar-search input[type="search"]{ width: clamp(130px, 13vw, 220px) !important; padding-right: 14px; }
}
@media (max-width: 1120px) and (min-width: 901px){
  .ari-top-btn{ padding: 0 6px; } .ari-top-btn #ari-top-lbl{ display: none; }
  .snav-btn{ padding: 0 10px; font-size: 12.5px; }
  .topbar-search input[type="search"]{ width: 130px !important; }
}

/* El buscador es el elemento elástico de la barra: ocupa lo que sobra y cede
   primero cuando falta lugar (ventana angosta o panel de Ari al costado). */
@media (min-width: 901px){
  .topbar-right{ flex: 1 1 auto; justify-content: flex-end; }
  .topbar-search{ flex: 0 1 300px; min-width: 104px; }
  .tsearch{ width: 100%; }
  .topbar-search input[type="search"]{ width: 100% !important; min-width: 0; }
  .toolbar{ flex-wrap: wrap; row-gap: 8px; }
}
@media (min-width: 1360px) and (max-width: 1640px){
  body.ari-open .snav-btn{ padding: 0 10px; }
  body.ari-open .topbar{ gap: 6px; }
}