/* ==========================================================================
   Vivac Aventura · estilos.css — componentes. Solo var(--token); sin literales.
   Breakpoints: 768px = --bp-tableta · 1024px = --bp-escritorio · 1280px = --bp-ancho
   ========================================================================== */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: var(--tamano-texto-m);
  line-height: var(--altura-linea-texto);
  color: var(--color-texto);
  background: var(--color-fondo);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--fuente-titulo); font-weight: var(--peso-semibold); line-height: var(--altura-linea-titulo); margin: 0; }
h1 { font-size: var(--tamano-texto-2xl); }
h2 { font-size: var(--tamano-texto-xl); }
h3 { font-size: var(--tamano-texto-l); }
h4 { font-size: var(--tamano-texto-m); }
p { margin: 0; }
a { color: var(--color-primario); text-underline-offset: var(--espacio-1); }
a:hover { color: var(--color-primario-hover); }
small, .texto-s { font-size: var(--tamano-texto-s); }
.texto-xs { font-size: var(--tamano-texto-xs); }
.texto-sec { color: var(--color-texto-secundario); }
.cifras, td.cifras, .cifra__valor, time { font-family: var(--fuente-mono-cifras); font-variant-numeric: tabular-nums; }
.semibold { font-weight: var(--peso-semibold); }
.medio { font-weight: var(--peso-medio); }
.visualmente-oculto { position: absolute; width: var(--borde-grosor); height: var(--borde-grosor); margin: calc(var(--borde-grosor) * -1); padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ico { width: var(--icono-m); height: var(--icono-m); flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico--s { width: var(--icono-s); height: var(--icono-s); }
.ico--l { width: var(--icono-l); height: var(--icono-l); }
hr { border: 0; border-top: var(--borde-grosor) solid var(--color-borde); margin: var(--espacio-4) 0; }

/* Foco visible, nunca tapado: offset exterior y scroll-margin bajo cabeceras fijas */
:focus-visible {
  outline: var(--foco-grosor) solid var(--color-foco);
  outline-offset: var(--foco-desplazamiento);
  box-shadow: 0 0 0 var(--foco-desplazamiento) var(--color-foco-interior);
  scroll-margin-top: calc(var(--cabecera-alto) + var(--espacio-4));
  scroll-margin-bottom: calc(var(--barra-inferior-alto) + var(--espacio-4));
}
.foco-demo { outline: var(--foco-grosor) solid var(--color-foco); outline-offset: var(--foco-desplazamiento); box-shadow: 0 0 0 var(--foco-desplazamiento) var(--color-foco-interior); }

/* ---------- Utilidades de layout ---------- */
.fila { display: flex; flex-wrap: wrap; gap: var(--espacio-3); align-items: center; }
.fila--entre { justify-content: space-between; }
.fila--fin { justify-content: flex-end; }
.fila--arriba { align-items: flex-start; }
.titulo-l { font-size: var(--tamano-texto-l); }
.titulo-seccion { font-size: var(--tamano-texto-s); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-texto-secundario); }
.pila { display: flex; flex-direction: column; gap: var(--espacio-3); }
.pila--s { gap: var(--espacio-2); }
.pila--l { gap: var(--espacio-6); }
.crece { flex: 1 1 auto; min-width: 0; }
.rejilla { display: grid; gap: var(--espacio-4); grid-template-columns: repeat(1, minmax(0, 1fr)); }
.rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.rejilla--auto { grid-template-columns: repeat(auto-fill, minmax(var(--tarjeta-min), 1fr)); }
.oculto-movil { display: none; }
.solo-movil { display: block; }
@media (min-width: 768px) {
  .rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .oculto-movil { display: initial; }
  div.oculto-movil, section.oculto-movil, ul.oculto-movil, table.oculto-movil { display: block; }
  table.oculto-movil { display: table; }
  .solo-movil { display: none; }
}

/* ---------- Armazón de la aplicación ---------- */
.app { min-height: 100vh; display: flex; flex-direction: column; background: var(--color-fondo); }
.cabecera {
  position: sticky; top: 0; z-index: 30;
  height: var(--cabecera-alto);
  display: flex; align-items: center; gap: var(--espacio-3);
  padding: 0 var(--espacio-4);
  background: var(--color-superficie);
  border-bottom: var(--borde-grosor) solid var(--color-borde);
}
.logo { display: inline-flex; align-items: center; gap: var(--espacio-2); text-decoration: none; color: var(--color-primario); font-family: var(--fuente-titulo); font-weight: var(--peso-semibold); font-size: var(--tamano-texto-l); letter-spacing: 0.01em; min-height: var(--target-min); }
.logo__img { height: var(--logo-alto); width: auto; display: block; flex: none; object-fit: contain; }
.logo__cuadrado { height: var(--logo-alto-grande); width: auto; max-width: 100%; display: block; object-fit: contain; } /* object-fit: si un contenedor flex lo estira, la imagen no se deforma */
.logo__texto { white-space: nowrap; }
.logo__centro { display: none; font-weight: var(--peso-normal); color: var(--color-texto-secundario); }
.cabecera__buscar { display: none; flex: 1 1 auto; max-width: calc(var(--formulario-ancho-max) / 1.5); }
.cabecera__fin { margin-left: auto; display: flex; align-items: center; gap: var(--espacio-2); }
.cuerpo { display: flex; flex: 1 1 auto; align-items: stretch; }
.barra-lateral { display: none; }
.contenido { flex: 1 1 auto; min-width: 0; padding: var(--espacio-4); padding-bottom: calc(var(--barra-inferior-alto) + var(--espacio-6)); max-width: var(--contenido-ancho-max); }
.contenido--estrecho { max-width: var(--formulario-ancho-max); }
.barra-inferior {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: var(--barra-inferior-alto);
  display: flex; justify-content: space-around; align-items: stretch;
  background: var(--color-superficie);
  border-top: var(--borde-grosor) solid var(--color-borde);
}
.barra-inferior__item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--espacio-1); min-width: var(--control-alto-movil); text-decoration: none; color: var(--color-texto-secundario); font-size: var(--tamano-texto-xs); font-weight: var(--peso-medio); }
.barra-inferior__item[aria-current="page"] { color: var(--color-primario); box-shadow: inset 0 var(--borde-grosor-fuerte) 0 var(--color-primario); }
.nav__lista { list-style: none; margin: 0; padding: var(--espacio-2); display: flex; flex-direction: column; gap: var(--espacio-1); }
.nav__item { display: flex; align-items: center; gap: var(--espacio-3); min-height: var(--control-alto-escritorio); padding: 0 var(--espacio-3); border-radius: var(--radio-m); text-decoration: none; color: var(--color-texto); font-weight: var(--peso-medio); font-size: var(--tamano-texto-s); }
.nav__item:hover { background: var(--color-superficie-hover); color: var(--color-texto); }
.nav__item[aria-current="page"] { background: var(--color-primario-suave); color: var(--color-primario); }
.nav__seccion { padding: var(--espacio-4) var(--espacio-3) var(--espacio-1); font-size: var(--tamano-texto-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-texto-secundario); font-weight: var(--peso-semibold); }
.nav__plegar { margin-top: auto; }
/* Submenú del cuadrante (pasada 3 · revisión de UI): siempre visible, indentado; el padre marca sección abierta */
.nav__sublista { list-style: none; margin: 0; padding: 0 0 0 var(--espacio-6); display: flex; flex-direction: column; gap: var(--borde-grosor-fuerte); }
.nav__item--sub { min-height: var(--espacio-8); font-size: var(--tamano-texto-s); }
.nav__item--abierto { color: var(--color-primario); }
.barra-lateral--plegada .nav__sublista { padding-left: 0; }
/* Salto al contenido (WCAG 2.4.1): oculto hasta recibir el foco */
.salto { position: absolute; left: var(--espacio-2); top: var(--espacio-2); z-index: 300; padding: var(--espacio-2) var(--espacio-3); background: var(--color-primario); color: var(--color-sobre-primario); border-radius: var(--radio-m); font-weight: var(--peso-semibold); text-decoration: none; transform: translateY(-300%); transition: transform var(--transicion); }
.salto:focus { transform: none; }
@media (min-width: 1024px) {
  .cabecera__buscar { display: block; }
  .logo__centro { display: inline; }
  .barra-lateral { display: flex; flex-direction: column; flex: none; width: var(--barra-lateral-ancho); background: var(--color-superficie); border-right: var(--borde-grosor) solid var(--color-borde); }
  .barra-inferior { display: none; }
  .contenido { padding: var(--espacio-6); padding-bottom: var(--espacio-10); }
}
.pagina-cabecera { display: flex; flex-wrap: wrap; gap: var(--espacio-3); align-items: center; justify-content: space-between; margin-bottom: var(--espacio-4); }
.pagina-cabecera h1 { font-size: var(--tamano-texto-xl); }
@media (min-width: 768px) { .pagina-cabecera h1 { font-size: var(--tamano-texto-2xl); } }
.migas { display: flex; flex-wrap: wrap; gap: var(--espacio-2); font-size: var(--tamano-texto-s); color: var(--color-texto-secundario); list-style: none; padding: 0; margin: 0 0 var(--espacio-2); }
.migas li + li::before { content: "/"; margin-right: var(--espacio-2); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espacio-2);
  min-height: var(--control-alto-movil); padding: 0 var(--espacio-4);
  border-radius: var(--radio-m); border: var(--borde-grosor) solid transparent;
  font: inherit; font-weight: var(--peso-medio); font-size: var(--tamano-texto-m);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
