/* Sistema de diseño del dashboard de revisión — Automation-WP (marca Crisalix).

   V5 — revisión de diseño. Criterios, por si hay que discutirlos luego:

   1. JERARQUÍA. Antes cada tarjeta llevaba 4-5 chips en mayúscula y color, y el
      título del artículo pesaba MENOS que ellos. Para triar hay que leer el
      título primero. Ahora: título dominante, un solo estado visible, y el resto
      como texto tenue. Regla: un elemento "fuerte" por tarjeta.
   2. CONTRASTE. Los chips ok/pendiente/rechazado/dup fallaban WCAG AA (3.5:1 con
      texto de 11px). Recalculados a >=4.5:1 conservando el tono.
   3. COLOR CON SIGNIFICADO. El color se reserva para el ESTADO. Los adornos
      (barras de color por zona, panel teal de fondo) se han quitado: competían
      con la única señal que importa.
   4. NEUTROS TEÑIDOS. Grises con una pizca de azul de marca: el gris puro sobre
      fondo de color se ve sucio.
   5. BORDES > SOMBRAS. Definición con 1px de borde y sombras muy sutiles, en vez
      de sombras marcadas (que envejecen mal y ensucian a densidad alta).
   6. REDUNDANCIA. Todo estado va con color + TEXTO (y punto de color), nunca solo
      color: hay gente que no distingue el ámbar del rojo.
*/
:root{
  /* --- neutros teñidos hacia el azul de marca (el gris puro se ve sucio aquí) --- */
  --n-0:#ffffff;
  --n-25:#fbfcfd;
  --n-50:#f5f8fa;
  --n-100:#eaeff3;
  --n-200:#dde5eb;
  --n-300:#c6d2db;
  --n-400:#96a6b3;
  --n-500:#6b7f8c;
  --n-600:#516470;
  --n-700:#3c4d59;
  --n-800:#26343d;
  --n-900:#17252e;

  /* --- marca Crisalix: familia teal-azul --- */
  --accent:#137191;
  --accent-hover:#0f5f7b;
  --accent-2:#4a94b5;
  --accent-ink:#0d5470;
  --accent-soft:#e9f3f7;
  --accent-deep:#0d5470;

  /* --- estados: texto AA (>=4.5:1) sobre su propio fondo. NO tocar a ojo:
         si cambias uno, recalcula el contraste. --- */
  --ok:#16795b;      --ok-bg:#e7f5ef;   --ok-line:#bfe3d4;
  --rej:#bc4133;     --rej-bg:#fbecea;  --rej-line:#f2cec9;
  --pend:#866819;    --pend-bg:#fbf3dd; --pend-line:#ecdcac;
  --info:#0d5470;    --info-bg:#e2eef4; --info-line:#c4dce8;
  --ia:#6a3fb0;      --ia-bg:#efe8fb;   --ia-line:#dbcdf3;
  --dup:#a05a26;     --dup-bg:#fbeeda;  --dup-line:#f0d8ae;

  /* --- alias heredados: las plantillas ya los usan, no los quites --- */
  --bg:var(--n-50); --panel:var(--n-0); --ink:var(--n-900); --muted:var(--n-500);
  --line:var(--n-200);

  /* --- geometría: escala de radios, no un valor suelto --- */
  --r-xs:6px; --r-sm:8px; --r:12px; --r-lg:16px;

  /* --- elevación: 1px de borde + sombra apenas perceptible. La sombra sugiere
         el plano, no lo grita. --- */
  --shadow:0 1px 2px rgba(23,37,46,.04);
  --shadow-md:0 2px 4px rgba(23,37,46,.05), 0 1px 2px rgba(23,37,46,.04);
  --shadow-lg:0 8px 24px rgba(23,37,46,.08), 0 2px 6px rgba(23,37,46,.04);

  /* --- movimiento: rápido y con desaceleración. 120-180ms es el punto donde se
         percibe como respuesta y no como animación. --- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --fast:120ms; --med:180ms;
}

*{box-sizing:border-box}

body{margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.55;font-size:14px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100vh;display:flex;flex-direction:column}

a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline}

/* Titulares: apretados. El tracking negativo a tamaño grande es lo que separa un
   titular cuidado de uno por defecto. */
h1,h2,h3{letter-spacing:-.02em;line-height:1.25;font-weight:700}
h1{font-size:24px;margin:0}
h2{font-size:18px;margin:0}

/* Números en columna: tabular para que aliñen. En cifras grandes sueltas NO se
   usa tabular (deja los dígitos sueltos); eso se controla en .stat-val. */
td,.tnum{font-variant-numeric:tabular-nums}

::selection{background:var(--accent-soft)}

/* Foco accesible por teclado: visible al tabular, sin molestar al ratón */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}

/* ---------- Cabecera ---------- */
header.top{background:var(--panel);border-bottom:1px solid var(--line);
  padding:0 24px;display:flex;align-items:center;gap:20px;position:sticky;top:0;z-index:5;
  min-height:56px}
header.top .logo{display:flex;align-items:center}
header.top .logo img{height:24px;display:block}
header.top .divider{width:1px;height:22px;background:var(--line)}
header.top .kicker{font-weight:600;font-size:13px;color:var(--muted);letter-spacing:.01em}
header.top nav{display:flex;align-items:center;gap:2px}
header.top nav a{color:var(--n-600);font-size:13px;font-weight:600;
  padding:6px 11px;border-radius:var(--r-xs);transition:background var(--fast) var(--ease),color var(--fast) var(--ease)}
