/* Estilos base de la aplicación.
 *
 * Principio rector: densidad por encima de aire. Es una herramienta de
 * trabajo que se usa varias horas por día, no una landing. Se prioriza
 * cuánta información entra en pantalla sin scrollear.
 */

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--fuente);
  font-size: var(--texto-cuerpo);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Números alineados en columnas: fechas y contadores no bailan. */
time, .numero, td.numero { font-variant-numeric: tabular-nums; }

a { color: var(--primary-text); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Foco visible y consistente en todo elemento operable por teclado. */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Estructura: barra lateral + contenido
   -------------------------------------------------------------------------- */

.disposicion {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
}

.lateral {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  position: sticky;
  top: 0;
  height: 100vh;
}

.marca {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  padding: 0 var(--space-2);
}

.marca__punto {
  width: 10px; height: 10px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}

.navegacion { display: flex; flex-direction: column; gap: 2px; }

.navegacion a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.navegacion a:hover { background: var(--surface-alt); color: var(--text); }

.navegacion a[aria-current="page"] {
  background: var(--primary-soft);
  color: var(--primary-text);
}

.lateral__pie { margin-top: auto; font-size: var(--texto-etiqueta); color: var(--text-faint); }

.contenido { padding: var(--space-6) var(--space-8); min-width: 0; }

.encabezado {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.encabezado h1 {
  font-size: var(--texto-titulo);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.encabezado__fecha { color: var(--text-muted); font-size: 14px; }

/* --------------------------------------------------------------------------
   Tarjetas y secciones
   -------------------------------------------------------------------------- */

.tarjeta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--sombra-sm);
}

.tarjeta + .tarjeta { margin-top: var(--space-4); }

.tarjeta__titulo {
  font-size: var(--texto-seccion);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 9px var(--space-4);
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}

.boton:hover { background: var(--primary-hover); text-decoration: none; }
.boton:focus-visible { box-shadow: var(--foco); }
.boton:disabled { opacity: .5; cursor: not-allowed; }

.boton--secundario {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
}
.boton--secundario:hover { background: var(--surface-alt); }

.boton--ancho { width: 100%; }

/* Acción en línea dentro de una fila. En escritorio aparece al pasar el
   mouse; en táctil siempre visible, porque no hay hover. */
.accion-linea {
  background: none;
  border: none;
  padding: 2px var(--space-2);
  color: var(--primary-text);
  font-size: var(--texto-etiqueta);
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.accion-linea:hover { background: var(--primary-soft); }

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */

.campo { margin-bottom: var(--space-4); }

.campo label {
  display: block;
  font-size: var(--texto-etiqueta);
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo input[type="date"],
.campo select,
.campo textarea {
  width: 100%;
  padding: 9px var(--space-3);
  min-height: 40px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--foco);
}

.campo__error { color: var(--danger); font-size: var(--texto-etiqueta); margin-top: var(--space-1); }

/* --------------------------------------------------------------------------
   Estado: nunca solo color (principio 1.4 del documento de diseño)
   -------------------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--texto-etiqueta);
  font-weight: 500;
  white-space: nowrap;
}

.chip--ok       { background: var(--ok-bg);      color: var(--ok); }
.chip--riesgo   { background: var(--warn-bg);    color: var(--warn); }
.chip--atrasada { background: var(--danger-bg);  color: var(--danger); }
.chip--bloqueada{ background: var(--blocked-bg); color: var(--blocked); }
.chip--omitida  { background: transparent;       color: var(--text-faint); }

/* Punto de color del cliente. Nunca se usa como fondo de fila: el fondo
   queda reservado para la salud, así se leen las dos cosas a la vez. */
.punto-cliente {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}

/* --------------------------------------------------------------------------
   Tablas densas
   -------------------------------------------------------------------------- */

.tabla { width: 100%; border-collapse: collapse; font-size: var(--texto-fila); }

.tabla th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-alt);
  color: var(--text-muted);
  font-size: var(--texto-etiqueta);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
}

