/* Check GG — fichas del diseño «Luz» de Lead Intelligence GG (web/app/globales.css, 21-09-2026).
 * Única fuente de color y forma: ninguna regla de abajo declara un color propio.
 * Ver .claude/skills/como-se-ve-el-producto/SKILL.md. */
:root {
  --navy: #1b2a6b;
  --azul: #0057ff;
  --cian: #aeddf9;
  --tinta: #1a1d24;
  --tinta-suave: #5b6070;
  --linea: #dcd8cf;
  --linea-fina: #ebe7df;
  --alarma: #a3231f;
  --alarma-fondo: #fbeceb;
  --calma: #1f6b4a;
  --aviso: #b7791f;        /* de Connect GG: el estado entre calma y alarma */
  --neutro: var(--tinta-suave); /* nueva: «sin datos» no es bueno ni malo, es gris */
  --blanco: #ffffff;
  --titulares: 'Times New Roman', Times, serif;
  --texto: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --suelo: #f3f7fc;
  --sombra: 0 4px 14px rgba(27, 42, 107, 0.10), 0 0 0 1px rgba(27, 42, 107, 0.06);
  --radio: 12px;
  --radio-control: 8px;
  --capsula: 999px;
  --luz: radial-gradient(circle at 88% -40%, rgba(0, 87, 255, 0.65), rgba(174, 221, 249, 0.10) 50%, transparent 72%);
  --luz-foco: 0 0 0 3px rgba(0, 87, 255, 0.25);
  --luz-punto: 0 0 6px var(--azul);
  --filigrana: 0.06;
  --rapido: 160ms ease;
  --entrada: 320ms ease-out;
  --ancho: 68rem;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--suelo); color: var(--tinta); font-family: var(--texto); font-size: 15px; line-height: 1.5; }
h1, h2 { font-family: var(--titulares); font-weight: 400; margin: 0; }
a { color: var(--azul); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; box-shadow: var(--luz-foco); }

/* Barra */
.barra { background: var(--navy); display: flex; gap: 1.25rem; align-items: center; padding: 0.6rem max(1rem, calc((100% - var(--ancho)) / 2)); }
.barra a, .barra .enlace { color: var(--blanco); text-decoration: none; font-size: 0.9rem; }
.barra a:hover, .barra .enlace:hover { color: var(--cian); }
.barra form { margin-left: auto; }
.barra-logo { display: flex; }
/* Eléctrico sobre navy está prohibido (2,1 de contraste): en la barra el foco es cian. */
.barra a:focus-visible, .barra .enlace:focus-visible { outline-color: var(--cian); box-shadow: none; }
.enlace { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }

/* Banda con la luz y la filigrana */
.banda { position: relative; overflow: hidden; background: var(--navy); color: var(--blanco); padding: 2rem 1rem 2.25rem; }
.banda::before { content: ''; position: absolute; inset: 0; background: var(--luz); pointer-events: none; animation: entrar var(--entrada) both; }
.banda::after { content: ''; position: absolute; right: -2rem; top: -1rem; width: 14rem; height: 14rem; background: url('/marca/isotipo-blanco.png') no-repeat center / contain; opacity: var(--filigrana); pointer-events: none; }
.banda-dentro { position: relative; max-width: var(--ancho); margin: 0 auto; }
.banda h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.banda h1 em { font-style: italic; color: var(--cian); } /* la cursiva de acento, sobre navy en cian; una por pantalla */
.banda-logo { display: block; height: 2rem; width: auto; margin-bottom: 1rem; }
.miga { color: var(--cian); margin: 0 0 0.25rem; font-size: 0.85rem; letter-spacing: 0.02em; }
@keyframes entrar { from { opacity: 0; } to { opacity: 1; } }

