/* FISSH Invest · dirección visual C «Sala de datos» (ficha 0009, decisión D14).
   Tokens --sd-* y componentes .sd-* con ámbito propio: no tocan los tokens globales de estilos.css.
   Regla: ningún HEX ni rgba() fuera de los dos bloques de tokens (claro y oscuro).
   Los pares texto/fondo y borde/fondo los vigila api/test/contraste-tokens.test.js. */

/* ===== 1. Tokens · claro ===== */
:root{
 --sd-fondo:#F5F6F8;--sd-tarjeta:#FFFFFF;--sd-tarjeta-alt:#F9FAFB;--sd-segmento:#EAECF0;
 --sd-borde:#E4E7EC;--sd-borde-control:#667085;
 --sd-texto:#101828;--sd-texto-2:#344054;--sd-texto-3:#475467;
 --sd-acento:#0B6E66;--sd-acento-fuerte:#064E48;--sd-acento-suave:#E7F3F1;--sd-acento-borde:#B9DCD7;--sd-sobre-acento:#FFFFFF;
 --sd-coral:#C2410C;--sd-coral-texto:#9A3412;--sd-coral-suave:#FFF6F0;--sd-coral-borde:#FBD9C6;--sd-sobre-coral:#FFFFFF;
 --sd-aviso-texto:#7A4B00;--sd-aviso-fondo:#FFF4D6;--sd-aviso-borde:#E8C36A;
 --sd-error-texto:#B42318;--sd-error-fondo:#FEF3F2;--sd-error-borde:#FDA29B;
 --sd-exito-texto:#067647;--sd-exito-fondo:#ECFDF3;--sd-exito-borde:#A6F4C5;
 --sd-foco:#0B6E66;
 --sd-velo:rgba(16,24,40,.55);
 --sd-esqueleto-1:#EAECF0;--sd-esqueleto-2:#F2F4F7;
 --sd-sombra-1:0 1px 2px rgba(16,24,40,.06);--sd-sombra-2:0 6px 18px rgba(16,24,40,.10);
 --sd-radio-s:8px;--sd-radio-m:10px;--sd-radio-l:14px;--sd-radio-pill:999px;
 --sd-e1:4px;--sd-e2:8px;--sd-e3:12px;--sd-e4:16px;--sd-e5:20px;--sd-e6:28px;
 --sd-fuente:"Manrope","Segoe UI",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
 --sd-t-xs:11px;--sd-t-s:12px;--sd-t-m:13px;--sd-t-l:14px;--sd-t-h3:16px;--sd-t-h2:22px;--sd-t-h1:30px;
 --sd-alto-control:36px;--sd-topbar:68px;--sd-alto-barra:56px;--sd-ancho-lateral:440px;--sd-fijo-mercado:0px;
}

/* ===== 2. Tokens · oscuro (redefine solo lo que cambia) ===== */
:root[data-theme="dark"]{
 --sd-fondo:#0C1114;--sd-tarjeta:#141B20;--sd-tarjeta-alt:#182026;--sd-segmento:#1E282F;
 --sd-borde:#26323A;--sd-borde-control:#8191A0;
 --sd-texto:#EAF0F3;--sd-texto-2:#C3CED6;--sd-texto-3:#9AA9B5;
 --sd-acento:#3FB5A8;--sd-acento-fuerte:#8FE5DA;--sd-acento-suave:#12332F;--sd-acento-borde:#215A54;--sd-sobre-acento:#04201D;
 --sd-coral:#F08A5D;--sd-coral-texto:#FBAA84;--sd-coral-suave:#2E1A12;--sd-coral-borde:#6B3A24;--sd-sobre-coral:#2A0E03;
 --sd-aviso-texto:#F3D283;--sd-aviso-fondo:#2E2610;--sd-aviso-borde:#6E5A1E;
 --sd-error-texto:#FDA29B;--sd-error-fondo:#34181A;--sd-error-borde:#7A2E2A;
 --sd-exito-texto:#6CE9A6;--sd-exito-fondo:#0E2A1C;--sd-exito-borde:#1F5B3C;
 --sd-foco:#5CD6C8;
 --sd-velo:rgba(0,0,0,.68);
 --sd-esqueleto-1:#1E282F;--sd-esqueleto-2:#26323A;
 --sd-sombra-1:none;--sd-sombra-2:none;
}

