/* Portal de Vinculación de Aliados — COOPORIGEN
   Paleta corporativa + acento propio (ocre) para distinguir este portal del de
   actualización. Se irá ampliando a medida que se construyan las pantallas. */

:root {
  /* El portal solo tiene tema claro — evita que Chrome/Edge "auto-oscurezcan"
     el texto (eso vuelve azulados los grises cuando el sistema está en modo
     oscuro, que es justo lo que se veía en la descripción del requerimiento). */
  color-scheme: light;

  /* Tokens EXACTOS del Portal de Actualización (references/diseno_visual_ux.md) */
  --verde-oscuro: #102824;
  --verde-medio: #315C55;
  --verde-claro: #E8F0EE;
  --dorado: #FAC569;
  --dorado-hover: #f0b84a;
  --fondo: #f0f4f2;
  --blanco: #ffffff;
  --superficie: #ffffff;
  --texto: #102824;
  --texto-suave: #555;
  --texto-muy-suave: #888;
  --borde: #e0e8e5;

  /* Alias usados en plantillas de Vinculación (apuntan a los tokens reales) */
  --tinta: #102824;
  --tinta-suave: #555;
  --tinta-tenue: #888;
  --linea: #e0e8e5;
  --linea-strong: #cdd8d3;

  /* Acento propio de Vinculación — se usa con la misma sutileza que el dorado
     en el portal hermano, nunca como bloque sólido. */
  --ocre: #B0602C;
  --ocre-claro: #F1E2D4;

  /* Semántica de estado (mismos valores que el portal hermano) */
  --ok: #166534;         --ok-bg: #DCFCE7;
  --espera: #854d0e;     --espera-bg: #FEF9C3;
  --info: #1e40af;       --info-bg: #DBEAFE;
  --malo: #991B1B;       --malo-bg: #FEE2E2;
  --verde-exito: #22c55e;

  --frente-doc: #315C55;
  --frente-req: #C9922E;
  --frente-proc: #B0602C;

  --radio-sm: 8px;
  --radio-md: 12px;
  --radio-lg: 18px;
  --sombra-sm: 0 2px 8px rgba(0,0,0,0.06);
  --sombra-md: 0 8px 24px rgba(0,0,0,0.10);
  --sombra-lg: 0 20px 48px rgba(0,0,0,0.18);
  --sombra: var(--sombra-sm);

  --transicion: .18s ease;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 14px;
  background: var(--fondo);
  color: var(--texto);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--verde-medio); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

.contenedor {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 5rem) 1.5rem 4rem;
}

/* ── Encabezado de marca ── */
.marca {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding-bottom: 1.4rem;
  border-bottom: 2px solid var(--verde-medio);
}
.marca img { height: 44px; width: auto; }
.marca .titulo {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--verde-oscuro);
  line-height: 1.25;
}
.marca .subtitulo {
  font-size: .8rem;
  color: var(--tinta-tenue);
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* ── Tarjeta principal ── */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 12px;
  box-shadow: var(--sombra);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  margin-top: 2rem;
}

h1 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--verde-oscuro);
  margin: 0 0 .5rem;
  line-height: 1.2;
}
.lede { color: var(--tinta-suave); margin: 0 0 1.5rem; }

.etiqueta-fase {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ocre);
  background: var(--ocre-claro);
  border-radius: 999px;
  padding: .25rem .7rem;
  margin-bottom: 1rem;
}

/* ── Lista de estado ── */
.estado {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--linea);
}
.estado li {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--linea);
  font-size: .92rem;
}
.punto {
  width: 9px; height: 9px; border-radius: 50%;
  flex: none;
  background: var(--tinta-tenue);
}
.punto.si { background: var(--ok); }
.punto.no { background: var(--dorado); }
.estado .detalle { margin-left: auto; color: var(--tinta-tenue); font-size: .82rem; }

.pie {
  margin-top: 2rem;
  font-size: .8rem;
  color: var(--tinta-tenue);
}

/* ══════════════════════════════════════════════════════════════
   Autenticación — inicio de sesión, activación, recuperación
   ══════════════════════════════════════════════════════════════ */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(49, 92, 85, .10), transparent 60%),
    var(--fondo);
}
.auth-wrap { width: 100%; max-width: 430px; }

.auth-card {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 14px;
  box-shadow: var(--sombra);
  padding: 2rem 1.9rem 1.9rem;
}

.auth-logo-row { display: flex; align-items: center; gap: .8rem; }
.auth-logo-row img { height: 42px; width: auto; }
.auth-brand { font-weight: 700; color: var(--verde-oscuro); line-height: 1.2; }
.auth-brand-sub {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--tinta-tenue);
}
.auth-divider { height: 1px; background: var(--linea); margin: 1.3rem 0; }
.auth-section-label {
  font-size: .9rem; font-weight: 600; color: var(--verde-medio);
  margin-bottom: 1.1rem;
}