@media (min-width: 1024px) { .btn { min-height: var(--control-alto-escritorio); font-size: var(--tamano-texto-s); } }
.btn--primario { background: var(--color-primario); color: var(--color-sobre-primario); }
.btn--primario:hover { background: var(--color-primario-hover); color: var(--color-sobre-primario); }
.btn--primario:active, .btn--primario.es-activo { background: var(--color-primario-activo); }
.btn--secundario { background: var(--color-superficie); color: var(--color-primario); border-color: var(--color-borde-fuerte); }
.btn--secundario:hover { background: var(--color-primario-suave); }
.btn--secundario:active, .btn--secundario.es-activo { background: var(--color-superficie-seleccion); border-color: var(--color-primario); }
.btn--terciario { background: transparent; color: var(--color-primario); }
.btn--terciario:hover { background: var(--color-primario-suave); }
.btn--terciario:active, .btn--terciario.es-activo { background: var(--color-superficie-seleccion); }
.btn--peligro { background: var(--color-error); color: var(--color-texto-inverso); }
.btn--peligro:hover { background: var(--color-reserva-cancelada-texto); color: var(--color-texto-inverso); }
.btn--peligro-secundario { background: var(--color-superficie); color: var(--color-error); border-color: var(--color-error); }
.btn--peligro-secundario:hover { background: var(--color-error-suave); }
.btn--icono { padding: 0; width: var(--control-alto-movil); }
@media (min-width: 1024px) { .btn--icono { width: var(--control-alto-escritorio); } }
.btn--s { min-height: var(--target-min); padding: 0 var(--espacio-2); font-size: var(--tamano-texto-s); }
.btn--bloque { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--color-superficie-hover); color: var(--color-texto-deshabilitado); border-color: transparent; cursor: not-allowed; }
.btn .ico { width: var(--icono-m); height: var(--icono-m); }
.acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-2); }
.acciones--fin { justify-content: flex-end; }
.acciones--fijas { position: sticky; bottom: var(--barra-inferior-alto); background: var(--color-superficie); padding: var(--espacio-3) var(--espacio-4); margin: 0 calc(var(--espacio-4) * -1); border-top: var(--borde-grosor) solid var(--color-borde); z-index: 20; }
@media (min-width: 1024px) { .acciones--fijas { bottom: 0; margin: 0 calc(var(--espacio-6) * -1); padding: var(--espacio-3) var(--espacio-6); } }

