/* =====================================================
   consola.css — el sistema de diseño de la consola de HQ (Etapa 1).
   Cae después de components.css (alfabético, Propshaft) y antes de
   tokens.css en el orden de carga, pero solo define variables ahí, así
   que el orden no importa. Cero números mágicos: toda medida sale de
   tokens.css. Es el único archivo donde se define el aspecto de la
   consola: ningún módulo agrega una regla suelta por su cuenta.
   ============================================================ */

/* ------------------------------------------------------------
   El encuadre de página: .consola, .pagina, .kpis
   ------------------------------------------------------------ */

.consola {
  max-width: 1480px;
  margin-inline: auto;
  padding-inline: var(--space-5);
  padding-block: var(--space-6);
  display: grid;
  gap: var(--space-6);
}
/* Variante de dos columnas: contenido a la izquierda, panel de detalle a
   la derecha (412px, medido en el boceto de Tienda y de Leads). */
.consola--maestro {
  grid-template-columns: 1fr 412px;
  align-items: start;
}
/* Los botones de la consola llevan la esquina moderada de los bocetos, no la
   píldora de luuna.mx. La regla vive ACOTADA a .consola a propósito: `.btn`
   sigue siendo píldora en el iPad, en el correo y en las vistas de admin, que
   son otra identidad. Si HQ decide volver a la píldora, se borra esta regla y
   no se toca ningún componente. */
.consola .btn { border-radius: var(--radius-control); }

/* ⚠️ El techo NO es adorno: la lista de tiendas de la portada trae un renglón
   por tienda —195 hoy— y sin él la página medía diez mil píxeles de alto y la
   rueda del ratón nunca llegaba al final. Con el techo, el encabezado y el pie
   del panel se quedan quietos y lo que scrollea es `.panel__cuerpo`, que ya
   trae su `overflow-y: auto`. */
.consola--maestro > .panel,
.consola--red > .panel {
  position: sticky;
  /* La barra superior no está tokenizada todavía (components.css la deja en
     56px fijo): hasta que exista --topbar-h, el panel se separa un espacio
     de la parte de arriba del viewport en vez de calzar exacto bajo ella. */
  top: var(--space-5);
  max-height: calc(100vh - var(--space-7));
}

.pagina {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--space-4);
  align-items: start;
  margin-bottom: var(--space-6);
}
.pagina__volver {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
  font-size: var(--text-s);
  color: var(--color-ink-2);
}
.pagina__volver:hover { color: var(--color-ink); text-decoration: none; }
.pagina__titulo {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
}
.pagina__contexto {
  margin: var(--space-1) 0 0;
  font-size: var(--text-s);
  color: var(--color-ink-2);
}
.pagina__acciones {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-4);
}
/* .kpi usa .card por fuera (borde, radio, sombra) y por dentro es .stat
   (misma tipografía que el resto de la plataforma: el número grande no
   nace con un tamaño propio). */
a.kpi { color: inherit; text-decoration: none; transition: border-color 0.15s ease; }
a.kpi:hover { color: inherit; text-decoration: none; border-color: var(--color-brand); }
/* La cifra y la etiqueta, medidas en los bocetos: número más chico que el
   --text-stat del tablero y etiqueta en caja normal, no en VERSALITAS como
   la de .stat (que se queda igual donde ya se usa). */
.kpi .kpi__cifra { font-size: var(--text-kpi); }
.kpi .stat span { text-transform: none; letter-spacing: normal; font-size: var(--text-xs); }
.kpi__pie {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-ink-2);
}
/* El tono tiñe SOLO la cifra, nunca el fondo de la tarjeta: cinco tarjetas
   de color son cinco alarmas y ninguna se lee. */
.kpi--ok .kpi__cifra { color: var(--color-ok); }
.kpi--warn .kpi__cifra { color: var(--color-warn); }
.kpi--danger .kpi__cifra { color: var(--color-danger); }

/* ------------------------------------------------------------
   La fila de filtros y los chips de conteo
   ------------------------------------------------------------ */

