/* El panel entero, sin framework y sin nada de fuera. Lo único que hay al lado
   es `tipografias.css`, que declara la familia de la suite —IBM Plex, los
   mismos ficheros que sirve Umbral en casa del cliente— servida desde aquí: un
   distribuidor abre por la mañana el módulo de su cliente y este panel, y tiene
   que parecerle el mismo producto.

   ## Lo que decide cómo se ve esto

   Es una consola de trabajo, no una página que hay que vender. De ahí las tres
   decisiones que explican todo lo demás:

   · **El carril va oscuro siempre**, también en modo claro. No es un gusto: es
     lo que separa de un vistazo «dónde estoy» de «qué estoy mirando», y deja la
     franja de arriba entera para lo que hace esta pantalla en vez de gastarla
     en un menú.
   · **Densidad de tabla, no de folleto.** Aquí se leen filas: interlineado
     corto, cifras con ancho fijo para que una columna de números se compare en
     vertical, y nada de sombras — un borde dice lo mismo y no finge papel.
   · **Cinco colores de estado y ni uno más**, los que declara
     `panel/atencion.py`. Un módulo nuevo con un estado nuevo se pinta diciendo
     a cuál de las cinco pertenece, no añadiendo un color aquí. */

:root {
  color-scheme: light dark;

  --papel: #f4f6f8;
  --tarjeta: #ffffff;
  --hundido: #eef1f4;
  --raya: #dde2e8;
  --raya-fina: #e9edf1;

  --tinta: #151a21;
  --suave: #566173;
  --tenue: #8792a2;

  --acento: #17567f;
  --acento-fondo: #e7f0f7;

  --bien: #17734a;
  --bien-fondo: #e4f2ea;
  --aviso: #8a5900;
  --aviso-fondo: #fbf0da;
  --mal: #a5251c;
  --mal-fondo: #fbe9e7;

  /* El carril es oscuro en los dos modos, así que sus colores son suyos y no
     se derivan de los de arriba. */
  --carril: #121820;
  --carril-raya: #232d3a;
  --carril-tinta: #dbe2ea;
  --carril-suave: #8d9aab;
  --carril-activo: #1d2a38;
  --carril-acento: #63b3e8;

  --curva: .4rem;
  --ancho: 78rem;

  /* La monoespaciada se declara una vez y se pide por aquí. Estaba escrita
     cuatro veces con dos listas distintas, y eso es exactamente cómo un CIF y
     una referencia de enlace acaban en dos tipografías que no son la misma. */
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* **`screen and` no sobra, y es lo que hace que esto se imprima bien.** Sin
   ello, esta paleta también vale al imprimir, y entonces las tarjetas salen del
   color de una tarjeta en modo oscuro: casi negras. Se puede arreglar
   redefiniendo la paleta entera dentro de `@media print`, pero eso es una lista
   que hay que acordarse de ampliar cada vez que nace un color; acotarla a la
   pantalla no se olvida nunca. Es como lo tiene Umbral, y de ahí se copia.
   Hay una prueba que lo vigila. */
@media screen and (prefers-color-scheme: dark) {
  :root {
    --papel: #0d1117;
    --tarjeta: #151b23;
    --hundido: #1b222c;
    --raya: #262f3b;
    --raya-fina: #1f2630;

    --tinta: #e3e8ef;
    --suave: #97a2b2;
    --tenue: #6b7685;

    --acento: #6cb6e8;
    --acento-fondo: #14273a;

    --bien: #55c08a;
    --bien-fondo: #10291f;
    --aviso: #d9a53f;
    --aviso-fondo: #2b2113;
    --mal: #ef8375;
    --mal-fondo: #2d1815;

    --carril: #0a0e14;
    --carril-raya: #1c2430;
  }
}

* { box-sizing: border-box; }

/* El salto al contenido. No se esconde con `display:none` —eso lo saca también
   del recorrido del tabulador y deja de servir para lo único que sirve—: se
   aparta de la pantalla y vuelve cuando recibe el foco. */
.saltar {
  position: absolute; left: .5rem; top: -4rem; z-index: 10;
  background: var(--acento); color: #fff; padding: .45rem .9rem;
  border-radius: var(--curva); text-decoration: none; font-size: .9rem;
}
.saltar:focus { top: .5rem; }
main:focus { outline: none; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 15px/1.55 "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* ── El armazón: carril y lienzo ──────────────────────────────────────────
   Rejilla de dos columnas y no un flotante: el lienzo tiene que poder
   encogerse por debajo del ancho de su tabla más ancha, y para eso hace falta
   el `min-width: 0` de abajo. Sin él, una tabla de ocho columnas empuja la
   página entera y aparece una barra horizontal en el cuerpo. */
.armazon { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 100vh; }
.lienzo { min-width: 0; display: flex; flex-direction: column; }
/* La puerta y un error sin sesión usan la misma rejilla sin la primera columna,
   y no otra plantilla base que se quedaría vieja el día que ésta cambie. */
.armazon.sin-carril { grid-template-columns: minmax(0, 1fr); }
.sin-carril main { margin: 0 auto; }

.carril {
  background: var(--carril);
  color: var(--carril-tinta);
  border-right: 1px solid var(--carril-raya);
  position: sticky; top: 0; align-self: start;
  height: 100vh;
  display: flex; flex-direction: column;
  padding: 1rem .75rem;
  gap: .25rem;
}
.carril .marca {
  display: block; text-decoration: none; color: var(--carril-tinta);
  font-weight: 650; letter-spacing: -.01em; line-height: 1.2;
  padding: .35rem .6rem 1.1rem;
}
.carril .marca small {
  display: block; color: var(--carril-suave); font-weight: 400;
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; margin-top: .2rem;
}
/* La caja de buscar, dentro del carril y por tanto con sus colores: los de
   arriba son los del lienzo y aquí se verían como un parche blanco. */
.buscar-carril { display: flex; align-items: center; gap: .25rem; margin: 0 0 .9rem; }
.buscar-carril input {
  flex: 1; min-width: 0;
  background: var(--carril-activo); border: 1px solid var(--carril-raya);
  color: var(--carril-tinta); font-size: .85rem; padding: .35rem .5rem;
  border-radius: var(--curva);
}
.buscar-carril input::placeholder { color: var(--carril-suave); }
.buscar-carril button {
  background: none; border: none; padding: .3rem; cursor: pointer;
  color: var(--carril-suave); display: flex;
}
.buscar-carril button:hover { color: var(--carril-tinta); }
/* El foco, con el azul del carril y no con el del lienzo: aquel es oscuro sobre
   oscuro en modo claro, y entonces quien navega con el tabulador no ve dónde
   está — que es justo para lo que sirve el foco. */
.carril input:focus-visible, .carril button:focus-visible, .carril a:focus-visible {
  outline: 2px solid var(--carril-acento); outline-offset: 1px;
}

.carril nav { display: flex; flex-direction: column; gap: .1rem; }
.carril nav a {
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem .6rem; border-radius: var(--curva);
  color: var(--carril-suave); text-decoration: none; font-size: .92rem;
}
.carril nav a:hover { background: var(--carril-activo); color: var(--carril-tinta); }
.carril nav a[aria-current="page"] {
  background: var(--carril-activo); color: #fff; font-weight: 550;
  box-shadow: inset 2px 0 0 var(--carril-acento);
}
.carril nav a svg { flex: none; opacity: .75; }
.carril nav a[aria-current="page"] svg { opacity: 1; color: var(--carril-acento); }
/* El número que lleva al lado un apartado: cuántas cosas hay ahí esperando. */
.carril .cuantas {
  margin-left: auto; font-size: .75rem; font-variant-numeric: tabular-nums;
  background: var(--carril-activo); color: var(--carril-tinta);
  border-radius: 1rem; padding: 0 .4rem; min-width: 1.4rem; text-align: center;
}
.carril nav a[aria-current="page"] .cuantas { background: #000a; }
/* Las dos, y la segunda no sobra: el apartado encendido tiene más peso que
   `.cuantas.mal`, así que la chapa roja se volvía gris justo al entrar en esa
   pantalla. Una chapa que cambia de color según dónde estés no dice nada. */
.carril .cuantas.mal,
.carril nav a[aria-current="page"] .cuantas.mal { background: var(--mal); color: #fff; }

.abajo-del-carril {
  margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--carril-raya);
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  color: var(--carril-suave); font-size: .8rem;
}
.abajo-del-carril form { margin: 0; }
.abajo-del-carril .quien { color: var(--carril-tinta); }
.abajo-del-carril button {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--carril-suave); font: inherit; text-decoration: underline;
}
.abajo-del-carril button:hover { color: var(--carril-tinta); }
.version { font-variant-numeric: tabular-nums; }

/* En estrecho el carril deja de ser carril y pasa a ser una banda de arriba.
   Sin JavaScript no hay cajón desplegable, y tampoco hace falta: son cuatro
   apartados. */
@media (max-width: 62rem) {
  /* Dos filas declaradas, y la segunda se queda con lo que sobre. Sin esto, las
     dos filas son automáticas y el `align-content: stretch` que trae la rejilla
     de fábrica reparte entre ambas el alto que sobra hasta el `100vh` — así que
     en una pantalla alta con poco contenido la banda de arriba **se estiraba** y
     dejaba un hueco vacío antes del título. En el carril de al lado no pasaba
     porque allí tiene un alto fijo. */
  .armazon { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .carril {
    position: static; height: auto; flex-direction: row; flex-wrap: wrap;
    align-items: center; gap: .5rem 1rem; padding: .6rem .9rem;
    border-right: none; border-bottom: 1px solid var(--carril-raya);
    /* Como el lienzo, y por el mismo motivo. La anchura mínima de un elemento
       de una rejilla es su contenido, así que una banda que no cabe **ensancha
       la página entera**: en un móvil el resultado no era una banda apretada,
       era la sala de control con las tarjetas cortadas por la derecha. El
       fallo se veía lejos de donde estaba. */
    min-width: 0;
  }
  .carril .marca { padding: 0; }
  .carril .marca small { display: none; }
  /* La caja se queda en la primera línea, con el nombre a la izquierda y quién
     ha entrado a la derecha. Es lo más usado de esa banda y no puede caer
     debajo de todo. */
  .buscar-carril { margin: 0; flex: 1 1 11rem; }
  /* Los apartados bajan a una línea entera para ellos. Compartiéndola con el
     nombre y con quién ha entrado, lo último —«Salir»— se salía de la pantalla. */
  .carril nav { flex-direction: row; flex-wrap: wrap; flex-basis: 100%; }
  .abajo-del-carril { margin: 0; padding: 0; border: none; }
}

/* ── La cabecera de cada pantalla ─────────────────────────────────────────
   Se queda pegada arriba porque en una tabla larga el título es lo que dice
   qué se está mirando, y perderlo al bajar obliga a subir para acordarse. */
.cabecera {
  position: sticky; top: 0; z-index: 2;
  background: var(--papel);
  border-bottom: 1px solid var(--raya);
  padding: 1rem 1.5rem .9rem;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.cabecera h1 { font-size: 1.3rem; margin: 0; letter-spacing: -.01em; }
.cabecera .entradilla { color: var(--suave); font-size: .85rem; margin: .2rem 0 0; }
.cabecera .acciones-cabecera { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.cabecera form { margin: 0; }

.migas { font-size: .8rem; color: var(--tenue); margin: 0 0 .3rem; }
.migas a { color: var(--suave); text-decoration: none; }
.migas a:hover { text-decoration: underline; }

main { padding: 1.25rem 1.5rem 4rem; max-width: var(--ancho); width: 100%; }
@media (max-width: 40rem) {
  .cabecera { padding: .9rem 1rem .8rem; }
  main { padding: 1rem 1rem 3rem; }
}

/* ── Textos ───────────────────────────────────────────────────────────── */
h2 { font-size: 1rem; margin: 0; letter-spacing: -.005em; }
h3 { font-size: .9rem; margin: 1.5rem 0 .4rem; }
a { color: var(--acento); }
p { margin: .5rem 0; }
code, .monoespacio, .mono {
  font-family: var(--mono);
  font-size: .85em;
}
.monoespacio { word-break: break-all; }
.letra-chica { color: var(--suave); font-size: .82rem; }
.ayuda { display: block; color: var(--suave); font-size: .8rem; margin-top: .2rem; }
.slug {
  font-family: var(--mono);
  font-size: .78em; color: var(--tenue);
}
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
strong { font-weight: 600; }

/* ── La nota de arriba: lo que acaba de pasar ─────────────────────────────
   Se llama «nota» y no «aviso» a propósito: «aviso» es una de las cinco
   gravedades, y que la misma palabra fuera un color y un componente hacía que
   `class="aviso mal"` significara dos cosas a la vez. */
.nota {
  padding: .65rem .85rem; border-radius: var(--curva); margin: 0 0 1rem;
  border: 1px solid var(--raya); border-left: 3px solid var(--bien);
  background: var(--tarjeta); font-size: .9rem;
}
.nota.mal { border-left-color: var(--mal); background: var(--mal-fondo); }
.nota .ayuda { display: inline; margin-left: .4rem; }

/* ── Bloques ──────────────────────────────────────────────────────────── */
.bloque {
  background: var(--tarjeta); border: 1px solid var(--raya);
  border-radius: var(--curva); margin: 0 0 1.25rem;
}
.bloque > header {
  padding: .75rem 1rem; border-bottom: 1px solid var(--raya-fina);
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
}
.bloque > header .letra-chica { margin: 0; }
.bloque > .dentro { padding: 1rem; }
.bloque > .dentro > :first-child { margin-top: 0; }
.bloque > .dentro > :last-child { margin-bottom: 0; }
.bloque > .tabla-ancha > table { margin: 0; }
/* Un bloque que lleva dentro lo que hay que atender de alguien. La raya de la
   izquierda dice de qué color es lo peor que hay ahí dentro **sin repetir
   ninguna palabra**: lo que dice la raya ya está escrito línea por línea
   debajo, así que quien no distinga el color no se pierde nada. */
.bloque.urgente-mal { border-left: 3px solid var(--mal); }
.bloque.urgente-aviso { border-left: 3px solid var(--aviso); }
.bloque.urgente-bien { border-left: 3px solid var(--bien); }
.bloque.urgente-neutro, .bloque.urgente-apagado { border-left: 3px solid var(--tenue); }

/* Lo que se pliega: un formulario largo que se usa de vez en cuando y que
   abierto empuja hacia abajo lo que se mira todos los días. Es un `details` del
   navegador, así que se abre con el JavaScript apagado. */
.plegable { border-top: 1px solid var(--raya-fina); }
.plegable > summary {
  cursor: pointer; padding: .6rem 1rem;
  font-size: .87rem; color: var(--acento);
}
.plegable > summary:hover { background: var(--hundido); }
.plegable[open] > summary { border-bottom: 1px solid var(--raya-fina); font-weight: 550; }
.bloque .explica {
  padding: .6rem 1rem; border-bottom: 1px solid var(--raya-fina);
  color: var(--suave); font-size: .82rem; background: var(--hundido);
}
.bloque .explica p { margin: 0; }

/* ── Las cifras de la sala de control ─────────────────────────────────── */
.cifras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .75rem; margin: 0 0 1.25rem;
}
.cifra {
  background: var(--tarjeta); border: 1px solid var(--raya);
  border-radius: var(--curva); padding: .85rem 1rem;
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
}
a.cifra:hover { border-color: var(--acento); }
/* Los tres trozos van uno debajo de otro. Son `span` y no `div` porque la
   tarjeta entera es a veces un enlace, y un `div` dentro de un `<a>` es HTML
   que el navegador arregla por su cuenta de una manera distinta cada vez. */
.cifra > span { display: block; }
.cifra .cuanto {
  font-size: 1.75rem; font-weight: 600; line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
/* Cuando lo que va arriba es una palabra y no un número —«Normal», «hace 4 min»—
   no puede ir al tamaño de una cifra: ocuparía tres líneas en una tarjeta. */
.cifra .cuanto.palabra { font-size: 1.05rem; font-weight: 600; letter-spacing: 0; }
.cifra .de-que {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tenue); margin-top: .15rem;
}
/* El pie se pega abajo. Los rótulos no miden lo mismo —«Clientes» ocupa una
   línea e «Incidencias por contestar» dos—, y sin esto la frase de abajo salía
   a una altura distinta en cada tarjeta de la misma fila: cinco renglones
   desalineados que se leen como cinco cosas sin relación. */
.cifra .pie { font-size: .8rem; color: var(--suave); margin-top: auto; padding-top: .35rem; }
.cifra.mal .cuanto { color: var(--mal); }
.cifra.aviso .cuanto { color: var(--aviso); }
.cifra.bien .cuanto { color: var(--bien); }

/* ── La cola de lo que hay que atender ────────────────────────────────── */
.cola { list-style: none; margin: 0; padding: 0; }
.cola > li {
  display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
  padding: .7rem 1rem; border-bottom: 1px solid var(--raya-fina);
}
.cola > li:last-child { border-bottom: none; }
.cola > li:hover { background: var(--hundido); }
.cola .punto {
  flex: none; width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--tenue); align-self: center;
}
.cola .mal .punto { background: var(--mal); }
.cola .aviso .punto { background: var(--aviso); }
.cola .bien .punto { background: var(--bien); }
.cola .que { font-weight: 550; }
.cola .quien { color: var(--tinta); }
.cola .quien a { text-decoration: none; }
.cola .quien a:hover { text-decoration: underline; }
.cola .detalle { color: var(--suave); font-size: .85rem; }
.cola .hacer { margin-left: auto; white-space: nowrap; }

/* ── El estado de algo: un punto y una palabra ────────────────────────────
   Un punto de color **y además la palabra**, siempre: el color solo no lo lee
   quien no distingue el rojo del verde, y esta pantalla la mira gente distinta
   de la que la escribe. */
.estado {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .8rem; white-space: nowrap;
}
.estado::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: currentColor; flex: none;
}
.estado.bien { color: var(--bien); }
.estado.aviso { color: var(--aviso); }
.estado.mal { color: var(--mal); }
.estado.neutro { color: var(--tenue); }
.estado.apagado { color: var(--tenue); text-decoration: line-through; }

/* La misma escala, en pastilla, cuando van varias juntas en una celda. */
.pastilla {
  display: inline-block; padding: .08rem .45rem; margin: 0 .2rem .2rem 0;
  border-radius: 1rem; font-size: .78rem;
  border: 1px solid var(--raya); color: var(--suave); background: var(--tarjeta);
}
.pastilla.bien { color: var(--bien); border-color: var(--bien); background: var(--bien-fondo); }
.pastilla.aviso { color: var(--aviso); border-color: var(--aviso); background: var(--aviso-fondo); }
.pastilla.mal { color: var(--mal); border-color: var(--mal); background: var(--mal-fondo); }
.pastilla.apagado { text-decoration: line-through; color: var(--tenue); }

/* ── Pestañas de filtro ───────────────────────────────────────────────────
   Enlaces corrientes, no un desplegable: cada filtro es una dirección que se
   puede guardar en favoritos y mandar por un correo, y con el JavaScript
   apagado funcionan igual. */
.pestanas { display: flex; gap: .3rem; flex-wrap: wrap; margin: 0 0 1rem; }
.pestana {
  padding: .3rem .7rem; border-radius: 1rem; text-decoration: none;
  font-size: .85rem; color: var(--suave); border: 1px solid transparent;
}
.pestana:hover { background: var(--hundido); }
.pestana.puesta {
  background: var(--acento-fondo); color: var(--acento);
  border-color: var(--acento); font-weight: 550;
}
/* Cuántas hay detrás de cada pestaña. Se cuenta sobre la lista entera y no
   sobre la filtrada, así que una pestaña que dice «0» está diciendo la verdad
   y no que esté puesto el otro filtro. */
.pestana .cuenta {
  font-size: .78rem; color: var(--tenue);
  border-left: 1px solid var(--raya); padding-left: .45rem; margin-left: .15rem;
}
.pestana.puesta .cuenta { color: inherit; border-left-color: currentColor; opacity: .7; }

/* ── El hilo de una incidencia ────────────────────────────────────────────
   Lo suyo y lo nuestro se distinguen por el borde de la izquierda y por quién
   firma, no por el lado de la pantalla: no es una conversación de móvil, es un
   expediente, y se lee de arriba abajo. */
.hilo { list-style: none; margin: 0; padding: 0; }
.hilo > li {
  padding: .9rem 1rem; border-bottom: 1px solid var(--raya-fina);
  border-left: 3px solid transparent;
}
.hilo > li:last-child { border-bottom: none; }
.hilo > li.del-cliente { border-left-color: var(--raya); }
.hilo > li.nuestro { border-left-color: var(--acento); background: var(--hundido); }
.hilo .quien-y-cuando {
  display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; margin: 0 0 .35rem;
}
.hilo .dicho { margin: 0; white-space: pre-wrap; }

.adjunto { margin-top: .6rem; border: 1px solid var(--raya); border-radius: var(--curva); }
.adjunto > summary {
  cursor: pointer; padding: .4rem .6rem; display: flex; gap: .6rem;
  align-items: baseline; flex-wrap: wrap; font-size: .85rem;
}
.adjunto > summary:hover { background: var(--hundido); }
/* Un `summary` con `display:flex` pierde el triangulito del navegador, y sin él
   nadie sabe que eso se abre. La palabra la pone el estilo y no la plantilla
   porque cambia sola al abrirlo, y eso aquí se hace sin una línea de guion. */
.adjunto > summary .ver { margin-left: auto; color: var(--acento); }
.adjunto > summary .ver::before { content: "ver el registro"; }
.adjunto[open] > summary .ver::before { content: "ocultar"; }
.adjunto > p { margin: 0; padding: .6rem; border-top: 1px solid var(--raya-fina); }
.adjunto pre {
  margin: 0; padding: .7rem; border-top: 1px solid var(--raya-fina);
  background: var(--papel); overflow-x: auto; max-height: 26rem;
  font-family: var(--mono); font-size: .78rem; line-height: 1.45;
}

/* ── Tablas ───────────────────────────────────────────────────────────── */
.tabla-ancha { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; font-size: .9rem; }
th, td { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--raya-fina); vertical-align: top; }
thead th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tenue); font-weight: 600; white-space: nowrap;
  border-bottom: 1px solid var(--raya); background: var(--tarjeta);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--hundido); }
