/* Componentes del plan UI/UX (apps/web/src/ui). SOLO tokens --marca-*. Capa propia: no pisa app.css existente. */
@layer componentes {
  .c-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--marca-space-2);
    min-height: 40px;
    padding: 0 var(--marca-space-4);
    border: 1px solid transparent;
    border-radius: var(--marca-radius-m);
    font: var(--marca-text-label-m);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--marca-duration-instant, 80ms);
  }
  .c-boton--s {
    min-height: 32px;
    padding: 0 var(--marca-space-3);
  }
  .c-boton--l {
    min-height: 48px;
    padding: 0 var(--marca-space-5);
  }
  .c-boton--ancho {
    width: 100%;
  }
  .c-boton--primario {
    background: var(--marca-primary);
    color: var(--marca-on-primary);
  }
  .c-boton--primario:hover {
    background: var(--marca-primary-hover);
  }
  .c-boton--secundario {
    background: var(--marca-surface);
    color: var(--marca-text);
    border-color: var(--marca-border-strong);
  }
  .c-boton--secundario:hover {
    background: var(--marca-bg-sunken);
  }
  .c-boton--fantasma {
    background: transparent;
    color: var(--marca-text-link);
  }
  .c-boton--fantasma:hover {
    background: var(--marca-bg-sunken);
  }
  .c-boton--peligro {
    background: var(--marca-danger);
    color: var(--marca-on-danger);
  }
  .c-boton:focus-visible {
    outline: 2px solid var(--marca-focus-ring);
    outline-offset: 2px;
  }

  .c-tarjeta {
    margin: 0 0 var(--marca-space-4);
    padding: var(--marca-space-4);
    border: 1px solid var(--marca-border);
    border-radius: var(--marca-radius-m);
    background: var(--marca-surface);
  }
  .c-tarjeta__cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--marca-space-3);
    margin-bottom: var(--marca-space-3);
  }
  .c-tarjeta__titulo {
    margin: 0;
    font: var(--marca-text-heading-s);
  }
  .c-tarjeta__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--marca-space-2);
  }

  .c-grilla {
    display: grid;
    gap: var(--marca-space-3);
    grid-template-columns: repeat(auto-fill, minmax(var(--c-grilla-min, 200px), 1fr));
    margin-bottom: var(--marca-space-6);
  }
  .c-grilla--s {
    --c-grilla-min: 140px;
  }
  .c-grilla--m {
    --c-grilla-min: 200px;
  }
  .c-grilla--l {
    --c-grilla-min: 300px;
  }

  .c-kpi {
    display: grid;
    gap: var(--marca-space-1);
    padding: var(--marca-space-4);
    border: 1px solid var(--marca-border);
    border-radius: var(--marca-radius-m);
    background: var(--marca-surface);
    color: var(--marca-text);
    text-decoration: none;
  }
  a.c-kpi:hover {
    border-color: var(--marca-primary);
  }
  .c-kpi__rotulo {
    color: var(--marca-text-muted);
    font: var(--marca-text-overline);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .c-kpi__valor {
    font: var(--marca-text-heading-l);
    font-variant-numeric: tabular-nums;
  }
  .c-kpi__detalle {
    color: var(--marca-text-muted);
    font: var(--marca-text-body-s);
  }

  .c-insignia {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--marca-space-2);
    border-radius: var(--marca-radius-full);
    font: var(--marca-text-label-s);
    white-space: nowrap;
  }
  .c-insignia--neutro {
    background: var(--marca-bg-sunken);
    color: var(--marca-text);
  }
  .c-insignia--info {
    background: var(--marca-info-subtle);
    color: var(--marca-info);
  }
  .c-insignia--exito {
    background: var(--marca-success-subtle);
    color: var(--marca-success);
  }
  .c-insignia--aviso {
    background: var(--marca-warning-subtle);
    color: var(--marca-warning);
  }
  .c-insignia--peligro {
    background: var(--marca-danger-subtle);
    color: var(--marca-danger);
  }

  .c-vacio {
    padding: var(--marca-space-8) var(--marca-space-4);
    text-align: center;
    color: var(--marca-text-muted);
  }
  .c-vacio__titulo {
    margin: 0 0 var(--marca-space-2);
    color: var(--marca-text);
    font: var(--marca-text-heading-s);
  }
}

/* UI-1 · Navegación lateral agrupada (plan §3). Sin JS; la nav se ubica en la columna izquierda
   aunque en el HTML aparezca después del título. */
@layer componentes {
  .c-lateral {
    display: block;
    padding: 0.5rem;
    border: 1px solid var(--marca-border);
    border-radius: var(--marca-radius-l);
    background: var(--marca-surface);
  }
  .c-lateral__titulo {
    cursor: pointer;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
  }
  .c-lateral__grupo {
    display: flex;
    flex-direction: column;
    margin-block: 0.25rem 0.5rem;
  }
  .c-lateral__rotulo {
    margin: 0.25rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--marca-text-muted);
  }
  .c-lateral__item {
    padding: 0.3rem 0.5rem;
    border-radius: var(--marca-radius-s);
    text-decoration: none;
    color: inherit;
    font-size: 0.92rem;
  }
  .c-lateral__item:hover,
  .c-lateral__item:focus-visible {
    background: var(--marca-bg-sunken);
  }
}

/* Fuera de @layer a propósito: app.css no está en capas y sus márgenes le ganarían a una capa,
   dejando contenido debajo del menú. */
/* Float + sticky: con grid, la altura del menú se repartía entre las filas y separaba el contenido. */
@media (min-width: 1024px) {
  .panel:has(> .c-lateral) {
    max-width: 1320px;
  }
  .panel:has(> .c-lateral) > :not(.c-lateral) {
    margin-inline-start: calc(232px + var(--marca-space-6));
  }
  /* Una tabla al 100 % no entra al lado del menú flotante y caía debajo (UI-22): se descuenta el menú. */
  .panel:has(> .c-lateral) > table {
    width: calc(100% - 232px - var(--marca-space-6));
  }
  .panel > .c-lateral {
    float: left;
    width: 232px;
    position: sticky;
    top: 0.75rem;
    max-height: calc(100vh - 1.5rem);
    overflow-y: auto;
  }
}
/* Mobile: el menú arranca cerrado. Desktop: siempre visible (::details-content); sin soporte, queda el
   «Menú» plegable también en desktop, así nunca queda inaccesible. */
@supports selector(::details-content) {
  @media (min-width: 1024px) {
    .c-lateral__plegable::details-content {
      content-visibility: visible;
      block-size: auto;
    }
    .c-lateral__titulo {
      display: none;
    }
  }
}

/* UI-2 · Hoy */
@layer componentes {
  .c-hoy__kpis {
    margin-block: var(--marca-space-4);
  }
  .estado.c-tarjeta {
    margin-block-end: var(--marca-space-4);
  }
}

/* UI-3 · Cabecera de la reserva */
@layer componentes {
  .c-reserva__cabeza {
    display: flex;
    flex-wrap: wrap;
    gap: var(--marca-space-4);
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--marca-space-4);
  }
  .c-reserva__quien {
    display: flex;
    flex-direction: column;
    gap: var(--marca-space-1);
  }
  .c-reserva__quien .c-insignia {
    align-self: flex-start;
  }
  .c-reserva__titular {
    font-size: 1.25rem;
  }
  .c-reserva__detalle {
    color: var(--marca-text-muted);
  }
  .c-reserva__cabeza .c-grilla {
    flex: 1 1 320px;
    max-width: 560px;
  }
}

/* Fuera de @layer: el color de los <a> de app.css (sin capa) dejaba invisible el texto de un link-botón. */
a.c-boton,
a.c-boton:visited {
  text-decoration: none;
}
a.c-boton--primario,
a.c-boton--primario:visited,
a.c-boton--primario:hover {
  color: var(--marca-on-primary);
}

/* UI-4 · Acción principal y pestañas de la reserva */
@layer componentes {
  .c-reserva__cabeza .c-grilla {
    --c-grilla-min: 110px;
  }
  .c-reserva__cabeza .c-kpi__valor {
    font-size: 1.05rem;
    white-space: nowrap;
  }
  .c-reserva__accion {
    align-self: center;
  }
  .c-pestanas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--marca-space-1);
    flex-basis: 100%;
    border-top: 1px solid var(--marca-border);
    padding-top: var(--marca-space-2);
  }
  .c-pestanas a {
    padding: var(--marca-space-1) var(--marca-space-3);
    border-radius: var(--marca-radius-full);
    text-decoration: none;
    font-size: 0.9rem;
  }
  .c-pestanas a:hover {
    background: var(--marca-bg-sunken);
  }
}

