/* ========== 5capitales — Design system ========== */
:root {
  /* Palette: calm desaturated — Notion/Linear-like */
  --paper: #f7f8f6;
  --paper-2: #f0f4f8;
  --card: #ffffff;
  --ink: #3d4d5c;
  --ink-2: #4d5c6a;
  --muted: #6b7e8f;
  --muted-2: #a0aebb;
  --hairline: #e2e6ea;
  --hairline-2: #cdd5db;

  --primary: #3b6ea5;
  --primary-hover: #2d5a8e;
  --sidebar: #e8edf2;
  --sidebar-active: #d4dde6;

  /* Capitales — tonos apagados, mismo criterio que Natural y Patrimonial. Cada capital tiene:
     --c-X (relleno, borde, punto; ≥3:1 sobre blanco), --c-X-ink (texto; ≥4,5:1 sobre --c-X-soft)
     y --c-X-soft (fondo suave). Humano, Manufacturado e Intelectual tienen tonos separados para no
     confundirse entre sí (antes los tres eran azul pizarra). */
  --c-natural: #5a8a76;
  --c-natural-ink: #486e5e;
  --c-natural-soft: #dfe9e3;
  --c-patrimonial: #8a7050;
  --c-patrimonial-ink: #776045;
  --c-patrimonial-soft: #e9e2d7;
  --c-humano: #5b7596;
  --c-humano-ink: #506785;
  --c-humano-soft: #e0e6ee;
  --c-industrial: #5f6b75;
  --c-industrial-ink: #5a666f;
  --c-industrial-soft: #e2e5e8;
  --c-financiero: #83697f;
  --c-financiero-ink: #755e71;
  --c-financiero-soft: #ebe2e8;
  --c-social: #6e7d52;
  --c-social-ink: #5c6945;
  --c-social-soft: #e4e8da;
  --c-intelectual: #6a6b92;
  --c-intelectual-ink: #606185;
  --c-intelectual-soft: #e3e3ee;

  --accent: #c47a5a;        /* critical */
  --accent-soft: #f0ddd2;
  --alert-high: #d4956a;
  --alert-high-soft: #f2e3d5;
  --alert-medium: #e8b84b;
  --alert-medium-soft: #f6ecd2;
  --positive: #4a7d6a;
  --warning: #c49a3c;
  --warning-soft: #f2e6c9;
  --danger: #b85450;
  --danger-soft: #f0dcda;

  /* Entidades de Inventario/DT/Valoración con color propio, no compartido con ningún capital,
     con --primary ni con las alertas de severidad. Servicios sigue usando --c-natural. */
  --e-impacts: #b8405e;       /* frambuesa */
  --e-actions: #8c6600;       /* ámbar oscuro (título ≥ 4,5:1 sobre su fondo en claro) */
  --e-dependencies: #2a7a88;  /* azul petróleo */

  /* Plegables dentro de los bloques de variable de DT (ver .subcard.var-block más abajo). */
  --fold-prov-bg: #e2eff1;
  --fold-prov-ink: #2e6670;
  --fold-prov-line: #b7d5da;
  --fold-adv-bg: #f6f0e2;
  --fold-adv-ink: #6e5a2c;
  --fold-adv-line: #e3d6b3;

  /* Type */
  --sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "DM Serif Display", Georgia, serif;
  --mono: "DM Sans", ui-sans-serif, system-ui, sans-serif;

  /* Radius / shadow */
  --r-sm: 4px;
  --r: 6px;
  --r-lg: 10px;
  --shadow-sm: 0 1px 0 rgba(61,77,92,0.04), 0 1px 2px rgba(61,77,92,0.04);
  --shadow: 0 1px 0 rgba(61,77,92,0.04), 0 4px 14px rgba(61,77,92,0.05);

  /* Density */
  --row-h: 40px;
  --pad: 14px;
}

[data-density="compact"] {
  --row-h: 32px;
  --pad: 10px;
}

[data-theme="dark"] {
  --paper: #0f1414;
  --paper-2: #141a1a;
  --card: #181f1f;
  --ink: #ecece6;
  --ink-2: #c8ccc4;
  --muted: #94a09a;
  --muted-2: #6b7771;
  --hairline: #283030;
  --hairline-2: #324040;
  /* Capitales en oscuro: el fondo suave es el color del propio capital al 22 % (antes Social,
     Intelectual y Financiero usaban tonos ajenos que chocaban con --e-impacts/--e-dependencies/
     --e-actions) y el texto usa una versión clara del mismo tono (≥7:1 sobre la tarjeta). El
     relleno --c-X no cambia: lleva texto blanco encima en botones y pasos. */
  --c-natural-ink: #8fbfa9;
  --c-natural-soft: rgba(90,138,118,0.22);
  --c-patrimonial-ink: #c4a680;
  --c-patrimonial-soft: rgba(138,112,80,0.22);
  --c-humano-ink: #93abcb;
  --c-humano-soft: rgba(91,117,150,0.22);
  --c-industrial-ink: #a3aeb8;
  --c-industrial-soft: rgba(95,107,117,0.22);
  --c-financiero-ink: #bea3b8;
  --c-financiero-soft: rgba(131,105,127,0.22);
  --c-social-ink: #abba8a;
  --c-social-soft: rgba(110,125,82,0.22);
  --c-intelectual-ink: #a7a8cf;
  --c-intelectual-soft: rgba(106,107,146,0.22);
  --accent-soft: rgba(196,122,90,0.22);
  /* Títulos (h3) de las secciones de entidad: el color base no llega a 4,5:1 sobre su fondo
     oscuro, así que en oscuro el título usa una versión más clara del mismo tono. */
  --e-impacts-title: #e07a92;
  --e-actions-title: #dcb452;
  --e-dependencies-title: #6cbcc9;
  --fold-prov-bg: rgba(42,122,136,0.18);
  --fold-prov-ink: #8cc6cf;
  --fold-prov-line: rgba(42,122,136,0.45);
  --fold-adv-bg: rgba(176,140,60,0.16);
  --fold-adv-ink: #d9c28c;
  --fold-adv-line: rgba(176,140,60,0.4);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; color: inherit; }