header.top nav a:hover{color:var(--ink);background:var(--n-100);text-decoration:none}
header.top nav a.on{color:var(--accent-ink);background:var(--accent-soft)}
header.top .spacer{flex:1}
header.top .logout{color:var(--muted);font-size:13px;font-weight:600}
header.top .logout:hover{color:var(--ink);text-decoration:none}

.wrap{max-width:1120px;margin:0 auto;padding:26px 24px 56px;width:100%}

/* ---------- Pie: discreto. Antes era una banda teal maciza que se llevaba la
     atención de la pantalla a cambio de nada. ---------- */
footer.brand{margin-top:auto;background:var(--panel);border-top:1px solid var(--line);
  color:var(--muted);padding:14px 24px;display:flex;align-items:center;gap:12px;
  flex-wrap:wrap;font-size:12px}
footer.brand img{height:16px;display:block;opacity:.5;filter:grayscale(1)}
footer.brand .sep{flex:1}

/* ---------- Cabecera de página: título + acciones, con una regla debajo ---------- */
.page-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:20px}
.page-head .ph-main{min-width:0;flex:1}
.page-head .ph-sub{color:var(--muted);font-size:13px;margin:4px 0 0}
.page-head .ph-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- Chips de estado ----------
   Sentence case (con el filtro |cap) en vez de MAYÚSCULA SOSTENIDA. No es gusto:
   GOV.UK lo mide — "Capital letters are reputed to be 13 to 18% harder for users
   to read. So we try to avoid them".
   Estilo "subtle" por defecto, no "bold" (Atlassian: los bold se reservan para lo
   excepcional; llenar la pantalla de chips fuertes anula su función).
   Punto + palabra + color = 2 de {color, forma, símbolo}, el mínimo que exige el
   patrón Status Indicator de IBM Carbon. Nunca solo color. */
.chip{display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:650;padding:2px 8px;border-radius:var(--r-xs);
  white-space:nowrap;line-height:1.6;letter-spacing:0;
  border:1px solid transparent}
.chip::before{content:"";width:5px;height:5px;border-radius:50%;
  background:currentColor;flex:0 0 5px;opacity:.85}
.chip.ok{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-line)}
.chip.rechazado{color:var(--rej);background:var(--rej-bg);border-color:var(--rej-line)}
.chip.pendiente{color:var(--pend);background:var(--pend-bg);border-color:var(--pend-line)}
.chip.revision{color:var(--pend);background:var(--pend-bg);border-color:var(--pend-line)}
.chip.neutral{color:var(--n-600);background:var(--n-100);border-color:var(--n-200)}
/* La escala del ciclo, y CADA PASO CON SU COLOR. Antes 'borrador' y 'publicado'
   eran el mismo azul: los dos estados que más falta hace distinguir ("¿se ve en la
   web o no?") se pintaban igual. Sigue el mapa de IBM Carbon: gris = borrador o
   trabajo sin empezar, azul = progreso, verde = hecho.
     pendiente(ámbar) -> listo(azul) -> borrador(gris) -> publicado(verde)         */
.chip.listo{color:var(--info);background:var(--info-bg);border-color:var(--info-line)}
.chip.borrador{color:var(--n-600);background:var(--n-100);border-color:var(--n-300)}
.chip.publicado{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-line)}
.chip.ia{color:var(--ia);background:var(--ia-bg);border-color:var(--ia-line)}
.chip.dup{color:var(--dup);background:var(--dup-bg);border-color:var(--dup-line)}
/* chip sin punto: para contadores y etiquetas que no son "estado" */
.chip.plain::before{display:none}

/* Línea de metadatos: sub-estados (texto/imagen) como TEXTO tenue con un punto de
   color, no como más chips. Antes eran chips llenos y competían con el título del
   artículo, que es lo único que necesitas leer para triar. El punto da el color;
   la palabra sigue ahí, así que no depende del color. */
/* Cada dato es un .mi que no se parte por dentro. Sin "·" separador: los puntos de
   color ya marcan dónde empieza cada dato, y el separador suelto se quedaba
   huérfano al final de línea al envolver (o abría línea, igual de feo). Separa el
   hueco, que además aguanta el envolvido sin dejar basura. */
.meta-line{display:flex;align-items:center;gap:2px 10px;flex-wrap:wrap;
  font-size:12px;color:var(--muted);margin-top:7px;line-height:1.5}
.meta-line .mi{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.meta-line .sep{display:none}
.dot{width:6px;height:6px;border-radius:50%;flex:0 0 6px;display:inline-block;
  margin-right:1px}
.dot.pendiente,.dot.revision{background:var(--pend)}
.dot.ok{background:var(--ok)}
.dot.listo{background:var(--info)}
.dot.rechazado{background:var(--rej)}
.dot.borrador{background:var(--n-400)}
.dot.publicado{background:var(--ok)}

/* Título de tarjeta de artículo: el elemento dominante. 2 líneas y elipsis. */
.card-title{font-weight:700;font-size:14px;letter-spacing:-.01em;line-height:1.35;
  color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Etiqueta micro (SÍ en mayúscula, con tracking): para rótulos de sección, que
   es donde la versalita funciona — son etiquetas, no frases. */
.kicker-label{font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--n-400)}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--n-300);background:var(--panel);color:var(--n-700);
  padding:7px 13px;border-radius:var(--r-sm);font-size:13px;cursor:pointer;font-weight:600;
  line-height:1.4;min-height:34px;
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),
             color var(--fast) var(--ease),box-shadow var(--fast) var(--ease),transform var(--fast) var(--ease)}