/* UI-5 · Montos de la cabecera en mobile: una fila por monto (rótulo a la izquierda, valor a la derecha). */
@layer componentes {
  @media (max-width: 600px) {
    .c-reserva__cabeza .c-grilla {
      grid-template-columns: 1fr;
      gap: var(--marca-space-1);
    }
    .c-reserva__cabeza .c-kpi {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: baseline;
      padding-block: var(--marca-space-2);
    }
    .c-reserva__cabeza .c-kpi__valor {
      overflow-wrap: normal;
      white-space: nowrap;
    }
  }
}

/* UI-6 · Caja */
@layer componentes {
  .c-caja__esperado {
    margin-block: var(--marca-space-3);
  }
  .c-caja__movimiento {
    padding: var(--marca-space-3);
    border: 1px dashed var(--marca-border-strong);
    border-radius: var(--marca-radius-m);
    background: var(--marca-surface);
  }
}
@layer componentes {
  .c-caja__esperado .c-kpi__valor {
    white-space: nowrap;
  }
}

/* UI-7 · Barras del mapa (U8). Fuera de @layer: compite con .celda-* de app.css. Color por estado de la reserva. */
td.c-barra {
  padding: 2px 4px;
  border-radius: var(--marca-radius-s);
  border-inline-start: 4px solid var(--b-borde);
  background: var(--b-fondo);
  color: var(--b-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 1px;
}
td.c-barra--pendiente {
  --b-fondo: var(--marca-reserva-pendiente-bg);
  --b-texto: var(--marca-reserva-pendiente-text);
  --b-borde: var(--marca-reserva-pendiente-border);
}
td.c-barra--confirmada {
  --b-fondo: var(--marca-reserva-confirmada-bg);
  --b-texto: var(--marca-reserva-confirmada-text);
  --b-borde: var(--marca-reserva-confirmada-border);
}
td.c-barra--en_casa {
  --b-fondo: var(--marca-reserva-en-casa-bg);
  --b-texto: var(--marca-reserva-en-casa-text);
  --b-borde: var(--marca-reserva-en-casa-border);
}
td.c-barra--finalizada {
  --b-fondo: var(--marca-reserva-salida-bg);
  --b-texto: var(--marca-reserva-salida-text);
  --b-borde: var(--marca-reserva-salida-border);
}
td.c-barra--no_show {
  --b-fondo: var(--marca-reserva-no-show-bg);
  --b-texto: var(--marca-reserva-no-show-text);
  --b-borde: var(--marca-reserva-no-show-border);
}
td.c-barra.celda-vencida {
  --b-fondo: var(--marca-reserva-no-show-bg);
  --b-texto: var(--marca-reserva-no-show-text);
  --b-borde: var(--marca-reserva-no-show-border);
}
td.c-barra a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  font-size: 0.85rem;
}
.c-barra__titular {
  font-weight: 600;
}
.c-barra__codigo {
  opacity: 0.75;
  font-size: 0.75rem;
}

/* UI-8 · Inicio con el resumen de Hoy */
@layer componentes {
  .c-inicio__hoy {
    margin-block: var(--marca-space-4);
  }
  .c-progreso {
    inline-size: 100%;
    max-inline-size: 360px;
    accent-color: var(--marca-primary);
  }
}

/* UI-9 · Línea de «hoy» en el mapa (fuera de @layer: compite con .celda-* de app.css). */
th.mapa-hoy,
td.c-mapa-hoy {
  box-shadow: inset 2px 0 0 var(--marca-accent);
}
th.mapa-hoy {
  color: var(--marca-accent);
  font-weight: 700;
}

/* UI-10 · Rango del mapa */
@layer componentes {
  .c-mapa__rango {
    border-top: 0;
    padding-top: 0;
    margin-block-end: var(--marca-space-2);
  }
}
.c-pestanas a[aria-current="page"] {
  background: var(--marca-primary);
  color: var(--marca-on-primary);
}

/* UI-11 · Día libre del mapa: «+» discreto que aparece al pasar el mouse o con foco. */
a.c-mapa__libre {
  display: block;
  text-align: center;
  text-decoration: none;
  color: transparent;
  border-radius: var(--marca-radius-s);
}
a.c-mapa__libre:hover,
a.c-mapa__libre:focus-visible {
  color: var(--marca-primary);
  background: var(--marca-bg-sunken);
}

/* UI-15 · Día elegido en el mapa: acciones arriba de la grilla. */
.c-mapa__seleccion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--marca-space-3);
  margin: var(--marca-space-3) 0;
  padding: var(--marca-space-3) var(--marca-space-4);
  border: 1px solid var(--marca-border);
  border-radius: var(--marca-radius-m);
  background: var(--marca-surface);
}
a.c-mapa__libre[aria-current] {
  color: var(--marca-on-primary);
  background: var(--marca-primary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   UI-2026 · Fundaciones del sistema de diseño (docs/etapas/ui-ux-2026.md §4).
   Fuera de @layer a propósito: tienen que ganarle a app.css (sin capas) en el panel.
   Solo tokens --marca-*; los alias --c-* son derivados locales, no colores nuevos.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  --c-borde-suave: color-mix(in oklab, var(--marca-border) 70%, transparent);
  --c-anillo: 0 0 0 3px color-mix(in oklab, var(--marca-focus-ring) 45%, transparent);
  --c-ancho-lateral: 240px;
}

/* Botones: altura de control del token, sombra sutil en el primario, anillo de foco visible. */
.c-boton {
  font-weight: 600;
  letter-spacing: -0.005em;
  transition:
    background-color var(--marca-duration-fast, 120ms) var(--marca-easing-standard, ease),
    box-shadow var(--marca-duration-fast, 120ms) var(--marca-easing-standard, ease),
    transform var(--marca-duration-instant, 80ms);
}
.c-boton--primario {
  box-shadow:
    var(--marca-shadow-1),
    inset 0 1px 0 rgb(255 255 255 / 0.12);
}
.c-boton--secundario {
  border-color: var(--marca-border);
  box-shadow: var(--marca-shadow-1);
}
.c-boton--secundario:hover {
  border-color: var(--marca-border-strong);
  background: var(--marca-surface);
}
.c-boton:active {
  transform: translateY(1px);
}
.c-boton:focus-visible {
  outline: none;
  box-shadow: var(--c-anillo);
}
.c-sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Tarjeta: superficie blanca, borde suave, sombra 1, radio L. */
.panel .c-tarjeta {
  margin: 0 0 var(--marca-space-6);
  padding: var(--marca-space-6);
  border: 1px solid var(--c-borde-suave);
  border-radius: var(--marca-radius-l);
  background: var(--marca-surface);
  box-shadow: var(--marca-shadow-1);
}
.panel .c-tarjeta__cabeza {
  align-items: flex-start;
  margin-bottom: var(--marca-space-5);
}
.panel .c-tarjeta__titulo {
  margin: 0;
  font: var(--marca-text-heading-s);
}
.c-tarjeta__bajada {
  margin: var(--marca-space-1) 0 0;
  color: var(--marca-text-muted);
  font: var(--marca-text-body-s);
}

/* Stat tile (KPI): rótulo con punto de tono, cifra grande tabular, detalle. */
.c-kpi {
  gap: var(--marca-space-2);
  padding: var(--marca-space-5);
  border-color: var(--c-borde-suave);
  border-radius: var(--marca-radius-m);
  background: var(--marca-bg);
  transition:
    border-color var(--marca-duration-fast, 120ms),
    box-shadow var(--marca-duration-fast, 120ms),
    transform var(--marca-duration-fast, 120ms);
}
.c-kpi__rotulo {
  display: inline-flex;
  align-items: center;
  gap: var(--marca-space-2);
  font: var(--marca-text-label-s);
  letter-spacing: 0;
  text-transform: none;
}
.c-kpi__valor {
  font: 600 40px/44px var(--marca-font-sans);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.c-kpi__punto {
  inline-size: 8px;
  block-size: 8px;
  border-radius: var(--marca-radius-full);
  background: var(--marca-border-strong);
}
.c-kpi__punto--info {
  background: var(--marca-info);
}
.c-kpi__punto--exito {
  background: var(--marca-success);
}
.c-kpi__punto--aviso {
  background: var(--marca-aviso-500);
}
.c-kpi__punto--peligro {
  background: var(--marca-danger);
}
a.c-kpi--enlace:hover {
  border-color: var(--c-borde-hover);
  background: var(--marca-surface);
  box-shadow: var(--marca-shadow-2);
  transform: translateY(-1px);
}
a.c-kpi--enlace:focus-visible {
  outline: none;
  box-shadow: var(--c-anillo);
}

/* Insignia: pastilla con fondo sutil del tono. */
.c-insignia {
  min-block-size: 22px;
  border-radius: var(--marca-radius-full);
  font: var(--marca-text-label-s);
  background: var(--marca-bg-sunken);
  color: var(--marca-text-muted);
}
.c-insignia--info {
  background: var(--marca-primary-subtle);
  color: var(--marca-primary);
}
.c-insignia--exito {
  background: var(--marca-success-subtle);
  color: var(--marca-success);
}
.c-insignia--aviso {
  background: var(--marca-warning-subtle);
  color: var(--marca-warning);
}
.c-insignia--peligro {
  background: var(--marca-danger-subtle);
  color: var(--marca-danger);
}

/* Cabecera de página. */
.c-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--marca-space-4);
  margin-block-end: var(--marca-space-8);
}
.c-cabecera__linea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--marca-space-3);
}
.panel .c-cabecera__titulo {
  margin: 0;
  font: var(--marca-text-heading-l);
  letter-spacing: -0.02em;
}
.c-cabecera__sobre.migas {
  margin: 0 0 var(--marca-space-1);
  font: var(--marca-text-label-s);
}

