/* ===========================================================================
   Fibraya — el tema de producción.
   ===========================================================================

   Reemplaza a `a.css`. Toma la estructura visual de Nexo, que es la que se
   aprobó en la vista previa —barra superior blanca, esquinas suaves, sombras
   discretas, Inter, pestaña activa subrayada— pero con los colores de Fibraya.

   La regla de color, y es una regla, no una sugerencia:

     AZUL    la estructura y lo que se puede hacer: barra, enlaces, pestaña
             activa, botón principal.
     NARANJA lo que pide atención: deuda, vencidos, servicio cortado, avisos.
     ROJO    solo lo que NO se deshace: eliminar cliente, anular un pago.

   Mezclar azul y naranja como dos principales fue justo lo que se descartó:
   compitiendo, nada resalta y la pantalla se vuelve ruido. El naranja vale
   porque es escaso — el día que todo sea naranja, no señalará nada.

   Los tres colores están verificados sobre sus fondos: el naranja #a8480d da
   6.0:1 sobre blanco y 5.6:1 sobre su propio fondo claro, el azul #0a5cd6 da
   5.3:1, y en oscuro se aclaran los dos porque el mismo tono sobre #16181c se
   quedaría en 3:1 y no llegaría al mínimo.
   =========================================================================== */

/* ------------------------------------------------------------ tema claro */

:root[data-theme='light'],
:root:not([data-theme='dark']) {
  --surface-0: #f7f8fa;
  --surface-1: #ffffff;
  --surface-2: #f1f3f6;
  --line: #e4e7ec;
  --line-soft: #eef0f4;
  --line-control: #b6bcc6;

  --text-primary: #10141c;
  --text-secondary: #4a515c;
  --text-muted: #5c6470;

  /* AZUL — estructura y acción */
  --accent: #0a5cd6;
  --accent-ink: #ffffff;
  --accent-soft: #e8f0fd;
  --accent-soft-ink: #084bb0;
  --accent-ring: rgba(10, 92, 214, 0.18);

  /* La barra ya no es una franja azul oscura: es blanca, como en Nexo. El
     azul se reserva para lo que se puede tocar, y una franja de color no se
     toca. Se separa del fondo con una línea, no con relleno. */
  --brand-0: #ffffff;
  --brand-1: #ffffff;

  /* NARANJA — atención */
  --warn: #a8480d;
  --warn-bg: #fff2e8;

  /* ROJO — irreversible */
  --danger: #b3261e;
  --danger-bg: #fceae8;
  --danger-ink: #ffffff;

  --ok: #0e7c5a;
  --ok-bg: #e3f6ee;

  --radius: 8px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(16, 20, 28, 0.05), 0 2px 8px rgba(16, 20, 28, 0.04);
}

/* ----------------------------------------------------------- tema oscuro */

:root[data-theme='dark'],
:root:not([data-theme='light']) {
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --surface-0: #101216;
    --surface-1: #181b21;
    --surface-2: #21252c;
    --line: #2b3038;
    --line-soft: #23272e;
    --line-control: #5a6270;

    --text-primary: #f2f4f7;
    --text-secondary: #b3bac5;
    --text-muted: #a2aab6;

    --accent: #6ea8fe;
    --accent-ink: #0b1220;
    --accent-soft: #16233a;
    --accent-soft-ink: #a8c8ff;
    --accent-ring: rgba(110, 168, 254, 0.25);

    --brand-0: #0d1015;
    --brand-1: #0d1015;

    --warn: #f0a06a;
    --warn-bg: #2e1e12;

    --danger: #f2837c;
    --danger-bg: #2e1715;
    --danger-ink: #2a0f0d;

    --ok: #5fd0a4;
    --ok-bg: #10291f;
  }
}