.btn:hover{background:var(--n-50);border-color:var(--n-400);color:var(--ink);text-decoration:none}
/* El desplazamiento de 1px al pulsar es lo que da sensación física al clic. */
.btn:active{transform:translateY(1px)}
.btn.primary{color:#fff;background:var(--accent);border-color:var(--accent);
  box-shadow:0 1px 2px rgba(19,113,145,.24)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.btn.ok{color:#fff;background:var(--ok);border-color:var(--ok)}
.btn.ok:hover{background:#12654c;border-color:#12654c;color:#fff}
.btn.rej{color:var(--rej);background:var(--panel);border-color:var(--rej-line)}
.btn.rej:hover{background:var(--rej-bg);border-color:var(--rej);color:var(--rej)}
.btn.ghost{color:var(--muted);background:transparent;border-color:transparent}
.btn.ghost:hover{color:var(--ink);background:var(--n-100);border-color:transparent}
.btn.sm{padding:4px 9px;font-size:12px;min-height:28px}
.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}

.muted{color:var(--muted)}
.aviso{color:var(--rej);background:var(--rej-bg);border:1px solid var(--rej-line);
  padding:10px 14px;border-radius:var(--r-sm);font-size:13px}

/* ---------- Campos ---------- */
input[type=text],input[type=search],input[type=password],select,textarea{
  font-family:inherit;font-size:13px;color:var(--ink);background:var(--panel);
  border:1px solid var(--n-300);border-radius:var(--r-sm);padding:7px 11px;
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
input[type=text]:focus,input[type=search]:focus,input[type=password]:focus,select:focus,textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}
input::placeholder{color:var(--n-400)}

/* ---------- Tarjetas ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:14px}
.card-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}

/* Tarjeta pulsable: el borde se tiñe de marca y sube 1px. Sutil pero informa. */
a.card{transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease),
                  transform var(--fast) var(--ease)}
a.card:hover{border-color:var(--accent-2);box-shadow:var(--shadow-md);
  transform:translateY(-1px);text-decoration:none}

/* ---------- Stat tiles (fila de KPIs) ----------
   Un número suelto grande NO lleva tabular-nums: con dígitos de ancho fijo, un
   "121" se ve suelto a 30px. Tabular es para columnas que deben aliñar. */
.stat-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin-bottom:22px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 15px;box-shadow:var(--shadow)}
.stat-lbl{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:3px}
.stat-val{font-size:32px;font-weight:700;letter-spacing:-.03em;line-height:1.15;
  font-variant-numeric:proportional-nums}
.stat-foot{font-size:12px;color:var(--n-400);margin-top:2px}
.stat.accent .stat-val{color:var(--accent-ink)}
.stat.warn .stat-val{color:var(--pend)}
.stat.good .stat-val{color:var(--ok)}
/* stat "apagada": un cero no merece tinta de color */
.stat.zero .stat-val{color:var(--n-300)}

/* ---------- Barra de progreso (cuánto llevas revisado) ----------
   En trabajo por cola, ver el avance es la diferencia entre "esto no acaba
   nunca" y "me faltan 3". */
.progress{height:5px;background:var(--n-200);border-radius:999px;overflow:hidden}
.progress > i{display:block;height:100%;background:var(--ok);border-radius:999px;
  transition:width var(--med) var(--ease)}

/* ---------- Desglose de coste (¿en qué se va el dinero?) ----------
   Barras, no tarta: son magnitudes comparables entre sí y ordenadas de mayor a
   menor, que es justo lo que una barra deja leer de un vistazo y una tarta no.
   La barra se ordena sola por importe, así que la más larga siempre va arriba. */