/* === Layout shell === */
.app {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-height: 100vh;
}
.sidebar {
  background: var(--sidebar);
  border-right: 1px solid var(--hairline);
  padding: 22px 17px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--hairline-2); border-radius: 3px; }

.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 6px 8px;
}
.brand-mark {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  border-radius: 3px;
}
.brand-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.brand-name em { font-style: italic; color: var(--c-natural); font-weight: 600; }

.nav-section { display: flex; flex-direction: column; gap: 2px; }
.sidebar-divider { height: 1px; background: var(--hairline); margin: 6px 0 10px; }

/* Menú "proyecto activo" del sidebar (selector de proyecto + año + PROYECTO ACTIVO) — entra con
   slide-down+fade-in y sale con fade-out+slide-up la primera vez que aparece un proyecto activo
   en la sesión y cada vez que se cambia de proyecto (ver projectMenuAnimatedFor/ProjectMenu en
   shell.jsx). */
.nav-project-menu { overflow: hidden; display: flex; flex-direction: column; gap: 10px; }
@keyframes nav-project-menu-in {
  from { opacity: 0; max-height: 0; transform: translateY(-8px); }
  to   { opacity: 1; max-height: 480px; transform: translateY(0); }
}
@keyframes nav-project-menu-out {
  from { opacity: 1; max-height: 480px; transform: translateY(0); }
  to   { opacity: 0; max-height: 0; transform: translateY(-8px); }
}
.nav-project-menu-in { animation: nav-project-menu-in 800ms ease-out; }
.nav-project-menu-out { animation: nav-project-menu-out 800ms ease-out forwards; }
@media (prefers-reduced-motion: reduce) {
  .nav-project-menu-in, .nav-project-menu-out { animation: none; }
}
.nav-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 4px 8px 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px;
  border-radius: var(--r);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.nav-item:hover { background: rgba(61,77,92,0.05); }
.nav-item .ico { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.75; }
.nav-item.active {
  background: var(--sidebar-active);
  border-color: transparent;
  color: var(--ink);
  box-shadow: none;
}
.nav-item.active .ico { opacity: 1; color: var(--primary); }
.nav-status {
  margin-left: auto;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.nav-status-spinner {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(59,110,165,0.25);
  border-top-color: #3b6ea5;
  animation: spin 0.8s linear infinite;
  display: block;
}
.nav-item .badge {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--muted);
}

/* Project switcher inside sidebar */
.project-switch {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
  cursor: pointer;
}
.project-switch:hover { border-color: var(--hairline-2); }
.project-switch .label { font-size: 10px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.project-switch .name { font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 6px; line-height: 1.3; }
.project-switch .name span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.project-switch .meta { font-size: 11px; color: var(--muted); font-family: var(--mono); }

/* Year switcher (periodo del proyecto) */
.year-switch { position: relative; margin-top: 8px; }
.year-chip {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  color: var(--ink);
  text-align: left;
}
.year-chip:hover { border-color: var(--hairline-2); }
.year-chip-text { flex: 1; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.year-chip-label { font-size: 9.5px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--mono); }
.year-chip-value { font-size: 12px; font-weight: 600; }
.year-pop {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: 6px;
  z-index: 50;
  display: flex; flex-direction: column;
}
.year-pop-head {
  font-size: 9.5px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 600;
  padding: 6px 8px 4px;
}
.year-pop-item, .year-pop-add {
  display: flex; align-items: center; justify-content: space-between;
  background: transparent; border: 0; cursor: pointer;
  padding: 6px 8px; border-radius: 4px;
  font-size: 12px; color: var(--ink); text-align: left;
  font-family: inherit;
}
.year-pop-item:hover, .year-pop-add:hover { background: var(--paper-2); }
.year-pop-item.active { background: var(--paper-2); font-weight: 600; }
.year-pop-sep { height: 1px; background: var(--hairline); margin: 4px 0; }
.year-pop-add { color: var(--primary); font-weight: 600; gap: 6px; }
.year-pop-add:hover { background: var(--c-humano-soft); }

/* Main */
.main {
  display: flex; flex-direction: column;
  min-width: 0;
}

.topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(247,248,246,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
  padding: 10px 28px;
  display: flex; align-items: center; gap: 16px;
}
[data-theme="dark"] .topbar { background: rgba(15,20,20,0.92); }

.crumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--muted);
  white-space: nowrap;
}
.crumb b, .crumb > span { white-space: nowrap; }
.crumb b { color: var(--ink); font-weight: 600; }
.crumb .sep { color: var(--muted-2); }

.topbar .spacer { flex: 1; }

.search {
  display: flex; align-items: center; gap: 8px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: 5px 10px;
  width: 280px;
  color: var(--muted);
  font-size: 12px;
}
.search input { background: transparent; border: 0; outline: 0; flex: 1; font-size: 12px; }
.search kbd {
  font-family: var(--mono);
  font-size: 10px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--muted);
}