.tabla td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  height: 36px;
}

.tabla tbody tr:hover { background: var(--primary-soft); }

/* --------------------------------------------------------------------------
   Avisos en pantalla
   -------------------------------------------------------------------------- */

.mensajes { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }

.mensaje {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border-left: 4px solid;
  font-size: 14px;
}

.mensaje--success { background: var(--ok-bg);     border-color: var(--ok);     color: #14532d; }
.mensaje--error   { background: var(--danger-bg); border-color: var(--danger); color: #7f1d1d; }
.mensaje--warning { background: var(--warn-bg);   border-color: var(--warn);   color: #78350f; }
.mensaje--info    { background: var(--primary-soft); border-color: var(--primary); color: #312e81; }

/* --------------------------------------------------------------------------
   Estado vacío: nunca una pantalla en blanco
   -------------------------------------------------------------------------- */

.vacio {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--text-muted);
}

.vacio h2 { font-size: var(--texto-seccion); color: var(--text); margin-bottom: var(--space-2); }
.vacio p  { margin-bottom: var(--space-4); }

/* --------------------------------------------------------------------------
   Pantalla de ingreso
   -------------------------------------------------------------------------- */

.ingreso {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  /* Único lugar interno donde se cita la estética del sitio. */
  background:
    radial-gradient(1000px 500px at 50% -10%, rgba(99, 102, 241, .10), transparent 60%),
    var(--bg);
}

.ingreso__caja {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-8);
  box-shadow: var(--sombra-lg);
}

.ingreso__marca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.ingreso__bajada {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: var(--space-6);
}

.separador {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-6) 0;
  color: var(--text-faint);
  font-size: var(--texto-etiqueta);
}
.separador::before, .separador::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.boton-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
}
.boton-google:hover { background: var(--surface-alt); text-decoration: none; }

.nota-configuracion {
  margin-top: var(--space-6);
  padding: var(--space-3);
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  font-size: var(--texto-etiqueta);
  color: var(--text-muted);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Adaptación a pantallas chicas
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .disposicion { grid-template-columns: 1fr; }

  .lateral {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .navegacion { flex-direction: row; }
  .lateral__pie { display: none; }
  .contenido { padding: var(--space-4); }

  /* Objetivos táctiles de 44px y acciones siempre visibles: en táctil no
     hay hover. */
  .accion-linea { min-height: 44px; padding: var(--space-2) var(--space-3); }
}

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

/* ==========================================================================
   Estado de las peticiones parciales
   ========================================================================== */

.cargando { opacity: .5; pointer-events: none; }

/* El error se muestra donde ocurrió, no en un aviso que se desvanece. */
.error-en-linea {
  background: var(--danger-bg);
  color: #7f1d1d;
  border-left: 3px solid var(--danger);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  font-size: var(--texto-etiqueta);
  margin-top: var(--space-1);
}

/* ==========================================================================
   Barra de filtros
   ========================================================================== */

.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.filtros select,
.filtros input[type="search"] {
  padding: 6px var(--space-3);
  min-height: 36px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 14px;
}

.filtros__grupo { display: flex; align-items: center; gap: var(--space-2); }
.filtros__etiqueta { font-size: var(--texto-etiqueta); color: var(--text-muted); font-weight: 500; }
.filtros__separador { flex: 1; }

.navegacion-mes {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: var(--texto-seccion);
}

.navegacion-mes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
}
.navegacion-mes a:hover { background: var(--surface-alt); text-decoration: none; }

/* ==========================================================================
   Parrilla mensual — la pantalla que define la adopción
   ========================================================================== */

.parrilla-marco {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: auto;
  max-height: calc(100vh - 220px);
}

.parrilla {
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--texto-fila);
}

.parrilla th, .parrilla td {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0;
}

/* Primera columna y encabezado fijos: se navega un mes entero sin perder
   de vista de qué cliente y de qué día es cada celda. */