:root[data-theme='dark'] {
  --surface-0: #101216;
  --surface-1: #181b21;
  --surface-2: #21252c;
  --line: #2b3038;
  --line-soft: #23272e;
  --line-control: #5a6270;

  --text-primary: #f2f4f7;
  --text-secondary: #b3bac5;
  --text-muted: #a2aab6;

  --accent: #6ea8fe;
  --accent-ink: #0b1220;
  --accent-soft: #16233a;
  --accent-soft-ink: #a8c8ff;
  --accent-ring: rgba(110, 168, 254, 0.25);

  --brand-0: #0d1015;
  --brand-1: #0d1015;

  --warn: #f0a06a;
  --warn-bg: #2e1e12;

  --danger: #f2837c;
  --danger-bg: #2e1715;
  --danger-ink: #2a0f0d;

  --ok: #5fd0a4;
  --ok-bg: #10291f;
}

/* -------------------------------------------------------- forma y ritmo */

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/*
 * La barra blanca.
 *
 * `app.css` la pinta asumiendo fondo oscuro: la marca, el menú y los botones
 * van en blanco fijo. Con la barra clara todo eso quedaba blanco sobre blanco
 * y la cabecera aparecía vacía. Hay que reponer las tintas, no solo el fondo.
 */
header.topbar {
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
header.topbar .brand,
header.topbar .brand span { color: var(--text-primary); }
/* El punto de la marca es el único sitio donde el azul es decorativo, y ahí sí
   corresponde: es la identidad. */
header.topbar .brand .dot { background: var(--accent); }

nav.nav a { color: var(--text-secondary); }
nav.nav a:hover { background: var(--surface-2); color: var(--text-primary); }
nav.nav a.active { background: var(--accent-soft); color: var(--accent-soft-ink); }

.topbar button.icon,
.topbar button.ghost {
  background: var(--surface-1);
  color: var(--text-primary);
  border-color: var(--line-control);
}
.topbar button.icon:hover,
.topbar button.ghost:hover { background: var(--surface-2); }
#userLabel { color: var(--text-muted); }
.topbar :focus-visible { box-shadow: 0 0 0 4px var(--accent-ring); outline-color: var(--accent); }

/* Sección activa subrayada, no en pastilla. Es lo que la hace leerse como una
   pestaña de verdad y no como un botón más de la fila. */
.tabs .tab[aria-selected='true'] {
  background: transparent;
  border-radius: 0;
  border-bottom: 2px solid var(--accent);
  color: var(--text-primary);
}

th {
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------- jerarquía de botones */

/*
 * Cortar el servicio es grave, pero se deshace con un clic desde la misma
 * ficha. Va en naranja y solo en el borde: se ve venir, no se aprieta sin
 * querer, y no se disfraza de lo mismo que borrar un cliente.
 *
 * El rojo relleno queda para lo que no tiene vuelta atrás.
 */
button.corte,
.btn-corte {
  color: var(--warn);
  border-color: var(--warn);
  background: transparent;
}
button.corte:hover:not(:disabled),
.btn-corte:hover:not(:disabled) {
  background: var(--warn-bg);
  filter: none;
}

/* ---------------------------------------------------- ficha del cliente */

/*
 * Carril de identidad + cuerpo.
 *
 * Antes la ficha eran cuatro franjas apiladas —aviso, cabecera, resumen,
 * pestañas— y recién después el contenido, con dos tarjetas de alturas muy
 * distintas que dejaban un hueco enorme abajo. Y para ver el teléfono del
 * cliente mientras se miraba su deuda había que cambiar de pestaña y volver.
 *
 * Ahora quién es el cliente vive en un carril fijo a la izquierda, siempre a
 * la vista, y las pestañas se quedan solo con lo que cambia: sus documentos,
 * su servicio, sus papeles y su consumo.
 */
.ficha {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.ficha-rail {
  position: sticky;
  /* Debajo de la barra superior, que también es fija. */
  top: 76px;
}

.ficha-rail .card { margin: 0; }

/* En 340px el título y los dos botones no caben en la misma línea: "Datos del
   cliente" se partía en dos. Los botones bajan a su propia fila. */
.ficha-rail .card-head {
  display: block;
  min-height: 0;
}
.ficha-rail .card-head h2 { white-space: nowrap; }
.ficha-rail .card-acciones {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
/* `min-width: 0` es lo que impide que se salgan: sin eso el ancho mínimo del
   contenido del botón manda sobre el reparto y en el teléfono "Eliminar" se
   iba fuera de la tarjeta. */
.ficha-rail .card-acciones button {
  flex: 1 1 0;
  min-width: 0;
}

/* Etiqueta arriba y valor debajo: en una columna angosta, dos columnas dejan
   al valor con la mitad del ancho y todas las direcciones se parten. */
.ficha-rail .kv {
  display: block;
}
.ficha-rail .kv > .k {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 12px;
}
.ficha-rail .kv > .v {
  font-size: 14px;
  color: var(--text-primary);
}

/* El resumen de cuenta ya no es una franja de ancho completo con tres datos y
   mucho aire: al perder el carril de la izquierda queda a la medida de lo que
   dice. */
.ficha-cuerpo .stats { margin-bottom: 16px; }

/* Las pestañas mandan sobre la columna derecha, no sobre la página entera. */
.ficha-cuerpo .tabs { margin-bottom: 16px; }

/* La foto de la fachada era una estampilla al final de una lista. Es lo que el
   técnico mira para encontrar la casa: se muestra a lo ancho del carril. */
.ficha-rail .kv img {
  width: 100%;
  /* Con la altura libre, una foto vertical de celular ocupaba media pantalla y
     empujaba todo lo demás fuera de la vista. Se recorta a una banda. */
  height: 170px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-sm);
}

/* En pantalla angosta el carril deja de ser carril y vuelve arriba. */
@media (max-width: 1100px) {
  /* `minmax(0, 1fr)` y no `1fr`: una pista `1fr` no baja del ancho mínimo de
     su contenido, así que en el teléfono la tarjeta se estiraba a 402px dentro
     de una pantalla de 390 y el botón "Eliminar" quedaba cortado. */
  .ficha { grid-template-columns: minmax(0, 1fr); }
  .ficha-rail { position: static; }
}

/* ------------------------------------------------ mensajes y bitácora */

/*
 * Una sola línea de tiempo con todo lo que le pasó al cliente. El icono de la
 * izquierda es lo que deja distinguir de un vistazo un mensaje suyo de un
 * aviso automático o de un cambio que hizo la oficina, sin tener que leer.
 */
.bitacora {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bit {
  display: flex;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line-soft);
}
.bit:last-child { border-bottom: 0; }

.bit-icono {
  flex: 0 0 28px;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
}

.bit-cuerpo { min-width: 0; flex: 1; }

.bit-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.bit-texto {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--text-primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Lo que escribió el cliente se separa visualmente de lo que decimos nosotros:
   sin esto la conversación se lee como un solo monólogo. */
.bit.mensaje.suyo {
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding-left: 10px;
  padding-right: 10px;
}

/* Un cambio de plan o de precio es plata: se marca en naranja, que es el color
   de "esto pide atención". */
.bit.cambio .bit-icono { color: var(--warn); }

/* -------------------------------------------------- caja de respuesta */

.responder {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 18px;
  background: var(--surface-2);
}

.responder textarea {
  width: 100%;
  resize: vertical;
}

/* El aviso de la ventana de 24 h no es decorativo: es lo que impide escribir
   un mensaje largo para que Meta lo rechace al enviarlo. */
.responder-aviso {
  font-size: 13px;
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
}
.responder-aviso.ok   { background: var(--ok-bg);   color: var(--ok); }
.responder-aviso.warn { background: var(--warn-bg); color: var(--warn); }

/* El distintivo de cada hecho. Un punto de color, no un emoji: el emoji sale
   como un cuadradito vacío en los equipos sin esa fuente. */
.bit-punto {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-top: 7px;
  background: currentColor;
}
.bit-punto.ok     { color: var(--ok); }
.bit-punto.accent { color: var(--accent); }
.bit-punto.warn   { color: var(--warn); }
.bit-punto.muted  { color: var(--text-muted); }

/* ============================================================ formularios */

/*
 * Los formularios al modo de Odoo y Nexo: campos agrupados por tema, con el
 * título de cada grupo separado por una línea, y controles livianos.
 *
 * El cambio de fondo es el que más se nota: `app.css` le pone a cada input un
 * borde grueso y una sombra interior, y con veinte campos en pantalla eso se
 * lee como veinte cajas duras —el "muro de cajas" que ya habías señalado—.
 * Aquí el campo se marca con una línea fina y se hace evidente al enfocarlo,
 * que es cuando de verdad importa saber dónde estás escribiendo.
 */

.form-section {
  padding-top: 6px;
  margin-top: 18px;
}
.form-section:first-child { margin-top: 0; }

.form-section .section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

label {
  margin: 12px 0 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
}

input,
select,
textarea {
  padding: 8px 11px;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  /* Sin sombra interior: es lo que convertía cada campo en una caja. */
  box-shadow: none;
  font: inherit;
  color: var(--text-primary);
}

input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) {
  border-color: var(--text-muted);
}

/* Enfocado sí pesa: es el único momento en que el borde tiene que gritar. */
input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
  outline: none;
}

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--surface-2);
  color: var(--text-muted);
}