.icon-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r);
  color: var(--ink-2);
}
.icon-btn:hover { background: var(--card); border-color: var(--hairline); }
.icon-btn .dot { position: absolute; }

.avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-natural);
  color: white;
  font-size: 11px;
  font-weight: 600;
}

/* Content container */
.content {
  padding: 34px;
  width: 100%;
  box-sizing: border-box;
}

/* Page header */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 18px;
}
.page-head .eyebrow {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 600;
}
.page-head h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
}
.page-head h1 em { font-style: italic; color: var(--c-natural); }
.page-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  max-width: 640px;
}
.page-head .actions { display: flex; gap: 8px; }
/* Selector de año de la cartera (PortfolioYearSelect, module-dashboard.jsx): Dashboard y Cartera. */
.portfolio-year { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.portfolio-year .input { width: auto; padding: 6px 8px; font-size: 12px; font-weight: 600; font-family: var(--mono); cursor: pointer; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--r);
  border: 1px solid var(--hairline);
  background: var(--card);
  color: var(--ink);
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
}
.btn:hover { background: var(--paper-2); }
.btn .ico { width: 14px; height: 14px; }
.btn.primary {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}
.btn.primary:hover { background: var(--primary-hover); }
.btn.accent {
  background: var(--c-natural);
  color: white;
  border-color: var(--c-natural);
}
.btn.accent:hover { filter: brightness(1.05); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--paper-2); }
.btn.sm { padding: 4px 8px; font-size: 11px; }
.btn.danger { color: var(--accent); border-color: var(--accent-soft); background: transparent; }
.btn.danger:hover { background: var(--accent-soft); }
.btn.danger.solid { background: var(--accent); color: white; border-color: var(--accent); }
.btn.danger.solid:hover { filter: brightness(1.05); }
.btn.recalc { color: var(--warning); border-color: var(--warning); background: var(--warning-soft); font-weight: 600; }
.btn.recalc:hover { filter: brightness(0.97); }
.eyebrow .row { display: inline-flex; }
.sim-edit { background: var(--warning-soft); }
[data-theme="dark"] .sim-edit { background: rgba(196,154,60,0.14); }
.sim-edit-head { background: var(--warning-soft); color: var(--warning) !important; }
.sim-input { width: 64px; background: transparent; border: 1px solid transparent; border-radius: 4px; padding: 3px 6px; font-family: var(--mono); font-size: 12px; text-align: right; outline: 0; }
.sim-input:hover { border-color: var(--hairline-2); }
.sim-input:focus { border-color: var(--warning); background: var(--card); }
.sim-name { font-family: var(--serif); font-size: 18px; font-weight: 400; background: transparent; border: 0; border-bottom: 1px dashed transparent; outline: 0; color: var(--ink); width: 100%; padding: 0; }
.sim-name:hover, .sim-name:focus { border-bottom-color: var(--hairline-2); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Modals */
.modal-overlay { position: fixed; inset: 0; background: rgba(20,26,24,0.55); backdrop-filter: blur(2px); z-index: 200; display: grid; place-items: center; padding: 24px; animation: fadeIn 0.15s ease; }
.modal { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: 0 24px 64px rgba(0,0,0,0.25); display: flex; flex-direction: column; max-height: calc(100vh - 48px); animation: modalIn 0.18s ease; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 17px; border-bottom: 1px solid var(--hairline); }
.modal-title { font-family: var(--serif); font-size: 20px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.2; color: var(--ink); }
.modal-body { padding: 22px 24px; overflow-y: auto; }
.modal-foot { display: flex; align-items: center; gap: 8px; padding: 17px 24px; border-top: 1px solid var(--hairline); background: var(--paper-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.modal textarea.input { resize: vertical; min-height: 56px; }
.modal-tabs { display: flex; gap: 2px; margin-top: 12px; border-bottom: 1px solid var(--hairline); margin-left: -20px; margin-right: -20px; padding: 0 20px; }
.modal-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; font-size: 12.5px; color: var(--muted); font-family: inherit; display: inline-flex; align-items: center; gap: 6px; margin-bottom: -1px; }
.modal-tab:hover { color: var(--ink); }
.modal-tab.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--c-natural); }
.modal-tab .count { font-family: var(--mono); font-size: 10px; background: var(--paper-2); border: 1px solid var(--hairline); border-radius: 10px; padding: 0 6px; line-height: 16px; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px; border: 1px dashed var(--hairline-2); border-radius: var(--r); background: var(--paper-2); font-size: 12px; color: var(--muted); text-align: center; line-height: 1.5; }
.subcard { border: 1px solid var(--hairline); border-radius: var(--r); padding: 12px 14px; background: var(--card); }
/* Fila de lista (ListItem, shell.jsx): elementos de Inventario — impactos, acciones, servicios,
   dependencias. Se distingue de un atributo (pill) porque es una fila con título, detalle en gris
   y chevron, y cuando es clicable cambia de fondo al pasar el ratón. */