.field { margin-bottom: 1rem; }
.field label {
  display: block; font-size: .82rem; font-weight: 600;
  color: var(--tinta-suave); margin-bottom: .35rem;
}
.field input, .field select {
  width: 100%; padding: .6rem .7rem;
  border: 1px solid var(--linea); border-radius: 8px;
  font-size: .95rem; font-family: inherit; color: var(--tinta);
  background: var(--superficie);
}
.field input:focus, .field select:focus {
  outline: 2px solid var(--ocre); outline-offset: 1px; border-color: var(--ocre);
}
.field .ayuda { display: block; margin-top: .3rem; font-size: .78rem; color: var(--tinta-tenue); }
.field-inline-link { text-align: right; margin-top: .4rem; }
.field-inline-link a { font-size: .78rem; color: var(--verde-medio); text-decoration: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border: none; border-radius: var(--radio-md);
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em; cursor: pointer;
  font-family: inherit; text-decoration: none; white-space: nowrap;
  transition: all 0.2s;
}
.btn-primary { background: var(--dorado); color: var(--verde-oscuro); width: 100%; }
.btn-primary:hover { background: var(--dorado-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(250,197,105,0.4); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-secundario {
  background: transparent; color: var(--verde-medio);
  border: 1.5px solid var(--verde-medio); width: auto;
}
.btn-secundario:hover { background: var(--verde-claro); }

.alert {
  display: flex; gap: .55rem; align-items: flex-start;
  padding: .7rem .85rem; border-radius: 8px; font-size: .86rem;
  margin-bottom: 1rem;
}
.alert-error { background: #FBEBE7; color: #8A3B24; border: 1px solid #E7C3B7; }
.alert-ok    { background: #E7F1EA; color: #2C6B44; border: 1px solid #BFDDC8; }
.alert-info  { background: var(--ocre-claro); color: #7A4420; border: 1px solid #E0C7B2; }

.captcha-box {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--fondo); border: 1px solid var(--linea);
  border-radius: 8px; padding: .55rem .75rem; margin-bottom: .3rem;
  font-size: .82rem; color: var(--tinta-suave);
}
.captcha-box .op { font-weight: 700; color: var(--verde-oscuro); letter-spacing: .05em; }

.enlace-generado {
  margin-top: .6rem; padding: .7rem .8rem;
  background: var(--fondo); border: 1px dashed var(--ocre);
  border-radius: 8px; font-family: ui-monospace, "Consolas", monospace;
  font-size: .8rem; color: var(--verde-oscuro); word-break: break-all;
}

.auth-footer {
  text-align: center; margin-top: 1.1rem;
  font-size: .74rem; color: var(--tinta-tenue);
}

/* ── Firma oculta del desarrollador — "experiencia escondida" ──
   En reposo sólo hay un punto casi invisible en la esquina. Al pasar
   el mouse (o enfocar con teclado) el punto se enciende en dorado y la
   firma se despliega hacia la derecha con un leve resplandor. */
.firma-dev {
  position: fixed; left: 16px; bottom: 14px; z-index: 5;
  display: flex; align-items: center;
  font-family: ui-monospace, "SF Mono", "Consolas", monospace;
  font-size: 11px; letter-spacing: .03em;
  cursor: default; user-select: none; -webkit-tap-highlight-color: transparent;
  outline: none;
}
.firma-dot {
  width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
  background: rgba(49, 92, 85, .28);
  transition: background .35s ease, box-shadow .35s ease, transform .35s ease;
}
.firma-txt {
  max-width: 0; overflow: hidden; white-space: nowrap;
  opacity: 0; transform: translateX(-4px);
  color: rgba(16, 40, 36, .55);
  transition: max-width .42s cubic-bezier(.4,0,.2,1),
              opacity .28s ease .06s,
              transform .42s cubic-bezier(.4,0,.2,1),
              padding .42s ease;
}
.firma-txt b {
  font-weight: 600;
  background: linear-gradient(90deg, var(--verde-medio), var(--ocre));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.firma-dev:hover .firma-dot,
.firma-dev:focus-visible .firma-dot {
  background: var(--dorado); transform: scale(1.15);
  box-shadow: 0 0 0 3px rgba(250,197,105,.22), 0 0 14px 3px rgba(250,197,105,.4);
}
.firma-dev:hover .firma-txt,
.firma-dev:focus-visible .firma-txt {
  max-width: 180px; opacity: 1; transform: translateX(0); padding-left: 9px;
}
@media (max-width: 640px) { .firma-dev { left: 13px; bottom: 10px; font-size: 10px; } }

/* ── Barras de desplazamiento — sobrias en todo el portal, invisibles en la barra lateral ── */
* { scrollbar-width: thin; scrollbar-color: rgba(49,92,85,.28) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(49,92,85,.22); border-radius: 8px;
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(49,92,85,.42); background-clip: content-box; }
.sidebar { scrollbar-width: none; -ms-overflow-style: none; }
.sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; }
.tabla-scroll::-webkit-scrollbar, .tabs::-webkit-scrollbar { height: 6px; }

/* ══════════════════════════════════════════════════════════════
   Panel interno — barra superior + contenido
   ══════════════════════════════════════════════════════════════ */
.topbar {
  display: flex; align-items: center; gap: 1.2rem;
  padding: 0 1.5rem; min-height: var(--chrome-h);
  background: var(--verde-oscuro); color: #fff;
  position: sticky; top: 0; z-index: 30;
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 6px 20px rgba(16,40,36,.12);
}
.topbar img { height: 30px; width: auto; }
.topbar .marca-mini { font-weight: 600; font-size: .95rem; }
.topbar nav { display: flex; gap: 1.1rem; margin-left: .5rem; }
.topbar nav a {
  color: #cfe0dc; text-decoration: none; font-size: .86rem; padding: .2rem 0;
  border-bottom: 2px solid transparent;
}
.topbar nav a:hover, .topbar nav a.activo { color: #fff; border-bottom-color: var(--dorado); }
.topbar .usuario-box { margin-left: auto; display: flex; align-items: center; gap: .8rem; font-size: .82rem; }
.topbar .usuario-box .rol {
  background: rgba(255,255,255,.12); padding: .15rem .5rem; border-radius: 999px;
  text-transform: capitalize;
}
.topbar .usuario-box a { color: var(--dorado); text-decoration: none; }

.contenido { max-width: 960px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.contenido h1 { font-size: 1.5rem; color: var(--verde-oscuro); margin: 0 0 .3rem; }
.contenido .sub { color: var(--tinta-suave); margin: 0 0 1.5rem; }

.barra-acciones { display: flex; justify-content: flex-end; margin-bottom: 1rem; }

/* Tabla del panel — mismas proporciones que .admin-table del hermano */
.tabla {
  width: 100%; border-collapse: collapse; font-size: 13px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 14px; overflow: hidden;
}
/* Barra de búsqueda y filtros sobre una tabla (aliados, y lo que se sume después). */
.filtros-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin-bottom: 1rem; padding: .8rem 1rem; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 12px;
}
.filtros-toolbar input[type="text"] {
  flex: 1 1 220px; min-width: 180px; padding: .5rem .7rem; border: 1px solid var(--linea);
  border-radius: 8px; font-family: inherit; font-size: .84rem; color: var(--tinta);
}
.filtros-toolbar select {
  padding: .5rem .6rem; border: 1px solid var(--linea); border-radius: 8px;
  font-family: inherit; font-size: .84rem; color: var(--tinta); background: var(--blanco);
}
.filtros-toolbar input[type="text"]:focus, .filtros-toolbar select:focus {
  outline: none; border-color: var(--verde-medio); box-shadow: 0 0 0 2px rgba(49,92,85,.12);
}
.filtros-exportar { margin-left: auto; white-space: nowrap; }
@media (max-width: 720px) {
  .filtros-toolbar { flex-direction: column; align-items: stretch; }
  .filtros-exportar { margin-left: 0; }
}

/* Envoltura con scroll horizontal para pantallas angostas */
.tabla-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 14px;
}
.tabla-scroll .tabla { border: 0; border-radius: 0; min-width: 600px; }
.tabla thead tr { border-bottom: 2px solid var(--borde); }
.tabla th {
  text-align: left; padding: 10px 14px; white-space: nowrap;
  font-size: 10px; font-weight: 700; color: var(--texto-muy-suave);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.tabla td { padding: 13px 14px; border-bottom: 1px solid var(--fondo); vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr:hover td { background: #f9fbfa; }
.tabla a { color: var(--verde-medio); text-decoration: none; font-weight: 600; }
.tabla a:hover { text-decoration: underline; }

/* Celda de identidad con avatar */
.aliado-celda { display: flex; align-items: center; gap: 10px; }
.aliado-avatar-sm {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--dorado); color: var(--verde-oscuro);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.aliado-celda-nombre { font-size: 13px; font-weight: 600; color: var(--texto); }
.aliado-celda-sub { font-size: 11px; color: var(--texto-muy-suave); margin-top: 1px; }

/* Mini-barra de progreso en tabla */
.mini-bar-bg {
  display: inline-block; width: 100px; height: 6px;
  background: #f0f0f0; border-radius: 3px; overflow: hidden;
}
.mini-bar-fill { display: block; height: 6px; border-radius: 3px; }

/* Pills de estado */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px;
  text-transform: capitalize;
}
.pill-ok     { background: #DCFCE7; color: #166534; }
.pill-espera { background: #FEF9C3; color: #854d0e; }
.pill-off    { background: #F3F4F6; color: #6B7280; }
.pill-info   { background: #DBEAFE; color: #1e40af; }
.pill-ocre   { background: var(--ocre-claro); color: #7A4420; }
.pill-malo   { background: #FEE2E2; color: #991B1B; }

.tarjeta-aviso {
  background: var(--superficie); border: 1px solid var(--linea);
  border-left: 3px solid var(--ocre); border-radius: 8px;
  padding: 1rem 1.2rem; margin-bottom: 1.2rem; font-size: .9rem;
}

.tabla a { color: var(--verde-medio); text-decoration: none; font-weight: 600; }
.tabla a:hover { text-decoration: underline; }

/* Formulario de aliado */
.form-aliado fieldset {
  border: 1px solid var(--linea); border-radius: 10px;
  padding: 1.1rem 1.2rem 1.3rem; margin: 0 0 1.2rem;
  background: var(--superficie);
}
.form-aliado legend {
  font-size: .82rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--verde-medio); padding: 0 .4rem;
}
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1.1rem; }
@media (max-width: 620px) { .grid-2 { grid-template-columns: 1fr; } }
.field input:disabled { background: var(--fondo); color: var(--tinta-tenue); }

/* Detalle de aliado */
.bloques-detalle { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.1rem; margin-top: 1.2rem; }
.bloque-detalle {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: 10px; padding: 1.1rem 1.2rem;
}
.bloque-detalle h2, .contenido section > h2 {
  font-size: 1rem; color: var(--verde-oscuro); margin: 0 0 .7rem;
}
dl.datos { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; font-size: .88rem; }
dl.datos dt { color: var(--tinta-tenue); }
dl.datos dd { margin: 0; color: var(--tinta); }

/* ══════════════════════════════════════════════════════════════
   Portal del aliado — barra lateral + checklist
   ══════════════════════════════════════════════════════════════ */
.portal-layout { display: flex; min-height: 100vh; align-items: flex-start; }

/* Barra lateral — estructura del Portal de Actualización, identidad propia:
   fondo verde con un degradado sutil y acentos en ocre/dorado invertidos. */
.sidebar {
  width: 260px; flex-shrink: 0;
  background: linear-gradient(180deg, #123330 0%, #0d2220 42%, #0a1c1a 100%);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  padding: 0;
}
.sidebar-top { flex: 1; }
.sidebar-marca {
  display: flex; align-items: center; gap: 10px;
  padding: 24px 20px 20px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
/* Caja del logo: verde (invertido respecto al hermano) con aro dorado */
.sidebar-marca img {
  width: 38px; height: 38px; object-fit: contain; padding: 5px;
  background: linear-gradient(135deg, var(--verde-medio) 0%, #0f2c28 100%);
  border-radius: 9px; flex-shrink: 0;
  box-shadow: inset 0 0 0 1.5px rgba(250,197,105,0.45);
}
.sidebar-brand { font-size: 14px; font-weight: 700; color: var(--dorado); letter-spacing: 0.04em; }
.sidebar-brand-sub {
  font-size: 10px; color: rgba(250,197,105,0.55); margin-top: 2px;
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
}

.sidebar-user {
  margin: 16px 20px; padding: 14px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; display: flex; align-items: center; gap: 12px;
}
.sidebar-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--dorado); color: var(--verde-oscuro);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
}
.sidebar-uname { color: #fff; font-size: 13px; font-weight: 600; line-height: 1.3; }
.sidebar-urole { font-size: 10px; color: rgba(255,255,255,0.45); margin-top: 2px; }

.sidebar-nav { padding: 8px 12px; }
.sidebar-nav-label {
  font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.25); padding: 0 8px; margin: 12px 0 6px;
}
.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 10px 14px; border-radius: 10px; margin-bottom: 2px;
  color: rgba(255,255,255,0.55); text-decoration: none; font-size: 13px;
  transition: all 0.15s;
}
.nav-item:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85); }
.nav-item.activo { background: rgba(250,197,105,0.13); color: var(--dorado); font-weight: 600; }
/* Barra de acento a la izquierda del ítem activo — sello de Vinculación */
.nav-item.activo::before {
  content: ''; position: absolute; left: 3px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 3px;
  background: linear-gradient(var(--dorado), var(--ocre));
}
/* Insignia de conteo en un ítem del menú — p.ej. requerimientos sin resolver */
.nav-badge {
  margin-left: auto; background: #F59E0B; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  padding: 3px 7px; border-radius: 20px; flex-shrink: 0;
}
.nav-item.activo .nav-badge { background: var(--ocre); }
/* ── Bloque inferior de la barra: luz dorada + imagen viva + créditos ── */
.sidebar-footer {
  position: relative; margin-top: auto;
  padding: 14px 16px 16px;
}
/* Luz dorada que sube desde abajo — sello espectacular de Vinculación */
.sidebar-footer::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: -40px;
  height: 280px; pointer-events: none; z-index: 0;
  background: radial-gradient(75% 82% at 50% 100%,
              rgba(250,197,105,0.30) 0%,
              rgba(250,197,105,0.12) 38%,
              rgba(250,197,105,0.03) 60%,
              transparent 74%);
  filter: blur(4px);
}
.sidebar-footer > * { position: relative; z-index: 1; }

/* Imagen "viva" fundida dentro de la interfaz */
.sidebar-mina {
  margin: 0 0 12px; height: 172px; position: relative;
  border-radius: 14px; overflow: hidden;
  background: linear-gradient(160deg, var(--verde-medio) 0%, #0b201d 100%);
  box-shadow: inset 0 0 0 1px rgba(250,197,105,0.26);
}
.sidebar-mina img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 40%;
  opacity: 0.78; filter: saturate(0.95) contrast(1.04);
}
.sidebar-mina.sin-img img { display: none; }
.sidebar-mina::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top,
              rgba(9,26,24,0.9) 0%, rgba(9,26,24,0.28) 48%,
              rgba(18,51,48,0.04) 100%);
}
.sidebar-mina figcaption {
  position: absolute; left: 13px; right: 13px; bottom: 10px; z-index: 1;
  font-size: 9px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(250,197,105,0.92); text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

.nav-salir {
  background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.4);
  border-radius: 10px; font-weight: 500; font-size: 12px;
}
.nav-salir:hover { background: rgba(220,38,38,0.15); color: #fc8181; }

/* Derechos de autor */
.sidebar-copy {
  margin-top: 12px; font-size: 9px; line-height: 1.6;
  color: rgba(255,255,255,0.30); letter-spacing: 0.03em;
}
.sidebar-copy span { color: rgba(255,255,255,0.18); }

.portal-main { flex: 1; min-width: 0; background: var(--fondo); }

.portal-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 16px 32px; background: #fff; border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 10;
}
.portal-header::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 80px; height: 2px;
  background: linear-gradient(90deg, var(--dorado) 0%, rgba(250,197,105,0) 100%);
}
.portal-title { font-size: 1.15rem; font-weight: 700; color: var(--verde-oscuro); }
.portal-sub { display: flex; gap: .5rem; margin-top: .3rem; }
.chip-tipo, .chip-estado {
  font-size: .7rem; font-weight: 600; padding: .12rem .55rem; border-radius: 999px; text-transform: capitalize;
}
.chip-tipo { background: var(--verde-medio); color: #fff; }
.chip-estado { background: var(--ocre-claro); color: #7a4420; }

.progress-pill { display: flex; align-items: center; gap: .6rem; }
.progress-pill-pct { font-weight: 700; color: var(--ocre); font-size: 1.05rem; }
.progress-pill-bar { width: 90px; height: 7px; border-radius: 999px; background: var(--linea); overflow: hidden; }
.progress-pill-bar > div { height: 100%; background: var(--ocre); }
.progress-pill-label { font-size: .72rem; color: var(--tinta-tenue); }

.portal-content { padding: 28px 32px 4rem; }

.card {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-lg);
  padding: 22px 24px; margin-bottom: 20px;
  box-shadow: 0 1px 4px rgba(16,40,36,0.04);
}
.card-malo { border-color: #FCA5A5; background: #FEF2F2; }
.card-malo .card-eyebrow { color: #991B1B; }
.card-title {
  font-size: 12px; font-weight: 600; color: var(--verde-medio);
  letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 14px;
}
.card-sub { font-size: 12px; color: var(--texto-muy-suave); margin-bottom: 10px; }
.card-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--verde-medio); margin-bottom: 14px;
}

.avance-card .avance-top { display: flex; justify-content: space-between; align-items: flex-start; }
.avance-total { font-size: 1.9rem; font-weight: 700; color: var(--ocre); line-height: 1; }
.barras { display: grid; gap: .9rem; margin-top: 1rem; }
.barra-label { display: flex; justify-content: space-between; font-size: .82rem; font-weight: 600; color: var(--tinta-suave); margin-bottom: .3rem; }
.barra-bg { height: 9px; border-radius: 999px; background: var(--fondo); border: 1px solid var(--linea); overflow: hidden; }
.barra-fill { height: 100%; background: linear-gradient(90deg, var(--verde-medio), var(--ocre)); transition: width .4s ease; }
.barra-nota { font-size: .74rem; color: var(--tinta-tenue); margin-top: .25rem; }

.pending-strip {
  display: flex; gap: .7rem; align-items: flex-start;
  background: #FBF3E6; border: 1px solid #EAD7B8; border-radius: 10px;
  padding: .8rem 1rem; margin-bottom: 1.1rem; font-size: .86rem;
}
.pending-strip-label { font-weight: 700; color: #7a4420; }
.pending-strip-list { color: #8a6a45; }
.pending-strip-ic { color: var(--ocre); display: inline-flex; flex: none; margin-top: .05rem; }
.pending-strip-ic .ic { width: 20px; height: 20px; }

.forms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .7rem; margin-top: .6rem; }
.form-dl { border: 1px solid var(--linea); border-radius: 9px; padding: .7rem .8rem; display: flex; flex-direction: column; gap: .5rem; }
.form-dl-name { font-size: .8rem; color: var(--tinta-suave); line-height: 1.35; }
.form-dl-btn {
  align-self: flex-start; background: var(--verde-oscuro); color: var(--dorado);
  font-size: .76rem; font-weight: 700; text-decoration: none; padding: .35rem .8rem; border-radius: 7px;
}

.alerta-atencion {
  display: flex; gap: .8rem; align-items: flex-start;
  background: #FFFBEB; border: 1px solid #F1D592; border-left: 4px solid var(--ocre);
  border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: 1.1rem;
  transition: box-shadow var(--transicion), transform var(--transicion);
}
a.alerta-atencion:hover { box-shadow: var(--sombra-sm); transform: translateY(-1px); }
.alerta-icon { font-size: 1.1rem; color: var(--ocre); display: inline-flex; flex: none; margin-top: .05rem; }
.alerta-icon .ic { width: 22px; height: 22px; }
.form-dl-name .ic { width: 15px; height: 15px; color: var(--verde-medio); vertical-align: -2px; margin-right: 3px; }
.alerta-titulo { font-weight: 700; color: #92400e; font-size: .9rem; }
.alerta-desc { font-size: .82rem; color: #8a6a45; margin-top: .15rem; }
.alerta-desc a { color: #92400e; font-weight: 700; text-decoration: underline; }
.alerta-desc a:hover { color: #6b3410; }

/* Ítems del checklist */
.checklist-resumen { font-size: .8rem; color: var(--tinta-tenue); margin: 0 0 .8rem; }

.doc-item {
  border: 1px solid var(--linea); border-left: 4px solid var(--linea-strong);
  border-radius: var(--radio-md); padding: 1rem 1.1rem; margin-top: .75rem;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.doc-item:first-of-type { margin-top: .6rem; }
.doc-item:hover { box-shadow: var(--sombra-sm); }
.doc-aprobado { border-left-color: var(--verde-exito); }
.doc-entregado { border-left-color: var(--verde-medio); }
.doc-requiere_revision { border-left-color: #F59E0B; background: #FFFDF6; }
.doc-no_aplica { border-left-color: var(--tinta-tenue); opacity: .82; }
.doc-pendiente { border-left-color: var(--dorado); }

.doc-head { display: flex; justify-content: space-between; gap: .9rem; align-items: flex-start; }
.doc-name { min-width: 0; }
.doc-cod {
  display: inline-block; font-family: ui-monospace, "Consolas", monospace; font-size: .7rem;
  font-weight: 700; color: var(--verde-medio); background: var(--verde-claro);
  padding: .1rem .4rem; border-radius: 5px; margin-right: .45rem; vertical-align: 1px;
}
.doc-desc { font-size: .9rem; color: var(--tinta); font-weight: 600; line-height: 1.45; }
.doc-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.doc-tag {
  font-size: .68rem; font-weight: 600; color: var(--tinta-tenue);
  background: var(--fondo); border: 1px solid var(--linea); border-radius: 5px; padding: .1rem .4rem;
}
.doc-tag-vig { color: #92400e; background: #FEF9C3; border-color: #f3e2a0; }

.badge {
  font-size: .68rem; font-weight: 700; padding: .22rem .6rem; border-radius: 999px;
  white-space: nowrap; align-self: flex-start;
}
.badge-aprobado { background: var(--ok-bg); color: var(--ok); }
.badge-entregado { background: var(--verde-claro); color: var(--verde-medio); }
.badge-requiere_revision { background: #FFF3CD; color: #92400E; border: 1px solid #F59E0B; }
.badge-no_aplica { background: var(--info-bg); color: var(--info); }
.badge-pendiente { background: var(--espera-bg); color: var(--espera); }

.doc-obs { font-size: .82rem; color: var(--tinta-suave); background: var(--fondo); border-radius: 7px; padding: .5rem .7rem; margin-top: .6rem; }
.doc-obs strong { color: var(--tinta); }
.doc-obs-admin { font-size: .84rem; color: #7a4420; background: #FFF6E5; border: 1px solid #F1D592; border-radius: 7px; padding: .55rem .75rem; margin-top: .6rem; }

.doc-archivos { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .35rem; }
.doc-archivos li { display: flex; align-items: center; gap: .5rem; font-size: .82rem; }
.doc-archivo-ic { opacity: .6; }
.doc-archivos a { color: var(--verde-medio); font-weight: 500; word-break: break-all; }
.doc-archivos form { display: inline; }
.link-quitar { background: none; border: 0; color: var(--ocre); font-size: .74rem; cursor: pointer; text-decoration: underline; padding: 0; }

.upload-form { margin-top: .8rem; }
.upload-drop {
  display: block; border: 2px dashed #b0c4be; border-radius: var(--radio-md);
  padding: 1.1rem; text-align: center; cursor: pointer; background: #f8faf9;
  transition: all .2s;
}
.upload-drop:hover { border-color: var(--verde-medio); background: var(--verde-claro); }
.upload-drop.dragover { border-color: var(--dorado); background: #FFFBEB; }
.upload-drop.con-archivo { border-color: var(--verde-medio); background: #EAF2EF; }
.upload-drop input[type=file] { display: none; }
.upload-drop-ic { display: block; font-size: 1.1rem; color: var(--verde-medio); margin-bottom: .2rem; }
.upload-drop-text { display: block; font-size: .84rem; color: var(--tinta-suave); font-weight: 600; }
.upload-drop-sub { display: block; font-size: .72rem; color: var(--tinta-tenue); margin-top: .2rem; }
.upload-aviso {
  margin-top: .5rem; padding: .5rem .7rem; font-size: .78rem;
  background: #FEF9C3; border: 1px solid #f3e2a0; color: #854d0e; border-radius: 7px;
}
.upload-form-row { display: flex; gap: .5rem; margin-top: .6rem; }
.upload-form-row input[type=text] { flex: 1; padding: .55rem .7rem; border: 1px solid var(--linea); border-radius: 7px; font-family: inherit; font-size: .84rem; }
.upload-form-row input[type=text]:focus { outline: 2px solid var(--verde-medio); outline-offset: 1px; border-color: var(--verde-medio); }
.btn-sm { width: auto; padding: .5rem 1.1rem; font-size: .8rem; }

.no-aplica { margin-top: .6rem; }
.no-aplica summary { font-size: .78rem; color: var(--tinta-tenue); cursor: pointer; }
.no-aplica textarea { width: 100%; margin: .4rem 0; padding: .5rem .6rem; border: 1px solid var(--linea); border-radius: 7px; font-family: inherit; font-size: .84rem; }

.flash {
  position: fixed; bottom: 22px; right: 22px; z-index: 300; max-width: 360px;
  display: flex; gap: .5rem; align-items: flex-start;
  padding: .8rem 1rem; border-radius: 9px; font-size: .86rem;
  box-shadow: 0 10px 30px rgba(16,40,36,.18); transition: opacity .5s ease;
}
.flash-ok { background: #E7F1EA; color: #2C6B44; border: 1px solid #BFDDC8; }
.flash-error { background: #FBEBE7; color: #8A3B24; border: 1px solid #E7C3B7; }

/* ══════════════════════════════════════════════════════════════
   Panel interno — dashboard y revisión
   ══════════════════════════════════════════════════════════════ */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .9rem; margin-bottom: 1.2rem; }
.stat { background: var(--superficie); border: 1px solid var(--linea); border-radius: 10px; padding: 1rem 1.1rem; box-shadow: var(--sombra); }
.stat-num { font-size: 1.9rem; font-weight: 700; color: var(--verde-oscuro); line-height: 1; }
.stat-label { font-size: .8rem; color: var(--tinta-tenue); margin-top: .3rem; }

.card-titulo-fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
/* La lista de "Avance por aliado" se centra dentro de la tarjeta en vez de
   quedar pegada a la izquierda — así la tarjeta se ve llena en cualquier
   ancho de pantalla, sin que las barras tengan que estirarse para lograrlo. */
.promedio { font-size: .84rem; color: var(--tinta-suave); }

/* La dona va en su propia fila compacta — no comparte espacio con la lista,
   así su altura corta no deja hueco cuando la lista crece con más aliados. */
.dona-fila { margin-bottom: 1.1rem; }
.dona-card-compacta { max-width: 420px; }

/* "Avance por aliado" ocupa todo el ancho de la página por su cuenta.
   Solo la barra de cada frente (1fr) crece con la pantalla — el anillo,
   el nombre y el porcentaje se quedan en un tamaño fijo y legible. */
.avance-fila {
  display: grid; grid-template-columns: 64px minmax(180px, 320px) 1fr 58px;
  align-items: center; gap: 1.3rem;
  padding: .7rem .6rem; border-top: 1px solid var(--linea); text-decoration: none; color: inherit;
  border-radius: var(--radio-sm);
}
.avance-fila:first-of-type { border-top: 0; }
.avance-fila:hover { background: #f9fbfa; }
.avance-fila-nombre { font-size: .88rem; font-weight: 600; color: var(--verde-oscuro); min-width: 0; }
.avance-fila-meta { display: block; font-weight: 400; font-size: .76rem; color: var(--tinta-tenue); text-transform: capitalize; }
.avance-fila-pct { font-size: 1rem; font-weight: 700; color: var(--verde-oscuro); text-align: right; font-variant-numeric: tabular-nums; }

/* Mini-barras de los 3 frentes, ahora con nombre y porcentaje visibles
   (antes solo se veían en el tooltip al pasar el mouse). */
.avance-fila-frentes { display: grid; gap: .45rem; min-width: 0; }
.mini-frente { display: grid; grid-template-columns: 7px 1fr auto; align-items: center; gap: .4rem; }
.mini-frente-dot { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.mini-frente-nom {
  font-size: .68rem; color: var(--tinta-tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mini-frente-pct { font-size: .68rem; font-weight: 700; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.mini-frente-track {
  grid-column: 2 / -1; height: 6px; border-radius: 3px; background: var(--linea); overflow: hidden; margin-top: 2px;
}
.mini-frente-track > span { display: block; height: 100%; border-radius: 3px; transition: width .7s cubic-bezier(.4,0,.2,1); }

/* Anillo mini, tamaño legible sin ser exagerado */
/* svg.anillo.anillo-mini (dos clases) para que SIEMPRE le gane a la regla
   base .anillo (148px), sin depender del orden en el archivo — el elemento
   trae ambas clases a la vez y con una sola clase el orden decide, que es
   justo lo que llevaba rompiendo este tamaño varias veces sin verse en las
   capturas (la tarjeta recorta el resto, por eso no saltaba a la vista). */
.anillo.anillo-mini { width: 58px; height: 58px; flex: none; }
.anillo-mini .anillo-num { font-size: 17px; }
.anillo-mini .anillo-cap { display: none; }

@media (max-width: 720px) {
  .avance-fila { grid-template-columns: 48px 1fr 46px; }
  .avance-fila-frentes { display: none; }
}

/* Mini-avance en el detalle */
.avance-mini { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 1rem 0 .4rem; font-size: .78rem; }
.avance-mini > div { display: flex; align-items: center; gap: .5rem; color: var(--tinta-suave); }
.mini-bg { width: 90px; height: 7px; border-radius: 999px; background: var(--fondo); border: 1px solid var(--linea); overflow: hidden; }
.mini-bg > div { height: 100%; background: linear-gradient(90deg, var(--verde-medio), var(--ocre)); }
.avance-mini-total { font-weight: 700; color: var(--verde-oscuro); }

.fila-bloqueada { opacity: .5; }

/* Ítems de revisión */
.rev-head { display: flex; justify-content: space-between; gap: .8rem; align-items: flex-start; }
.rev-name { font-size: .88rem; font-weight: 600; color: var(--tinta); line-height: 1.4; }
.sin-archivos { font-size: .8rem; color: var(--tinta-tenue); margin: .5rem 0 0; }

.rev-acciones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; margin-top: .7rem; }
.rev-acciones form { display: inline; }
.btn-rev {
  border: 1px solid var(--linea); background: var(--superficie); color: var(--tinta-suave);
  font-size: .78rem; font-weight: 600; padding: .35rem .8rem; border-radius: 7px; cursor: pointer;
}
.btn-rev:hover { border-color: var(--verde-medio); color: var(--verde-oscuro); }
/* Mismos colores de estado que badges y tarjetas de revisión — no colores sueltos */
.btn-rev-ok { background: var(--verde-exito); color: #fff; border-color: var(--verde-exito); }
.btn-rev-ok:hover { background: #16a34a; border-color: #16a34a; color: #fff; }
.btn-rev-warn { background: #F59E0B; color: #fff; border-color: #F59E0B; }
.btn-rev-warn:hover { background: #d97706; border-color: #d97706; color: #fff; }
.btn-rev-na { background: var(--info-bg); color: var(--info); border-color: transparent; }
.btn-rev-na:hover { background: #c7ddfb; border-color: transparent; color: var(--info); }
.rev-desplegable summary { font-size: .78rem; color: var(--tinta-tenue); cursor: pointer; padding: .35rem 0; }
.rev-desplegable textarea {
  width: 100%; max-width: 420px; display: block; margin: .3rem 0; padding: .5rem .6rem;
  border: 1px solid var(--linea); border-radius: 7px; font-family: inherit; font-size: .84rem;
}

/* Mini editor de texto — descripción de requerimientos. Negrilla, cursiva,
   subrayado y listas; lo que se pegue desde Word se limpia a ese mismo
   formato básico (ver _sanitizar_html_editor en main.py). */
.editor-rico {
  border: 1px solid var(--linea); border-radius: 8px; background: var(--blanco);
  margin: .3rem 0; overflow: hidden; transition: border-color var(--transicion);
}
.editor-rico:focus-within { border-color: var(--verde-medio); box-shadow: 0 0 0 2px rgba(49,92,85,.12); }
.editor-toolbar {
  display: flex; align-items: center; gap: .15rem; padding: .35rem .4rem;
  background: var(--fondo); border-bottom: 1px solid var(--linea);
}
.editor-toolbar button {
  width: 28px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 5px; color: var(--tinta-suave);
  font-size: .8rem; font-family: inherit; cursor: pointer;
}
.editor-toolbar button:hover { background: var(--verde-claro); color: var(--verde-medio); }
.editor-toolbar button[data-cmd="bold"] { font-weight: 700; }
.editor-toolbar button[data-cmd="italic"] { font-style: italic; }
.editor-toolbar button[data-cmd="underline"] { text-decoration: underline; }
.editor-toolbar button[data-cmd="removeFormat"] { width: auto; padding: 0 .55rem; font-size: .72rem; }
.editor-sep { width: 1px; height: 18px; background: var(--linea-strong); margin: 0 .3rem; }
.editor-area {
  min-height: 160px; max-height: 420px; overflow-y: auto; padding: .7rem .8rem;
  font-family: inherit; font-size: .88rem; line-height: 1.6; color: var(--tinta);
}
.editor-area:focus { outline: none; }
.editor-area p { margin: 0 0 .7em; }
.editor-area p:last-child { margin-bottom: 0; }
.editor-area ul, .editor-area ol { margin: 0 0 .7em; padding-left: 1.3rem; }
.editor-area:empty::before { content: attr(data-placeholder); color: var(--tinta-tenue); }
.editor-area.editor-area-error { outline: 2px solid var(--malo); outline-offset: -2px; }
.editor-rico textarea { display: none !important; }

/* Requerimientos (portal del aliado y panel interno — mismo componente).
   La TARJETA completa se limita a un ancho generoso pero fijo — así, en
   pantallas anchas, ya no queda un vacío enorme a un lado del texto, y la
   tarjeta se ve proporcionada de principio a fin (fondo, borde y contenido
   terminan juntos, no el contenido antes que la tarjeta). */
.req-item {
  border: 1px solid var(--linea); border-left: 4px solid var(--ocre);
  border-radius: 10px; padding: 1.1rem 1.3rem; margin-top: .7rem;
  max-width: 1240px;
}
.req-cerrado { border-left-color: var(--verde-exito); opacity: .9; }
.req-respondido { border-left-color: var(--verde-medio); }
.req-head { display: flex; justify-content: space-between; gap: .8rem; align-items: flex-start; }
.req-titulo { font-size: .9rem; font-weight: 700; color: var(--tinta); }
.req-desc { font-size: .84rem; color: var(--tinta-suave); margin: .4rem 0 .2rem; }

/* Cuerpo en dos columnas: contenido (ancho de lectura cómodo) + ficha de datos. */
.req-timeline { display: flex; align-items: flex-start; margin: .7rem 0 .3rem; }
.req-tl-paso { display: flex; flex-direction: column; align-items: center; gap: .35rem; flex: none; width: 92px; text-align: center; }
.req-tl-dot {
  width: 12px; height: 12px; border-radius: 50%; background: var(--superficie);
  border: 2px solid var(--linea-strong); transition: background var(--transicion), border-color var(--transicion);
}
.req-tl-paso.req-tl-listo .req-tl-dot { background: var(--verde-exito); border-color: var(--verde-exito); }
.req-tl-linea { flex: 1; height: 2px; background: var(--linea); margin-top: 7px; min-width: 16px; transition: background var(--transicion); }
.req-tl-linea.req-tl-listo { background: var(--verde-exito); }
.req-tl-label { font-size: .68rem; font-weight: 700; color: var(--tinta-tenue); }
.req-tl-paso.req-tl-listo .req-tl-label { color: var(--verde-oscuro); }
.req-tl-fecha { display: block; font-weight: 400; font-size: .66rem; color: var(--tinta-tenue); margin-top: .15rem; }
@media (max-width: 480px) { .req-tl-paso { width: 72px; } .req-tl-label { font-size: .62rem; } }

.req-grid { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 1.6rem; align-items: start; margin-top: .6rem; }
.req-main { min-width: 0; }
.req-main .req-desc, .req-main .doc-obs { line-height: 1.7; }
.req-main .req-desc p, .req-main .doc-obs p { margin: 0 0 .8em; }
.req-main .req-desc p:last-child, .req-main .doc-obs p:last-child { margin-bottom: 0; }
.req-main .req-desc ul, .req-main .doc-obs ul,
.req-main .req-desc ol, .req-main .doc-obs ol { margin: 0 0 .8em; padding-left: 1.3rem; }
.req-main .req-desc li, .req-main .doc-obs li { margin-bottom: .25em; }
.req-main .req-desc ul:last-child, .req-main .doc-obs ul:last-child,
.req-main .req-desc ol:last-child, .req-main .doc-obs ol:last-child { margin-bottom: 0; }
.req-side {
  background: var(--fondo); border: 1px solid var(--linea); border-radius: 10px;
  padding: 1rem 1.1rem; display: grid; gap: .8rem; align-content: start;
}
.req-side-item dt {
  font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--tinta-tenue); margin: 0;
}
.req-side-item dd { font-size: .84rem; font-weight: 600; color: var(--tinta); margin: .2rem 0 0; }
@media (max-width: 760px) {
  .req-grid { grid-template-columns: 1fr; }
  .req-side { order: -1; grid-template-columns: repeat(2, 1fr); }
}

/* Cuestionario de debida diligencia */
.dd-pregunta { padding: .7rem 0; border-top: 1px solid var(--linea); }
.dd-pregunta:first-of-type { border-top: 0; }
.dd-pregunta > label { display: block; font-size: .88rem; font-weight: 600; color: var(--tinta); margin-bottom: .35rem; }
.dd-oblig { color: var(--ocre); }
.dd-ayuda { display: block; font-size: .76rem; color: var(--tinta-tenue); margin-bottom: .35rem; }
.dd-pregunta input[type=text], .dd-pregunta input[type=number], .dd-pregunta input[type=date],
.dd-pregunta textarea, .dd-pregunta select {
  width: 100%; max-width: 560px; padding: .5rem .6rem; border: 1px solid var(--linea);
  border-radius: 7px; font-family: inherit; font-size: .88rem; color: var(--tinta); background: var(--superficie);
}
.dd-pregunta input:focus, .dd-pregunta textarea:focus, .dd-pregunta select:focus {
  outline: 2px solid var(--ocre); outline-offset: 1px; border-color: var(--ocre);
}
.dd-moneda { display: flex; align-items: center; gap: .4rem; max-width: 300px; }
.dd-moneda span { font-size: .8rem; color: var(--tinta-tenue); }
.dd-moneda input { flex: 1; }
.dd-radios { display: flex; gap: 1.2rem; font-size: .88rem; }
.dd-radios label { display: flex; gap: .35rem; align-items: center; font-weight: 400; }
.dd-guardar {
  position: sticky; bottom: 0; background: linear-gradient(transparent, var(--fondo) 40%);
  padding: 1rem 0 .4rem; display: flex; justify-content: flex-end;
}
.dd-lectura { display: grid; grid-template-columns: 1fr; gap: .1rem; margin: .4rem 0 0; }
.dd-lectura dt { font-size: .82rem; color: var(--tinta-tenue); margin-top: .6rem; }
.dd-lectura dd { margin: 0; font-size: .9rem; color: var(--tinta); }

/* Personas relacionadas — faltas de completitud y documento de identidad */
.dd-faltas {
  list-style: none; margin: .8rem 0 0; padding: .7rem .9rem;
  background: var(--ocre-claro); border: 1px solid #E0C7B2; border-radius: 9px;
  font-size: .82rem; color: #7A4420; display: grid; gap: .25rem;
}
.dd-faltas li::before { content: "• "; color: var(--ocre); }
.dd-falta-badge {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  color: #8A3B24; background: #FBEBE7; border: 1px solid #E7C3B7;
  padding: .08rem .4rem; border-radius: 999px;
}
.doc-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.doc-chip {
  display: inline-flex; align-items: center; gap: .25rem; max-width: 190px;
  background: var(--verde-claro); border: 1px solid var(--linea); border-radius: 7px;
  padding: .12rem .1rem .12rem .45rem; font-size: .74rem;
}
.doc-chip a { color: var(--verde-medio); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-chip-x {
  border: 0; background: none; color: var(--tinta-tenue); cursor: pointer;
  font-size: .95rem; line-height: 1; padding: 0 .25rem;
}
.doc-chip-x:hover { color: #8A3B24; }
.doc-adjuntar { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; margin-top: .35rem; }
.doc-adjuntar input[type="file"] { font-size: .72rem; max-width: 160px; }

/* ══════════════════════════════════════════════════════════════
   Sistema de diseño — pulido transversal (v20260903)
   ══════════════════════════════════════════════════════════════ */
.card { box-shadow: var(--sombra-sm); border-radius: var(--radio-md); transition: box-shadow var(--transicion); }
.badge, .pill { transition: background-color var(--transicion), color var(--transicion); letter-spacing: .01em; }
.barra-fill, .mini-bg > div, .progress-pill-bar > div, .avance-fila-barra > div, .mini-bar-fill {
  transition: width .7s cubic-bezier(.4, 0, .2, 1);
}
.stat { transition: transform var(--transicion), box-shadow var(--transicion); }
.stat:hover { transform: translateY(-2px); box-shadow: var(--sombra-md); }
.btn, .btn-rev, .form-dl-btn, .nav-item, .link-quitar { transition: all var(--transicion); }
.btn-primary:hover { box-shadow: 0 6px 18px rgba(16,40,36,.22); transform: translateY(-1px); }

/* Encabezados de sección en mayúsculas pequeñas (patrón COOPORIGEN) */
.card-eyebrow {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--verde-medio); margin-bottom: .5rem;
}

/* ── Anillo segmentado: los tres frentes en paralelo ── */
.anillo-wrap { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.anillo { width: 148px; height: 148px; flex: none; }
.anillo-seg { transition: stroke-dasharray .9s cubic-bezier(.4, 0, .2, 1); }
.anillo-num { font-size: 30px; font-weight: 700; fill: var(--verde-oscuro);
  font-family: "Inter", sans-serif; }
.anillo-cap { font-size: 9.5px; font-weight: 600; fill: var(--tinta-tenue);
  text-transform: uppercase; letter-spacing: .12em; font-family: "Inter", sans-serif; }

.frentes-legend { display: grid; gap: .7rem; flex: 1; min-width: 220px; }
.frente {
  display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: .7rem;
}
.frente-dot { width: 10px; height: 10px; border-radius: 3px; }
.frente-nom { font-size: .82rem; font-weight: 600; color: var(--tinta-suave); }
.frente-sub { display: block; font-weight: 400; font-size: .72rem; color: var(--tinta-tenue); }
.frente-pct { font-size: .95rem; font-weight: 700; color: var(--verde-oscuro);
  font-variant-numeric: tabular-nums; }
.frente-track { grid-column: 2 / -1; height: 6px; border-radius: 3px; background: var(--linea); overflow: hidden; margin-top: -.3rem; }
.frente-track > div { height: 100%; border-radius: 3px; transition: width .7s cubic-bezier(.4,0,.2,1); }

.avance-pie { font-size: .78rem; color: var(--tinta-tenue); margin: 1rem 0 0; }
.avance-pie a { color: var(--verde-medio); font-weight: 600; }

/* ── Detalle del aliado: cabecera + pestañas animadas ── */
.aliado-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; }
.aliado-cabecera .anillo { width: 96px; height: 96px; }
.aliado-cabecera .anillo-num { font-size: 22px; }

.tabs {
  position: relative; display: flex; gap: .2rem; flex-wrap: wrap;
  border-bottom: 2px solid var(--linea); margin: 1.4rem 0 1.2rem;
}
.tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: .6rem .9rem; font-family: inherit; font-size: .86rem; font-weight: 600;
  color: var(--tinta-tenue); border-radius: 8px 8px 0 0;
  transition: color var(--transicion), background var(--transicion);
}
.tab:hover { color: var(--verde-oscuro); background: #f3f7f5; }
.tab.activo { color: var(--verde-oscuro); }
.tab-badge {
  display: inline-block; margin-left: .35rem; font-size: .68rem; font-weight: 700;
  background: var(--linea); color: var(--tinta-suave); padding: .05rem .38rem; border-radius: 999px;
}
.tab-badge-ok { background: var(--ok-bg); color: var(--ok); }
.tab-badge-alerta { background: var(--ocre-claro); color: var(--ocre); }
.tab-indicator {
  position: absolute; bottom: -2px; left: 0; width: 0; height: 3px;
  background: var(--ocre); border-radius: 3px 3px 0 0;
  transition: left .32s cubic-bezier(.4,0,.2,1), width .32s cubic-bezier(.4,0,.2,1);
}
.tab-panel { animation: tab-in .35s ease; }
@keyframes tab-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Cuadro de gestión de revisión ── */
.rev-item {
  border: 1px solid var(--linea); border-left: 4px solid var(--linea-strong);
  border-radius: var(--radio-md); padding: 1rem 1.1rem; margin-top: .8rem;
  transition: box-shadow var(--transicion);
}
.rev-item:hover { box-shadow: var(--sombra-sm); }
/* Color por estado — mismos criterios que ve el aliado en su checklist,
   para que ambas vistas se lean igual. */
.rev-aprobado { border-left-color: var(--verde-exito); }
.rev-entregado { border-left-color: var(--verde-medio); background: #FAFDFB; }
.rev-requiere_revision { border-left-color: #F59E0B; background: #FFFDF6; }
.rev-no_aplica { border-left-color: var(--tinta-tenue); opacity: .9; }
.rev-pendiente { border-left-color: var(--dorado); }
.rev-name { min-width: 0; }
.rev-name .doc-desc { font-size: .9rem; font-weight: 600; }

.gestion-box {
  margin-top: .9rem; padding: .85rem .9rem; background: #f7faf9;
  border: 1px solid var(--linea); border-radius: var(--radio-sm);
}
.gestion-box > label {
  display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--verde-medio); margin-bottom: .35rem;
}
.gestion-box textarea {
  width: 100%; padding: .55rem .7rem; border: 1px solid var(--linea); border-radius: 7px;
  font-family: inherit; font-size: .86rem; resize: vertical; background: var(--superficie);
}
.gestion-box textarea:focus { outline: 2px solid var(--verde-medio); outline-offset: 1px; border-color: var(--verde-medio); }
.gestion-acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.gestion-acciones .btn-rev { font-size: .8rem; padding: .45rem .95rem; }

/* ── Lista de etapas del proceso interno ── */
.etapas-lista { display: grid; gap: .5rem; }
.etapa-fila {
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: .9rem;
  padding: .8rem 1rem; background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio-md); text-decoration: none; color: inherit;
  transition: box-shadow var(--transicion), border-color var(--transicion);
}
.etapa-fila:hover { box-shadow: var(--sombra-sm); border-color: var(--linea-strong); }
.etapa-fila-inerte { cursor: default; }
.etapa-fila-inerte:hover { box-shadow: none; border-color: var(--linea); }
.etapa-num {
  width: 28px; height: 28px; border-radius: 50%; background: var(--verde-claro); color: var(--verde-medio);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem;
}
.etapa-nom { font-size: .9rem; font-weight: 600; color: var(--verde-oscuro); }
.etapa-resp { display: block; font-weight: 400; font-size: .74rem; color: var(--tinta-tenue); text-transform: capitalize; }
.fila-bloqueada { opacity: .55; }

#flash-msg { transition: opacity .6s ease; }

/* ══════════════════════════════════════════════════════════════
   Panel interno con barra lateral — estructura guiada por el
   Portal de Actualización, con acento propio en ocre (v20260903e)
   ══════════════════════════════════════════════════════════════ */

/* Barra superior blanca fija (equivalente a .admin-topbar del hermano) */
.panel-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 16px 32px; background: var(--blanco);
  border-bottom: 1px solid var(--borde);
  box-shadow: 0 2px 12px rgba(16,40,36,0.06);
}
.panel-topbar::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 80px; height: 2px;
  background: linear-gradient(90deg, var(--ocre) 0%, rgba(176,96,44,0) 100%);
}
.panel-topbar-title { font-size: 21px; font-weight: 700; color: var(--texto); letter-spacing: -0.02em; }
.panel-topbar-sub {
  font-size: 12px; color: var(--texto-muy-suave); margin-top: 3px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.panel-topbar-sub:empty { display: none; }
.panel-topbar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.panel-topbar-actions:empty { display: none; }

/* Promedio general — pill visual con barra, en vez de texto plano */
.topbar-avg {
  display: flex; align-items: center; gap: 9px; flex-shrink: 0;
  background: var(--fondo); border: 1px solid var(--borde);
  padding: 7px 8px 7px 14px; border-radius: 999px;
}
.topbar-avg-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--texto-muy-suave);
}
.topbar-avg-bar {
  width: 64px; height: 6px; border-radius: 999px; background: var(--borde); overflow: hidden;
}
.topbar-avg-bar > div {
  height: 100%; border-radius: 999px; background: var(--ocre);
  transition: width .7s cubic-bezier(.4,0,.2,1), background-color var(--transicion);
}
.topbar-avg-pct {
  font-size: 13px; font-weight: 700; color: var(--ocre);
  font-variant-numeric: tabular-nums; background: #fff;
  padding: 3px 9px; border-radius: 999px; box-shadow: 0 1px 3px rgba(16,40,36,0.08);
  transition: color var(--transicion);
}
@media (max-width: 640px) { .topbar-avg-label { display: none; } }

.panel-content { padding: 28px 32px 4rem; }
.panel-content > h1 {
  font-size: 18px; font-weight: 700; color: var(--texto); letter-spacing: -0.02em; margin: 0 0 4px;
}
.panel-content .sub { color: var(--texto-muy-suave); font-size: 12px; margin: 6px 0 24px; }

/* Franja de indicadores ejecutivos (anatomía de .admin-kpi) */
.kpi-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-bottom: 24px;
}
.kpi-row-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1180px) { .kpi-row-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .kpi-row-6 { grid-template-columns: repeat(2, 1fr); } }
.kpi {
  position: relative; overflow: hidden;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: 14px;
  padding: 20px 20px 16px; display: flex; flex-direction: column; gap: 2px;
  transition: box-shadow var(--transicion), transform var(--transicion);
}
.kpi::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 4px; height: 100%; border-radius: 14px 0 0 14px;
  background: var(--borde); transition: background var(--transicion);
}
.kpi:hover { box-shadow: 0 6px 24px rgba(16,40,36,0.10); transform: translateY(-2px); }
.kpi:hover::before { background: var(--ocre); }
.kpi-icon {
  width: 40px; height: 40px; border-radius: 11px; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: center;
}
.kpi-icon .ic { width: 20px; height: 20px; }
.kpi-icon.verde  { background: var(--verde-claro); color: var(--verde-medio); }
.kpi-icon.dorado { background: #FEF9C3; color: #854d0e; }
.kpi-icon.verde2 { background: #DCFCE7; color: #166534; }
.kpi-icon.rojo   { background: #FEE2E2; color: #991B1B; }
.kpi-icon.azul   { background: #DBEAFE; color: #1e40af; }
.kpi-icon.ocre   { background: var(--ocre-claro); color: var(--ocre); }
.kpi-num { font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
/* Valores que son texto (Completa, Por agendar…) no van al tamaño de un número */
.kpi-row-6 .kpi-num { font-size: 26px; }
.kpi-num.kpi-num-txt { font-size: 16px; font-weight: 700; line-height: 1.2; letter-spacing: 0; padding-top: 4px; }
.kpi-label { font-size: 13px; font-weight: 600; color: var(--texto); margin-top: 5px; }
.kpi-sub { font-size: 11px; color: var(--texto-muy-suave); }
.kpi .anillo-mini { margin-bottom: 6px; }

/* Rejilla de dos columnas: dona + avance por aliado */
/* La dona y la lista crecen con la pantalla en vez de topar y dejar el resto
   como margen — el espacio se usa (barras y dona más grandes), no se limita. */
.panel-grid {
  display: grid; grid-template-columns: minmax(280px, 360px) minmax(500px, 1fr); gap: 1.1rem;
  align-items: start;
}
@media (max-width: 900px) { .panel-grid { grid-template-columns: 1fr; } }

/* Par de tarjetas de igual altura (Mi avance): la de la derecha se estira
   para emparejar a la de la izquierda y su contenido queda centrado, sin
   dejar ese hueco vacío debajo. */
.panel-grid-par { align-items: stretch; }
.panel-grid-par > .card { display: flex; flex-direction: column; }
.card-centrado > .dona-wrap,
.card-centrado > p { margin-block: auto; }
@media (max-width: 900px) {
  .panel-grid-par > .card { display: block; }
  .card-centrado > .dona-wrap, .card-centrado > p { margin-block: 0; }
}

.dona-wrap { display: flex; flex-direction: column; align-items: center; gap: 1rem; }

/* Contenedor del anillo — sombra de profundidad + destello cinematográfico al cargar */
.dona-canvas-holder { position: relative; width: 220px; max-width: 100%; }
.dona-canvas-holder canvas {
  max-width: 220px; width: 100% !important; height: auto !important;
  filter: drop-shadow(0 10px 22px rgba(16,40,36,0.16)) drop-shadow(0 2px 5px rgba(16,40,36,0.08));
}
.dona-canvas-holder::after {
  content: ''; position: absolute; inset: 6%; border-radius: 50%;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.65) 48%, transparent 64%);
  transform: translateX(-140%) rotate(0deg);
  animation: donaSheen 1.5s cubic-bezier(.4,0,.2,1) .35s 1 both;
  pointer-events: none; mix-blend-mode: overlay;
}
@keyframes donaSheen { to { transform: translateX(140%) rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .dona-canvas-holder::after { display: none; } }

/* Total en el centro del anillo */
.dona-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none;
}
.dona-center-num {
  font-size: 30px; font-weight: 700; color: var(--texto); letter-spacing: -0.03em;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.dona-center-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--texto-muy-suave); margin-top: 3px;
}

/* Leyenda — conectada al gráfico: se resalta / atenúa junto con el segmento */
.dona-legend { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; width: 100%; }
.dona-legend li {
  display: flex; align-items: center; gap: .55rem; font-size: .84rem; color: var(--tinta-suave);
  padding: .3rem .4rem; border-radius: 8px; cursor: default;
  transition: background var(--transicion), opacity var(--transicion), transform var(--transicion);
}
.dona-legend li:hover { background: var(--fondo); transform: translateX(2px); }
.dona-legend.dim-otros li:not(:hover) { opacity: .35; }
.dona-legend b { margin-left: auto; color: var(--verde-oscuro); font-variant-numeric: tabular-nums; }
.dona-dot {
  width: 10px; height: 10px; border-radius: 3px; flex: none;
  box-shadow: 0 0 0 0 transparent; transition: box-shadow var(--transicion), transform var(--transicion);
}
.dona-legend li:hover .dona-dot { transform: scale(1.25); }

/* ══════════════════════════════════════════════════════════════
   Sistema de iconos SVG (macro iconos.html) — v20260903f
   ══════════════════════════════════════════════════════════════ */
.ic {
  width: 16px; height: 16px; flex-shrink: 0;
  display: inline-block; vertical-align: -0.15em;
}
/* Navegación lateral */
.nav-item { align-items: center; }
.nav-item .ic { width: 17px; height: 17px; }
.nav-salir .ic { width: 15px; height: 15px; }
/* Encabezados de sección */
.card-eyebrow, .card-title {
  display: flex; align-items: center; gap: 8px;
}
.card-eyebrow .ic, .card-title .ic { width: 14px; height: 14px; color: var(--verde-medio); }
/* Botones y celdas */
.btn .ic { width: 14px; height: 14px; }
.tabla .ic, .pill .ic { width: 13px; height: 13px; }
.panel-topbar-actions .btn .ic { margin-right: 2px; }

/* ══════════════════════════════════════════════════════════════
   Responsive global — misma lógica que el Portal de Actualización:
   el contenido llena SIEMPRE el ancho disponible (sin tope), y las
   rejillas se reacomodan por cortes. En celular la barra lateral
   pasa arriba. Va al final para ganar en orden de cascada.
   ══════════════════════════════════════════════════════════════ */

/* Laptop / escritorio angosto: KPIs a 2 columnas, rejilla a 1 */
@media (max-width: 1180px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .panel-grid { grid-template-columns: 1fr; }
}

/* Tablet: menos aire lateral, barra lateral más angosta */
@media (max-width: 900px) {
  .sidebar { width: 220px; }
  .panel-content, .portal-content { padding: 22px 20px 3rem; }
  .panel-topbar, .portal-header { padding: 14px 20px; }
  .anillo-wrap { gap: 1rem; }
}

/* Celular: barra lateral arriba, todo a 1 columna */
@media (max-width: 640px) {
  .portal-layout { flex-direction: column; }
  .sidebar {
    width: 100%; height: auto; position: static;
    flex-direction: column; overflow: visible;
  }
  .sidebar-top { display: block; }
  .sidebar-nav { display: flex; gap: 4px; overflow-x: auto; padding: 8px 12px; }
  .sidebar-nav-label { display: none; }
  .nav-item { white-space: nowrap; }
  .sidebar-user { margin: 12px 16px; }
  .panel-content, .portal-content { padding: 18px 14px 3rem; }
  .panel-topbar, .portal-header {
    padding: 12px 14px; flex-wrap: wrap; gap: .5rem; position: static;
  }
  .panel-topbar-actions { width: 100%; }
  .panel-topbar-actions .btn { flex: 1; }
  .kpi-row { grid-template-columns: 1fr; }
  .kpi-num { font-size: 30px; }
  .tabs { overflow-x: auto; }
  .tabla th, .tabla td { padding: 10px; }
}

/* ══════════════════════════════════════════════════════════════
   Capacitaciones
   ══════════════════════════════════════════════════════════════ */
.capa-lista { display: grid; gap: .7rem; }
.capa-item {
  display: grid; grid-template-columns: 46px 1fr auto; gap: 1rem; align-items: center;
  background: var(--blanco); border: 1px solid var(--linea); border-left: 4px solid var(--ocre);
  border-radius: 12px; padding: 1rem 1.2rem;
}
.capa-item.capa-completa { border-left-color: var(--verde-exito); }
.capa-item.capa-bloqueada { border-left-color: var(--linea-strong); opacity: .7; }
.capa-num {
  width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-weight: 800; font-size: 1.1rem;
  background: var(--verde-claro); color: var(--verde-oscuro);
}
.capa-completa .capa-num { background: var(--verde-exito); color: #fff; }
.capa-titulo { font-weight: 700; color: var(--tinta); display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.capa-desc { font-size: .84rem; color: var(--tinta-suave); margin: .3rem 0 .1rem; line-height: 1.55; }
.capa-meta { font-size: .78rem; color: var(--tinta-tenue); }
.capa-accion { white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; gap: .45rem; }
.capa-accion .capa-descargar { margin-left: 0; }

.capa-constancia {
  margin-top: 1.2rem; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding: 1.1rem 1.3rem; border-radius: 12px;
  background: var(--fondo); border: 1px dashed var(--linea-strong);
}
.capa-constancia.lista { background: #ECFAEF; border: 1px solid var(--verde-exito); border-style: solid; }
.capa-constancia-titulo { font-weight: 700; color: var(--tinta); }
.capa-constancia p { margin: .2rem 0 0; font-size: .84rem; color: var(--tinta-suave); }

/* Visor */
.capa-visor-desc { font-size: .88rem; color: var(--tinta-suave); line-height: 1.6; margin: 0 0 1.6rem; }

/* Secciones del visor: material → videos → declaración, bien separadas */
.capa-seccion { margin: 0 0 2.4rem; }
.capa-seccion-tit {
  display: flex; align-items: center; flex-wrap: wrap; gap: .55rem;
  font-size: .95rem; font-weight: 700; color: var(--tinta); margin-bottom: .9rem;
}
.capa-seccion-num {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--verde-medio); color: #fff; font-size: .8rem; font-weight: 700;
}
.capa-seccion-sub { font-weight: 400; font-size: .82rem; color: var(--tinta-tenue); }

/* El material y los videos comparten el mismo ancho para que se vean parejos */
.capa-media-w { max-width: 900px; margin-inline: auto; }

.capa-video { margin: 0 auto 1.4rem; max-width: 900px; }
.capa-video:last-child { margin-bottom: 0; }
.capa-video-rotulo { font-size: .78rem; font-weight: 600; color: var(--tinta-tenue); margin-bottom: .4rem; }
.capa-video-marco {
  position: relative; width: 100%; padding-top: 56.25%; border-radius: 12px;
  overflow: hidden; background: #000; border: 1px solid var(--linea);
}
.capa-video-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Casilla de confirmación — grande y visible */
.capa-video-confirm {
  display: flex; align-items: center; gap: .7rem; margin-top: .7rem;
  padding: .8rem 1rem; border: 1.5px solid var(--linea-strong); border-radius: 10px;
  background: var(--blanco); font-size: .9rem; color: var(--tinta); cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion);
}
.capa-video-confirm input {
  width: 20px; height: 20px; flex: none; accent-color: var(--verde-exito); cursor: pointer;
}
.capa-video-confirm.marcado,
.capa-video-confirm:has(input:checked) {
  border-color: var(--verde-exito); background: #ECFAEF; font-weight: 600;
}
.capa-video-confirm:has(input:disabled:not(:checked)) { opacity: .6; cursor: default; }

.capa-slide-caja {
  position: relative; background: var(--verde-oscuro); border-radius: 12px;
  padding: .8rem; display: flex; align-items: center; justify-content: center;
  min-height: 260px; max-width: 900px; margin: 0 auto;
}
#capaCanvas { width: 100%; height: auto; border-radius: 6px; box-shadow: var(--sombra-md); display: block; }
.capa-slide-cargando { position: absolute; color: #cfe0db; font-size: .85rem; }

.capa-slide-barra {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin: .9rem auto .2rem; max-width: 900px;
}
.capa-descargar {
  font-size: .8rem; font-weight: 600; color: var(--verde-medio); text-decoration: none;
  white-space: nowrap; margin-left: auto; display: inline-flex; align-items: center; gap: .3rem;
}
.capa-descargar:hover { text-decoration: underline; }
.capa-descargar .ic { width: 14px; height: 14px; }
.btn .ic, .btn-rev .ic { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.capa-slide-cont { font-size: .85rem; color: var(--tinta-suave); min-width: 90px; text-align: center; }
.capa-slide-espera { text-align: center; font-size: .78rem; color: var(--ocre); margin-bottom: .4rem; }

.capa-check { display: flex; align-items: center; gap: .5rem; font-size: .86rem; color: var(--tinta); cursor: pointer; }
.capa-check input { width: 16px; height: 16px; accent-color: var(--verde-medio); }

.capa-consent {
  margin-top: 0; padding: 1.3rem 1.4rem; border-radius: 12px;
  border: 1px solid var(--linea); background: var(--blanco);
}
.capa-consent-chk { margin-top: 0; }
.capa-consent[data-bloqueado] { opacity: .55; }
.capa-consent-txt {
  font-size: .86rem; color: var(--tinta-suave); line-height: 1.7; margin: .4rem 0 .9rem;
  padding: .8rem 1rem; background: var(--fondo); border-radius: 8px;
}
.capa-consent-nota { font-size: .78rem; color: var(--tinta-tenue); margin: .5rem 0 0; }

/* Panel admin */
.cap-form { display: grid; gap: .7rem; max-width: 620px; }
.cap-form label { display: grid; gap: .25rem; font-size: .82rem; font-weight: 600; color: var(--tinta-suave); }
.cap-form input, .cap-form textarea {
  padding: .55rem .7rem; border: 1px solid var(--linea); border-radius: 8px;
  font-family: inherit; font-size: .86rem; font-weight: 400; color: var(--tinta);
}
.cap-form input:focus, .cap-form textarea:focus {
  outline: none; border-color: var(--verde-medio); box-shadow: 0 0 0 2px rgba(49,92,85,.12);
}

.nav-badge-ok { background: var(--verde-exito); }

/* Vista de Cumplimiento: avance de las 3 capacitaciones del aliado */
.cap-rev-lista { display: grid; gap: .6rem; }
.cap-rev {
  display: grid; grid-template-columns: 40px 1fr auto; gap: .9rem; align-items: center;
  border: 1px solid var(--linea); border-left: 4px solid var(--linea-strong);
  border-radius: 10px; padding: .9rem 1.1rem;
}
.cap-rev.cap-rev-ok { border-left-color: var(--verde-exito); }
.cap-rev-num {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-weight: 800; background: var(--verde-claro); color: var(--verde-oscuro);
}
.cap-rev-ok .cap-rev-num { background: var(--verde-exito); color: #fff; }
.cap-rev-tit { font-weight: 700; color: var(--tinta); display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cap-rev-datos { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin-top: .4rem; font-size: .8rem; color: var(--tinta-tenue); }

/* Entrevista de Cumplimiento */
.alerta-accion {
  background: #ECFAEF; border-color: var(--verde-exito); border-left-color: var(--verde-medio);
}
.alerta-accion .alerta-icon { color: var(--verde-medio); }
.alerta-accion .alerta-titulo { color: var(--verde-oscuro); }
.alerta-accion .alerta-desc { color: #4a6a5f; }

.nav-badge-cta { background: var(--ocre); color: #fff; text-transform: none; font-weight: 600; }

.entrev-intro { font-size: .92rem; color: var(--tinta-suave); line-height: 1.7; margin: .3rem 0 1.2rem; }
.entrev-puntos { display: grid; gap: .9rem; margin-bottom: 1.2rem; }
.entrev-punto { display: flex; gap: .8rem; align-items: flex-start; font-size: .88rem; color: var(--tinta-suave); line-height: 1.6; }
.entrev-punto strong { color: var(--tinta); }
.entrev-punto-ic {
  flex: none; width: 30px; height: 30px; border-radius: 8px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--verde-claro); color: var(--verde-medio);
}
.entrev-punto-ic .ic { width: 16px; height: 16px; }
.entrev-agendada {
  display: flex; align-items: center; gap: .5rem; font-size: .86rem; color: var(--verde-oscuro);
  background: #ECFAEF; border: 1px solid var(--verde-exito); border-radius: 9px;
  padding: .6rem .85rem; margin-bottom: 1rem;
}
.entrev-agendada .ic { width: 15px; height: 15px; color: var(--verde-medio); }
.entrev-agendar { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.entrev-agendar .btn .ic { width: 15px; height: 15px; margin-right: 5px; vertical-align: -2px; }
.entrev-agendar-nota { font-size: .8rem; color: var(--tinta-tenue); }

/* Seguimiento de primera operación (paso interno posterior a la vinculación) */
.alerta-seguimiento {
  background: var(--blanco); border: 1px solid var(--linea);
  border-left: 4px solid var(--dorado);
}
.alerta-seguimiento .alerta-icon { color: var(--verde-medio); }
.alerta-seguimiento .alerta-titulo { color: var(--verde-oscuro); }
.alerta-seguimiento .alerta-desc { color: var(--tinta-suave); }
.alerta-seguimiento .alerta-desc a { color: var(--verde-medio); font-weight: 600; text-decoration: none; }
.alerta-seguimiento .alerta-desc a:hover { text-decoration: underline; }

.po-strip { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--tinta-tenue); }
.po-strip .ic { width: 14px; height: 14px; color: var(--verde-medio); flex: none; }
.po-strip a { color: var(--verde-medio); font-weight: 600; }

.po-intro { font-size: .86rem; color: var(--tinta-suave); line-height: 1.65; margin: .35rem 0 .8rem; max-width: 640px; }
.po-meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-bottom: 1.2rem; font-size: .76rem; color: var(--tinta-tenue); }
.po-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.po-meta .ic { width: 13px; height: 13px; color: var(--verde-medio); flex: none; }
.po-nota { font-size: .84rem; color: var(--tinta-tenue); margin: .2rem 0 0; }
.po-lectura { display: grid; gap: .8rem; max-width: 640px; margin: .2rem 0 0; }
.po-lectura > div { display: grid; gap: .15rem; }
.po-lectura dt {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--verde-medio);
}
.po-lectura dd { margin: 0; font-size: .88rem; color: var(--tinta); white-space: pre-wrap; }

/* "Sus pendientes" — lo que le toca al rol de quien mira el panel */
.mis-pend {
  background: var(--blanco); border: 1px solid var(--linea);
  border-left: 4px solid var(--verde-medio); border-radius: 10px;
  padding: .9rem 1.1rem; margin-bottom: 1.4rem;
}
.mis-pend-head {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 700; color: var(--verde-oscuro); font-size: .92rem; margin-bottom: .6rem;
}
.mis-pend-head .ic { width: 18px; height: 18px; color: var(--verde-medio); }
.mis-pend-n {
  margin-left: .1rem; background: var(--verde-medio); color: #fff;
  font-size: .72rem; font-weight: 700; padding: .05rem .45rem; border-radius: 999px;
}
.mis-pend-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.mis-pend-lista li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .5rem .3rem; border-top: 1px solid var(--linea);
}
.mis-pend-lista li:first-child { border-top: 0; }
.mis-pend-lista a { text-decoration: none; display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.mis-pend-tit { font-weight: 600; color: var(--verde-medio); font-size: .86rem; }
.mis-pend-lista a:hover .mis-pend-tit { text-decoration: underline; }
.mis-pend-ali { font-size: .78rem; color: var(--tinta-tenue); }
.mis-pend-det { font-size: .74rem; color: var(--tinta-tenue); white-space: nowrap; text-transform: capitalize; }
.mis-pend-det-urgente { color: var(--ocre); font-weight: 700; }

/* Matriz de pendientes — /panel/pendientes: una tarjeta por área */
.matriz-vacio {
  display: flex; align-items: center; gap: .6rem;
  background: var(--verde-claro); border: 1px solid var(--linea);
  border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1.3rem;
  font-size: .88rem; color: var(--verde-oscuro);
}
.matriz-vacio .ic { width: 20px; height: 20px; color: var(--verde-medio); flex: none; }
.matriz {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.1rem;
}
.matriz-area {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: 12px; padding: 1rem 1.1rem;
}
.matriz-area-propia { border-left: 4px solid var(--verde-medio); }
.matriz-area-head {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding-bottom: .6rem; margin-bottom: .3rem; border-bottom: 1px solid var(--linea);
}
.matriz-area-nom { font-weight: 700; color: var(--verde-oscuro); font-size: .95rem; }
.matriz-propia-tag {
  font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--verde-medio); background: var(--verde-claro);
  padding: .1rem .4rem; border-radius: 999px; margin-left: .25rem; vertical-align: 1px;
}
.matriz-area-n {
  background: var(--verde-medio); color: #fff; font-size: .74rem; font-weight: 700;
  min-width: 1.4rem; text-align: center; padding: .1rem .45rem; border-radius: 999px;
}
.matriz-area-n-cero { background: var(--linea-strong); color: var(--tinta-tenue); }
.matriz-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.matriz-lista li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .55rem .2rem; border-top: 1px solid var(--linea);
}
.matriz-lista li:first-child { border-top: 0; }
.matriz-lista a { text-decoration: none; display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.matriz-tit { font-weight: 600; color: var(--verde-medio); font-size: .85rem; }
.matriz-lista a:hover .matriz-tit { text-decoration: underline; }
.matriz-ali { font-size: .77rem; color: var(--tinta-tenue); }
.matriz-det { font-size: .73rem; color: var(--tinta-tenue); white-space: nowrap; text-transform: capitalize; }
.matriz-det-urgente { color: var(--ocre); font-weight: 700; }
.matriz-sin { font-size: .82rem; color: var(--tinta-tenue); margin: .5rem 0 .2rem; }

/* ══════════════════════════════════════════════════════════════
   Facturas — consulta del aliado vinculado
   ══════════════════════════════════════════════════════════════ */
.fx-sync {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .74rem; color: var(--tinta-tenue); white-space: nowrap;
}
.fx-sync .ic { width: 13px; height: 13px; color: var(--verde-medio); }

.fx-filtros-card {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio-lg); padding: 1rem 1.1rem; margin-bottom: 1.3rem;
}
.fx-filtros-card .fx-filtros { margin-bottom: 0; }
.fx-perchips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.fx-perchip {
  font-size: .8rem; font-weight: 600; text-decoration: none;
  color: var(--tinta-suave); background: var(--fondo);
  border: 1px solid var(--linea); border-radius: 999px; padding: .35rem .85rem;
  transition: background .12s, color .12s, border-color .12s;
}
.fx-perchip:hover { border-color: var(--verde-medio); color: var(--verde-oscuro); }
.fx-perchip.on { background: var(--verde-oscuro); color: #fff; border-color: var(--verde-oscuro); }

.fx-filtros {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7rem 1rem;
  margin-bottom: 1.3rem;
}
.fx-fg { display: flex; flex-direction: column; gap: .28rem; }
.fx-fg-lbl {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--tinta-tenue); font-weight: 600;
}
.fx-sel {
  font: inherit; font-size: .84rem; font-weight: 500; color: var(--verde-oscuro);
  background: var(--blanco); border: 1px solid var(--linea-strong);
  border-radius: var(--radio-sm); padding: .46rem .62rem; height: 38px;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.fx-sel:hover { border-color: var(--verde-medio); }
.fx-sel:focus {
  outline: none; border-color: var(--verde-medio);
  box-shadow: 0 0 0 3px rgba(49, 92, 85, .12);
}

/* Selector de periodo — calendario propio por días */
.fx-cal { position: relative; }
.fx-cal-btn {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  font: inherit; font-size: .84rem; font-weight: 500; color: var(--verde-oscuro);
  background: var(--blanco); border: 1px solid var(--linea-strong);
  border-radius: var(--radio-sm); padding: 0 .7rem; height: 38px; min-width: 214px;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.fx-cal-btn:hover { border-color: var(--verde-medio); }
.fx-cal-btn .ic:first-child { color: var(--verde-medio); flex: none; }
.fx-cal-btn #fxCalTxt { flex: 1; text-align: left; white-space: nowrap; }
.fx-cal-btn .ic:last-child { color: var(--tinta-tenue); flex: none; }
.fx-cal-btn[aria-expanded="true"] {
  border-color: var(--verde-medio); box-shadow: 0 0 0 3px rgba(49, 92, 85, .12);
}
.fx-cal-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  width: 292px; background: var(--blanco); border: 1px solid var(--linea-strong);
  border-radius: var(--radio-md); box-shadow: var(--sombra-md); padding: .85rem .9rem;
}
.fx-cal-nav {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: .55rem;
}
.fx-cal-mes { font-size: .86rem; font-weight: 600; color: var(--verde-oscuro); }
.fx-cal-arrow {
  border: 0; background: none; cursor: pointer; font-size: 1.15rem; line-height: 1;
  color: var(--verde-medio); width: 28px; height: 28px; border-radius: 7px;
  transition: background var(--transicion);
}
.fx-cal-arrow:hover { background: var(--verde-claro); }
.fx-cal-arrow:disabled { color: var(--linea-strong); cursor: default; background: none; }
.fx-cal-dow, .fx-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.fx-cal-dow span {
  text-align: center; font-size: .64rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--tinta-tenue); padding-bottom: .3rem;
}
.fx-cal-grid { gap: 2px; }
.fx-cal-cell { aspect-ratio: 1 / 1; }
.fx-cal-day {
  border: 0; background: none; cursor: pointer; font: inherit; font-size: .8rem;
  color: var(--tinta); border-radius: 7px; width: 100%; height: 100%;
  transition: background var(--transicion), color var(--transicion);
}
.fx-cal-day:hover { background: var(--verde-claro); }
.fx-cal-day.is-disabled { color: var(--linea-strong); cursor: default; }
.fx-cal-day.is-disabled:hover { background: none; }
.fx-cal-day.is-today { font-weight: 700; box-shadow: inset 0 0 0 1px var(--linea-strong); }
.fx-cal-day.is-in { background: var(--verde-claro); border-radius: 0; }
.fx-cal-day.is-edge { background: var(--verde-oscuro); color: #fff; font-weight: 600; }
.fx-cal-day.is-edge:hover { background: var(--verde-oscuro); }
.fx-cal-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: .7rem; padding-top: .65rem; border-top: 1px solid var(--linea);
}
.fx-cal-clear {
  border: 0; background: none; cursor: pointer; font: inherit; font-size: .8rem;
  font-weight: 600; color: var(--tinta-tenue); padding: .35rem .2rem;
}
.fx-cal-clear:hover { color: var(--ocre); text-decoration: underline; }
.fx-cal-apply {
  border: 1px solid var(--verde-oscuro); background: var(--verde-oscuro); color: #fff;
  cursor: pointer; font: inherit; font-size: .8rem; font-weight: 600;
  border-radius: var(--radio-sm); padding: .4rem .95rem;
  transition: background var(--transicion);
}
.fx-cal-apply:hover { background: var(--verde-medio); }
.fx-aplicar {
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
  color: #fff; background: var(--verde-oscuro); border: 1px solid var(--verde-oscuro);
  border-radius: var(--radio-sm); padding: 0 1.05rem; height: 38px;
  transition: background var(--transicion);
}
.fx-aplicar:hover { background: var(--verde-medio); }
.fx-limpiar {
  font-size: .8rem; font-weight: 600; color: var(--tinta-tenue);
  text-decoration: none; padding: .46rem .3rem; align-self: center;
}
.fx-limpiar:hover { color: var(--ocre); text-decoration: underline; }
.fx-informe {
  margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .9rem; border-radius: var(--radio-sm); text-decoration: none;
  font-size: .82rem; font-weight: 600; color: var(--verde-oscuro);
  background: var(--dorado); transition: background var(--transicion);
}
.fx-informe:hover { background: var(--dorado-hover); }
.fx-informe .ic { width: 15px; height: 15px; }

/* Panel de indicadores — ancho completo, sin espacios muertos */
.fx-panel {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio-lg); overflow: hidden; margin-bottom: 1.7rem;
}
.fx-panel-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.fx-stat {
  padding: 1.15rem 1.4rem; border-right: 1px solid var(--linea);
  display: flex; flex-direction: column; gap: .28rem; min-width: 0;
}
.fx-stat:last-child { border-right: 0; }
.fx-stat-num {
  font-size: 1.7rem; font-weight: 700; color: var(--verde-oscuro);
  line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.fx-stat-num.is-money { font-size: 1.2rem; color: var(--ocre); }
.fx-stat-num.is-gr { font-size: 1.35rem; }
.fx-stat-lbl {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: var(--tinta-tenue);
}
.fx-panel-nota {
  margin: 0; padding: .7rem 1.4rem .8rem; font-size: .8rem; color: var(--tinta-tenue);
  border-top: 1px solid var(--linea);
}
.fx-prop { padding: .9rem 1.4rem 1rem; border-top: 1px solid var(--linea); }
.fx-prop-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .3rem .9rem; margin-bottom: .5rem;
}
.fx-prop-lbl {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: var(--tinta-tenue);
}
.fx-prop-tags {
  display: flex; gap: .9rem; font-size: .78rem; font-weight: 600; color: var(--tinta-suave);
}
.fx-prop-tag { display: inline-flex; align-items: center; gap: .35rem; }
.fx-prop-dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.fx-prop-dot-oro { background: var(--dorado); }
.fx-prop-dot-plat { background: #A9B7B4; }
.fx-prop-bar {
  display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--linea);
}
.fx-prop-seg { height: 100%; }
.fx-prop-seg-oro { background: var(--dorado); }
.fx-prop-seg-plat { background: #A9B7B4; }

.fx-panel-split {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--linea); background: #FBFAF7;
}
.fx-split-cell {
  padding: .95rem 1.4rem; display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  border-right: 1px solid var(--linea); font-size: .85rem; color: var(--tinta-suave);
}
.fx-split-cell:last-child { border-right: 0; }
.fx-split-fin b { color: var(--verde-oscuro); font-variant-numeric: tabular-nums; }
.fx-split-sep { color: var(--linea-strong); }
.fx-split-val {
  margin-left: auto; font-weight: 700; color: var(--verde-oscuro);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .fx-panel-top { grid-template-columns: 1fr; }
  .fx-stat { border-right: 0; border-bottom: 1px solid var(--linea); }
  .fx-panel-split { grid-template-columns: 1fr; }
  .fx-split-cell { border-right: 0; border-bottom: 1px solid var(--linea); }
  .fx-split-cell:last-child { border-bottom: 0; }
  .fx-informe { margin-left: 0; }
  .fx-fg { flex: 1 1 100%; }
  .fx-cal, .fx-cal-btn, .fx-cal-pop, .fx-sel { width: 100%; }
}

.fx-lista { display: grid; gap: .7rem; }
.fx-card {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 1.1rem;
  background: var(--blanco); border: 1px solid var(--linea);
  border-left: 4px solid var(--dorado);
  border-radius: var(--radio-md); padding: .9rem 1.15rem;
  transition: box-shadow var(--transicion), transform var(--transicion), border-color var(--transicion);
}
.fx-card:hover {
  box-shadow: var(--sombra-md); transform: translateY(-1px); border-left-color: var(--verde-medio);
}
.fx-or {
  width: 62px; height: 58px; flex: none; border-radius: 11px;
  background: var(--verde-oscuro); color: var(--dorado);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.fx-or-tag { font-size: .58rem; font-weight: 700; letter-spacing: .12em; opacity: .8; }
.fx-or-num { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.fx-body { min-width: 0; }
.fx-line1 { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.fx-fecha { font-size: .95rem; font-weight: 600; color: var(--verde-oscuro); }
.fx-line2 {
  display: flex; gap: .3rem 1rem; flex-wrap: wrap; margin-top: .25rem;
  font-size: .78rem; color: var(--tinta-tenue);
}
.fx-line2 span { display: inline-flex; align-items: center; gap: .3rem; }
.fx-line2 .ic { width: 12px; height: 12px; color: var(--tinta-tenue); }
.fx-chip {
  font-size: .68rem; font-weight: 700; letter-spacing: .03em;
  padding: .12rem .5rem; border-radius: 999px;
}
.fx-chip-oro { background: #FBEFD3; color: #8A6415; }
.fx-chip-platino { background: #E6EAEE; color: #4A5560; }
.fx-monto {
  font-size: 1.05rem; font-weight: 700; color: var(--verde-oscuro);
  font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right;
}
.fx-ver {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  border: 1px solid var(--linea-strong); border-radius: 8px;
  padding: .45rem .8rem; font-size: .8rem; font-weight: 600;
  color: var(--verde-medio); text-decoration: none; background: var(--blanco);
  transition: background var(--transicion), border-color var(--transicion);
}
.fx-ver:hover { background: var(--verde-claro); border-color: var(--verde-medio); }
.fx-ver .ic { width: 14px; height: 14px; }

.fx-vacio {
  text-align: center; padding: 3rem 1rem; color: var(--tinta-tenue);
  border: 1px dashed var(--linea-strong); border-radius: var(--radio-lg);
}
.fx-vacio .ic { width: 26px; height: 26px; color: var(--verde-medio); }
.fx-vacio p { margin: .5rem 0 0; font-size: .88rem; }
.fx-vacio p strong { color: var(--verde-oscuro); }

@media (max-width: 720px) {
  .fx-card { grid-template-columns: auto 1fr; grid-template-areas: "or body" "monto ver"; }
  .fx-or { grid-area: or; } .fx-body { grid-area: body; }
  .fx-monto { grid-area: monto; text-align: left; align-self: center; }
  .fx-ver { grid-area: ver; justify-self: end; }
}

/* Panel de Cumplimiento — facturas */
.fxp-meta { font-size: .78rem; color: var(--tinta-tenue); margin-right: .8rem; }
.fxp-tabs { display: flex; gap: .4rem; margin-bottom: 1rem; flex-wrap: wrap; }
.fxp-tabs a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem; border-radius: 999px; text-decoration: none;
  font-size: .82rem; font-weight: 600; color: var(--tinta-suave);
  background: var(--blanco); border: 1px solid var(--linea);
}
.fxp-tabs a:hover { border-color: var(--linea-strong); }
.fxp-tabs a.on { background: var(--verde-oscuro); color: #fff; border-color: var(--verde-oscuro); }
.fxp-tabs a span {
  font-size: .72rem; font-weight: 700; background: rgba(0,0,0,.08);
  padding: .05rem .4rem; border-radius: 999px;
}
.fxp-tabs a.on span { background: rgba(255,255,255,.18); }
.fxp-asignar { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.fxp-asignar select {
  max-width: 220px; padding: .35rem .5rem; border: 1px solid var(--linea);
  border-radius: 7px; font-family: inherit; font-size: .8rem;
}
.fxp-asignar label {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .74rem; color: var(--tinta-tenue); font-weight: 400; cursor: pointer;
}
.tabla .mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .82rem; white-space: nowrap; }
.tabla .num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Ruta de vinculación — pasos del proceso con su estado */
.ruta { list-style: none; margin: .4rem 0 0; padding: 0; }
.ruta-paso {
  display: grid; grid-template-columns: 24px 1fr; gap: .8rem; padding-bottom: 1.1rem; position: relative;
}
.ruta-paso:last-child { padding-bottom: 0; }
.ruta-paso:not(:last-child)::before {
  content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--linea);
}
.ruta-completo:not(:last-child)::before { background: var(--verde-exito); }
.ruta-marca {
  width: 22px; height: 22px; border-radius: 50%; flex: none; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 800; border: 2px solid var(--linea-strong);
  background: var(--blanco); color: #fff;
}
.ruta-completo .ruta-marca { background: var(--verde-exito); border-color: var(--verde-exito); }
.ruta-en_curso .ruta-marca { border-color: var(--dorado-hover); background: var(--dorado); }
.ruta-bloqueado .ruta-marca { border-style: dashed; background: var(--fondo); }
.ruta-bloqueado .ruta-nom, .ruta-bloqueado .ruta-det { opacity: .55; }
.ruta-cuerpo { display: flex; flex-direction: column; gap: .12rem; padding-top: .05rem; }
.ruta-nom { font-weight: 600; font-size: .87rem; color: var(--tinta); }
.ruta-completo .ruta-nom { color: var(--verde-oscuro); }
.ruta-det { font-size: .77rem; color: var(--tinta-tenue); }
.ruta-det::first-letter { text-transform: uppercase; }

.entrev-faltan { list-style: none; padding: 0; margin: .7rem 0 0; display: grid; gap: .4rem; }
.entrev-faltan li {
  font-size: .85rem; color: var(--tinta-suave); padding-left: 1.4rem; position: relative;
}
.entrev-faltan li::before {
  content: "○"; position: absolute; left: 0; color: var(--tinta-tenue); font-size: .9rem;
}
.entrev-faltan li.ok { color: var(--tinta); }
.entrev-faltan li.ok::before { content: "●"; color: var(--verde-exito); }
.entrev-bookings { border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; }

@media (max-width: 640px) {
  .capa-item { grid-template-columns: 40px 1fr; }
  .capa-accion { grid-column: 1 / -1; }
}

/* ══════════════════════════════════════════════════════════════
   Liquidaciones
   ══════════════════════════════════════════════════════════════ */
.liq-vacio, .fx-vacio {
  text-align: center; padding: 3rem 1rem; color: var(--tinta-tenue);
  border: 1px dashed var(--linea-strong); border-radius: var(--radio-lg);
}
.liq-vacio .ic { width: 26px; height: 26px; color: var(--verde-medio); }
.liq-vacio p { margin: .5rem 0 0; font-size: .88rem; }
.liq-vacio p strong { color: var(--verde-oscuro); }

.liq-detectadas { margin-bottom: 1.4rem; }
.liq-carpetas { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
.liq-carpeta {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: 999px; padding: .3rem .75rem; font-size: .8rem;
}
.liq-carpeta-n { font-weight: 600; color: var(--verde-oscuro); }
.liq-carpeta-or { color: var(--tinta-tenue); font-variant-numeric: tabular-nums; }
.liq-meta { font-size: .82rem; color: var(--tinta-tenue); margin: .35rem 0 0; }

.liq-stats { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.3rem; }
.liq-stat {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio-lg); padding: 1rem 1.3rem; min-width: 150px;
  display: flex; flex-direction: column; gap: .2rem;
}
.liq-stat-n {
  font-size: 1.9rem; font-weight: 700; color: var(--verde-oscuro);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.liq-stat-n.liq-stat-money { font-size: 1.25rem; color: var(--ocre); }
.liq-stat-l { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: var(--tinta-tenue); }

.liq-nov { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .82rem; }
.liq-nov li { margin: .2rem 0; }

.alerta-atencion-ocre { border-left-color: var(--ocre) !important; background: var(--ocre-claro) !important; }

.liq-valid { display: flex; flex-direction: column; gap: .4rem; margin: .7rem 0; }
.liq-valid-fila { font-size: .84rem; color: var(--tinta-suave); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.liq-valid-fecha { color: var(--tinta-tenue); font-size: .76rem; }
.liq-valid-obs { flex-basis: 100%; font-size: .8rem; color: var(--tinta-tenue); padding-left: .5rem; border-left: 2px solid var(--linea); }
.liq-validar-form { display: flex; flex-direction: column; gap: .5rem; margin-top: .8rem; max-width: 460px; }
.liq-validar-form label { font-size: .85rem; display: flex; align-items: center; gap: .4rem; }
.liq-validar-form textarea {
  font: inherit; font-size: .85rem; border: 1px solid var(--linea-strong);
  border-radius: var(--radio-sm); padding: .5rem; resize: vertical;
}

.btn-mini {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid var(--linea-strong); border-radius: var(--radio-sm);
  padding: .4rem .8rem; font-size: .8rem; font-weight: 600;
  color: var(--verde-medio); text-decoration: none; background: var(--blanco);
  transition: border-color var(--transicion), background var(--transicion);
}
.btn-mini:hover { border-color: var(--verde-medio); background: var(--verde-claro); }
.btn-mini .ic { width: 14px; height: 14px; }

.tabla-compacta th, .tabla-compacta td { padding: .4rem .55rem; font-size: .78rem; }
.tabla .num, .tabla-compacta .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.liq-fila-nov td { background: var(--ocre-claro); }
.liq-fila-tot td { font-weight: 700; color: var(--verde-oscuro); border-top: 2px solid var(--dorado); background: var(--verde-claro); }

/* Vista del aliado */
.liq-lista { display: grid; gap: 1rem; }
.liq-card {
  background: var(--blanco); border: 1px solid var(--linea);
  border-left: 4px solid var(--dorado); border-radius: var(--radio-md); padding: 1.1rem 1.3rem;
}
.liq-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.liq-card-mes { font-size: 1.1rem; font-weight: 700; color: var(--verde-oscuro); text-transform: capitalize; }
.liq-card-folio { font-size: .76rem; color: var(--tinta-tenue); margin-top: .15rem; }
.liq-card-kpis { display: flex; flex-wrap: wrap; gap: 1.4rem; margin: .9rem 0 .4rem; }
.liq-card-kpis > div { display: flex; flex-direction: column; }
.liq-k-num { font-size: 1.15rem; font-weight: 700; color: var(--verde-oscuro); font-variant-numeric: tabular-nums; }
.liq-k-num.liq-k-money { color: var(--ocre); }
.liq-k-lbl { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-tenue); }
.liq-card-detalle { margin-top: .6rem; }
.liq-card-detalle summary { cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--verde-medio); }
.liq-card-detalle[open] summary { margin-bottom: .6rem; }
.liq-card-pie { display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .6rem; margin-top: .9rem; padding-top: .8rem;
  border-top: 1px solid var(--linea); }
.liq-card-periodo { font-size: .78rem; color: var(--tinta-tenue); }
.fx-volver { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem;
  font-weight: 600; color: var(--verde-medio); text-decoration: none; margin-bottom: 1rem; }
.fx-volver:hover { color: var(--verde-oscuro); }

/* Factura ↔ liquidación */
.fx-line3 { margin-top: .3rem; }
.fx-liq {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 600; padding: .16rem .5rem; border-radius: 999px;
  text-decoration: none;
}
.fx-liq .ic { width: 11px; height: 11px; }
.fx-liq-ok { background: var(--ok-bg); color: var(--ok); }
.fx-liq-proc { background: var(--espera-bg); color: var(--espera); }
.fx-liq-no { background: var(--fondo); color: var(--tinta-tenue); }
a.fx-liq-ok:hover { text-decoration: underline; }

/* Archivos que el sistema deja en la carpeta */
.liq-carpeta-archivos { display: flex; flex-direction: column; gap: .3rem; margin-top: .5rem; }
.liq-carpeta-archivos a { font-size: .82rem; color: var(--verde-medio); }
.liq-carpeta-archivos code { font-size: .74rem; color: var(--tinta-tenue); }

/* Novedades de liquidación — resolución */
.liq-nov-list { display: flex; flex-direction: column; gap: .6rem; margin-top: .7rem; }
.liq-nov-item {
  background: var(--blanco); border: 1px solid var(--linea-strong);
  border-radius: var(--radio-sm); padding: .6rem .8rem;
}
.liq-nov-item.resuelta { border-color: var(--linea); opacity: .9; }
.liq-nov-cab { font-size: .84rem; color: var(--tinta-suave); }
.liq-nov-res { margin-top: .35rem; font-size: .8rem; color: var(--tinta-tenue); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.liq-nov-form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .5rem; }
.liq-nov-form label { font-size: .8rem; display: inline-flex; align-items: center; gap: .3rem; }
.liq-nov-form input[type=text] {
  flex: 1 1 260px; font: inherit; font-size: .82rem;
  border: 1px solid var(--linea-strong); border-radius: var(--radio-sm); padding: .4rem .55rem;
}

/* Paginación + filtros de listas grandes */
.fx-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem .2rem; margin-top: 1rem;
}
.fx-pager a {
  font-size: .82rem; font-weight: 600; color: var(--verde-medio); text-decoration: none;
  border: 1px solid var(--linea-strong); border-radius: var(--radio-sm); padding: .4rem .8rem;
}
.fx-pager a:hover { background: var(--verde-claro); border-color: var(--verde-medio); }
.fx-pager .off { font-size: .82rem; color: var(--linea-strong); border: 1px solid var(--linea);
  border-radius: var(--radio-sm); padding: .4rem .8rem; }
.fx-pager-info { font-size: .8rem; color: var(--tinta-tenue); }
.fx-listacab { font-size: .8rem; color: var(--tinta-tenue); margin: .2rem 0 .6rem; }

.fxp-buscar { min-width: 240px; flex: 1 1 240px; max-width: 380px; }

/* ── Facturas · panel: tarjeta de filtros profesional ── */
.fxp-filtros-card {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio-lg); padding: 1rem 1.1rem; margin-bottom: 1.3rem;
}
.fxp-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.fxp-chip {
  font-size: .8rem; font-weight: 600; text-decoration: none;
  color: var(--tinta-suave); background: var(--fondo);
  border: 1px solid var(--linea); border-radius: 999px; padding: .35rem .85rem;
  transition: background .12s, color .12s, border-color .12s;
}
.fxp-chip:hover { border-color: var(--verde-medio); color: var(--verde-oscuro); }
.fxp-chip.on { background: var(--verde-oscuro); color: #fff; border-color: var(--verde-oscuro); }
.fxp-filtros {
  display: grid; gap: .7rem 1rem; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.fxp-f { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.fxp-f > span {
  font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinta-tenue);
}
.fxp-f .fx-sel { width: 100%; }
.fxp-f-or { max-width: 110px; }
.fxp-f-fecha { max-width: 160px; }
.fxp-f-texto { grid-column: span 2; }
.fxp-f-acc { display: flex; align-items: center; gap: .8rem; }
.fxp-resultado {
  margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--linea);
  font-size: .84rem; color: var(--tinta-suave);
}
.fxp-resultado b { color: var(--verde-oscuro); }
@media (max-width: 720px) {
  .fxp-filtros { grid-template-columns: 1fr 1fr; }
  .fxp-f-texto, .fxp-f-acc { grid-column: 1 / -1; }
}

/* ── Facturas · portal aliado: búsqueda por OR ── */
.fx-fg-busca { min-width: 190px; }
.fx-fbtn { width: auto !important; align-self: end; }
.fx-nota-busca {
  display: flex; align-items: center; gap: .4rem; margin: -.4rem 0 1rem;
  font-size: .82rem; color: var(--tinta-suave);
}
.fx-nota-busca a { color: var(--verde-medio); font-weight: 600; }

/* ── nav: ítem discreto (Mapa del proyecto) ── */
.nav-item-tenue { opacity: .62; }
.nav-item-tenue:hover { opacity: 1; }

/* ── Liquidaciones · panel: filtros + bandeja + grupos ── */
.fx-filtros-res {
  margin-left: auto; align-self: center; font-size: .8rem; color: var(--tinta-tenue);
}
.liq-buscar { min-width: 220px; flex: 1 1 220px; max-width: 340px; }

.liq-carpetas-det {
  border: 1px solid var(--linea); border-radius: var(--radio-md);
  padding: .7rem .95rem; margin-bottom: 1.2rem; background: var(--superficie);
}
.liq-carpetas-det summary {
  cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--verde-medio);
  display: flex; align-items: center; gap: .4rem;
}
.liq-carpetas-det[open] summary { margin-bottom: .6rem; }

.liq-grupos { display: flex; flex-direction: column; gap: .8rem; }
.liq-grupo {
  border: 1px solid var(--linea); border-radius: var(--radio-lg);
  background: var(--superficie); overflow: hidden;
}
.liq-grupo[open] { border-color: var(--linea-strong); }
.liq-grupo-head {
  cursor: pointer; list-style: none; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: .5rem 1rem;
  padding: .85rem 1.1rem;
}
.liq-grupo-head::-webkit-details-marker { display: none; }
.liq-grupo[open] .liq-grupo-head { border-bottom: 1px solid var(--linea); background: var(--fondo); }
.liq-grupo-id { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.liq-grupo-nombre { font-weight: 700; color: var(--verde-oscuro); font-size: .95rem; }
.liq-grupo-meta { display: flex; gap: 1rem; font-size: .8rem; color: var(--tinta-tenue);
  font-variant-numeric: tabular-nums; }
.liq-grupo .tabla-scroll { padding: 0 .3rem .3rem; }
.liq-grupo .tabla td, .liq-grupo .tabla th { padding: 10px 12px; }

/* ── Liquidaciones · "Requieren su atención" (bandeja del rol) ── */
.liq-bandeja {
  border: 1px solid var(--linea); border-top: 3px solid var(--verde-medio);
  border-radius: var(--radio-lg); background: var(--superficie);
  padding: .95rem 1.1rem; margin-bottom: 1.4rem;
}
.liq-bandeja.urg { border-top-color: var(--ocre); }
.liq-bandeja-head { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.liq-bandeja-head b { color: var(--verde-oscuro); }
.liq-bandeja-cnt {
  margin-left: auto; font-size: .72rem; font-weight: 700; color: var(--tinta-tenue);
  background: var(--fondo); border-radius: 999px; padding: .12rem .55rem;
}
.liq-bandeja.urg .liq-bandeja-cnt { color: var(--ocre); }
.liq-bandeja-list { list-style: none; margin: .55rem 0 0; padding: 0; }
.liq-bandeja-row {
  display: grid; grid-template-columns: 1fr auto; gap: .1rem .6rem; align-items: center;
  text-decoration: none; padding: .5rem .55rem; border-radius: var(--radio-sm);
  border: 1px solid transparent; transition: background .12s, border-color .12s;
}
.liq-bandeja-row:hover { background: var(--fondo); border-color: var(--linea); }
.liq-bandeja-row.urg { background: #fdf4ec; }
.liq-bandeja-row.urg:hover { background: #fbe9d8; }
.liq-bandeja-main { display: flex; align-items: baseline; gap: .45rem; min-width: 0; }
.liq-bandeja-main b {
  color: var(--verde-oscuro); font-size: .84rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.liq-bandeja-mes { font-size: .72rem; color: var(--tinta-tenue); flex: none; }
.liq-bandeja-motivo { grid-column: 1; font-size: .78rem; color: var(--tinta-suave); }
.liq-bandeja-row.urg .liq-bandeja-motivo { color: var(--ocre); font-weight: 600; }
.liq-bandeja-go { grid-column: 2; grid-row: 1 / span 2; color: var(--linea-strong); display: flex; }
.liq-bandeja-row:hover .liq-bandeja-go { color: var(--verde-medio); }
.liq-bandeja-mas { font-size: .76rem; color: var(--tinta-tenue); font-style: italic; padding: .5rem .55rem 0; }

/* ── Tareas automáticas ── */
.tareas-lista { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .86rem; line-height: 1.7; color: var(--tinta-suave); }
.tareas-lista b { color: var(--verde-oscuro); }
.tareas-detalle { display: flex; flex-wrap: wrap; gap: .35rem; }
.tareas-chip {
  font-size: .74rem; background: var(--fondo); border: 1px solid var(--linea);
  border-radius: 999px; padding: .18rem .6rem; color: var(--tinta-suave);
}
.tareas-chip.malo { border-color: var(--ocre); color: var(--ocre); }

/* ── Liquidación · detalle: progreso de validación + línea de tiempo ── */
.liq-plazo {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem;
  padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--linea);
}
.liq-plazo.ok { color: var(--verde-medio); border-color: var(--verde-medio); }
.liq-plazo.vencido { color: var(--ocre); border-color: var(--ocre); background: #fdf4ec; }
.liq-valida-tren { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0; }
.liq-valida-paso {
  display: flex; flex-direction: column; gap: .15rem; align-items: flex-start;
  border: 1px solid var(--linea); border-radius: var(--radio-md);
  padding: .55rem .8rem; min-width: 140px; background: var(--superficie);
}
.liq-valida-paso.hecho { border-color: var(--verde-exito); background: #f2fbf5; }
.liq-valida-paso.falta { border-style: dashed; }
.liq-valida-rol { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-tenue); }
.liq-valida-quien { font-size: .82rem; font-weight: 600; color: var(--verde-oscuro); }
.liq-valida-cuando { font-size: .72rem; color: var(--tinta-tenue); }
.liq-timeline { list-style: none; margin: .4rem 0 0; padding: 0; }
.liq-timeline li {
  position: relative; padding: .35rem 0 .35rem 1.1rem; font-size: .82rem;
  border-left: 2px solid var(--linea); color: var(--tinta-suave);
}
.liq-timeline li::before {
  content: ""; position: absolute; left: -5px; top: .6rem;
  width: 8px; height: 8px; border-radius: 50%; background: var(--verde-medio);
}
.liq-timeline .cuando { color: var(--tinta-tenue); font-variant-numeric: tabular-nums; margin-right: .4rem; }
.liq-timeline .quien { color: var(--tinta-tenue); }