.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
/* El buscador es el campo ancho de la fila —en el boceto mide ~320 px— y se
   estira con el espacio que sobra; los selects se quedan con su ancho. Es
   también el único que CEDE: con cinco filtros se encoge hasta 260 px antes
   de que alguno se caiga de renglón. */
.filtros__buscador { position: relative; flex: 1 1 260px; max-width: 420px; }
.filtros__buscador-icono {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-ink-3);
  font-size: var(--text-s);
  pointer-events: none;
}
.filtros__buscador .input--pastilla { width: 100%; padding-left: var(--space-8); }
.filtros__limpiar {
  font-size: var(--text-s);
  color: var(--color-brand);
}

/* Campos de la fila de filtros: esquina moderada (--radius-control), NO
   píldora — a diferencia de .btn, que conserva la suya. */
.input--pastilla,
.select--pastilla {
  width: auto;
  min-height: 46px;
  padding: 0 var(--space-4);
  border: 1.5px solid var(--color-line-2);
  border-radius: var(--radius-control);
  background: var(--color-bg-2);
  color: var(--color-ink);
}
/* ⚠️ Un <select> mide lo que mide su opción MÁS LARGA, y con el filtro
   «Tienda» cargado del catálogo real («Tienda: The Shops at Landmark Tijuana»)
   la fila se desbordaba. Con techo, el texto se corta con puntos suspensivos y
   la etiqueta del filtro siempre se alcanza a leer. */
.select--pastilla {
  max-width: 15rem;
  text-overflow: ellipsis;
}
/* La fila de CINCO filtros —el padrón de personas y las evaluaciones— no cabe
   en 1440 px con el ancho de siempre: el quinto se caía solo al renglón de
   abajo. Aquí el buscador cede primero y los selects se aprietan, que es lo
   que pide el boceto: los seis campos en un renglón. */
.filtros--densa .filtros__buscador { flex: 1 1 200px; max-width: 320px; }
.filtros--densa .select--pastilla { max-width: 12rem; }
.select--activo {
  background: var(--color-brand-soft);
  border-color: var(--color-brand);
  color: var(--color-brand);
}
/* components.css apaga el contorno de foco de .input/.select y lo cambia por
   un borde de marca. En la fila de filtros eso no alcanza: un select que YA
   tiene filtro puesto lleva ese mismo borde de marca, así que al enfocarlo no
   cambia nada y quien navega con el teclado se pierde. Aquí vuelve el contorno
   del :focus-visible global. */
.input--pastilla:focus-visible,
.select--pastilla:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.conteos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
/* Píldora-enlace: punto + texto + número. Mismo par color/fondo que la
   variante equivalente de .badge —en los bocetos el chip «Loop · 1,102» es
   texto azul sobre lavado azul, no texto gris—, con el punto de por medio
   para que el color nunca sea la única señal. */
.conteo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--tono, var(--color-ink-2));
  background: var(--tono-soft, var(--color-bg-2));
}
.conteo:hover { text-decoration: none; border-color: var(--tono, var(--color-ink-2)); }
.conteo::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.conteo--brand    { --tono: var(--color-brand-dark); --tono-soft: var(--color-brand-soft); }
.conteo--ok       { --tono: var(--color-ok);         --tono-soft: var(--color-ok-soft); }
.conteo--warn     { --tono: var(--color-warn);       --tono-soft: var(--color-warn-soft); }
.conteo--danger   { --tono: var(--color-danger);     --tono-soft: var(--color-danger-soft); }
.conteo--medicion { --tono: var(--color-medicion);   --tono-soft: var(--color-medicion-soft); }
/* El apagado, igual que .badge--off: tinta secundaria, nunca terciaria. */
.conteo--off      { --tono: var(--color-ink-2);      --tono-soft: var(--color-bg-2); }
/* El activo: borde de 1px del color del punto. */
.conteo[aria-current="true"] { border-color: var(--tono, var(--color-ink-2)); }
/* En cero: apagado, NO oculto — que algo valga cero es información. */
.conteo--vacio { opacity: 0.55; }

/* ------------------------------------------------------------
   La tabla, el orden, la selección y la barra de acciones
   ------------------------------------------------------------ */