.list-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r); font-size: 12px; }
.list-item.clickable { cursor: pointer; transition: background 0.12s, border-color 0.12s; }
.list-item.clickable:hover { background: var(--paper-2); border-color: var(--hairline-2); }
.list-item.clickable:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.list-item .li-main { flex: 1; min-width: 0; }
.list-item .li-title { font-weight: 600; font-size: 13px; color: var(--ink); line-height: 1.35; }
.list-item.sm .li-title { font-size: 12px; }
.list-item .li-meta { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.list-item .li-chev { color: var(--muted); flex-shrink: 0; margin-top: 2px; }
.list-item.clickable:hover .li-chev { color: var(--ink); }
.list-stack { display: flex; flex-direction: column; gap: 6px; }
/* Atributo en texto con punto de color (tipo de servicio, severidad, estado) — en vez de pill. */
.dot-label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.dot-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dot, var(--muted)); flex-shrink: 0; }
.warn-flag { display: inline-flex; align-items: center; gap: 4px; color: var(--warning); font-weight: 600; font-size: 11px; white-space: nowrap; }

/* Acordeones (<details class="subcard">) — Procedencia del dato, Parámetros avanzados, EOS-A...
   El <details> pierde su padding propio (queda solo en el header y en el contenido por separado,
   ver abajo) para poder darle al header un fondo distinto del cuerpo. Cada variante (acc-provenance/
   acc-params/acc-eos) fija su propio par de colores vía --acc-c/--acc-soft para no confundirse
   entre sí; el contenido (pills, texto) nunca hereda ese color — solo el header lo usa — así que
   nada dentro pierde contraste cuando el header se oscurece en hover. */
details.subcard { padding: 0 !important; overflow: hidden; --acc-c: var(--c-humano-ink); --acc-soft: var(--c-humano-soft); }
details.subcard.acc-provenance { --acc-c: var(--c-humano-ink); --acc-soft: var(--c-humano-soft); }
details.subcard.acc-params { --acc-c: var(--c-financiero-ink); --acc-soft: var(--c-financiero-soft); }
details.subcard.acc-eos { --acc-c: var(--c-intelectual-ink); --acc-soft: var(--c-intelectual-soft); }
/* Variantes por variable (E/Ca/Co) y por bloque de servicio — cuando varios acordeones
   "Procedencia del dato" conviven en la misma pantalla (p.ej. E y Co seguidos), deben
   distinguirse entre sí, no solo del resto de tipos de acordeón. */
details.subcard.acc-provenance-e { --acc-c: var(--c-patrimonial-ink); --acc-soft: var(--c-patrimonial-soft); }
details.subcard.acc-provenance-ca { --acc-c: var(--c-social-ink); --acc-soft: var(--c-social-soft); }
details.subcard.acc-provenance-co { --acc-c: var(--c-humano-ink); --acc-soft: var(--c-humano-soft); }
/* Bloque de una variable E/Ca/Co (MetricVarBlock: magnitud por variable en ImpactDetailModal y
   ActionDetailModal, DT): mismos colores que acc-provenance-e/ca/co para que cada variable se
   reconozca igual en toda la pantalla. Mismo criterio que tarjetas y tablas de entidad: el color va
   solo en el borde (--var-line) y en el título (--var-c); el interior queda en fondo de tarjeta. */
.subcard.var-block { background: var(--card); border-color: var(--var-line); }
.subcard.var-block .var-block-title { color: var(--var-c); }
.subcard.var-block-e { --var-c: var(--c-patrimonial-ink); --var-line: var(--c-patrimonial); --var-soft: var(--c-patrimonial-soft); }
.subcard.var-block-ca { --var-c: var(--c-social-ink); --var-line: var(--c-social); --var-soft: var(--c-social-soft); }
.subcard.var-block-co { --var-c: var(--c-humano-ink); --var-line: var(--c-humano); --var-soft: var(--c-humano-soft); }
details.subcard.acc-provenance-provision { --acc-c: var(--c-industrial-ink); --acc-soft: var(--c-industrial-soft); }
details.subcard.acc-provenance-magnitude { --acc-c: var(--c-financiero-ink); --acc-soft: var(--c-financiero-soft); }
details.subcard.acc-provenance-response { --acc-c: var(--c-intelectual-ink); --acc-soft: var(--c-intelectual-soft); }
/* Plegables dentro de un bloque de variable. Cada uno tiene su propio color de fondo, distinto
   entre sí, de los colores de las variables E/Ca/Co (tostado/oliva/azul) y del gris de los campos y
   avisos de solo lectura, para que se lean como desplegables y no como cajas de texto:
   - Procedencia (de la magnitud y de la función de respuesta): azul verdoso claro.
   - Parámetros avanzados: crema arena.
   Texto ≥ 5:1 sobre su fondo en claro y ≥ 7:1 en oscuro (tokens --fold-* en :root y oscuro). */
.subcard.var-block details.subcard.acc-provenance { --acc-c: var(--fold-prov-ink); --acc-soft: var(--fold-prov-bg); border-color: var(--fold-prov-line); }
.subcard.var-block details.subcard.acc-params { --acc-c: var(--fold-adv-ink); --acc-soft: var(--fold-adv-bg); border-color: var(--fold-adv-line); }
details.subcard > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  background: var(--acc-soft);
  color: var(--acc-c) !important;
  border-radius: var(--r);
  transition: filter 0.15s ease;
}
details.subcard > summary::-webkit-details-marker { display: none; }
details.subcard > summary::after {
  content: "▸";
  flex-shrink: 0;
  margin-left: auto;
  color: var(--acc-c);
  font-size: 10px;
  transition: transform 0.15s ease;
}
/* Oscurece el mismo tono en vez de invertir a un color sólido — así los pills que vivan dentro
   del summary (p.ej. "No evaluado") no se quedan con texto oscuro sobre fondo oscuro. */