tr.de-baja td { opacity: .5; }
td.cif, td.numero, .cif { font-family: var(--mono); font-size: .85em; }
td.numero, .cuenta { font-variant-numeric: tabular-nums; }

/* El renglón de debajo de una celda: lo que identifica una fila pero no se
   lee todos los días —un CIF, un identificador— y lo que matiza lo de arriba.
   En una columna propia gastaba el ancho de la tabla; aquí no estorba y sigue
   estando, que es lo que se le pide a un dato de referencia. */
.debajo { display: block; margin-top: .15rem; color: var(--tenue); font-size: .78rem; }
.debajo .slug, .debajo .cif { font-size: 1em; }
td .nombre { font-weight: 550; }
td.mal { color: var(--mal); }
.limites { font-size: .8rem; }
.limite { display: inline-block; margin-right: .6rem; color: var(--suave); white-space: nowrap; }
.acciones-fila { display: flex; gap: .75rem; align-items: baseline; white-space: nowrap; }
.acciones-fila form { margin: 0; }

/* ── Un paso de algo que se hace en dos sitios ────────────────────────────
   La emisión de una licencia pasa por dos máquinas: entre el paso uno y el dos
   hay una persona levantándose. Numerarlos así no es adorno — una pantalla que
   lo pinta todo seguido no dice que en medio hay que ir a otro sitio. */