/* ===== 3. Base y utilidades ===== */
.sd-pantalla{font-family:var(--sd-fuente);font-size:var(--sd-t-m);line-height:1.45;color:var(--sd-texto);background:var(--sd-fondo);font-variant-numeric:tabular-nums;display:flex;flex-direction:column;gap:var(--sd-e5);min-width:0}
.sd-pantalla *,.sd-pantalla *::before,.sd-pantalla *::after{box-sizing:border-box}
.sd-pantalla h1,.sd-pantalla h2,.sd-pantalla h3{margin:0;font-weight:800;letter-spacing:-.01em}
.sd-pantalla p{margin:0}
.sd-pantalla a{color:var(--sd-acento);font-weight:600}
.sd-pantalla a:hover{color:var(--sd-acento-fuerte)}
.sd-pantalla :focus-visible{outline:2px solid var(--sd-foco);outline-offset:2px}
.sd-pantalla [hidden]{display:none}
.sd-pantalla .sr-only{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
.sd-num{text-align:right;font-variant-numeric:tabular-nums}
.sd-apagado{color:var(--sd-texto-3)}
.sd-atenuado{opacity:.55;transition:opacity .15s}
.sd-h1{font-size:var(--sd-t-h1)}.sd-h2{font-size:var(--sd-t-h2)}.sd-h3{font-size:var(--sd-t-h3)}

/* ===== 4. Tarjeta ===== */
.sd-tarjeta{background:var(--sd-tarjeta);border:1px solid var(--sd-borde);border-radius:var(--sd-radio-l);box-shadow:var(--sd-sombra-1);min-width:0}
.sd-tarjeta-cab{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sd-e3);padding:var(--sd-e4) var(--sd-e5);border-bottom:1px solid var(--sd-borde)}
.sd-tarjeta-titulo{font-size:var(--sd-t-h3);font-weight:800;margin:0}
.sd-tarjeta-sub{flex-basis:100%;color:var(--sd-texto-3);font-size:var(--sd-t-s)}
.sd-tarjeta-acciones{margin-left:auto;display:flex;flex-wrap:wrap;gap:var(--sd-e2);align-items:center}
.sd-tarjeta-cuerpo{padding:var(--sd-e4) var(--sd-e5);display:flex;flex-direction:column;gap:var(--sd-e4)}
.sd-tarjeta-pie{padding:var(--sd-e3) var(--sd-e5);border-top:1px solid var(--sd-borde);color:var(--sd-texto-3);font-size:var(--sd-t-s)}

/* ===== 5. Maquetación de la pantalla (>= 1181 px: panel lateral + resultado) ===== */
.sd-rejilla{display:grid;grid-template-columns:var(--sd-ancho-lateral) minmax(0,1fr);gap:var(--sd-e5);align-items:start}
.sd-lateral{position:sticky;top:calc(var(--sd-topbar) + var(--sd-alto-barra) + var(--sd-fijo-mercado,0px) + var(--sd-e3));max-height:calc(100vh - var(--sd-topbar) - var(--sd-alto-barra) - var(--sd-fijo-mercado,0px) - var(--sd-e5) - var(--sd-e6));overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:var(--sd-e3);min-width:0}
.sd-columna{display:flex;flex-direction:column;gap:var(--sd-e5);min-width:0}

/* ===== 6. Barra de acciones (sticky bajo la topbar) ===== */
.sd-barra{position:sticky;top:var(--sd-topbar);z-index:20;min-height:var(--sd-alto-barra);display:flex;flex-wrap:wrap;align-items:center;gap:var(--sd-e3);padding:var(--sd-e2) var(--sd-e4);background:var(--sd-tarjeta);border:1px solid var(--sd-borde);border-radius:var(--sd-radio-l);box-shadow:var(--sd-sombra-2)}
.sd-barra-estado{flex:1 1 12rem;min-width:0;font-size:var(--sd-t-s);font-weight:600;color:var(--sd-texto-2);display:flex;align-items:center;gap:var(--sd-e2)}
.sd-barra-acciones{display:flex;gap:var(--sd-e2);flex-wrap:wrap;margin-left:auto}