/* Variante de .card sin relleno: la tabla trae el suyo por celda. Mismo
   patrón que .card--acento: un modificador nuevo de un átomo que ya
   existe, no una regla suelta.
   ⚠️ `overflow: clip` y no `hidden`: `hidden` convierte la tarjeta en
   contenedor de desplazamiento y el encabezado pegajoso de abajo se queda
   pegado a la tarjeta —es decir, no se pega a nada—. `clip` recorta igual
   la esquina redondeada sin crear ese contenedor. */
.card--tabla { padding: 0; overflow: clip; }

.tabla {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.tabla thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-2);
  text-align: left;
  text-transform: uppercase;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  color: var(--color-ink-2);
  border-bottom: 1px solid var(--color-line);
}
.tabla th.numerica { text-align: right; }
.tabla td {
  padding: 0 var(--space-4);
  height: 50px;
  font-size: var(--text-s);
  border-bottom: 1px solid var(--color-line);
  vertical-align: middle;
}
.tabla td.numerica { text-align: right; font-variant-numeric: tabular-nums; }
.tabla__principal { font-weight: var(--weight-medium); color: var(--color-ink); }
/* El segundo renglón de la celda: NUNCA --color-ink-3, que no alcanza el
   contraste mínimo sobre el fondo de la tabla. */
.tabla__meta { display: block; font-size: var(--text-xs); color: var(--color-ink-2); }
.tabla tbody tr:hover { background: var(--color-bg-2); }
.tabla tbody tr.is-seleccionada { background: var(--color-brand-soft); }
/* La fila única cuando no hay nada: frase honesta + la acción que la llena. */
.tabla__vacia {
  height: auto;
  padding: var(--space-7) var(--space-4);
  text-align: center;
  color: var(--color-ink-2);
}

/* El orden: un enlace dentro del <th>, sin fondo, hereda tipografía. Vive
   en la URL como los filtros — no hace falta botón ni JavaScript. */
.orden {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}
.orden:hover { color: var(--color-ink); text-decoration: none; }

.seleccion {
  width: 18px;
  height: 18px;
  accent-color: var(--color-brand);
}

.barra-acciones {
  position: sticky;
  bottom: 0;
  z-index: 15;
  display: none;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-pop);
}
.barra-acciones.is-visible { display: flex; }
.barra-acciones__resumen { margin: 0; font-weight: var(--weight-medium); }
.barra-acciones__botones { display: flex; gap: var(--space-2); margin-left: auto; align-items: center; }
.barra-acciones__todas {
  color: var(--color-brand);
  background: none;
  border: 0;
  font-size: var(--text-s);
  cursor: pointer;
}

/* ------------------------------------------------------------
   La paginación propia
   ------------------------------------------------------------ */

.paginacion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4);
}
.paginacion__resumen { margin: 0; font-size: var(--text-s); color: var(--color-ink-2); }
.paginacion__numeros { display: flex; gap: var(--space-1); align-items: center; }
.paginacion__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 0 var(--space-2);
  /* Esquina moderada, no píldora: en el boceto los números de página son
     cuadros redondeados, del mismo radio que los campos de filtro. */
  border-radius: var(--radius-control);
  background: var(--color-bg-2);
  color: var(--color-ink-2);
  font-size: var(--text-s);
}
.paginacion__n:hover { background: var(--color-line); color: var(--color-ink); text-decoration: none; }
.paginacion__n[aria-current="page"] { background: var(--color-brand); color: #fff; }
.paginacion__n[aria-disabled="true"] { color: var(--color-ink-3); cursor: not-allowed; }
.paginacion__hueco {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  color: var(--color-ink-2);
}

/* ------------------------------------------------------------
   El chip de estatus, el panel, las tarjetas de pantalla y lo demás.
   ------------------------------------------------------------ */

/* .panel reusa .card (borde, radio, sombra, fondo) y pone su propio
   padding en cero: header, cuerpo y pie traen el suyo por separado. 412px
   en .consola--maestro, que es quien decide el ancho de la columna. */
.panel { padding: 0; display: flex; flex-direction: column; }
.panel__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
}
.panel__head h3 { margin: 0; }
.panel__cuerpo {
  /* `position: relative` para ser el bloque contenedor de lo que lleve
     `position: absolute` adentro —los textos `.visually-hidden` de la tabla—:
     sin esto su bloque contenedor es el panel, el scroll NO los recorta y
     estiraban la página entera a diez mil píxeles aunque la lista se viera
     acotada. */
  position: relative;
  /* `min-height: 0` es lo que deja que el cuerpo SE ENCOJA cuando el panel
     trae techo: un hijo de flex no baja de su contenido por omisión, y sin
     esto el `overflow-y` nunca entra en acción. */
  min-height: 0;
  padding: var(--space-4) var(--space-5);
  overflow-y: auto;
}
.panel__pie {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-line);
}
.panel--vacio {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: var(--space-5);
  text-align: center;
  color: var(--color-ink-2);
}