.paso > header h2 { display: flex; align-items: center; gap: .55rem; }
.paso .numero {
  flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--acento-fondo); color: var(--acento);
  border: 1px solid var(--acento);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .85rem; font-variant-numeric: tabular-nums;
}
/* Una orden de consola no es un campo de texto de página entera: se selecciona
   para copiarla y se lee de un vistazo, y de doce centímetros no se lee. */
.campo.orden input { max-width: 30rem; }

/* Una tabla de dos columnas: el nombre de un campo y lo que vale. */
table.carga { max-width: 48rem; }
table.carga th[scope="row"] {
  width: 11rem; text-transform: none; letter-spacing: 0; font-size: .85rem;
  color: var(--suave); font-weight: 500; background: none; border-bottom: 1px solid var(--raya-fina);
}

/* ── Lo que cuenta de sí misma una instalación ────────────────────────────
   A dos columnas porque un informe de Umbral son ochenta hechos, y en una sola
   son dos pantallas de bajar para buscar uno. `break-inside: avoid` en cada
   pareja: sin eso, el nombre se queda al final de una columna y su valor
   aparece arriba en la otra, que es peor que no partirlo. */
.hechos { margin: 0; padding: 1rem; columns: 2; column-gap: 2.5rem; }
.hechos > div {
  break-inside: avoid; display: flex; gap: .75rem; align-items: baseline;
  padding: .3rem 0; border-bottom: 1px solid var(--raya-fina);
}
.hechos dt {
  flex: 0 0 11rem; color: var(--suave); font-size: .85rem; overflow-wrap: anywhere;
}
.hechos dd {
  margin: 0; min-width: 0; font-family: var(--mono); font-size: .8rem;
  overflow-wrap: anywhere;
}
@media (max-width: 62rem) { .hechos { columns: 1; } }

