/* Estilos de las páginas del catálogo.
   Un archivo suelto, no el CSS de la landing: estas páginas no cargan React ni
   su bundle, y meterles 16 kB de estilos que no usan las haría más lentas por
   nada. Aquí lo que importa es que abran al instante. */

/*
 * Las tipografías de la casa, solo las caras que dan identidad.
 *
 * Tres archivos (~58 KB) y no las once caras de la landing: el titular y la
 * marca en Space Grotesk, las claves y rótulos en IBM Plex Mono. El cuerpo se
 * queda en la del sistema a propósito — es el 90 % del texto, la cara que menos
 * identidad aporta, y estas páginas viven de abrir al instante. Mismo dominio
 * que la landing: quien venga de ahí ya las trae en caché. `swap` para que el
 * texto aparezca de inmediato con la del sistema.
 */
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/*
 * Los tokens son los de la casa — los mismos valores que tokens.css de la app y
 * el index.css de la landing. Antes este archivo llevaba su propia variante de
 * cada color (verde #14472f contra el #16523a de todos lados, línea #d6cfbe
 * contra #cdc4ae, un ámbar propio en vez del marigold) y el catálogo se leía
 * como un producto vecino en vez del mismo. Los NOMBRES viejos se conservan
 * (--ambar sigue existiendo y ahora vale marigold) para que ninguna regla de
 * abajo quede apuntando a un token que ya no existe.
 */
:root {
  --papel: #efeae0;
  --superficie: #f7f4ec;
  --superficie-2: #e8e2d5;
  --tinta: #1c1b17;
  --tinta-suave: #55503f;
  --tinta-tenue: #8b8370;
  --linea: #cdc4ae;
  --verde: #16523a;
  --rojo: #a83a2e;
  --rojo-suave: #f0dedb;
  --ambar: #e08a2c;
  --ambar-suave: #f4e6d2;
  /* Para TEXTO chico sobre superficie clara: el marigold puro queda en ~2.4:1
     de contraste y no se lee. Las barras y bordes sí lo usan puro; las
     etiquetas usan este tono hundido. */
  --ambar-texto: #8a5411;
  --verde-suave: #d8e4dc;
  /* El tablero de la cinta: la landing abre y cierra con él, y ahora estas
     páginas también. */
  --tablero: #17140f;
  --tablero-linea: #3a3428;
  --tablero-texto: #e9e4d6;
  --tablero-suave: #b8b0a0;
  --radio: 4px;
  --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --cuerpo: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--verde); }

.mono { font-family: var(--mono); }
.mono.grande { font-size: 1.15rem; font-weight: 600; letter-spacing: 0.02em; }
.tenue { color: var(--tinta-tenue); font-size: 0.88rem; }

/* --- estructura --- */

/* La barra vive sobre el tablero, como la cinta de la landing: la página
   pública y el catálogo abren con el mismo oscuro y se leen como una sola
   casa. Sobre el tablero el verde desaparece, así que el acento de la marca
   es el marigold — la misma lección del cierre de la landing. */
.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-bottom: 1px solid var(--tablero-linea);
  background: var(--tablero);
}
.marca { font-family: var(--display); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; text-decoration: none; color: var(--tablero-texto); }
.marca span { color: var(--ambar); }
.barra nav { display: flex; gap: 18px; }
.barra nav a { text-decoration: none; font-size: 0.92rem; color: var(--tablero-suave); }
.barra nav a:hover { color: var(--tablero-texto); }

main { max-width: 760px; margin: 0 auto; padding: 28px 20px 56px; }
/* El índice necesita más ancho: cuatro columnas de datos. */
main:has(.tabla) { max-width: 1000px; }

h1 { font-family: var(--display); font-weight: 600; font-size: 1.9rem; line-height: 1.2; margin: 0 0 8px; letter-spacing: -0.015em; }
h2 { font-family: var(--display); font-weight: 600; font-size: 1.15rem; margin: 32px 0 10px; letter-spacing: -0.01em; }
.subtitulo { color: var(--tinta-suave); margin: 0 0 24px; }
.migas { font-size: 0.85rem; color: var(--tinta-tenue); margin: 0 0 18px; }

/* --- liquidez, el dato que importa --- */