/* Los campos obligatorios se marcan en el label, no con un asterisco suelto
   al final que nadie asocia con nada. */
label.requerido::after {
  content: ' *';
  color: var(--warn);
  font-weight: 700;
}

.field-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* La fila de botones, separada del último campo por una línea: marca dónde
   termina de escribirse y dónde empieza a decidirse. */
.form-actions,
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* En el teléfono los botones ocupan el ancho: son objetivos táctiles. */
@media (max-width: 640px) {
  .form-actions,
  .modal-actions { flex-direction: column-reverse; }
  .form-actions button,
  .modal-actions button { width: 100%; }
}

/* ====================================================== panel de control */

/*
 * La barra de trabajo de los listados, al modo de Odoo: buscador, filtros, y
 * debajo las facetas diciendo qué está aplicado.
 */

.toolbar {
  gap: 10px;
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
}

/* Las facetas: lo aplicado, con palabras y con una equis para quitarlo. Antes
   había que revisar cinco desplegables para saber qué se estaba viendo. */
.facetas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.facetas[hidden] { display: none; }

.faceta {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--accent);
  border-radius: 999px;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1;
}
.faceta-cat {
  background: var(--accent);
  color: var(--accent-ink);
  padding: 5px 9px;
  font-weight: 600;
}
.faceta-val {
  padding: 5px 9px;
  color: var(--accent-soft-ink);
  background: var(--accent-soft);
}
.faceta-x {
  border: 0;
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
  padding: 4px 9px 5px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  min-height: 0;
}
.faceta-x:hover { background: var(--accent); color: var(--accent-ink); }