details.subcard > summary:hover { filter: brightness(0.92); }
[data-theme="dark"] details.subcard > summary:hover { filter: brightness(1.25); }
details.subcard[open] > summary { border-radius: var(--r) var(--r) 0 0; border-bottom: 1px solid var(--hairline); }
details.subcard[open] > summary::after { transform: rotate(90deg); }
/* Contenido expandido: bloque anidado sin línea lateral de color (colores planos, sin marcas). */
details.subcard > summary + div {
  margin: 0 !important;
  padding: 12px 14px !important;
}
.svc-grid { display: grid; grid-template-columns: 1.6fr 96px; gap: 8px; align-items: center; }
/* Fondo de tarjeta por defecto: sin él, los paneles sin variante (Descripción) quedaban
   transparentes sobre el fondo del acordeón de la fila y no se distinguían. */
.detail-panel { border-radius: var(--r-lg); padding: 12px 14px; border: 1px solid var(--hairline); background: var(--card); }
.detail-panel.metrics { background: var(--card); }
.detail-panel.impacts { background: rgba(184,64,94,0.06); border-color: rgba(184,64,94,0.24); }
.detail-panel.impacts .txt-xs.txt-muted[style*="uppercase"] { color: var(--e-impacts); }
.detail-panel.services { background: var(--c-natural-soft); border-color: rgba(90,138,118,0.3); }
.detail-panel.services .txt-xs.txt-muted[style*="uppercase"] { color: var(--c-natural); }
[data-theme="dark"] .detail-panel.impacts { background: rgba(184,64,94,0.12); }
/* Acciones de mejora: tono ámbar propio, para distinguirlo de Impactos (frambuesa) y Servicios (verde). */
.detail-panel.actions { background: rgba(140,102,0,0.06); border-color: rgba(140,102,0,0.24); }
.detail-panel.actions .txt-xs.txt-muted[style*="uppercase"] { color: var(--e-actions); }
[data-theme="dark"] .detail-panel.actions { background: rgba(140,102,0,0.14); }
/* Color de sección (--tone) para los botones "Añadir" (.btn.tone) de cada panel del acordeón. */
.detail-panel.impacts { --tone: var(--e-impacts); }
.detail-panel.actions { --tone: var(--e-actions); }
.detail-panel.services { --tone: var(--c-natural); }
/* Dependencias del activo: mismo tono que la sección Dependencias (azul petróleo propio). */
.detail-panel.dependencies { background: rgba(42,122,136,0.06); border-color: rgba(42,122,136,0.24); --tone: var(--e-dependencies); }
.detail-panel.dependencies .txt-xs.txt-muted[style*="uppercase"] { color: var(--e-dependencies); }
[data-theme="dark"] .detail-panel.dependencies { background: rgba(42,122,136,0.14); }

/* Secciones de Inventario bajo la tabla (zona C): mismo fondo que su panel del acordeón.
   --tone-title: color del h3; solo se redefine en oscuro (ver [data-theme="dark"]). */
.card.tone-impacts { background: rgba(184,64,94,0.06); border-color: rgba(184,64,94,0.24); --tone: var(--e-impacts); --tone-title: var(--e-impacts-title, var(--e-impacts)); }
.card.tone-actions { background: rgba(140,102,0,0.06); border-color: rgba(140,102,0,0.24); --tone: var(--e-actions); --tone-title: var(--e-actions-title, var(--e-actions)); }
.card.tone-services { background: var(--c-natural-soft); border-color: rgba(90,138,118,0.3); --tone: var(--c-natural); }
.card.tone-dependencies { background: rgba(42,122,136,0.06); border-color: rgba(42,122,136,0.24); --tone: var(--e-dependencies); --tone-title: var(--e-dependencies-title, var(--e-dependencies)); }
[data-theme="dark"] .card.tone-impacts { background: rgba(184,64,94,0.12); }
[data-theme="dark"] .card.tone-actions { background: rgba(140,102,0,0.14); }
[data-theme="dark"] .card.tone-dependencies { background: rgba(42,122,136,0.14); }
.card[class*="tone-"] > .card-head { border-bottom-color: inherit; flex-wrap: wrap; row-gap: 10px; }
.card[class*="tone-"] > .card-head h3 { color: var(--tone-title, var(--tone)); }
/* Como en Inventario (donde los .list-item llevan fondo de tarjeta): el tono de entidad queda en
   el contenedor (borde, cabecera y título de la tarjeta) y la tabla interior usa el fondo neutro
   de cualquier tabla de la app — sin esto las filas dejaban ver el tinte (DT y Valoración). */
.card[class*="tone-"] table.t { background: var(--card); }
/* En DT la tabla va dentro de .card-body (19px de padding) y ese marco seguía mostrando el tinte
   alrededor de las filas. Sin padding, la tabla llega de borde a borde como en Valoración. Solo
   cuando el card-body contiene la tabla: el texto de "sin registros" conserva su padding. */
.card[class*="tone-"] > .card-body:has(> table.t) { padding: 0; }
/* Pastilla "regulación" (TypePill, .pill.natural) dentro de Servicios: en tema claro su fondo
   (--c-natural-soft) es el mismo que el de la tarjeta y se perdía. Fondo de tarjeta + borde del tono. */
:root:not([data-theme="dark"]) :is(.card.tone-services, .detail-panel.services) .pill.svc-regulacion { background: var(--card); border-color: rgba(90,138,118,0.3); }

/* Separador con etiqueta centrada entre bloques de una pantalla (Inventario: tabla de activos /
   secciones generales). */