.rejilla-pantallas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}
/* .pantalla es .card con el relleno justo: en el boceto el lienzo va
   embebido —se ve el fondo de la tarjeta alrededor— y tiene su propia
   esquina, no la de la tarjeta. */
.pantalla { padding: var(--space-3); overflow: hidden; }
.pantalla__lienzo {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: flex-end;
  padding: var(--space-3);
  border-radius: var(--radius-s);
  overflow: hidden;
}
.pantalla__lienzo--loop { background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-dark) 100%); }
.pantalla__lienzo--miniclip { background: linear-gradient(135deg, var(--color-ok) 0%, var(--color-brand) 100%); }
.pantalla__lienzo--medicion { background: linear-gradient(135deg, var(--color-medicion) 0%, var(--color-warn) 100%); }
.pantalla__lienzo--sin-red { background: linear-gradient(135deg, var(--color-ink-3) 0%, var(--color-bg-2) 100%); }
.pantalla__reproduciendo {
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.pantalla__cuerpo { padding: var(--space-3) var(--space-2) var(--space-1); }
.pantalla__titulo { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.pantalla__titulo strong { font-weight: var(--weight-medium); }
.pantalla__meta { margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--color-ink-2); }
.pantalla__meta--fila { display: flex; justify-content: space-between; }

/* Hora en negrita, texto en tinta secundaria — nunca --color-ink-3 (regla
   de contraste). */
.actividad { list-style: none; margin: 0; padding: 0; }
.actividad li {
  padding: var(--space-2) 0;
  font-size: var(--text-s);
  color: var(--color-ink-2);
  border-bottom: 1px solid var(--color-line);
}
.actividad li:last-child { border-bottom: 0; }
.actividad__hora { font-weight: var(--weight-medium); color: var(--color-ink); }

/* Barra de progreso genérica: "14 de 19 piezas listas", el avance de una
   transcodificación. Sin partial propio: cada módulo la dibuja con su
   número y su ancho (--valor, 0 a 100). */
.progreso { height: 6px; border-radius: var(--radius-pill); background: var(--color-bg-2); overflow: hidden; }
.progreso__barra { height: 100%; background: var(--color-brand); width: calc(var(--valor, 0) * 1%); }

/* El grupo Habitación · Sala · Loops: fondo hundido, píldora interior.
   `justify-self: start` porque el grupo es celda de la rejilla de `.consola`
   y sin eso se estira a todo lo ancho: `display: inline-flex` no alcanza
   para evitarlo, el estirado de la rejilla manda sobre el ancho intrínseco. */
.pestanas {
  justify-self: start;
  display: inline-flex;
  gap: var(--space-1);
  padding: 3px;
  background: var(--color-bg-2);
  border-radius: var(--radius-pill);
}
.pestana {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--text-s);
  color: var(--color-ink-2);
}
.pestana:hover { color: var(--color-ink); text-decoration: none; }
.pestana[aria-current="page"] { background: var(--color-brand); color: #fff; }

/* La miniatura de un clip: 16/9, ▶ centrado, duración en píldora abajo a
   la derecha. */
.clip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-s);
  background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-dark) 100%);
  color: #fff;
  font-size: var(--text-l);
}
.clip:hover { color: #fff; text-decoration: none; }
.clip__duracion {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: var(--text-xs);
}
.clip__titulo { margin: var(--space-2) 0 0; font-size: var(--text-s); }

/* El "+ Subir clip" de borde punteado: del tamaño de un .clip. */
.subir {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  aspect-ratio: 16 / 9;
  border: 1.5px dashed var(--color-line-2);
  border-radius: var(--radius-s);
  color: var(--color-ink-2);
  font-size: var(--text-s);
  background: none;
  cursor: pointer;
}
.subir:hover { border-color: var(--color-brand); color: var(--color-brand); text-decoration: none; }

/* Un <summary> que ya trae su propia apariencia —el botón de arriba, la zona
   punteada de cada ficha— no necesita además el triángulo del navegador.
   Solo se apaga donde hay una apariencia que lo sustituye: un <summary>
   pelón (el de «Invitar persona») conserva el suyo. */
summary.btn,
summary.subir { list-style: none; }
summary.btn::-webkit-details-marker,
summary.subir::-webkit-details-marker { display: none; }

/* La fila de clips de una ficha: miniaturas del mismo ancho, cada una con su
   título y su duración, y el «+ Subir clip» punteado al final. Se envuelve
   sola cuando un producto tiene más clips de los que caben a lo ancho.
   El ancho es una variable local y no un número suelto: toda la fila se
   ajusta desde un solo lugar, y quien la use en otro encuadre puede
   redefinirla sin tocar esta hoja. */
.clips {
  --clip-ancho: 11.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: start;
}
.clips > * {
  flex: 0 0 var(--clip-ancho);
  max-width: var(--clip-ancho);
  min-width: 0;
}
/* Al abrirse, el «+ Subir clip» de una ficha toma el ancho de la fila: el
   formulario no cabe en el ancho de una miniatura, y el recuadro punteado
   deja de ser un 16/9 para quedarse como encabezado de lo que se abrió. */
.clips > details[open] { flex-basis: 100%; max-width: 100%; }
.clips > details[open] > .subir {
  flex-direction: row;
  aspect-ratio: auto;
  min-height: var(--tap);
}

/* La miniatura con su pie —lo que envuelve `consola/_clip`—: un título largo
   no ensancha su columna, y lo que el módulo cuelgue debajo (el chip de una
   pieza que todavía no está lista, su motivo, «Reintentar») se apila con el
   mismo aire. */
.clip-item { min-width: 0; }
.clip-item__pie {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-ink-2);
}

