/* ══ LA PANTALLA DEL E.V.O ══
   Paleta del PANEL, no la del generador: ese diseño es de otra época.
   Cada var() lleva respaldo porque una variable inexistente no falla,
   desaparece — y el elemento se queda invisible. */

.evo-top{ position:sticky; top:0; z-index:5; padding:12px 0 10px;
  background:var(--bg,var(--marca-banda)); border-bottom:1px solid var(--border,var(--linea-fuerte)); }
.evo-avance{ height:6px; border-radius:9999px; background:var(--border,var(--marca-banda)); overflow:hidden; }
.evo-avance i{ display:block; height:100%; background:var(--marca-principal);
  border-radius:9999px; transition:width .25s ease; }
.evo-avance-txt{ display:block; margin-top:6px; font-size:var(--letra-13, 13px); color:var(--text-3,var(--texto-3)); }

.evo-pasos{ display:flex; gap:8px; overflow-x:auto; padding:10px 0 2px; }
.evo-paso{ flex:0 0 auto; display:flex; align-items:center; gap:7px; padding:8px 13px;
  border-radius:var(--r-control, 12px); border:1px solid var(--border,var(--linea-fuerte));
  background:var(--superficie,var(--marca-banda)); color:var(--text-2,var(--texto-3));
  font-family:inherit; font-size:var(--letra-13, 13px); font-weight:600; cursor:pointer; }
.evo-paso:hover{ border-color:var(--marca-principal); }
.evo-paso.activo{ background:var(--marca-principal); border-color:var(--marca-principal);
  color:var(--marca-sobre-principal); font-weight:600; }
.evo-paso.listo{ border-color:var(--exito); }
.evo-paso-n{ width:19px; height:19px; border-radius:9999px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--marca-sobre-banda) 10%, transparent); font-size:var(--letra-13, 13px); font-weight:700; }
.evo-paso.activo .evo-paso-n{ background:var(--marca-suave); }
.evo-paso-f{ font-size:var(--letra-13, 13px); font-weight:600; color:var(--marca-principal); }
.evo-paso.activo .evo-paso-f{ color:var(--marca-sobre-principal); }

.evo-mod-cab{ display:flex; align-items:baseline; gap:10px; margin:18px 0 4px; flex-wrap:wrap; }
.evo-mod-cab h2{ margin:0; font-size:var(--letra-17, 17px); font-weight:700; color:var(--text,var(--marca-sobre-banda)); }
.evo-mod-d{ font-size:var(--letra-13, 13px); color:var(--text-3,var(--texto-3)); }

.evo-grupo{ margin-top:18px; }
.evo-grupo h3{ margin:0 0 10px; font-size:var(--letra-13, 13px); font-weight:700; letter-spacing:.3px;
  text-transform:uppercase; color:var(--text-3,var(--texto-3)); }

.evo-rx{ border:1px solid var(--border,var(--linea-fuerte)); border-radius:var(--r-control, 12px); padding:14px 15px;
  margin-bottom:11px; background:var(--superficie,var(--marca-banda)); }
.evo-rx.resuelto{ border-color:var(--exito); }
.evo-rx-cab{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:7px; }
.evo-rx-id{ font-size:var(--letra-13, 13px); font-weight:700; letter-spacing:.4px; color:var(--text-3,var(--texto-3)); }
.evo-rx-sev{ font-size:var(--letra-13, 13px); font-weight:700; padding:3px 9px; border-radius:var(--r-chico);
  background:color-mix(in srgb, var(--marca-sobre-banda) 7%, transparent); color:var(--text-2,var(--texto-3)); }
.evo-rx-sev.crítica{ background:var(--peligro-suave); color:var(--danger-txt); }
.evo-rx-sev.alta{ background:var(--aviso-suave, var(--superficie-2)); color:var(--warn); }
.evo-rx-sev.media{ background:var(--proceso-suave); color:var(--proceso-texto); }
.evo-rx-t{ margin:0 0 7px; font-size:var(--letra-15, 15px); line-height:1.45; color:var(--text,var(--marca-sobre-banda)); }
/* La explicación del reactivo: por qué importa. No es relleno — es lo
   que evita que quien levanta califique a ojo. */
