/* ════════════════════════════════════════════════════════════════════
   Lo que llega de las apps · EPAC, Relevos, Retiros, Despachos
   Fase 9 · E5 · 29-oct-2026 · la lógica en `consola-registros.js`.

   Sólo tokens de `orvik-tokens.css`. Letra en la escala de la lámina de
   Dirección (13 / 15 / 17 / 24; 30 el título de la consola), con `var(--letra-*, valor)` hasta que E3
   publique esos tokens. Radios: 20 tarjeta, 12 el
   botón, y redondo completo sólo los chips (insignias, no botones) y el
   punto de color, los dos marcados con `data-pastilla`.
   ════════════════════════════════════════════════════════════════════ */

.cr { color:var(--texto); }
.cr-cab { margin:0 0 var(--e-4); }
/* Título de pantalla de la consola: `--t-pantalla` (30, segunda lámina de
   Dirección, 29-oct). El `h2` del panel mide 20; aquí se fija el de la escala. */
#main .cr-cab h2 { margin:0; font:var(--t-pantalla); color:var(--texto); }
.cr-sub {
  margin:var(--e-1) 0 0;
  font:500 var(--letra-13, 13px)/18px var(--fuente);
  color:var(--texto-2);
}

.cr-chips-fila:empty { display:none; }
.cr-chips { display:flex; flex-wrap:wrap; gap:var(--e-2); margin:0 0 var(--e-4); }
.cr-chip {
  display:inline-flex; align-items:center;
  padding:var(--e-1) var(--e-3);
  /* Sin píldoras: toda insignia con --r-chico (Dirección, 2-nov, por el auditor). */
  border-radius:var(--r-chico);
  font:600 var(--letra-13, 13px)/18px var(--fuente);
  background:var(--neutro-suave); color:var(--neutro-texto);
}
.cr-chip.cr-danger  { background:var(--peligro-suave); color:var(--peligro-texto); }
.cr-chip.cr-proceso { background:var(--proceso-suave); color:var(--proceso-texto); }
.cr-chip.cr-ok      { background:var(--exito-suave);   color:var(--exito-texto); }
/* ── EL ESCALÓN DEL RÉCORD · docs/50 §9.3 ──
   Cada escalón con el color de su metal (`--escalon-*`, Dirección,
   29-oct 19:30), de día y de noche. Ya no se usan `--record-*` (son
   estado de operación) ni `--nivel-*`. En evaluación va en gris. El
   texto se mezcla un 20 % hacia `--texto` para que se lea en los dos
   temas sin escribir un color. */
.cr-chip.cr-rec-platino { --rec: var(--escalon-platino); border:1px solid var(--escalon-platino); }
.cr-chip.cr-rec-oro     { --rec: var(--escalon-oro);     border:1px solid var(--escalon-oro); }
.cr-chip.cr-rec-plata   { --rec: var(--escalon-plata);   border:1px solid var(--escalon-plata); }
.cr-chip.cr-rec-bronce  { --rec: var(--escalon-bronce);  border:1px solid var(--escalon-bronce); }
.cr-chip.cr-rec-riesgo  { --rec: var(--escalon-riesgo); }
.cr-chip.cr-rec-evaluacion { --rec: var(--neutro); }
.cr-chip[class*="cr-rec-"] {
  background: color-mix(in srgb, var(--rec) 14%, transparent);
  color: color-mix(in srgb, var(--rec) 80%, var(--texto));
}
.cr-chip.cr-rec-evaluacion { color: color-mix(in srgb, var(--rec) 45%, var(--texto)); }

.cr-cols {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap:var(--hueco-tarjetas);
  align-items:start;
}

.cr-tarj {
  background:var(--superficie);
  border:1px solid var(--linea);
  border-radius:var(--r-tarjeta);
  padding:var(--e-5);
  min-width:0;
}
.cr-tt { margin:0 0 var(--e-3); font:600 var(--letra-17, 17px)/22px var(--fuente); color:var(--texto); }

.cr-lista { list-style:none; margin:0; padding:0; }
.cr-it {
  display:flex; align-items:flex-start; gap:var(--e-3);
  min-height:var(--toque);
  padding:var(--e-3) 0;
  border-top:1px solid var(--linea);
}
.cr-it:first-child { border-top:0; padding-top:0; }
.cr-punto {
  flex:none; width:8px; height:8px; margin-top:5px;
  border-radius:var(--r-pildora);
  background:var(--neutro);
}
.cr-punto.cr-ok      { background:var(--exito); }
.cr-punto.cr-danger  { background:var(--peligro); }
.cr-punto.cr-proceso { background:var(--proceso); }
.cr-tx { display:flex; flex-direction:column; gap:2px; min-width:0; }
.cr-n { font:600 var(--letra-13, 13px)/18px var(--fuente); color:var(--texto); overflow-wrap:anywhere; }
.cr-d { font:500 var(--letra-13, 13px)/18px var(--fuente); color:var(--texto-2); overflow-wrap:anywhere; }

.cr-vacio { margin:0; font:500 var(--letra-13, 13px)/18px var(--fuente); color:var(--texto-2); }

.cr-pie { margin-top:var(--e-5); display:flex; }
#main .cr-pie .btn { min-height:var(--toque); border-radius:var(--r-control);
  font:500 var(--letra-15, 15px)/20px var(--fuente); color:var(--texto); }

/* ── Piezas de Personal (`consola-personal.js`: Record ID y Golden Coins) ──
   Una columna puede llevar varias tarjetas; la cifra de un indicador es
   `--t-cifra` (segunda lámina de Dirección, 29-oct). */
.cr-col { display:flex; flex-direction:column; gap:var(--hueco-tarjetas); min-width:0; }
.cr-col .cr-tarj { margin:0; }
.cr-kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:var(--e-4); margin:0; }
.cr-kpi { min-width:0; }
.cr-kpi dt { font:500 var(--letra-13, 13px)/18px var(--fuente); color:var(--texto-2); }
.cr-kpi dd { margin:var(--e-1) 0 0; font:var(--t-cifra); color:var(--texto); overflow-wrap:break-word; hyphens:auto; }
.cr-pares { margin:0; }
.cr-pares div { display:flex; justify-content:space-between; gap:var(--e-3); padding:var(--e-2) 0; border-top:1px solid var(--linea); }
.cr-pares div:first-child { border-top:0; padding-top:0; }
.cr-pares dt { font:500 var(--letra-13, 13px)/18px var(--fuente); color:var(--texto-2); }
.cr-pares dd { margin:0; font:600 var(--letra-13, 13px)/18px var(--fuente); color:var(--texto); text-align:right; }
.cr-enlaces { display:flex; flex-wrap:wrap; gap:var(--e-2); }
#main .cr-enlaces .btn { min-height:var(--toque); border-radius:var(--r-control);
  font:500 var(--letra-15, 15px)/20px var(--fuente); color:var(--texto); }