/* ============================================================
   Sistema de Gestión PMO — Buenaventura
   styles.css — Hoja de estilos institucional (Propuesta 3 · Clara/Técnica)
   ============================================================
   Paleta: teal + ámbar Buenaventura. Las tres líneas de acción usan
   --linea-1/2/3 (paleta de datos, definida en js/config/marca.js).
   Tipografía: Space Grotesk (display) + Inter (UI).
   Brand block: blanco sobre teal institucional en el sidebar.
   ============================================================ */

:root {
  /* Buenaventura */
  --azul:        #177E6B;
  --azul-deep:   #0e5548;
  --azul-soft:   #2a8f7c;
  --azul-glow:   #3fb59d;
  --azul-hover:  #12695a;
  --dorado:      #B07800;
  --dorado-hi:   #d19700;
  --dorado-soft: #fbf1d8;
  --dorado-hover:#966600;

  /* Líneas de acción (paleta de datos) */
  --linea-1:     #B4531F;   /* Acceso a tierras       */
  --linea-2:     #0072B2;   /* Gestión Social         */
  --linea-3:     #009E73;   /* Desarrollo Comunitario */

  /* Neutros claros */
  --bg:            #f4f7f6;
  --bg-soft:       #eef3f1;
  --surface:       #ffffff;
  --surface-alt:   #fbfcfb;
  --border:        #d8e2de;
  --border-strong: #c6d3ce;
  --text:          #152420;
  --text-soft:     #3f524c;
  --text-muted:    #6c7d78;

  /* Estados */
  --success: #1f9d55;
  --warn:    #d97706;
  --danger:  #c0392b;
  --info:    #2563eb;

  /* Layout */
  --sidebar-w:           180px;  /* sidebar expandido */
  --sidebar-w-collapsed: 72px;   /* sidebar colapsado */
  --topbar-h:            72px;
  --radius:     14px;
  --radius-sm:  10px;
  --radius-pill:999px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(21,36,32,0.04);
  --shadow-md: 0 1px 2px rgba(21,36,32,0.04), 0 6px 24px rgba(21,36,32,0.06);
  --shadow-lg: 0 12px 36px rgba(21,36,32,0.10);

  /* Tipografía */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;

  /* Alias semanticos del cliente (los nombres --azul/--dorado se
     conservan por compatibilidad con 8400 lineas de esta hoja). */
  --primario: var(--azul);
  --acento:   var(--dorado);
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background:
    radial-gradient(1100px 700px at 95% -10%, rgba(176,120,0,0.05), transparent 60%),
    radial-gradient(900px 700px at -10% 110%, rgba(23,126,107,0.06), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }

.font-display { font-family: var(--font-display); }

/* ---------- Utilidades ---------- */
.flex   { display: flex; }
.col    { display: flex; flex-direction: column; }
.gap-4  { gap: 4px; }  .gap-8  { gap: 8px; }
.gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.center { display: flex; align-items: center; justify-content: center; }
.between{ display: flex; align-items: center; justify-content: space-between; }
.muted  { color: var(--text-muted); }
.soft   { color: var(--text-soft); }
.bold   { font-weight: 600; }
.small  { font-size: 12px; }
.text-right { text-align: right; }
.mb-4 { margin-bottom: 4px; } .mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.w-full { width: 100%; }
.hidden { display: none !important; }

/* ============================================================
   APP SHELL
   ============================================================ */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  height: 100vh;
  transition: grid-template-columns 0.25s ease;
}
/* Estado colapsado: la columna del sidebar se reduce sincronizada con el ancho del aside */
.app-shell.is-collapsed {
  grid-template-columns: var(--sidebar-w-collapsed) 1fr;
}
.topbar  { grid-area: topbar; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; overflow-y: auto; padding: 28px 32px 60px; }

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: visible; /* visible para que el botón toggle y los tooltips puedan salirse del borde */
  position: relative;
  /* El ancho lo controla grid-template-columns en .app-shell (con transición sincronizada).
     No fijamos width aquí para evitar conflictos con la grilla. */
}

/* Bloque de marca (blanco sobre teal institucional) — disposición vertical: logo arriba, texto debajo */
.brand-block {
  padding: 20px 14px 18px;
  background: linear-gradient(135deg, var(--azul-deep), var(--azul));
  color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.brand-block::after {
  /* Halo dorado sutil para conectar con el banner CTA */
  content: '';
  position: absolute; right: -40px; top: -40px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(176,120,0,0.18), transparent 70%);
  pointer-events: none;
}
.brand-block .logo {
  max-width: 130px; width: 100%; height: auto;
  flex-shrink: 0; position: relative; z-index: 1;
}
.brand-block .b-text {
  display: flex; flex-direction: column; gap: 2px; line-height: 1.15;
  position: relative; z-index: 1;
  text-align: center;
}
.brand-block .b-name {
  font-family: var(--font-display);
  font-size: 13.5px; letter-spacing: 0.2px;
  color: #fff;
}

/* Sidebar nav */
.nav-wrap { flex: 1; padding: 14px 0; overflow-y: auto; }
.section-title {
  padding: 12px 22px 4px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-muted);
}
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 22px;
  color: var(--text-soft);
  font-size: 13.5px; font-weight: 500;
  text-decoration: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nav-item:hover {
  background: var(--bg-soft);
  color: var(--azul);
  text-decoration: none;
}
.nav-item.active {
  background: linear-gradient(90deg, rgba(23,126,107,0.06), transparent);
  color: var(--azul);
  border-left-color: var(--azul);
  font-weight: 600;
}
.nav-item .ico {
  width: 18px; height: 18px;
  flex-shrink: 0;
  opacity: 0.85;
}
.nav-item.active .ico { opacity: 1; color: var(--azul); }

/* Footer del sidebar */
.side-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  font-size: 11px; color: var(--text-muted);
  display: flex; align-items: center; gap: 8px;
}
.side-foot .v {
  background: var(--bg-soft);
  padding: 2px 8px; border-radius: var(--radius-pill);
  font-weight: 700; letter-spacing: 0.3px;
  color: var(--text-soft);
}

/* ============================================================
   SIDEBAR — TOGGLE COLAPSAR/EXPANDIR
   ============================================================ */
/* Botón circular flotante en el borde derecho del sidebar — ubicado en la parte inferior,
   justo encima de la sección de versión, conservando el offset hacia afuera (right: -12px). */
.sidebar-toggle {
  position: absolute;
  bottom: 64px;        /* deja espacio sobre el side-foot (~46px de alto + 16px de aire) */
  right: -12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-soft);
  cursor: pointer;
  z-index: 20;
  padding: 0;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.sidebar-toggle:hover {
  background: var(--azul);
  color: #fff;
  border-color: var(--azul);
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(23,126,107,0.25);
}

/* Isotipo institucional Buenaventura: oculto cuando el sidebar está expandido,
   visible solo en modo colapsado (sustituye al logo blanco completo) */
.brand-block .isotipo {
  display: none;
  width: 40px; height: 40px;
  object-fit: contain;
  flex-shrink: 0;
  position: relative; z-index: 1;
}

/* Etiqueta corta de sección: oculta cuando el sidebar está expandido */
.section-title-short { display: none; }

/* Tooltip de los items de navegación (siempre presente, oculto por opacidad) */
.nav-item { position: relative; }
.nav-tooltip {
  position: absolute;
  left: 100%;
  margin-left: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--text);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  transition: opacity 0.18s ease, visibility 0.18s ease;
  box-shadow: 0 4px 12px rgba(21,36,32,0.18);
}
/* Flecha del tooltip apuntando hacia el sidebar */
.nav-tooltip::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-width: 5px 5px 5px 0;
  border-style: solid;
  border-color: transparent var(--text) transparent transparent;
}
/* En modo expandido los tooltips no aparecen nunca */
.sidebar:not(.collapsed) .nav-tooltip { display: none; }

/* ============================================================
   SIDEBAR — ESTADO COLAPSADO
   ============================================================ */

/* Brand block: solo el isotipo dorado, sin texto */
.sidebar.collapsed .brand-block {
  padding: 18px 0;
  justify-content: center;
  gap: 0;
}
.sidebar.collapsed .brand-block .logo,
.sidebar.collapsed .brand-block .b-text { display: none; }
.sidebar.collapsed .brand-block .isotipo { display: block; }

/* Nav items: solo iconos centrados, sin etiqueta */
.sidebar.collapsed .nav-wrap { overflow: visible; padding: 14px 0; }
.sidebar.collapsed .nav-item {
  padding: 11px 0;
  justify-content: center;
  border-left: none; /* el indicador activo se reemplaza por ::before */
  margin: 2px 8px;
  border-radius: var(--radius-sm);
}
.sidebar.collapsed .nav-item .nav-label { display: none; }

/* Hover: ligero realce */
.sidebar.collapsed .nav-item:hover {
  background: var(--bg-soft);
}

/* Indicador de item activo: barra vertical a la izquierda (3×20px) */
.sidebar.collapsed .nav-item.active {
  background: linear-gradient(90deg, rgba(23,126,107,0.08), transparent);
  border-left: none;
}
.sidebar.collapsed .nav-item.active::before {
  content: '';
  position: absolute;
  left: -8px; /* compensa el margin-left del item */
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: var(--azul);
  border-radius: 0 3px 3px 0;
}

/* Tooltips visibles solo en modo colapsado */
.sidebar.collapsed .nav-item:hover .nav-tooltip {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.3s;
}

/* Section titles: versión corta (4 caracteres) centrada */
.sidebar.collapsed .section-title-full { display: none; }
.sidebar.collapsed .section-title-short {
  display: block;
  text-align: center;
  letter-spacing: 1.2px;
}
.sidebar.collapsed .section-title {
  padding: 12px 0 4px;
  text-align: center;
}

/* Footer del sidebar en modo colapsado: solo la versión */
.sidebar.collapsed .side-foot {
  padding: 14px 0;
  justify-content: center;
}
.sidebar.collapsed .side-foot .v-label { display: none; }

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--border);
  padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 10;
}
.breadcrumb {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;            /* permite truncar en flex */
  max-width: calc(100vw - 540px); /* deja espacio para top-actions */
}
.breadcrumb .crumb {
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
/* Línea 2: título + subtítulo descriptivo opcional en línea (gris) */
.page-title-row {
  display: flex; align-items: baseline; gap: 10px;
  min-width: 0;
}
.breadcrumb h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700; letter-spacing: -0.4px;
  color: var(--text);
  line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
}
.page-subtitle-inline {
  font-size: 12px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}
/* Chip pequeño para el código de proyecto dentro del eyebrow del topbar */
.crumb .codigo-chip {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
  color: var(--azul);
  background: var(--surface);
  text-transform: none;
}
.top-actions { display: flex; align-items: center; gap: 12px; }

/* Pills */
.pill {
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-soft);
  transition: border-color 0.2s, color 0.2s;
}
.pill:hover { border-color: var(--azul); color: var(--azul); }
.pill.gold {
  background: linear-gradient(135deg, var(--dorado), var(--dorado-hi));
  border-color: var(--dorado);
  color: #2a1b00;
  box-shadow: 0 4px 14px rgba(176,120,0,0.30);
  font-weight: 700;
}
.pill.gold .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #2a1b00;
}
.pill.user {
  padding-left: 4px;
  cursor: pointer;
}
.pill.user .av {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--azul), var(--azul-soft));
  color: #fff; font-weight: 800; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 2px #fff, 0 2px 8px rgba(23,126,107,0.20);
  margin-right: 4px;
}

.icon-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-soft);
  cursor: pointer; transition: color 0.2s, border-color 0.2s;
  position: relative;
}
.icon-btn:hover { color: var(--azul); border-color: var(--azul); }
.icon-btn .badge-n {
  position: absolute; top: -3px; right: -3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--dorado); color: #2a1b00;
  font-size: 9px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--surface);
}

/* Year selector dentro de un pill */
.chip-year {
  /* Mismo ambar profundo que .btn-gold: sobre --dorado el blanco solo llega
     a 3.8:1 y sobre --dorado-hi baja a 2.6:1. */
  background: linear-gradient(135deg, #7F5800, #9C6A00);
  border: 1px solid #7F5800;
  color: #ffffff;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  font-weight: 700; font-size: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 14px rgba(127,88,0,0.28);
}
.chip-year select {
  background: transparent;
  border: none; outline: none;
  font: inherit; color: inherit;
  font-weight: 700; cursor: pointer;
}
/* Las opciones se pintan en el popup nativo (fondo claro del sistema):
   necesitan color propio o heredarian el blanco del chip. */
.chip-year select option {
  color: var(--text);
  background: var(--surface);
  font-weight: 600;
}

/* Menú dropdown del usuario */
.user-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--surface); color: var(--text);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  min-width: 220px;
  padding: 8px; z-index: 50;
}
.user-menu .head {
  padding: 6px 10px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.user-menu .head .name { font-size: 12.5px; font-weight: 700; }
.user-menu .head .email { font-size: 11px; color: var(--text-muted); }
.user-menu .item {
  width: 100%; text-align: left;
  padding: 8px 10px;
  background: transparent; border: none;
  border-radius: 6px;
  font-size: 13px; color: var(--text-soft);
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
}
.user-menu .item:hover { background: var(--bg-soft); color: var(--azul); }

/* ============================================================
   PAGE HEADER (DEPRECADO en páginas estándar)
   ----------------------------------------------------------------
   Conservado para compatibilidad con páginas que aún usan la clase
   .page-header con un h1 .page-title (ej. cabecera de detalle de
   proyecto). En las nuevas páginas se usa .page-toolbar (debajo)
   porque el título del módulo ahora vive en el topbar.
   ============================================================ */
.page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 24px; gap: 16px; flex-wrap: wrap;
}
.page-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 32px; font-weight: 700; letter-spacing: -1px;
  color: var(--text); line-height: 1;
}
.page-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 8px; }

/* ============================================================
   PAGE TOOLBAR — fila compacta de acciones encima del contenido
   ----------------------------------------------------------------
   Reemplaza al .page-header en páginas estándar (Dashboard,
   Proyectos, Actividades, etc.). El título del módulo ahora vive
   en el topbar, así que aquí solo viven filtros, toggles y
   botones primarios.
   ============================================================ */
.page-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.page-toolbar .left,
.page-toolbar .right {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.page-toolbar .right { margin-left: auto; }
/* Cuando una página solo tiene acciones a la derecha, conserva
   alineación a la derecha sin huecos a la izquierda */
.page-toolbar.actions-only { justify-content: flex-end; }
/* Subtítulo opcional contextual que vive en la toolbar (ej. "Año fiscal 2026") */
.page-toolbar .toolbar-context {
  font-size: 12px; color: var(--text-muted);
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.card-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 18px; gap: 12px;
}
.card-title {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700;
  color: var(--text); letter-spacing: -0.2px;
}
.card-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.card-more {
  white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  color: var(--azul); text-transform: uppercase; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
}
.card-more:hover { color: var(--azul-hover); text-decoration: none; }

/* ============================================================
   KPI CARDS (con sparkline + número display)
   ============================================================ */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.dashboard-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.dashboard-row.three { grid-template-columns: repeat(3, 1fr); }

.kpi-card {
  position: relative;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  transition: transform 0.2s, box-shadow 0.2s;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 4px;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.kpi-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--c1), var(--c2));
}
.kpi-card.kpi-blue   { --c1: var(--azul-glow);   --c2: var(--azul); }
.kpi-card.kpi-green  { --c1: #71d68d;            --c2: var(--linea-2); }
.kpi-card.kpi-gold   { --c1: var(--dorado-hi);   --c2: var(--dorado); }
.kpi-card.kpi-orange { --c1: #ffaa66;            --c2: var(--linea-3); }

.kpi-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--text-muted);
  display: flex; align-items: center; gap: 8px;
}
.kpi-label .ico {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(21,36,32,0.10);
}
.kpi-value {
  font-family: var(--font-display);
  font-size: 40px; font-weight: 700; line-height: 1;
  margin: 14px 0 8px;
  letter-spacing: -1.5px;
  background: linear-gradient(135deg, var(--text), var(--c2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kpi-foot {
  font-size: 12px; color: var(--text-soft);
  display: flex; align-items: center; gap: 6px;
}
.kpi-foot .delta { color: var(--success); font-weight: 700; }
.kpi-foot .delta.neutral { color: var(--text-muted); font-weight: 600; }

/* Sparkline (background SVG inline) */
.kpi-card.kpi-blue   .kpi-card.kpi-green  .kpi-card.kpi-gold   .kpi-card.kpi-orange 
/* ============================================================
   BARRAS DE AVANCE
   ============================================================ */
.progress {
  width: 100%;
  height: 8px;
  background: var(--bg-soft);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress > .bar {
  height: 100%;
  background: linear-gradient(90deg, var(--azul-glow), var(--azul));
  border-radius: var(--radius-pill);
  transition: width 0.4s ease;
}
.progress.thin { height: 6px; }
.progress.fat  { height: 10px; }
.progress .bar.bar-l1       { background: linear-gradient(90deg, #ffd23f, var(--linea-1)); }
.progress .bar.bar-l2   { background: linear-gradient(90deg, #71d68d, var(--linea-2)); }
.progress .bar.bar-l3 { background: linear-gradient(90deg, #ffaa66, var(--linea-3)); }
.progress .bar.bar-dorado     { background: linear-gradient(90deg, var(--dorado-hi), var(--dorado)); }
.progress .bar.bar-azul       { background: linear-gradient(90deg, var(--azul-glow), var(--azul)); }

/* ============================================================
   LÍNEA DE ACCIÓN (rows del card "Avance por línea")
   ============================================================ */
.linea-row { margin-bottom: 18px; }

/* ============================================================
   PÁGINAS EMBEBIDAS  (Compromisos, Proveedores)
   ============================================================
   Módulos que llegaron como aplicación HTML completa. El sistema
   aporta el sidebar y la topbar; la página trae su propio CSS y
   su navegación interna. El contenedor le cede todo el alto
   disponible para que solo haya una barra de desplazamiento. */
.pagina-embebida {
  height: calc(100vh - var(--topbar-h));
  width: 100%;
  overflow: hidden;
  background: var(--bg);
}
.pagina-embebida-frame {
  width: 100%; height: 100%;
  border: 0; display: block;
}

/* ============================================================
   DASHBOARD EJECUTIVO
   ============================================================ */

/* Punto de color de la línea de acción, junto a su nombre.
   El color viene inline desde MARCA.linea(): la hoja no lo fija. */
.linea-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; margin-right: 7px; vertical-align: 1px;
  flex-shrink: 0;
}

/* ---------- Semáforo de salud ---------- */
.dash-salud {
  display: flex; flex-wrap: wrap; gap: 18px;
  align-items: center; justify-content: space-between;
}
.dash-salud-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.salud-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-width: 132px;
}
.salud-chip .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.salud-chip .n {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700; line-height: 1;
}
.salud-chip .lbl {
  font-size: 11px; font-weight: 600; line-height: 1.2;
  color: var(--text-soft);
}
.dash-salud-meta {
  display: flex; gap: 24px; flex-wrap: wrap;
  padding-left: 18px; border-left: 1px solid var(--border);
}
.dash-salud-meta .item { display: flex; flex-direction: column; gap: 3px; }
.dash-salud-meta .k {
  font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
}
.dash-salud-meta .v {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 700; color: var(--text);
}
.dash-salud-meta .v em {
  font-style: normal; font-size: 12px;
  font-weight: 600; color: var(--danger);
}

/* ---------- Pie de la curva de ejecución ---------- */
.dash-curva-pie {
  margin-top: 10px; padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-soft);
}
.dash-curva-pie b { color: var(--text); }

/* ---------- Proyectos que requieren atención ---------- */
.atencion-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
  transition: background 0.15s ease;
}
.atencion-row:last-child { border-bottom: none; }
.atencion-row:hover { background: var(--bg-soft); text-decoration: none; }
.atencion-row .sem {
  width: 4px; align-self: stretch; min-height: 34px;
  border-radius: 2px; flex-shrink: 0;
}
.atencion-row .codigo {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700; color: var(--azul);
  width: 58px; flex-shrink: 0;
}
.atencion-row .titulo {
  flex: 1; min-width: 0;
  font-size: 13px; font-weight: 600; color: var(--text);
  display: flex; flex-direction: column; gap: 2px;
}
.atencion-row .titulo .ld {
  font-size: 11px; font-weight: 500; color: var(--text-muted);
  display: flex; align-items: center;
}
.atencion-row .cifras { display: flex; gap: 18px; flex-shrink: 0; }
.atencion-row .cifras .c {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 13px; font-weight: 600; text-align: right;
  min-width: 62px;
}
.atencion-row .cifras .c em {
  font-style: normal; font-size: 9px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-muted); font-weight: 700;
}
.atencion-row .senales {
  display: flex; gap: 6px; flex-shrink: 0;
  width: 150px; justify-content: flex-end;
}
.pill-mini {
  font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: var(--radius-pill);
  white-space: nowrap;
}
.pill-mini.riesgo { background: rgba(192,57,43,0.12);  color: #96271c; }
.pill-mini.alerta { background: rgba(217,119,6,0.14);  color: #8a4c02; }

@media (max-width: 1100px) {
  .atencion-row .senales { width: auto; }
  .atencion-row .cifras  { gap: 12px; }
  .dash-salud-meta { padding-left: 0; border-left: none; }
}
.linea-row:last-child { margin-bottom: 0; }
.linea-row .lh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 12px; }
.linea-row .ln { font-size: 14px; font-weight: 600; color: var(--text); }
.linea-row .ld {
  font-size: 11px; color: var(--text-muted);
  font-family: var(--font-display); letter-spacing: 0.4px; font-weight: 600;
}
.linea-row .meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); margin-top: 6px; gap: 12px; }
.linea-row .meta b { color: var(--text); font-weight: 600; }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.badge-default { background: var(--bg-soft); color: var(--text-soft); }
.badge-info    { background: #e0ecff; color: var(--azul); }
.badge-success { background: #d6f5e3; color: #14743a; }
.badge-warn    { background: #fef0c7; color: #92580c; }
.badge-danger  { background: #fde0dd; color: #a02218; }
.badge-azul    { background: rgba(23,126,107, 0.10); color: var(--azul); }

/* Línea-chip (chip temático con dot) */
.linea-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 600;
}
.linea-chip::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
}
.linea-chip.linea-1         { background: rgba(180,83,31, 0.16); color: #8A3E17; }
.linea-chip.linea-1::before { background: var(--linea-1); }
.linea-chip.linea-2         { background: rgba(0,114,178, 0.14); color: #005C8F; }
.linea-chip.linea-2::before { background: var(--linea-2); }
.linea-chip.linea-3         { background: rgba(0,158,115, 0.16); color: #00674B; }
.linea-chip.linea-3::before { background: var(--linea-3); }

/* ============================================================
   PROYECTO ROWS
   ============================================================ */
.proyecto-row {
  padding: 13px 14px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 14px; align-items: center;
  transition: all 0.2s;
  margin-bottom: 8px;
}
.proyecto-row:hover {
  background: #fff;
  border-color: var(--azul);
  transform: translateX(2px);
}
.proyecto-row .codigo {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700;
  color: var(--text-soft); letter-spacing: 0.8px;
  border: 1px solid var(--border-strong);
  padding: 4px 8px; border-radius: 6px;
  background: var(--surface);
}
.proyecto-row .titulo {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.proyecto-row .titulo .ld {
  display: block; font-size: 11px; color: var(--text-muted);
  font-weight: 500; margin-top: 2px;
}
.proyecto-row .progress { width: 100px; }
.proyecto-row .pct {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  color: var(--text); min-width: 40px; text-align: right;
}

/* ============================================================
   DONUT CHART (envoltorio)
   ============================================================ */
.donut-wrap { display: flex; align-items: center; gap: 22px; }
.donut-legend { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.donut-legend .leg-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; gap: 10px;
}
.donut-legend .swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.donut-legend .label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.donut-legend .name { color: var(--text); font-weight: 500; }
.donut-legend .pct {
  color: var(--text-soft);
  font-family: var(--font-display); font-weight: 700;
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
  font-family: inherit;
}
.btn-primary { background: var(--azul); color: #fff; }
.btn-primary:hover  { background: var(--azul-hover); }
.btn-primary:disabled { background: var(--border-strong); cursor: not-allowed; }

.btn-secondary { background: #fff; color: var(--azul); border-color: var(--azul); }
.btn-secondary:hover { background: rgba(23,126,107, 0.06); }

.btn-gold {
  background: linear-gradient(135deg, #7F5800, #9C6A00);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(127,88,0,0.35);
  font-weight: 700;
}
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(176,120,0,0.45); }

.btn-ghost { background: transparent; color: var(--text-soft); border: 1px solid var(--border-strong); }
.btn-ghost:hover { background: var(--bg-soft); }

.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-lg { padding: 12px 22px; font-size: 14px; }

/* ============================================================
   BANNER CTA (teal institucional con glow dorado)
   ============================================================ */
.glow-banner {
  position: relative; overflow: hidden;
  margin-top: 16px;
  padding: 26px 30px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--azul-deep), var(--azul) 60%, var(--azul-soft));
  color: #fff;
  display: flex; justify-content: space-between; align-items: center;
  box-shadow: 0 14px 40px rgba(23,126,107,0.25);
  gap: 16px; flex-wrap: wrap;
}
.glow-banner::before {
  content: '';
  position: absolute; right: -120px; top: -120px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(176,120,0,0.40), transparent 70%);
  pointer-events: none;
}
.glow-banner .text { position: relative; z-index: 1; }
.glow-banner h4 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
}
.glow-banner p { margin: 0; color: rgba(255,255,255,0.85); font-size: 13px; }
.glow-banner .btn-gold { position: relative; z-index: 1; padding: 12px 22px; border-radius: var(--radius-pill); border: none; }

/* ============================================================
   FORMULARIOS
   ============================================================ */
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-row label {
  font-size: 12px; font-weight: 600;
  color: var(--text-soft);
  letter-spacing: 0.2px;
}
.form-row .hint { font-size: 11px; color: var(--text-muted); }
.form-control {
  width: 100%;
  padding: 10px 12px;
  font-size: 13.5px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  transition: border 0.15s, box-shadow 0.15s;
  font-family: inherit;
}
.form-control:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(23,126,107, 0.10);
}
.form-control:disabled { background: var(--surface-alt); cursor: not-allowed; }
.form-error { margin-top: 4px; font-size: 12px; color: var(--danger); }
select.form-control { appearance: auto; }

/* ============================================================
   TABLAS
   ============================================================ */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
.table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--surface); }
.table thead th {
  text-align: left;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--text-muted);
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}
.table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--text); }
.table tbody tr:hover { background: var(--surface-alt); }
.table tbody tr:last-child td { border-bottom: none; }
.table .row-action { color: var(--azul); font-weight: 600; cursor: pointer; }

/* ============================================================
   LOGIN
   ============================================================ */
.login-shell {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 80% 20%, rgba(176,120,0,0.20), transparent 50%),
    linear-gradient(135deg, var(--azul-deep), var(--azul));
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow: 0 30px 80px rgba(14,85,72, 0.40);
}
.login-card .login-logo {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-bottom: 22px;
}
.login-card .login-logo img,
.login-card .login-logo svg { max-width: 210px; width: 100%; height: auto; }
.login-card .login-title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700; letter-spacing: -0.5px;
  color: var(--azul);
  text-align: center;
}
.login-card .login-subtitle {
  font-size: 12px; color: var(--text-muted);
  text-align: center; margin-bottom: 6px;
  letter-spacing: 0.2px;
}
.login-card .login-footer {
  margin-top: 18px; font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}