/* ---------- Campos de formulario ---------- */
.campo { display: flex; flex-direction: column; gap: var(--espacio-1); min-width: 0; }
.campo__etiqueta { font-weight: var(--peso-medio); font-size: var(--tamano-texto-s); color: var(--color-texto); }
.campo__etiqueta .req { color: var(--color-error); margin-left: var(--espacio-1); }
.campo__ayuda { font-size: var(--tamano-texto-s); color: var(--color-texto-secundario); }
.campo__error { display: flex; align-items: center; gap: var(--espacio-1); font-size: var(--tamano-texto-s); color: var(--color-error); font-weight: var(--peso-medio); }
.control {
  width: 100%; min-height: var(--control-alto-movil); padding: 0 var(--espacio-3);
  font: inherit; font-size: var(--tamano-texto-m); color: var(--color-texto);
  background: var(--color-superficie); border: var(--borde-grosor) solid var(--color-borde-fuerte); border-radius: var(--radio-m);
}
textarea.control { min-height: calc(var(--control-alto-movil) * 2.5); padding: var(--espacio-2) var(--espacio-3); resize: vertical; line-height: var(--altura-linea-texto); }
select.control { appearance: none; padding-right: var(--espacio-10); background-image: linear-gradient(45deg, transparent 50%, var(--color-texto-secundario) 50%), linear-gradient(135deg, var(--color-texto-secundario) 50%, transparent 50%); background-position: calc(100% - var(--espacio-5)) calc(50% - var(--espacio-1) / 2), calc(100% - var(--espacio-4)) calc(50% - var(--espacio-1) / 2); background-size: var(--espacio-1) var(--espacio-1); background-repeat: no-repeat; }
.control:hover { border-color: var(--color-texto); }
.control[readonly] { background: var(--color-fondo); border-style: dashed; }
.control:disabled { background: var(--color-superficie-hover); color: var(--color-texto-deshabilitado); border-color: var(--color-borde); cursor: not-allowed; }
.campo--error .control { border-color: var(--color-error); border-width: var(--borde-grosor-fuerte); }
.control--s { min-height: var(--control-alto-escritorio); font-size: var(--tamano-texto-s); }
.control--corto { max-width: calc(var(--espacio-12) * 2.5); }
.control--cifra { text-align: right; font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) { .control { min-height: var(--control-alto-escritorio); font-size: var(--tamano-texto-s); } }
.grupo-fecha-hora { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-2); }
.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--espacio-2); }
.fieldset > legend { font-weight: var(--peso-medio); font-size: var(--tamano-texto-s); padding: 0; margin-bottom: var(--espacio-1); }
.opcion { display: flex; align-items: center; gap: var(--espacio-3); min-height: var(--control-alto-movil); cursor: pointer; }
.opcion input { width: var(--target-min); height: var(--target-min); margin: 0; accent-color: var(--color-primario); flex: none; }
.opcion--en-linea { display: inline-flex; margin-right: var(--espacio-4); }
.interruptor { display: inline-flex; align-items: center; gap: var(--espacio-3); min-height: var(--control-alto-movil); cursor: pointer; }
.interruptor__pista { position: relative; width: calc(var(--target-min) * 2); height: var(--target-min); background: var(--color-borde-fuerte); border-radius: var(--radio-redondo); flex: none; transition: background var(--transicion); }
.interruptor__pista::after { content: ""; position: absolute; top: var(--borde-grosor-fuerte); left: var(--borde-grosor-fuerte); width: calc(var(--target-min) - var(--borde-grosor-fuerte) * 2); height: calc(var(--target-min) - var(--borde-grosor-fuerte) * 2); background: var(--color-superficie); border-radius: var(--radio-redondo); transition: transform var(--transicion); }
.interruptor input { position: absolute; opacity: 0; width: var(--target-min); height: var(--target-min); }
.interruptor input:checked + .interruptor__pista { background: var(--color-primario); }
.interruptor input:checked + .interruptor__pista::after { transform: translateX(var(--target-min)); }
.interruptor input:focus-visible + .interruptor__pista { outline: var(--foco-grosor) solid var(--color-foco); outline-offset: var(--foco-desplazamiento); }
.interruptor input:disabled + .interruptor__pista { background: var(--color-borde); }
.formulario { display: flex; flex-direction: column; gap: var(--espacio-5); }
.formulario__fila { display: grid; gap: var(--espacio-4); grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 768px) { .formulario__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); } .formulario__fila--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.buscar { position: relative; }
.buscar .control { padding-left: var(--espacio-10); }
.buscar .ico { position: absolute; left: var(--espacio-3); top: 50%; transform: translateY(-50%); color: var(--color-texto-secundario); pointer-events: none; }

/* ---------- Chips, etiquetas, badges, avatar ---------- */
.chip { display: inline-flex; align-items: center; gap: var(--espacio-1); min-height: var(--target-min); padding: 0 var(--espacio-2); border-radius: var(--radio-s); font-size: var(--tamano-texto-s); font-weight: var(--peso-medio); white-space: nowrap; line-height: var(--altura-linea-compacta); }
.chip .ico { width: var(--icono-s); height: var(--icono-s); }
.chip--solicitud { background: var(--color-reserva-solicitud); color: var(--color-reserva-solicitud-texto); }
.chip--prerreserva { background: var(--color-reserva-prerreserva); color: var(--color-reserva-prerreserva-texto); }
.chip--fianza { background: var(--color-reserva-fianza); color: var(--color-reserva-fianza-texto); }
.chip--pagada { background: var(--color-reserva-pagada); color: var(--color-reserva-pagada-texto); }
.chip--terminada { background: var(--color-reserva-terminada); color: var(--color-reserva-terminada-texto); }
.chip--cancelada { background: var(--color-reserva-cancelada); color: var(--color-reserva-cancelada-texto); text-decoration: line-through; }
.chip--devuelta { background: var(--color-reserva-devuelta); color: var(--color-reserva-devuelta-texto); }
.chip--retenida { background: var(--color-reserva-retenida); color: var(--color-reserva-retenida-texto); }
.chip--neutro { background: var(--color-superficie-hover); color: var(--color-texto-secundario); }
.chip--exito { background: var(--color-exito-suave); color: var(--color-exito); }
.chip--aviso { background: var(--color-aviso-suave); color: var(--color-aviso); }
.chip--error { background: var(--color-error-suave); color: var(--color-error); }
.chip--info { background: var(--color-info-suave); color: var(--color-info); }
.chip--filtro { background: var(--color-superficie); border: var(--borde-grosor) solid var(--color-borde-fuerte); color: var(--color-texto); cursor: pointer; }
.chip--filtro[aria-pressed="true"] { background: var(--color-primario-suave); border-color: var(--color-primario); color: var(--color-primario); }
.chip-cliente { display: inline-flex; align-items: center; justify-content: center; width: var(--target-min); height: var(--target-min); border-radius: var(--radio-s); font-size: var(--tamano-texto-xs); font-weight: var(--peso-semibold); }
.chip-cliente--e { background: var(--color-cliente-e); color: var(--color-cliente-e-texto); }
.chip-cliente--c { background: var(--color-cliente-c); color: var(--color-cliente-c-texto); }
.chip-cliente--p { background: var(--color-cliente-p); color: var(--color-cliente-p-texto); }
.rol { display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0 var(--espacio-2); border: var(--borde-grosor) solid var(--color-borde-fuerte); border-radius: var(--radio-redondo); font-size: var(--tamano-texto-xs); font-weight: var(--peso-medio); color: var(--color-texto-secundario); white-space: nowrap; }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: var(--target-min); height: var(--target-min); padding: 0 var(--espacio-2); border-radius: var(--radio-redondo); background: var(--color-primario); color: var(--color-sobre-primario); font-size: var(--tamano-texto-xs); font-weight: var(--peso-semibold); font-variant-numeric: tabular-nums; }
.badge--aviso { background: var(--color-aviso); }
.badge--error { background: var(--color-error); }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: var(--avatar); height: var(--avatar); border-radius: var(--radio-redondo); background: var(--color-primario-suave); color: var(--color-primario); font-size: var(--tamano-texto-xs); font-weight: var(--peso-semibold); flex: none; letter-spacing: 0.02em; }
.avatar--turno { background: var(--color-turno); color: var(--color-turno-texto); }
.tooltip { position: relative; display: inline-flex; }
.tooltip__texto { position: absolute; bottom: calc(100% + var(--espacio-2)); left: 50%; transform: translateX(-50%); background: var(--color-texto); color: var(--color-texto-inverso); padding: var(--espacio-1) var(--espacio-2); border-radius: var(--radio-s); font-size: var(--tamano-texto-xs); white-space: nowrap; }
.ocupacion { display: inline-flex; align-items: center; gap: var(--espacio-1); min-height: var(--target-min); padding: 0 var(--espacio-2); border-radius: var(--radio-s); font-size: var(--tamano-texto-xs); font-weight: var(--peso-semibold); font-variant-numeric: tabular-nums; border: var(--borde-grosor) solid var(--color-borde); }
.ocupacion-0 { background: var(--color-ocupacion-0); color: var(--color-ocupacion-0-texto); }
.ocupacion-1 { background: var(--color-ocupacion-1); color: var(--color-ocupacion-1-texto); }
.ocupacion-2 { background: var(--color-ocupacion-2); color: var(--color-ocupacion-2-texto); }
.ocupacion-3 { background: var(--color-ocupacion-3); color: var(--color-ocupacion-3-texto); }
.ocupacion-4 { background: var(--color-ocupacion-4); color: var(--color-ocupacion-4-texto); }
.ocupacion-5 { background-color: var(--color-ocupacion-5); background-image: var(--patron-rayas); color: var(--color-ocupacion-5-texto); }
.barra-progreso { height: var(--espacio-2); background: var(--color-superficie-hover); border-radius: var(--radio-redondo); overflow: hidden; }
.barra-progreso__relleno { height: 100%; background: var(--color-primario); border-radius: var(--radio-redondo); }