/* La ficha de un producto del catálogo: su miniatura grande con el nombre y
   la categoría debajo, y a la derecha la fila de clips. Es una .card por
   fuera; esto solo reparte las dos columnas. */
.producto {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.producto__poster {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-s);
  background: var(--color-bg-2);
}
/* Un producto sin póster no deja un hueco ni descuadra la ficha: el mismo
   rectángulo, apagado y punteado, diciendo que falta la imagen. */
.producto__poster--vacio {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--color-line-2);
  color: var(--color-ink-3);
  font-size: var(--text-l);
}
.producto__nombre { margin: var(--space-3) 0 0; font-size: var(--text-l); }
.producto__meta { margin: var(--space-1) 0 0; font-size: var(--text-s); color: var(--color-ink-2); }

/* El «+ Subir clip» de la cabecera de página: el formulario cae bajo el
   botón, encimado, para no empujar el título ni las pestañas. */
.subida { position: relative; }
.subida__panel {
  position: absolute;
  right: 0;
  z-index: 2;
  width: 24rem;
  margin-top: var(--space-2);
  text-align: start;
}

/* La tarjeta de recomendación con borde de acento — único lugar donde se ve
   un borde de color completo, no solo texto/punto. */
.card--acento { border: 1px solid var(--color-brand); }
.eyebrow {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand);
}
/* El mismo rótulo, en gris: sirve de encabezado repetido (una categoría por
   sección, «CLIPS · 5» en cada ficha) donde el morado de marca convertiría
   la página en una lista de acentos y ninguno se leería. */
.eyebrow--tenue { color: var(--color-ink-2); }