.evo-rx-k{ margin:0 0 11px; font-size:var(--letra-13, 13px); line-height:1.5; color:var(--text-3,var(--texto-3)); }

.evo-ops{ display:flex; flex-wrap:wrap; gap:7px; }
.evo-op{ padding:8px 13px; border-radius:var(--r-control, 12px); border:1px solid var(--border,var(--linea-fuerte));
  background:transparent; color:var(--text-2,var(--texto-3)); font-family:inherit;
  font-size:var(--letra-13, 13px); font-weight:600; cursor:pointer; }
.evo-op:hover{ border-color:var(--text-3,var(--linea-fuerte)); }
.evo-op.sel{ font-weight:700; }
.evo-op.sel.ok{ background:var(--exito-suave); border-color:var(--ok); color:var(--ok-txt); }
.evo-op.sel.part{ background:var(--aviso-suave, var(--superficie-2)); border-color:var(--warn); color:var(--warn); }
.evo-op.sel.no{ background:var(--peligro-suave); border-color:var(--danger); color:var(--danger-txt); }
.evo-op.sel.un{ background:color-mix(in srgb, var(--texto-3) 15%, transparent); border-color:var(--linea-fuerte); color:var(--texto-3); }
.evo-op.na{ margin-left:auto; font-size:var(--letra-13, 13px); }
.evo-op.na.sel{ background:color-mix(in srgb, var(--texto-3) 20%, transparent); border-color:var(--linea-fuerte); }

.evo-nota{ width:100%; margin-top:9px; padding:8px 11px; border-radius:var(--r-control, 12px);
  border:1px solid var(--border,var(--linea-fuerte)); background:var(--bg,var(--marca-banda));
  color:var(--text,var(--marca-sobre-banda)); font-family:inherit; font-size:var(--letra-15, 15px); resize:vertical; }

.evo-pie{ position:sticky; bottom:0; display:flex; gap:10px; padding:14px 0;
  background:var(--bg,var(--marca-banda)); border-top:1px solid var(--border,var(--linea-fuerte)); }
.evo-pie .btn{ flex:1; }

/* ── EL PERÍMETRO ── */
.evo-poli{ border:1px solid var(--border,var(--linea-fuerte)); border-radius:var(--r-control, 12px); padding:13px 15px;
  margin:14px 0 4px; background:var(--superficie,var(--marca-banda)); }
.evo-poli-cab b{ display:block; font-size:var(--letra-15, 15px); color:var(--text,var(--marca-sobre-banda)); }
.evo-poli-cab span{ display:block; margin-top:3px; font-size:var(--letra-13, 13px); line-height:1.45;
  color:var(--text-3,var(--texto-3)); }
#evo-poli-lista{ display:flex; flex-wrap:wrap; gap:6px; margin:11px 0; min-height:26px; }
.evo-punto{ display:inline-flex; align-items:center; gap:5px; padding:4px 7px 4px 10px;
  border-radius:var(--r-chico); background:color-mix(in srgb, var(--marca-principal) 14%, transparent);
  border:1px solid var(--marca-principal);
  color:var(--marca-principal-texto); font-size:var(--letra-13, 13px); font-weight:600; }
.evo-punto button{ border:0; background:transparent; color:inherit; cursor:pointer;
  font-size:var(--letra-15, 15px); line-height:1; padding:0 2px; }