/* ---------- Tarjetas, paneles, secciones ---------- */
.tarjeta { background: var(--color-superficie); border: var(--borde-grosor) solid var(--color-borde); border-radius: var(--radio-l); padding: var(--espacio-4); }
.tarjeta--elevada { box-shadow: var(--sombra-2); border-color: transparent; }
.tarjeta__cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espacio-2); margin-bottom: var(--espacio-3); }
.tarjeta__titulo { font-size: var(--tamano-texto-m); font-weight: var(--peso-semibold); }
.tarjeta--enlace { display: block; text-decoration: none; color: inherit; }
.tarjeta--enlace:hover { border-color: var(--color-primario); color: inherit; }
.cifra { display: flex; flex-direction: column; gap: var(--espacio-1); }
.cifra__etiqueta { font-size: var(--tamano-texto-s); color: var(--color-texto-secundario); font-weight: var(--peso-medio); }
.cifra__valor { font-size: var(--tamano-texto-2xl); font-weight: var(--peso-semibold); line-height: var(--altura-linea-titulo); }
.cifra__valor--xl { font-size: var(--tamano-texto-3xl); }
.cifra__nota { font-size: var(--tamano-texto-s); color: var(--color-texto-secundario); }
.lista-datos { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: var(--espacio-1) var(--espacio-4); margin: 0; font-size: var(--tamano-texto-s); }
.lista-datos dt { color: var(--color-texto-secundario); font-weight: var(--peso-medio); }
.lista-datos dd { margin: 0; }
.seccion { display: flex; flex-direction: column; gap: var(--espacio-3); }
.seccion__titulo { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-2); }

/* ---------- Alertas, toasts, estados ---------- */
.alerta { display: flex; gap: var(--espacio-3); align-items: flex-start; padding: var(--espacio-3) var(--espacio-4); border-radius: var(--radio-m); border: var(--borde-grosor) solid; font-size: var(--tamano-texto-s); }
.alerta .ico { margin-top: var(--borde-grosor-fuerte); }
.alerta__titulo { font-weight: var(--peso-semibold); }
.alerta--info { background: var(--color-info-suave); border-color: var(--color-info); color: var(--color-info); }
.alerta--exito { background: var(--color-exito-suave); border-color: var(--color-exito); color: var(--color-exito); }
.alerta--aviso { background: var(--color-aviso-suave); border-color: var(--color-aviso); color: var(--color-aviso); }
.alerta--error { background: var(--color-error-suave); border-color: var(--color-error); color: var(--color-error); }
.alerta .btn { margin-left: auto; }
.toast { display: inline-flex; gap: var(--espacio-3); align-items: center; padding: var(--espacio-3) var(--espacio-4); border-radius: var(--radio-m); background: var(--color-texto); color: var(--color-texto-inverso); box-shadow: var(--sombra-3); font-size: var(--tamano-texto-s); max-width: 100%; }
.toast .btn { color: var(--color-texto-inverso); }
.estado-vacio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--espacio-3); padding: var(--espacio-10) var(--espacio-4); color: var(--color-texto-secundario); border: var(--borde-grosor) dashed var(--color-borde-fuerte); border-radius: var(--radio-l); background: var(--color-superficie); }
.estado-vacio .ico { width: var(--espacio-10); height: var(--espacio-10); stroke-width: 1.5; }
.estado-vacio h3 { color: var(--color-texto); }
.esqueleto { display: block; background: linear-gradient(90deg, var(--color-superficie-hover), var(--color-borde), var(--color-superficie-hover)); background-size: 200% 100%; border-radius: var(--radio-s); animation: esqueleto 1.4s infinite; height: var(--espacio-4); }
@keyframes esqueleto { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .esqueleto { animation: none; } }

/* ---------- Diálogos ---------- */
.dialogo-fondo { background: var(--color-velo); padding: var(--espacio-4); display: flex; align-items: center; justify-content: center; border-radius: var(--radio-l); }
.dialogo { width: 100%; max-width: calc(var(--formulario-ancho-max) * 0.8); background: var(--color-superficie-elevada); border-radius: var(--radio-l); box-shadow: var(--sombra-3); padding: var(--espacio-5); display: flex; flex-direction: column; gap: var(--espacio-4); }
.dialogo__cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--espacio-3); }
.dialogo__acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--espacio-2); }

/* ---------- Pestañas, pasos, paginación ---------- */
.pestanas { display: flex; gap: var(--espacio-1); border-bottom: var(--borde-grosor) solid var(--color-borde); overflow-x: auto; }
.pestana { display: inline-flex; align-items: center; gap: var(--espacio-2); min-height: var(--control-alto-movil); padding: 0 var(--espacio-3); border: 0; border-bottom: var(--borde-grosor-fuerte) solid transparent; background: none; font: inherit; font-size: var(--tamano-texto-s); font-weight: var(--peso-medio); color: var(--color-texto-secundario); cursor: pointer; white-space: nowrap; text-decoration: none; }
.pestana:hover { color: var(--color-texto); background: var(--color-superficie-hover); }
.pestana[aria-selected="true"], .pestana[aria-current="page"] { color: var(--color-primario); border-bottom-color: var(--color-primario); }
.pasos { display: flex; gap: var(--espacio-2); list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.paso { flex: 1 1 0; display: flex; align-items: center; gap: var(--espacio-2); min-width: 0; font-size: var(--tamano-texto-s); color: var(--color-texto-secundario); padding-bottom: var(--espacio-2); border-bottom: var(--borde-grosor-acento) solid var(--color-borde); }
.paso__num { display: inline-flex; align-items: center; justify-content: center; width: var(--target-min); height: var(--target-min); border-radius: var(--radio-redondo); border: var(--borde-grosor-fuerte) solid currentColor; font-size: var(--tamano-texto-xs); font-weight: var(--peso-semibold); flex: none; }
.paso--hecho { color: var(--color-exito); border-bottom-color: var(--color-exito); }
.paso--hecho .paso__num { background: var(--color-exito); color: var(--color-texto-inverso); border-color: var(--color-exito); }
.paso--actual { color: var(--color-primario); border-bottom-color: var(--color-primario); font-weight: var(--peso-semibold); }
.paso__texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767px) { .paso__texto { display: none; } .paso--actual .paso__texto { display: inline; } }
.paginacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espacio-3); font-size: var(--tamano-texto-s); color: var(--color-texto-secundario); }
.paginacion__paginas { display: flex; gap: var(--espacio-1); list-style: none; margin: 0; padding: 0; }
.paginacion__pagina { display: inline-flex; align-items: center; justify-content: center; min-width: var(--control-alto-escritorio); min-height: var(--control-alto-escritorio); border-radius: var(--radio-m); text-decoration: none; color: var(--color-texto); font-weight: var(--peso-medio); }
.paginacion__pagina:hover { background: var(--color-superficie-hover); color: var(--color-texto); }
.paginacion__pagina[aria-current="page"] { background: var(--color-primario); color: var(--color-sobre-primario); }