.tarjeta-liquidez {
  border: 1.5px solid var(--linea);
  border-left-width: 5px;
  border-radius: var(--radio);
  padding: 16px 18px;
  background: var(--superficie);
  margin: 0 0 24px;
}
.tarjeta-liquidez p { margin: 8px 0 0; }
.tarjeta-liquidez .etiqueta {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.tarjeta-liquidez.alta { border-left-color: var(--verde); }
.tarjeta-liquidez.alta .etiqueta { color: var(--verde); }
.tarjeta-liquidez.media { border-left-color: var(--ambar); }
.tarjeta-liquidez.media .etiqueta { color: var(--ambar-texto); }
.tarjeta-liquidez.baja { border-left-color: var(--ambar); }
.tarjeta-liquidez.baja .etiqueta { color: var(--ambar-texto); }
.tarjeta-liquidez.nula { border-left-color: var(--rojo); background: var(--rojo-suave); }
.tarjeta-liquidez.nula .etiqueta { color: var(--rojo); }
.tarjeta-liquidez.sin { border-left-color: var(--tinta-tenue); }

.datos { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 8px; }
.dato {
  flex: 1 1 180px;
  border: 1.5px solid var(--linea);
  border-radius: var(--radio);
  padding: 12px 14px;
  background: var(--superficie);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dato .rotulo {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.dato .valor { font-size: 1.3rem; font-weight: 600; font-family: var(--mono); }
.dato .pie { font-size: 0.78rem; color: var(--tinta-tenue); }

/* --- tablas --- */

table { width: 100%; border-collapse: collapse; margin: 0 0 8px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--linea); }
th[scope="row"] { color: var(--tinta-suave); font-weight: 500; width: 42%; }

/* --- el listado ---
   Rejilla, no tabla. Una tabla impone anchos mínimos por celda y termina siendo
   más ancha que la pantalla; con rejilla se decide qué columna cede. Aquí cede
   el nombre, que es el dato menos importante y la causa del desbordamiento. */

.buscador { margin: 26px 0 14px; }
.buscador label {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 6px;
}
.buscador input {
  width: 100%;
  /* 16px exactos: por debajo de eso, Safari en iOS acerca la página al enfocar. */
  font-size: 16px;
  font-family: var(--cuerpo);
  min-height: 44px;
  padding: 10px 14px;
  border: 1.5px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--tinta);
}
.buscador input:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }
#conteo { margin: 6px 0 0; min-height: 1.2em; }

.tabla { border-top: 1.5px solid var(--tinta); }

.fila {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 96px 128px;
  gap: 14px;
  align-items: center;
  padding: 10px 4px;
  border-bottom: 1px solid var(--linea);
  text-decoration: none;
  color: inherit;
}
.fila[hidden] { display: none; }
a.fila:hover { background: var(--superficie-2); }
a.fila:focus-visible { outline: 2px solid var(--verde); outline-offset: -2px; }

.fila.encabezado {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  border-bottom-width: 1.5px;
  border-bottom-color: var(--tinta);
}

.f-clave { font-weight: 600; letter-spacing: 0.02em; }
a.fila .f-clave { color: var(--verde); }
/* El nombre cede: se corta en vez de ensanchar el renglón. */
.f-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-precio { text-align: right; font-size: 0.9rem; }

.f-op { display: flex; align-items: center; gap: 8px; }
/* Se llama .medidor y no .barra: el encabezado del sitio ya usa .barra, y sus
   reglas -relleno, borde, fondo- se aplicaban a cada barrita del listado. Se veían
   como cajas vacías en vez de llenarse. */
.f-op .medidor {
  flex: 1;
  height: 6px;
  background: var(--superficie-2);
  border-radius: 3px;
  overflow: hidden;
}
.f-op .medidor i { display: block; height: 100%; background: var(--tinta-tenue); }
.f-op.alta  .medidor i { background: var(--verde); }
.f-op.media .medidor i,
.f-op.baja  .medidor i { background: var(--ambar); }
.f-op.nula  .medidor i { background: var(--rojo); }

/* "Operó cero días" es el hallazgo de esta página, no la falta de un dato.
   Con la barra vacía se veía igual que un instrumento sin historial, que es lo
   contrario de lo que queremos decir. La pista se tiñe y aparece una línea
   plana: el registro de que no pasó nada, no la ausencia de registro. */
.f-op.nula .medidor {
  background: var(--rojo-suave);
  position: relative;
}
.f-op.nula .medidor::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1.5px;
  transform: translateY(-50%);
  background: var(--rojo);
  opacity: 0.55;
}
.f-op.nula .cuenta { color: var(--rojo); }
/* Sin historial: se queda apagado y sin línea, para que no se confunda con
   el caso de arriba. */