/* Encabezado ordenable: se nota que se puede tocar antes de tocarlo. */
th { cursor: pointer; user-select: none; }
th[data-no-ordenar] { cursor: default; }
th:hover:not([data-no-ordenar]) { color: var(--text-primary); }

.orden-flecha {
  margin-left: 5px;
  color: var(--accent);
  font-size: 11px;
}

/* El paginador va alineado a la derecha como en Odoo, con el tramo a la
   izquierda de las flechas. */
.pager {
  justify-content: flex-end;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.pager .leyenda { margin-right: auto; }

/* La barra de búsqueda comparte fila con el título y el botón de acción, como
   el panel de control de Odoo: una sola franja de mando en vez de tres
   apiladas. El `min-width: 0` es lo que la deja encogerse en vez de empujar al
   botón fuera de la pantalla. */
/*
 * Rejilla de tres columnas, y no una fila flexible, porque el buscador tiene
 * que quedar centrado EN LA PÁGINA, no a continuación del título. Con flex la
 * barra arranca donde termina "Clientes" y su centro cae siempre a la
 * izquierda del centro real; con `1fr auto 1fr` la columna del medio se centra
 * sola, midan lo que midan el título y el botón.
 *
 * Solo aplica donde hay buscador: el resto de las pantallas sigue con su fila.
 */
.page-head:has(.page-head-buscador) {
  display: grid;
  /* La columna del medio con `minmax(0, 620px)` y no `auto`: con `auto` la
     columna se ajusta al contenido, y como el ancho del buscador se pedía en
     porcentaje de esa misma columna, la cuenta se mordía la cola y la barra
     salía encogida a un tercio. */
  grid-template-columns: 1fr minmax(0, 620px) 1fr;
  align-items: center;
  gap: 20px;
}
.page-head:has(.page-head-buscador) > :first-child { justify-self: start; }

/* Izquierda: el nombre de la pantalla y a su derecha la acción. Se lee
   "Clientes → Nuevo cliente", que es el orden en que se piensa. */
.page-head-izq {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* Derecha: el paginador, con el tramo y las dos flechas. */
.page-head-pager {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.page-head-pager button.icon {
  min-width: 32px;
  padding: 6px 10px;
  font-size: 17px;
  line-height: 1;
}

.page-head-buscador {
  width: 100%;
  min-width: 0;
}
.page-head-buscador .nx-sb-wrap { margin: 0; max-width: none; }

/* En pantalla angosta la fila se parte y la barra ocupa su propio renglón. */
/* En pantalla angosta las tres columnas no caben: el buscador baja a su propio
   renglón, a lo ancho. */
@media (max-width: 900px) {
  .page-head:has(.page-head-buscador) {
    grid-template-columns: 1fr auto;
  }
  .page-head-buscador {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    margin-top: 12px;
  }
}

/* `align-items: flex-start` alinea por arriba, y con el título de dos líneas
   —nombre y contador— la barra quedaba pegada al borde superior en vez de a la
   altura del texto. Se centra y se permite que la fila se parta. */
.page-head {
  align-items: center;
  flex-wrap: wrap;
}

/* La librería envuelve la barra en su propio panel blanco con borde: dentro de
   la fila del título eso se ve como una caja flotando sobre el fondo. Aquí la
   barra ES la fila, así que el envoltorio se vuelve transparente y solo queda
   el campo. */
.page-head-buscador .nx-cp {
  background: transparent;
  border-bottom: 0;
}
.page-head-buscador .nx-cp-top,
.page-head-buscador .nx-cp-bottom { padding: 0; }

/* ===================================================== estado de cuenta */

/*
 * La cuenta como una cartola: cada recibo con los pagos que lo cubrieron
 * colgando debajo, en vez de dos tablas que hay que cruzar de memoria.
 *
 * La sangría y la línea de la izquierda son lo que hace la relación evidente
 * sin escribirla: el pago se lee como algo que pertenece al recibo de arriba.
 */

.cartola { display: flex; flex-direction: column; gap: 12px; }

.cartola-doc {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cartola-doc-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface-2);
}
.cartola-doc-cab .doc-num { font-weight: 700; }

/* El importe del recibo empujado a la derecha: es la columna que se recorre
   con la vista al revisar una cuenta. */
.cartola-total {
  margin-left: auto;
  font-weight: 700;
  font-size: 15px;
}
.cartola-total.ok { color: var(--ok); }

/* Un recibo saldado no pide nada: se apaga para que resalten los que sí. */
.cartola-doc.saldado .cartola-doc-cab { background: transparent; }

.cartola-pagos {
  padding: 4px 14px 8px;
  /* La línea es la que dice "esto es de ahí arriba". */
  border-left: 3px solid var(--ok);
  margin-left: 14px;
}

.cartola-pago {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  font-size: 13.5px;
  border-bottom: 1px solid var(--line-soft);
}
.cartola-pago:last-child { border-bottom: 0; }

.cartola-monto { margin-left: auto; font-weight: 600; color: var(--ok); }
.cartola-monto.tachado { text-decoration: line-through; color: var(--text-muted); }

/* Lo que todavía se debe, en naranja: es lo único de este bloque que pide algo. */
.cartola-saldo {
  padding: 8px 14px;
  font-size: 13.5px;
  color: var(--warn);
  background: var(--warn-bg);
}

/* Los pagos que no imputaron a ningún recibo, y los anulados. */
.cartola-aparte {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.cartola-aparte.apagado { opacity: 0.65; }

.cartola-aparte-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.cartola-aparte-cab .muted { font-size: 12.5px; }

.cartola-pago.suelto { padding: 8px 0; }
.cartola-acciones { display: flex; gap: 6px; flex-shrink: 0; }

@media (max-width: 640px) {
  .cartola-total, .cartola-monto { margin-left: 0; }
  .cartola-pagos { margin-left: 6px; padding-left: 10px; }
}

/* ============================================================== resumen */

/*
 * Las cinco cifras en una sola franja, no en cinco tarjetas.
 *
 * Se leen juntas —"mil clientes, novecientos sesenta activos, novecientos diez
 * conectados"— y cinco cajas con su borde y su sombra las presentan como cinco
 * cosas separadas, ocupando media pantalla para decir cinco números.
 */
.stats {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
  grid-template-columns: none;
}

.cifra {
  flex: 1 1 150px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 18px;
  text-decoration: none;
  color: inherit;
  /* El separador entre cifras: una línea, no el aire entre dos tarjetas. */
  border-left: 1px solid var(--line);
}
.cifra:first-child { border-left: 0; }

a.cifra:hover { background: var(--surface-2); }

.cifra-n { font-size: 22px; font-weight: 700; line-height: 1.1; }
.cifra-l { font-size: 12.5px; color: var(--text-muted); }

/* El color va en el número, no en la caja: la caja de color pinta una alarma
   del tamaño de una tarjeta cuando lo que alarma es una cifra. */
.cifra.ok     .cifra-n { color: var(--ok); }
.cifra.warn   .cifra-n { color: var(--warn); }
.cifra.danger .cifra-n { color: var(--danger); }

/* Los avisos, en una línea cada uno. */
.avisos { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }

.aviso {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  text-decoration: none;
  color: var(--text-primary);
  background: var(--warn-bg);
  border-left: 3px solid var(--warn);
}
.aviso.danger { background: var(--danger-bg); border-left-color: var(--danger); }
.aviso:hover { filter: brightness(0.97); }
.aviso-ir { margin-left: auto; color: var(--text-muted); }

/* En el teléfono, dos por fila. `flex: 0 0 50%` y no `flex-basis`: con
   `flex: 1 1 150px` puesto arriba, el ancho base de 150px mas el relleno pasa
   de la mitad de una pantalla de 390 y cada cifra se llevaba una fila entera —
   las cinco ocupaban 393px de alto, mas que las tarjetas que veniamos de
   quitar. */
@media (max-width: 720px) {
  .stats { display: grid; grid-template-columns: 1fr 1fr; }
  .cifra {
    flex: none;
    padding: 10px 14px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .cifra:nth-child(-n + 2) { border-top: 0; }
  .cifra:nth-child(odd) { border-right: 1px solid var(--line); }
  /* La quinta queda sola: ocupa las dos columnas en vez de dejar un hueco. */
  .cifra:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
  .cifra-n { font-size: 19px; }
}