/* Navegación lateral: plana (sin caja), ítem activo con fondo de marca sutil, estilo Linear. */
.panel .c-lateral {
  padding: 0;
  border: 0;
  background: transparent;
}
.c-lateral__rotulo {
  margin: var(--marca-space-4) var(--marca-space-3) var(--marca-space-1);
  font: var(--marca-text-overline);
  letter-spacing: 0.06em;
  color: var(--marca-text-subtle);
}
.c-lateral__grupo:first-of-type .c-lateral__rotulo {
  margin-block-start: 0;
}
.c-lateral__item {
  display: flex;
  align-items: center;
  min-block-size: 32px;
  padding: 0 var(--marca-space-3);
  border-radius: var(--marca-radius-s);
  color: var(--marca-text-muted);
  font: var(--marca-text-label-m);
  font-weight: 500;
}
.c-lateral__item:hover {
  color: var(--marca-text);
  background: var(--marca-bg-sunken);
}
.c-lateral__item:focus-visible {
  outline: none;
  box-shadow: var(--c-anillo);
}
.c-lateral__item[aria-current="page"] {
  color: var(--marca-primary);
  background: var(--marca-primary-subtle);
  font-weight: 600;
}
.c-lateral__atajos {
  margin: var(--marca-space-6) var(--marca-space-3) 0;
  color: var(--marca-text-subtle);
  font: var(--marca-text-body-s);
}
@media (min-width: 1024px) {
  .cabecera:has(~ .panel > .c-lateral) {
    max-width: 1320px;
    border-bottom: 1px solid var(--c-borde-suave);
  }
  .panel:has(> .c-lateral) > :not(.c-lateral) {
    margin-inline-start: calc(var(--c-ancho-lateral) + var(--marca-space-10));
  }
  .panel > .c-lateral {
    width: var(--c-ancho-lateral);
    top: var(--marca-space-6);
    padding-inline-end: var(--marca-space-4);
    border-inline-end: 1px solid var(--c-borde-suave);
  }
}
@media (max-width: 1023px) {
  .panel .c-lateral {
    margin-block-end: var(--marca-space-6);
    padding: var(--marca-space-2);
    border: 1px solid var(--c-borde-suave);
    border-radius: var(--marca-radius-m);
    background: var(--marca-surface);
  }
}

/* Inicio: KPIs y checklist de puesta en marcha. */
.c-inicio__kpis {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.cabecera .panel-nav a,
.cabecera .panel-nav .enlace {
  color: var(--marca-text-muted);
  font: var(--marca-text-label-m);
  text-decoration: none;
}
.cabecera .panel-nav a:hover {
  color: var(--marca-text);
}
.c-pasos .c-progreso {
  display: block;
  max-inline-size: none;
  block-size: 6px;
  margin-block-end: var(--marca-space-4);
}
.panel .c-pasos__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-pasos__item {
  display: flex;
  align-items: center;
  gap: var(--marca-space-3);
  min-block-size: 52px;
  padding-block: var(--marca-space-2);
  border-top: 1px solid var(--c-borde-suave);
}
.c-pasos__marca {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 22px;
  block-size: 22px;
  border: 1.5px solid var(--marca-border-strong);
  border-radius: var(--marca-radius-full);
  color: transparent;
  font: 700 12px/1 var(--marca-font-sans);
}
.c-pasos__item.hecho .c-pasos__marca {
  border-color: var(--marca-success);
  background: var(--marca-success);
  color: var(--marca-on-primary);
}
.c-pasos__texto {
  flex: 1;
  font: var(--marca-text-body-m);
}
.c-pasos__item.hecho .c-pasos__texto {
  color: var(--marca-text-subtle);
  text-decoration: line-through;
  text-decoration-color: var(--marca-border-strong);
}
.c-pasos__estado {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.c-boton {
  white-space: nowrap;
}
@media (max-width: 600px) {
  .panel {
    padding-inline: var(--marca-space-4);
  }
  .panel .c-tarjeta {
    padding: var(--marca-space-4);
  }
  .c-inicio__kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--marca-space-2);
  }
  .c-inicio__kpis .c-kpi {
    padding: var(--marca-space-3);
  }
  .c-inicio__kpis .c-kpi__valor {
    font: 600 28px/32px var(--marca-font-sans);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   UI26-2 · Controles, tablas, secciones y estados vacíos en todo el panel.
   ───────────────────────────────────────────────────────────────────────────── */
/* Secciones: la tarjeta beige (.estado) pasa a ser tarjeta blanca del sistema. */
.panel .estado {
  margin: 0 0 var(--marca-space-6);
  padding: var(--marca-space-6);
  border: 1px solid var(--c-borde-suave);
  border-radius: var(--marca-radius-l);
  background: var(--marca-surface);
  box-shadow: var(--marca-shadow-1);
}
.panel .estado > h2:first-child,
.panel .estado > h2 {
  margin: 0 0 var(--marca-space-4);
  font: var(--marca-text-heading-s);
}
.panel .estado h3 {
  margin: var(--marca-space-6) 0 var(--marca-space-3);
  font: var(--marca-text-label-m);
  font-weight: 600;
}
.panel h2 {
  margin: var(--marca-space-8) 0 var(--marca-space-4);
  font: var(--marca-text-heading-s);
}

/* Inputs: 40 px, radio M, borde suave, hover y foco con anillo. Cubre los inputs sueltos (sin .campo). */
.panel input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="submit"]),
.panel select,
.panel textarea,
.campo input,
.campo select,
.campo textarea,
select.control {
  box-sizing: border-box;
  min-height: var(--marca-size-control-m, 40px);
  padding: 0 var(--marca-space-3);
  border: 1px solid var(--marca-border);
  border-radius: var(--marca-radius-m);
  background: var(--marca-surface);
  color: var(--marca-text);
  font: var(--marca-text-body-m);
  box-shadow: inset 0 1px 1px rgb(31 28 22 / 0.03);
  transition:
    border-color var(--marca-duration-fast, 120ms),
    box-shadow var(--marca-duration-fast, 120ms);
}
.panel textarea,
.campo textarea {
  padding-block: var(--marca-space-2);
}
.panel input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="submit"]):hover,
.panel select:hover,
.panel textarea:hover {
  border-color: var(--marca-border-strong);
}
.panel input:focus-visible,
.panel select:focus-visible,
.panel textarea:focus-visible,
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible,
select.control:focus-visible {
  outline: none;
  border-color: var(--marca-focus-ring);
  box-shadow: var(--c-anillo);
}
.panel input[type="checkbox"],
.panel input[type="radio"] {
  inline-size: 18px;
  block-size: 18px;
  accent-color: var(--marca-primary);
}
.panel .campo {
  font: var(--marca-text-label-m);
  color: var(--marca-text);
}
.panel .formulario-linea {
  gap: var(--marca-space-3) var(--marca-space-4);
}
.panel form + form {
  margin-block-start: var(--marca-space-3);
}