.evo-poli-vacio{ font-size:var(--letra-13, 13px); color:var(--text-3,var(--texto-3)); }
.evo-poli-acts{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.evo-poli-acts span{ font-size:var(--letra-13, 13px); color:var(--text-3,var(--texto-3)); }

/* ── LA EVIDENCIA ──
   Un hallazgo con foto se defiende solo; sin foto es la palabra de
   quien levantó contra la de quien lo niega. */
.evo-fotos{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-top:9px; }
.evo-foto{ position:relative; width:54px; height:54px; border-radius:var(--r-control, 12px); overflow:hidden;
  border:1px solid var(--border,var(--linea-fuerte)); }
.evo-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.evo-foto button{ position:absolute; top:1px; right:1px; width:17px; height:17px;
  border:0; border-radius:var(--r-control, 12px); background:color-mix(in srgb, var(--marca-banda) 82%, transparent); color:#fff;
  font-size:var(--letra-13, 13px); line-height:1; cursor:pointer; padding:0; }
.evo-addfoto{ display:inline-flex; align-items:center; gap:5px; padding:7px 12px;
  border-radius:var(--r-control, 12px); border:1px dashed var(--border,var(--linea-fuerte)); background:transparent;
  color:var(--text-3,var(--texto-3)); font-family:inherit; font-size:var(--letra-13, 13px); font-weight:600;
  cursor:pointer; }
.evo-addfoto:hover{ border-color:var(--marca-principal); color:var(--marca-principal-texto); }
.evo-foto-tope{ font-size:var(--letra-13, 13px); color:var(--text-3,var(--texto-3)); }

/* ── LO QUE EL CRO YA VIO ──
   No califica nada: dice dónde mirar. Entre CRO y E.V.O gana el E.V.O. */
.evo-senal{ border-left:3px solid var(--border,var(--linea-fuerte)); border-radius:0 var(--r-control, 12px) var(--r-control, 12px) 0;
  padding:9px 12px; margin:9px 0 0; font-size:var(--letra-13, 13px); line-height:1.5;
  background:color-mix(in srgb, var(--marca-sobre-banda) 3%, transparent); color:var(--text-2,var(--texto-3)); }
.evo-senal b{ display:block; color:var(--text,var(--marca-sobre-banda)); font-size:var(--letra-13, 13px); margin-bottom:2px; }
.evo-senal.alta{ border-left-color:var(--danger); background:var(--peligro-suave); }
.evo-senal.media{ border-left-color:var(--proceso); background:var(--proceso-suave); }
.evo-senal.baja{ border-left-color:var(--text-3); background:color-mix(in srgb, var(--texto-3) 8%, transparent); }
/* C4 no tiene antecedente en el CRO. Gris, nunca verde: un verde sin
   dato en la dimensión que fuerza CRÍTICO es peor que un hueco. */
.evo-senal.gris{ border-left-color:var(--text-3,var(--linea-fuerte)); }

/* La escala de Dirección (29-oct). El título del módulo es el de la
   pantalla: en la consola, `--t-pantalla` (30, segunda lámina); los botones heredan 14 del panel y van a 15. Los
   pasos son botones: radio 12, nunca píldora. La barra de avance es
   redonda y lleva `data-pastilla` en su marcado (arranque.js). */
#main .evo-mod-cab h2 { font:var(--t-pantalla); }
#app #evo-zona .btn, #app #main .row-actions .btn,
#evo-zona .btn.ghost { font-size:var(--letra-15, 15px); }

/* ── LOS NOMBRES DEL PANEL, A LOS TOKENS · lámina de Dirección, 29-oct ──
   Esta hoja usa los nombres de `panel.css` (--text, --border, --bg…),
   que allá valen colores escritos a mano (#041E42, #E8EEF6…). Aquí
   dentro, y sólo aquí, apuntan a `orvik-tokens.css`, que trae los dos
   temas. `panel.css` no se toca: no es de E5. */
#evo-zona {
  --text: var(--texto); --text-2: var(--texto-2); --text-3: var(--texto-3);
  --muted: var(--texto-2); --label: var(--texto-2);
  --border: var(--linea); --border-soft: var(--linea);
  --bg: var(--fondo); --superficie-3: var(--superficie-2); --navy-light: var(--superficie-2);
  --campo-bg: var(--superficie);
  --warn: var(--aviso, var(--peligro)); --danger: var(--peligro); --danger-txt: var(--peligro-texto);
  --ok: var(--exito); --ok-txt: var(--exito-texto);
  --campo-borde: var(--linea-fuerte);
  color: var(--texto);   /* lo que no trae color propio hereda el del body, que es de panel.css */
}