/* coe-factoring-hermes — estados.css
 *
 * Pantallas de sesion, banners y los semaforos de aprobacion.
 */

/* ====================== SEMAFOROS DE APROBACION ======================
 *
 * El servidor devuelve `NO_EVALUADO` en los dos, porque la formula de
 * aprobacion es un bloqueante de negocio todavia abierto.
 *
 * El mockup los pintaba como dos pastillas VERDES con un tilde y la palabra
 * APROBADO, estaticas, siempre. El requisito explicito es que nadie pueda
 * confundir "no evaluado" con "aprobado": una cotizacion con un tilde verde
 * que nadie calculo se lleva a la negociacion con el cliente.
 *
 * De ahi que el neutro sea gris, sin tilde, con el texto SIN EVALUAR y un
 * signo de interrogacion. No comparte ningun token con `--approved-*`.
 */
.estado-pill[data-estado-valor="NO_EVALUADO"] {
  background: var(--pendiente-bg);
  color: var(--pendiente-text);
  border-color: var(--pendiente-border);
}
.estado-pill[data-estado-valor="APROBADO"] {
  background: var(--approved-bg);
  color: var(--approved-text);
}
/* `NO CUMPLE`, con espacio y sin tilde, es exactamente lo que devuelve el
 * Sheet y lo que emite `aprobacion.Estado`. Este selector decia `RECHAZADO`,
 * que la formula NUNCA escribe —lo dice el docstring del propio enum—, asi que
 * el unico estado negativo que el motor produce salia SIN estilo: texto suelto,
 * el elemento menos visible del panel, para la unica lectura que el ejecutivo
 * no se puede perder.
 *
 * No se noto en dos dias porque los semaforos no llegaban a evaluar (entrada 8
 * de guia-errores-hermes.md), asi que este estado no habia aparecido nunca. */
.estado-pill[data-estado-valor="NO CUMPLE"] {
  background: var(--error-bg);
  color: var(--error-text);
  border-color: var(--error-border);
}

/* El por que de un SIN EVALUAR, debajo de su fila.
 *
 * Deliberadamente discreto: es una explicacion, no una alarma. Un fondo de
 * aviso lo pondria al nivel de un error del cotizador, y no lo es — el
 * NO_EVALUADO ya lo dice la pildora. */
.motivo-semaforo {
  font-size: var(--fs-xs);
  color: var(--text-mute);
  line-height: 1.5;
  margin: -2px 0 8px 0;
  padding: 0 18px;
}

/* ============================== BANNERS ============================== */

.banner {
  border-radius: 8px;
  padding: 12px 16px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  border: 1px solid transparent;
}
.banner + .banner { margin-top: 8px; }
.banner-error {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error-text);
}
.banner-aviso {
  background: var(--aviso-bg);
  border-color: var(--aviso-border);
  color: var(--aviso-text);
}
.banner b { display: block; margin-bottom: 2px; }
.banner ul { margin: 6px 0 0 0; padding-left: 18px; }
.banner code {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: var(--fs-xs);
  background: rgba(255, 255, 255, 0.6);
  padding: 1px 5px;
  border-radius: 4px;
}

.avisos:empty { display: none; }
.avisos { margin-bottom: 14px; }

/* ========================= PANTALLAS DE SESION =========================
 *
 * Reemplazan la app entera. Son terminales por diseno: el usuario no puede
 * cotizar en ninguno de estos estados, y ofrecerle la pantalla a medias
 * invitaria a intentarlo.
 */