.cost-rows{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.cost-row{display:grid;grid-template-columns:minmax(96px,150px) 1fr auto;
  align-items:center;gap:11px}
.cost-row .cr-lbl{font-size:13px;color:var(--n-700);font-weight:600}
.cost-row .cr-bar{height:8px;background:var(--n-100);border-radius:999px;overflow:hidden}
.cost-row .cr-bar > i{display:block;height:100%;background:var(--accent-2);
  border-radius:999px;min-width:2px}
/* la operación que más pesa se tiñe con el azul fuerte: el titular del gráfico */
.cost-row:first-child .cr-bar > i{background:var(--accent)}
.cost-row .cr-val{font-size:13px;font-weight:650;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.cost-row .cr-pct{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;
  margin-left:5px;font-weight:500}
@media (max-width:640px){
  .cost-row{grid-template-columns:1fr auto;gap:3px 9px}
  .cost-row .cr-bar{grid-column:1/-1;order:3}
}

/* Nota informativa (contexto, no problema): azul de marca, no rojo de error. */
.nota{color:var(--info);background:var(--info-bg);border:1px solid var(--info-line);
  padding:11px 14px;border-radius:var(--r-sm);font-size:13px;line-height:1.55}
.nota strong{font-weight:700}
.nota.warn{color:var(--pend);background:var(--pend-bg);border-color:var(--pend-line)}

/* ---------- Estado vacío ----------
   Un vacío "no hay nada todavía" NO es lo mismo que "tu filtro no encuentra nada":
   el segundo se resuelve con una línea de texto, no con un panel enorme (si no,
   filtrar parece que ha roto algo). Aquí va el primero; el de filtro es #docempty. */
.empty{text-align:center;padding:32px 20px;color:var(--muted);max-width:485px;
  margin-inline:auto;
  border:1px dashed var(--n-300);border-radius:var(--r);background:var(--n-25)}
/* balance: reparte las líneas de un texto corto centrado en vez de dejar una
   última línea huérfana. Detalle pequeño, se nota. */
.empty .em-title,.empty .em-sub{text-wrap:balance}
.empty .em-ico{font-size:1.7rem;opacity:.35;margin-bottom:6px}
.empty .em-title{font-weight:700;color:var(--n-700);margin-bottom:3px;font-size:14px}
.empty .em-sub{font-size:13px}

/* ---------- Avatar ---------- */
.avatar{flex:0 0 44px;width:44px;height:44px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--n-100);
  /* aro interior: separa la foto del fondo blanco sin dibujar un borde duro */
  box-shadow:inset 0 0 0 1px rgba(23,37,46,.08)}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.placeholder{background:linear-gradient(135deg,var(--accent-2),var(--accent));
  color:#fff;font-weight:700;font-size:14px;letter-spacing:.01em}
.avatar.lg{flex-basis:56px;width:56px;height:56px;font-size:18px}

/* ---------- Selector de idioma ---------- */
.langsel{display:flex;gap:2px;background:var(--n-100);border-radius:var(--r-xs);padding:2px}
/* min 24x24: es el objetivo de clic mínimo de WCAG 2.5.8 (AA). Antes se quedaba
   en ~22px de alto. */
.langsel a{font-size:11px;font-weight:700;color:var(--n-500);padding:0 9px;
  min-height:24px;min-width:28px;display:flex;align-items:center;justify-content:center;
  border-radius:calc(var(--r-xs) - 2px);line-height:1;transition:color var(--fast) var(--ease)}
.langsel a.on{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}
.langsel a:hover{text-decoration:none;color:var(--ink)}

/* ---------- Cabecera de zona ----------
   Antes cada zona tenía una barra de color distinta (teal/verde/violeta/gris).
   Cuatro colores decorativos compitiendo con los colores de ESTADO, que son los
   que de verdad significan algo. Ahora la zona se separa con tipografía y aire. */
.zone-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:28px 0 12px}
.zone-head:first-of-type{margin-top:4px}
.zone-head h2{margin:0;font-size:16px}
.zone-head .spacer{flex:1}

/* La zona de revisión ya no va envuelta en un panel teal: el fondo de color
   restaba contraste a las tarjetas, que son lo que hay que mirar. */
.review-wrap{padding:0;margin-bottom:8px}

.dupbanner{background:var(--dup-bg);border:1px solid var(--dup-line);color:var(--dup);
  border-radius:var(--r-sm);padding:11px 14px;font-size:13px;margin-bottom:14px}

/* ---------- Flash ---------- */
.flash{max-width:1120px;margin:14px auto 0;padding:10px 15px;border-radius:var(--r-sm);
  background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok);font-size:13px;
  font-weight:600;display:flex;align-items:center;gap:8px}
.flash::before{content:"✓";font-weight:800}

/* ---------- Tablas ---------- */
.table-wrap{overflow-x:auto;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow)}
table.data{width:100%;border-collapse:collapse;font-size:13px;min-width:620px}
/* Cabeceras en sentence case, NO en versalita: Carbon lo exige para todo el texto
   de interfaz ("sentence case... table headers included") y las mayúsculas
   sostenidas se leen ~13-20% más lento. La versalita con tracking es justo el
   patrón anticuado aquí. */
table.data thead th{background:var(--n-50);color:var(--n-600);font-weight:650;
  font-size:12px;letter-spacing:0;
  padding:9px 14px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
table.data thead th.num{text-align:right}
table.data tbody td{padding:9px 14px;border-top:1px solid var(--n-100)}
table.data tbody td.num{text-align:right}
table.data tbody tr:first-child td{border-top:none}
table.data tbody tr:hover{background:var(--n-25)}
table.data tfoot td{padding:9px 14px;border-top:1px solid var(--line);
  background:var(--n-50);font-weight:700}
table.data tfoot td.num{text-align:right}

/* ---------- Detalle de artículo ---------- */
.cuerpo h2{font-size:18px;margin:22px 0 8px}
.cuerpo h3{font-size:16px;margin:16px 0 6px}
.cuerpo p{margin:10px 0}
.cuerpo ul,.cuerpo ol{margin:10px 0;padding-left:22px}
.cuerpo li{margin:4px 0}
.cuerpo .cta{background:var(--accent-soft);border:1px solid var(--accent-2);
  color:var(--accent-ink);padding:12px 16px;border-radius:var(--r-sm);font-weight:600}
.article-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:22px;align-items:start}
@media(max-width:820px){
  .article-grid{grid-template-columns:1fr !important}
  .article-grid aside{position:static !important}
}