/* Botones heredados (.boton): mismo lenguaje que .c-boton. */
.boton {
  justify-content: center;
  gap: var(--marca-space-2);
  min-height: var(--marca-size-control-m, 40px);
  padding: 0 var(--marca-space-4);
  border: 1px solid transparent;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.boton-primario {
  box-shadow:
    var(--marca-shadow-1),
    inset 0 1px 0 rgb(255 255 255 / 0.12);
}
.boton-secundario {
  border-color: var(--marca-border);
  box-shadow: var(--marca-shadow-1);
}
.boton-secundario:hover {
  border-color: var(--marca-border-strong);
  background: var(--marca-surface);
}
.boton:focus-visible {
  outline: none;
  box-shadow: var(--c-anillo);
}
.boton:active {
  transform: translateY(1px);
}
.boton-chico {
  min-height: var(--marca-size-control-s, 32px);
  padding: 0 var(--marca-space-3);
}
.panel button:not([class]) {
  min-height: var(--marca-size-control-m, 40px);
  padding: 0 var(--marca-space-4);
  border: 1px solid var(--marca-border);
  border-radius: var(--marca-radius-m);
  background: var(--marca-surface);
  color: var(--marca-text);
  font: var(--marca-text-label-m);
  font-weight: 600;
  box-shadow: var(--marca-shadow-1);
  cursor: pointer;
}

/* Tablas: encabezado chico sobre fondo, filas de 44 px, hover de fila, cifras tabulares. */
.panel .tabla:not(.mapa) {
  border: 1px solid var(--c-borde-suave);
  border-radius: var(--marca-radius-m);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--marca-surface);
  font-variant-numeric: tabular-nums;
}
.panel .tabla:not(.mapa) th,
.panel .tabla:not(.mapa) td {
  padding: var(--marca-space-2-5, 10px) var(--marca-space-3);
  border-bottom: 1px solid var(--c-borde-suave);
  block-size: 44px;
}
.panel .tabla:not(.mapa) thead th {
  background: var(--marca-bg);
  color: var(--marca-text-muted);
  font: var(--marca-text-label-s);
  font-weight: 600;
}
.panel .tabla:not(.mapa) tbody tr:last-child > * {
  border-bottom: 0;
}
.panel .tabla:not(.mapa) tbody tr:hover {
  background: var(--marca-bg);
}
.panel .estado .tabla:not(.mapa) {
  border-radius: var(--marca-radius-s);
}

/* Lista de datos (dl) en dos columnas, rótulo muted. */
.panel .datos-lista {
  display: grid;
  grid-template-columns: minmax(140px, max-content) minmax(0, 1fr);
  gap: var(--marca-space-2) var(--marca-space-6);
  margin: 0;
}
.panel .datos-lista dt {
  color: var(--marca-text-muted);
  font: var(--marca-text-label-m);
}
.panel .datos-lista dd {
  font: var(--marca-text-body-m);
  font-variant-numeric: tabular-nums;
}

/* Avisos: borde izquierdo de tono en vez de caja completa. */
.panel .aviso {
  border: 1px solid var(--c-borde-suave);
  border-inline-start: 4px solid var(--marca-info);
  border-radius: var(--marca-radius-m);
  background: var(--marca-surface);
}
.panel .aviso-error {
  border-inline-start-color: var(--marca-danger);
  background: var(--marca-danger-subtle);
}
.panel .aviso-ok {
  border-inline-start-color: var(--marca-success);
  background: var(--marca-success-subtle);
}

/* Estado vacío. */
.c-vacio {
  display: grid;
  justify-items: center;
  gap: var(--marca-space-2);
  padding: var(--marca-space-10) var(--marca-space-4);
  border: 1px dashed var(--marca-border);
  border-radius: var(--marca-radius-l);
  background: var(--marca-bg);
}
.c-vacio::before {
  content: "";
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--marca-radius-full);
  background: var(--marca-bg-sunken);
  box-shadow: inset 0 0 0 8px var(--marca-surface);
}
.c-vacio__texto {
  max-inline-size: 48ch;
  margin: 0;
}

/* Pestañas: segmentado con fondo, activo blanco elevado. */
.panel .c-pestanas {
  gap: var(--marca-space-1);
}
.panel .c-pestanas a {
  color: var(--marca-text-muted);
  font: var(--marca-text-label-m);
}
.panel .c-pestanas a:hover {
  color: var(--marca-text);
}
.panel .c-pestanas a[aria-current="page"] {
  color: var(--marca-on-primary);
}
/* Pestañas como filtro de lista (Leads): sin la línea de la cabecera de la reserva. */
.panel main > .c-pestanas {
  margin-block-end: var(--marca-space-3);
  border-top: 0;
  padding-top: 0;
}