/* ---------- Tablas ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: var(--espacio-2); align-items: flex-end; padding: var(--espacio-3); background: var(--color-superficie); border: var(--borde-grosor) solid var(--color-borde); border-radius: var(--radio-l); margin-bottom: var(--espacio-3); }
.filtros .campo { flex: 1 1 calc(var(--tarjeta-min) * 0.6); }
.filtros .campo--corto { flex: 0 1 calc(var(--tarjeta-min) * 0.5); }
.barra-seleccion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-2); padding: var(--espacio-2) var(--espacio-3); background: var(--color-primario-suave); border: var(--borde-grosor) solid var(--color-primario); border-radius: var(--radio-m); margin-bottom: var(--espacio-3); font-size: var(--tamano-texto-s); }
.tabla-caja { overflow-x: auto; background: var(--color-superficie); border: var(--borde-grosor) solid var(--color-borde); border-radius: var(--radio-l); }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--tamano-texto-s); }
.tabla th, .tabla td { padding: var(--espacio-2) var(--espacio-3); text-align: left; vertical-align: middle; border-bottom: var(--borde-grosor) solid var(--color-borde); white-space: nowrap; }
.tabla th { font-weight: var(--peso-semibold); color: var(--color-texto-secundario); background: var(--color-fondo); position: sticky; top: 0; font-size: var(--tamano-texto-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.tabla tbody tr:hover { background: var(--color-superficie-hover); }
.tabla tbody tr[aria-selected="true"] { background: var(--color-superficie-seleccion); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla td.cifras, .tabla th.cifras { text-align: right; }
.tabla .control { min-height: var(--target-min); }
.tabla--densa th, .tabla--densa td { padding: var(--espacio-1) var(--espacio-2); }
.tabla .ajustable { white-space: normal; min-width: calc(var(--tarjeta-min) * 0.7); }
.orden { display: inline-flex; align-items: center; gap: var(--espacio-1); background: none; border: 0; padding: 0; font: inherit; font-weight: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; min-height: var(--target-min); }
.orden .ico { width: var(--icono-s); height: var(--icono-s); }
.tabla .casilla { width: var(--target-min); height: var(--target-min); margin: 0; accent-color: var(--color-primario); display: block; }
.fila-pie { font-weight: var(--peso-semibold); background: var(--color-fondo); }
.menu { position: relative; display: inline-block; }
.menu__lista { position: absolute; right: 0; top: calc(100% + var(--espacio-1)); min-width: calc(var(--tarjeta-min) * 0.7); background: var(--color-superficie-elevada); border: var(--borde-grosor) solid var(--color-borde); border-radius: var(--radio-m); box-shadow: var(--sombra-3); list-style: none; margin: 0; padding: var(--espacio-1); z-index: 40; }
.menu__lista--estatico { position: static; display: inline-block; }
.menu__item { display: flex; align-items: center; gap: var(--espacio-2); width: 100%; min-height: var(--control-alto-escritorio); padding: 0 var(--espacio-3); border: 0; background: none; font: inherit; font-size: var(--tamano-texto-s); color: var(--color-texto); text-align: left; cursor: pointer; border-radius: var(--radio-s); text-decoration: none; white-space: nowrap; }
.menu__item:hover { background: var(--color-superficie-hover); color: var(--color-texto); }
.menu__item--peligro { color: var(--color-error); }
.menu__sep { border-top: var(--borde-grosor) solid var(--color-borde); margin: var(--espacio-1) 0; }

/* ---------- Calendario de ocupación ---------- */
.leyenda { display: flex; flex-wrap: wrap; gap: var(--espacio-2) var(--espacio-4); font-size: var(--tamano-texto-s); align-items: center; }
.leyenda__item { display: inline-flex; align-items: center; gap: var(--espacio-2); }
.calendario { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espacio-2); }
.calendario__cabecera { display: none; }
.dia { background: var(--color-superficie); border: var(--borde-grosor) solid var(--color-borde); border-radius: var(--radio-m); padding: var(--espacio-2); display: flex; flex-direction: column; gap: var(--espacio-1); min-width: 0; }
.dia--otro-mes { opacity: 0.55; }
.dia--hoy { border-color: var(--color-primario); border-width: var(--borde-grosor-fuerte); }
.dia__num { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-2); font-size: var(--tamano-texto-s); font-weight: var(--peso-semibold); }
.dia__num .texto-sec { font-weight: var(--peso-normal); }
.dia__num a { color: inherit; text-decoration: none; min-height: var(--target-min); display: inline-flex; align-items: center; }
.dia__num a:hover { text-decoration: underline; }
.dia__reservas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espacio-1); }
.etiqueta-reserva { display: flex; align-items: center; gap: var(--espacio-1); min-height: var(--target-min); padding: 0 var(--espacio-1); border-radius: var(--radio-s); font-size: var(--tamano-texto-xs); font-weight: var(--peso-medio); text-decoration: none; overflow: hidden; }
.etiqueta-reserva .ico { width: var(--icono-s); height: var(--icono-s); }
.etiqueta-reserva__texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.etiqueta-reserva--salida { background-image: linear-gradient(90deg, currentColor 0 50%, transparent 50%); background-size: 100% var(--borde-grosor-fuerte); background-repeat: no-repeat; background-position: bottom; }
.dia__unidades { display: flex; flex-wrap: wrap; gap: var(--borde-grosor-fuerte); }
.unidad-punto { width: var(--espacio-2); height: var(--espacio-2); border-radius: var(--radio-s); background: var(--color-borde); }
.unidad-punto--ocupada { background: var(--color-primario); }
.unidad-punto--salida { background: linear-gradient(90deg, var(--color-primario) 50%, var(--color-borde) 50%); }
@media (min-width: 1024px) {
  .calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--espacio-1); }
  .calendario__cabecera { display: contents; }
  .calendario__cabecera span { font-size: var(--tamano-texto-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-texto-secundario); font-weight: var(--peso-semibold); padding: var(--espacio-1) var(--espacio-2); }
  .dia { min-height: var(--celda-calendario-min); border-radius: var(--radio-s); }
  .dia__num .texto-sec { display: none; }
}