/* ---------- Pestañas de idioma ---------- */
.tabnav{display:flex;gap:2px;flex-wrap:wrap;margin:0 0 18px;border-bottom:1px solid var(--line)}
.tabnav a{display:flex;align-items:center;gap:6px;padding:8px 14px;
  color:var(--n-500);font-weight:650;font-size:13px;letter-spacing:.02em;
  background:transparent;cursor:pointer;position:relative;border-radius:var(--r-xs) var(--r-xs) 0 0;
  border-bottom:2px solid transparent;top:1px;
  transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.tabnav a:hover{color:var(--ink);background:var(--n-50);text-decoration:none}
/* Pestaña activa: subrayado de 2px. Lee mejor que la "carpeta" con borde. */
.tabnav a.on{color:var(--accent-ink);border-bottom-color:var(--accent);background:transparent}
.tabnav a .tick{color:var(--ok);font-size:12px;display:none}
.tabnav a.seen .tick{display:inline}
.tabpane{display:none}
.tabpane.on{display:block}

/* Contador en la pestaña: dice si hay algo que hacer ahí dentro. Sin esto, meter
   contenido en pestañas SÍ sería esconderlo. `.alert` = pide acción (temas sin
   validar); el neutro es solo "cuántos hay". */
.tabnav .tabcount{display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;margin-left:2px;
  border-radius:999px;background:var(--n-100);color:var(--n-600);
  font-size:11px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.tabnav .tabcount.alert{background:var(--pend-bg);color:var(--pend)}
.tabnav a.on .tabcount{background:var(--accent-soft);color:var(--accent-ink)}
.tabnav a.on .tabcount.alert{background:var(--pend-bg);color:var(--pend)}

/* Barra de contexto de cada pestaña: la explicación a la izquierda, la acción a
   la derecha. Antes cada zona repetía cabecera + párrafo suelto. */
.tabpane .zone-head{margin:0 0 14px;min-height:34px}

/* Barra de aprobación: FIJA abajo, para confirmar sin scroll ni buscarla. Se queda
   pegada al borde inferior de la ventana mientras Gio recorre los idiomas. */
.group-approve{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-lg);padding:14px 16px;margin-top:20px;display:flex;align-items:center;
  gap:12px;flex-wrap:wrap;position:sticky;bottom:16px;z-index:4}
.approve-count{font-size:13px;font-weight:650;color:var(--muted);font-variant-numeric:tabular-nums}
.approve-count b{color:var(--ink)}

/* Pista de atajos: discreta, monoespaciada solo en las teclas. */
.kbd-hint{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 16px;font-size:12px;color:var(--muted)}
.kbd-hint span{display:inline-flex;align-items:center;gap:5px}
.kbd-hint kbd{display:inline-flex;align-items:center;justify-content:center;min-width:18px;
  height:18px;padding:0 5px;background:var(--n-100);border:1px solid var(--n-200);
  border-bottom-width:2px;border-radius:var(--r-xs);font-size:11px;font-weight:700;
  color:var(--n-700);font-family:inherit;line-height:1}

/* ---------- Sugerencia de re-traducción ---------- */
.sug-outdated{background:var(--pend-bg);border:1px solid var(--pend-line);color:var(--pend);
  border-radius:var(--r-sm);padding:9px 13px;font-size:13px;margin:0 0 12px}
.sug-box{border:1px solid var(--dup-line);background:var(--dup-bg);border-radius:var(--r);
  padding:14px 16px;margin:0 0 20px}
.sug-box.sug-generating{color:var(--muted);font-style:italic}
.sug-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:var(--dup);border-radius:var(--r-xs);
  padding:2px 8px;margin-bottom:9px}
.sug-box h3{margin:0 0 8px;font-size:18px;line-height:1.3}
.sug-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:12px;
  border-top:1px solid var(--dup-line);padding-top:12px}

/* ---------- Diff de la re-traducción: resaltar SOLO lo que cambió ----------
   El objetivo es que el ojo vaya al cambio sin releer el idioma entero: lo idéntico
   se apaga, lo nuevo se marca en verde y lo quitado va tachado. Verde/rojo NO son la
   única señal (tachado + apagado también lo son), por daltonismo. */
.dif-ins{background:var(--ok-bg);color:var(--ok);border-radius:var(--r-xs);
  padding:0 2px;text-decoration:none;box-shadow:inset 0 0 0 1px var(--ok-line)}