.vacio {
  color: var(--suave); padding: 1.5rem 1rem; text-align: center; font-size: .9rem;
  background: var(--hundido); border-radius: var(--curva); margin: 0;
}

/* ── Formularios ──────────────────────────────────────────────────────── */
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.campo { margin: 0; display: flex; flex-direction: column; }
.campo.ancho { grid-column: 1 / -1; }
/* Un botón dentro de un campo no se estira a toda la columna: es un botón, no
   un campo de texto, y uno de doce centímetros de ancho no parece pulsable. */
.campo > button, .campo > .boton { align-self: flex-start; }
label { font-size: .82rem; font-weight: 600; margin-bottom: .25rem; }
input, textarea, select {
  font: inherit; padding: .4rem .55rem;
  border: 1px solid var(--raya); border-radius: .3rem;
  background: var(--tarjeta); color: var(--tinta);
  max-width: 100%;
}
input:focus-visible, textarea:focus-visible, select:focus-visible,
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--acento); outline-offset: 1px;
}
textarea { resize: vertical; }
.casilla { display: flex; align-items: center; gap: .4rem; font-weight: 400; margin-bottom: .2rem; }
.casilla input { width: auto; }
.opciones { display: flex; flex-direction: column; }
.acciones { display: flex; align-items: center; gap: 1rem; margin: 1.25rem 0 0; }

