/*
 * Consola de mailsec.
 *
 * Sin marco ni preprocesador: se lee entero de una sentada, que en un producto de seguridad
 * vale más que cualquier comodidad.
 *
 * ## Dos decisiones que no son estéticas
 *
 * 1. **Pestañas, no scroll** (ESTANDAR-UI). Cinco vistas apiladas obligan a recordar lo que
 *    quedó arriba, y lo que queda fuera de pantalla se deja de mirar. Cada vista ocupa el alto
 *    disponible y hace scroll POR DENTRO si le hace falta; la página no.
 *
 * 2. **El color nunca es la única señal** (WCAG 1.4.1). Cada tono lleva un símbolo y un texto.
 *    Un panel que sólo distingue rojo de verde es inservible para quien no distingue rojo de
 *    verde, que es una de cada doce personas con visión masculina.
 */

:root {
  --fondo: #10131a;
  --fondo-alto: #171b24;
  --borde: #2a3040;
  --texto: #e8ecf4;
  /* Contraste ≥ 4.5:1 sobre --fondo-alto, comprobado para AA en texto normal. */
  --tenue: #a3adc2;

  --bueno: #4ade80;
  --aviso: #fbbf24;
  --malo: #f87171;
  --ignoto: #a78bfa;
  --neutro: #93a4c4;

  --foco: #7dd3fc;
}

/* Respeta a quien pide menos movimiento: no es un detalle, es un requisito de 2.3.3. */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  /* La PÁGINA no hace scroll. Lo hace cada panel por dentro. */
  overflow: hidden;
}

/* Enlace de salto: invisible hasta que recibe el foco. Sin él, quien navega con teclado
   recorre las cinco pestañas antes de llegar al contenido, en cada recarga. */
.saltar {
  position: absolute;
  left: -9999px;
  background: var(--fondo-alto);
  color: var(--texto);
  padding: 0.5rem 1rem;
  z-index: 10;
}
.saltar:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* Foco SIEMPRE visible y grueso (2.4.7 y 2.4.11). Quitar el contorno por estética es la forma
   más rápida de dejar la consola inservible con teclado. */
:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

.cabecera {
  padding: 0.75rem 1rem 0;
  flex: 0 0 auto;
}
.cabecera h1 {
  font-size: 1.1rem;
  margin: 0;
  letter-spacing: 0.04em;
}

.global {
  margin: 0.5rem 0 0;
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  border-left: 4px solid var(--malo);
  background: var(--fondo-alto);
}
/* Sin contenido no ocupa sitio: una franja vacía se lee como «hay algo que no cargó». */
.global:empty {
  display: none;
}

[role="tablist"] {
  display: flex;
  gap: 0.25rem;
  padding: 0.75rem 1rem 0;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--borde);
  overflow-x: auto;
}

[role="tab"] {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  color: var(--tenue);
  cursor: pointer;
  font: inherit;
  padding: 0.5rem 0.9rem;
  white-space: nowrap;
}
[role="tab"][aria-selected="true"] {
  background: var(--fondo-alto);
  border-color: var(--borde);
  color: var(--texto);
  /* Además del color: un subrayado grueso. El estado de la pestaña activa no puede depender
     sólo del tono. */
  box-shadow: inset 0 -3px 0 var(--foco);
}

main {
  flex: 1 1 auto;
  min-height: 0;
  padding: 1rem;
}
#paneles {
  height: 100%;
}

[role="tabpanel"] {
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
[role="tabpanel"][hidden] {
  display: none;
}

.cabecera-panel {
  background: var(--fondo-alto);
  border: 1px solid var(--borde);
  border-left-width: 4px;
  border-radius: 8px;
  padding: 0.8rem 1rem;
}
.cabecera-panel h2 {
  font-size: 1.05rem;
  margin: 0;
}
.cabecera-panel p,
.aviso p {
  margin: 0.35rem 0 0;
  color: var(--tenue);
}

.aviso {
  background: var(--fondo-alto);
  border: 1px solid var(--borde);
  border-left-width: 4px;
  border-radius: 8px;
  padding: 0.7rem 1rem;
}
.aviso strong {
  display: block;
}

/* El tono da el color del borde; el texto del estado lo pone el JS en `.etiqueta`. */
.tono-bueno {
  border-left-color: var(--bueno);
}
.tono-aviso {
  border-left-color: var(--aviso);
}
.tono-malo {
  border-left-color: var(--malo);
}
.tono-ignoto {
  border-left-color: var(--ignoto);
}
.tono-neutro {
  border-left-color: var(--neutro);
}

.etiqueta {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tenue);
  margin-right: 0.5rem;
}

ul.filas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
ul.filas li {
  background: var(--fondo-alto);
  border: 1px solid var(--borde);
  border-left-width: 4px;
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
}
ul.filas .titulo {
  font-weight: 600;
}
ul.filas .detalle {
  color: var(--tenue);
  font-size: 0.92rem;
}

/* Modo de alto contraste del sistema: se dejan mandar a los colores del sistema en vez de
   imponer la paleta. */
@media (forced-colors: active) {
  .cabecera-panel,
  .aviso,
  ul.filas li {
    border: 1px solid CanvasText;
  }
}