/* Regresión UI26-1: la cifra grande no aplica a las cabeceras compactas (reserva, caja). */
.c-reserva__cabeza .c-kpi__valor,
.c-caja__esperado .c-kpi__valor {
  font: 600 20px/26px var(--marca-font-sans);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.c-reserva__cabeza .c-kpi {
  padding: var(--marca-space-3) var(--marca-space-4);
}

/* ─────────────────────────────────────────────────────────────────────────────
   UI26-3 · Mapa: barra de herramientas, leyenda en chips, grilla con encabezados fijos y barras gruesas.
   ───────────────────────────────────────────────────────────────────────────── */
.c-mapa__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--marca-space-3);
  margin-block-end: var(--marca-space-3);
}
.c-mapa__fechas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--marca-space-2);
  margin: 0;
}
.panel .c-mapa__rango {
  flex-basis: auto;
  margin: 0;
  padding: 3px;
  border: 1px solid var(--c-borde-suave);
  border-radius: var(--marca-radius-m);
  background: var(--marca-bg-sunken);
}
.panel .c-mapa__rango a {
  border-radius: calc(var(--marca-radius-m) - 3px);
}
.panel .c-mapa__rango a[aria-current="page"] {
  background: var(--marca-surface);
  color: var(--marca-text);
  box-shadow: var(--marca-shadow-1);
}
.c-mapa__leyenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--marca-space-2);
  margin-block-end: var(--marca-space-3);
}
.c-mapa__leyenda .celda {
  display: inline-flex;
  align-items: center;
  min-block-size: 24px;
  padding: 0 var(--marca-space-2);
  border-radius: var(--marca-radius-full);
  font: var(--marca-text-label-s);
  font-weight: 600;
}
.c-mapa__leyenda .celda-disponible {
  border: 1px dashed var(--marca-border-strong);
}
.panel .mapa-contenedor {
  max-height: 72vh;
  overflow: auto;
  border: 1px solid var(--c-borde-suave);
  border-radius: var(--marca-radius-l);
  background: var(--marca-surface);
  box-shadow: var(--marca-shadow-1);
}
.panel .mapa {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 100%;
}
.panel .mapa th,
.panel .mapa td {
  block-size: 48px;
  min-inline-size: 44px;
  padding: 6px 2px;
  border-bottom: 1px solid var(--c-borde-suave);
  border-inline-end: 1px solid color-mix(in oklab, var(--marca-border) 35%, transparent);
  font: var(--marca-text-label-s);
}
.panel .mapa thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  block-size: 40px;
  background: var(--marca-bg);
  color: var(--marca-text-muted);
  font-variant-numeric: tabular-nums;
}
.panel .mapa th[scope="row"],
.panel .mapa thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-inline-size: 150px;
  padding-inline: var(--marca-space-4);
  background: var(--marca-surface);
  color: var(--marca-text);
  font: var(--marca-text-label-m);
  font-weight: 600;
  text-align: left;
  box-shadow: 1px 0 0 var(--c-borde-suave);
}
.panel .mapa thead th:first-child {
  z-index: 3;
  background: var(--marca-bg);
  color: var(--marca-text-muted);
  font: var(--marca-text-label-s);
}
.panel .mapa tbody tr:hover th[scope="row"] {
  background: var(--marca-bg);
}
.panel th.mapa-hoy {
  background: var(--marca-accent-subtle);
  color: var(--marca-accent);
  text-decoration: none;
}
.panel td.c-mapa-hoy {
  background: color-mix(in oklab, var(--marca-accent-subtle) 45%, transparent);
}
/* Barra: pastilla de 34 px dentro de la celda (el td hace de carril). */
.panel td.c-barra {
  padding: 6px 3px;
  border-radius: 0;
  border-inline-start: 0;
  background: transparent;
}
.panel td.c-barra a {
  display: flex;
  align-items: center;
  gap: var(--marca-space-1);
  block-size: 34px;
  padding: 0 var(--marca-space-2);
  border: 1px solid color-mix(in oklab, var(--b-borde) 40%, transparent);
  border-inline-start: 4px solid var(--b-borde);
  border-radius: var(--marca-radius-s);
  background: var(--b-fondo);
  color: var(--b-texto);
  font: var(--marca-text-label-s);
  box-shadow: var(--marca-shadow-1);
  transition:
    box-shadow var(--marca-duration-fast, 120ms),
    transform var(--marca-duration-fast, 120ms);
}
.panel td.c-barra a:hover {
  box-shadow: var(--marca-shadow-2);
  transform: translateY(-1px);
}
.panel td.c-barra a:focus-visible {
  outline: none;
  box-shadow: var(--c-anillo);
}
.panel .c-barra__titular {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
.panel .mapa td.celda-bloqueada:not(.c-barra) {
  background: repeating-linear-gradient(
    135deg,
    var(--marca-reserva-bloqueada-bg) 0 6px,
    color-mix(in oklab, var(--marca-reserva-bloqueada-bg) 60%, var(--marca-surface)) 6px 12px
  );
  color: var(--marca-reserva-bloqueada-text);
}
.panel a.c-mapa__libre {
  display: grid;
  place-items: center;
  block-size: 34px;
}
.panel .c-mapa__seleccion {
  border-color: var(--c-borde-seleccion);
  border-radius: var(--marca-radius-l);
  background: var(--marca-primary-subtle);
  box-shadow: var(--marca-shadow-1);
}

/* ─────────────────────────────────────────────────────────────────────────────
   UI26-4 · Reserva: cabecera fija con lo esencial, secciones como tarjetas y ritmo vertical.
   ───────────────────────────────────────────────────────────────────────────── */
.panel .c-reserva__cabeza {
  position: sticky;
  top: 0;
  z-index: var(--marca-z-sticky, 10);
  padding: var(--marca-space-5) var(--marca-space-6) var(--marca-space-3);
  border-color: var(--c-borde-suave);
  box-shadow: var(--marca-shadow-2);
}
.panel .c-reserva__titular {
  font: var(--marca-text-heading-m);
  letter-spacing: -0.01em;
}
.panel .c-reserva__cabeza .c-pestanas {
  margin-block-start: var(--marca-space-1);
}
.panel .c-reserva__cabeza .c-pestanas a {
  border-radius: var(--marca-radius-s);
}
.c-reserva__contenido .estado {
  scroll-margin-top: 200px;
}
@media (min-width: 1280px) {
  /* Los datos de la reserva en dos columnas para acortar la página. */
  .c-reserva__contenido #datos .datos-lista {
    grid-template-columns: minmax(140px, max-content) 1fr minmax(140px, max-content) 1fr;
  }
}
@media (max-width: 600px) {
  .panel .estado {
    padding: var(--marca-space-4);
  }
  .panel .c-reserva__cabeza {
    position: static;
    padding: var(--marca-space-4);
  }
  .panel .datos-lista {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .panel .datos-lista dd {
    margin-block-end: var(--marca-space-2);
  }
}

.boton:not(.boton-primario, .boton-acento, .boton-secundario, .boton-peligro, .c-boton) {
  border-color: var(--marca-border);
  background: var(--marca-surface);
  color: var(--marca-text);
  box-shadow: var(--marca-shadow-1);
}
.panel .mapa-contenedor {
  margin-block-end: var(--marca-space-6);
}
.panel .c-reserva__cabeza .c-grilla {
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  max-width: 600px;
}
.c-reserva__cabeza .c-kpi__valor {
  font-size: 18px;
}
.panel .mapa-contenedor + * {
  margin-block-start: var(--marca-space-6);
}
@media (max-width: 600px) {
  .panel .mapa th[scope="row"],
  .panel .mapa thead th:first-child {
    min-inline-size: 110px;
    padding-inline: var(--marca-space-2);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   UI26-5 · Página pública: hero display, galería XL, tarjetas de unidad y widget de reserva elevado.
   ───────────────────────────────────────────────────────────────────────────── */
.sitio {
  max-width: 1180px;
  padding-block: var(--marca-space-10) var(--marca-space-16);
}
.sitio-hero {
  margin-block-end: var(--marca-space-8);
}
.sitio-hero__sobre {
  margin: 0 0 var(--marca-space-2);
  color: var(--marca-text-muted);
  font: var(--marca-text-overline);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sitio .sitio-hero__titulo {
  max-width: 22ch;
  margin: 0;
  font: var(--marca-text-display-l);
  letter-spacing: -0.02em;
  font-variation-settings:
    "SOFT" 50,
    "WONK" 0;
  text-wrap: balance;
}
.sitio-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--marca-space-3) var(--marca-space-6);
  margin-block-start: var(--marca-space-4);
}
.sitio .sitio-hero__lugar {
  margin: 0;
}
.sitio-hero .sitio-cta {
  margin: 0;
}
.sitio-cta__lema {
  display: inline-flex;
  align-items: center;
  min-block-size: 28px;
  padding: 0 var(--marca-space-3);
  border-radius: var(--marca-radius-full);
  background: var(--marca-accent-subtle);
  font: var(--marca-text-label-m);
  font-weight: 600;
}
a.sitio-cta__boton {
  background: var(--marca-accent);
  color: var(--marca-on-accent);
}
.sitio-galeria img {
  border-radius: var(--marca-radius-m);
}
.sitio-galeria--mosaico {
  overflow: hidden;
  gap: var(--marca-space-2);
  border-radius: var(--marca-radius-xl);
}
.sitio-galeria--mosaico img {
  border-radius: 0;
}
.sitio h2 {
  margin: var(--marca-space-10) 0 var(--marca-space-4);
  font: var(--marca-text-heading-m);
  letter-spacing: -0.01em;
}
.sitio-contenido > .sitio-texto:first-child {
  margin-top: 0;
  font: var(--marca-text-body-l);
  color: var(--marca-text);
}
.sitio .tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--marca-space-4);
}
.sitio .tarjeta {
  margin: 0;
  padding: var(--marca-space-5);
  border: 1px solid var(--c-borde-suave);
  border-radius: var(--marca-radius-l);
  background: var(--marca-surface);
  box-shadow: var(--marca-shadow-1);
}
.sitio .tarjeta h3 {
  margin: 0 0 var(--marca-space-2);
  font: var(--marca-text-heading-s);
}
.sitio .tarjeta p {
  margin: var(--marca-space-1) 0;
  color: var(--marca-text-muted);
}
.sitio .tarjeta strong {
  color: var(--marca-text);
  font-variant-numeric: tabular-nums;
}
.sitio-servicios {
  gap: var(--marca-space-2);
}
.sitio-servicios .insignia {
  display: inline-flex;
  align-items: center;
  gap: var(--marca-space-2);
  min-block-size: 36px;
  padding: 0 var(--marca-space-4);
  border: 1px solid var(--c-borde-suave);
  border-radius: var(--marca-radius-full);
  background: var(--marca-surface);
  color: var(--marca-text);
  font: var(--marca-text-label-m);
}
.sitio-servicios .insignia::before {
  content: "✓";
  color: var(--marca-primary);
  font-weight: 700;
}
.sitio-disponibilidad {
  padding: var(--marca-space-6);
  border: 1px solid var(--c-borde-suave);
  border-radius: var(--marca-radius-xl);
  background: var(--marca-surface);
  box-shadow: var(--marca-shadow-3);
}
.sitio .sitio-disponibilidad h2 {
  margin: 0 0 var(--marca-space-4);
  font: var(--marca-text-heading-s);
}
.sitio .sitio-disponibilidad .boton,
.checkout .checkout-cta {
  inline-size: 100%;
  min-block-size: var(--marca-size-control-l, 48px);
  font: var(--marca-text-label-m);
  font-weight: 600;
}
.sitio .sitio-disponibilidad .tarjeta {
  box-shadow: none;
  background: var(--marca-bg);
}
.sitio input,
.checkout input {
  box-sizing: border-box;
  inline-size: 100%;
  min-height: var(--marca-size-control-l, 48px);
  padding: 0 var(--marca-space-3);
  border: 1px solid var(--marca-border);
  border-radius: var(--marca-radius-m);
  background: var(--marca-surface);
  font: var(--marca-text-body-m);
}
.sitio input:focus-visible,
.checkout input:focus-visible {
  outline: none;
  border-color: var(--marca-focus-ring);
  box-shadow: var(--c-anillo);
}
@media (min-width: 1024px) {
  .sitio-widget .sitio-disponibilidad {
    box-shadow: var(--marca-shadow-3);
  }
  .sitio-cuerpo:has(.sitio-widget) {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--marca-space-12);
  }
}
@media (max-width: 719px) {
  .sitio {
    padding-block-start: var(--marca-space-6);
  }
  .sitio .sitio-hero__titulo {
    font: var(--marca-text-display-m);
  }
  .sitio-galeria--mosaico,
  .sitio-galeria {
    margin-inline: calc(-1 * var(--marca-space-6));
    border-radius: 0;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   UI26-6 · Checkout: título display, pasos, formulario de 560 px y resumen elevado tipo Stripe.
   ───────────────────────────────────────────────────────────────────────────── */
main.panel:has(> .checkout) {
  max-width: 1040px;
  padding-block-start: var(--marca-space-10);
}
main.panel:has(> .checkout) > h1 {
  max-width: 24ch;
  margin-block-end: var(--marca-space-8);
  font: var(--marca-text-display-m);
  letter-spacing: -0.015em;
  font-variation-settings:
    "SOFT" 50,
    "WONK" 0;
}
.checkout-datos {
  max-width: 560px;
}
.checkout-datos h2 {
  margin: 0 0 var(--marca-space-4);
  font: var(--marca-text-heading-s);
}
.checkout .formulario {
  max-width: none;
}
.checkout-pasos {
  display: flex;
  gap: var(--marca-space-2);
  margin: 0 0 var(--marca-space-6);
  padding: 0;
  list-style: none;
  counter-reset: paso;
  font: var(--marca-text-label-s);
  color: var(--marca-text-subtle);
}
.checkout-pasos li {
  display: inline-flex;
  align-items: center;
  gap: var(--marca-space-2);
  counter-increment: paso;
}
.checkout-pasos li + li::before {
  content: "";
  inline-size: 24px;
  block-size: 1px;
  background: var(--marca-border-strong);
}
.checkout-pasos li::after {
  content: counter(paso);
  order: -1;
  display: inline-grid;
  place-items: center;
  inline-size: 20px;
  block-size: 20px;
  border-radius: var(--marca-radius-full);
  background: var(--marca-bg-sunken);
  font-weight: 700;
}
.checkout-pasos li[aria-current="step"] {
  color: var(--marca-text);
  font-weight: 600;
}
.checkout-pasos li[aria-current="step"]::after {
  background: var(--marca-primary);
  color: var(--marca-on-primary);
}
.checkout-seguro {
  display: flex;
  gap: var(--marca-space-2);
  justify-content: center;
  text-align: center;
}
.checkout-seguro::before {
  content: "🔒";
}
.checkout-volver {
  color: var(--marca-text-muted);
  font: var(--marca-text-label-m);
  text-decoration: none;
}
.checkout .checkout-resumen {
  padding: var(--marca-space-6);
  border: 1px solid var(--c-borde-suave);
  border-radius: var(--marca-radius-xl);
  background: var(--marca-surface);
  box-shadow: var(--marca-shadow-3);
}
.checkout-resumen h2 {
  font: var(--marca-text-heading-m);
}
.checkout-resumen__datos {
  font-variant-numeric: tabular-nums;
}
.checkout .checkout-resumen__total {
  margin-block-start: var(--marca-space-4);
  padding-block-start: var(--marca-space-4);
  font: var(--marca-text-heading-s);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 900px) {
  .checkout {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--marca-space-12);
  }
}
.checkout-pasos li + li::before {
  order: -2;
}
.checkout .checkout-seguro {
  margin-block: calc(-1 * var(--marca-space-2)) var(--marca-space-2);
}

/* ─────────────────────────────────────────────────────────────────────────────
   UI26-7 · Mapa: leyenda que filtra y bloqueo en panel lateral.
   ───────────────────────────────────────────────────────────────────────────── */
.panel .c-mapa__leyenda {
  margin: 0 0 var(--marca-space-3);
  padding: 0;
  border: 0;
}
.c-filtro {
  gap: var(--marca-space-1-5, 6px);
  cursor: pointer;
  user-select: none;
}
.panel .c-filtro input {
  inline-size: 14px;
  block-size: 14px;
  margin: 0;
}
.c-filtro:has(input:not(:checked)) {
  opacity: 0.55;
  text-decoration: line-through;
}
.c-filtro:has(input:focus-visible) {
  box-shadow: var(--c-anillo);
}
.panel:has(#f-ocupada:not(:checked)) .mapa td.celda-ocupada > a,
.panel:has(#f-vencida:not(:checked)) .mapa td.celda-vencida > a {
  opacity: 0.12;
}
.panel:has(#f-bloqueada:not(:checked)) .mapa td.celda-bloqueada {
  background: transparent;
  color: transparent;
}
@media (min-width: 1280px) {
  .c-mapa__cuerpo:has(> .c-mapa__panel) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--marca-space-5);
    align-items: start;
  }
  .c-mapa__cuerpo > .mapa-contenedor {
    margin: 0;
  }
  .panel .c-mapa__cuerpo > .c-mapa__panel {
    position: sticky;
    top: var(--marca-space-4);
    margin: 0;
    padding: var(--marca-space-5);
  }
  .c-mapa__panel .formulario-linea {
    display: grid;
    grid-template-columns: 1fr;
  }
  .c-mapa__panel .formulario-linea .boton {
    inline-size: 100%;
  }
  .c-mapa__panel ul {
    margin: var(--marca-space-4) 0 0;
    padding: 0;
    list-style: none;
    font: var(--marca-text-body-s);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   UI26-8 · Reserva en dos columnas: contenido a la izquierda, resumen fijo a la derecha.
   ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
  .c-reserva__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--marca-space-6);
    align-items: start;
  }
  .panel .c-reserva__layout > .c-reserva__cabeza {
    grid-column: 2;
    grid-row: 1;
    top: var(--marca-space-4);
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    padding: var(--marca-space-5);
    box-shadow: var(--marca-shadow-2);
  }
  .panel .c-reserva__layout .c-reserva__cabeza .c-grilla {
    grid-template-columns: 1fr;
    gap: var(--marca-space-2);
    max-width: none;
    flex: none;
  }
  .panel .c-reserva__layout .c-reserva__cabeza .c-kpi {
    grid-template-columns: 1fr auto;
    align-items: baseline;
    padding: var(--marca-space-2) var(--marca-space-3);
  }
  .c-reserva__layout .c-reserva__accion {
    align-self: stretch;
  }
  .panel .c-reserva__layout .c-reserva__cabeza .c-pestanas {
    flex-direction: column;
    padding-top: var(--marca-space-3);
  }
  .c-reserva__contenido {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  .c-reserva__contenido #datos .datos-lista {
    grid-template-columns: minmax(140px, max-content) 1fr;
  }
}