button, .boton {
  font: inherit; font-size: .9rem; padding: .4rem .9rem; border-radius: .3rem;
  cursor: pointer; text-decoration: none; display: inline-block;
  border: 1px solid var(--acento); background: var(--acento); color: #fff;
}
@media screen and (prefers-color-scheme: dark) {
  button, .boton { color: #0d1117; }
}
button.calmo, .boton.calmo { background: var(--tarjeta); color: var(--acento); }
button.plano, .boton.plano {
  background: none; border: none; color: var(--acento); padding: 0;
  text-decoration: underline; font-size: inherit;
}
button.peligro, .boton.peligro { background: var(--tarjeta); color: var(--mal); border-color: var(--mal); }
.boton.pequeno, button.pequeno { padding: .2rem .55rem; font-size: .82rem; }

.buscador { display: flex; gap: .5rem; align-items: center; margin: 0 0 1rem; flex-wrap: wrap; }
.buscador input { flex: 1; min-width: 14rem; }
.anadir { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; color: var(--suave); font-size: .85rem; }

/* ── La puerta ────────────────────────────────────────────────────────────
   Es la primera pantalla del producto, la única que ve alguien que todavía no
   ha entrado — y **no es solo nuestra**: es la misma pantalla que abren los
   otros tres módulos de la suite. Ahí se decide, sin que nadie lo piense, si lo
   que se ha comprado es una suite o cuatro programas sueltos.

   Por eso esto no se dibuja aquí a ojo: se copia de un contrato escrito, la
   «Carta de identidad de la suite» (§3), que dice qué comparten los cuatro:

     se comparte     la composición en dos columnas CENTRADAS con aire a los
                     lados —no dos mitades a sangre— · la tarjeta con esquina
                     redonda y una sombra suave que la despega del fondo · el
                     bloque de firma, titular CON REMATES, entradilla y tres
                     puntos con su icono
     no se comparte  el acento, que es uno por módulo y es el distintivo
                     —Umbral teal, Documental terracota, Financiero índigo, y
                     aquí el azul que el panel ya tenía— y el texto, porque cada
                     módulo promete lo suyo y tiene que poder decirlo

   Y el paño oscuro no estrena ningún color: sale del carril. Al entrar, esa
   misma franja se queda a la izquierda, así que entrar y estar dentro se ven
   como la misma aplicación y no como dos. */

/* La puerta ocupa la pantalla entera: ni el relleno del lienzo ni el pie de la
   fecha pintan nada delante de alguien que todavía no ha entrado. */
.armazon.en-la-puerta main { max-width: none; padding: 0; }
.armazon.en-la-puerta footer { display: none; }

.puerta {
  max-width: 70rem;          /* 1120 px: el ancho que fija la carta */
  margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1.02fr 1fr;
  min-height: 100vh;
}

.puerta-discurso {
  background: linear-gradient(160deg, var(--carril) 0%, var(--carril-activo) 55%, var(--acento) 145%);
  color: #fff;
  padding: 3rem clamp(1.75rem, 6vw, 4.75rem);
  display: flex; flex-direction: column; justify-content: center; gap: 1.5rem;
  /* Una línea de pelo blanca al 7 %. En claro no se ve —es blanca contra un
     fondo casi blanco— y en oscuro es lo que despega el paño del fondo, que si
     no quedan dos negros distintos pegados y parece sin terminar. Una sola
     regla en vez de una por tema. */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07);
}
.puerta-firma { font-size: .92rem; font-weight: 600; letter-spacing: .05em; }
/* Con remates, y es el ÚNICO sitio del panel donde los hay. Los otros tres
   módulos titulan así su pantalla de entrada, y ésa es la nota que se reconoce
   de una a otra. La cara es IBM Plex Serif: la hermana de la Sans que ya
   servimos, así que no entra ninguna dependencia nueva ni ninguna llamada a
   nadie. Las de reserva son de sistema: si el fichero no llegara, esto sigue
   teniendo remates. */