.parrilla thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-alt);
  padding: var(--space-2) 6px;
  font-size: var(--texto-etiqueta);
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  min-width: 118px;
}

.parrilla thead th.parrilla__esquina {
  left: 0;
  z-index: 3;
  text-align: left;
  padding-left: var(--space-3);
  min-width: 160px;
  border-right: 2px solid var(--border-strong);
}

.parrilla tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-weight: 500;
  border-right: 2px solid var(--border-strong);
  white-space: nowrap;
}

.parrilla__cliente { display: flex; align-items: center; gap: var(--space-2); }

.parrilla th.parrilla__finde, .parrilla td.parrilla__finde { background: var(--surface-alt); }

.parrilla th.parrilla__hoy {
  background: var(--primary-soft);
  color: var(--primary-text);
}
.parrilla td.parrilla__hoy { box-shadow: inset 2px 0 0 var(--primary), inset -2px 0 0 var(--primary); }

.parrilla__dia-semana { display: block; font-weight: 400; opacity: .7; }

.parrilla td {
  vertical-align: top;
  min-width: 118px;
  height: 52px;
  padding: 3px;
}

.parrilla td[data-celda-vacia] { cursor: text; }
.parrilla td[data-celda-vacia]:hover { background: var(--primary-soft); }

/* --- La celda de una pieza --- */

.celda-pieza {
  display: block;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  margin-bottom: 3px;
  text-decoration: none;
  color: var(--text);
  border-left: 3px solid transparent;
  line-height: 1.25;
}

.celda-pieza:hover { text-decoration: none; filter: brightness(.97); }

.celda-pieza--en_fecha  { background: var(--ok-bg);      border-left-color: var(--ok); }
.celda-pieza--en_riesgo { background: var(--warn-bg);    border-left-color: var(--warn); }
.celda-pieza--atrasada  { background: var(--danger-bg);  border-left-color: var(--danger); }
.celda-pieza--bloqueada { background: var(--blocked-bg); border-left-color: var(--blocked); }
.celda-pieza--terminada { background: var(--surface-alt); border-left-color: var(--text-faint); opacity: .75; }

.celda-pieza__cabecera {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  font-size: var(--texto-fila);
}

.celda-pieza__tipo {
  flex: none;
  width: 15px; height: 15px;
  border-radius: 3px;
  background: rgba(15, 23, 42, .10);
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.celda-pieza__titulo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.celda-pieza__etapa {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.celda-pieza__mas {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  padding: 2px 6px;
}

/* --- Carga rápida en la celda --- */

.carga-rapida { display: flex; gap: 2px; }

.carga-rapida__titulo {
  flex: 1;
  min-width: 0;
  padding: 3px 5px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  font-size: var(--texto-fila);
  box-shadow: var(--foco);
}

.carga-rapida__tipo {
  flex: none;
  width: 42px;
  padding: 3px 2px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 11px;
}

.carga-rapida__campana {
  flex: none;
  max-width: 110px;
  padding: 3px 2px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 11px;
  background: var(--surface);
  color: var(--text);
}

/* --- Barra de selección múltiple --- */

.barra-seleccion {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--text);
  color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--sombra-lg);
  z-index: 20;
  font-size: 14px;
}

