/* 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);
}

.nota-semaforos {
  font-size: var(--fs-xs);
  color: var(--text-soft);
  line-height: 1.5;
  padding: 10px 18px 14px 18px;
  margin: 0;
}

/* 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;
  background: var(--page-bg);
}
.pantalla-caja {
  background: var(--card-bg);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-alta);
  padding: 34px 34px 28px 34px;
  max-width: 520px;
  width: 100%;
}
/* 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;
}
/* Centrado solo cuando la marca es el titulo (el login). En las demas
 * pantallas el texto va alineado a la izquierda, que es como se leen los
 * parrafos largos de diagnostico. */
.pantalla-caja > h1.pantalla-marca,
.pantalla-caja > h1.pantalla-marca + p {
  text-align: center;
}
.pantalla-marca span {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-mute);
  letter-spacing: 0;
}
/* `: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); }