.login-error {
  background: #fde0dd;
  color: #a02218;
  border: 1px solid #f5b8b1;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  margin-bottom: 14px;
}

/* ============================================================
   LOADING
   ============================================================ */
.loading-block {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 32px 16px; gap: 10px;
  color: var(--text-muted); font-size: 13px;
}
.spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--azul);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
  background: linear-gradient(90deg, #eef0f4 25%, #f7f8fa 37%, #eef0f4 63%);
  background-size: 400% 100%;
  border-radius: 4px;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ============================================================
   TOAST
   ============================================================ */
.toast-stack {
  position: fixed;
  top: 84px; right: 24px;
  z-index: 9999;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--azul);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  min-width: 280px; max-width: 380px;
  box-shadow: var(--shadow-md);
  font-size: 13px;
  animation: slide-in 0.25s ease;
}
.toast.toast-success { border-left-color: var(--success); }
.toast.toast-error   { border-left-color: var(--danger); }
.toast.toast-warn    { border-left-color: var(--warn); }
.toast.toast-info    { border-left-color: var(--info); }
.toast .toast-title { font-weight: 700; margin-bottom: 2px; font-size: 12.5px; }
@keyframes slide-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ============================================================
   MODAL
   ============================================================ */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 22, 50, 0.45);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000;
}
.modal-card {
  background: #fff;
  border-radius: var(--radius);
  width: 100%;
  max-width: 520px;
  padding: 24px;
  box-shadow: var(--shadow-lg);
  max-height: 90vh; overflow-y: auto;
}
.modal-card .modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.modal-card .modal-title {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700; color: var(--text);
}
.modal-card .modal-close {
  background: none; border: none; color: var(--text-muted);
  font-size: 18px; cursor: pointer;
}

/* ============================================================
   PROYECTOS — FILTROS, TABLA, PAGINACIÓN
   ============================================================ */

/* ----- Card de filtros ----- */
.alac-filters { padding: 16px 18px; margin-bottom: 16px; }
.alac-filters-row {
  display: grid;
  grid-template-columns: 130px 200px 160px 1fr auto;
  gap: 14px;
  align-items: end;
}
.alac-filter { display: flex; flex-direction: column; gap: 6px; }
.alac-filter label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-muted);
}
.alac-filter-grow { min-width: 0; }
.alac-filter-actions { display: flex; align-items: end; }

/* Search wrapper con icono */
.alac-search {
  position: relative;
  display: flex; align-items: center;
}
.alac-search > svg {
  position: absolute; left: 12px;
  color: var(--text-muted);
  pointer-events: none;
}
.alac-search > .alac-input { padding-left: 34px; width: 100%; }

/* Línea select con dot del color de la línea */
.alac-linea-select { position: relative; }
.alac-linea-select.has-dot { padding-left: 28px; }
.alac-linea-select.dot-1 { background-image: radial-gradient(circle at 12px center, var(--linea-1)       60%, transparent 60%); background-size: 8px 8px; background-repeat: no-repeat; }
.alac-linea-select.dot-2 { background-image: radial-gradient(circle at 12px center, var(--linea-2)   60%, transparent 60%); background-size: 8px 8px; background-repeat: no-repeat; }
.alac-linea-select.dot-3 { background-image: radial-gradient(circle at 12px center, var(--linea-3) 60%, transparent 60%); background-size: 8px 8px; background-repeat: no-repeat; }

/* ----- Inputs unificados (alac-input) ----- */
.alac-input {
  width: 100%;
  padding: 10px 14px;
  font-size: 13.5px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  transition: border 0.15s, box-shadow 0.15s;
  font-family: inherit;
  outline: none;
}
.alac-input:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(23,126,107, 0.10);
}
.alac-input:disabled { background: var(--surface-alt); color: var(--text-muted); cursor: not-allowed; }
.alac-textarea { resize: vertical; min-height: 64px; }
.alac-select { appearance: auto; cursor: pointer; }

/* ----- Tabla institucional (sin bordes verticales) ----- */
.alac-table-wrap { padding: 0; overflow: hidden; }

.alac-table-head,
.alac-tr {
  display: grid;
  /* COD (3 dígitos) · Nombre (toma todo el espacio sobrante) · Responsable
     · Estado · Avance · Presupuesto · Fechas · Acciones */
  grid-template-columns: 52px minmax(0, 1fr) 130px 96px 100px 120px 100px 76px;
  gap: 12px;
  padding: 14px 22px;
  align-items: center;
}
.alac-th.acciones,
.alac-td.acciones {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
/* Columna Responsable: solo nombre, una línea, con elipsis si no entra */
.alac-td.responsable { min-width: 0; }
.alac-resp-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.alac-resp-empty {
  font-size: 12.5px; color: var(--text-muted); font-style: italic;
}
.alac-table-head {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}
.alac-th {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-muted);
}
.alac-table-body { display: flex; flex-direction: column; }
.alac-tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.15s, transform 0.15s;
}
.alac-tr:last-child { border-bottom: none; }
.alac-tr-clickable { cursor: pointer; }
.alac-tr-clickable:hover { background: var(--surface-alt); }
.alac-tr-clickable:focus { outline: 2px solid var(--azul-glow); outline-offset: -2px; }
.alac-tr-skel { pointer-events: none; }

.alac-td.codigo { display: flex; }
.alac-td.nombre { min-width: 0; }
.alac-nombre {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-bottom: 4px;
}
.alac-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  display: flex; gap: 6px; align-items: center;
}

/* Chip de código (estilo display) */
.alac-codigo-chip {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700;
  color: var(--text-soft); letter-spacing: 0.6px;
  border: 1px solid var(--border-strong);
  padding: 4px 8px; border-radius: 6px;
  background: var(--surface);
  display: inline-block;
  white-space: nowrap;
}

.alac-avance-row { display: flex; align-items: center; gap: 10px; }
.alac-avance-pct {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700; color: var(--text);
}

.alac-money {
  font-family: var(--font-display);
  font-size: 13.5px; font-weight: 700;
  color: var(--text);
}

.alac-fechas-line {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 600; color: var(--text);
}
.alac-fechas-sub {
  font-size: 11px; color: var(--text-muted);
  font-family: var(--font-display); font-weight: 500;
}

/* Badges/píldoras de estado */
.pill-status {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.pill-status.b-plan   { background: var(--dorado-soft); color: #8a5a00; }
.pill-status.b-ok     { background: #d6f5e3; color: #14743a; }
/* v1.4.x: "En pausa" toma el azul que antes usaba "Completado" */
.pill-status.b-warn   { background: #d6e2ff; color: var(--azul); }
/* v1.4.x: "Completado" en verde oscuro relleno con texto blanco — único
   estado terminal-exitoso, debe destacar inequívocamente sobre los demás */
.pill-status.b-done   { background: #0e6b34; color: #ffffff; }
.pill-status.b-cancel { background: #fde0dd; color: #a02218; }
.pill-status.b-imp    { background: rgba(23,126,107, 0.10); color: var(--azul); }
.pill-status.b-res    { background: rgba(0,114,178, 0.14); color: var(--linea-2); }
.pill-status.b-pro    { background: var(--dorado-soft); color: #8a5a00; }

/* Píldora de rol/categoría */
.pill-rol {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  background: rgba(23,126,107, 0.08);
  color: var(--azul);
}
.pill-cat {
  display: inline-flex;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 10.5px; font-weight: 700;
  background: var(--bg-soft);
  color: var(--text-soft);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ----- Estados vacíos ----- */
.alac-empty {
  padding: 48px 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center;
}
.alac-empty-sm { padding: 28px 16px; }
.alac-empty-ico { font-size: 38px; margin-bottom: 6px; }
.alac-empty-title { font-size: 14px; font-weight: 700; color: var(--text); }
.alac-empty-sub { font-size: 12.5px; color: var(--text-muted); max-width: 380px; }

/* ----- Paginación ----- */
.alac-pagination {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  background: var(--surface-alt);
}
.alac-pag-info {
  font-size: 12px; color: var(--text-muted);
  font-family: var(--font-display); font-weight: 500;
}
.alac-pag-pills { display: flex; align-items: center; gap: 4px; }
.alac-pag-pill {
  min-width: 32px; height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-soft);
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border 0.15s;
}
.alac-pag-pill:hover:not(:disabled) {
  border-color: var(--azul);
  color: var(--azul);
  background: rgba(23,126,107, 0.04);
}
.alac-pag-pill.active {
  background: var(--azul);
  color: #fff;
  border-color: var(--azul);
}
.alac-pag-pill:disabled { opacity: 0.4; cursor: not-allowed; }
.alac-pag-ellipsis {
  color: var(--text-muted);
  font-weight: 700;
  padding: 0 4px;
}

/* ============================================================
   MODAL (alac-modal-*)  — sustituye al .modal-card básico
   ============================================================ */
.alac-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(21,36,32, 0.45);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000;
  padding: 24px;
  animation: alacModalFadeIn 0.18s ease;
}
@keyframes alacModalFadeIn { from { opacity: 0; } to { opacity: 1; } }

.alac-modal-card {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  box-shadow: 0 30px 80px rgba(14,85,72, 0.30), 0 4px 12px rgba(21,36,32, 0.06);
  animation: alacModalScaleIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
@keyframes alacModalScaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.alac-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--border);
}
.alac-modal-title {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700; letter-spacing: -0.4px;
  color: var(--text);
}
.alac-modal-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text-soft);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border 0.15s;
}
.alac-modal-close:hover { background: #fde0dd; color: #a02218; border-color: #f5b8b1; }

.alac-modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}
.alac-modal-foot {
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 10px;
  background: var(--surface-alt);
}

/* ============================================================
   FORMULARIO (FormField y secciones de formulario)
   ============================================================ */
.alac-form { display: flex; flex-direction: column; gap: 8px; }

.alac-form-section { margin-bottom: 18px; }
.alac-form-section:last-child { margin-bottom: 0; }
.alac-form-section-title {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--azul);
  padding-bottom: 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.alac-form-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px 14px;
}
.alac-field            { display: flex; flex-direction: column; gap: 6px; grid-column-end: span 12; min-width: 0; }
/* v1.10.1: para fields con span pequeño (ej. códigos) que llevan input
   con min-width implícito mayor a la celda asignada. Forza el shrink. */
.alac-field-tight .alac-input { min-width: 0; }
/* v1.10.1: se usa grid-column-end para evitar que el shorthand
   "grid-column: span N" se interprete como start (algunas combinaciones
   de navegador lo computan a grid-column-start: span N / end: auto, lo
   cual rompe el flow y empuja los items a una nueva fila). */
.alac-field-span-12    { grid-column-end: span 12; grid-column-start: auto; }
.alac-field-span-9     { grid-column-end: span 9;  grid-column-start: auto; }
.alac-field-span-8     { grid-column-end: span 8;  grid-column-start: auto; }
.alac-field-span-6     { grid-column-end: span 6;  grid-column-start: auto; }
.alac-field-span-4     { grid-column-end: span 4;  grid-column-start: auto; }
.alac-field-span-3     { grid-column-end: span 3;  grid-column-start: auto; }
.alac-field-span-2     { grid-column-end: span 2;  grid-column-start: auto; }

.alac-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-muted);
}
.alac-req { color: var(--dorado); margin-left: 4px; font-weight: 700; }
.alac-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.alac-error {
  font-size: 12px; color: var(--danger);
  display: flex; align-items: center; gap: 4px;
  margin-top: 2px;
}
.alac-field.has-error .alac-input {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.08);
}

/* Range slider institucional */
.alac-range {
  -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--azul), var(--azul-glow));
  outline: none;
}
.alac-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--azul);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(23,126,107, 0.30);
}
.alac-range::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%; background: #fff;
  border: 3px solid var(--azul); cursor: pointer;
  box-shadow: 0 2px 6px rgba(23,126,107, 0.30);
}

/* ============================================================
   DETALLE DE PROYECTO — cabecera, pestañas, KV, accordion
   ============================================================ */

/* Cabecera del detalle */
/* alac-detail-header / alac-crumb-back / alac-detail-title — DEPRECADOS:
   El código y nombre del proyecto viven en el topbar (Layout.jsx).
   Las reglas se conservan por compatibilidad pero ya no se usan. */
.alac-detail-header { align-items: flex-start; }
.alac-crumb-back {
  font-size: 11px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.alac-crumb-back a {
  color: var(--text-muted);
  transition: color 0.15s;
}
.alac-crumb-back a:hover { color: var(--azul); text-decoration: none; }
.alac-detail-title { font-size: 28px; line-height: 1.15; }

/* Toolbar específica de detalle de proyecto: chips a la izquierda,
   acciones (‹ Portafolio + Editar) a la derecha */
.alac-detail-toolbar {
  align-items: center;
}
.alac-detail-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center;
}
.alac-detail-actions { display: flex; gap: 8px; align-items: center; }

/* Pestañas */
.alac-tabs {
  display: flex; gap: 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
  overflow-x: auto;
}
.alac-tab {
  padding: 12px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-soft);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  font-family: inherit;
}
.alac-tab:hover { color: var(--azul); }
.alac-tab.active {
  color: var(--azul);
  border-bottom-color: var(--azul);
  font-weight: 700;
}

/* Información general */
.alac-info-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
}
.alac-loc-card { display: flex; flex-direction: column; }
.alac-loc-ico { vertical-align: -2px; margin-right: 6px; color: var(--linea-3); }

.alac-kv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 22px;
}
.alac-kv { min-width: 0; }
.alac-kv-span-2  { grid-column: span 2;  }
.alac-kv-span-3  { grid-column: span 3;  }
.alac-kv-span-4  { grid-column: span 4;  }
/* v1.12.5: spans 6 y 12 para la grilla de 12 columnas de Identificación */
.alac-kv-span-6  { grid-column: span 6;  }
.alac-kv-span-12 { grid-column: span 12; }
.alac-kv-label {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.alac-kv-value {
  font-size: 14px; font-weight: 500;
  color: var(--text);
  word-break: break-word;
}

.alac-rich-text {
  margin-top: 22px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.alac-section { margin-bottom: 14px; }
.alac-section:last-child { margin-bottom: 0; }
.alac-section-title {
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--azul);
  margin-bottom: 6px;
}
.alac-section-body {
  margin: 0;
  font-size: 13px; line-height: 1.55;
  color: var(--text-soft);
  white-space: pre-line;
}

/* ===========================================================
   Información general v1.1 — layout de 3 bandas
   1) Strip de KPIs horizontales
   2) Card principal (datos clave) + sidebar (ámbito territorial)
   3) Marco lógico en grid de 2 columnas
   =========================================================== */
.alac-info-v2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ----- Banda 1: KPIs horizontales ----- */
.alac-info-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.alac-info-stat {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 16px;
  min-width: 0;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.alac-info-stat:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: 0 1px 2px rgba(21,36,32,0.04), 0 6px 24px rgba(21,36,32,0.06);
}
.alac-info-stat-ico {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.alac-info-stat-ico.is-blue  { background: linear-gradient(135deg, #177E6B, #2a8f7c); }
.alac-info-stat-ico.is-gold  { background: linear-gradient(135deg, #B07800, #d19700); color: #4a3500; }
.alac-info-stat-ico.is-green { background: linear-gradient(135deg, #0072B2, #6aa040); }
.alac-info-stat-ico.is-muted { background: var(--bg-soft); color: var(--text-muted); }

.alac-info-stat-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.alac-info-stat-label {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-muted);
}
.alac-info-stat-value {
  font-size: 14px; font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}
.alac-info-stat-num {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 700;
  color: var(--azul);
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.alac-info-stat-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alac-info-stat-sub {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alac-info-stat-bar {
  margin-top: 4px;
}
.alac-info-stat-empty {
  color: var(--text-muted);
  font-style: italic;
  font-weight: 500;
}

/* Coordinador: avatar circular en lugar del icono cuadrado */
.alac-info-stat-coord {
  align-items: center;
}
.alac-info-coord-avatar {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0e5548, #177E6B);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.5px;
}
.alac-info-coord-mail {
  color: var(--azul);
  text-decoration: none;
}
.alac-info-coord-mail:hover { text-decoration: underline; }

/* ----- Banda 2: principal + sidebar ----- */
.alac-info-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.alac-info-main-card .card-header,
.alac-info-side-card .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.alac-info-chip-lg {
  font-size: 12px;
  padding: 6px 10px;
}

/* Sub-bloques con título dentro de la card principal */
.alac-info-block {
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.alac-info-block:first-of-type {
  border-top: none;
  padding-top: 4px;
}
/* v1.12.4: subtítulos de sub-bloque (IDENTIFICACIÓN / CLASIFICACIÓN /
   TIEMPO Y PRESUPUESTO) — se retiró la barra dorada vertical (::before)
   para una lectura más limpia. */
.alac-info-block-title {
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--azul);
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.alac-kv-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
/* v1.12.5: grilla de 12 columnas para la fila Código/Año/Estado/Nombre corto
   con anchos asimétricos (2/2/2/6) que dejan Nombre corto bien dimensionado. */
.alac-kv-grid-12 {
  grid-template-columns: repeat(12, 1fr);
}
.alac-info-money {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700;
  color: var(--azul);
}

/* Sidebar (ámbito territorial) */
.alac-info-side-card {
  display: flex;
  flex-direction: column;
}
.alac-info-side-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.alac-info-side-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--bg-soft);
  border-radius: 10px;
}
.alac-info-side-label {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-muted);
}
/* v1.12.7: alineado con el formato de descripción de beneficiarios
   (.alac-info-benef-desc) para que ÁMBITO y otros textos descriptivos
   se vean consistentes en la sidebar. */
.alac-info-side-value {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-soft);
  font-weight: 400;
  word-break: break-word;
}
.alac-info-side-value.mono {
  font-family: var(--font-display);
  letter-spacing: 0.5px;
}
.alac-info-side-strong {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  color: var(--azul);
}
.alac-info-side-foot {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* ----- v1.6: Equipo dentro de la card lateral (pestaña Principal) -----
   v1.12.5: el border-top/padding-top ahora viven en .alac-card-head-tight,
   que se aplica al header migrado. Aquí se neutralizan para evitar doble
   separador visual. */
.alac-info-side-team {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.alac-info-side-team-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.alac-info-side-team-title {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-soft);
}
.alac-info-side-team-title svg { color: var(--azul); }
.alac-info-side-team-count {
  font-family: var(--font-display);
  font-size: 11px; color: var(--text-muted);
}
.alac-info-side-team-empty {
  font-size: 12px; color: var(--text-muted);
  padding: 10px 0 4px;
  text-align: center;
}
.alac-info-side-team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* v1.12.6: gap reducido por la card horizontal más compacta */
  gap: 6px;
}
/* v1.12.6: tarjeta del Equipo en formato horizontal compacto.
   Avatar (28px) a la izquierda, nombre + rol apilados a la derecha.
   Pasa de ~75px a ~44px de alto. */
.alac-info-team-mini {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  text-align: left;
  transition: border-color 0.15s, transform 0.15s;
  min-width: 0;
}
.alac-info-team-mini:hover {
  border-color: var(--azul);
  transform: translateY(-1px);
}
/* v1.6: el coordinador conserva el borde uniforme; el realce se aplica
   en el avatar y la etiqueta de rol, no en el borde superior. */
.alac-info-team-mini-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700; font-size: 10.5px;
  display: flex; align-items: center; justify-content: center;
  /* v1.12.6: sin margin-bottom (la card es horizontal) */
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--azul-deep), var(--azul-soft));
  box-shadow: 0 2px 6px rgba(23,126,107,0.18);
}
/* v1.12.6: contenedor del nombre + rol apilados a la derecha del avatar */
.alac-info-team-mini-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.alac-info-team-mini-avatar.is-coord {
  /* Avatar del coordinador con tonos Buenaventura (azul deep + dorado glow). */
  background: linear-gradient(135deg, var(--azul-deep), var(--azul));
  box-shadow: 0 2px 8px rgba(176,120,0,0.32);
}
/* v1.12.6: en layout horizontal el nombre se trunca con elipsis
   (no se permiten 2 líneas para mantener el card bajo) */
.alac-info-team-mini-name {
  font-size: 11.5px; font-weight: 600; color: var(--text);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alac-info-team-mini-rol {
  font-size: 10px; color: var(--text-muted);
  margin-top: 1px;
  text-transform: capitalize;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alac-info-team-mini.is-coord .alac-info-team-mini-rol {
  /* Resalta el rol del coordinador */
  color: var(--text-soft);
  font-weight: 600;
}

/* v1.6: contenedor del contador + botón "Gestionar" en el header del equipo */
.alac-info-side-team-actions {
  display: inline-flex; align-items: center; gap: 8px;
}
.alac-info-side-team-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--azul);
  border-radius: 6px;
  font-size: 11px; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.alac-info-side-team-btn:hover {
  background: var(--azul);
  color: #fff;
  border-color: var(--azul);
}
.alac-info-side-team-btn svg { color: currentColor; }

/* ============================================================ */
/* v1.6: Modal de gestión de equipo del proyecto                */
/* ============================================================ */
.alac-equipo-modal { display: flex; flex-direction: column; gap: 20px; }

.alac-equipo-section {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.alac-equipo-section-head { margin-bottom: 10px; }
.alac-equipo-section-title {
  font-size: 14px; font-weight: 700; color: var(--text);
}
.alac-equipo-section-sub {
  font-size: 12px; color: var(--text-muted); margin-top: 2px;
}

.alac-equipo-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  background: var(--surface);
  border-radius: 8px;
}

/* --- Tabla de miembros activos --- */
.alac-equipo-table {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.alac-equipo-row {
  display: grid;
  /* Miembro (auto) · Rol (180px) · Fecha (110px) · Acciones (36px) */
  grid-template-columns: minmax(0, 1fr) 180px 110px 36px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  min-height: 56px;
}
.alac-equipo-row:last-child { border-bottom: none; }
.alac-equipo-row-head {
  background: var(--bg-soft);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-soft);
  min-height: 36px;
  padding-top: 8px; padding-bottom: 8px;
}
.alac-equipo-user {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.alac-equipo-avatar {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--azul-deep), var(--azul-soft));
  color: #fff;
  font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(23,126,107,0.18);
}
.alac-equipo-avatar-hist {
  background: linear-gradient(135deg, #b4b2a9, #888780);
  box-shadow: none;
  opacity: 0.85;
}
.alac-equipo-user-info { min-width: 0; }
.alac-equipo-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.alac-equipo-cargo {
  font-size: 11.5px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}
.alac-equipo-rol-select {
  padding: 6px 10px;
  font-size: 12.5px;
  height: 34px;
}
.alac-equipo-fecha {
  font-size: 12px; color: var(--text-soft);
  font-family: var(--font-display);
}
.alac-equipo-actions { display: flex; justify-content: flex-end; }
.alac-equipo-btn-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(178,31,45,0.25);
  background: #fff;
  color: #b21f2d;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.alac-equipo-btn-del:hover {
  background: #b21f2d; color: #fff; border-color: #b21f2d;
}
.alac-equipo-btn-del:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Form: agregar miembro --- */
/* 2 columnas: Usuario (proporcionalmente más ancho) y Rol.
   La fecha de asignación ya no se muestra: se asigna en el backend con CURDATE(). */
.alac-equipo-add-grid {
  display: grid;
  grid-template-columns: 2fr 1.2fr;
  gap: 12px;
}
.alac-equipo-hint {
  font-size: 11px;
  color: var(--dorado);
  background: rgba(176,120,0,0.10);
  border-left: 2px solid var(--dorado);
  padding: 4px 8px;
  margin-top: 4px;
  border-radius: 0 4px 4px 0;
}
.alac-equipo-add-foot {
  margin-top: 14px;
  display: flex; justify-content: flex-end;
}

/* --- Histórico --- */
.alac-equipo-hist-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none;
  font-size: 13px; font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
  padding: 0; margin: 0;
}
.alac-equipo-hist-toggle:hover { color: var(--azul); }
.alac-equipo-hist-toggle span { font-size: 10px; }
.alac-equipo-hist-list {
  margin-top: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.alac-equipo-hist-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.alac-equipo-hist-info { min-width: 0; }
.alac-equipo-hist-name {
  font-size: 13px; font-weight: 600; color: var(--text-soft);
}
.alac-equipo-hist-meta {
  font-size: 11.5px; color: var(--text-muted);
  margin-top: 1px;
}

/* --- Confirmación de desasignación (overlay dentro del modal) --- */
.alac-equipo-confirm-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(21,36,32, 0.55);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  /* Por encima del modal padre (z-index 9000) */
  z-index: 9100;
  padding: 20px;
}
.alac-equipo-confirm {
  background: #fff;
  border-radius: 12px;
  padding: 22px 24px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.alac-equipo-confirm-title {
  font-size: 16px; font-weight: 700; color: var(--text);
  margin-bottom: 8px;
}
.alac-equipo-confirm-body {
  font-size: 13px; color: var(--text-soft); line-height: 1.5;
  margin-bottom: 18px;
}
.alac-equipo-confirm-actions {
  display: flex; justify-content: flex-end; gap: 10px;
}

/* ----- Banda 3: Marco lógico ----- */
.alac-info-ml-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 22px;
}
/* v1.12.4: items del antiguo "Marco lógico" — se mantienen los estilos
   por compatibilidad pero sin el borde naranja izquierdo. */
.alac-info-ml-item {
  min-width: 0;
  padding: 14px 16px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.alac-info-ml-item .alac-section { margin-bottom: 0; }

/* v1.12.4: bloque "Detalles del proyecto" — layout 2 paneles, sin bordes
   naranjas. Panel izquierdo: descripción. Panel derecho: objetivo general
   + objetivos específicos apilados. */
.alac-info-detalles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* v1.12.5: gap horizontal ampliado para que descripción y objetivos
     no se sientan pegados; vertical (entre filas) se mantiene compacto. */
  gap: 18px 40px;
  align-items: start;
}
/* v1.12.6: dentro de "Detalles del proyecto" los textos de Descripción
   y Objetivos van justificados. Solo dentro de esta card para no afectar
   otros lugares donde se usa <Section>. */
.alac-info-detalles .alac-section-body {
  text-align: justify;
  hyphens: auto;
}
.alac-info-detalles-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (max-width: 900px) {
  .alac-info-detalles-grid { grid-template-columns: 1fr; }
}

/* v1.12.4: cabecera unificada de cards en la pestaña "General".
   Aplica a: Identificación y clasificación, Población objetivo y ámbito,
   Detalles del proyecto, Documentos del proyecto.
   - Ícono cuadrado 28x28 con fondo azul soft y borde teal institucional
   - Título teal institucional (mismo tamaño/peso que card-title)
   - Subtítulo gris muted (mismo tamaño que card-subtitle)
   - Soporta acciones a la derecha (botones, iaction-row, etc.)
*/
.alac-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.alac-card-head-ico {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(23,126,107, 0.08);
  color: var(--azul);
  border: 1px solid rgba(23,126,107, 0.15);
}
.alac-card-head-text {
  flex: 1;
  min-width: 0;
}
.alac-card-head-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--azul);
  letter-spacing: -0.2px;
  line-height: 1.25;
}
.alac-card-head-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.35;
}