.dif-del{color:var(--rej);text-decoration:line-through;opacity:.75;margin-right:2px}
.cuerpo .dif-eq{opacity:.5}                       /* párrafo idéntico: apagado */
.cuerpo .dif-new{border-left:3px solid var(--ok-line);padding-left:9px}
.cuerpo .dif-gone{border-left:3px solid var(--rej-line);padding-left:9px}
.dif-resumen{font-size:13px;font-weight:600;color:var(--ink);margin:0 0 10px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dif-resumen-none{font-weight:500;color:var(--muted)}
.dif-leyenda{font-size:11px;font-weight:500;color:var(--muted);display:inline-flex;gap:8px}

/* ---------- Punto 4: buscar fuente (bajo demanda) ---------- */
.fuente-wrap{margin-top:4px}
.fuente-btn{font-size:12px;font-weight:600;color:var(--accent-ink);background:var(--accent-soft);
  border:1px solid var(--accent-2);border-radius:var(--r-xs);padding:2px 9px;cursor:pointer;
  transition:background var(--fast) var(--ease)}
.fuente-btn:hover{background:var(--panel)}
.fuente-btn:disabled{opacity:.6;cursor:default}
.fuentes{font-size:12.5px;line-height:1.7;margin-top:2px}
.fuentes a{font-weight:600}
.fuente-aviso{font-size:11px}
.fuente-note{font-size:12px}
/* Verifiche RESUELTA: la búsqueda trajo fuente(s). Se tacha y atenúa SOLO el texto del
   aviso (el punto y su porqué), no los enlaces, que quedan legibles debajo. Es solo visual:
   no bloquea aprobar/rechazar. Única forma de marcarla; no hay desmarcado manual. */
.vf-resuelta > strong,
.vf-resuelta > span.muted{text-decoration:line-through;opacity:.55}

/* ---------- Panel de enlaces internos ---------- */
.links-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:14px 16px;margin-top:20px}
.links-panel .lp-head{font-weight:700;font-size:14px;margin-bottom:4px}
.lp-computing{color:var(--muted);font-style:italic;padding:6px 0}
.link-row{border-top:1px solid var(--n-100);padding:10px 0;display:flex;gap:12px;align-items:flex-start}
.link-row:first-of-type{border-top:none}
.link-row.removed{opacity:.5}
.link-row.removed .lr-body a,.link-row.removed .lr-anchor{text-decoration:line-through}
.lr-body{flex:1;min-width:0}
.lr-anchor{font-weight:650;color:var(--accent-ink)}
.lr-ctx{font-size:12px;margin-top:3px;line-height:1.45}
.lr-ctx b{color:var(--ink)}
.lr-url{font-size:11px;word-break:break-all;margin-top:2px}
.link-row form{flex:0 0 auto}
.lp-error{font-style:normal;color:var(--rej)}
.cuerpo a.inline-link{background:var(--accent-soft);border-bottom:1.5px solid var(--accent-2);
  color:var(--accent-ink);text-decoration:none;padding:0 2px;border-radius:3px;font-weight:600}
.cuerpo a.inline-link:hover{background:#d8ebf2}

/* ---------- Respeto a quien desactiva animaciones ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  a.card:hover,.btn:active{transform:none}
}

/* ---------- Responsive ---------- */
@media(max-width:720px){
  header.top{flex-wrap:wrap;gap:8px 12px;padding:8px 16px;min-height:0}
  header.top .divider,header.top .kicker{display:none}
  header.top nav{flex-wrap:wrap;gap:2px}
  .wrap{padding:18px 16px 40px}
  footer.brand{padding:14px 16px}
  .stat-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
}


/* === PÁGINA DEL CRON — rediseño "calendario editorial" (Prop. B, 16-jul) =====
   Giorgia eligió esta de tres. El CALENDARIO manda; el estado es una banda-pastilla
   y el reparto son fichas de persona (inicial + NOMBRE). Solo forma: ni un cambio de
   lógica ni de freno. Todo sale de los tokens del panel (teal, ok/pend/rej, radios,
   sombras): AA y sin color nuevo. Mapa Carbon del resto: gris = reposo, verde =
   funcionando, ámbar = dice una cosa y hace otra, rojo = no publica nadie. */

/* La caja: la misma del resto (borde de 1px + sombra apenas). Dos cajas apiladas:
   calendario (protagonista) y reparto (debajo). */
.cronbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden}
.cronbox + .cronbox{margin-top:16px}

/* --- 1) LA BANDA DE ESTADO -------------------------------------------------
   Pastilla ancha, no un héroe gigante: el protagonista es el mes. Pero contesta
   "¿se publica?" de lejos con color + punto + palabra (nunca solo color). */
.cal-status{display:flex;align-items:center;gap:14px;padding:14px 18px;
  border-left:5px solid var(--n-400);border-bottom:1px solid var(--line)}
.cal-status .cs-dot{width:13px;height:13px;border-radius:50%;flex:none;
  background:var(--n-400);box-shadow:0 0 0 4px var(--n-100)}
.cal-status .cs-main{min-width:0;flex:1}
.cal-status .cs-state{font-size:1rem;font-weight:800;letter-spacing:-.01em;
  text-transform:uppercase;line-height:1.2}
.cal-status .cs-sub{margin:2px 0 0;font-size:.83rem;color:var(--muted);max-width:70ch}
.cal-status .cs-act{flex:none}
/* apagado: reposo válido, no error -> neutro */
.cal-status.off .cs-state{color:var(--n-700)}
/* publicando de verdad -> verde */
.cal-status.on{background:var(--ok-bg);border-left-color:var(--ok)}
.cal-status.on .cs-dot{background:var(--ok);box-shadow:0 0 0 4px var(--ok-line)}
.cal-status.on .cs-state{color:var(--ok)}
/* encendida pero sin crontab: dice una cosa y hace otra -> ámbar (atención, no error) */
.cal-status.roto{background:var(--pend-bg);border-left-color:var(--pend)}
.cal-status.roto .cs-dot{background:var(--pend);box-shadow:0 0 0 4px var(--pend-line)}
.cal-status.roto .cs-state{color:var(--pend)}

/* --- 2) LA BARRA DEL CALENDARIO: título, filtro por doctor, leyenda -------- */
.cal-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:13px 18px 0}
.cal-title{font-size:.95rem;font-weight:750;color:var(--n-800)}
.cal-ver{display:flex;align-items:center;gap:6px}
.cal-ver label{font-size:12px}
.cal-spacer{flex:1}
.cal-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}
.cal-legend .lk{display:inline-block;width:11px;height:11px;border-radius:3px;
  vertical-align:-1px;margin-right:3px;background:var(--n-0);border:1px solid var(--n-300)}