/* La leyenda del mapa: inventario, instalación y operación. */
.leyenda { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-s); color: var(--color-ink-2); }
.leyenda__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.leyenda__item::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--tono, currentColor); }
.leyenda__item--ok { --tono: var(--color-ok); }
.leyenda__item--parcial { --tono: var(--color-warn); }
.leyenda__item--fuera { --tono: var(--color-danger); }
.map-card {
  --map-pendiente: #94949b;
  --map-instalacion: #e5b700;
  --map-incidencia: #c62828;
  --map-bodega: #91633c;
}
.leyenda__item--pendiente { --tono: var(--map-pendiente); }
.leyenda__item--en_instalacion { --tono: var(--map-instalacion); }
.leyenda__item--operativa { --tono: var(--color-ok); }
.leyenda__item--incidencia { --tono: var(--map-incidencia); }
.leyenda__item--bodega { --tono: var(--map-bodega); }
.leyenda__item--sin_datos::before { background: var(--color-bg); border: 1px solid var(--color-ink-2); }

/* ------------------------------------------------------------
   La portada, los pares campo/valor y la gente
   ------------------------------------------------------------ */

/* La fila de dos columnas de la portada. La lista de tiendas trae cuatro
   columnas —tienda, pantallas, loop y BedMatch— y a los 412 px de
   `.consola--maestro` se desborda; aquí el panel mide 600. El respiro de
   arriba se va a cero: el bloque de los KPI ya puso el suyo y entre los dos
   abrían un hueco del doble. */
.consola--red {
  grid-template-columns: 1fr var(--ancho-panel-red, 600px);
  align-items: start;
  padding-block-start: 0;
}

/* Encabezado de tarjeta: título a la izquierda, leyenda o acción a la
   derecha, en UNA fila. Es el gemelo de `.panel__head` SIN `position:
   sticky`: en una tarjeta alta —el mapa— el encabezado pegajoso se quedaba
   flotando encima del dibujo al bajar por la página. */
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}
.card__head h3 { margin: 0; }

/* El punto de estatus de una lista densa: el mismo 9 px de la leyenda del
   mapa, sin la píldora del chip. Quien lo use pone la palabra al lado en un
   `.visually-hidden`: de un color no se entera un lector de pantalla. */
.punto {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-inline-end: var(--space-2);
  border-radius: 50%;
  background: var(--tono, var(--color-ink-3));
  vertical-align: middle;
}
.punto--ok { --tono: var(--color-ok); }
.punto--parcial { --tono: var(--color-warn); }
.punto--fuera { --tono: var(--color-danger); }

/* Los KPI del pie de un panel: el panel mide 412 px y con el mínimo de
   190 px por tarjeta los tres se apilaban en tres renglones. Aquí caben en
   uno, con la cifra al tamaño de un título de sección. */
.kpis--panel {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}
.kpis--panel .kpi { padding: var(--space-3); }
.kpis--panel .kpi .kpi__cifra { font-size: var(--text-xl); }

/* Pares campo/valor: el cuestionario de una evaluación, la ficha de una
   pantalla. Campo en tinta secundaria a la izquierda, valor en negrita a la
   derecha, un renglón por par. */
.pares { margin: 0; display: grid; gap: var(--space-2); }
.pares > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}
.pares dt { color: var(--color-ink-2); font-size: var(--text-s); }
.pares dd {
  margin: 0;
  text-align: end;
  font-weight: var(--weight-medium);
}

/* El renglón de una persona: el círculo con sus iniciales y, al lado, su
   nombre con lo que lo acompañe. */
.persona { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.persona__datos { min-width: 0; }
.avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-brand-soft);
  color: var(--color-brand-dark);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------
   La ficha de hardware de una pantalla y su historia
   ------------------------------------------------------------ */

/* La barra de .progreso con tono: la medida (temperatura, RAM, disco) se
   tiñe con la severidad, igual que la cifra del KPI que la acompaña. */
.progreso--warn .progreso__barra { background: var(--color-warn); }
.progreso--danger .progreso__barra { background: var(--color-danger); }