/* UI26-9 · Precio «desde» arriba de la tarjeta de reserva pública. */
.sitio-disponibilidad__precio {
  display: flex;
  align-items: baseline;
  gap: var(--marca-space-1-5, 6px);
  margin: 0 0 var(--marca-space-3);
  padding-block-end: var(--marca-space-3);
  border-bottom: 1px solid var(--c-borde-suave);
  color: var(--marca-text-muted);
}
.sitio-disponibilidad__precio strong {
  color: var(--marca-text);
  font: var(--marca-text-heading-m);
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────────────────
   UI26-10 · Resto del panel y pantallas de acceso al sistema 2026.
   ───────────────────────────────────────────────────────────────────────────── */
/* Cifras de KPI: 32 px en general (40 solo en el inicio), sin desbordar con montos largos. */
.c-kpi__valor {
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.c-inicio__kpis .c-kpi__valor {
  font-size: 40px;
}
/* Formularios y listas sueltos (fuera de tarjeta) en el panel: se ven como tarjeta. */
.panel:has(> .c-lateral) > form:not(.c-sin-tarjeta),
.panel:has(> .c-lateral) > ul:not(.c-lateral, .lista-alojamientos),
.panel:has(> .c-lateral) > dl,
.panel:has(> .c-lateral) > section:not([class]) {
  margin-block: 0 var(--marca-space-6);
  padding: var(--marca-space-5) var(--marca-space-6);
  border: 1px solid var(--c-borde-suave);
  border-radius: var(--marca-radius-l);
  background: var(--marca-surface);
  box-shadow: var(--marca-shadow-1);
}
.panel:has(> .c-lateral) > ul:not(.c-lateral, .lista-alojamientos) {
  padding-inline-start: var(--marca-space-10);
}
.panel:has(> .c-lateral) > p:not(.migas, .bajada, .ayuda, .aviso) > a:only-child {
  font: var(--marca-text-label-m);
}
.panel .tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--marca-space-4);
}
.panel .tarjeta {
  padding: var(--marca-space-5);
  border: 1px solid var(--c-borde-suave);
  border-radius: var(--marca-radius-l);
  background: var(--marca-surface);
  box-shadow: var(--marca-shadow-1);
}
.insignia {
  display: inline-flex;
  align-items: center;
  min-block-size: 22px;
  padding: 0 var(--marca-space-2);
  border-radius: var(--marca-radius-full);
  background: var(--marca-primary-subtle);
  color: var(--marca-primary);
  font: var(--marca-text-label-s);
  font-weight: 600;
}
/* Mis alojamientos: tarjetas clicables. */
.panel .lista-alojamientos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--marca-space-4);
  padding: 0;
  list-style: none;
}
.panel .lista-alojamientos a {
  display: block;
  padding: var(--marca-space-5);
  border: 1px solid var(--c-borde-suave);
  border-radius: var(--marca-radius-l);
  background: var(--marca-surface);
  color: var(--marca-text-muted);
  box-shadow: var(--marca-shadow-1);
  text-decoration: none;
}
.panel .lista-alojamientos a strong {
  display: block;
  color: var(--marca-text);
  font: var(--marca-text-heading-s);
}
.panel .lista-alojamientos a:hover {
  border-color: var(--c-borde-hover);
  box-shadow: var(--marca-shadow-2);
}
/* Acceso (panel y huésped): tarjeta con radio XL y sombra, marca en Fraunces. */
.c-acceso__tarjeta {
  padding: var(--marca-space-8);
  border-color: var(--c-borde-suave);
  border-radius: var(--marca-radius-xl);
  box-shadow: var(--marca-shadow-3);
}
.panel .c-acceso__tarjeta h1 {
  margin: 0 0 var(--marca-space-5);
  font: var(--marca-text-heading-l);
  letter-spacing: -0.02em;
}
.c-acceso__tarjeta .formulario {
  max-width: none;
}
.c-acceso__tarjeta .boton-primario {
  inline-size: 100%;
  min-block-size: var(--marca-size-control-l, 48px);
}
.c-acceso__lema {
  font: var(--marca-text-display-m);
  letter-spacing: -0.015em;
  font-variation-settings:
    "SOFT" 50,
    "WONK" 0;
}
.c-acceso__puntos li {
  color: var(--marca-text-muted);
}
main.c-huesped-acceso {
  display: grid;
  place-items: center;
  min-height: 80vh;
}
.c-huesped-acceso .c-acceso__tarjeta {
  inline-size: min(100%, 440px);
}
.c-huesped-acceso .c-acceso__logo {
  margin-block-end: var(--marca-space-6);
  font: var(--marca-text-label-m);
  font-weight: 600;
  letter-spacing: 0.2em;
}
.panel .c-acceso__tarjeta input:not([type="checkbox"], [type="hidden"]) {
  min-height: var(--marca-size-control-l, 48px);
}
main.c-huesped {
  max-width: 880px;
}
.c-huesped .tarjeta-viaje {
  gap: var(--marca-space-3);
}
@media (max-width: 600px) {
  .c-acceso__tarjeta {
    padding: var(--marca-space-5);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   UI26-11 · QA de alineación (tools/qa-alineacion.mjs).
   ───────────────────────────────────────────────────────────────────────────── */
/* Alturas exactas de control (32/40/48): el borde entra en la altura. */
.boton,
.c-boton,
.panel input,
.panel select {
  box-sizing: border-box;
}
/* Cabecera y contenido con el mismo gutter; el texto del menú alineado con el logo. */
.panel:has(> .c-lateral) {
  padding-inline: var(--marca-space-6);
}
@media (min-width: 1024px) {
  .panel > .c-lateral {
    margin-inline-start: calc(-1 * var(--marca-space-3));
  }
}
@media (max-width: 600px) {
  .cabecera,
  .panel:has(> .c-lateral) {
    padding-inline: var(--marca-space-4);
  }
  .panel .c-reserva__cabeza .c-grilla {
    grid-template-columns: 1fr;
  }
  .panel .c-reserva__cabeza .c-kpi {
    grid-template-columns: 1fr auto;
    align-items: baseline;
  }
  /* Tablas anchas: se desplazan dentro de su caja en vez de desbordar la página. */
  .panel .tabla:not(.mapa) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}
/* Cifras: tabulares en todas las celdas (el shorthand `font` de .datos las reseteaba) y a la derecha. */
.tabla th,
.tabla td,
.datos {
  font-variant-numeric: tabular-nums;
}
.tabla .num,
.tabla td.num,
.tabla th.num {
  text-align: right;
  white-space: nowrap;
}
/* Rótulos en línea (label + control hermanos): centrados con el control y con el estilo de rótulo. */
.formulario-linea {
  align-items: flex-end;
}
.formulario-linea > label:not(.campo) {
  display: inline-flex;
  align-items: center;
  min-height: var(--marca-size-control-m, 40px);
  color: var(--marca-text-muted);
  font: var(--marca-text-label-m);
}
.formulario-linea > label:not(.campo) + :is(input, select) {
  margin-inline-start: calc(-1 * var(--marca-space-2));
}
.formulario-linea > .campo:has(> input[type="checkbox"]) {
  display: inline-flex;
  align-items: center;
  gap: var(--marca-space-2);
  min-height: var(--marca-size-control-m, 40px);
}
/* Caja: el formulario de movimientos como subpanel, no como caja punteada. */
.panel .c-caja__movimiento {
  padding: var(--marca-space-4);
  border: 1px solid var(--c-borde-suave);
  border-radius: var(--marca-radius-m);
  background: var(--marca-bg);
}
.panel .estado > p:has(> .c-boton:only-child, > .boton:only-child) {
  margin-block: var(--marca-space-4);
}
/* Encabezados de fila (th scope=row) con el peso del cuerpo, no en negrita de encabezado. */
.panel .tabla:not(.mapa) tbody th {
  font: var(--marca-text-body-m);
  font-weight: 500;
  color: var(--marca-text);
}
/* Ayuda debajo de una tabla: aire constante. */
.panel :is(table, .tabla) + .ayuda {
  margin-block-start: var(--marca-space-2);
}
/* Archivo: mismo alto que el resto de los controles. */
.panel input[type="file"] {
  min-height: var(--marca-size-control-m, 40px);
  padding: 4px;
  border: 1px dashed var(--marca-border);
  border-radius: var(--marca-radius-m);
  background: var(--marca-surface);
  font: var(--marca-text-body-s);
}
.panel input[type="file"]::file-selector-button {
  min-height: 30px;
  margin-inline-end: var(--marca-space-3);
  padding: 0 var(--marca-space-3);
  border: 1px solid var(--marca-border);
  border-radius: var(--marca-radius-s);
  background: var(--marca-bg);
  font: var(--marca-text-label-s);
  font-weight: 600;
}
a.sitio-cta__boton {
  box-sizing: border-box;
  min-height: var(--marca-size-control-m, 40px);
  padding: 0 var(--marca-space-5);
}
/* Pila vertical: título de sección → contenido con el mismo ritmo. */
.panel .estado > h3:first-child {
  margin-top: 0;
}
.panel :is(section, .estado) > h2:first-child {
  margin-top: 0;
}
.panel .tabla td.datos {
  white-space: nowrap;
}
@media (max-width: 600px) {
  /* Cabecera compacta: isotipo + cuenta en una sola línea. */
  .cabecera {
    min-height: 56px;
  }
  .cabecera .marca-nombre {
    display: none;
  }
  .cabecera .panel-nav {
    flex-wrap: nowrap;
    gap: var(--marca-space-3);
    font-size: 14px;
  }
  /* Formularios en línea: una columna, rótulo arriba del control, controles a todo el ancho. */
  .panel .formulario-linea {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--marca-space-1) 0;
    align-items: stretch;
  }
  .panel .formulario-linea > label:not(.campo) {
    min-height: 0;
    margin-block-start: var(--marca-space-2);
  }
  .panel .formulario-linea > label:not(.campo) + :is(input, select) {
    margin-inline-start: 0;
  }
  .panel .formulario-linea :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select),
  .panel .formulario-linea .campo {
    inline-size: 100%;
  }
  .panel .formulario-linea > :is(button, .boton, .c-boton) {
    margin-block-start: var(--marca-space-3);
    justify-self: start;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   UI26-13 · Barrido final: panel interno y páginas del huésped.
   ───────────────────────────────────────────────────────────────────────────── */
/* Listas de datos sin clase (detalle de alojamiento en el interno): igual que .datos-lista. */
.panel :is(dl:not([class]), dl.ficha) {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: var(--marca-space-2) var(--marca-space-6);
  margin: 0;
}
.panel :is(dl:not([class]), dl.ficha) dt {
  color: var(--marca-text-muted);
  font: var(--marca-text-label-m);
}
.panel :is(dl:not([class]), dl.ficha) dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
/* Tablas directas del panel con menú: se desplazan dentro de su ancho en vez de caer debajo del menú. */
.panel:has(> .c-lateral) > table.tabla {
  display: block;
  overflow-x: auto;
}
/* Desktop: con display:block la tabla se encogía a su contenido y no ocupaba el ancho (pasada 13/10). Al lado
   del menú ya tiene su ancho descontado; las celdas cortan palabras largas. */
@media (min-width: 1024px) {
  .panel:has(> .c-lateral) > table.tabla {
    display: table;
  }
}
/* Plegables (Editar …): fila con chevron, en tarjeta. */
.panel details:not(.c-lateral__plegable) {
  margin-block: 0 var(--marca-space-2);
  border: 1px solid var(--c-borde-suave);
  border-radius: var(--marca-radius-m);
  background: var(--marca-surface);
}
.panel details:not(.c-lateral__plegable) > summary {
  display: flex;
  align-items: center;
  gap: var(--marca-space-2);
  min-height: var(--marca-size-control-m, 40px);
  padding: 0 var(--marca-space-4);
  font: var(--marca-text-label-m);
  font-weight: 600;
  cursor: pointer;
}
.panel details:not(.c-lateral__plegable)[open] > summary {
  border-bottom: 1px solid var(--c-borde-suave);
}
.panel details:not(.c-lateral__plegable) > :not(summary) {
  margin: var(--marca-space-4);
}
/* Páginas sin menú (huésped: reserva, check-in, mensajes, Mis reservas): columna de lectura con tarjetas. */
main.panel:not(:has(> .c-lateral, > .checkout, > .c-acceso, > .c-acceso__tarjeta)) {
  max-width: 760px;
  padding-inline: var(--marca-space-6);
}
main.panel:not(:has(> .c-lateral)) > :is(section, form.formulario) {
  max-width: none;
  margin-block: var(--marca-space-6);
  padding: var(--marca-space-6);
  border: 1px solid var(--c-borde-suave);
  border-radius: var(--marca-radius-l);
  background: var(--marca-surface);
  box-shadow: var(--marca-shadow-1);
}
main.panel:not(:has(> .c-lateral)) > :is(section, form) > h2:first-child {
  margin-top: 0;
}
.panel .formulario > :is(button, .boton) {
  justify-self: start;
}
.panel textarea {
  inline-size: 100%;
  min-block-size: 96px;
  resize: vertical;
}
.panel .campo-casilla {
  display: flex;
  align-items: center;
  gap: var(--marca-space-2);
}
.c-huesped .tarjetas {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
@media (max-width: 600px) {
  main.panel:not(:has(> .c-lateral)) {
    padding-inline: var(--marca-space-4);
  }
  main.panel:not(:has(> .c-lateral)) > :is(section, form.formulario) {
    padding: var(--marca-space-4);
  }
}
/* Grupos de campos (verificación en el interno): borde suave y leyenda como rótulo de sección. */
.panel fieldset:not(.c-mapa__leyenda) {
  margin: 0 0 var(--marca-space-4);
  padding: var(--marca-space-4);
  border: 1px solid var(--c-borde-suave);
  border-radius: var(--marca-radius-m);
}
.panel fieldset:not(.c-mapa__leyenda) > legend {
  padding-inline: var(--marca-space-2);
  font: var(--marca-text-label-m);
  font-weight: 600;
}
@media (max-width: 600px) {
  .panel :is(dl:not([class]), dl.ficha) {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .panel :is(dl:not([class]), dl.ficha) dd + dt {
    margin-top: var(--marca-space-2);
  }
}

/* UI26-18 · Modo oscuro: los tonos de paleta fijos (insignias de limpieza, vista previa del sitio, bordes de
   hover/selección) pasan por variables que se invierten con el tema. En claro valen lo mismo que antes. */
:root {
  --c-exito-fondo: var(--marca-success-subtle);
  --c-exito-texto: var(--marca-exito-900);
  --c-error-fondo: var(--marca-danger-subtle);
  --c-error-texto: var(--marca-error-900);
  --c-aviso-fondo: var(--marca-warning-subtle);
  --c-aviso-texto: var(--marca-aviso-900);
  --c-borde-hover: var(--marca-monte-300);
  --c-borde-seleccion: var(--marca-monte-200);
}
[data-theme="dark"] {
  --c-exito-texto: var(--marca-success);
  --c-error-texto: var(--marca-danger);
  --c-aviso-texto: var(--marca-warning);
  --c-borde-hover: var(--marca-focus-ring);
  --c-borde-seleccion: var(--marca-primary);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-exito-texto: var(--marca-success);
    --c-error-texto: var(--marca-danger);
    --c-aviso-texto: var(--marca-warning);
    --c-borde-hover: var(--marca-focus-ring);
    --c-borde-seleccion: var(--marca-primary);
  }
}

/* H7: «Saltar al contenido», visible solo con foco. Ancla tras el menú lateral, sin caja propia. */
.c-salto {
  position: absolute;
  inset-block-start: var(--marca-space-2, 8px);
  inset-inline-start: var(--marca-space-2, 8px);
  z-index: 1000;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--marca-surface, #fff);
  color: inherit;
  transform: translateY(-200%);
}
.c-salto:focus {
  transform: none;
}
.c-ancla {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}
main:focus,
.c-ancla:focus {
  outline: none;
}

/* CPO-01: buscador y resultados del marketplace. */
.buscador {
  display: grid;
  gap: 12px;
}
.buscador__destino {
  flex: 2 1 220px;
}
.buscador__filtros summary {
  cursor: pointer;
  font-weight: 600;
}
.buscador__servicios {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  border: 0;
  padding: 0;
  margin: 8px 0 0;
}
.inicio-buscador {
  margin-block: 24px;
}
.buscar {
  display: grid;
  gap: 20px;
  max-inline-size: 1200px;
  margin-inline: auto;
  padding: 24px 16px;
}
.buscar__grilla {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: start;
}
.buscar__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.resultado__cabeza {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}
.resultado__cabeza h2 {
  margin: 0;
  font-size: 1.125rem;
}
.resultado__numero {
  display: inline-grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  border-radius: var(--marca-radius-full);
  background: var(--marca-primary-subtle);
  color: var(--marca-primary);
  font-size: 0.8rem;
}
.resultado__precio {
  font-variant-numeric: tabular-nums;
  margin: 4px 0 0;
}
.mapa-resultados {
  position: sticky;
  inset-block-start: 16px;
  margin: 0;
}
.mapa-resultados svg {
  inline-size: 100%;
  block-size: auto;
  display: block;
  border-radius: var(--marca-radius-m);
}
.mapa-fondo {
  fill: var(--marca-bg-sunken);
}
.mapa-punto {
  fill: var(--marca-primary);
  stroke: var(--marca-blanco);
  stroke-width: 0.6;
}
.mapa-punto--destacado {
  fill: var(--marca-accent);
}
.mapa-numero {
  fill: var(--marca-on-primary);
  font-size: 3px;
  font-weight: 700;
  pointer-events: none;
}
@media (max-width: 760px) {
  .buscar__grilla {
    grid-template-columns: 1fr;
  }
  .mapa-resultados {
    position: static;
    order: -1;
  }
}

/* CPO-02: calificaciones. */
.calificaciones {
  display: grid;
  gap: 16px;
  max-inline-size: 760px;
}
.calificacion h3 {
  margin: 0 0 4px;
  font-size: 1rem;
}
.c-estrellas {
  color: var(--marca-rating);
  letter-spacing: 1px;
}
.c-estrellas__vacias {
  color: var(--marca-border-strong);
}
.calificacion__categorias {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 0;
  list-style: none;
  margin: 8px 0;
}
.calificacion__texto {
  white-space: pre-line;
}
.calificacion__respuesta {
  border-inline-start: 3px solid var(--marca-primary-subtle);
  padding-inline-start: 12px;
}
.calificacion__puntaje {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}