.cal-legend .lk.pub{border-color:var(--ok-line);background:var(--ok-bg)}
.cal-legend .lk.glob{border-color:var(--rej-line);
  background:repeating-linear-gradient(-45deg,var(--rej-bg) 0 3px,
    color-mix(in srgb,var(--rej) 24%,var(--rej-bg)) 3px 6px)}
.cal-legend .lk.exc{border-color:var(--pend-line);
  background:repeating-linear-gradient(45deg,var(--pend-bg) 0 3px,
    color-mix(in srgb,var(--pend) 24%,var(--pend-bg)) 3px 6px)}

/* --- LA REJILLA: filas = mes, columnas = 1er…5º viernes -------------------
   `slots` alinea cada viernes por su orden dentro del mes, así el "3er viernes" de
   cada mes cae en la misma columna y se escanea en vertical. */
.calgrid{display:grid;grid-template-columns:56px repeat(5, 1fr);gap:7px;
  align-items:stretch;padding:12px 18px 18px}
.cal-colhead{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.4px;text-align:center;padding-bottom:2px}
.cal-mes{display:flex;align-items:center;font-size:12px;font-weight:750;color:var(--n-700);
  text-transform:uppercase;letter-spacing:.4px}
.cal-mes .cal-anio{font-weight:400;color:var(--muted);margin-left:3px}
/* la celda-día: ficha de calendario, no botón de acción */
.cday{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:48px;padding:6px 4px;font:inherit;
  color:var(--n-700);background:var(--n-0);
  border:1px solid var(--n-200);border-radius:var(--r-xs);
  cursor:pointer;position:relative;
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.cday:hover:not(:disabled){background:var(--accent-soft);border-color:var(--accent-2)}
.cday:focus-visible{outline:2px solid var(--accent);outline-offset:1px;z-index:1}
.cday .cday-n{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.cday .cday-t{font-size:9.5px;font-weight:700;line-height:1.05;text-align:center}
/* hueco: mes con solo 4 viernes. Ocupa la celda para no descuadrar, pero invisible. */
.cday.empty{border:0;background:transparent;cursor:default}
/* PUBLICA, y SOLO con el sistema encendido (.live). Con .idle no se pinta el verde:
   un "sale" verde con todo apagado sería mentir. Punto verde discreto en la esquina. */
.calgrid.live .cday.pub{border-color:var(--ok-line)}
.calgrid.live .cday.pub .cday-n{color:var(--n-800)}
.calgrid.live .cday.pub::after{content:"";position:absolute;top:5px;right:5px;
  width:5px;height:5px;border-radius:50%;background:var(--ok)}
/* SALTO GLOBAL: no publica nadie -> color + tachado + banda diagonal */
.cday.g{color:var(--rej);border-color:var(--rej-line);
  background:repeating-linear-gradient(-45deg,var(--rej-bg) 0 7px,
    color-mix(in srgb,var(--rej) 22%,var(--rej-bg)) 7px 14px)}
.cday.g .cday-n{color:var(--rej);text-decoration:line-through;text-decoration-thickness:2px;
  text-decoration-color:var(--rej)}
.cday.g .cday-t{color:var(--rej)}
/* EXCEPCIÓN de un doctor: ámbar y banda al revés, para distinguirla del global sin el tono */
.cday.e{color:var(--pend);border-color:var(--pend-line);
  background:repeating-linear-gradient(45deg,var(--pend-bg) 0 7px,
    color-mix(in srgb,var(--pend) 22%,var(--pend-bg)) 7px 14px)}
.cday.e .cday-n{color:var(--pend);text-decoration:line-through;text-decoration-thickness:2px;
  text-decoration-color:var(--pend)}
.cday.e .cday-t{color:var(--pend)}
/* un global visto desde un doctor: se VE pero no se toca (se quita en "Todos") */
.cday:disabled{cursor:not-allowed;opacity:.8}

.vsel{padding:5px 8px;border:1px solid var(--line);border-radius:var(--r-xs);
  font-size:.82rem;background:var(--n-0);color:var(--ink)}

/* --- 3) EL REPARTO: fichas de persona (avatar de inicial + NOMBRE) --------
   El nombre SIEMPRE, no solo la inicial: "¿quién es Cg?" era el punto flojo de esta
   propuesta. El avatar da el color de estado; el grupo, el significado. */
.repbox{padding:15px 18px 17px}
.rep-head{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:.9rem}
.rep-vacio{margin:0 0 12px;font-size:12.5px}
.rep-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted);margin:12px 0 7px}
.rep-lbl.warn{color:var(--pend)}
.rep-lista{display:flex;gap:7px;flex-wrap:wrap}
.pchip{display:inline-flex;align-items:center;gap:7px;font:inherit;
  font-size:13px;font-weight:600;padding:4px 11px 4px 5px;
  border:1px solid var(--n-200);border-radius:999px;background:var(--n-0);color:var(--n-700);
  cursor:pointer;white-space:nowrap;transition:background var(--fast) var(--ease)}
.pchip:hover{background:var(--n-50)}
.pchip:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.pchip .pav{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:10.5px;font-weight:750;letter-spacing:.02em;
  background:var(--n-100);color:var(--n-500);border:1px solid var(--n-200)}