.pantalla {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* `--page-bg` tal cual, con un realce de blanco translucido arriba para que
   * la tarjeta flote en vez de quedar pegada a un plano liso. No entra ningun
   * color nuevo a la paleta: es `--card-bg` con alfa sobre `--page-bg`. */
  background:
    radial-gradient(1000px 560px at 50% -8%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 70%),
    var(--page-bg);
}
.pantalla-caja {
  position: relative;
  overflow: hidden;
  background: var(--card-bg);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-alta);
  padding: 34px 34px 28px 34px;
  max-width: 520px;
  width: 100%;
}
/* Filete de marca, con los mismos verdes del sidebar. Es lo unico que hace que
 * la tarjeta se lea como parte de Hermes y no como un modal generico, y por eso
 * lo llevan las cinco pantallas: tres de ellas aparecen cuando el usuario
 * todavia no vio nada de la app.
 *
 * Va como `::before` y no como un `<div>` porque es decoracion pura: un nodo
 * mas en el DOM seria un nodo mas que recorre un lector de pantalla. */
.pantalla-caja::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green) 0%, var(--sidebar-green) 52%, var(--accent-dot) 100%);
}

/* ---- la variante compacta: login y pantallas de transito ----
 *
 * Tres lineas de texto y un boton no necesitan 520px: a esa medida el ojo
 * vuelve del final de una linea al principio de la siguiente sin nada que lo
 * guie, y la tarjeta se lee vacia. 440px con todo sobre un eje centrado.
 *
 * Las de diagnostico se quedan en 520px A PROPOSITO: llevan parrafos largos,
 * dos botones en fila —uno dice "Cerrar sesion y volver a entrar"— y un `<pre>`
 * con el JSON del error. Ahi 440px no es mas prolijo, es mas apretado. */
.pantalla-caja.compacta {
  max-width: 440px;
  padding: 40px 40px 32px 40px;
  text-align: center;
}
.pantalla-caja.compacta .pantalla-logo { margin: 4px auto 16px auto; }
.pantalla-caja.compacta .pantalla-marca { font-size: var(--fs-xxl); margin-bottom: 6px; line-height: 1.2; }
.pantalla-caja.compacta .pantalla-marca span {
  margin-top: 7px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}
/* Medida de linea corta y centrada. Sin el `max-width` el parrafo ocupa los
 * 360px utiles y una sola linea larga desequilibra la tarjeta centrada.
 *
 * El `:not()` NO es cosmetico: `.pantalla-rotulo` tambien es un `<p>`, y este
 * selector (0,3,0) le gana al suyo (0,1,0) — le comia el margen de 14px contra
 * el titular y le metia un `max-width` que no le corresponde. */
.pantalla-caja.compacta p:not(.pantalla-rotulo) { max-width: 300px; margin: 10px auto 0 auto; }
.pantalla-caja.compacta .pantalla-acciones { margin-top: 24px; }
/* El archivo es un icono de app de 512x512 con las esquinas redondeadas y la
 * transparencia ya horneadas, asi que no lleva `border-radius` ni fondo: se
 * apoya solo sobre el blanco de la tarjeta.
 *
 * `width`/`height` van tambien como atributos en el HTML para que el navegador
 * reserve el espacio antes de descargarlo. Sin eso la tarjeta salta 56px
 * cuando la imagen llega — y es la primera pantalla que ve el usuario, con la
 * imagen mas pesada del sitio (113 KB). */
.pantalla-logo {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 12px auto;
}

.pantalla-marca {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--green);
  letter-spacing: .01em;
  margin: 0 0 4px 0;
}
.pantalla-marca span {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-mute);
  letter-spacing: 0;
}

/* ---- pantallas de transito: `redirigiendo()` y `cargando()` ----
 *
 * Aca la marca NO es la marca: es un rotulo. Lo que el usuario necesita leer
 * es que esta pasando, y hasta ahora la jerarquia decia lo contrario —
 * "Portal Comercial" en `--fs-xl` verde le ganaba a "Redirigiendo a Google…"
 * en `--fs-lg` gris oscuro. El estado pasa a titular y la marca baja a rotulo.
 *
 * Sin el subtitulo "Cotizador de Factoring": en una pantalla que dura dos
 * segundos, nombrar el producto dos veces es ruido. */