.puerta-lema {
  margin: 0;
  font-family: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  font-size: clamp(1.6rem, 3.1vw, 2.2rem); font-weight: 600;
  letter-spacing: -.01em; line-height: 1.15; max-width: 17ch;
}
.puerta-entradilla {
  margin: 0; font-size: .88rem; line-height: 1.6; max-width: 44ch;
  color: rgba(255, 255, 255, .74);
}
.puerta-puntos { margin: 0; padding: 0; list-style: none; display: grid; gap: .85rem; }
.puerta-puntos li {
  display: flex; align-items: flex-start; gap: .7rem;
  font-size: .82rem; line-height: 1.5; color: rgba(255, 255, 255, .86);
}
.puerta-puntos svg { flex: none; margin-top: .15rem; opacity: .9; }

.puerta-panel { display: grid; place-items: center; padding: 2.5rem 1.5rem; }
.puerta-caja { width: 100%; max-width: 25rem; }
/* El nombre va con el mismo tratamiento que en el carril —AICUBE365 arriba y
   qué es esto debajo, en versales—: es lo que hay al otro lado de la puerta. */
.puerta-marca { font-size: 1.3rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.2; margin-bottom: 1.3rem; }
.puerta-marca small {
  display: block; color: var(--tenue); font-weight: 400;
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; margin-top: .25rem;
}
/* La tarjeta se levanta un poco del fondo: esquina más redonda y una sombra
   suave, que es lo que hacen las de los otros tres. SOLO aquí — dentro del
   panel, una tabla con sombra es ruido. */