.section-divider { display: flex; align-items: center; gap: 12px; margin: 36px 0 20px; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.section-divider::before, .section-divider::after { content: ""; flex: 1; height: 1px; background: var(--hairline-2); }
.section-divider span { white-space: nowrap; }
/* Papelera de "borrar año" en el selector de años del menú lateral. */
.year-pop-del { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 4px; color: var(--muted); }
.year-pop-del:hover { background: var(--danger-soft); color: var(--danger); }

/* Botón "Añadir …" relleno con el color de su sección (--tone), para que destaque. */
.btn.tone { background: var(--tone, var(--primary)); border-color: var(--tone, var(--primary)); color: #fff; font-weight: 600; }
.btn.tone:hover { background: var(--tone, var(--primary)); filter: brightness(0.93); }
.svc-head { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; padding: 0 2px; }
.row-edit { width: 24px; height: 24px; border: 1px solid transparent; background: transparent; border-radius: 4px; display: inline-grid; place-items: center; color: var(--muted); opacity: 0; transition: opacity 0.12s; }
.row-editable:hover .row-edit { opacity: 1; }
.row-edit:hover { background: var(--paper-2); border-color: var(--hairline); color: var(--ink); }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
/* Carga de datos de Supabase: la estructura (tablas, tarjetas, KPIs) se pinta desde el primer
   momento con esqueletos (.skel, barra gris con brillo) y cada dato entra con un fundido suave
   (.data-in) al llegar — en vez de spinners que se sustituyen de golpe (parpadeo). */
.skel { display: inline-block; height: 0.9em; min-width: 12px; border-radius: 4px; vertical-align: middle;
  background: linear-gradient(90deg, var(--paper-2) 0%, var(--hairline) 50%, var(--paper-2) 100%);
  background-size: 200% 100%; animation: skel 1.4s ease-in-out infinite; }
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.data-in { animation: dataIn 0.45s ease-out both; }
@keyframes dataIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .skel, .data-in { animation: none; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(0.985) } to { opacity: 1; transform: none } }

/* Cards */
.card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.card-pad { padding: var(--pad); }
.card-head {
  padding: 17px 19px;
  border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.card-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  display: flex; align-items: center; gap: 8px;
}
.card-head .sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.card-body { padding: 19px; }

/* KPI tile */
.kpi {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 19px 22px;
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
  overflow: hidden;
}
.kpi .label {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.kpi .value {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 36px;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
  display: flex; align-items: baseline; gap: 6px;
}
.kpi .value .unit { font-size: 13px; color: var(--muted); font-family: var(--sans); font-weight: 500; letter-spacing: 0; }
.kpi .delta {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--mono);
  display: flex; align-items: center; gap: 4px;
}
.kpi .delta.up { color: var(--positive); }
.kpi .delta.down { color: var(--danger); }
.risk-level-wrap { position:relative; display:inline-block; }
.risk-level-tip { display:none; position:absolute; left:0; top:calc(100% + 6px); background:var(--ink); color:var(--paper); font-size:11px; line-height:1.45; padding:7px 10px; border-radius:6px; white-space:normal; width:240px; z-index:50; box-shadow:0 4px 12px rgba(0,0,0,0.2); pointer-events:none; }
.risk-level-wrap:hover .risk-level-tip { display:block; }
.kpi .spark {
  position: absolute; right: 12px; bottom: 10px;
  opacity: 0.5;
}

/* Pills / Tags / Badges */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-2);
  border: 1px solid var(--hairline);
  white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.natural { color: var(--c-natural-ink); background: var(--c-natural-soft); border-color: transparent; }
.pill.patrimonial { color: var(--c-patrimonial-ink); background: var(--c-patrimonial-soft); border-color: transparent; }
.pill.humano { color: var(--c-humano-ink); background: var(--c-humano-soft); border-color: transparent; }
.pill.industrial { color: var(--c-industrial-ink); background: var(--c-industrial-soft); border-color: transparent; }
.pill.financiero { color: var(--c-financiero-ink); background: var(--c-financiero-soft); border-color: transparent; }
.pill.social { color: var(--c-social-ink); background: var(--c-social-soft); border-color: transparent; }
.pill.intelectual { color: var(--c-intelectual-ink); background: var(--c-intelectual-soft); border-color: transparent; }
.pill.danger { color: var(--danger); background: var(--accent-soft); border-color: transparent; }
.pill.warning { color: var(--warning); background: var(--warning-soft); border-color: transparent; }
.pill.positive { color: var(--positive); background: var(--c-natural-soft); border-color: transparent; }
.pill.outline { background: transparent; }

/* Table */
table.t {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
table.t th {
  text-align: left;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 12px;
  border-bottom: 1px solid var(--hairline);
  background: var(--paper-2);
  position: sticky;
  top: 0;
  white-space: nowrap;
}
table.t td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
  height: var(--row-h);
}
/* Hover distinto del fondo de la cabecera (th usa --paper-2): con el mismo color, la fila
   resaltada se confundía con la cabecera. */
table.t tbody tr:hover { background: rgba(59,110,165,0.05); }
[data-theme="dark"] table.t tbody tr:hover { background: rgba(255,255,255,0.03); }
table.t tbody tr:last-child td { border-bottom: 0; }
table.t .num { font-family: var(--sans); font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }
/* Cabecera de una columna numérica: solo se alinea a la derecha — mismo tamaño/peso/color que el
   resto de cabeceras (sin esto heredaba el 13px/400/ink de las celdas .num). */