/* ---------- Rejilla de comidas y actividades por día ---------- */
.rejilla-dias { display: flex; flex-direction: column; gap: var(--espacio-3); }
.dia-tarjeta { background: var(--color-superficie); border: var(--borde-grosor) solid var(--color-borde); border-radius: var(--radio-l); padding: var(--espacio-3); display: flex; flex-direction: column; gap: var(--espacio-3); }
.dia-tarjeta__titulo { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-2); font-weight: var(--peso-semibold); }
.servicios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-2); }
.servicio { display: flex; flex-direction: column; gap: var(--espacio-1); }
.servicio__nombre { display: flex; align-items: center; gap: var(--espacio-1); font-size: var(--tamano-texto-xs); font-weight: var(--peso-medio); color: var(--color-texto-secundario); text-transform: uppercase; letter-spacing: 0.04em; }
.servicio .control { text-align: right; min-height: var(--control-alto-movil); }
.servicio--picnic .control { border-style: dashed; }
.actividades-dia { display: flex; flex-wrap: wrap; gap: var(--espacio-2); }
@media (min-width: 1024px) {
  .rejilla-dias { display: block; }
  .rejilla-dias .tabla-caja { display: block; }
}

/* ---------- Cuadrante semanal ---------- */
.cuadrante-caja { overflow-x: auto; background: var(--color-superficie); border: var(--borde-grosor) solid var(--color-borde); border-radius: var(--radio-l); }
.cuadrante { border-collapse: separate; border-spacing: 0; width: 100%; min-width: calc(var(--columna-monitor-ancho) + var(--columna-dia-min) * 7); font-size: var(--tamano-texto-xs); }
.cuadrante th, .cuadrante td { border-bottom: var(--borde-grosor) solid var(--color-borde); border-right: var(--borde-grosor) solid var(--color-borde); padding: var(--espacio-1); vertical-align: top; }
.cuadrante thead th { position: sticky; top: 0; z-index: 3; background: var(--color-fondo); text-align: left; font-weight: var(--peso-semibold); color: var(--color-texto-secundario); font-size: var(--tamano-texto-xs); padding: var(--espacio-2); }
.cuadrante thead th .dia-num { display: block; font-size: var(--tamano-texto-m); color: var(--color-texto); }
.cuadrante th.monitor-col { position: sticky; left: 0; z-index: 2; background: var(--color-superficie); width: var(--columna-monitor-ancho); min-width: var(--columna-monitor-ancho); text-align: left; font-weight: var(--peso-medio); }
.cuadrante thead th.monitor-col { z-index: 4; }
.cuadrante .fila-comensales th, .cuadrante .fila-comensales td { background: var(--color-primario-suave); font-variant-numeric: tabular-nums; }
.cuadrante .fila-comensales td { font-size: var(--tamano-texto-xs); line-height: var(--altura-linea-compacta); }
.cuadrante .fila-comensales span { display: inline-block; margin-right: var(--espacio-1); }
/* Las tres franjas de un día van en FILAS (mañana / tarde / noche), cada una con su etiqueta a la izquierda y las sesiones a todo el ancho */
.franjas { display: flex; flex-direction: column; gap: var(--espacio-1); }
.franja { display: grid; grid-template-columns: var(--franja-etiqueta-ancho) minmax(0, 1fr); gap: var(--espacio-1); align-items: start; min-width: 0; min-height: var(--target-min); border-radius: var(--radio-s); background: var(--color-fondo); padding: var(--borde-grosor-fuerte); }
.franja > * { grid-column: 2; }
.franja::before { content: "M"; grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-content: center; min-height: var(--target-min); font-size: var(--tamano-texto-xs); font-weight: var(--peso-semibold); color: var(--color-texto-secundario); }
.franja:nth-child(2)::before { content: "T"; }
.franja--noche { background: var(--color-superficie-hover); }
.franja--noche::before { content: "N"; }
.franja__hueco { width: 100%; border: var(--borde-grosor) dashed var(--color-borde-fuerte); border-radius: var(--radio-s); min-height: var(--target-min); display: flex; align-items: center; justify-content: center; color: var(--color-texto-secundario); background: none; font: inherit; font-size: var(--tamano-texto-xs); cursor: pointer; }
.franja__hueco:hover { background: var(--color-primario-suave); border-color: var(--color-primario); color: var(--color-primario); }
/* Color de grupo (pasada 3): la clase .grupo-N en una sesión, tarjeta, etiqueta o muestra fija el par fondo/texto del grupo.
   El RELLENO identifica al grupo; el TIPO de sesión (reserva / externo / interna) va en el borde izquierdo y el icono. */