.puerta .bloque {
  margin: 0; border-radius: .75rem;
  box-shadow: 0 10px 26px -12px rgba(16, 24, 32, .22),
              0 2px 6px -3px rgba(16, 24, 32, .10);
}
.puerta .nota { margin: 0 0 1rem; }
.puerta form { display: flex; flex-direction: column; gap: .75rem; }
.puerta form button { margin-top: .35rem; width: 100%; }
.puerta-pie {
  margin: 1.25rem 0 0; color: var(--suave); font-size: .78rem; line-height: 1.55;
}

/* Por debajo de 62rem el paño del discurso se va: en un móvil lo que hace falta
   es el formulario, no el discurso. Y la marca no se pierde, porque el paño del
   formulario lleva la suya arriba. */
@media (max-width: 62rem) {
  .puerta { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .puerta-discurso { display: none; }
  .puerta-panel { padding: 2rem 1rem 3rem; }
}

footer {
  margin-top: auto; padding: 1rem 1.5rem;
  color: var(--tenue); font-size: .78rem;
  border-top: 1px solid var(--raya);
}

/* ── En papel ─────────────────────────────────────────────────────────────
   Una ficha se imprime para llevarla a una reunión. El carril, los botones y
   la cabecera pegajosa no pintan nada en un folio. */
@media print {
  /* La paleta no se repite aquí: la oscura está acotada a `screen`, así que al
     imprimir lo que queda es la clara. Solo se oscurecen las rayas, que en
     pantalla son un gris suave y en papel no se ven. */
  :root { --raya: #999; --raya-fina: #ccc; --suave: #333; --tenue: #555; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .armazon { display: block; }
  .cabecera { position: static; }
  .bloque { break-inside: avoid; }

  /* Nada en lo que se pueda pulsar. En un folio, un botón es una mancha que
     además promete algo que ahí no pasa. */
  .carril, .saltar, .acciones-cabecera, .acciones, .acciones-fila,
  .pestanas, .buscador, .anadir, .plegable, .cola .hacer,
  button, .boton { display: none; }

  /* El pie SÍ se imprime: es lo único que fecha el papel. Un folio con la
     ficha de un cliente y sin fecha no se sabe de cuándo es. */
  footer { display: block; border-top: 1px solid var(--raya-fina); color: #333; }
}