table.t th.num { font-size: 10px; font-weight: 600; color: var(--muted); }
table.t .strong { font-weight: 600; }

/* Mini bar */
.bar {
  height: 4px;
  background: var(--paper-2);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.bar > span { display: block; height: 100%; background: var(--c-natural); }
.bar.neutral > span { background: var(--ink); }
.bar.danger > span { background: var(--danger); }
.bar.warning > span { background: var(--warning); }

/* Confidence dots */
.conf { display: inline-flex; gap: 2px; }
.conf i { width: 5px; height: 5px; border-radius: 50%; background: var(--hairline-2); display: block; }
.conf.high i:nth-child(-n+3) { background: var(--positive); }
.conf.med i:nth-child(-n+2) { background: var(--warning); }
.conf.low i:nth-child(-n+1) { background: var(--danger); }

/* Inputs */
.input {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: 7px 10px;
  font-size: 13px;
  color: var(--ink);
  outline: 0;
  width: 100%;
}
.input:focus { border-color: var(--c-natural); }
/* Antes .input y un campo deshabilitado/de solo lectura eran indistinguibles (mismo fondo gris
   que un campo editable normal) — ahora que lo editable es blanco, el gris queda libre para
   marcar "no se puede tocar" (p.ej. el Código ISIC calculado en Nuevo proyecto). */
.input:disabled, .input[readonly] { background: var(--paper-2); color: var(--muted); cursor: not-allowed; }
/* Un campo cerrado/solo lectura no debe sugerir que se puede rellenar — el placeholder es una
   instrucción de edición ("escribe aquí X") que no aplica cuando el campo está inerte. Cubre
   tanto `disabled` directo como el `<fieldset disabled>` que usan los modales (AssetModal,
   module-geospatial.jsx) para desactivar formularios enteros de una vez. */
.input:disabled::placeholder, .input[readonly]::placeholder, fieldset:disabled .input::placeholder { color: transparent; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Section header */
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 28px 0 12px;
  padding-bottom: 6px;
}
.section-head h2 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.01em;
  display: flex; align-items: baseline; gap: 8px;
}
.section-head h2 .num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  font-style: normal;
  letter-spacing: 0;
}
.section-head .actions { display: flex; gap: 6px; align-items: center; font-size: 11px; color: var(--muted); }

/* Tabs */
.tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 16px;
}
.tab {
  /* .tab se usa en <button> reales (accesibilidad) — sin este reset, el navegador les mete su
     propio borde/fondo de botón por encima de todo lo de abajo, y las pestañas salen como cajas
     en vez de la pestaña subrayada que dice el resto de la regla. */
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; border-bottom: 2px solid transparent;
  font-family: inherit;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: -1px;
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--c-natural); font-weight: 600; }
.tab:focus-visible { outline: 2px solid var(--c-natural); outline-offset: 2px; }
.tab .count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  background: var(--paper-2);
  padding: 1px 5px;
  border-radius: 3px;
}

/* Grids */
.g { display: grid; gap: 16px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-5 { grid-template-columns: repeat(5, 1fr); }
.g-6 { grid-template-columns: repeat(6, 1fr); }

/* Fine separators / asides */
.hairline { height: 1px; background: var(--hairline); margin: 16px 0; }
.aside-note {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--mono);
  letter-spacing: 0;
  display: inline-flex; align-items: center; gap: 6px;
}

/* Capital token */
.cap-token {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600;
}
.cap-token .swatch { width: 10px; height: 10px; border-radius: 2px; }

/* Heatmap cell */
.heat {
  width: 38px; height: 32px;
  margin: 0 auto; /* centra el chip dentro de la celda cuando la columna es más ancha que 38px */
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink);
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.05);
}
[data-theme="dark"] .heat { color: var(--paper); border-color: rgba(255,255,255,0.06); }
.heat.empty { background: transparent !important; border: 1px dashed var(--hairline-2); cursor: default; }

/* Tooltip de celda (Matriz de materialidad) — sigue al cursor, fixed para no recortarse por .card{overflow:hidden} */
.cell-tooltip {
  position: fixed;
  transform: translate(-50%, 4px);
  background: var(--ink); color: var(--paper);
  font-size: 11px; line-height: 1.55;
  padding: 10px 12px;
  border-radius: 8px;
  width: 230px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
  z-index: 300;
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.cell-tooltip.show { opacity: 1; transform: translate(-50%, 0); }

/* Tarjetas de nivel AR3T — clicables */
.ar3t-card { cursor: pointer; transition: background 0.12s, border-color 0.12s; }
.ar3t-card:hover { background: var(--paper-2); }

/* Map placeholder */
.map-canvas {
  position: relative;
  background:
    radial-gradient(at 30% 40%, rgba(47,107,79,0.15), transparent 50%),
    radial-gradient(at 70% 70%, rgba(122,91,59,0.10), transparent 50%),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(61,77,92,0.05) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(61,77,92,0.05) 23px 24px),
    var(--paper-2);
  border-radius: var(--r);
  overflow: hidden;
}