.grupo-1 { --grupo-fondo: var(--grupo-1-fondo); --grupo-texto: var(--grupo-1-texto); }
.grupo-2 { --grupo-fondo: var(--grupo-2-fondo); --grupo-texto: var(--grupo-2-texto); --grupo-patron: var(--patron-grupo); }
.grupo-3 { --grupo-fondo: var(--grupo-3-fondo); --grupo-texto: var(--grupo-3-texto); }
.grupo-4 { --grupo-fondo: var(--grupo-4-fondo); --grupo-texto: var(--grupo-4-texto); --grupo-patron: var(--patron-grupo); }
.grupo-5 { --grupo-fondo: var(--grupo-5-fondo); --grupo-texto: var(--grupo-5-texto); }
.grupo-6 { --grupo-fondo: var(--grupo-6-fondo); --grupo-texto: var(--grupo-6-texto); --grupo-patron: var(--patron-grupo); }
.grupo-7 { --grupo-fondo: var(--grupo-7-fondo); --grupo-texto: var(--grupo-7-texto); }
.grupo-8 { --grupo-fondo: var(--grupo-8-fondo); --grupo-texto: var(--grupo-8-texto); --grupo-patron: var(--patron-grupo); }
.grupo-sw { display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0 var(--espacio-2); border-radius: var(--radio-s); border-left: var(--borde-grosor-acento) solid var(--grupo-texto, var(--color-sesion-borde)); background-color: var(--grupo-fondo, var(--color-sesion)); background-image: var(--grupo-patron, none); color: var(--grupo-texto, var(--color-texto)); font-size: var(--tamano-texto-xs); font-weight: var(--peso-semibold); letter-spacing: 0.02em; white-space: nowrap; }
.sesion { display: flex; flex-direction: column; gap: var(--borde-grosor-fuerte); padding: var(--espacio-1) var(--espacio-2); border-radius: var(--radio-s); border-left: var(--borde-grosor-acento) solid var(--grupo-texto, var(--color-sesion-borde)); background-color: var(--grupo-fondo, var(--color-sesion)); background-image: var(--grupo-patron, none); color: var(--grupo-texto, var(--color-texto)); text-decoration: none; min-height: var(--control-alto-movil); font-size: var(--tamano-texto-xs); line-height: var(--altura-linea-compacta); cursor: grab; }
.sesion:hover { box-shadow: var(--sombra-2); color: var(--grupo-texto, var(--color-texto)); }
.sesion__hora { font-weight: var(--peso-semibold); font-variant-numeric: tabular-nums; display: flex; align-items: center; flex-wrap: wrap; gap: var(--espacio-1); }
.sesion__actividad { font-weight: var(--peso-medio); display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--espacio-1); }
.sesion__abrev { font-weight: var(--peso-semibold); font-size: var(--tamano-texto-s); text-decoration: none; border-bottom: none; }
.sesion__grupo, .sesion__meta { color: var(--grupo-texto, var(--color-texto-secundario)); font-weight: var(--peso-normal); }
.sesion__grupo-abrev { font-weight: var(--peso-semibold); }
.sesion__marca { display: inline-flex; align-items: center; gap: var(--borde-grosor-fuerte); padding: 0 var(--espacio-1); border-radius: var(--radio-s); border: var(--borde-grosor) solid currentColor; font-size: var(--tamano-texto-xs); font-weight: var(--peso-medio); line-height: var(--altura-linea-texto); white-space: nowrap; }
.sesion__marca .ico { width: var(--espacio-3); height: var(--espacio-3); }
.sesion__tandas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espacio-1); margin-top: var(--borde-grosor-fuerte); }
.sesion__tanda { border-top: var(--borde-grosor) dashed currentColor; padding-top: var(--borde-grosor-fuerte); font-variant-numeric: tabular-nums; }
.sesion--externa { border-left-style: double; }
.sesion--externa:not([class*="grupo-"]) { background-color: var(--color-sesion-externa); border-left-color: var(--color-sesion-externa-borde); }
.sesion--interna { background-color: var(--color-sesion-interna); background-image: none; border-left-color: var(--color-sesion-interna-borde); border-left-style: dotted; color: var(--color-texto); }
.sesion--interna .sesion__grupo, .sesion--interna .sesion__meta { color: var(--color-texto-secundario); }
.sesion--conflicto { background-color: var(--color-sesion-conflicto); background-image: none; border-left-color: var(--color-sesion-conflicto-borde); color: var(--color-texto); }
.sesion--conflicto .sesion__hora { color: var(--color-error); }
.sesion--conflicto .sesion__grupo, .sesion--conflicto .sesion__meta { color: var(--color-texto-secundario); }
.sesion--borrador { border-style: dashed; border-width: var(--borde-grosor); border-color: var(--color-borde-fuerte); border-left-width: var(--borde-grosor-acento); }
.de-turno { display: inline-flex; align-items: center; gap: var(--espacio-1); background: var(--color-turno); color: var(--color-turno-texto); border-radius: var(--radio-s); padding: 0 var(--espacio-1); font-size: var(--tamano-texto-xs); font-weight: var(--peso-semibold); min-height: var(--target-min); }
/* Fila TURNO (pasada 3): responsable de la pernocta por bloque de 3 días; primera fila del tablero, una casilla por día */
.cuadrante .fila-turno th, .cuadrante .fila-turno td { background: var(--color-superficie); }
.turno-celda { display: flex; flex-direction: column; gap: 0; min-height: var(--control-alto-escritorio); padding: var(--espacio-1) var(--espacio-2); border-radius: var(--radio-s); background: var(--color-turno); color: var(--color-turno-texto); font-weight: var(--peso-semibold); font-size: var(--tamano-texto-xs); }
.turno-celda small { font-weight: var(--peso-normal); }
.turno-celda--vacia { background: none; color: var(--color-texto-secundario); font-weight: var(--peso-normal); border: var(--borde-grosor) dashed var(--color-borde); }
/* Avisos del motor (pasada 3): lo que el borrador generado no ha podido resolver */
.avisos-motor { margin: 0 0 var(--espacio-3); padding: var(--espacio-3) var(--espacio-4); border: var(--borde-grosor) solid var(--color-borde); border-left: var(--borde-grosor-acento) solid var(--color-aviso); border-radius: var(--radio-m); background: var(--color-superficie); }
.avisos-motor__titulo { margin: 0 0 var(--espacio-2); font-size: var(--tamano-texto-s); font-weight: var(--peso-semibold); display: flex; align-items: center; gap: var(--espacio-2); }
.avisos-motor ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espacio-1); font-size: var(--tamano-texto-s); }
.avisos-motor li { display: flex; align-items: flex-start; gap: var(--espacio-2); min-height: var(--target-min); }
.avisos-motor li > span { flex: 1 1 auto; min-width: 0; }
.avisos-motor li .ico { flex: none; margin-top: var(--borde-grosor-fuerte); }
.avisos-motor li .enlace { flex: none; min-height: var(--target-min); display: inline-flex; align-items: center; }
.monitor-celda { display: flex; align-items: center; gap: var(--espacio-2); }
.monitor-celda__nombre { display: flex; flex-direction: column; min-width: 0; }
.monitor-celda__esp { font-size: var(--tamano-texto-xs); color: var(--color-texto-secundario); font-weight: var(--peso-normal); }
.panel-lateral { display: flex; flex-direction: column; gap: var(--espacio-3); }
.grupo-semana { background: var(--color-superficie); border: var(--borde-grosor) solid var(--color-borde); border-radius: var(--radio-m); padding: var(--espacio-3); display: flex; flex-direction: column; gap: var(--espacio-1); font-size: var(--tamano-texto-s); }
.grupo-semana__titulo { display: flex; justify-content: space-between; align-items: center; gap: var(--espacio-2); font-weight: var(--peso-semibold); }
.planificador { display: grid; gap: var(--espacio-4); grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 1280px) { .planificador { grid-template-columns: minmax(0, 1fr) var(--tarjeta-min); } }