/* v1.12.5: variante compacta para headers que viven dentro de otra card
   (ej.: "Equipo" dentro de la sidebar de "Población objetivo y ámbito").
   Reduce margin y usa border-top como separador con la sección anterior. */
.alac-card-head-tight {
  margin-top: 14px;
  margin-bottom: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* v1.12.6: bloque combinado "Beneficiarios" en grid 2 columnas.
   Izquierda: meta en ancho mínimo (crece según dígitos), centrada
   verticalmente. Derecha: descripción que ocupa el resto y hace wrap. */
.alac-info-benef-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 4px;
}
.alac-info-benef-meta {
  white-space: nowrap;
}
.alac-info-benef-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-soft);
  font-weight: 400;
}

/* Accordion (componentes y actividades) — abiertos por defecto, actividades como filas internas */
.alac-accordion { display: flex; flex-direction: column; gap: 14px; }
.alac-acc-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.alac-acc-item.open {
  border-color: var(--border-strong);
  box-shadow: 0 1px 2px rgba(21,36,32,0.04), 0 6px 16px rgba(23,126,107,0.05);
}
.alac-acc-head {
  width: 100%;
  display: grid;
  /* v1.4.x: las columnas del header del componente se alinean con las de la fila
     de actividad para que la lectura sea recta. El orden es:
     col 1: chip código | col 2: nombre | col 3: fechas | col 4: presupuesto |
     col 5: hueco avatar (no aplica al componente) | col 6: estado.
     - chip código: 44px (cabe ~3 dígitos, antes 64px para 5)
     - fechas: 130px (caben "26 Sep → 14 Nov" en una sola línea)
     - presupuesto: 150px (incluye padding-right de 18px de separación
       respecto al avatar — sin esto el monto queda pegado al ícono).
     Los íconos de acción y la flecha viven posicionados absolutamente fuera de este grid. */
  grid-template-columns: 44px 1fr 130px 150px 36px 36px;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  /* Fondo más oscuro que el cuerpo para distinguir visualmente la fila del componente
     de las filas de actividades (que usan --surface). */
  background: var(--bg-soft);
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s;
}
.alac-acc-head:hover { background: var(--bg-soft-hover, #e3e9f3); }
.alac-acc-item:not(.open) .alac-acc-head { border-bottom: none; }
/* La barra de avance dentro del header del componente necesita un track con suficiente contraste
   sobre el fondo del header (--bg-soft). El track por defecto usa --bg-soft y se confundiría. */
.alac-acc-head .progress { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.alac-acc-codigo {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700;
  /* v1.4.x: color de texto negro (más contraste sobre el chip blanco) */
  color: var(--text); letter-spacing: 0.4px;
  border: 1px solid var(--border-strong);
  padding: 4px 5px; border-radius: 6px;
  background: var(--surface);
  text-align: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* v1.4.x: el nombre del componente va en negrita (700) — peso de "negrita"
   estándar del sistema, alineado con .card-title y otros encabezados —
   para distinguirlo claramente de las actividades hijas (peso regular).
   Aplicamos el estilo directamente al contenedor porque el nombre se
   renderiza como texto suelto (sin elemento hijo) — antes el selector
   `> :first-child` nunca matcheaba un nodo de texto y el peso no se aplicaba. */
.alac-acc-nombre {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  font-size: 14px; font-weight: 600; color: var(--text);
}
.alac-acc-sub { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.alac-acc-progress { display: flex; align-items: center; gap: 10px; }
.alac-acc-pct {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700; color: var(--text);
  min-width: 38px; text-align: right;
}
.alac-acc-arrow {
  color: var(--text-muted);
  transition: transform 0.2s;
  display: block;
}
.alac-acc-item.open .alac-acc-arrow { transform: rotate(180deg); color: var(--azul); }

/* Cabecera del componente: dentro del wrapper conviven el botón clickable, los íconos de acción
   (Nueva actividad / Editar / Eliminar) y la flecha de toggle. La flecha vive al extremo derecho
   del wrapper, después de los íconos. Esto evita anidar botones dentro de un button. */
.alac-acc-head-wrap { position: relative; }
.alac-acc-head-wrap .alac-acc-head {
  /* Reservar espacio para 3 íconos (98px) + flecha (~38px) + holgura visual entre EstadoPill
     y el primer ícono (~36px). Total ≈ 180px. */
  padding-right: 180px;
}
/* Grupo de íconos de acción del componente: posicionado a la izquierda de la flecha */
.alac-acc-actions {
  position: absolute;
  top: 50%;
  right: 44px;          /* deja un hueco (~30px) para la flecha + padding del wrapper */
  transform: translateY(-50%);
  z-index: 1;
}
/* Flecha de toggle: al extremo derecho absoluto del wrapper */
.alac-acc-arrow-wrap {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  color: var(--text-muted);
  z-index: 1;
}
.alac-acc-arrow-wrap:hover { color: var(--azul); }

/* Cuerpo del componente: contiene las actividades como filas continuas (sin gap, sin padding lateral) */
.alac-acc-body {
  padding: 0;
  display: flex; flex-direction: column;
  background: var(--surface);
}
/* Actividades como filas internas: sin caja independiente, separadas sólo por una línea sutil */
.alac-act-row {
  display: grid;
  /* v1.4.x nuevo layout (alineado con .alac-acc-head):
     col 1: chip código (44px) | col 2: nombre | col 3: fechas (130px, una línea) |
     col 4: presupuesto (150px, incl. padding-right para separar del avatar) |
     col 5: avatar responsable | col 6: estado (ícono uniforme) | col 7: acciones */
  grid-template-columns: 44px 1fr 130px 150px 36px 36px auto;
  gap: 14px;
  align-items: center;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border);
  background: transparent;
  transition: background 0.15s;
}
/* Grupo de íconos de acción de cada actividad — usa las clases globales .alac-iaction-row / .alac-iaction */
.alac-act-actions { /* hereda de .alac-iaction-row */ }
.alac-act-row:last-child { border-bottom: none; }
.alac-act-row:hover { background: var(--surface-alt); }
.alac-act-row .codigo {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700;
  color: var(--text-soft); letter-spacing: 0.4px;
  border: 1px solid var(--border-strong);
  padding: 4px 5px; border-radius: 6px;
  background: var(--surface);
  text-align: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alac-act-row .titulo {
  /* v1.4.x: peso regular para diferenciarse del nombre del componente (negrita). */
  font-size: 13.5px; font-weight: 400; color: var(--text);
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.alac-act-row .titulo .ld {
  display: block; font-size: 11px; color: var(--text-muted);
  font-weight: 500; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.alac-act-row .pct {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  color: var(--text); min-width: 40px; text-align: right;
}

/* ============================================================
   v1.4.x — EDT y actividades: nuevas columnas
   Responsable (avatar compacto), Fechas (ini/fin con énfasis en fin),
   Presupuesto (solo símbolo + total). El header del componente
   replica los slots para alinearse visualmente con sus filas.
   ============================================================ */

/* --- Avatar del responsable (fila de actividad) ---
   Por defecto en escala de grises (no compite con el avance);
   al hacer hover sobre la fila o sobre el avatar se llena con
   el gradiente teal institucional, igual que en la página Usuarios. */
.alac-act-resp {
  display: inline-flex; align-items: center; justify-content: center;
  cursor: default;
}
.alac-act-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  /* gris base — discreto */
  background: linear-gradient(135deg, #c9cfdb, #aab1c0);
  color: #fff;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.5px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(21,36,32,0.10);
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
/* Estado "sin responsable" — aún más apagado */
.alac-act-avatar.is-empty {
  background: linear-gradient(135deg, #e2e6ee, #cdd3df);
  color: #fff;
}
/* v1.4.x: el color institucional sólo se aplica cuando el cursor está
   directamente sobre el avatar (no cuando se hace hover en cualquier
   parte de la fila — eso resultaba demasiado ruidoso). */
.alac-act-resp:hover .alac-act-avatar {
  background: linear-gradient(135deg, #0e5548, #2a8f7c);
  color: #fff;
  box-shadow: 0 2px 6px rgba(23,126,107,0.25);
  transform: scale(1.04);
}

/* --- Fechas en la fila de actividad ---
   v1.4.x: ambas fechas en una sola línea con el mismo tamaño de letra.
   Se mantiene énfasis en la fecha de fin a través del peso y color del
   texto principal; la fecha de inicio queda en color suave. */
.alac-act-fechas {
  font-family: var(--font-display);
  line-height: 1.2;
  text-align: left;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}
.alac-act-fechas-ini {
  /* v1.4.x: fecha de inicio en negro estándar del sistema */
  font-size: 12.5px;
  color: var(--text);
  font-weight: 500;
}
.alac-act-fechas-sep {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 600;
}
.alac-act-fechas-fin {
  /* v1.4.x: fecha de fin en azul institucional Buenaventura */
  font-size: 12.5px;
  color: var(--azul);
  font-weight: 700;
}

/* --- Presupuesto en la fila de actividad ---
   Sólo monto total con su símbolo. Alineado a la derecha.
   v1.4.x: padding-right extra para separar visualmente la columna del
   avatar del responsable, evitando que el monto quede pegado al ícono. */
.alac-act-money {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-align: right;
  white-space: nowrap;
  padding-right: 18px;
}

/* --- Header del componente: fechas, presupuesto y hueco de avatar ---
   El header del componente comparte el mismo orden visual que las
   filas internas para que las columnas se lean en línea recta. */
.alac-acc-spacer { display: inline-block; width: 100%; }
/* v1.4.x: fechas en una sola línea con el mismo tamaño (igual que en
   las actividades). Se conserva la separación por peso/color. */
.alac-acc-fechas {
  font-family: var(--font-display);
  line-height: 1.2;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}
.alac-acc-fechas-ini {
  /* v1.4.x: fecha de inicio en negro estándar del sistema */
  font-size: 12.5px;
  color: var(--text);
  font-weight: 500;
}
.alac-acc-fechas-sep {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 600;
}
.alac-acc-fechas-fin {
  /* v1.4.x: fecha de fin en azul institucional Buenaventura */
  font-size: 12.5px;
  color: var(--azul);
  font-weight: 700;
}
.alac-acc-money {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-align: right;
  white-space: nowrap;
  /* mantiene alineación vertical con .alac-act-money */
  padding-right: 18px;
}
/* Empty states (sin actividades) — ocultan visualmente sin romper el grid */
.alac-acc-fechas-empty,
.alac-acc-money-empty { color: transparent; }

/* --- v1.4.x: Estado en formato ícono circular uniforme ---
   Reemplaza al EstadoPill dentro de EDT y actividades para que el ancho
   de la columna no se mueva según la longitud del nombre del estado.
   Mismo tamaño (28x28) para todos los estados — el reconocimiento se
   resuelve por color + ícono, y el nombre completo aparece en tooltip. */
.alac-estado-ico {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: default;
}
.alac-estado-ico svg { width: 15px; height: 15px; display: block; }
.alac-estado-ico:hover { transform: scale(1.06); box-shadow: 0 2px 6px rgba(21,36,32,0.10); }
/* Paleta — alineada con .pill-status.
   v1.11.x (2026-05-31): rotación de colores en la pestaña EDT —
   "En ejecución" pasa a teal institucional (antes verde claro),
   "En pausa" pasa a gris neutro (antes azul) y
   "Completado" pasa a verde claro (antes verde oscuro relleno). */
.alac-estado-ico.b-plan   { background: var(--dorado-soft); color: #8a5a00;     border-color: rgba(138,90,0,0.18); }
.alac-estado-ico.b-ok     { background: #d6e2ff;           color: var(--azul); border-color: rgba(23,126,107,0.20); }
.alac-estado-ico.b-warn   { background: #e5e7eb;           color: #4b5563;     border-color: rgba(75,85,99,0.22); }
.alac-estado-ico.b-done   { background: #d6f5e3;           color: #14743a;     border-color: rgba(20,116,58,0.20); }
.alac-estado-ico.b-cancel { background: #fde0dd;           color: #a02218;     border-color: rgba(160,34,24,0.22); }

/* ============================================================
   v1.4.x — Resumen "Presupuesto anual" en la cabecera de la pestaña EDT
   Aparece a la izquierda del botón "+ Componente", a la altura de la
   columna de presupuesto. Muestra el monto programado y la variación
   respecto al presupuesto del POA activo (pendiente o excedente).
   ============================================================ */
.alac-edt-actions {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  /* el card-header usa align-items: flex-start; lo compensamos para que
     el resumen quede centrado verticalmente con el título */
  align-self: center;
}
/* v1.4.x: layout horizontal — bloque etiqueta+monto a la izquierda y
   chip delta a su derecha (centrado verticalmente con el monto). */
.alac-edt-presup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  line-height: 1.15;
}
/* Sub-bloque vertical: etiqueta sobre el monto */
.alac-edt-presup-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.alac-edt-presup-label {
  font-size: 10.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.alac-edt-presup-monto {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.2px;
}
/* Chip de variación — sólo se renderiza para pendiente o excedente,
   se ubica a la derecha del bloque etiqueta+monto. */
.alac-edt-presup-delta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.alac-edt-presup-delta.is-pendiente { background: var(--dorado-soft); color: #8a5a00; }
.alac-edt-presup-delta.is-excedente { background: #fde0dd; color: #a02218; }
/* Empty state interno: respeta el flujo sin caja */
.alac-acc-body > .alac-empty-sm { padding: 18px; }

/* Indicadores (tabla específica) */
.alac-ind-table {
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.alac-ind-head, .alac-ind-row {
  display: grid;
  grid-template-columns: 110px 110px 1fr 200px 110px 100px;
  gap: 14px;
  padding: 12px 16px;
  align-items: center;
}
.alac-ind-head {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-muted);
}
.alac-ind-row { border-bottom: 1px solid var(--border); }
.alac-ind-row:last-child { border-bottom: none; }
.alac-ind-name { min-width: 0; }
.alac-ind-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.alac-ind-meta {
  font-size: 11.5px; color: var(--text-muted);
  font-family: var(--font-display); font-weight: 500;
  margin-top: 2px;
}
.alac-ind-progress { display: flex; align-items: center; gap: 10px; }
.alac-ind-progress > .progress { flex: 1; }
.alac-ind-pct {
  font-family: var(--font-display);
  font-size: 12.5px; font-weight: 700; color: var(--text);
  min-width: 36px; text-align: right;
}
.alac-ind-frec { font-size: 12px; color: var(--text-soft); text-transform: capitalize; }

/* Equipo */
.alac-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.alac-team-card {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 16px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 4px;
  transition: border-color 0.15s, transform 0.15s;
}
.alac-team-card:hover { border-color: var(--azul); transform: translateY(-2px); }
.alac-team-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--azul-deep), var(--azul-soft));
  color: #fff; font-weight: 800; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
  box-shadow: inset 0 0 0 3px #fff, 0 4px 14px rgba(23,126,107,0.20);
}
.alac-team-name { font-size: 14px; font-weight: 700; color: var(--text); }
.alac-team-cargo { font-size: 12px; color: var(--text-muted); }
.alac-team-rol { margin: 6px 0 4px; }
.alac-team-fecha {
  font-family: var(--font-display);
  font-size: 11px; color: var(--text-muted);
}
.alac-team-email {
  font-size: 12px; color: var(--azul);
  margin-top: 4px;
  word-break: break-all;
}

/* Presupuesto */
.alac-pres-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
.alac-kpi-compact {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.alac-kpi-compact::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.alac-kpi-blue::before  { background: linear-gradient(90deg, var(--azul-glow), var(--azul)); }
.alac-kpi-gold::before  { background: linear-gradient(90deg, var(--dorado-hi), var(--dorado)); }
.alac-kpi-green::before { background: linear-gradient(90deg, #71d68d, var(--linea-2)); }
.alac-kpi-c-label {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.alac-kpi-c-value {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700; letter-spacing: -0.6px;
  color: var(--text);
  line-height: 1;
}
.alac-kpi-c-sub { font-size: 11.5px; color: var(--text-soft); margin-top: 6px; }

.alac-budget-bars { display: flex; flex-direction: column; gap: 18px; }
.alac-budget-row { display: flex; flex-direction: column; gap: 6px; }
.alac-budget-head { display: flex; justify-content: space-between; align-items: baseline; }
.alac-budget-label {
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-soft);
}
.alac-budget-value {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700;
  color: var(--text);
}
.alac-budget-pct { color: var(--text-muted); font-weight: 600; margin-left: 4px; }

/* Partidas */
.alac-partidas-table {
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.alac-part-head, .alac-part-row {
  display: grid;
  grid-template-columns: 120px 1fr 160px 130px 130px 140px;
  gap: 14px;
  padding: 11px 14px;
  align-items: center;
}
.alac-part-head {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-muted);
}
.alac-part-row { border-bottom: 1px solid var(--border); font-size: 12.5px; }
.alac-part-row:last-child { border-bottom: none; }
.alac-part-desc {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text);
}
.alac-part-fuente { color: var(--text-soft); font-size: 12px; }
.alac-pct-inline {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700;
  color: var(--text);
  margin-left: 8px;
  vertical-align: middle;
}

/* Intervenciones */
.alac-int-list { display: flex; flex-direction: column; gap: 8px; }
.alac-int-row {
  display: grid;
  grid-template-columns: 130px 1fr auto auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color 0.15s, transform 0.15s;
}
.alac-int-row:hover {
  border-color: var(--azul);
  transform: translateX(2px);
  background: #fff;
}
.alac-int-name { font-size: 13.5px; font-weight: 600; color: var(--text); }
.alac-int-loc {
  font-size: 11.5px; color: var(--text-muted);
  font-family: var(--font-display); font-weight: 500;
  margin-top: 2px;
}
.alac-int-ben { display: flex; align-items: center; gap: 8px; }
.alac-int-ben-lbl { font-size: 10.5px; color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; }
.alac-int-progress { display: flex; align-items: center; gap: 8px; }

/* Botón rojo (utilizado en confirmación de borrado) */
.btn-danger {
  background: var(--danger); color: #fff;
}
.btn-danger:hover { background: #a02218; }

/* ============================================================
   RESPONSIVE (≥1024px target — sistema interno)
   ============================================================ */
@media (max-width: 1180px) {
  .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
  .alac-table-head, .alac-tr {
    grid-template-columns: 110px 1fr 110px 130px 110px 110px;
    padding: 12px 16px;
    gap: 12px;
  }
  .alac-info-grid { grid-template-columns: 1fr; }
  .alac-pres-kpis { grid-template-columns: 1fr 1fr; }
  .alac-filters-row {
    grid-template-columns: 110px 180px 140px 1fr auto;
  }
  .alac-ind-head, .alac-ind-row {
    grid-template-columns: 100px 100px 1fr 160px 90px 90px;
    gap: 10px;
  }
  /* Información general v1.1 */
  .alac-info-strip { grid-template-columns: repeat(2, 1fr); }
  .alac-info-row { grid-template-columns: 1fr; }
  .alac-kv-grid-4 { grid-template-columns: repeat(2, 1fr); }
  /* v1.12.5: grid-12 también colapsa proporcionalmente en pantallas medianas */
  .alac-kv-grid-12 { grid-template-columns: repeat(6, 1fr); }
  .alac-info-ml-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  :root { --sidebar-w: 220px; }
  .main { padding: 18px 18px; }
  .dashboard-row, .dashboard-row.three { grid-template-columns: 1fr; }
  .alac-filters-row {
    grid-template-columns: 1fr 1fr;
  }
  .alac-filter-actions { grid-column: span 2; justify-content: stretch; }
  .alac-filter-actions .btn { width: 100%; justify-content: center; }
  .alac-pres-kpis { grid-template-columns: 1fr; }
  /* Información general v1.1 */
  .alac-info-strip { grid-template-columns: 1fr; }
  .alac-kv-grid-4 { grid-template-columns: 1fr 1fr; }
  .alac-kv-grid-12 { grid-template-columns: repeat(4, 1fr); }
  /* Spans 4 → 2 (para no saltar a 1 columna en grid de 2) */
  .alac-kv-span-3, .alac-kv-span-4 { grid-column: span 2; }
  .alac-kv-span-6, .alac-kv-span-12 { grid-column: 1 / -1; }
}

/* ============================================================
   PORTAFOLIO — Toggle de vista, mini KPIs, árbol, lateral
   ============================================================ */

/* ----- Toggle de vista (dos botones tipo segmented control) ----- */
.pmo-view-toggle {
  display: inline-flex;
  background: var(--bg-soft);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--border);
  gap: 2px;
}
.pmo-view-toggle-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: transparent;
  border: none;
  border-radius: 9px;
  color: var(--text-muted);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  font-family: inherit;
}
.pmo-view-toggle-btn:hover { color: var(--azul); }
.pmo-view-toggle-btn.active {
  background: var(--surface);
  color: var(--azul);
  box-shadow: 0 1px 3px rgba(21,36,32,0.06), 0 2px 6px rgba(23,126,107,0.05);
}
.pmo-view-toggle-btn svg { opacity: 0.85; }

/* ----- Pestañas del detalle de proyecto (segmented control) -----
   Reutiliza el estilo .pmo-view-toggle pero como bloque para que
   se ubique al inicio del contenido, con margen inferior y capacidad
   de scroll horizontal si las pestañas no caben. */
.alac-tabs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.alac-tabs-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  overflow-x: auto;
  margin-bottom: 0;
}
.alac-tabs-toggle .pmo-view-toggle-btn {
  white-space: nowrap;
}
@media (max-width: 900px) {
  .alac-tabs-bar { flex-direction: column; align-items: stretch; }
  .alac-tabs-toggle {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
  }
}

/* ----- Toggle "Mis proyectos" / "Todos" (chip-toggle) ----- */
.pmo-chip-toggle {
  display: inline-flex;
  background: var(--bg-soft);
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--border);
  gap: 2px;
}
.pmo-chip-toggle-btn {
  padding: 6px 14px;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
  white-space: nowrap;
}
.pmo-chip-toggle-btn:hover:not(:disabled) { color: var(--azul); }
.pmo-chip-toggle-btn.active {
  background: var(--surface);
  color: var(--azul);
  box-shadow: 0 1px 3px rgba(21,36,32,0.06);
}
.pmo-chip-toggle-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================================================
   VISTA OPERATIVA
   ============================================================ */

/* Mini KPIs (4 en fila) */
.pmo-mini-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
.pmo-mini-kpi {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
.pmo-mini-kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pmo-mini-kpi::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.pmo-mini-kpi.pmo-mini-kpi-azul::before       { background: linear-gradient(90deg, var(--azul-glow), var(--azul)); }
.pmo-mini-kpi.pmo-mini-kpi-agua::before       { background: linear-gradient(90deg, #ffd23f, var(--linea-1)); }
.pmo-mini-kpi.pmo-mini-kpi-economia::before   { background: linear-gradient(90deg, #71d68d, var(--linea-2)); }
.pmo-mini-kpi.pmo-mini-kpi-gobernanza::before { background: linear-gradient(90deg, #ffaa66, var(--linea-3)); }
.pmo-mini-kpi .lbl {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--text-muted);
}
.pmo-mini-kpi .val {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 700; letter-spacing: -0.6px;
  color: var(--text);
  line-height: 1;
  margin: 10px 0 6px;
}
.pmo-mini-kpi .sub { font-size: 11.5px; color: var(--text-muted); }

/* Filtros operativos */
.pmo-op-filters { padding: 14px 18px; margin-bottom: 16px; }
.pmo-op-filters-row {
  display: flex;
  align-items: end;
  gap: 14px;
  flex-wrap: wrap;
}
.pmo-op-filters-row .pmo-chip-toggle { align-self: end; }
.pmo-op-filters-row .alac-filter { min-width: 140px; }
.pmo-op-filters-row .alac-filter-grow { flex: 1; min-width: 220px; }

/* Card operativa */
.pmo-op-card { margin-bottom: 16px; }
.pmo-op-card .pmo-act-list,
.pmo-op-card .pmo-ind-list {
  display: flex; flex-direction: column; gap: 8px;
}

/* Fila de actividad */
.pmo-act-row {
  display: grid;
  grid-template-columns: 130px 1fr 130px 110px 130px;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.pmo-act-row:hover {
  background: #fff;
  border-color: var(--azul);
  transform: translateX(2px);
}
.pmo-act-row:focus { outline: 2px solid var(--azul-glow); outline-offset: -2px; }
.pmo-act-name { min-width: 0; }
.pmo-act-title {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pmo-act-sub {
  font-size: 11.5px; color: var(--text-muted);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pmo-act-fecha {
  font-family: var(--font-display);
  font-size: 12px; color: var(--text);
  text-align: right;
}
.pmo-act-fecha-line { font-weight: 700; font-size: 12.5px; }
.pmo-act-fecha-sub  { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; font-weight: 500; }
.pmo-act-vencida { color: var(--danger); }
.pmo-act-vencida .pmo-act-fecha-sub { color: var(--danger); }
.pmo-act-proxima .pmo-act-fecha-sub { color: var(--warn); font-weight: 700; }

.pmo-act-progress { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.pmo-act-pct {
  font-family: var(--font-display);
  font-size: 12.5px; font-weight: 700; color: var(--text);
  min-width: 36px; text-align: right;
}
.pmo-act-foot {
  margin-top: 10px;
  text-align: center; font-size: 11.5px;
  color: var(--text-muted);
}

/* Fila de indicador */
.pmo-ind-row {
  display: grid;
  grid-template-columns: 130px 1fr 110px 130px;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.pmo-ind-row:hover {
  background: #fff;
  border-color: var(--azul);
  transform: translateX(2px);
}
.pmo-ind-row:focus { outline: 2px solid var(--azul-glow); outline-offset: -2px; }
.pmo-ind-name { min-width: 0; }
.pmo-ind-title {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pmo-ind-sub {
  font-family: var(--font-display);
  font-size: 11.5px; color: var(--text-muted);
  margin-top: 2px;
  font-weight: 600;
}
.pmo-ind-vencimiento {
  font-family: var(--font-display);
  font-size: 12px; color: var(--text);
  text-align: right;
}

/* ============================================================
   VISTA JERÁRQUICA — grid + árbol + side
   ============================================================ */
.pmo-jerarquica-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
}
.pmo-side { display: flex; flex-direction: column; gap: 14px; }
.pmo-side-cta { margin-top: 0; padding: 22px 24px; }

.pmo-side-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.pmo-side-stat {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.pmo-side-stat .lbl {
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.pmo-side-stat .val {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700; letter-spacing: -0.4px;
  color: var(--text);
  line-height: 1;
}

/* ----- Árbol jerárquico ----- */
.pmo-tree-card { padding: 20px; }
.pmo-tree { display: flex; flex-direction: column; gap: 4px; }

.pmo-tree-node { display: flex; flex-direction: column; }

/* Cabecera del nodo (botón-toggle clickeable o estructura con varios botones) */
.pmo-tree-head {
  display: grid;
  grid-template-columns: 16px 6px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
button.pmo-tree-head { background: transparent; border: 1px solid transparent; }

.pmo-tree-head:hover {
  background: var(--surface-alt);
  border-color: var(--border);
  transform: translateX(2px);
}
.pmo-tree-head:focus { outline: 2px solid var(--azul-glow); outline-offset: -2px; }

.pmo-tree-chevron {
  color: var(--text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.pmo-tree-chevron.open { transform: rotate(90deg); color: var(--azul); }

/* Banderín de color institucional (sólo en línea de acción nivel 1) */
.pmo-tree-color {
  display: block;
  width: 4px; height: 22px;
  border-radius: 4px;
}

/* Niveles 2-5: ocultamos la columna de banderín de color */
.pmo-level-2 > .pmo-tree-head,
.pmo-level-3 > .pmo-tree-head,
.pmo-level-4 > .pmo-tree-head,
.pmo-level-5 > .pmo-tree-head {
  grid-template-columns: 16px auto 1fr auto auto auto;
}
.pmo-level-1 > .pmo-tree-head .pmo-tree-color { background: currentColor; }

/* Texto principal del nodo */
.pmo-tree-name {
  font-size: 14px; font-weight: 600;
  color: var(--text);
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pmo-level-1 > .pmo-tree-head .pmo-tree-name { font-size: 15px; font-weight: 700; }
.pmo-tree-link { color: var(--azul); cursor: pointer; }
.pmo-tree-link:hover { text-decoration: underline; }
.pmo-tree-peso {
  font-family: var(--font-display);
  font-size: 11px; color: var(--text-muted); font-weight: 600;
  margin-left: 4px;
}

.pmo-tree-stats {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.4px;
  display: inline-flex; gap: 4px; white-space: nowrap;
}

.pmo-tree-progress {
  display: inline-flex; align-items: center; gap: 8px;
}
.pmo-tree-pct {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700;
  color: var(--text);
  min-width: 36px; text-align: right;
}

/* Botón de toggle inline (cuando el nombre es link separado, nivel 3) */
.pmo-tree-toggle {
  background: transparent;
  border: none;
  padding: 0; margin: 0;
  display: inline-flex; align-items: center;
  cursor: pointer;
  color: var(--text-muted);
}
.pmo-tree-toggle:hover { color: var(--azul); }

/* Hijos del nodo: indentación + línea punteada vertical */
.pmo-tree-children {
  margin-left: 18px;
  padding-left: 14px;
  border-left: 1.5px dashed var(--border-strong);
  margin-top: 2px;
  margin-bottom: 4px;
  display: flex; flex-direction: column;
  gap: 2px;
  /* Animación suave de aparición */
  animation: pmoTreeOpen 0.22s ease;
  overflow: hidden;
}
@keyframes pmoTreeOpen {
  from { opacity: 0; transform: translateY(-4px); max-height: 0; }
  to   { opacity: 1; transform: translateY(0);    max-height: 4000px; }
}

/* Estados vacíos del árbol */
.pmo-tree-empty {
  font-size: 12px; color: var(--text-muted);
  padding: 8px 14px;
  font-style: italic;
}

/* Skeleton del árbol */
.pmo-tree-skel { display: flex; flex-direction: column; gap: 6px; padding: 6px 0; }
.pmo-tree-skel-row {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 12px;
}

/* Nodo de actividad (nivel 5) — fila más compacta */
.pmo-tree-head-act {
  grid-template-columns: 14px auto 1fr auto auto auto !important;
  padding: 8px 12px;
  font-size: 13px;
}
.pmo-tree-bullet {
  color: var(--text-muted);
  font-size: 16px; line-height: 1;
  width: 14px; text-align: center;
}
.pmo-tree-fecha {
  font-family: var(--font-display);
  font-size: 11.5px; font-weight: 600;
  color: var(--text-soft);
  white-space: nowrap;
}

/* ============================================================
   RESPONSIVE — Portafolio
   ============================================================ */
@media (max-width: 1180px) {
  .pmo-mini-kpis { grid-template-columns: repeat(2, 1fr); }
  .pmo-jerarquica-grid { grid-template-columns: 1fr; }
  .pmo-act-row {
    grid-template-columns: 110px 1fr 110px 100px;
  }
  .pmo-act-row .pmo-act-progress { display: none; }
  .pmo-ind-row {
    grid-template-columns: 110px 1fr 100px 110px;
  }
}
@media (max-width: 900px) {
  .pmo-mini-kpis { grid-template-columns: 1fr 1fr; }
  .pmo-tree-head { grid-template-columns: 16px 6px 1fr auto; }
  .pmo-tree-head .pmo-tree-stats { display: none; }
  .pmo-level-2 > .pmo-tree-head,
  .pmo-level-3 > .pmo-tree-head,
  .pmo-level-4 > .pmo-tree-head,
  .pmo-level-5 > .pmo-tree-head {
    grid-template-columns: 16px auto 1fr auto;
  }
  .pmo-act-row {
    grid-template-columns: 1fr auto;
    gap: 8px;
  }
  .pmo-act-row .alac-codigo-chip,
  .pmo-act-row .pmo-act-fecha,
  .pmo-act-row .pmo-act-progress { display: none; }
  .pmo-ind-row {
    grid-template-columns: 1fr auto;
  }
  .pmo-ind-row .alac-codigo-chip,
  .pmo-ind-row .pill-status { display: none; }
}

/* ============================================================
   INDICADORES (página global) y ACTIVIDADES (página global)
   ============================================================
   Estilos compartidos:
   - Mini KPIs clicables (heredan de pmo-mini-kpi pero con estado active)
   - Filtros operativos en una sola fila flexible
   - Tabla institucional con cabecera sticky al hacer scroll
   - Avatares mini con iniciales
   - Chips de urgencia (Hoy / Vencido / En X días)
   - Barras de cumplimiento por tipo de indicador
   - Botones de acción (íconos) compactos
   ============================================================ */

/* ----- Mini KPI clicable (extiende pmo-mini-kpi del Portafolio) ----- */
.pmo-mini-kpi.is-clickable {
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
  /* reset cuando es <button> */
  appearance: none;
  -webkit-appearance: none;
}
.pmo-mini-kpi.is-clickable:focus { outline: 2px solid var(--azul-glow); outline-offset: -2px; }
.pmo-mini-kpi.is-active {
  border-color: var(--azul);
  box-shadow: 0 1px 2px rgba(21,36,32,0.04), 0 6px 18px rgba(23,126,107,0.10);
}
.pmo-mini-kpi.is-active::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,126,107,0.04), transparent 60%);
  pointer-events: none;
}

/* Variante de mini-KPI verde (completadas) y rojo (atrasadas) */
.pmo-mini-kpi.pmo-mini-kpi-success::before { background: linear-gradient(90deg, #71d68d, var(--linea-2)); }
.pmo-mini-kpi.pmo-mini-kpi-danger::before  { background: linear-gradient(90deg, #ff8a80, var(--danger)); }

/* ============================================================
   FILTROS OPERATIVOS GLOBALES (compartido por las dos páginas)
   ============================================================ */
.alac-gfilters {
  padding: 14px 18px;
  margin-bottom: 16px;
}
.alac-gfilters-row {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
}
.alac-gfilters-row .alac-filter { min-width: 150px; flex: 0 1 auto; }
.alac-gfilters-row .alac-filter-grow { flex: 1 1 220px; min-width: 220px; }
.alac-gfilters-row .alac-filter-actions { align-self: end; display: flex; gap: 8px; flex-wrap: wrap; }

/* Bloque cobertura inline en la barra de subpestañas */
.alac-ben-cobertura {
  display: flex; align-items: baseline; gap: 0;
  margin-left: auto;
  border-left: 1px solid var(--border);
  padding-left: 16px;
}
.alac-ben-cob-item {
  display: flex; align-items: baseline; gap: 5px;
  padding: 0 14px;
  border-right: 1px solid var(--border);
}
.alac-ben-cob-item:last-child { border-right: none; padding-right: 0; }
.alac-ben-cob-num {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700; line-height: 1;
}
.alac-ben-cob-lbl {
  font-size: 10.5px; color: var(--text-muted); white-space: nowrap;
}
.alac-ben-cob-azul   { color: var(--azul); }
.alac-ben-cob-gobern { color: var(--gobernanza); }

/* Variante compacta: filtros en fila única sin desbordamiento */
.alac-gfilters-compact { padding: 10px 14px; margin-bottom: 12px; }
.alac-gfilters-compact .alac-gfilters-row { flex-wrap: nowrap; gap: 8px; }
.alac-gfilters-compact .alac-filter { gap: 2px; }
.alac-gfilters-compact .alac-filter label {
  font-size: 9.5px; letter-spacing: 0.8px; margin-bottom: 0;
}
.alac-gfilters-compact .alac-input {
  padding: 5px 8px; font-size: 12px; height: 32px; box-sizing: border-box;
}
/* Búsqueda: ícono más pequeño y padding ajustado para que no se solape */
.alac-gfilters-compact .alac-search {
  width: 100%;
}
.alac-gfilters-compact .alac-search > svg {
  left: 8px; width: 12px; height: 12px;
}
.alac-gfilters-compact .alac-search input.alac-input {
  padding: 5px 8px 5px 26px; font-size: 12px; height: 32px; box-sizing: border-box; width: 100%;
}

/* Toggle "Mis actividades / Todas" (alias de pmo-chip-toggle) */
.alac-gtoggle {
  display: inline-flex;
  background: var(--bg-soft);
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--border);
  gap: 2px;
}
.alac-gtoggle button {
  padding: 6px 14px;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
  white-space: nowrap;
}
.alac-gtoggle button.active {
  background: var(--surface);
  color: var(--azul);
  box-shadow: 0 1px 3px rgba(21,36,32,0.06);
}

/* Chip toggle como botón de acción rápida (Próximas mediciones / Solo atrasadas) */
.alac-quick-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-soft);
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.alac-quick-toggle:hover { border-color: var(--azul); color: var(--azul); }
.alac-quick-toggle.active {
  background: rgba(23,126,107,0.06);
  border-color: var(--azul);
  color: var(--azul);
}
.alac-quick-toggle.active.danger {
  background: rgba(192,57,43,0.06);
  border-color: var(--danger);
  color: var(--danger);
}

/* ============================================================
   TABLA GLOBAL DE INDICADORES (alac-igrid-*)
   ============================================================ */
.alac-igrid-wrap {
  padding: 0;
  overflow: hidden;
}
.alac-igrid-scroll {
  /* Permite que la cabecera quede sticky cuando la tabla se desborda */
  max-height: calc(100vh - 280px);
  overflow-y: auto;
}
.alac-igrid-head,
.alac-igrid-row {
  display: grid;
  grid-template-columns: 110px 110px 1.6fr 140px 130px 130px 140px 110px;
  gap: 12px;
  padding: 12px 18px;
  align-items: center;
}
.alac-igrid-head {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 2;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-muted);
}
.alac-igrid-row {
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.alac-igrid-row:last-child { border-bottom: none; }
.alac-igrid-row:hover { background: var(--bg-soft); }
.alac-igrid-row .alac-ind-title {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.alac-igrid-row .alac-ind-meta {
  font-size: 11.5px; color: var(--text-muted);
  font-family: var(--font-display); font-weight: 500;
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.alac-igrid-row .alac-igrid-name { min-width: 0; }
.alac-igrid-row .alac-igrid-vm {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700; color: var(--text);
  white-space: nowrap;
}
.alac-igrid-row .alac-igrid-vm-unit {
  font-size: 11px; color: var(--text-muted);
  font-weight: 500;
  margin-top: 2px;
}
.alac-igrid-row .alac-igrid-progress {
  display: flex; align-items: center; gap: 8px;
}
.alac-igrid-row .alac-igrid-progress > .progress { width: 100px; }
.alac-igrid-pct {
  font-family: var(--font-display);
  font-size: 12.5px; font-weight: 700; color: var(--text);
  min-width: 38px; text-align: right;
}

/* ============================================================
   TABLA GLOBAL DE ACTIVIDADES (alac-agrid-*)
   ============================================================ */
.alac-agrid-wrap {
  padding: 0;
  overflow: hidden;
}
.alac-agrid-scroll {
  max-height: calc(100vh - 320px);
  overflow-y: auto;
}
.alac-agrid-head,
.alac-agrid-row {
  display: grid;
  grid-template-columns: 110px 1.6fr 140px 130px 1.1fr 130px 140px 130px 110px;
  gap: 12px;
  padding: 12px 18px;
  align-items: center;
}
.alac-agrid-head {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 2;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-muted);
}
.alac-agrid-row {
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.alac-agrid-row:last-child { border-bottom: none; }
.alac-agrid-row:hover { background: var(--bg-soft); }
.alac-agrid-name { min-width: 0; }
.alac-agrid-title {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.alac-agrid-sub {
  font-size: 11.5px; color: var(--text-muted);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.alac-agrid-progress { display: flex; align-items: center; gap: 8px; }
.alac-agrid-progress > .progress { width: 100px; }
.alac-agrid-pct {
  font-family: var(--font-display);
  font-size: 12.5px; font-weight: 700; color: var(--text);
  min-width: 38px; text-align: right;
}
.alac-agrid-fechas {
  font-family: var(--font-display);
  font-size: 12px; color: var(--text);
  line-height: 1.3;
}
.alac-agrid-fechas-line { font-weight: 700; font-size: 12.5px; }
.alac-agrid-fechas-sub  {
  font-size: 11px; color: var(--text-muted);
  font-weight: 500; margin-top: 2px;
}
.alac-agrid-fechas.is-late .alac-agrid-fechas-sub,
.alac-agrid-fechas.is-late .alac-agrid-fechas-line { color: var(--danger); }
.alac-agrid-money {
  font-family: var(--font-display);
  font-size: 12.5px; font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.alac-agrid-money-sub {
  font-size: 11px; color: var(--text-muted);
  font-weight: 500;
  margin-top: 2px;
}

/* ============================================================
   AVATAR MINI (iniciales) — usado en columna Responsable
   ============================================================ */
.alac-mini-user {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0;
}
.alac-mini-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--azul-deep), var(--azul-soft));
  color: #fff;
  font-weight: 800; font-size: 10.5px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 2px #fff, 0 2px 6px rgba(23,126,107,0.18);
}
.alac-mini-uname {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ============================================================
   CHIPS DE URGENCIA (Hoy / Vencido / En X días)
   ============================================================ */
.alac-urgency {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
  margin-top: 4px;
}
.alac-urgency.u-hoy      { background: rgba(176,120,0,0.20); color: #7a5e00; }
.alac-urgency.u-vencido  { background: #fde0dd; color: #a02218; }
.alac-urgency.u-proximo  { background: rgba(0,158,115,0.16); color: #00674B; }
.alac-urgency.u-futuro   { background: var(--bg-soft); color: var(--text-soft); }

/* ============================================================
   BOTONES DE ACCIÓN ICÓNICOS (lápiz, gráfico, etc.)
   ============================================================ */
.alac-iaction-row {
  display: inline-flex; align-items: center; gap: 4px;
  justify-content: flex-end;
}
.alac-iaction {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-soft);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.alac-iaction:hover {
  background: var(--bg-soft);
  border-color: var(--azul);
  color: var(--azul);
}
.alac-iaction.is-primary {
  background: linear-gradient(135deg, var(--dorado), var(--dorado-hi));
  border-color: var(--dorado);
  color: #2a1b00;
  box-shadow: 0 2px 6px rgba(176,120,0,0.30);
}
.alac-iaction.is-primary:hover { transform: translateY(-1px); }

/* ============================================================
   BARRAS POR TIPO DE INDICADOR (impacto / resultado / proceso)
   ============================================================ */
.progress .bar.bar-impacto   { background: linear-gradient(90deg, var(--azul-glow), var(--azul)); }
.progress .bar.bar-resultado { background: linear-gradient(90deg, #71d68d, var(--linea-2)); }
.progress .bar.bar-proceso   { background: linear-gradient(90deg, var(--dorado-hi), var(--dorado)); }

/* ============================================================
   ENCABEZADO COMPACTO DE MEDICIÓN/AVANCE (modales)
   ============================================================ */
.alac-modal-meta-card {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.alac-modal-meta-row {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.alac-modal-meta-row > .alac-codigo-chip { flex-shrink: 0; }
.alac-modal-meta-name {
  font-size: 14.5px; font-weight: 700; color: var(--text);
  margin-top: 6px;
  word-break: break-word;
}
.alac-modal-meta-current {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.alac-modal-meta-stat .lbl {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.alac-modal-meta-stat .val {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 700;
  color: var(--text);
  line-height: 1;
}

/* Vista previa de impacto (se muestra debajo del campo "valor") */
.alac-preview-impact {
  background: linear-gradient(135deg, rgba(23,126,107,0.06), rgba(176,120,0,0.05));
  border: 1px solid rgba(23,126,107,0.12);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 8px;
  font-size: 12.5px; color: var(--text-soft);
  display: flex; align-items: center; gap: 10px;
}
.alac-preview-impact .pct {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 800; color: var(--azul);
  line-height: 1;
}

/* ============================================================
   HISTORIAL — gráfico + tabla de mediciones
   ============================================================ */
.alac-hist-chart {
  height: 240px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 16px;
}
.alac-hist-table {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.alac-hist-head, .alac-hist-row {
  display: grid;
  grid-template-columns: 110px 110px 110px 1.4fr;
  gap: 12px;
  padding: 10px 14px;
  align-items: center;
}
.alac-hist-head {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-muted);
}
.alac-hist-row { border-bottom: 1px solid var(--border); font-size: 12.5px; }
.alac-hist-row:last-child { border-bottom: none; }
.alac-hist-row .alac-hist-fecha {
  font-family: var(--font-display);
  font-weight: 600; color: var(--text);
}
.alac-hist-row .alac-hist-valor {
  font-family: var(--font-display);
  font-weight: 700; color: var(--text);
}
.alac-hist-row .alac-hist-pct {
  font-family: var(--font-display);
  font-weight: 700; color: var(--azul);
}
.alac-hist-row .alac-hist-notas {
  color: var(--text-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ============================================================
   RADIO GROUP HORIZONTAL (Tipo de indicador)
   ============================================================ */
.alac-radio-group {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.alac-radio-group label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  font-size: 12.5px; font-weight: 600;
  color: var(--text-soft);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.alac-radio-group label:hover { border-color: var(--azul); color: var(--azul); }
.alac-radio-group label.is-checked {
  background: rgba(23,126,107,0.06);
  border-color: var(--azul);
  color: var(--azul);
}
.alac-radio-group input[type="radio"] { display: none; }
.alac-radio-group .dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
}
.alac-radio-group .dot.dot-impacto   { background: var(--azul); }
.alac-radio-group .dot.dot-resultado { background: var(--linea-2); }
.alac-radio-group .dot.dot-proceso   { background: var(--dorado); }

/* ============================================================
   RESPONSIVE — tablas globales
   ============================================================ */
@media (max-width: 1280px) {
  .alac-igrid-head, .alac-igrid-row {
    grid-template-columns: 100px 100px 1.4fr 120px 110px 110px 130px 100px;
    padding: 12px 14px;
    gap: 10px;
  }
  .alac-agrid-head, .alac-agrid-row {
    grid-template-columns: 100px 1.4fr 120px 110px 1fr 110px 130px 110px 100px;
    padding: 12px 14px;
    gap: 10px;
  }
}
@media (max-width: 1180px) {
  .alac-modal-meta-current { grid-template-columns: 1fr 1fr; }
  .alac-igrid-row .alac-igrid-progress > .progress { width: 80px; }
  .alac-agrid-row .alac-agrid-progress > .progress { width: 80px; }
}
@media (max-width: 900px) {
  .alac-modal-meta-current { grid-template-columns: 1fr; }
  .alac-hist-head, .alac-hist-row { grid-template-columns: 90px 80px 70px 1fr; gap: 8px; padding: 8px 10px; }
  .alac-igrid-head, .alac-igrid-row {
    grid-template-columns: 1fr auto;
  }
  .alac-igrid-head > *:not(:first-child),
  .alac-igrid-row > *:not(.alac-igrid-name):not(.alac-iaction-row) { display: none; }
  .alac-agrid-head, .alac-agrid-row {
    grid-template-columns: 1fr auto;
  }
  .alac-agrid-head > *:not(:first-child),
  .alac-agrid-row > *:not(.alac-agrid-name):not(.alac-iaction-row) { display: none; }
}

/* ============================================================
   TABLA GLOBAL DE INTERVENCIONES (alac-igrid-int-*)
   ============================================================ */
.alac-igrid-int-wrap   { padding: 0; overflow: hidden; }
.alac-igrid-int-scroll { overflow-y: visible; }
.alac-igrid-int-head,
.alac-igrid-int-row {
  display: grid;
  /* Entidad(fr)  Tipo    Ubic.   Benef.  Estado  Fechas  Presupu. Acciones */
  grid-template-columns: 2fr 155px 120px 60px 100px 100px 105px 82px;
  gap: 10px;
  padding: 12px 18px;
  align-items: center;
}
.alac-igrid-int-head {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 2;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-muted);
}
.alac-igrid-int-row {
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.alac-igrid-int-row:last-child { border-bottom: none; }
.alac-igrid-int-row:hover { background: var(--bg-soft); }

/* Fuente 10px para pill-rol dentro de la tabla de intervenciones */
.alac-igrid-int-row .pill-rol { font-size: 10px; }
/* Fuente 10px para ubicación y estado en la tabla de intervenciones */
.alac-igrid-int-row .alac-loc-mini { font-size: 10px; }
.alac-igrid-int-row .alac-loc-mini > svg { width: 10px; height: 10px; }
/* Fecha inferior (fin) en negro */
.alac-igrid-int-row .alac-agrid-fechas-line { color: var(--text) !important; }
/* Presupuesto alineado a la derecha, con separación respecto a Acciones */
.alac-igrid-int-row .alac-agrid-money { text-align: right; font-size: 12px; padding-right: 8px; }
.alac-igrid-int-row .alac-iaction-row { padding-left: 8px; border-left: 1px solid var(--border); }

/* Chip "N vinculados" para beneficiarios de intervención */
.alac-ben-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(23,126,107, 0.08);
  color: var(--azul);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
}
.alac-ben-chip b {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
}

/* Ubicación territorial compacta (provincia · distrito · centro poblado) */
.alac-loc-mini {
  display: flex; align-items: center; gap: 4px;
  font-size: 11.5px; color: var(--text-soft);
  line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.alac-loc-mini > svg {
  flex-shrink: 0;
  color: var(--linea-3);
  opacity: 0.85;
}
.alac-loc-mini > span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ============================================================
   MODAL DETALLE DE INTERVENCIÓN — grid 2 columnas + mapa
   ============================================================ */
.alac-detail-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.alac-detail-col {
  display: flex; flex-direction: column;
  gap: 10px;
}
.alac-detail-col-title {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 4px;
}
.alac-kv-value.mono {
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: 0.3px;
}
.alac-map-card {
  display: flex; flex-direction: column;
  margin-top: 10px;
}
.alac-map-static {
  position: relative;
  width: 100%;
  height: 140px;
  background: linear-gradient(180deg, #f0f4ff 0%, #e8f1e6 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.alac-map-static svg {
  width: 100%; height: 100%;
  display: block;
}
.alac-map-pin-label {
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.92);
  padding: 4px 10px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  border: 1px solid var(--border);
}
.alac-map-empty {
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  margin-top: 10px;
  background: var(--surface-alt);
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  text-align: center;
}

/* ============================================================
   TABLA DE BENEFICIARIOS DENTRO DE INTERVENCIÓN
   (modal de detalle)
   ============================================================ */
.alac-bgrid {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.alac-bgrid-head,
.alac-bgrid-row {
  display: grid;
  grid-template-columns: 1.5fr 90px 100px 90px 100px 1.2fr 36px;
  gap: 10px;
  padding: 10px 14px;
  align-items: center;
}
.alac-bgrid-head {
  background: var(--surface-alt);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.alac-bgrid-row {
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.alac-bgrid-row:last-child { border-bottom: none; }

/* ============================================================
   MODAL VINCULAR BENEFICIARIO — lista de resultados
   ============================================================ */
.alac-vinc-results {
  margin-top: 8px;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-alt);
}
.alac-vinc-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px;
  text-align: center;
  gap: 6px;
}
.alac-vinc-list {
  display: flex; flex-direction: column;
}
.alac-vinc-item {
  display: flex; align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  background: #fff;
  transition: background 0.15s;
}
.alac-vinc-item:last-child { border-bottom: none; }
.alac-vinc-item:hover { background: var(--bg-soft); }
.alac-vinc-item.is-checked {
  background: rgba(23,126,107, 0.06);
  box-shadow: inset 3px 0 0 var(--azul);
}
.alac-vinc-item input[type="radio"] {
  accent-color: var(--azul);
  flex-shrink: 0;
}
.alac-vinc-item-name {
  display: flex; flex-direction: column;
  min-width: 0;
}
.alac-vinc-item-name .bold { font-size: 13px; font-weight: 600; color: var(--text); }
.alac-vinc-item-name .small { font-size: 11.5px; }

/* ============================================================
   BENEFICIARIOS — tabla y badges
   ============================================================ */
.alac-bgrid-wrap   { padding: 0; overflow: hidden; }
.alac-bgrid-scroll { max-height: calc(100vh - 380px); overflow-y: auto; }
.alac-bgrid-list-head,
.alac-bgrid-list-row {
  display: grid;
  grid-template-columns: 110px 2fr 130px 60px 70px 110px 1.2fr 110px;
  gap: 12px;
  padding: 12px 18px;
  align-items: center;
}
.alac-bgrid-list-head {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 2;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-muted);
}
.alac-bgrid-list-row {
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
  font-size: 13px;
}
.alac-bgrid-list-row:last-child { border-bottom: none; }
.alac-bgrid-list-row:hover { background: var(--bg-soft); }

/* Chip vacío "Sin DNI" */
.alac-chip-empty {
  display: inline-block;
  padding: 4px 10px;
  background: var(--bg-soft);
  color: var(--text-muted);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border: 1px dashed var(--border-strong);
}

/* Pill de tipo de beneficiario (colores con 12% de opacidad) */
.pill-tipo-ben {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: capitalize;
}
.pill-tipo-ben.tipo-socio        { background: rgba(23,126,107, 0.12);  color: var(--azul); }
.pill-tipo-ben.tipo-funcionario  { background: rgba(176,120,0, 0.16); color: #8a5a00; }
.pill-tipo-ben.tipo-beneficiario { background: rgba(0,114,178, 0.14);  color: var(--linea-2); }
.pill-tipo-ben.tipo-estudiante   { background: rgba(0,158,115, 0.16);  color: #00674B; }
.pill-tipo-ben.tipo-usuario      { background: rgba(91, 103, 137, 0.16); color: #3e4a6b; }

/* Sexo: chip mono pequeño M/F/O */
.alac-sexo-chip {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase;
}
.alac-sexo-chip.sexo-M    { background: rgba(23,126,107, 0.12);  color: var(--azul); }
.alac-sexo-chip.sexo-F    { background: rgba(0,158,115, 0.16);  color: #00674B; }
.alac-sexo-chip.sexo-otro { background: rgba(91, 103, 137, 0.16); color: #3e4a6b; }

/* ============================================================
   INFO BOX (azul) y WARN BOX (dorado) — para alertas en modales
   ============================================================ */
.alac-info-box {
  display: flex; gap: 10px;
  align-items: flex-start;
  padding: 10px 14px;
  background: rgba(23,126,107, 0.06);
  border-left: 3px solid var(--azul);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.5;
}
.alac-info-box svg {
  flex-shrink: 0;
  color: var(--azul);
  margin-top: 2px;
}
.alac-warn-box {
  display: flex; gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  background: rgba(176,120,0, 0.12);
  border: 1px solid var(--dorado);
  border-radius: 10px;
  margin-bottom: 8px;
}
.alac-warn-box-ico { font-size: 22px; line-height: 1; }
.alac-warn-box-body { flex: 1; min-width: 0; }
.alac-warn-box-title {
  font-size: 13px; font-weight: 700;
  color: #8a5a00;
}
.alac-warn-box-sub {
  font-size: 12px; color: var(--text-soft);
  margin-top: 2px;
}

/* ============================================================
   FICHA DE BENEFICIARIO — cabecera con avatar
   ============================================================ */
.alac-ficha-head {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(23,126,107, 0.04), rgba(176,120,0, 0.05));
  border: 1px solid var(--border);
  border-radius: 12px;
}
.alac-ficha-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--azul), var(--azul-glow));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700;
  flex-shrink: 0;
}
.alac-ficha-id {
  display: flex; flex-direction: column;
  gap: 6px; min-width: 0;
}
.alac-ficha-name {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  color: var(--text);
}
.alac-ficha-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
}

/* Tabla del historial de intervenciones del beneficiario */
.alac-hist-int {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.alac-hist-int-head,
.alac-hist-int-row {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 130px 110px 110px 1.5fr;
  gap: 10px;
  padding: 10px 14px;
  align-items: center;
}
.alac-hist-int-head {
  background: var(--surface-alt);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.alac-hist-int-row {
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.alac-hist-int-row:last-child { border-bottom: none; }
.alac-hist-int-row:hover { background: var(--bg-soft); }

/* ============================================================
   PANEL DE ESTADÍSTICAS (Beneficiarios)
   ============================================================ */
.alac-stats-filter {
  display: flex; align-items: center;
  gap: 18px;
  padding: 16px 18px;
}
.alac-stats-resumen {
  display: flex; flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  padding-left: 18px;
}
.alac-stats-resumen-num {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 700;
  color: var(--azul);
  line-height: 1;
}
.alac-stats-resumen-lbl {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 4px;
}
.alac-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.alac-stats-bigvalue {
  font-family: var(--font-display);
  font-size: 60px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 16px;
}
.alac-stats-bigvalue-unit {
  font-size: 16px;
  color: var(--text-muted);
  font-weight: 500;
}

/* ============================================================
   RESPONSIVE — tablas nuevas
   ============================================================ */
@media (max-width: 1280px) {
  .alac-igrid-int-head, .alac-igrid-int-row {
    grid-template-columns: 100px 1.4fr 110px 1fr 100px 100px 120px 110px 100px;
    padding: 12px 14px;
    gap: 10px;
  }
  .alac-bgrid-list-head, .alac-bgrid-list-row {
    grid-template-columns: 100px 1.6fr 110px 50px 60px 100px 1fr 100px;
    padding: 12px 14px;
    gap: 10px;
  }
}
@media (max-width: 1100px) {
  .alac-detail-2col { grid-template-columns: 1fr; }
  .alac-stats-grid  { grid-template-columns: 1fr; }
  .alac-bgrid-head, .alac-bgrid-row {
    grid-template-columns: 1.2fr 80px 90px 80px 1fr 36px;
  }
  .alac-bgrid-head > *:nth-child(6),
  .alac-bgrid-row > *:nth-child(6) { display: none; }
}
@media (max-width: 900px) {
  .alac-igrid-int-head, .alac-igrid-int-row {
    grid-template-columns: 1fr auto;
  }
  .alac-igrid-int-head > *:not(:first-child),
  .alac-igrid-int-row > *:not(.alac-agrid-name):not(.alac-iaction-row) { display: none; }
  .alac-bgrid-list-head, .alac-bgrid-list-row {
    grid-template-columns: 1fr auto;
  }
  .alac-bgrid-list-head > *:not(:nth-child(2)),
  .alac-bgrid-list-row > *:nth-child(n+3):not(:last-child),
  .alac-bgrid-list-row > *:nth-child(1) { display: none; }
  .alac-hist-int-head, .alac-hist-int-row {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .alac-hist-int-head > *:nth-child(n+3),
  .alac-hist-int-row > *:nth-child(n+3) { display: none; }
  .alac-stats-filter { flex-direction: column; align-items: flex-start; }
  .alac-stats-resumen { border-left: none; padding-left: 0; align-items: flex-start; }
}

/* ============================================================
   FINANZAS — Presupuesto y Fuentes
   ============================================================ */

/* ----- KPIs grandes del Presupuesto (3 cards en fila) ----- */
.pres-kpis-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
.pres-kpi {
  position: relative;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.pres-kpi::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--azul-glow), var(--azul));
}
.pres-kpi.pres-kpi-azul::before  { background: linear-gradient(90deg, var(--azul-glow), var(--azul)); }
.pres-kpi.pres-kpi-gold::before  { background: linear-gradient(90deg, var(--dorado-hi), var(--dorado)); }
.pres-kpi.pres-kpi-verde::before { background: linear-gradient(90deg, #71d68d, var(--linea-2)); }
.pres-kpi-title {
  font-size: 11px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px;
}
.pres-kpi-value {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 700; color: var(--text);
  line-height: 1.1;
}
.pres-kpi-sub {
  margin-top: 4px; font-size: 12.5px; color: var(--text-soft);
}
.pres-kpi-bar-wrap { margin-top: 14px; }
.pres-kpi-bar-track {
  height: 8px; border-radius: 999px;
  background: var(--bg-soft); overflow: hidden;
}
.pres-kpi-bar-fill {
  height: 100%; border-radius: 999px;
  transition: width 0.4s ease;
}
.pres-kpi-bar-fill.pres-bar-azul    { background: linear-gradient(90deg, var(--azul-glow), var(--azul)); }
.pres-kpi-bar-fill.pres-bar-gold    { background: linear-gradient(90deg, var(--dorado-hi), var(--dorado)); }
.pres-kpi-bar-fill.pres-bar-success { background: linear-gradient(90deg, #71d68d, var(--linea-2)); }
.pres-kpi-bar-fill.pres-bar-warn    { background: linear-gradient(90deg, #ffaa66, var(--linea-3)); }
.pres-kpi-bar-fill.pres-bar-danger  { background: linear-gradient(90deg, #ff8a80, var(--danger)); }
.pres-kpi-bar-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 6px; font-size: 12px;
}
.pres-kpi-bar-pct { font-weight: 700; color: var(--text); }
.pres-kpi-delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px; font-weight: 600;
}
.pres-kpi-delta.is-up   { color: var(--success); }
.pres-kpi-delta.is-down { color: var(--danger); }

/* ----- Píldoras de categoría ----- */
.pill-categoria {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.pill-categoria.cat-personal     { background: rgba(23,126,107,0.12);  color: var(--azul); }
.pill-categoria.cat-equipamiento { background: rgba(0,114,178,0.12);  color: var(--linea-2); }
.pill-categoria.cat-servicios    { background: rgba(176,120,0,0.18); color: #8a5a00; }
.pill-categoria.cat-materiales   { background: rgba(0,158,115,0.14);  color: var(--linea-3); }
.pill-categoria.cat-viajes       { background: rgba(120,80,200,0.14); color: #5a3d96; }
.pill-categoria.cat-capacitacion { background: rgba(0,170,200,0.14);  color: #086f86; }
.pill-categoria.cat-otro         { background: var(--bg-soft);        color: var(--text-soft); }

/* ----- Píldoras de fuente ----- */
.pill-fuente {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.2px;
  max-width: 200px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pill-fuente.fuente-propio  { background: rgba(23,126,107,0.12);  color: var(--azul); }
.pill-fuente.fuente-donante { background: rgba(0,114,178,0.14);  color: var(--linea-2); }
.pill-fuente.fuente-mixto   { background: rgba(176,120,0,0.18); color: #8a5a00; }
.pill-fuente.fuente-vacio   { background: var(--bg-soft);        color: var(--text-muted); }

/* ----- Píldora de línea (chip con dot) ----- */
.pill-linea {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: var(--bg-soft);
  color: var(--text-soft);
  border: 1px solid var(--border);
}
.pill-linea.linea-1       { background: rgba(180,83,31,0.16);  color: #8A3E17; border-color: rgba(180,83,31,0.35); }
.pill-linea.linea-2   { background: rgba(0,114,178,0.14);  color: var(--linea-2); border-color: rgba(0,114,178,0.30); }
.pill-linea.linea-3 { background: rgba(0,158,115,0.14);  color: var(--linea-3); border-color: rgba(0,158,115,0.30); }

/* ----- Tabla de partidas (presupuesto global) ----- */
.alac-pgrid-wrap {
  padding: 0;
  overflow: hidden;
}
.alac-pgrid-scroll {
  max-height: calc(100vh - 420px);
  overflow-y: auto;
}
.alac-pgrid-head,
.alac-pgrid-row {
  display: grid;
  grid-template-columns: 110px 1.6fr 110px 130px 110px 100px 110px 130px 110px 96px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}
.alac-pgrid-head {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--text-muted);
}
.alac-pgrid-row {
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.alac-pgrid-row:last-child { border-bottom: none; }
.alac-pgrid-row:hover { background: var(--bg-soft); }
.alac-pgrid-row .num {
  text-align: right;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
}
.pres-pct {
  font-size: 11px; font-weight: 700;
  margin-top: 2px;
}
.pres-pct.pres-pct-ok   { color: var(--success); }
.pres-pct.pres-pct-warn { color: var(--warn); }
.pres-pct.pres-pct-low  { color: var(--danger); }
.pres-saldo-ok  { color: var(--success); }
.pres-saldo-bad { color: var(--danger); }

/* ----- Saldo info dentro del modal de ejecución ----- */
.pres-saldo-info {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; margin-top: 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.pres-saldo-info.is-ok  { background: rgba(31,157,85,0.10); color: var(--success); }
.pres-saldo-info.is-bad { background: rgba(192,57,43,0.10); color: var(--danger); }
.pres-saldo-info strong {
  font-family: var(--font-display);
  font-size: 15px;
}

/* ----- Vista por proyecto ----- */
.pres-proy-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 4px;
}
.pres-proy-kpi {
  padding: 14px 16px;
}
.pres-proy-kpi .lbl {
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--text-muted);
}
.pres-proy-kpi .val {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  color: var(--text);
  margin-top: 4px;
}
.pres-proy-kpi .sub {
  font-size: 12px; color: var(--text-soft);
  margin-top: 2px;
}
.pres-proy-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ----- Donut de fuentes ----- */
.pres-donut-wrap {
  display: flex; align-items: center; gap: 22px;
}
.pres-donut-chart {
  position: relative; flex-shrink: 0;
}
.pres-donut-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: none;
}
.pres-donut-center-num {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700; color: var(--text);
  line-height: 1.1;
}
.pres-donut-center-lbl {
  font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 1px;
}
.pres-donut-legend {
  display: flex; flex-direction: column; gap: 8px;
  flex: 1; min-width: 0;
}
.pres-donut-leg-row {
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  align-items: center; gap: 8px;
  font-size: 12.5px;
}
.pres-donut-leg-row .swatch {
  width: 12px; height: 12px; border-radius: 3px;
}
.pres-donut-leg-row .name {
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pres-donut-leg-row .amount {
  font-family: var(--font-display);
  font-weight: 600; color: var(--text);
}
.pres-donut-leg-row .pct {
  font-size: 11px; color: var(--text-muted); font-weight: 600;
  min-width: 32px; text-align: right;
}

/* ----- Barras horizontales por categoría ----- */
.pres-cat-bars {
  display: flex; flex-direction: column; gap: 12px;
}
.pres-cat-bar-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.pres-cat-bar-amount {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
  font-size: 13px;
}
.pres-cat-bar-track {
  height: 6px; border-radius: 999px;
  background: var(--bg-soft);
  overflow: hidden;
}
.pres-cat-bar-fill {
  height: 100%;
  background: var(--azul);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.pres-cat-bar-fill.cat-personal     { background: var(--azul); }
.pres-cat-bar-fill.cat-equipamiento { background: var(--linea-2); }
.pres-cat-bar-fill.cat-servicios    { background: var(--dorado); }
.pres-cat-bar-fill.cat-materiales   { background: var(--linea-3); }
.pres-cat-bar-fill.cat-viajes       { background: #7850c8; }
.pres-cat-bar-fill.cat-capacitacion { background: #00aac8; }
.pres-cat-bar-fill.cat-otro         { background: var(--text-muted); }

/* ============================================================
   FUENTES DE FINANCIAMIENTO
   ============================================================ */

/* ----- Tabla de fuentes ----- */
.alac-fgrid-wrap {
  padding: 0;
  overflow: hidden;
}
.alac-fgrid-scroll {
  max-height: calc(100vh - 360px);
  overflow-y: auto;
}
.alac-fgrid-head,
.alac-fgrid-row {
  display: grid;
  grid-template-columns: 1.6fr 100px 1.2fr 110px 130px 100px 130px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}
.alac-fgrid-head {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--text-muted);
}
.alac-fgrid-row {
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.alac-fgrid-row:last-child { border-bottom: none; }
.alac-fgrid-row:hover { background: var(--bg-soft); }
.alac-fgrid-row .num {
  text-align: right;
  font-family: var(--font-display);
}

/* ----- Cabecera del modal Detalle de fuente ----- */
.fuente-detail-head {
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(23,126,107,0.05), rgba(176,120,0,0.05));
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.fuente-detail-name {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.fuente-detail-chips {
  display: flex; gap: 8px;
  margin-top: 8px;
}
.fuente-detail-meta {
  margin-top: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.fuente-meta-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-soft);
}
.fuente-meta-row svg { flex-shrink: 0; color: var(--text-muted); }
.fuente-detail-desc {
  font-size: 13px; color: var(--text-soft);
  font-style: italic;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}

/* ----- Tabla de proyectos asociados a fuente ----- */
.fuente-proy-grid {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.fuente-proy-head,
.fuente-proy-row {
  display: grid;
  grid-template-columns: 110px 1.6fr 130px 70px 100px 1fr 110px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
}
.fuente-proy-head {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--text-muted);
}
.fuente-proy-row {
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.fuente-proy-row:last-of-type { border-bottom: none; }
.fuente-proy-row:hover { background: var(--bg-soft); }
.fuente-proy-row .num {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
}
.fuente-proy-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px;
  background: var(--surface-alt);
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-soft);
}
.fuente-proy-foot strong {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--text);
  font-weight: 700;
}

/* ============================================================
   RESPONSIVE — Finanzas
   ============================================================ */
@media (max-width: 1280px) {
  .pres-kpis-row { grid-template-columns: 1fr; }
  .pres-proy-kpis { grid-template-columns: 1fr 1fr; }
  .pres-proy-kpis > *:nth-child(3) { grid-column: 1 / -1; }
  .alac-pgrid-head, .alac-pgrid-row {
    grid-template-columns: 100px 1.4fr 100px 110px 100px 90px 100px 110px 100px 90px;
    padding: 11px 12px;
    gap: 10px;
  }
  .pres-proy-charts { grid-template-columns: 1fr; }
  .alac-fgrid-head, .alac-fgrid-row {
    grid-template-columns: 1.4fr 90px 1fr 90px 110px 90px 110px;
    padding: 11px 12px;
    gap: 10px;
  }
  .fuente-proy-head, .fuente-proy-row {
    grid-template-columns: 100px 1.4fr 110px 60px 90px 1fr 100px;
    padding: 10px 12px;
    gap: 10px;
  }
}
@media (max-width: 1100px) {
  .alac-pgrid-head > *:nth-child(7),
  .alac-pgrid-row > *:nth-child(7) { display: none; }
}
@media (max-width: 900px) {
  .pres-proy-kpis { grid-template-columns: 1fr; }
  .pres-proy-kpis > *:nth-child(3) { grid-column: auto; }
  .alac-pgrid-head, .alac-pgrid-row {
    grid-template-columns: 1.4fr auto;
  }
  .alac-pgrid-head > *:not(:nth-child(2)):not(:last-child),
  .alac-pgrid-row > *:not(:nth-child(2)):not(:last-child) { display: none; }
  .alac-fgrid-head, .alac-fgrid-row {
    grid-template-columns: 1.4fr auto;
  }
  .alac-fgrid-head > *:not(:first-child):not(:last-child),
  .alac-fgrid-row > *:not(:first-child):not(:last-child) { display: none; }
  .fuente-proy-head, .fuente-proy-row {
    grid-template-columns: 1fr auto;
  }
  .fuente-proy-head > *:not(:nth-child(2)):not(:nth-child(3)),
  .fuente-proy-row > *:not(:nth-child(2)):not(:nth-child(3)) { display: none; }
}

/* ============================================================
   Acciones por fila (kebab menu) — usado en la tabla de proyectos
   y reutilizable en otras tablas que necesiten Editar / Eliminar.
   ============================================================ */
.alac-row-menu-wrap {
  position: relative;
  display: inline-flex;
}
.alac-row-menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.alac-row-menu-btn:hover,
.alac-row-menu-btn:focus-visible {
  background: var(--bg-soft);
  color: var(--azul);
  border-color: var(--border);
  outline: none;
}
.alac-row-menu-btn.is-open {
  background: var(--bg-soft);
  border-color: var(--border-strong);
  color: var(--azul);
}
.alac-row-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgba(21,36,32,0.08),
    0 12px 32px rgba(21,36,32,0.12);
  padding: 6px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: alac-menu-fade 0.12s ease-out;
}
@keyframes alac-menu-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.alac-row-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 13px; font-weight: 500;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}
.alac-row-menu-item svg { flex-shrink: 0; opacity: 0.85; }
.alac-row-menu-item:hover,
.alac-row-menu-item:focus-visible {
  background: var(--bg-soft);
  outline: none;
}
.alac-row-menu-item.is-danger {
  color: var(--danger);
}
.alac-row-menu-item.is-danger:hover,
.alac-row-menu-item.is-danger:focus-visible {
  background: rgba(193, 41, 31, 0.08);
  color: var(--danger);
}

/* Variante "danger" del botón pmo-view-toggle-btn (usada en el
   header del detalle de proyecto para "Eliminar"). */
.pmo-view-toggle-btn.alac-btn-danger {
  color: var(--danger);
  border-color: rgba(193, 41, 31, 0.3);
}
.pmo-view-toggle-btn.alac-btn-danger:hover {
  background: rgba(193, 41, 31, 0.08);
  border-color: var(--danger);
  color: var(--danger);
}

/* Reglas responsive que originalmente vivían en el @media (max-width: 900px)
   y se movieron acá tras el refactor de la sección "Acciones por fila". */
@media (max-width: 900px) {
  .pres-donut-wrap { flex-direction: column; align-items: stretch; }
  .fuente-detail-head .fuente-detail-name { font-size: 18px; }
}

/* ============================================================
   POA — Plan Operativo Anual (v1.1)
   Estilos para la pestaña POAs y el selector contextual.
   Reutiliza variables y patrones del sistema (KPI, pills, tablas).
   ============================================================ */

/* ----- Toolbar de la pestaña POAs ----- */
.alac-poa-toolbar-card {
  padding: 14px 18px;
}
.alac-poa-toolbar {
  display: flex;
  justify-content: space-between;
  /* v1.12.1: center para emparejar el selector compacto con la pill de estado
     y los botones de acción que viven al lado. */
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.alac-poa-selector {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 320px;
  flex: 1 1 320px;
}
.alac-poa-selector-label {
  text-transform: uppercase;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--text-muted);
}
.alac-poa-selector .alac-input {
  width: 100%;
  font-weight: 500;
}
.alac-poa-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* ----- Card del POA activo: aprobación ----- */
.alac-poa-aprobacion {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 12.5px;
  color: var(--text-soft);
  font-style: italic;
}

/* ----- Distribución de actividades del POA ----- */
.alac-poa-estados {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0 4px;
}
.alac-poa-estado-chip {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 96px;
  gap: 4px;
  transition: border-color .15s, transform .15s;
}
.alac-poa-estado-chip:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.alac-poa-estado-chip .num {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.alac-poa-estado-chip .lbl {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  font-weight: 600;
}

/* ----- Tabla histórica de POAs ----- */
.alac-poas-table {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.alac-poas-head,
.alac-poas-row {
  display: grid;
  /* v1.12.x: 8 columnas
     Año | Código | Estado | Avance físico | Avance financiero | Salud | Indicadores | Presup. anual */
  grid-template-columns: 60px 130px 110px 1fr 1fr 110px 90px 110px;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
}
.alac-poas-head {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.alac-poas-row {
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  cursor: pointer;
  transition: background .15s;
}
.alac-poas-row:last-of-type { border-bottom: none; }
.alac-poas-row:hover {
  background: var(--bg-soft);
}
.alac-poas-row.is-active {
  background: rgba(23,126,107, 0.05);
  border-left: 3px solid var(--azul);
  padding-left: 11px;
}

/* Cell de avance dentro de la tabla histórica de POAs.
   Layout flex propio (no usa .progress global) para evitar el bug de
   especificidad CSS y garantizar que la barra se pinte y el % se lea. */
.alac-poas-avance {
  display: flex;
  align-items: center;
  gap: 8px;
}
.alac-poas-avance-bar {
  flex: 1 1 auto;
  min-width: 50px;
  max-width: 110px;
  height: 6px;
  background: var(--bg-soft);
  border-radius: 999px;
  overflow: hidden;
}
.alac-poas-avance-bar > .bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--azul-glow), var(--azul));
  transition: width .3s ease;
}
/* v1.12.x: variante verde para la barra de avance financiero en la
   tabla "Historial de POAs". Evita el background inline en el JSX,
   que es propenso a perderse cuando cPanel parte lineas largas. */
.alac-poas-avance-bar > .bar.bar-l2 {
  background: linear-gradient(90deg, #8bc26a, var(--linea-2));
}
.alac-poas-avance-pct--muted {
  color: var(--text-muted);
}
.alac-poas-avance-pct {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  min-width: 36px;
  text-align: right;
  flex-shrink: 0;
}

/* ----- Barra contextual del POA activo ----- */
.alac-poa-context-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(23,126,107,0.05), rgba(176,120,0,0.05));
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 14px;
  font-size: 12.5px;
  flex-wrap: wrap;
}
.alac-poa-context-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-size: 10.5px;
  color: var(--text-soft);
}
.alac-poa-context-select {
  min-width: 240px;
  font-size: 13px;
  font-weight: 500;
}
.alac-poa-context-hint {
  margin-left: auto;
  color: var(--text-muted);
  font-style: italic;
  font-size: 11.5px;
}

/* Variante compacta — usada cuando el bar va a la derecha del segmented
   de pestañas en el detalle de proyecto. Sin etiqueta "POA activo:",
   con padding/altura emparejados al menú de pestañas (.pmo-view-toggle)
   para que ambos elementos estén a la misma altura visual. */
.alac-poa-context-bar.is-compact {
  padding: 4px;
  margin-bottom: 0;
  gap: 0;
  border-radius: 12px;
}
.alac-poa-context-bar.is-compact .alac-poa-context-select {
  min-width: 0;
  width: 120px;
  height: 33px;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 600;
}

/* ----- Form layout (Nuevo POA / Replicar) ----- */
.alac-form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.alac-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  font-size: 13px;
  color: var(--text-soft);
  cursor: pointer;
}
.alac-check-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--azul);
}

/* ----- Responsive POA ----- */
@media (max-width: 1280px) {
  .alac-poas-head,
  .alac-poas-row {
    /* En pantallas medianas las barras se reducen y los pills mantienen su ancho */
    grid-template-columns: 56px 110px 100px 1fr 1fr 100px 80px 100px;
    gap: 10px;
  }
  .alac-poas-avance-bar { max-width: 80px; }
}
@media (max-width: 900px) {
  .alac-poa-toolbar { flex-direction: column; align-items: stretch; }
  .alac-poa-selector { min-width: 0; }
  .alac-form-row-2 { grid-template-columns: 1fr; }
  .alac-poas-head,
  .alac-poas-row {
    grid-template-columns: 1fr auto;
  }
  .alac-poas-head > *:not(:nth-child(2)):not(:nth-child(3)),
  .alac-poas-row  > *:not(:nth-child(2)):not(:nth-child(3)) {
    display: none;
  }
  .alac-poa-context-bar { flex-direction: column; align-items: flex-start; }
  .alac-poa-context-hint { margin-left: 0; }
}

/* ============================================================
   POA — Card unificada: header + banda compacta de KPIs +
   chips de actividades + objetivo inline.
   Reemplaza la antigua disposición de 3 cards separadas.
   ============================================================ */

/* La card principal del POA conserva el padding estándar */
.alac-poa-card-unificada { /* placeholder por si se requiere ajuste futuro */ }

/* ----- Banda compacta debajo del header del card ----- */
.alac-poa-banda {
  display: flex;
  align-items: stretch;
  gap: 18px;
  /* v1.12.4: sin border-top ni margin-top — la card del POA arranca
     directo con la cinta (sin header redundante encima), así que el
     separador y la separación vertical ya no aportan. */
  padding: 4px 0 10px;
  flex-wrap: wrap;
}

/* Bloque izquierdo: mini-KPIs en grid horizontal
   v1.12.1 (2026-05-31): 4 columnas — Avance físico / Avance financiero /
   Cobertura / Salud. Se retiraron "Comprometido" y "Planificado" (este último
   ahora se muestra como contexto del Avance financiero). */
.alac-poa-banda-kpis {
  flex: 1 1 620px;
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.1fr 1fr;
  gap: 14px;
  align-items: stretch;
}
/* Sub-texto del monto en "Avance financiero": puede ser largo (S/ 154,000
   de S/ 320,000) — permitimos que respete el espacio del bloque sin recortar. */
.alac-poa-mk-sub-money {
  white-space: normal;
  line-height: 1.35;
}

/* v1.12.2 — Wrap del selector compacto + pill de estado (separados).
   El selector va dentro del .alac-poa-context-bar y el pill queda como
   hermano para que sean elementos visualmente alineados pero no anidados. */
.alac-poa-selector-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* v1.12.2 — Bloque "Avance financiero" reorganizado.
   Fila superior: % grande a la izquierda, "Ejecución: monto" a la derecha.
   Bajo la barra: "Presupuesto anual: monto" alineado a la derecha. */
.alac-poa-fin-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}
/* v1.12.3: mismo tamaño para "Ejecución:" y "Presupuesto anual:" para que
   se lean como un par coherente bajo/al lado del % de avance financiero. */
.alac-poa-fin-ejec {
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
  line-height: 1.3;
}
.alac-poa-fin-ejec strong {
  color: var(--text-soft);
  font-family: var(--font-display);
  font-weight: 700;
}
.alac-poa-fin-presup {
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
  margin-top: 5px;
  line-height: 1.3;
}
.alac-poa-fin-presup strong {
  color: var(--text-soft);
  font-family: var(--font-display);
  font-weight: 700;
}

/* Cada mini-KPI */
.alac-poa-mk {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 12px;
  border-left: 1px solid var(--border);
  min-width: 0;
}
.alac-poa-mk:first-child {
  border-left: none;
  padding-left: 0;
}
.alac-poa-mk-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}
.alac-poa-mk-value {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alac-poa-mk-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* Avance: barra inline debajo del valor */
.alac-poa-mk-avance .alac-poa-mk-value {
  color: var(--azul);
}
.alac-poa-mk-bar {
  margin-top: 6px;
  height: 5px;
  background: var(--bg-soft);
  border-radius: 999px;
  overflow: hidden;
}
.alac-poa-mk-bar > .bar {
  height: 100%;
  border-radius: 999px;
  transition: width .3s ease;
  /* Fallback de color: el selector global `.progress .bar.bar-X` no
     aplica aquí porque el contenedor no es `.progress`. Replicamos los
     gradientes para cada variante usada en la banda del POA. */
  background: linear-gradient(90deg, var(--azul-glow), var(--azul));
}
.alac-poa-mk-bar > .bar.bar-azul {
  background: linear-gradient(90deg, var(--azul-glow), var(--azul));
}
.alac-poa-mk-bar > .bar.bar-l2 {
  background: linear-gradient(90deg, #8bc26a, var(--linea-2));
}
.alac-poa-mk-bar > .bar.bar-dorado {
  background: linear-gradient(90deg, var(--dorado-hi), var(--dorado));
}

/* Ejecutado en verde para reforzar la lectura */
.alac-poa-mk-ejec .alac-poa-mk-value {
  color: var(--linea-2);
}

/* Bloque derecho: chips de actividades */
.alac-poa-banda-acts {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 14px;
  border-left: 1px solid var(--border);
  min-width: 180px;
}
.alac-poa-acts-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.alac-poa-acts-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.alac-poa-acts-empty {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  padding-top: 4px;
}

/* Mini-chip de actividad por estado: número + label corto */
.alac-poa-act-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-soft);
  line-height: 1;
  transition: transform .15s, border-color .15s;
}
.alac-poa-act-chip:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
}
.alac-poa-act-chip strong {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
/* Variantes de color por estado de actividad */
.alac-poa-act-pendiente {
  background: rgba(255, 200, 80, 0.10);
  border-color: rgba(255, 200, 80, 0.30);
}
.alac-poa-act-pendiente strong { color: #b87900; }

.alac-poa-act-en_progreso {
  background: rgba(23,126,107, 0.07);
  border-color: rgba(23,126,107, 0.20);
}
.alac-poa-act-en_progreso strong { color: var(--azul); }

.alac-poa-act-completado {
  background: rgba(0,114,178, 0.10);
  border-color: rgba(0,114,178, 0.25);
}
.alac-poa-act-completado strong { color: var(--linea-2); }

.alac-poa-act-en_pausa {
  background: rgba(0,158,115, 0.10);
  border-color: rgba(0,158,115, 0.25);
}
.alac-poa-act-en_pausa strong { color: var(--linea-3); }

.alac-poa-act-cancelado {
  background: rgba(193, 41, 31, 0.08);
  border-color: rgba(193, 41, 31, 0.20);
}
.alac-poa-act-cancelado strong { color: var(--danger); }

/* ----- Objetivo anual inline (más compacto que la sección anterior) ----- */
.alac-poa-objetivo-inline {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-soft);
}
.alac-poa-objetivo-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-size: 10.5px;
  color: var(--text-muted);
  margin-right: 6px;
}
.alac-poa-objetivo-text {
  font-style: italic;
}

/* ----- Responsive de la banda ----- */
@media (max-width: 1280px) {
  .alac-poa-banda-kpis {
    grid-template-columns: 1fr 1.2fr 1.1fr 1fr;
    gap: 10px;
  }
  .alac-poa-mk-value { font-size: 17px; }
}
@media (max-width: 1100px) {
  .alac-poa-banda { gap: 12px; }
  .alac-poa-banda-kpis {
    grid-template-columns: 1fr 1fr;
  }
  .alac-poa-banda-acts {
    flex: 1 1 100%;
    border-left: none;
    border-top: 1px dashed var(--border);
    padding-left: 0;
    padding-top: 10px;
    margin-top: 4px;
  }
}
@media (max-width: 768px) {
  .alac-poa-banda-kpis {
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
  }
  .alac-poa-mk {
    border-left: none;
    padding-left: 0;
  }
  .alac-poa-mk-value { font-size: 18px; }
}

/* =====================================================================
   v1.12 (2026-05-31) - DASHBOARD DEL POA
   Cinta KPI extendida (Cobertura, Salud, Actividades rediseñado)
   + tarjetas dashboard bajo la cinta (Próximas / Indicadores / Riesgos)
   ===================================================================== */

/* --- Bloque "Actividades" rediseñado: grid 2 cols con dot + label + num --- */
.alac-poa-acts-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 14px;
  margin-top: 2px;
}
.alac-poa-act-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-soft);
  line-height: 1.4;
}
.alac-poa-act-row .alac-poa-act-dot {
  width: 8px; height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
.alac-poa-act-row .alac-poa-act-lab { flex: 1; }
.alac-poa-act-row .alac-poa-act-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--text);
}
.alac-poa-act-dot-completado  { background: #14743a; }
.alac-poa-act-dot-en_progreso { background: var(--azul); }
.alac-poa-act-dot-pendiente   { background: var(--dorado); }
.alac-poa-act-dot-en_pausa    { background: #9ca3af; }
.alac-poa-act-dot-cancelado   { background: #a02218; }

/* --- Bloque "Cobertura": dos valores en línea (benef + interv) --- */
.alac-poa-mk-cobertura .alac-poa-mk-doble {
  display: flex;
  gap: 16px;
  margin-top: 2px;
  align-items: baseline;
}
.alac-poa-mk-cobertura .alac-poa-mk-doble > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.alac-poa-mk-cobertura .alac-poa-mk-doble .v {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.15;
  color: var(--text);
}
.alac-poa-mk-cobertura .alac-poa-mk-doble .s {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* --- Bloque "Salud": semáforo con pill grande --- */
.alac-poa-mk-salud .alac-poa-salud-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  margin-top: 4px;
  border: 1px solid transparent;
}
.alac-poa-salud-pill .alac-poa-salud-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.alac-poa-salud-verde {
  background: #d6f5e3; color: #14743a;
  border-color: rgba(20,116,58,0.20);
}
.alac-poa-salud-verde .alac-poa-salud-dot { background: #14743a; }
.alac-poa-salud-ambar {
  background: #fbf1d8; color: #8a5a00;
  border-color: rgba(138,90,0,0.20);
}
.alac-poa-salud-ambar .alac-poa-salud-dot { background: #b87900; }
.alac-poa-salud-rojo {
  background: #fde0dd; color: #a02218;
  border-color: rgba(160,34,24,0.22);
}
.alac-poa-salud-rojo .alac-poa-salud-dot { background: #a02218; }
.alac-poa-salud-sin {
  background: #e5e7eb; color: #4b5563;
  border-color: rgba(75,85,99,0.22);
}
.alac-poa-salud-sin .alac-poa-salud-dot { background: #9ca3af; }

/* Variante --mini: pill de salud para celdas estrechas (tabla histórica de POAs).
   Se aplica el mismo color-coding pero con tipografía y padding más compactos,
   y se vuelve auto-suficiente (no depende del padre .alac-poa-mk-salud). */
.alac-poa-salud-pill.alac-poa-salud-pill--mini {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  margin-top: 0;
  border: 1px solid transparent;
  white-space: nowrap;
}
.alac-poa-salud-pill--mini .alac-poa-salud-dot {
  width: 6px; height: 6px;
}

/* --- Grid de tarjetas dashboard bajo la cinta --- */
.alac-poa-dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
.alac-poa-dash-grid.is-solo-indicadores {
  grid-template-columns: 1fr;
  max-width: 720px;
}
@media (max-width: 1100px) {
  .alac-poa-dash-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .alac-poa-dash-grid {
    grid-template-columns: 1fr;
  }
}

.alac-poa-dash-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: border-color .15s, box-shadow .15s;
  overflow: hidden;
}
.alac-poa-dash-card:hover {
  border-color: var(--border-strong);
}
/* v1.12.4: cabecera con fondo gris claro estilo cabecera de tabla
   (.alac-segui-table thead th), uniforme con el resto del sistema. */
.alac-poa-dash-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-soft);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.alac-poa-dash-card-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.alac-poa-dash-card-title svg {
  color: var(--text-muted);
  flex-shrink: 0;
}
.alac-poa-dash-card-sub {
  font-size: 11px;
  color: var(--text-muted);
  padding: 8px 14px 0;
}
.alac-poa-dash-card-list {
  display: flex;
  flex-direction: column;
  padding: 4px 14px 0;
}
/* v1.12.x: scroll vertical compacto cuando hay mas de 3 filas
   (el card esta dimensionado para 3 filas a la vista). */
.alac-poa-dash-card-list--scroll {
  max-height: 108px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.alac-poa-dash-card-list--scroll::-webkit-scrollbar {
  width: 6px;
}
.alac-poa-dash-card-list--scroll::-webkit-scrollbar-track {
  background: transparent;
}
.alac-poa-dash-card-list--scroll::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
}
.alac-poa-dash-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--bg-soft);
  font-size: 12px;
  cursor: pointer;
  transition: background .15s;
}
.alac-poa-dash-list-item:last-child {
  border-bottom: none;
}
.alac-poa-dash-list-item:hover {
  background: var(--bg-soft);
  margin: 0 -6px;
  padding-left: 6px;
  padding-right: 6px;
  border-radius: 6px;
}
.alac-poa-dash-list-item .alac-poa-dash-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.alac-poa-dash-list-item .alac-poa-dash-meta {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.alac-poa-dash-card-empty {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  padding: 12px 14px;
  text-align: center;
}
.alac-poa-dash-card-footer {
  margin-top: auto;
  padding: 8px 14px 12px;
  text-align: right;
}
.alac-poa-dash-card-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--azul);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.alac-poa-dash-card-link:hover {
  text-decoration: underline;
}

/* Pill de cumplimiento para indicadores (verde / ambar / rojo) */
.alac-poa-cump-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--font-display);
  min-width: 46px;
  text-align: center;
}
.alac-poa-cump-verde { background: #d6f5e3; color: #14743a; }
.alac-poa-cump-ambar { background: #fbf1d8; color: #8a5a00; }
.alac-poa-cump-rojo  { background: #fde0dd; color: #a02218; }
.alac-poa-cump-sin   { background: #e5e7eb; color: #4b5563; }

/* Pill de nivel de riesgo */
.alac-poa-niv-pill {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: capitalize;
}
.alac-poa-niv-extremo { background: #fde0dd; color: #a02218; border: 1px solid rgba(160,34,24,0.30); }
.alac-poa-niv-alto    { background: #fde0dd; color: #a02218; }
.alac-poa-niv-medio   { background: #fbf1d8; color: #8a5a00; }
.alac-poa-niv-bajo    { background: #d6f5e3; color: #14743a; }

/* Code chip compacto reutilizable en filas del dashboard */
.alac-poa-dash-code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text-soft);
  white-space: nowrap;
  flex-shrink: 0;
}

/* =====================================================================
   v1.4 - MENSUALIZACION POR ACTIVIDAD
   ===================================================================== */

/* ----- Stepper visual del modal de actividad ----- */
.alac-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -4px 0 18px;
  padding: 12px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.alac-step {
  display: flex; align-items: center; gap: 8px;
  color: var(--text-muted);
  font-size: 12.5px; font-weight: 600;
}
.alac-step.is-active { color: var(--azul); }
.alac-step.is-done   { color: var(--economia); }
.alac-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: white;
  border: 1.5px solid currentColor;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 12px; font-weight: 700;
}
.alac-step.is-active .alac-step-num {
  background: var(--azul);
  color: white;
  border-color: var(--azul);
}
.alac-step.is-done .alac-step-num {
  background: var(--economia);
  color: white;
  border-color: var(--economia);
}
.alac-step-label { letter-spacing: 0.02em; }
.alac-step-sep {
  flex: 1;
  height: 1px;
  background: var(--border-strong);
}

/* ----- Pestañas internas del MensualizacionModal ----- */
.alac-tabs-inline {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: -4px -4px 18px;
  padding: 4px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  position: relative;
}
.alac-tab-inline {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.18s ease;
}
.alac-tab-inline:hover {
  color: var(--azul);
  background: rgba(255,255,255,0.6);
}
.alac-tab-inline.is-active {
  background: white;
  color: var(--azul);
  border-color: var(--border-strong);
  box-shadow: 0 1px 2px rgba(21,36,32,0.06);
}
.alac-tabs-inline-right {
  margin-left: auto;
  padding-right: 6px;
}

/* ----- Sección agrupada dentro del formulario ----- */
.alac-form-section {
  margin-top: 6px;
  padding: 14px 16px;
  background: var(--bg-soft);
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
}
.alac-form-section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul);
  margin-bottom: 4px;
}
.alac-form-section-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.5;
}

/* ----- Toolbar de la grilla ----- */
.alac-mens-grid-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.alac-mens-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.alac-mens-toolbar-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.alac-mens-rango {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
.alac-mens-warn {
  font-size: 11.5px;
  color: #b21f2d;
  font-weight: 500;
}

/* ----- Tabla de mensualización ----- */
.alac-mens-table-wrap {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: white;
}
.alac-mens-table,
.alac-segui-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.alac-mens-table thead th,
.alac-segui-table thead th {
  background: var(--bg-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.alac-mens-table tbody td,
.alac-segui-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.alac-mens-table tbody tr:nth-child(even),
.alac-segui-table tbody tr:nth-child(even) {
  background: var(--surface-alt);
}
.alac-mens-table tbody tr:last-child td,
.alac-segui-table tbody tr:last-child td {
  border-bottom: none;
}
.alac-mens-table tfoot th {
  background: white;
  border-top: 2px solid var(--border-strong);
  padding: 12px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-align: left;
}
.alac-mens-tot-meta {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  font-family: 'Inter', system-ui, sans-serif;
}
.alac-mens-table .tot-ok    { color: var(--economia); }
.alac-mens-table .tot-warn  { color: #b8860b; }

/* Columnas */
.alac-mens-table .col-mes,
.alac-segui-table th:first-child {
  width: 130px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
}
.alac-mens-table .col-meta,
.alac-mens-table .col-ppto {
  width: 50%;
}
.alac-mens-mes {
  font-weight: 600;
  color: var(--text);
}
.alac-mens-input {
  width: 100%;
  max-width: 200px;
  height: 34px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
}

/* Hint inferior */
.alac-mens-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.55;
  padding: 8px 4px 0;
}

/* ----- Badge de estado de mensualización (en filas) ----- */
.alac-mens-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.mens-verde {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}
.mens-amarillo {
  background: #fef3c7;
  color: #92400e;
  border-color: #fcd34d;
}
.mens-rojo {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}
.mens-gris {
  background: var(--bg-soft);
  color: var(--text-muted);
  border-color: var(--border-strong);
}

/* ----- Línea de avance cuantitativo en la fila ----- */
.alac-act-cuant {
  color: var(--azul);
  font-weight: 600;
}

/* ----- v1.4.1: Ícono de mensualización en fila de actividad ----- */
.alac-mens-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  cursor: help;
  flex-shrink: 0;
}
.alac-mens-icon.mens-icon-ok {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}
.alac-mens-icon.mens-icon-warn {
  background: #fef3c7;
  color: #92400e;
  border-color: #fcd34d;
}

/* ----- Aviso de cuadre en el footer del modal ----- */
.alac-mens-aviso {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  margin-left: 8px;
  white-space: nowrap;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ----- Panel de seguimiento ----- */
.alac-segui-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.alac-segui-resumen {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.alac-segui-resumen-item {
  display: flex; flex-direction: column; gap: 4px;
}
.alac-segui-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.alac-segui-valor {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.alac-segui-table th.col-alerta,
.alac-segui-table td.col-alerta {
  width: 70px;
  text-align: center;
}

/* ----- Semáforo (dot) ----- */
.alac-semaforo-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.08);
}
.alac-semaforo-dot.sem-verde    { background: #22c55e; }
.alac-semaforo-dot.sem-amarillo { background: #f59e0b; }
.alac-semaforo-dot.sem-rojo     { background: #ef4444; }
.alac-semaforo-dot.sem-gris     { background: #cbd5e1; }

/* ----- Responsive de la grilla / tabla de seguimiento ----- */
@media (max-width: 900px) {
  .alac-segui-resumen { grid-template-columns: 1fr; }
  .alac-mens-table tbody td,
  .alac-segui-table tbody td { padding: 6px 8px; font-size: 12px; }
  .alac-mens-table .col-mes  { width: 110px; }
  .alac-stepper { padding: 10px; }
}
/* Fin v1.4 */

/* ============================================================
   v1.5 — CRONOGRAMA (Gantt jerárquico)
   Pestaña "Cronograma" del detalle de proyecto.
   ============================================================ */

.alac-gantt-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ----- Toolbar superior ----- */
.alac-gantt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.alac-gantt-toolbar-left,
.alac-gantt-toolbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.alac-gantt-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.alac-gantt-zoom {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-alt);
}
.alac-gantt-zoom-btn {
  appearance: none;
  border: none;
  background: transparent;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.alac-gantt-zoom-btn:not(:last-child) {
  border-right: 1px solid var(--border);
}
.alac-gantt-zoom-btn:hover {
  background: var(--bg-soft);
  color: var(--text);
}
.alac-gantt-zoom-btn.is-active {
  background: var(--azul);
  color: white;
}
.alac-gantt-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.alac-gantt-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--azul);
}
.alac-gantt-link {
  appearance: none;
  background: none;
  border: none;
  padding: 4px 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--azul);
  cursor: pointer;
}
.alac-gantt-link:hover { text-decoration: underline; }
.alac-gantt-sep {
  color: var(--text-muted);
  font-size: 14px;
}

/* ----- Leyenda ----- */
.alac-gantt-leyenda {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12px;
  color: var(--text-soft);
}
.alac-gantt-leyenda-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.alac-gantt-leyenda-item .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.alac-gantt-leyenda-item .dot-line {
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: #dc2626;
  border-top: 2px dashed #dc2626;
  border-radius: 0;
  background: transparent;
}
.alac-gantt-leyenda-item .dot-diamond {
  width: 10px;
  height: 10px;
  background: var(--dorado);
  transform: rotate(45deg);
  border-radius: 1px;
  border: 1px solid var(--dorado-hover);
}
.alac-gantt-leyenda-sep {
  width: 1px;
  height: 14px;
  background: var(--border-strong);
}

/* ----- Bloque "Sin programar" ----- */
.alac-gantt-sinprog {
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-radius: 12px;
  padding: 14px 16px;
}
.alac-gantt-sinprog-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: #9a3412;
  margin-bottom: 4px;
}
.alac-gantt-sinprog-ico {
  font-size: 16px;
}
.alac-gantt-sinprog-sub {
  font-size: 12.5px;
  color: #7c2d12;
  margin-bottom: 10px;
  line-height: 1.5;
}
.alac-gantt-sinprog-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.alac-gantt-sinprog-lista li {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 6px 10px;
  background: white;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  font-size: 12.5px;
}
.alac-gantt-sinprog-codigo {
  font-family: var(--font-display);
  font-weight: 700;
  color: #9a3412;
  font-size: 11.5px;
}
.alac-gantt-sinprog-nombre {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alac-gantt-sinprog-comp {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-display);
}

/* ----- Board del Gantt (dos columnas) ----- */
.alac-gantt-board {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* Columna izquierda — Estructura POA→Comp→Act */
.alac-gantt-left {
  flex-shrink: 0;
  border-right: 1px solid var(--border-strong);
  background: var(--surface);
  position: relative;
  z-index: 1;
}
.alac-gantt-left-header {
  padding: 8px 14px;
  background: #fbfcfb;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}
.alac-gantt-left-header-titulo {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alac-gantt-left-header-sep {
  color: var(--text-muted);
  font-weight: 400;
}
.alac-gantt-left-header-poa {
  color: var(--azul);
  font-size: 11.5px;
  letter-spacing: 0.02em;
}
.alac-gantt-left-header-rango {
  color: var(--text-soft);
  font-weight: 500;
  font-size: 11.5px;
  font-family: 'Inter', sans-serif;
}
.alac-gantt-left-body {
  /* Permite scroll vertical conjunto si el board crece (controlado por hijo SVG) */
}

/* Filas (izquierda) */
.alac-gantt-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text);
}
.alac-gantt-row:last-child {
  border-bottom: none;
}
.alac-gantt-row-poa {
  background: #fef9e7;
  font-weight: 700;
}
.alac-gantt-row-comp {
  background: var(--bg-soft);
  font-weight: 600;
  cursor: pointer;
}
.alac-gantt-row-comp:hover {
  background: #e3e9f3;
}
.alac-gantt-row-act {
  padding-left: 36px;   /* indent visual */
  cursor: pointer;
}
.alac-gantt-row-act:hover {
  background: var(--surface-alt);
}
.alac-gantt-chevron {
  appearance: none;
  background: none;
  border: none;
  padding: 2px 4px;
  font-size: 11px;
  color: var(--text-soft);
  cursor: pointer;
  width: 18px;
}
.alac-gantt-row-codigo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  color: var(--azul);
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 6px;
  flex-shrink: 0;
}
.alac-gantt-row-codigo.is-act {
  color: var(--text-soft);
  background: var(--surface-alt);
}
.alac-gantt-row-nombre {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Columna derecha — SVG */
.alac-gantt-right {
  flex: 1;
  min-width: 0;          /* permite que flex shrink al ancho del contenedor */
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--surface);
}
/* Modo "Ajustado": el cronograma calcula el ancho de mes dinámicamente
   para caber en pantalla, así que NO debe permitir scroll horizontal. */
.alac-gantt-right.is-fit {
  overflow-x: hidden;
}

/* ----- Tooltip flotante ----- */
.alac-gantt-tooltip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  background: var(--text);
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  max-width: 280px;
  box-shadow: var(--shadow-lg);
}
.alac-gantt-tt-titulo {
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: 4px;
  font-size: 12.5px;
}
.alac-gantt-tt-sub {
  font-size: 11.5px;
  opacity: 0.9;
  margin-top: 2px;
}

/* ----- Modal detalle de actividad ----- */
.alac-gantt-modal {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.alac-gantt-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
}
.alac-gantt-modal-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.alac-gantt-modal-valor {
  font-size: 13px;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.alac-gantt-modal-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.alac-gantt-modal-seccion {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
  margin-top: 4px;
}
.alac-gantt-modal-chip {
  display: inline-block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 8px;
  color: var(--text-soft);
}

.alac-gantt-modal-hint {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  line-height: 1.5;
}

/* ----- Responsive ----- */
@media (max-width: 900px) {
  .alac-gantt-toolbar { padding: 10px 12px; gap: 10px; }
  .alac-gantt-leyenda { gap: 12px; padding: 8px 12px; font-size: 11.5px; }
  .alac-gantt-modal-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CronogramaTab — KPIs de avance físico
   ============================================================ */
.alac-crono-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 4px;
}
.alac-crono-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px 12px;
  position: relative;
  overflow: hidden;
}
.alac-crono-kpi-band {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 12px 12px 0 0;
}
.alac-crono-kpi-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.alac-crono-kpi-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 8px;
}
.alac-crono-kpi-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--bg-soft);
  overflow: hidden;
}
.alac-crono-kpi-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .4s ease;
  min-width: 2px;
}
.alac-crono-kpi-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  margin-top: 4px;
}
.alac-crono-kpi-estados {
  display: flex;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  flex-wrap: wrap;
  margin-top: 4px;
}

@media (max-width: 900px) {
  .alac-crono-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   v1.5 — PresupuestoTab (Curva S + matriz mensualizada)
   ============================================================ */

.alac-presup-tab { display: flex; flex-direction: column; gap: 16px; }

/* ----- KPIs ----- */
.alac-presup-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.alac-presup-kpis.alac-presup-kpis-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.alac-presup-kpi {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px 12px;
  box-shadow: 0 1px 2px rgba(21,36,32,0.04), 0 6px 24px rgba(21,36,32,0.04);
  overflow: hidden;
}
.alac-presup-kpi-band {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #177E6B, #2a8f7c);
}
.alac-presup-kpi.tone-azul    .alac-presup-kpi-band { background: linear-gradient(90deg, #177E6B, #2a8f7c); }
.alac-presup-kpi.tone-dorado  .alac-presup-kpi-band { background: linear-gradient(90deg, #B07800, #d19700); }
.alac-presup-kpi.tone-verde   .alac-presup-kpi-band { background: linear-gradient(90deg, #0072B2, #6ea84a); }
.alac-presup-kpi.tone-naranja .alac-presup-kpi-band { background: linear-gradient(90deg, #009E73, #B4531F); }
.alac-presup-kpi.tone-desv-eq .alac-presup-kpi-band { background: linear-gradient(90deg, #6c7d78, #c6d3ce); }
.alac-presup-kpi.tone-desv-pos .alac-presup-kpi-band { background: linear-gradient(90deg, #b91c1c, #ef4444); }
.alac-presup-kpi.tone-desv-neg .alac-presup-kpi-band { background: linear-gradient(90deg, #15803d, #22c55e); }

.alac-presup-kpi-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 6px;
}
.alac-presup-kpi-value {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.alac-presup-kpi-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 4px;
}
.alac-presup-kpi.tone-desv-pos .alac-presup-kpi-value { color: #b91c1c; }
.alac-presup-kpi.tone-desv-neg .alac-presup-kpi-value { color: #15803d; }

.alac-presup-kpi-barwrap {
  height: 5px;
  border-radius: 999px;
  background: var(--bg-soft);
  overflow: hidden;
  margin: 4px 0;
}
.alac-presup-kpi-barfill {
  height: 100%;
  border-radius: 999px;
  transition: width .4s ease;
  min-width: 2px;
}

/* ----- Banner de actividades excluidas ----- */
.alac-presup-banner {
  background: #fef9e7;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 12px 14px;
}
.alac-presup-banner-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: #7c5500;
  font-size: 13.5px;
}
.alac-presup-banner-ico {
  font-size: 16px;
  flex-shrink: 0;
}
.alac-presup-banner-link {
  margin-left: auto;
  background: none;
  border: none;
  color: #177E6B;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  font-size: 12.5px;
}
.alac-presup-banner-list {
  list-style: none;
  margin: 10px 0 2px;
  padding: 8px 0 0;
  border-top: 1px dashed #fde68a;
  display: grid;
  gap: 4px;
  font-size: 12.5px;
}
.alac-presup-banner-list li {
  display: grid;
  grid-template-columns: 130px 1fr 200px;
  gap: 10px;
  align-items: baseline;
  color: #3f524c;
}
.alac-presup-banner-codigo {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  color: var(--text);
}
.alac-presup-banner-motivo {
  font-style: italic;
  color: var(--text-muted);
}

/* ----- Tarjetas (Curva S + matriz) ----- */
.alac-presup-curva,
.alac-presup-matriz {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(21,36,32,0.04), 0 6px 24px rgba(21,36,32,0.04);
  padding: 18px 18px 14px;
}
.alac-presup-curva .alac-card-head,
.alac-presup-matriz .alac-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.alac-presup-curva .alac-card-title,
.alac-presup-matriz .alac-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.alac-presup-curva .alac-card-sub,
.alac-presup-matriz .alac-card-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Año destacado dentro del título de la card (coherente con la
   identidad institucional: dorado Buenaventura como acento del año fiscal). */
.alac-presup-card-anio {
  display: inline-block;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--azul);
  background: linear-gradient(135deg, var(--dorado-soft), #fff3d3);
  border: 1px solid rgba(176,120,0, 0.45);
  padding: 1px 8px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: 1px;
  letter-spacing: 0.02em;
}

/* Leyenda de la curva S */
.alac-presup-leyenda {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.alac-leg-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-soft);
}
.alac-leg-sw {
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: 2px;
}
.alac-leg-dashed .alac-leg-sw {
  background-image: linear-gradient(to right, #6c7d78 50%, transparent 50%) !important;
  background-size: 6px 100%;
}

/* Toggle modos (Planificado/Ejecutado/Variación) — reusa pmo-view-toggle-btn */
.alac-presup-toggle {
  display: inline-flex;
  background: var(--bg-soft);
  border-radius: 10px;
  padding: 3px;
}
.alac-presup-toggle .pmo-view-toggle-btn {
  border: none;
  background: transparent;
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.alac-presup-toggle .pmo-view-toggle-btn.active {
  background: var(--surface);
  color: var(--azul);
  box-shadow: 0 1px 3px rgba(21,36,32,0.08);
}

/* ----- Tabla matricial ----- */
.alac-presup-matriz-scroll {
  overflow-x: auto;
  margin: 0 -4px;
  padding: 0 4px;
}
.alac-presup-tbl {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 12.5px;
}
.alac-presup-tbl thead th {
  position: sticky;
  top: 0;
  background: var(--bg-soft);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 9px 8px;
  border-bottom: 1px solid var(--border-strong);
  text-align: right;
  z-index: 1;
}
.alac-presup-tbl thead th.alac-presup-tbl-col1 { text-align: left; }

/* Columna 1 sticky.
   IMPORTANTE: cada tipo de fila aplica su PROPIO background al td.col1
   más abajo. Si usáramos background: inherit, las celdas vecinas (mes)
   se ven a través de la sticky cuando hay scroll horizontal — por eso
   los fondos se definen explícitamente por fila. */
.alac-presup-tbl .alac-presup-tbl-col1 {
  position: sticky;
  left: 0;
  width: 320px;
  min-width: 320px;
  max-width: 320px;
  text-align: left;
  z-index: 1;
  border-right: 1px solid var(--border);
  box-shadow: 4px 0 8px -6px rgba(21,36,32, 0.08);
}
.alac-presup-tbl thead .alac-presup-tbl-col1 {
  z-index: 2;
  background: var(--bg-soft);
}

/* Wrapper interno: trunca el nombre con ellipsis para que NO se desborde
   por sobre las celdas de meses. Sin esto, los nombres largos pintan
   encima del contenido a la derecha y la pestaña parece rota. */
.alac-presup-col1-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.alac-presup-col1-inner .alac-presup-comp-nombre,
.alac-presup-col1-inner .alac-presup-act-nombre {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alac-presup-col1-inner .alac-presup-comp-codigo,
.alac-presup-col1-inner .alac-presup-act-codigo,
.alac-presup-col1-inner .alac-presup-caret,
.alac-presup-col1-inner .alac-presup-act-warn {
  flex: 0 0 auto;
}
.alac-presup-tbl tbody td,
.alac-presup-tbl tfoot td {
  padding: 8px 8px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.alac-presup-tbl tbody td.alac-presup-tbl-col1 {
  text-align: left;
}
.alac-presup-tbl .alac-presup-tbl-mes {
  /* Ancho suficiente para mostrar montos completos sin abreviar
     (p. ej. "1,250,000" cabe sin truncarse). */
  min-width: 78px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.alac-presup-tbl thead th.alac-presup-tbl-mes {
  /* el encabezado del mes mantiene el tamaño normal del thead */
  font-size: 11px;
}
.alac-presup-tbl .alac-presup-tbl-total {
  font-weight: 700;
  min-width: 110px;
  background: rgba(176,120,0, 0.06);
  /* el total conserva el tamaño base (12.5px) y formato con moneda */
  font-size: 12.5px;
}

/* Filas — el background se aplica a TODOS los td (incluida la col1 sticky)
   para que la celda sticky tape correctamente las celdas de la derecha al
   hacer scroll horizontal. No usar background: inherit en la sticky. */
.alac-presup-row-comp td {
  background: #f9fbff;
  font-weight: 600;
  color: var(--text);
}
/* La fila de componente es clickable: todo el <tr> alterna expand/colapse.
   Hover sutil para indicar la affordance, sin botón flecha intrusivo. */
.alac-presup-row-comp {
  cursor: pointer;
  user-select: none;
}
.alac-presup-row-comp:hover td { background: #eef3fb; }
.alac-presup-row-comp:focus-visible td {
  outline: 2px solid var(--azul-glow);
  outline-offset: -2px;
}

.alac-presup-row-act td {
  background: var(--surface);
  color: var(--text-soft);
}
.alac-presup-row-act.incompleta td {
  background: rgba(176,120,0, 0.04);
}
/* v1.5.x: sin sangría. La diferenciación visual entre componente y
   actividad la dan el background (componente más oscuro), el peso de
   fuente y el chip del código. Esto permite el máximo aprovechamiento
   del ancho de la columna 1. */
.alac-presup-row-act td.alac-presup-tbl-col1 .alac-presup-col1-inner {
  padding-left: 0;
}
.alac-presup-row-total td {
  /* Color sólido (no degradado) para que la celda sticky quede uniforme
     con las celdas de la derecha durante el scroll horizontal. */
  background: #eef3f1;
  font-weight: 700;
  color: var(--text);
  border-top: 2px solid var(--border-strong);
}

/* Caret de la fila componente — oculto por decisión de diseño v1.5.x.
   Se conserva en el JSX por si se reactiva. El toggle sigue funcionando
   con click/teclado sobre toda la fila del componente. */
.alac-presup-caret {
  display: none;
}

/* Códigos y nombres en columna1 */
.alac-presup-comp-codigo,
.alac-presup-act-codigo {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 11px;
  color: var(--azul);
  border: 1px solid rgba(23,126,107, 0.15);
  background: rgba(23,126,107, 0.04);
  padding: 2px 6px;
  border-radius: 5px;
  margin-right: 8px;
}
.alac-presup-act-codigo {
  color: var(--text-soft);
  border-color: var(--border);
  background: var(--bg-soft);
}
.alac-presup-comp-nombre,
.alac-presup-act-nombre {
  font-weight: 500;
}
.alac-presup-act-warn {
  margin-left: 6px;
  color: #d97706;
  font-size: 13px;
}

/* Celdas de valor */
.alac-presup-celda-vacia { color: var(--text-muted); }
.alac-presup-celda-var.alac-presup-celda-up   { color: #b45309; font-weight: 600; }
.alac-presup-celda-var.alac-presup-celda-down { color: #15803d; font-weight: 600; }

/* Tooltip de la curva S */
.alac-presup-tt {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 6px 24px rgba(21,36,32, 0.12);
  font-size: 12px;
  min-width: 180px;
}
.alac-presup-tt-head {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.alac-presup-tt-row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
  font-size: 12px;
  margin-top: 2px;
}
.alac-presup-tt-sw {
  display: inline-block;
  width: 10px; height: 10px; border-radius: 2px;
}

/* Responsive */
@media (max-width: 1400px) {
  .alac-presup-kpis.alac-presup-kpis-7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1200px) {
  .alac-presup-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .alac-presup-kpis.alac-presup-kpis-7 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .alac-presup-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alac-presup-kpis.alac-presup-kpis-7 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alac-presup-banner-list li { grid-template-columns: 1fr; gap: 2px; }
}

/* Fin v1.5 — Presupuesto */

/* ============================================================
   Seguimiento · CONSOLIDADO (v1.x)
   Tabla única con todos los indicadores del POA en orden
   jerárquico: efecto → producto → proceso. Mismo lenguaje visual
   que MatrizPresupuesto (clases alac-presup-tbl).
   ============================================================ */
.alac-seg-cons-card {
  /* Restauramos padding-bottom del card para que la tabla no quede
     pegada al borde inferior del contenedor. */
  padding-bottom: 16px;
}
/* -----------------------------------------------------------
   Toolbar de filtros del Consolidado (zona derecha del card-header)
   - Búsqueda + chips con check + toggle "Solo en riesgo"
   - Contador y botón "Limpiar" viven en una mini-barra debajo
     del header, solo cuando hay filtros activos.
   ----------------------------------------------------------- */
.alac-seg-cons-header { padding-top: 0; padding-bottom: 0; }
.alac-seg-cons-header-left { flex: 1 1 260px; }

/* Número del contador dentro del subtítulo: realzado pero coherente
   con la tipografía Space Grotesk de números del sistema. */
.alac-seg-cons-contador-num {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  color: var(--text);
  font-weight: 700;
}

.alac-seg-cons-toolbar {
  display: inline-flex;
  align-items: center;
  /* Forzar una sola línea: el search se encoge primero, los chips
     y el toggle nunca caen a una línea adicional. */
  flex-wrap: nowrap;
  gap: 10px;
}

/* Búsqueda: encogible para ceder ancho a chips + toggle.
   - flex 1 1 auto: ocupa el ancho disponible y se reduce si hace falta.
   - min-width 0: permite que el input encoja por debajo de su intrínseco. */
.alac-seg-cons-filtros-search {
  position: relative;
  flex: 1 1 220px;
  min-width: 0;
  max-width: 320px;
}
.alac-seg-cons-filtros-search-ico {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  display: inline-flex;
  pointer-events: none;
}
.alac-seg-cons-filtros-input {
  width: 100%;
  height: 32px;
  padding: 0 30px 0 30px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: 12.5px;
  color: var(--text);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  outline: none;
}
.alac-seg-cons-filtros-input:focus {
  border-color: var(--azul-soft);
  box-shadow: 0 0 0 3px rgba(23,126,107, 0.10);
}
.alac-seg-cons-filtros-clear-q {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  border: none;
  border-radius: 999px;
  background: var(--border-strong);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.alac-seg-cons-filtros-clear-q:hover { background: var(--text-muted); }

/* Chips de tipo (multi-selección) — cada chip es un &lt;label&gt; con
   un checkbox real oculto + cuadradito visual con ✓ al lado.
   Estado on: fondo teal institucional diluido + borde azul + check azul.
   Estado off: fondo blanco + borde gris + check vacío. */
.alac-seg-cons-filtros-chips {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;       /* no ceder ancho — siempre visibles */
  flex-wrap: nowrap;
}
.alac-seg-cons-filtros-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 4px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.alac-seg-cons-filtros-check input { display: none; }
.alac-seg-cons-filtros-check-box {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px;
  border-radius: 3px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  flex-shrink: 0;
}
.alac-seg-cons-filtros-check.is-off:hover {
  background: var(--bg-soft);
  color: var(--text-soft);
}
.alac-seg-cons-filtros-check.is-on {
  background: #eef2fc;
  border-color: var(--azul);
  color: var(--azul);
}
.alac-seg-cons-filtros-check.is-on .alac-seg-cons-filtros-check-box {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
}
.alac-seg-cons-filtros-check.is-on:hover {
  background: #e1e8fa;
}

/* Botón Exportar XLSX (dorado institucional con icono de descarga).
   Estados: normal, hover, loading (spinner), disabled. */
.alac-seg-cons-btn-exportar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--dorado);
  background: linear-gradient(135deg, var(--dorado), var(--dorado-hi));
  color: #3a2a00;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: filter 0.12s ease, transform 0.06s ease;
}
.alac-seg-cons-btn-exportar:hover:not(:disabled) {
  filter: brightness(1.05);
}
.alac-seg-cons-btn-exportar:active:not(:disabled) {
  transform: translateY(1px);
}
.alac-seg-cons-btn-exportar:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.alac-seg-cons-btn-exportar.is-loading {
  cursor: progress;
}
.alac-seg-cons-btn-spin {
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 999px;
  border: 2px solid rgba(58, 42, 0, 0.25);
  border-top-color: #3a2a00;
  animation: alac-seg-cons-spin 0.7s linear infinite;
}
@keyframes alac-seg-cons-spin {
  to { transform: rotate(360deg); }
}

/* Toggle "En riesgo" */
.alac-seg-cons-filtros-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-soft);
  user-select: none;
  flex-shrink: 0;        /* no ceder ancho — siempre visible al lado derecho */
  white-space: nowrap;
}
.alac-seg-cons-filtros-toggle input { display: none; }
.alac-seg-cons-filtros-toggle-sw {
  width: 30px; height: 16px;
  border-radius: 999px;
  background: var(--border-strong);
  position: relative;
  transition: background 0.15s ease;
}
.alac-seg-cons-filtros-toggle-sw::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  border-radius: 999px;
  background: #fff;
  transition: transform 0.15s ease;
  box-shadow: 0 1px 2px rgba(21,36,32,0.20);
}
.alac-seg-cons-filtros-toggle.is-on .alac-seg-cons-filtros-toggle-sw {
  background: #a02218;
}
.alac-seg-cons-filtros-toggle.is-on .alac-seg-cons-filtros-toggle-sw::after {
  transform: translateX(14px);
}
.alac-seg-cons-filtros-toggle.is-on .alac-seg-cons-filtros-toggle-txt {
  color: #a02218;
  font-weight: 700;
}

/* Botón limpiar (solo aparece si hay filtros activos) */
.alac-seg-cons-filtros-limpiar {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px dashed var(--border-strong);
  background: transparent;
  color: var(--text-soft);
  font-size: 11.5px;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.alac-seg-cons-filtros-limpiar:hover {
  color: var(--azul);
  border-color: var(--azul-soft);
}

/* Contador alineado a la derecha (flex: auto empuja hacia el fin) */
.alac-seg-cons-filtros-contador {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
}
.alac-seg-cons-filtros-contador strong {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  color: var(--text-soft);
}

/* Mini-barra inferior: solo aparece si hay filtros activos. Aloja
   el botón "Limpiar filtros" a la izquierda y el contador
   "Mostrando X de Y" a la derecha. Fondo muy sutil para
   diferenciarse del header sin competir con la tabla. */
.alac-seg-cons-mini-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 16px;
  background: #fbfcfb;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--text-muted);
}

/* Estado vacío cuando los filtros no devuelven resultados pero
   la lista base sí tiene datos. */
.alac-seg-cons-empty-filtros {
  padding: 32px 16px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.alac-seg-cons-empty-filtros .alac-empty-ico {
  font-size: 28px;
  margin-bottom: 8px;
}
.alac-seg-cons-empty-filtros .alac-empty-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.alac-seg-cons-empty-filtros .alac-empty-sub {
  font-size: 12px;
  color: var(--text-muted);
}

/* Regla huérfana del rediseño anterior (contador ya vive en el
   subtítulo del header, no en una mini-barra). Se conserva por si
   alguna pantalla puntual la usa, pero no afecta el layout actual. */

.alac-seg-cons-scroll {
  width: 100%;
  overflow-x: auto;
  /* Bordes externos estilo "Historial de POAs" (.alac-poas-table) */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  /* overflow: hidden recortaría el scroll horizontal y el popover MV,
     pero overflow-x: auto + border-radius funciona porque las esquinas
     se mantienen redondeadas siempre que no haya hijo fuera del clip
     horizontal. */
}
.alac-seg-cons-tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
  color: var(--text);
}
.alac-seg-cons-tbl thead th {
  background: var(--bg-soft);
  color: var(--text-soft);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--border-strong);
  padding: 10px 10px;
  text-align: left;
  white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
.alac-seg-cons-tbl tbody td {
  border-bottom: 1px solid var(--border);
  padding: 12px 10px;
  vertical-align: top;
}
.alac-seg-cons-tbl tbody tr:last-child td {
  border-bottom: none;
}
/* Columna fusionada Indicador (antes eran Contexto + Indicador).
   Ancho ampliado para acomodar dos líneas: contexto referencial
   arriba y nombre del indicador abajo. */
.alac-seg-cons-tbl .c-ind  { min-width: 320px; max-width: 480px; }
.alac-seg-cons-tbl .c-meta { width: 110px; text-align: left; }
.alac-seg-cons-tbl .c-fis  { width: 190px; }
.alac-seg-cons-tbl .c-ppto { width: 140px; text-align: right; }
.alac-seg-cons-tbl .c-fin  { width: 220px; }
.alac-seg-cons-tbl .c-fec  { width: 110px; text-align: center; }
.alac-seg-cons-tbl .c-mv   { width: 50px;  text-align: center; }
.alac-seg-cons-tbl .c-ev   { width: 70px;  text-align: center; }

/* Títulos centrados para las dos columnas de avance (la celda en sí
   conserva su layout interno con barras + chip). */
.alac-seg-cons-tbl thead th.c-fis,
.alac-seg-cons-tbl thead th.c-fin {
  text-align: center;
}

/* Variante de número grande para la celda Meta (alineado a la
   izquierda; en el resto sigue siendo derecho). */
.alac-seg-cons-tbl .c-meta .alac-seg-cons-num,
.alac-seg-cons-tbl .c-meta .alac-seg-cons-sub {
  text-align: left;
}

/* Filas clicables */
.alac-seg-cons-row {
  cursor: pointer;
  transition: background-color 0.12s ease;
}

/* Jerarquía por escala de fondo (efecto = más oscuro → proceso = blanco).
   Tonos fríos neutros muy desaturados para no competir con los chips de
   cumplimiento. La banda lateral de color por tipo fue removida: la
   columna izquierda comparte el mismo borde uniforme del wrapper. */
.alac-seg-cons-row.tipo-efecto   { background: #eef3f1; }
.alac-seg-cons-row.tipo-producto { background: #f6f8fc; }
.alac-seg-cons-row.tipo-proceso  { background: #ffffff; }

/* Hover y fila expandida deben sobrescribir el fondo por tipo
   (definidos DESPUÉS para ganar por orden de cascada al tener
   la misma especificidad). */
.alac-seg-cons-row:hover { background: var(--bg-soft); }
.alac-seg-cons-row.is-open { background: #f6f9ff; }
.alac-seg-cons-row.is-open td { border-bottom-color: var(--azul-soft); }

/* Wrapper de la columna fusionada: caret + bloque de dos líneas
   (contexto referencial arriba, nombre del indicador abajo).
   Sangría jerárquica progresiva por nivel. */
.alac-seg-cons-ind {
  display: flex; align-items: flex-start; gap: 8px;
}
.alac-seg-cons-ind.nivel-1 { padding-left: 14px; }
.alac-seg-cons-ind.nivel-2 { padding-left: 28px; }
.alac-seg-cons-caret {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 11px;
  margin-top: 4px;
}
.alac-seg-cons-ind-body {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0; flex: 1 1 auto;
}

/* Línea superior: contexto referencial.
   - Color terciario (sutil).
   - Una sola línea con elipsis para no robar altura. */
.alac-seg-cons-ind-ctx {
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alac-seg-cons-ind-ctx-cod {
  font-family: 'Space Grotesk', 'Inter', monospace;
  font-weight: 500;
}
.alac-seg-cons-ind-ctx-sep {
  margin: 0 5px;
  color: var(--border-strong);
}
.alac-seg-cons-ind-ctx-nom {
  /* El nombre acompaña al código en la misma línea. */
}

/* Línea inferior: nombre del indicador, lo que importa. */
.alac-seg-cons-ind-nom {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}

/* Bloques número grande + sub gris (Meta y Presupuesto) */
.alac-seg-cons-num {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 14px; font-weight: 700; color: var(--text);
  text-align: right;
  line-height: 1.2;
}
.alac-seg-cons-sub {
  font-size: 10.5px; font-weight: 500;
  color: var(--text-muted);
  text-align: right;
  margin-top: 3px;
}

/* Barras de cumplimiento (físico y financiero) */
.alac-seg-cons-bar-wrap { display: flex; flex-direction: column; gap: 4px; }
.alac-seg-cons-bar-line {
  display: flex; align-items: baseline; gap: 4px;
  font-size: 12px; line-height: 1.2;
  flex-wrap: wrap;
}
.alac-seg-cons-bar-num {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700; color: var(--text);
}
.alac-seg-cons-bar-sep { color: var(--text-muted); }
.alac-seg-cons-bar-den {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  color: var(--text-soft);
}
.alac-seg-cons-bar-chip {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.3px;
}
.alac-seg-cons-bar-chip.tono-verde { background: #d8f0e1; color: #14743a; }
.alac-seg-cons-bar-chip.tono-ambar { background: #fdecc8; color: #8a5a00; }
.alac-seg-cons-bar-chip.tono-rojo  { background: #fadcd6; color: #a02218; }
.alac-seg-cons-bar-chip.tono-gris  { background: var(--bg-soft); color: var(--text-muted); }
.alac-seg-cons-bar-track {
  height: 6px; background: var(--bg-soft);
  border-radius: 999px; overflow: hidden;
}
.alac-seg-cons-bar-fill {
  height: 100%; border-radius: 999px;
  transition: width 0.25s ease;
}
.alac-seg-cons-bar-fill.tono-verde { background: linear-gradient(90deg, #14743a, #2ea65e); }
.alac-seg-cons-bar-fill.tono-ambar { background: linear-gradient(90deg, #b58a06, #e0a93a); }
.alac-seg-cons-bar-fill.tono-rojo  { background: linear-gradient(90deg, #a02218, #d04432); }
.alac-seg-cons-bar-fill.tono-gris  { background: var(--border-strong); }

/* Fecha meta, MV, evidencias */
.alac-seg-cons-fec {
  font-size: 12px;
  color: var(--text-soft);
  white-space: nowrap;
}
.alac-seg-cons-mv {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 999px;
  font-size: 13px; font-weight: 700;
  cursor: help;
}
.alac-seg-cons-mv.has  { background: var(--bg-soft); color: var(--azul); }
.alac-seg-cons-mv.none { color: var(--text-muted); cursor: default; }

/* Popover flotante de MV (mismo lenguaje visual que .alac-presup-tt
   del tooltip de la curva S). Se muestra al hover sobre el wrapper.
   - Posición: a la derecha del icono.
   - Si la fila está cerca del borde derecho de la tabla, el navegador
     respeta el ancho fijo del popover y el scroll horizontal de la
     tabla permite verlo completo. */
.alac-seg-cons-mv-wrap {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
}
.alac-seg-cons-mv-pop {
  position: absolute;
  top: 50%;
  /* Se posiciona a la IZQUIERDA del icono porque la columna MV vive
     cerca del borde derecho de la tabla; el scroll horizontal de
     .alac-seg-cons-scroll recortaría un popover lanzado a la
     derecha. A la izquierda hay siempre espacio dentro de la fila. */
  right: calc(100% + 10px);
  transform: translateY(-50%) scale(0.96);
  transform-origin: right center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 10px 32px rgba(21,36,32, 0.14);
  width: 320px;
  max-width: 60vw;
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.14s ease;
  text-align: left;
  white-space: normal;
}
.alac-seg-cons-mv-wrap:hover .alac-seg-cons-mv-pop,
.alac-seg-cons-mv-wrap:focus-within .alac-seg-cons-mv-pop {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
.alac-seg-cons-mv-pop::before {
  /* Flecha apuntando al icono (al lado derecho del popover) */
  content: '';
  position: absolute;
  top: 50%;
  right: -6px;
  transform: translateY(-50%) rotate(45deg);
  width: 10px; height: 10px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  border-top: 1px solid var(--border);
}
.alac-seg-cons-mv-pop-head {
  display: block;
  font-weight: 700;
  color: var(--text);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}
.alac-seg-cons-mv-pop-body {
  display: block;
  color: var(--text-soft);
  font-size: 12.5px;
  line-height: 1.45;
  white-space: pre-line; /* respeta saltos de línea del backend */
}
/* Wrapper de la celda de evidencias (relative para anclar el popover) */
.alac-seg-cons-ev-wrap {
  position: relative;
  display: inline-flex;
}

/* Botón del badge (clip + número). Mismo lenguaje visual que el
   span anterior, ahora interactivo. */
.alac-seg-cons-ev {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--text-muted);
  font-size: 11.5px; font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: filter 0.12s ease, transform 0.06s ease;
}
.alac-seg-cons-ev:hover:not(:disabled) { filter: brightness(0.97); }
.alac-seg-cons-ev:active:not(:disabled) { transform: translateY(1px); }
.alac-seg-cons-ev:disabled { cursor: default; }
.alac-seg-cons-ev.has {
  background: linear-gradient(135deg, var(--dorado-soft), #fff3d2);
  color: #8a5a00;
}
.alac-seg-cons-ev.is-open {
  box-shadow: 0 0 0 2px rgba(176,120,0, 0.35);
}
.alac-seg-cons-ev-ico {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
.alac-seg-cons-ev-ico svg { display: block; }
.alac-seg-cons-ev-n   { font-family: 'Space Grotesk', 'Inter', sans-serif; }

/* -----------------------------------------------------------
   Modal de Evidencias del Año (Consolidado)
   Layout 2 columnas: lista (izq) + visor (der).
   ----------------------------------------------------------- */
.alac-seg-cons-evm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(21,36,32, 0.45);
  backdrop-filter: blur(2px);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: alac-seg-cons-fade-in 0.12s ease;
}
@keyframes alac-seg-cons-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.alac-seg-cons-evm {
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(21,36,32, 0.28);
  width: 100%;
  max-width: 1100px;
  height: 100%;
  max-height: 720px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.alac-seg-cons-evm-head {
  padding: 12px 18px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.alac-seg-cons-evm-head-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.alac-seg-cons-evm-head-title {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.alac-seg-cons-evm-head-total {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 13px;
}

/* Bloque con info del indicador (referencia dentro del modal) */
.alac-seg-cons-evm-head-ind {
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.alac-seg-cons-evm-head-ind-ctx {
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alac-seg-cons-evm-head-ind-ctx-cod {
  font-family: 'Space Grotesk', 'Inter', monospace;
  font-weight: 500;
}
.alac-seg-cons-evm-head-ind-ctx-sep {
  margin: 0 5px;
  color: var(--border-strong);
}
.alac-seg-cons-evm-head-ind-nom {
  margin-top: 3px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.alac-seg-cons-evm-head-ind-extra {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
}

/* Grid de métricas + MV en el header del modal de evidencias.
   Tres bloques: Meta · Avance físico · Medios de verificación.
   - Meta: ancho compacto.
   - Avance: ancho compacto (solo chip).
   - MV: ocupa el resto con elipsis y title nativo. */
.alac-seg-cons-evm-head-ind-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.alac-seg-cons-evm-head-ind-bloque {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.alac-seg-cons-evm-head-ind-bloque.b-meta   { flex: 0 0 auto; min-width: 90px; }
.alac-seg-cons-evm-head-ind-bloque.b-avance { flex: 0 0 auto; min-width: 90px; }
.alac-seg-cons-evm-head-ind-bloque.b-mv     { flex: 1 1 auto; min-width: 0; }
.alac-seg-cons-evm-head-ind-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}
.alac-seg-cons-evm-head-ind-val {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
}
.alac-seg-cons-evm-head-ind-val-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 11.5px;
  color: var(--text-muted);
}
.alac-seg-cons-evm-head-ind-mv {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: help;
}

/* Chip de % de cumplimiento con tono por umbral (mismas reglas
   que .alac-seg-cons-bar-chip de la tabla). */
.alac-seg-cons-evm-head-ind-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.alac-seg-cons-evm-head-ind-chip.tono-verde { background: #d8f0e1; color: #14743a; }
.alac-seg-cons-evm-head-ind-chip.tono-ambar { background: #fdecc8; color: #8a5a00; }
.alac-seg-cons-evm-head-ind-chip.tono-rojo  { background: #fadcd6; color: #a02218; }
.alac-seg-cons-evm-head-ind-chip.tono-gris  { background: var(--bg-soft); color: var(--text-muted); }
.alac-seg-cons-evm-close {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.alac-seg-cons-evm-close:hover {
  background: var(--border);
  color: var(--text);
}
.alac-seg-cons-evm-body {
  flex: 1;
  display: flex;
  min-height: 0;
}

/* Columna lista (izquierda) */
.alac-seg-cons-evm-lista {
  width: 300px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 8px 0;
}
.alac-seg-cons-evm-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}
.alac-seg-cons-evm-state.is-err { color: #a02218; }
.alac-seg-cons-evm-grupo + .alac-seg-cons-evm-grupo {
  margin-top: 2px;
}
.alac-seg-cons-evm-grupo-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-soft);
  background: var(--bg-soft);
  padding: 7px 14px;
}
.alac-seg-cons-evm-grupo-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 17px;
  padding: 0 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 10px;
  color: var(--text-soft);
  margin-left: auto;
}
.alac-seg-cons-evm-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.alac-seg-cons-evm-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 14px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.alac-seg-cons-evm-item:hover {
  background: var(--bg-soft);
}
.alac-seg-cons-evm-item.is-sel {
  background: #eef2fc;
  border-left-color: var(--azul);
}
.alac-seg-cons-evm-item-ico {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--azul);
  display: inline-flex;
}
.alac-seg-cons-evm-item-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}
.alac-seg-cons-evm-item-nom {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alac-seg-cons-evm-item-meta {
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Columna visor (derecha) */
.alac-seg-cons-evm-visor {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fbfcfb;
}
.alac-seg-cons-evm-visor-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}
.alac-seg-cons-evm-visor-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.alac-seg-cons-evm-visor-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.alac-seg-cons-evm-visor-nom {
  flex: 1;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alac-seg-cons-evm-visor-dl {
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--dorado);
  background: linear-gradient(135deg, var(--dorado), var(--dorado-hi));
  color: #3a2a00;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.12s ease;
}
.alac-seg-cons-evm-visor-dl:hover { filter: brightness(1.05); }
.alac-seg-cons-evm-visor-frame {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 12px;
}
.alac-seg-cons-evm-visor-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 4px 18px rgba(21,36,32, 0.12);
}
.alac-seg-cons-evm-visor-iframe {
  width: 100%;
  height: 100%;
  min-height: 480px;
  border: none;
  background: var(--surface);
  border-radius: 6px;
}
/* Contenedor para vistas que renderizan HTML (CSV, XLSX, DOCX).
   Toma todo el alto/ancho disponible del frame y maneja su propio
   scroll interno (las Vista* renderizan tablas u HTML largo). */
.alac-seg-cons-evm-visor-doc {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: auto;
  background: var(--surface);
  border-radius: 6px;
  box-shadow: 0 4px 18px rgba(21,36,32, 0.06);
}

@media (max-width: 900px) {
  .alac-seg-cons-evm-body { flex-direction: column; }
  .alac-seg-cons-evm-lista {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: 200px;
  }
}

/* Fila de detalle (rejilla mensual al expandir) */
.alac-seg-cons-row-detail td {
  background: #fbfcfb;
  padding: 14px 14px;
  border-bottom: 2px solid var(--border);
}

/* Responsive */
@media (max-width: 1200px) {
  .alac-seg-cons-tbl { font-size: 12px; }
  .alac-seg-cons-tbl .c-fis  { width: 170px; }
  .alac-seg-cons-tbl .c-fin  { width: 190px; }
}
/* -----------------------------------------------------------
   Modal de Reporte Mensual (Seguimiento)
   ----------------------------------------------------------- */

/* Header con info del indicador — mismo lenguaje visual que
   el modal de evidencias del año (alac-seg-cons-evm-head-ind*). */
.alac-seg-rep-head {
  padding: 12px 14px;
  margin-bottom: 16px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.alac-seg-rep-head-ctx {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alac-seg-rep-head-ctx-cod {
  font-family: 'Space Grotesk', 'Inter', monospace;
  font-weight: 500;
}
.alac-seg-rep-head-ctx-sep {
  margin: 0 5px;
  color: var(--border-strong);
}
.alac-seg-rep-head-nom {
  margin-top: 3px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.alac-seg-rep-head-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.alac-seg-rep-head-bloque {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.alac-seg-rep-head-bloque.b-tipo  { flex: 0 0 auto; min-width: 90px; }
.alac-seg-rep-head-bloque.b-meta  { flex: 0 0 auto; min-width: 120px; }
.alac-seg-rep-head-bloque.b-mv    { flex: 1 1 auto; min-width: 0; }
.alac-seg-rep-head-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}
.alac-seg-rep-head-val {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
}
.alac-seg-rep-head-val-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 11.5px;
  color: var(--text-muted);
}
.alac-seg-rep-head-mv {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: help;
}
.alac-seg-rep-head-chip-tipo {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* Grid de dos columnas (físico / financiero).
   En pantallas estrechas se apila. */
.alac-seg-rep-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.alac-seg-rep-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.alac-seg-rep-col-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-soft);
}
@media (max-width: 760px) {
  .alac-seg-rep-grid { grid-template-columns: 1fr; }
}

/* Fin v1.x — Seguimiento Consolidado */

/* ============================================================
   Importación masiva (Excel) — Intervenciones y Beneficiarios
   ============================================================ */
:root {
  --c-ok:    #1d8c4a;
  --c-error: #c0392b;
  --c-warn:  #b57700;
  --c-info:  #177E6B;
}

/* Header del paso Upload: texto + botón descargar plantilla */
.alac-import-upload-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}
.alac-import-upload-header p {
  flex: 1;
}

/* Zona de drop / clic para seleccionar archivo */
.alac-import-dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: 12px;
  padding: 36px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  margin-top: 16px;
}
.alac-import-dropzone:hover {
  border-color: var(--azul);
  background: rgba(23,126,107,.03);
}

/* Grilla de columnas del Excel */
.alac-import-cols-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.alac-import-cols-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.alac-import-col-item {
  font-size: 12.5px;
  color: var(--text-soft);
  padding: 3px 0;
}
.alac-import-col-item.required {
  color: var(--text);
  font-weight: 600;
}
.alac-import-col-item .muted { color: var(--text-muted); font-weight: 400; }

/* Tip informativo */
.alac-import-tip {
  font-size: 13px;
  color: var(--text-soft);
  background: var(--bg-soft);
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 4px;
}

/* Barra de resumen (preview y resultado) */
.alac-import-summary-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.alac-import-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.alac-import-badge.ok   { background: #eafaf1; color: var(--c-ok);    border: 1px solid #c3e6cb; }
.alac-import-badge.err  { background: #fdecea; color: var(--c-error);  border: 1px solid #f5c6cb; }
.alac-import-badge.warn { background: #fff8e1; color: var(--c-warn);   border: 1px solid #ffe082; }
.alac-import-badge.info { background: #e8edf9; color: var(--c-info);   border: 1px solid #c5d0ec; }

/* Contenedor scrollable de la tabla de preview */
.alac-import-preview-wrap {
  max-height: 340px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}

/* Tabla de preview */
.alac-import-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.alac-import-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-soft);
  padding: 8px 10px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.alac-import-table tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.alac-import-table tbody tr:last-child td { border-bottom: none; }
.alac-import-table tbody tr.row-ok   { background: #fff; }
.alac-import-table tbody tr.row-warn { background: #fffde7; }
.alac-import-table tbody tr.row-error{ background: #fef8f8; }

/* Barra de progreso */
.alac-import-progress-track {
  height: 10px;
  background: var(--bg-soft);
  border-radius: 999px;
  overflow: hidden;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}
.alac-import-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--azul), var(--azul-soft));
  border-radius: 999px;
  transition: width .3s ease;
}

/* Alertas inline */
.alac-alert { padding: 10px 14px; border-radius: 8px; font-size: 13px; }
.alac-alert-error { background: #fdecea; color: var(--c-error); border: 1px solid #f5c6cb; }

/* Fin — Importación masiva */