/* Process step indicator (estados) */
.ptrack { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 4px; }
.pstep { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 0; background: transparent; border-radius: 6px; text-align: left; color: var(--muted); font-family: inherit; min-width: 0; }
.pstep:hover { background: var(--paper-2); }
.pstep-ico { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; border: 1px solid var(--hairline); background: var(--paper-2); color: var(--muted); }
.pstep-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pstep-label { font-size: 11px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.pstep-state { font-size: 9.5px; font-family: var(--mono); letter-spacing: 0.02em; margin-top: 2px; }
.pstep.pending .pstep-label { color: var(--muted); font-weight: 500; }
.pstep.done .pstep-ico { background: var(--c-natural); border-color: var(--c-natural); color: white; }
.pstep.done .pstep-state { color: var(--c-natural); }
.pstep.processing .pstep-ico { background: var(--c-natural-soft); border-color: var(--c-natural); color: var(--c-natural); }
.pstep.processing .pstep-state { color: var(--c-natural); }
.pstep.review .pstep-ico { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }
.pstep.review .pstep-state { color: var(--warning); }
.pstep.error .pstep-ico { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.pstep.error .pstep-state { color: var(--accent); }
.pstep.recalc .pstep-ico { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.pstep.recalc .pstep-state { color: var(--danger); }
.cfg-locked.on { position: relative; cursor: not-allowed; }
.cfg-locked.on > * { opacity: 0.75; pointer-events: none; }
.cfg-warn { margin-top: 8px; padding: 10px 12px; background: var(--warning-soft); border: 1px solid var(--warning); border-radius: var(--r); font-size: 12px; color: #7a5f1f; line-height: 1.45; }
.cap-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; border: 1px solid transparent; font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; }
.method-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: var(--r); cursor: pointer; }
.method-opt:hover { border-color: var(--hairline-2); }
.method-opt.on { border-color: var(--ink); background: var(--paper-2); }
.method-opt-check { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--hairline-2); display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; color: white; }
.method-opt.on .method-opt-check { background: var(--ink); border-color: var(--ink); }
.spinner { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--c-natural-soft); border-top-color: var(--c-natural); animation: spin 0.8s linear infinite; display: block; }
@keyframes spin { to { transform: rotate(360deg) } }

/* Process step indicator */
.step-track {
  display: flex; align-items: center; gap: 0;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: 2px;
}
.step {
  flex: 1;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  font-size: 11px;
  color: var(--muted);
  border-right: 1px solid var(--hairline);
  position: relative;
}
.step:last-child { border-right: 0; }
.step .n {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--paper-2);
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  border: 1px solid var(--hairline);
}
.step.done .n { background: var(--c-natural); color: white; border-color: var(--c-natural); }
.step.current { color: var(--ink); font-weight: 600; }
.step.current .n { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Progress segments */
.segs { display: flex; gap: 2px; height: 6px; }
.segs i { flex: 1; background: var(--paper-2); border-radius: 1px; display: block; }
.segs i.on { background: var(--c-natural); }

/* Cadena de valor metodológica */
.vchain { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.vchain-step { padding: 2px 7px; border: 1px solid var(--hairline); border-radius: 4px; background: var(--card); white-space: nowrap; }
.vchain-step.active { color: var(--ink); border-color: var(--ink); font-weight: 600; background: var(--paper-2); }
.vchain-arrow { color: var(--muted-2); }
.vchain.xs { font-size: 9.5px; gap: 4px; } .vchain.xs .vchain-step { padding: 1px 5px; }
.g-7 { grid-template-columns: repeat(7, 1fr); }

/* Espacio Operativo Seguro */
.eos { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 4px; }
.eos.in { color: var(--positive); background: var(--c-natural-soft); }
.eos.out { color: var(--accent); background: var(--accent-soft); }
.eos .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Footer */
.foot {
  margin-top: 32px;
  padding: 18px 28px;
  border-top: 1px solid var(--hairline);
  font-size: 11px;
  color: var(--muted);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono);
}

/* Misc utilities */
.row { display: flex; align-items: center; gap: 8px; }
.col { display: flex; flex-direction: column; gap: 8px; }
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.fl-1 { flex: 1; }
.txt-mono { font-family: var(--sans); font-variant-numeric: tabular-nums; }
.txt-serif { font-family: var(--serif); font-weight: 400; }
/* Cifras destacadas (totales, importe calculado de un modal, centro del donut, contadores): siempre
   la sans del cuerpo con dígitos tabulares — la serifa (DM Serif Display) es solo para títulos de
   texto, nunca para cifras. Peso 500 por defecto (≥ 20px); en tamaños menores (16px) se sube a 600
   en línea para que no pierda presencia. El tamaño y el color los pone cada uso. */
.num-display { font-family: var(--sans); font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -0.01em; }
.txt-muted { color: var(--muted); }
.txt-xs { font-size: 11px; }
.txt-sm { font-size: 12px; }
.txt-right { text-align: right; }
.between { display: flex; justify-content: space-between; align-items: center; }

/* eyebrow inline select (after .input so it wins) */
.input.eyebrow-select { display: inline-block; width: auto; min-width: 96px; flex: 0 0 auto; padding: 0 6px; font-size: 11px; height: 22px; line-height: normal; font-family: var(--mono); letter-spacing: 0.02em; text-transform: none; font-weight: 600; color: var(--ink); vertical-align: middle; }

/* Deslizador de Co sin dato (null = "no revisado", Datos territoriales): pista atenuada y sin
   tirador, para que no parezca un valor en el centro. Pulsar o arrastrar fija el valor. */
input[type="range"].range-unset { -webkit-appearance: none; appearance: none; height: 4px; margin: 10px 0; border-radius: 2px; background: var(--hairline); opacity: .7; cursor: pointer; }
input[type="range"].range-unset::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 0; height: 0; border: 0; }
input[type="range"].range-unset::-moz-range-thumb { width: 0; height: 0; border: 0; opacity: 0; }