/* ---------- Listas móviles (monitor y cocina) ---------- */
.lista-sesiones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espacio-3); }
.sesion-tarjeta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--espacio-3); background: var(--color-superficie); border: var(--borde-grosor) solid var(--color-borde); border-left: var(--borde-grosor-acento) solid var(--grupo-texto, var(--color-sesion-borde)); border-radius: var(--radio-m); padding: var(--espacio-3); text-decoration: none; color: inherit; }
.sesion-tarjeta--externa { border-left-style: double; }
.sesion-tarjeta--externa:not([class*="grupo-"]) { border-left-color: var(--color-sesion-externa-borde); }
.sesion-tarjeta--interna { border-left-color: var(--color-sesion-interna-borde); border-left-style: dotted; }
.sesion-tarjeta .sesion__abrev { font-size: var(--tamano-texto-l); margin-right: var(--espacio-1); }
.sesion-tarjeta .sesion__marca { font-size: var(--tamano-texto-xs); }
.turno-aviso { display: flex; align-items: center; gap: var(--espacio-2); padding: var(--espacio-2) var(--espacio-3); border-radius: var(--radio-m); background: var(--color-turno); color: var(--color-turno-texto); font-weight: var(--peso-semibold); font-size: var(--tamano-texto-s); min-height: var(--control-alto-movil); }
.sesion-tarjeta--otra { opacity: 0.8; border-left-color: var(--color-borde-fuerte); }
.sesion-tarjeta__hora { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; font-weight: var(--peso-semibold); min-width: calc(var(--espacio-12) + var(--espacio-2)); }
.sesion-tarjeta__hora small { font-weight: var(--peso-normal); color: var(--color-texto-secundario); }
.sesion-tarjeta__cuerpo { display: flex; flex-direction: column; gap: var(--espacio-1); min-width: 0; }
.sesion-tarjeta__titulo { font-weight: var(--peso-semibold); display: flex; flex-wrap: wrap; gap: var(--espacio-2); align-items: center; }
.sesion-tarjeta__meta { color: var(--color-texto-secundario); font-size: var(--tamano-texto-s); display: flex; flex-wrap: wrap; gap: var(--espacio-1) var(--espacio-3); }
.separador-franja { display: flex; align-items: center; gap: var(--espacio-2); font-size: var(--tamano-texto-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-texto-secundario); font-weight: var(--peso-semibold); margin-top: var(--espacio-2); }
.separador-franja::after { content: ""; flex: 1 1 auto; border-top: var(--borde-grosor) solid var(--color-borde); }
.comensales { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-2); }
.comensal { background: var(--color-superficie); border: var(--borde-grosor) solid var(--color-borde); border-radius: var(--radio-m); padding: var(--espacio-3); display: flex; flex-direction: column; gap: var(--espacio-1); }
.comensal__servicio { display: flex; align-items: center; gap: var(--espacio-1); font-size: var(--tamano-texto-xs); font-weight: var(--peso-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-texto-secundario); }
.comensal__hora { font-size: var(--tamano-texto-s); color: var(--color-texto-secundario); font-variant-numeric: tabular-nums; }
.comensal__total { font-size: var(--tamano-texto-3xl); font-weight: var(--peso-semibold); line-height: var(--altura-linea-titulo); font-variant-numeric: tabular-nums; }
.comensal__desglose { font-size: var(--tamano-texto-s); color: var(--color-texto-secundario); }
.comensal--destacado { border-color: var(--color-primario); border-width: var(--borde-grosor-fuerte); }
@media (min-width: 768px) { .comensales { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .comensales { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.alergias { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--espacio-2); }
.alergia { display: inline-flex; align-items: center; gap: var(--espacio-2); min-height: var(--control-alto-movil); padding: 0 var(--espacio-3); border-radius: var(--radio-m); background: var(--color-error-suave); color: var(--color-error); border: var(--borde-grosor) solid var(--color-error); font-weight: var(--peso-medio); font-size: var(--tamano-texto-s); }
.alergia__n { font-size: var(--tamano-texto-l); font-weight: var(--peso-semibold); font-variant-numeric: tabular-nums; }

/* ---------- Selector de unidades ---------- */
.unidades { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espacio-2); grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 768px) { .unidades { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .unidades { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.unidad { display: flex; align-items: center; gap: var(--espacio-3); padding: var(--espacio-2) var(--espacio-3); border: var(--borde-grosor) solid var(--color-borde-fuerte); border-radius: var(--radio-m); background: var(--color-superficie); cursor: pointer; min-height: var(--control-alto-movil); }
.unidad:hover { border-color: var(--color-primario); }
.unidad input { width: var(--target-min); height: var(--target-min); margin: 0; accent-color: var(--color-primario); flex: none; }
.unidad--seleccionada { background: var(--color-primario-suave); border-color: var(--color-primario); }
.unidad--ocupada { background: var(--color-fondo); color: var(--color-texto-secundario); cursor: not-allowed; border-style: dashed; }
.unidad__nombre { font-weight: var(--peso-medio); display: flex; align-items: center; gap: var(--espacio-2); min-width: 0; }
.unidad__plazas { margin-left: auto; font-size: var(--tamano-texto-s); color: var(--color-texto-secundario); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Encabezado fijo de ficha ---------- */
.ficha-cabecera { position: sticky; top: var(--cabecera-alto); z-index: 20; background: var(--color-superficie); border: var(--borde-grosor) solid var(--color-borde); border-radius: var(--radio-l); padding: var(--espacio-3) var(--espacio-4); display: flex; flex-wrap: wrap; gap: var(--espacio-3); align-items: center; margin-bottom: var(--espacio-4); box-shadow: var(--sombra-1); }
.ficha-cabecera__titulo { display: flex; flex-direction: column; gap: var(--espacio-1); min-width: 0; flex: 1 1 var(--tarjeta-min); }
.ficha-cabecera__meta { display: flex; flex-wrap: wrap; gap: var(--espacio-1) var(--espacio-3); font-size: var(--tamano-texto-s); color: var(--color-texto-secundario); }

/* ---------- Gráficos sencillos (barras CSS) ---------- */
.barras { display: flex; align-items: flex-end; gap: var(--espacio-2); height: calc(var(--espacio-12) * 4); padding-top: var(--espacio-4); }
.barra { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--espacio-1); height: 100%; font-size: var(--tamano-texto-xs); color: var(--color-texto-secundario); min-width: 0; }
.barra__col { width: 100%; background: var(--color-primario); border-radius: var(--radio-s) var(--radio-s) 0 0; min-height: var(--borde-grosor-fuerte); }
.barra__col--2 { background: var(--color-ocupacion-3); }
.barra__col--3 { background-color: var(--color-primario-activo); background-image: var(--patron-rayas); }
.barra__valor { font-weight: var(--peso-semibold); color: var(--color-texto); font-variant-numeric: tabular-nums; }
.barra__etiqueta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ---------- Capa de interacción (interacciones.js): menús, modales, avisos, arrastre ---------- */
[hidden] { display: none !important; }
.menu-flotante { position: fixed; z-index: 150; }
.dialogo-fondo--modal { position: fixed; inset: 0; z-index: 180; overflow: auto; border-radius: 0; }
body.con-dialogo { overflow: hidden; }
.dialogo__cuerpo { display: flex; flex-direction: column; gap: var(--espacio-4); }
.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--barra-inferior-alto) + var(--espacio-4)); z-index: 200; display: flex; flex-direction: column; gap: var(--espacio-2); width: max-content; max-width: calc(100% - var(--espacio-8)); }
.toast--exito .ico { color: var(--color-exito-suave); }
.toast--error .ico { color: var(--color-reserva-cancelada); }
.toast__texto { flex: 1 1 auto; min-width: 0; }
@media (min-width: 1024px) { .toasts { bottom: var(--espacio-6); } }
.sesion--arrastrando { opacity: 0.5; }
.franja--destino { outline: var(--borde-grosor-fuerte) dashed var(--color-primario); outline-offset: calc(var(--borde-grosor-fuerte) * -1); background: var(--color-primario-suave); }
.sesion--cambiado::after { content: ""; position: absolute; right: var(--espacio-1); bottom: var(--espacio-1); width: var(--espacio-2); height: var(--espacio-2); border-radius: var(--radio-redondo); background: var(--color-aviso); }
.sesion:focus-visible { z-index: 1; }
a.btn[aria-disabled="true"] { background: var(--color-superficie-hover); color: var(--color-texto-deshabilitado); pointer-events: none; }
.tooltip__texto { display: none; }
.tooltip--abierto .tooltip__texto { display: block; }
.fila-sin-resultados td { white-space: normal; }
.barra-lateral--plegada { width: var(--barra-lateral-plegada); }
.barra-lateral--plegada .nav__item { justify-content: center; padding: 0; font-size: 0; }
.barra-lateral--plegada .nav__item .badge { position: absolute; transform: translate(var(--espacio-4), calc(var(--espacio-3) * -1)); }
.barra-lateral--plegada .nav__item { position: relative; }
.barra-lateral--plegada .nav__seccion { font-size: 0; padding: var(--espacio-2) 0; border-top: var(--borde-grosor) solid var(--color-borde); }
.barra-lateral--plegada .nav__plegar .ico { transform: rotate(180deg); }