.pantalla-rotulo {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-mute);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 14px 0;
}
/* El titular de transito: mismo cuerpo que la marca del login, porque ocupa su
 * lugar en la jerarquia. El `margin` se reinicia porque el de `.pantalla h1`
 * esta pensado para un `<h1>` que sigue a un parrafo, no a un rotulo. */
.pantalla-caja.compacta .pantalla-estado h1 {
  font-size: var(--fs-xl);
  margin: 0;
}

/* ---- el spinner ----
 *
 * Un anillo que gira ALREDEDOR del logo, no un elemento nuevo debajo. El logo
 * ya ocupa ese lugar en las cinco pantallas, asi que la espera mueve lo que
 * ya estaba en vez de agregar un objeto que aparece y desaparece. */
.pantalla-marca-carga {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 4px auto 18px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Le gana en especificidad a `.pantalla-caja.compacta .pantalla-logo` (0,3,0),
 * que si no le devuelve su margen al logo y lo descentra dentro del anillo. */
.pantalla-caja.compacta .pantalla-marca-carga .pantalla-logo { margin: 0; }
.pantalla-anillo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid var(--green-050);
  border-top-color: var(--green);
  animation: pantalla-girar .9s linear infinite;
}
@keyframes pantalla-girar {
  to { transform: rotate(360deg); }
}
/* Con la preferencia del sistema activa el anillo sigue girando, pero lento:
 * quitarle la animacion del todo dejaria la pantalla sin ninguna señal de que
 * algo esta pasando, que es justo lo que el spinner vino a resolver. */
@media (prefers-reduced-motion: reduce) {
  .pantalla-anillo { animation-duration: 2.4s; }
}
/* `:not(.pantalla-marca)` en vez de subir la especificidad del otro lado: en el
 * login la marca ES el `<h1>`, y `.pantalla h1` (0,1,1) le ganaria a
 * `.pantalla-marca` (0,1,0), dejandola con el tamaño y el color de un
 * encabezado comun. Acotar la regla dice la intencion; competir por
 * especificidad la esconde. */
.pantalla h1:not(.pantalla-marca) {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--text);
  margin: 22px 0 8px 0;
}
.pantalla p {
  font-size: var(--fs-md);
  color: var(--text-soft);
  line-height: 1.65;
  margin: 0 0 10px 0;
}
.pantalla p.destacado { color: var(--text); font-weight: 700; }
.pantalla code {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: var(--fs-sm);
  background: var(--value-box);
  border: 1px solid var(--value-box-border);
  padding: 2px 6px;
  border-radius: 4px;
  word-break: break-all;
}
.pantalla-acciones {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.pantalla-acciones .action-btn { flex: 1 1 auto; }

.detalle-tecnico {
  margin-top: 18px;
  font-size: var(--fs-xs);
  color: var(--text-mute);
}
.detalle-tecnico summary { cursor: pointer; font-weight: 700; }
.detalle-tecnico pre {
  background: var(--value-box);
  border: 1px solid var(--value-box-border);
  border-radius: var(--radio);
  padding: 10px 12px;
  overflow-x: auto;
  font-size: var(--fs-xs);
  line-height: 1.6;
  margin-top: 8px;
}

/* Aviso de inactividad (RF2). Va sobre la app, no la reemplaza: el usuario
 * todavia puede seguir trabajando si reacciona. */
.modal-fondo {
  position: fixed;
  inset: 0;
  background: rgba(12, 20, 16, 0.5);
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-caja {
  background: var(--card-bg);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-alta);
  padding: 26px 28px 22px 28px;
  max-width: 420px;
  width: 100%;
}
.modal-caja h2 { font-size: var(--fs-lg); font-weight: 800; margin: 0 0 8px 0; }
.modal-caja p { font-size: var(--fs-md); color: var(--text-soft); line-height: 1.6; margin: 0; }
.cuenta-regresiva { font-weight: 800; color: var(--green); }