/* Contenido */
.contenido { max-width: var(--ancho); margin: -1rem auto 3rem; padding: 0 1rem; position: relative; display: grid; gap: 1.25rem; }
.tarjeta { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.25rem 1.5rem; }
/* Atenuada sin opacity: al 60 % el gris suave cae por debajo de AA. Se apaga quitando la superficie. */
.tarjeta.atenuada { background: transparent; box-shadow: none; border: 1px dashed var(--linea); }
.tarjeta.atenuada h2 { color: var(--tinta-suave); }
.tarjeta.atenuada p { margin: 0; color: var(--tinta-suave); }
.tarjeta.atenuada p .etiqueta { margin: 0 0.4rem 0 0; }
.tarjeta-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.tarjeta h2 { color: var(--navy); font-size: 1.4rem; }
.tarjeta h2 a { color: inherit; text-decoration: none; }
.tarjeta h2 a:hover { text-decoration: underline; }

/* Estado: punto + palabra, nunca solo color */
.estado { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0.7rem; border-radius: var(--capsula); border: 1px solid var(--linea); font-size: 0.85rem; font-weight: 500; white-space: nowrap; }
.estado .punto { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: currentColor; }
.estado-ok { color: var(--calma); }
.estado-degradado { color: var(--tinta); border-color: var(--aviso); }
.estado-degradado .punto { background: var(--aviso); }
.estado-caido { color: var(--alarma); background: var(--alarma-fondo); border-color: var(--alarma); }
.estado-caido .punto { box-shadow: 0 0 0 3px var(--alarma-fondo), 0 0 0 4px var(--alarma); }
.estado-sin_datos { color: var(--neutro); }
.etiqueta, .etiqueta-alarma { display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.6rem; border-radius: var(--capsula); font-size: 0.8rem; border: 1px solid var(--linea); color: var(--tinta-suave); }
.etiqueta-alarma { color: var(--alarma); border-color: var(--alarma); background: var(--alarma-fondo); }

/* Tabla */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; font-variant: all-small-caps; letter-spacing: 0.04em; color: var(--tinta-suave); font-weight: 500; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--linea); }
.tabla td { padding: 0.55rem 0.5rem; border-bottom: 1px solid var(--linea-fina); vertical-align: top; }
.cifra { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.motivo { color: var(--tinta-suave); font-size: 0.9rem; overflow-wrap: anywhere; }

/* Detalle */
.disponibilidad { display: flex; gap: 2rem; margin: 0.75rem 0; }
.disponibilidad dt { color: var(--tinta-suave); font-size: 0.8rem; }
.disponibilidad dd { margin: 0; font-family: var(--titulares); font-size: 1.4rem; color: var(--navy); font-variant-numeric: tabular-nums; }
/* Tira: el estado no va solo en el color; la altura crece con la gravedad y «sin datos» va hueca.
 * Sin salto de línea: en 390 px las marcas se estrechan en vez de partir la tira. */
.tira { display: flex; gap: 2px; align-items: flex-end; height: 1.4rem; }
.tira .marca { flex: 0 1 6px; min-width: 2px; height: 0.6rem; border-radius: 2px; background: currentColor; }
.tira .marca.estado-degradado { background: var(--aviso); height: 1rem; }
.tira .marca.estado-caido { height: 1.4rem; }
.tira .marca.estado-sin_datos { background: transparent; border: 1px solid var(--neutro); }

/* Formulario */
.formulario { max-width: 24rem; display: grid; gap: 0.6rem; }
.campo { font: inherit; padding: 0.55rem 0.7rem; border: 1px solid var(--linea); border-radius: var(--radio-control); }
.campo:focus { border-color: var(--azul); outline: none; box-shadow: var(--luz-foco); }
.boton { font: inherit; background: var(--navy); color: var(--blanco); border: 0; border-radius: var(--radio-control); padding: 0.6rem 1rem; cursor: pointer; transition: background var(--rapido); }
.boton:hover { background: var(--azul); }
.error { color: var(--alarma); margin: 0; }

/* Móvil: la tabla pasa a filas apiladas */
@media (max-width: 640px) {
  .tabla thead { display: none; }
  .tabla tr { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 0.5rem; padding: 0.6rem 0; border-bottom: 1px solid var(--linea-fina); }
  .tabla td { border: 0; padding: 0; }
  .tabla td.motivo { grid-column: 1 / -1; }
  .cifra { text-align: left; }
  .disponibilidad { gap: 1.25rem; }
}

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