/* ===== 7. Selector segmentado ===== */
.sd-segmentado{display:inline-flex;gap:var(--sd-e1);padding:var(--sd-e1);background:var(--sd-segmento);border-radius:var(--sd-radio-m);max-width:100%;overflow-x:auto}
.sd-segmentado button{min-height:calc(var(--sd-alto-control) - 4px);padding:0 var(--sd-e4);border-radius:var(--sd-radio-s);color:var(--sd-texto-2);font-weight:600;white-space:nowrap}
.sd-segmentado button:hover{color:var(--sd-texto)}
.sd-segmentado button[aria-pressed="true"],.sd-segmentado button[aria-checked="true"]{background:var(--sd-tarjeta);color:var(--sd-acento-fuerte);font-weight:800;box-shadow:var(--sd-sombra-1)}

/* ===== 8. Chips e insignias ===== */
.sd-chips{display:flex;flex-wrap:wrap;gap:var(--sd-e2)}
.sd-chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:2px 10px;border:1px solid var(--sd-borde-control);border-radius:var(--sd-radio-pill);background:var(--sd-tarjeta);color:var(--sd-texto-2);font-size:var(--sd-t-s);font-weight:600;text-decoration:none;cursor:pointer}
.sd-chip:hover{background:var(--sd-acento-suave);color:var(--sd-acento-fuerte)}
.sd-chip[aria-current],.sd-chip[aria-pressed="true"]{background:var(--sd-acento-suave);border-color:var(--sd-acento);color:var(--sd-acento-fuerte)}
.sd-insignia{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border:1px solid var(--sd-borde);border-radius:var(--sd-radio-pill);background:var(--sd-tarjeta-alt);color:var(--sd-texto-2);font-size:var(--sd-t-xs);font-weight:700;line-height:1.6;white-space:nowrap}
.sd-insignia--nuevo{background:var(--sd-acento-suave);border-color:var(--sd-acento-borde);color:var(--sd-acento-fuerte)}
.sd-insignia--mercado{background:var(--sd-coral-suave);border-color:var(--sd-coral-borde);color:var(--sd-coral-texto)}
.sd-insignia--faltan{background:var(--sd-aviso-fondo);border-color:var(--sd-aviso-borde);color:var(--sd-aviso-texto)}
.sd-insignia--ok{background:var(--sd-exito-fondo);border-color:var(--sd-exito-borde);color:var(--sd-exito-texto)}
.sd-insignia--rellenas{background:var(--sd-tarjeta-alt);color:var(--sd-texto-2)}

/* ===== 9. Botones ===== */
.sd-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-e2);min-height:var(--sd-alto-control);padding:0 var(--sd-e4);border:1px solid var(--sd-borde-control);border-radius:var(--sd-radio-m);background:var(--sd-tarjeta);color:var(--sd-texto-2);font-weight:700;text-decoration:none;white-space:nowrap}
.sd-btn:hover:not(:disabled){background:var(--sd-tarjeta-alt);color:var(--sd-texto)}
.sd-btn--primario{background:var(--sd-acento);border-color:var(--sd-acento);color:var(--sd-sobre-acento)}
.sd-btn--primario:hover:not(:disabled){background:var(--sd-acento-fuerte);border-color:var(--sd-acento-fuerte);color:var(--sd-sobre-acento)}
.sd-btn--secundario{background:var(--sd-tarjeta);color:var(--sd-acento-fuerte);border-color:var(--sd-acento)}
.sd-btn--secundario:hover:not(:disabled){background:var(--sd-acento-suave);color:var(--sd-acento-fuerte)}
.sd-btn--peligro{background:var(--sd-tarjeta);color:var(--sd-error-texto);border-color:var(--sd-error-texto)}
.sd-btn--peligro:hover:not(:disabled){background:var(--sd-error-fondo);color:var(--sd-error-texto)}
.sd-btn--enlace{min-height:28px;padding:0 var(--sd-e1);border-color:transparent;background:transparent;color:var(--sd-acento);text-decoration:underline;font-weight:600}
.sd-btn--enlace:hover:not(:disabled){background:transparent;color:var(--sd-acento-fuerte)}
.sd-btn--s{min-height:30px;padding:0 var(--sd-e3);font-size:var(--sd-t-s)}
.sd-btn:disabled{cursor:not-allowed;opacity:.55}
.sd-btn[aria-busy="true"]{cursor:progress}