.barra-seleccion .boton--secundario { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.barra-seleccion .boton--secundario:hover { background: rgba(255,255,255,.12); }

/* ==========================================================================
   Ficha de pieza — la línea de tiempo es la protagonista
   ========================================================================== */

.linea-tiempo { display: flex; flex-direction: column; }

.etapa {
  display: grid;
  grid-template-columns: 26px 1fr auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.etapa:last-child { border-bottom: none; }

.etapa__marca {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 12px;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
}

.etapa--completada .etapa__marca { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.etapa--omitida { color: var(--text-faint); }
.etapa--omitida .etapa__nombre { text-decoration: line-through; }

/* La etapa actual es la única con acciones: no hay ambigüedad sobre qué toca. */
.etapa--actual {
  background: var(--primary-soft);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  margin: var(--space-2) 0;
}

.etapa--actual .etapa__nombre { font-weight: 600; }
.etapa--actual .etapa__marca { background: var(--primary); color: #fff; border-color: var(--primary); }

.etapa__responsable { color: var(--text-muted); font-size: var(--texto-etiqueta); white-space: nowrap; }
.etapa__fecha { font-variant-numeric: tabular-nums; font-size: var(--texto-etiqueta); white-space: nowrap; }

.etapa__acciones {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-3);
}

.banner-bloqueo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  background: var(--blocked-bg);
  border-left: 4px solid var(--blocked);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: 14px;
}

.banner-bloqueo__reloj {
  font-size: var(--texto-etiqueta);
  color: var(--text-muted);
  font-weight: 500;
}

.eventos { list-style: none; font-size: var(--texto-fila); }

.eventos li {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: var(--space-3);
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}

.eventos time { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Tablero por etapa
   ========================================================================== */

/* El kanban viejo de columnas por etapa vivía acá. Lo reemplazó el tablero
   por carriles de cliente (`canon.css`), y sus reglas se borran en vez de
   quedar: `.tablero { display: flex }` seguía ganándole al tablero nuevo
   —que no declara `display`— y le desarmaba la grilla. CSS muerto no es
   inofensivo cuando comparte el nombre con algo vivo. */

/* ==========================================================================
   Mi día
   ========================================================================== */

.grupo-dia { margin-bottom: var(--space-6); }

.grupo-dia__titulo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--texto-etiqueta);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.grupo-dia--atrasado  .grupo-dia__titulo { color: var(--danger); }
.grupo-dia--hoy       .grupo-dia__titulo { color: var(--warn); }
.grupo-dia--bloqueado .grupo-dia__titulo { color: var(--blocked); }
.grupo-dia--proximo   .grupo-dia__titulo { color: var(--text-muted); }

.item-dia {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 5px;
  font-size: 14px;
}

.item-dia__cliente { flex: none; width: 100px; color: var(--text-muted); font-size: var(--texto-etiqueta); }
.item-dia__titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-dia__etapa { flex: none; color: var(--text-muted); font-size: var(--texto-etiqueta); }
.item-dia__acciones { flex: none; display: flex; gap: var(--space-1); }

/* ==========================================================================
   Captura rápida e ideas
   ========================================================================== */

.captura {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.captura__fila { display: flex; gap: var(--space-2); }

.captura input[type="text"] {
  flex: 1;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 16px; /* 16px evita que el navegador móvil haga zoom al enfocar */
}

.lista-ideas { display: flex; flex-direction: column; gap: var(--space-2); }

.idea {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.idea__texto { flex: 1; min-width: 0; }
.idea__meta { color: var(--text-muted); font-size: var(--texto-etiqueta); }

/* ==========================================================================
   Tareas
   ========================================================================== */

.tarea { display: flex; align-items: center; gap: var(--space-3); }
.tarea--hecha .tarea__titulo { text-decoration: line-through; color: var(--text-faint); }

.prioridad { font-size: var(--texto-etiqueta); font-weight: 600; }
.prioridad--urgente { color: var(--danger); }
.prioridad--alta { color: var(--warn); }
.prioridad--normal { color: var(--text-muted); }
.prioridad--baja { color: var(--text-faint); }

/* ==========================================================================
   Adaptación móvil de las pantallas nuevas
   ========================================================================== */

@media (max-width: 860px) {
  .parrilla-marco { max-height: none; }
  .filtros { flex-direction: column; align-items: stretch; }
  .filtros__separador { display: none; }

  .item-dia { flex-wrap: wrap; }
  .item-dia__cliente { width: auto; }

  .barra-seleccion { left: var(--space-3); right: var(--space-3); transform: none; }
}