.hardware__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.hardware__cabecera h2 { margin: 0; }
.hardware__cabecera p { margin: 0; font-size: var(--text-s); }
.hardware__alertas { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Los cuatro KPI de la ficha: la cifra al tamaño de un título de sección,
   como .kpis--panel, porque aquí son cuatro y conviven con la tabla de pares. */
.kpis--hardware .kpi { padding: var(--space-4); display: grid; gap: var(--space-2); }
.kpis--hardware .kpi .kpi__cifra { font-size: var(--text-xl); }
.kpis--hardware .kpi__pie { margin-top: 0; }

/* Dos por renglón (2 × 2): las cuatro medidas se comparan de un vistazo y
   cada gráfica queda lo bastante ancha para leer las horas. En pantallas
   angostas, una debajo de otra. */
.historia__graficas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-6);
}
@media (max-width: 720px) {
  .historia__graficas { grid-template-columns: 1fr; }
}
.historia__grafica { position: relative; margin: 0; }
.historia__titulo {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--text-s);
}
.historia__sin-dato { font-size: var(--text-s); }
.historia__tabla summary { cursor: pointer; font-size: var(--text-s); color: var(--color-ink-2); }
.historia__tabla[open] summary { margin-bottom: var(--space-3); }
.historia__tabla .card--tabla { max-height: 420px; overflow-y: auto; }

/* Las gráficas de línea en SVG inline. Todo color sale de un token, así que
   los cuatro momentos del día se cuidan solos: la línea es de la marca, la
   retícula es una línea del sistema y el texto es tinta, nunca color de
   serie. Medidas del lienzo en unidades del viewBox (320 × 150). */
.grafica { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.grafica__guia { stroke: var(--color-line); stroke-width: 1; shape-rendering: crispEdges; }
.grafica__umbral { stroke: var(--color-warn); stroke-width: 1; shape-rendering: crispEdges; opacity: 0.7; }
.grafica__eje {
  fill: var(--color-ink-2);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.grafica__linea {
  fill: none;
  stroke: var(--color-brand);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.grafica__punto { fill: var(--color-brand); }
/* La última lectura: punto de 8 px con anillo del color de la superficie,
   para que se lea aunque la línea pase por encima. */
.grafica__ultimo { fill: var(--color-brand); stroke: var(--color-bg); stroke-width: 2; }
.grafica__valor { fill: var(--color-ink); font-size: 11px; font-weight: var(--weight-medium); }
.grafica__cursor { stroke: var(--color-ink-3); stroke-width: 1; shape-rendering: crispEdges; }
.grafica__globo {
  position: absolute;
  top: var(--space-6);
  display: grid;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-s);
  background: var(--color-bg);
  box-shadow: var(--shadow-pop);
  font-size: var(--text-xs);
  pointer-events: none;
  white-space: nowrap;
  transform: translateX(-50%);
}
.grafica__globo[hidden] { display: none; }
.grafica__globo span { color: var(--color-ink-2); }

/* Movimiento: quien pide menos animación no ve ninguna. Se nombran TODOS los
   elementos que declaran una transición en components.css y aquí —el botón,
   el menú flotante con su abanico escalonado, el panel y la tarjeta KPI—;
   `transition-delay` también se apaga, si no el abanico sigue llegando tarde
   aunque ya no dure nada. */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .launcher__btn,
  .launcher__panel,
  .launcher__tile,
  .panel,
  a.kpi,
  .subir,
  .clip,
  .conteo {
    transition: none;
    transition-delay: 0s;
  }
}

/* Módulo Sistema: las tarjetas de publicar y asignar, lado a lado cuando
   caben y apiladas en pantalla angosta. */
.sistema__tarjetas {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  align-items: start;
}

/* Los botones de manos remotas de la ficha: `button_to` envuelve cada uno en
   su propio <form>, y los formularios son los que se acomodan en fila. */
.sistema__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
=======
/* El interruptor de un ajuste global (BedMatch con sensores, en
   Evaluaciones): el texto a la izquierda y el botón a la derecha, sin que el
   botón se encoja nunca — el texto es el que cede. */
.ajuste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.ajuste__texto { flex: 1; }
.ajuste form { flex: none; }
.ajuste__texto > * + * { margin-top: var(--space-2); }
.ajuste__titulo { display: flex; align-items: center; gap: var(--space-3); }
.ajuste__titulo h2 { margin: 0; font-size: var(--text-l); }
.ajuste p { margin-bottom: 0; color: var(--color-ink-2); font-size: var(--text-s); }