/* ===== 10. Campos ===== */
.sd-campo{display:flex;flex-direction:column;gap:var(--sd-e1);min-width:0}
.sd-etiqueta{font-size:var(--sd-t-s);font-weight:700;color:var(--sd-texto-2)}
.sd-input,.sd-select{width:100%;min-height:var(--sd-alto-control);padding:0 var(--sd-e2);border:1px solid var(--sd-borde-control);border-radius:var(--sd-radio-s);background:var(--sd-tarjeta);color:var(--sd-texto);font:inherit;font-weight:700;font-variant-numeric:tabular-nums}
.sd-input--num{text-align:right}
.sd-input::placeholder{color:var(--sd-texto-3);font-weight:500;opacity:1}
.sd-input:hover:not(:disabled){border-color:var(--sd-texto-2)}
.sd-input:focus-visible,.sd-select:focus-visible{outline:2px solid var(--sd-foco);outline-offset:1px;border-color:var(--sd-foco)}
.sd-input:disabled{background:var(--sd-tarjeta-alt);color:var(--sd-texto-3);cursor:not-allowed}
.sd-input.cambiado,.cambiado>.sd-input,.sd-campo.cambiado .sd-input{border-color:var(--sd-coral);background:var(--sd-coral-suave);box-shadow:inset 3px 0 0 var(--sd-coral)}
.sd-campo.cambiado .sd-etiqueta{color:var(--sd-coral-texto)}
.sd-input[aria-invalid="true"]{border-color:var(--sd-error-texto);background:var(--sd-error-fondo)}
.sd-ayuda{font-size:var(--sd-t-s);color:var(--sd-texto-3)}
.sd-error{display:flex;gap:6px;align-items:flex-start;font-size:var(--sd-t-s);font-weight:600;color:var(--sd-error-texto)}
.sd-error::before{content:"!";flex:none;width:14px;height:14px;margin-top:2px;border-radius:50%;background:var(--sd-error-texto);color:var(--sd-tarjeta);font-size:10px;font-weight:800;line-height:14px;text-align:center}

/* ===== 11. Tabla de cifras y matriz de años ===== */
.sd-scroll{position:relative;overflow:auto;max-width:100%;border:1px solid var(--sd-borde);border-radius:var(--sd-radio-m);background:var(--sd-tarjeta)}
.sd-scroll--alto{max-height:60vh}
.sd-tabla{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--sd-t-m)}
.sd-tabla caption{text-align:left;padding:var(--sd-e2) var(--sd-e3);font-weight:700}
.sd-tabla th,.sd-tabla td{padding:6px var(--sd-e3);border-bottom:1px solid var(--sd-borde);background:var(--sd-tarjeta);white-space:nowrap}
.sd-tabla td{text-align:right;font-variant-numeric:tabular-nums}
.sd-tabla thead th{position:sticky;top:0;z-index:2;background:var(--sd-tarjeta-alt);color:var(--sd-texto-2);font-size:var(--sd-t-s);font-weight:700;text-align:right}
.sd-tabla th[scope="row"]{position:sticky;left:0;z-index:1;text-align:left;font-weight:600;color:var(--sd-texto);border-right:1px solid var(--sd-borde)}
.sd-tabla thead th:first-child{left:0;z-index:3;text-align:left}
.sd-tabla tbody tr:last-child th,.sd-tabla tbody tr:last-child td{border-bottom:0}
.sd-tabla tbody tr:hover td,.sd-tabla tbody tr:hover th{background:var(--sd-acento-suave)}
.sd-tabla .sd-total th,.sd-tabla .sd-total td{font-weight:800;background:var(--sd-tarjeta-alt)}
.sd-tabla .sd-grupo th{background:var(--sd-segmento);color:var(--sd-texto-2);font-size:var(--sd-t-xs);letter-spacing:.06em;text-transform:uppercase}
.sd-tabla td.sd-falta{color:var(--sd-texto-3);text-decoration:underline dotted;text-underline-offset:3px}
.sd-tabla td.sd-propuesta{color:var(--sd-coral-texto);background:var(--sd-coral-suave)}
.sd-tabla td .sd-input{min-width:4.2rem;max-width:6rem;min-height:var(--sd-alto-control);padding:0 6px;text-align:right}
.sd-matriz{min-width:34rem}
.sd-matriz td{padding:4px 6px}
.sd-matriz-atajos{display:flex;flex-wrap:wrap;gap:var(--sd-e2)}