.pchip .pn{font-size:10px;font-weight:700;padding:1px 6px;border-radius:999px;
  background:var(--n-100);color:var(--n-600);font-variant-numeric:tabular-nums}
/* DENTRO: teal de marca en el avatar; la ficha, sobria */
.pchip.in{border-color:var(--n-300)}
.pchip.in .pav{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-2)}
/* FUERA: una sola pastilla apagada, con o sin cola -> no compite. Si está fuera Y tiene
   artículos esperando, lo dice SU contador en ámbar (no un grupo aparte): "fuera, y eso
   lo frena" vive en el chip, no partiendo la lista. Los tres grupos eran el hoy (8 sin
   cola), no el sistema; con dos, "Fuera" nunca se queda vacío. */
.pchip.out{color:var(--n-500)}
.pchip.out .pav{opacity:.85}
.pchip.out .pn{background:var(--pend-bg);color:var(--pend)}

/* --- responsive: en móvil, columnas más estrechas ------------------------- */
@media(max-width:560px){
  .calgrid{grid-template-columns:38px repeat(5, 1fr);gap:5px;padding:12px 12px 16px}
  .cday{min-height:44px;padding:5px 2px}
  .cday .cday-n{font-size:14px}
  .cal-status{gap:10px;padding:13px 14px}
  .repbox{padding:14px}
}

/* ============================================================================
   TEMA OSCURO (17-jul-2026) — pedido por Paula: fondo negro, letras blancas,
   líneas blancas, recuadros del mismo color, plano (sin sombras).
   Se aplica remapeando los TOKENS, así TODA la interfaz queda oscura y coherente
   (también el detalle de artículo y el calendario del Cron, que no salían en la
   muestra). Para volver al claro: borrar este bloque entero.
   ============================================================================ */
:root{
  /* --- superficies y texto: neutros en oscuro (fondo casi negro, texto claro) --- */
  --n-0:#16181c;      /* recuadros / tarjetas */
  --n-25:#191b20;
  --n-50:#191b20;     /* fondos sutiles (cabecera de tabla, hover) */
  --n-100:#23262c;    /* rellenos suaves */
  --n-200:#2b2f36;
  --n-300:#3a3f47;    /* bordes de botones y campos */
  --n-400:#7e828c;
  --n-500:#c2c5cc;    /* texto secundario (casi blanco) */
  --n-600:#d8dbe1;
  --n-700:#e9eaee;
  --n-800:#f4f5f7;
  --n-900:#ffffff;    /* texto principal: blanco */

  --bg:#0d0e10;                     /* fondo casi negro (no #000 duro, cansa menos) */
  --panel:#16181c;                  /* un solo color para todos los recuadros */
  --ink:#ffffff;                    /* letras blancas */
  --muted:#c2c5cc;
  --line:rgba(255,255,255,.5);      /* líneas blancas */

  /* --- teal de marca, aclarado para que se lea sobre negro --- */
  --accent:#2f9fc4;
  --accent-hover:#46b0d3;
  --accent-2:#3a92b3;
  --accent-ink:#69c2de;             /* enlaces */
  --accent-soft:#12303a;            /* fondos teal muy suaves (nav activo, cta) */
  --accent-deep:#69c2de;

  /* --- estados: mismo significado, versión oscura (texto claro + fondo oscuro) --- */
  --ok:#42c79a;   --ok-bg:#122a22;  --ok-line:#1f4436;
  --rej:#ff7d6d;  --rej-bg:#2c1613; --rej-line:#4a231d;
  --pend:#e6bf4d; --pend-bg:#2a2411; --pend-line:#463a1a;
  --info:#66c0e0; --info-bg:#102530; --info-line:#1d3d4b;
  --ia:#b394ec;   --ia-bg:#1d1733;   --ia-line:#2f2551;
  --dup:#e0975a;  --dup-bg:#2a1d11;  --dup-line:#463019;

  /* --- plano: sin sombras --- */
  --shadow:none; --shadow-md:none; --shadow-lg:0 0 0 1px rgba(255,255,255,.06);
}

/* Cabecera y pie: del color del fondo, separados por una línea blanca fina */
header.top{background:var(--bg)!important;border-bottom:1px solid var(--line)!important}
footer.brand{background:var(--bg)!important;border-top:1px solid var(--line)!important}
/* Logo: usamos el SVG blanco de marca (mariposa teal + texto blanco), servido
   desde base.html. Sin filtros. En el pie, un poco atenuado. */
footer.brand img{filter:none!important;opacity:.7!important}

/* KPIs calmados: la cifra en blanco, sin color por tipo */
.stat.accent .stat-val,.stat.good .stat-val,.stat.warn .stat-val{color:var(--ink)}

/* Cron sin "barra larga": el estado es una línea con una raya blanca debajo,
   no una banda de color a lo ancho */
.cal-status{border-left:none!important;background:transparent!important;
  border-bottom:1px solid var(--line)!important}
.cal-status.on,.cal-status.roto{background:transparent!important}
.cal-status .cs-state{text-transform:none!important;letter-spacing:0!important}

/* Botón/etiqueta con fondo de color vivo: texto oscuro para que se lea (blanco no
   contrasta sobre el verde/naranja claros del tema) */
.btn.ok{color:#06201a!important}
.btn.ok:hover{color:#06201a!important}
.sug-tag{color:#201503!important}