/* ============================================================
   Phronesis Design System · Capa de RIESGOS
   ------------------------------------------------------------
   Extiende (no reemplaza) colors_and_type.css.
   Importar SIEMPRE después del archivo base:

     <link rel="stylesheet" href="colors_and_type.css">
     <link rel="stylesheet" href="risk-tokens.css">

   Escala de severidad de 5 niveles alineada al motor de
   cálculo del Template de Riesgos (Guía AIR SI v8.0):
   score 1–25  ·  bandas en Parametros!E4:E8 = [1, 6, 10, 17, 20]

     1–5   Bajo      6–9   Menor     10–16 Moderado
     17–19 Alto      20–25 Crítico

   Carácter: semáforo / alto contraste.
   Los colores de texto (--*-fg) se eligieron por contraste WCAG
   real sobre cada relleno: solo "Crítico" admite texto blanco
   ≥4.5:1; el resto usa tinta oscura (la marca es no-alarmista,
   así que el relleno sólido se reserva a celdas/chips chicos).
   ============================================================ */

:root {
  /* ---------- SEVERIDAD · color sólido (semáforo) ---------- */
  --phr-sev-bajo:     #21A65A;   /* score 1–5   */
  --phr-sev-menor:    #8FBF2E;   /* score 6–9   */
  --phr-sev-moderado: #F2C200;   /* score 10–16 */
  --phr-sev-alto:     #F2711C;   /* score 17–19 */
  --phr-sev-critico:  #C61F1F;   /* score 20–25 */

  /* ---------- SEVERIDAD · tintes de fondo (superficies suaves) ---------- */
  --phr-sev-bajo-bg:     #E4F6EC;
  --phr-sev-menor-bg:    #F0F7DC;
  --phr-sev-moderado-bg: #FFF7D6;
  --phr-sev-alto-bg:     #FDEBDD;
  --phr-sev-critico-bg:  #FBE3E3;

  /* ---------- SEVERIDAD · texto sobre relleno sólido (AA verificado) ---------- */
  --phr-sev-bajo-fg:     var(--phr-ink);    /* ink s/ verde   5.8:1  */
  --phr-sev-menor-fg:    var(--phr-ink);    /* ink s/ lima    8.5:1  */
  --phr-sev-moderado-fg: var(--phr-ink);    /* ink s/ ámbar  11.0:1  */
  --phr-sev-alto-fg:     var(--phr-ink);    /* ink s/ naranja 6.3:1  */
  --phr-sev-critico-fg:  var(--phr-white);  /* white s/ rojo  5.8:1  */

  /* ---------- SEVERIDAD · texto de etiqueta sobre tinte (AA verificado) ---------- */
  --phr-sev-bajo-label:     #147A45;
  --phr-sev-menor-label:    #556F12;
  --phr-sev-moderado-label: #8A6D00;
  --phr-sev-alto-label:     #B6480F;
  --phr-sev-critico-label:  #C61F1F;

  /* ---------- Apetito / tolerancia ----------
     Parametros!B30 = 10. Riesgo residual ≥ umbral excede el apetito.
     Configurable por el CRSI; el tablero debe leerlo, no fijarlo. */
  --phr-sev-apetito: 10;
}

/* ============================================================
   BADGE / PILL de severidad
   Color NUNCA es el único indicador: la etiqueta de texto y un
   punto de color acompañan siempre (a11y: "no color alone").
   Sentence case, tipografía de marca.
   ============================================================ */
.phr-sev-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--phr-space-2);
  padding: var(--phr-space-1) var(--phr-space-3);
  border-radius: var(--phr-radius-pill);
  font-family: var(--phr-font-body);
  font-size: var(--phr-fs-small);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.phr-sev-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--phr-radius-pill);
  background: currentColor;
  flex: 0 0 auto;
}
.phr-sev-badge--bajo     { background: var(--phr-sev-bajo-bg);     color: var(--phr-sev-bajo-label); }
.phr-sev-badge--menor    { background: var(--phr-sev-menor-bg);    color: var(--phr-sev-menor-label); }
.phr-sev-badge--moderado { background: var(--phr-sev-moderado-bg); color: var(--phr-sev-moderado-label); }
.phr-sev-badge--alto     { background: var(--phr-sev-alto-bg);     color: var(--phr-sev-alto-label); }
.phr-sev-badge--critico  { background: var(--phr-sev-critico-bg);  color: var(--phr-sev-critico-label); }

/* ============================================================
   RELLENO SÓLIDO — celdas de matriz / chips de alta densidad
   Texto en *-fg verificado AA. Pensado para números/abreviaturas
   en negrita (el conteo o la sigla del nivel).
   ============================================================ */
.phr-sev-solid--bajo     { background: var(--phr-sev-bajo);     color: var(--phr-sev-bajo-fg); }
.phr-sev-solid--menor    { background: var(--phr-sev-menor);    color: var(--phr-sev-menor-fg); }
.phr-sev-solid--moderado { background: var(--phr-sev-moderado); color: var(--phr-sev-moderado-fg); }
.phr-sev-solid--alto     { background: var(--phr-sev-alto);     color: var(--phr-sev-alto-fg); }
.phr-sev-solid--critico  { background: var(--phr-sev-critico);  color: var(--phr-sev-critico-fg); }

/* ============================================================
   INDICADOR DE BARRA — punto/raya a la izquierda de una fila
   de tabla, para señalar severidad sin depender solo del color
   de fondo de la celda.
   ============================================================ */
.phr-sev-bar { box-shadow: inset 4px 0 0 0 currentColor; }
.phr-sev-bar--bajo     { color: var(--phr-sev-bajo); }
.phr-sev-bar--menor    { color: var(--phr-sev-menor); }
.phr-sev-bar--moderado { color: var(--phr-sev-moderado); }
.phr-sev-bar--alto     { color: var(--phr-sev-alto); }
.phr-sev-bar--critico  { color: var(--phr-sev-critico); }

/* ============================================================
   MARCA DE APETITO — resalta riesgos que exceden la tolerancia
   (score ≥ --phr-sev-apetito). Borde técnico, sin glow.
   ============================================================ */
.phr-sev-excede {
  outline: 2px solid var(--phr-sev-critico);
  outline-offset: -2px;
}