/* ===== 12. Acordeón (details con resumen) ===== */
.sd-acordeon{background:var(--sd-tarjeta);border:1px solid var(--sd-borde);border-radius:var(--sd-radio-l);box-shadow:var(--sd-sombra-1);min-width:0}
.sd-acordeon>summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sd-e2);min-height:48px;padding:var(--sd-e3) var(--sd-e4);cursor:pointer;list-style:none;font-weight:800}
.sd-acordeon>summary::-webkit-details-marker{display:none}
.sd-acordeon>summary::before{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--sd-texto-3);border-bottom:2px solid var(--sd-texto-3);transform:rotate(-45deg);transition:transform .15s}
.sd-acordeon[open]>summary::before{transform:rotate(45deg)}
.sd-acordeon>summary:hover{background:var(--sd-tarjeta-alt);border-radius:var(--sd-radio-l)}
.sd-acordeon>summary .sd-insignia:first-of-type{margin-left:auto}
.sd-acordeon-cuerpo{padding:var(--sd-e2) var(--sd-e4) var(--sd-e4);border-top:1px solid var(--sd-borde);display:flex;flex-direction:column;gap:var(--sd-e3)}

/* ===== 13. Avisos ===== */
.sd-aviso{display:flex;gap:var(--sd-e3);align-items:flex-start;padding:var(--sd-e3) var(--sd-e4);border:1px solid var(--sd-aviso-borde);border-radius:var(--sd-radio-m);background:var(--sd-aviso-fondo);color:var(--sd-aviso-texto)}
.sd-aviso strong{font-weight:800}
.sd-aviso a,.sd-aviso .sd-btn--enlace{color:inherit}
.sd-aviso--error{background:var(--sd-error-fondo);border-color:var(--sd-error-borde);color:var(--sd-error-texto)}
.sd-aviso--exito{background:var(--sd-exito-fondo);border-color:var(--sd-exito-borde);color:var(--sd-exito-texto)}
.sd-aviso--info{background:var(--sd-acento-suave);border-color:var(--sd-acento-borde);color:var(--sd-acento-fuerte)}
.sd-aviso--mercado{background:var(--sd-coral-suave);border-color:var(--sd-coral-borde);color:var(--sd-coral-texto)}
.sd-aviso .icon{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sd-aviso-acciones{margin-left:auto;display:flex;gap:var(--sd-e2)}

/* ===== 14. Esqueletos de carga ===== */
.sd-esqueleto{display:block;min-height:14px;border-radius:var(--sd-radio-s);background:linear-gradient(90deg,var(--sd-esqueleto-1),var(--sd-esqueleto-2),var(--sd-esqueleto-1));background-size:200% 100%;animation:sd-brillo 1.4s ease-in-out infinite}
.sd-esqueleto--linea{height:14px;width:100%}.sd-esqueleto--bloque{height:120px;width:100%}
@keyframes sd-brillo{from{background-position:200% 0}to{background-position:-200% 0}}

/* ===== 15. Adaptación ===== */
@media (max-width:1180px){
 .sd-rejilla{grid-template-columns:minmax(0,1fr)}
 .sd-lateral{position:static;max-height:none;overflow:visible}
}
@media (max-width:820px){
 :root{--sd-topbar:58px;--sd-alto-control:40px;--sd-ancho-lateral:100%}
 .sd-pantalla{gap:var(--sd-e4)}
 .sd-tarjeta-cab,.sd-tarjeta-cuerpo,.sd-tarjeta-pie{padding-left:var(--sd-e3);padding-right:var(--sd-e3)}
 .sd-barra{padding:var(--sd-e2) var(--sd-e3);gap:var(--sd-e2)}
 .sd-barra-estado{flex-basis:100%;order:3}
 .sd-barra-acciones{margin-left:0;width:100%}
 .sd-barra-acciones .sd-btn{flex:1}
 .sd-tabla th,.sd-tabla td{padding:6px var(--sd-e2)}
 .sd-acordeon>summary,.sd-acordeon-cuerpo{padding-left:var(--sd-e3);padding-right:var(--sd-e3)}
 .sd-btn--s{min-height:var(--sd-alto-control)}
 .sd-chip{min-height:36px}
}

/* ===== 16. Movimiento reducido ===== */
@media (prefers-reduced-motion:reduce){
 .sd-pantalla *,.sd-pantalla *::before,.sd-pantalla *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}