.f-op.sin .cuenta { color: var(--tinta-tenue); }
.f-op .cuenta { font-size: 0.72rem; color: var(--tinta-suave); white-space: nowrap; }
.encabezado .f-op { display: block; }

.sin-resultados { padding: 22px 4px; color: var(--tinta-suave); }

/* En pantalla angosta la rejilla se reacomoda en dos renglones. Sin scroll
   horizontal en ningún momento: la clave siempre visible. */
@media (max-width: 620px) {
  .fila {
    grid-template-columns: 1fr auto;
    grid-template-areas: "clave precio" "nombre nombre" "op op";
    gap: 4px 12px;
    padding: 12px 4px;
  }
  .f-clave  { grid-area: clave; }
  .f-precio { grid-area: precio; }
  .f-nombre { grid-area: nombre; font-size: 0.9rem; color: var(--tinta-suave); }
  .f-op     { grid-area: op; margin-top: 4px; }
  .fila.encabezado { display: none; }
}

/* --- la tira de sesiones, el elemento distintivo --- */

.tira {
  border: 1.5px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
  padding: 14px 16px;
  margin: 0 0 16px;
}
.tira-cabeza {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.tira-cabeza .rotulo {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.tira-cabeza .tenue { font-size: 0.72rem; }

.marcas { display: flex; gap: 3px; align-items: flex-end; }
.marcas i {
  flex: 1;
  min-width: 3px;
  border-radius: 1px;
}
/* Operó: barra alta y sólida. No operó: una línea baja, presente pero apagada.
   La diferencia es de altura además de color, para que se lea sin distinguir
   colores. */
.marcas i.op { height: 26px; background: var(--verde); }
.marcas i.no { height: 7px;  background: var(--linea); }

.tira-pie { margin: 10px 0 0; }

.resumen .alarma strong { color: var(--rojo); }

/* --- bloques --- */

.resumen { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.resumen div {
  flex: 1 1 160px;
  border: 1.5px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
}
.resumen strong { font-size: 1.5rem; font-family: var(--mono); }
.resumen span { font-size: 0.8rem; color: var(--tinta-suave); }

.aviso, .nota {
  border: 1.5px solid var(--linea);
  border-left: 5px solid var(--ambar);
  border-radius: var(--radio);
  background: var(--ambar-suave);
  padding: 14px 18px;
  margin: 22px 0;
}
.aviso p, .nota p { margin: 8px 0 0; }
.aviso p:first-child, .nota p:first-child { margin-top: 0; }
.nota h2 { margin: 0 0 6px; font-size: 1.05rem; }

.llamada {
  border: 1.5px solid var(--verde);
  border-radius: var(--radio);
  background: var(--verde-suave);
  padding: 18px;
  margin: 30px 0 20px;
}
.llamada p { margin: 0 0 8px; }
.boton {
  display: inline-block;
  margin-top: 6px;
  background: var(--verde);
  color: var(--superficie);
  text-decoration: none;
  font-weight: 600;
  padding: 11px 20px;
  min-height: 44px;
  border-radius: var(--radio);
}

.procedencia { font-size: 0.82rem; color: var(--tinta-tenue); margin-top: 26px; }

/* El pie también sobre el tablero: la página abre y cierra con él. A ancho
   completo — el contenido interior conserva su columna con el padding. */
footer {
  border-top: 1px solid var(--tablero-linea);
  background: var(--tablero);
  padding: 22px 20px 40px;
  max-width: none;
  margin: 0;
  font-size: 0.86rem;
  color: var(--tablero-suave);
}
footer p { margin: 0 0 8px; max-width: 720px; margin-inline: auto; }
footer a { color: var(--tablero-texto); }
footer .tenue { color: var(--tablero-suave); opacity: 0.8; }

@media (max-width: 520px) {
  h1 { font-size: 1.5rem; }
  main { padding: 20px 16px 44px; }
}

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

/* --- pie con enlaces --- */

.pie-enlaces {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  /* El pie ahora vive sobre el tablero: su separador también. */
  border-top: 1px solid var(--tablero-linea);
}
.pie-enlaces a { font-size: 0.9rem; }

.correo {
  font-family: var(--mono);
  font-size: 1.05rem;
  padding: 14px 16px;
  background: var(--superficie);
  border: 1.5px solid var(--linea);
  border-radius: var(--radio);
  word-break: break-all;
}

/* La selección de texto, con el ámbar de este producto en vez del azul del sistema.
   Tres líneas: estas páginas viven de abrir rápido y esto no pesa nada. */
::selection { background: var(--ambar-suave); color: var(--tinta); }
a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }