/* QFDOS SAR-Dock · sistema de diseño QFDOS (claude.ai/artifact/2b4x7DJn1TzeXjDGsaNUvc), tokens.css v. 1791205327 */
@font-face { font-family: "Montserrat"; src: url("../vendor/fonts/Montserrat-var.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }

:root {
  /* color */
  --primary: #1e3a8a; --primary-light: #3b82f6; --primary-dark: #172554; --primary-bg: rgba(30, 58, 138, 0.05);
  --primary-10: rgba(30, 58, 138, 0.10);
  --secondary: #0d9488; --secondary-light: #14b8a6; --secondary-dark: #0f766e; --secondary-10: rgba(13, 148, 136, 0.10);
  --tertiary: #2dd4bf; --tertiary-light: #5eead4;
  --neutral-bg: #f8fafc; --surface: #ffffff; --line: #e2e8f0;
  --text-main: #000000; --text-muted: #64748b; --text-on-dark: #ffffff; --charcoal: #334155;
  --accent-blue: #3b82f6; --accent-emerald: #10b981; --accent-amber: #f59e0b; --accent-purple: #8b5cf6; --accent-orange: #f97316;
  --danger: #dc2626;
  /* elevación, forma, espacio */
  --shadow-sm: 0 2px 4px -1px rgba(30, 58, 138, 0.05);
  --shadow-md: 0 8px 12px -3px rgba(30, 58, 138, 0.08);
  --shadow-hover: 0 15px 20px -5px rgba(30, 58, 138, 0.12), 0 8px 8px -5px rgba(30, 58, 138, 0.06);
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px;
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px;
  /* degradados */
  --affinity-hero: linear-gradient(135deg, #1e3a8a 0%, #0d9488 100%);
  --pocket-highlight: linear-gradient(180deg, rgba(30,58,138,0.08) 0%, rgba(13,148,136,0.02) 100%);
  --mint-glow: linear-gradient(90deg, #2dd4bf 0%, #14b8a6 100%);
  /* movimiento (el formato de tokens no lo admite: se declara aquí) */
  --transition-binding: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 150ms ease-out;
  --font-sans: Montserrat, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--neutral-bg); color: var(--text-main); font: 400 16px/1.5 var(--font-sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0 0 var(--space-sm); color: var(--primary); }
h2 { font: 800 30px/36px var(--font-sans); }
h3 { font: 700 20px/26px var(--font-sans); }
p { margin: 0 0 var(--space-sm); }
a { color: var(--primary); }
/* code y metric en Montserrat (sistema QFDOS): cifras tabulares para que las columnas alineen */
code, .mono, .num { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.sub, small { color: var(--text-muted); font-size: 15px; }
button, input, select, textarea { font: inherit; }

/* ---------------------------------------------------------------- cabecera (surface: el isotipo no va sobre el degradado) */
.top { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.top-in { max-width: 1440px; margin: 0 auto; padding: var(--space-sm) var(--space-lg) 0; }
.marca { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.marca img { width: 48px; height: 48px; display: block; }
.marca h1 { font: 800 22px/26px var(--font-sans); color: var(--primary); margin: 0; }
.marca .badge { font: 700 13px/16px var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--secondary-dark); }
.marca .grupo { margin-left: auto; font-size: 15px; color: var(--text-muted); }
nav.tabs { display: flex; gap: var(--space-xs); margin-top: var(--space-xs); overflow-x: auto; scrollbar-width: none; }
nav.tabs a { color: var(--text-main); text-decoration: none; padding: 10px 14px; font: 700 14px/16px var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; border-bottom: 3px solid transparent; transition: color var(--transition-fast), border-color var(--transition-fast); }
nav.tabs a:hover { color: var(--primary); }
nav.tabs a[aria-current="page"] { color: var(--primary); border-bottom-color: var(--primary); }

main { max-width: 1200px; margin: 0 auto; padding: var(--space-xl) var(--space-md); }
/* El laboratorio es una herramienta de tres columnas con visor 3D: excepción de anchura documentada */
main.ancho { max-width: 1440px; }
.aviso { border-radius: var(--radius-md); padding: 12px var(--space-md); margin-bottom: var(--space-md); border: 1px solid var(--line); border-left-width: 4px; font-size: 15px; background: var(--surface); color: var(--text-main); }
.aviso.warn { border-left-color: var(--accent-amber); }
.aviso.info { border-left-color: var(--primary); }
.aviso.ok { border-left-color: var(--accent-emerald); }

/* ---------------------------------------------------------------- portada de Dianas (affinity-hero) */
.hero { background: var(--affinity-hero); color: var(--text-on-dark); border-radius: var(--radius-xl); padding: var(--space-2xl) var(--space-xl); margin-bottom: var(--space-xl); }
.hero .kicker { font: 700 14px/16px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-on-dark); opacity: .9; }
.hero h2 { color: var(--text-on-dark); font: 800 36px/40px var(--font-sans); margin: var(--space-sm) 0 var(--space-md); }
.hero p { color: var(--text-on-dark); font: 400 18px/26px var(--font-sans); max-width: 760px; margin: 0; }

/* ---------------------------------------------------------------- tarjetas */
.card { background: var(--surface); border: 1px solid var(--primary-10); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-lg); }
.seccion-hub { margin-bottom: var(--space-2xl); }
.seccion-hub > h2 { font: 800 26px/30px var(--font-sans); padding-bottom: var(--space-md); border-bottom: 1px solid var(--primary-10); margin-bottom: var(--space-lg); }
.grid-dianas { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
@media (min-width: 768px) { .grid-dianas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-dianas { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } }
/* HubCard: acento superior de 4px en primary, borde primary al 10 %, hover −4px */
.diana { display: flex; flex-direction: column; gap: var(--space-sm); cursor: pointer; text-align: left; font: inherit; border-top: 4px solid var(--primary);
  transition: transform var(--transition-binding), box-shadow var(--transition-binding); }
.diana:hover, .diana:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-hover); outline: none; }
.diana:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 2px; }
.diana.sel { box-shadow: 0 0 0 2px var(--primary), var(--shadow-md); }
.diana .tema { font: 700 13px/16px var(--font-sans); color: var(--secondary-dark); text-transform: uppercase; letter-spacing: .06em; }
.diana h3 { margin: 0; font: 700 22px/26px var(--font-sans); }
.diana .lig { font-size: 16px; color: var(--text-main); }
.diana .mini { height: 110px; display: flex; align-items: center; justify-content: center; background: var(--pocket-highlight); border-radius: var(--radius-md); }
.diana .mini svg { max-width: 100%; height: 104px; }
.diana .pie { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: auto; }
/* badges: radius-sm; métrico en secondary-dark sobre secondary al 10 % */
.chip { display: inline-flex; align-items: center; gap: var(--space-xs); font: 600 13px/16px var(--font-sans); padding: 4px 8px; border-radius: var(--radius-sm); background: var(--primary-bg); color: var(--primary); border: 1px solid var(--primary-10); }
.chip.teal { background: var(--secondary-10); color: var(--secondary-dark); border-color: transparent; }
.chip.amber { background: rgba(245, 158, 11, .14); color: var(--text-main); border-color: var(--accent-amber); }
.chip.metric { font-variant-numeric: tabular-nums; background: var(--secondary-10); color: var(--secondary-dark); border-color: transparent; }

/* ---------------------------------------------------------------- botones y formularios */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); border: 1px solid var(--primary-10); background: var(--surface); color: var(--primary); border-radius: var(--radius-md); padding: 9px 14px; font: 700 14px/16px var(--font-sans); letter-spacing: 0.04em; cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast); text-decoration: none; }
.btn:hover { background: var(--primary-bg); border-color: var(--primary); }
.btn.primario { background: var(--primary); color: var(--text-on-dark); border-color: var(--primary); }
.btn.primario:hover { background: var(--primary-dark); }
.btn.teal { background: var(--secondary-dark); color: var(--text-on-dark); border-color: var(--secondary-dark); }
.btn.teal:hover { background: #115e59; }
.btn.ia { background: var(--secondary-10); border-color: transparent; color: var(--secondary-dark); }
.btn.ia:hover { border-color: var(--secondary-dark); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.peq { padding: 6px 10px; font-size: 13px; }
.fila { display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: center; }
label { font: 700 14px/18px var(--font-sans); color: var(--text-main); display: block; margin: 12px 0 6px; }
input[type=text], textarea, select { width: 100%; border: 1px solid #cbd5e1; border-radius: var(--radius-md); padding: 8px 10px; background: var(--surface); color: var(--text-main); font-size: 15px; }
input[type=text]:focus, textarea:focus, select:focus { outline: 2px solid var(--primary-light); outline-offset: 0; border-color: var(--primary); }
textarea { resize: vertical; min-height: 64px; }
input.mono { font-family: var(--font-sans); font-size: 14px; }

/* ---------------------------------------------------------------- bloque técnico (TechnicalCallout) */
.callout { background: var(--primary-dark); color: var(--text-on-dark); border-radius: var(--radius-md); border-left: 4px solid var(--tertiary); box-shadow: var(--shadow-sm); padding: var(--space-md); }
.callout .rotulo { font: 700 12px/14px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tertiary); margin-bottom: var(--space-sm); }
.callout .datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); font-family: var(--font-sans); }
.callout .datos b { display: block; font: 600 20px/24px var(--font-sans); color: var(--text-on-dark); }
.callout .datos span { font: 400 12px/16px var(--font-sans); color: var(--text-on-dark); opacity: .85; }

/* ---------------------------------------------------------------- laboratorio */
.cab-diana { display: flex; gap: var(--space-sm) 12px; align-items: center; flex-wrap: wrap; margin-bottom: var(--space-md); }
.cab-diana h2 { margin: 0 var(--space-sm) 0 0; }
.lab { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr) minmax(300px, 400px); gap: var(--space-md); align-items: start; }
.lab > * { min-width: 0; }
.lab .card { padding: var(--space-md) var(--space-lg) var(--space-lg); }
#jsme { width: 100%; height: 300px; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
#visor { width: 100%; height: min(68vh, 640px); min-height: 380px; position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--primary-10); background: var(--surface); box-shadow: var(--shadow-md); }
.visor-ctl { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: var(--space-sm); font-size: 14px; }
.visor-ctl label { display: inline-flex; gap: var(--space-xs); align-items: center; margin: 0; font-weight: 500; }
.leyenda { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--text-main); margin-top: var(--space-sm); }
.leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: var(--radius-sm); vertical-align: -2px; margin-right: var(--space-xs); }
.props { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: var(--space-sm) 0; }
.prop { background: var(--neutral-bg); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 6px 8px; }
.prop b { display: block; font: 600 16px/20px var(--font-sans); color: var(--secondary-dark); }
.prop span { font-size: 12px; color: var(--text-main); }
.prop.alerta { border-color: var(--accent-amber); background: rgba(245, 158, 11, .08); }
.estructura svg { width: 100%; height: auto; max-height: 200px; }
/* docking en curso: carga indeterminada, sin barra de progreso (el sistema la reserva a avances monótonos) */
.trabajando { display: flex; align-items: center; gap: var(--space-sm); margin: var(--space-sm) 0; font-size: 14px; }
.trabajando::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--primary-10); border-top-color: var(--primary); animation: giro 900ms linear infinite; }
.trabajando[hidden] { display: none; }
@keyframes giro { to { transform: rotate(360deg); } }
.poses { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin: var(--space-sm) 0; }
.poses button { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; color: var(--text-main); }
th { font: 700 12px/14px var(--font-sans); text-transform: uppercase; letter-spacing: .04em; color: var(--primary); background: var(--neutral-bg); position: sticky; top: 0; z-index: 1; }
td.num, th.num { text-align: right; }
.tabla-scroll { overflow: auto; max-height: 420px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
#t-inter { font-size: 13px; }
#t-inter th, #t-inter td { padding: 6px 5px; white-space: nowrap; }
/* Estado: palabra en text-main con marca de color delante (el acento no es color de texto) */
.estado { font-weight: 600; font-size: 13px; color: var(--text-main); }
.estado::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: 1px; background: var(--line); }
.estado.perdida::before { background: var(--danger); }
.estado.nueva::before { background: var(--accent-emerald); }
.estado.reforzada::before { background: var(--secondary); }
.estado.debilitada::before { background: var(--accent-orange); }
.estado.conservada::before { background: #94a3b8; }
.punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }

/* ---------------------------------------------------------------- SAR y cuaderno */
.sar-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: var(--space-lg); align-items: start; }
.sar-grid > * { min-width: 0; }
td.mol svg { width: 120px; height: 80px; display: block; }
tr.ref td { background: var(--pocket-highlight); }
tr.diseno td:first-child { box-shadow: inset 4px 0 0 var(--accent-orange); }
svg.grafico text { font-family: var(--font-sans); font-size: 11px; fill: var(--text-main); }
.entrada { border: 1px solid var(--primary-10); border-top: 4px solid var(--primary); border-radius: var(--radius-lg); padding: var(--space-md); background: var(--surface); margin-bottom: 12px; display: grid; grid-template-columns: 150px 1fr; gap: var(--space-md); box-shadow: var(--shadow-sm); }
.entrada .estructura svg { max-height: 110px; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
/* ciclo de acento en rejillas docentes de varias tarjetas: primary → secondary → orange → purple */
.dos > .card:nth-child(1) { border-top: 4px solid var(--primary); }
.dos > .card:nth-child(2) { border-top: 4px solid var(--secondary); }
.guia h3 { margin-top: 1.2em; }
.guia ol li, .guia ul li { margin-bottom: .35em; }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--primary-dark); color: var(--text-on-dark); padding: 10px var(--space-md); border-radius: var(--radius-md); border-left: 4px solid var(--tertiary); box-shadow: var(--shadow-hover); font-size: 15px; z-index: 50; opacity: 0; transition: opacity var(--transition-binding); pointer-events: none; }
.toast.on { opacity: 1; }
dialog { border: none; border-radius: var(--radius-xl); box-shadow: var(--shadow-hover); max-width: min(720px, 94vw); padding: 0; }
dialog::backdrop { background: rgba(23, 37, 84, .45); }
dialog .dlg { padding: var(--space-lg); }
dialog pre { white-space: pre-wrap; background: var(--primary-dark); color: var(--text-on-dark); border-left: 4px solid var(--tertiary); border-radius: var(--radius-md); padding: 12px; max-height: 46vh; overflow: auto; font: 400 13px/19px var(--font-sans); }
.vacio { color: var(--text-main); text-align: center; padding: var(--space-xl) var(--space-sm); }
footer { max-width: 1200px; margin: 0 auto var(--space-xl); padding: 0 var(--space-md); font-size: 13px; color: var(--text-muted); display: flex; gap: var(--space-md); align-items: center; }
footer img { width: 48px; height: 48px; opacity: .9; flex: none; }

@media (max-width: 1180px) {
  .lab { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lab .col-visor { grid-column: 1 / -1; order: -1; }
  .sar-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  main { padding: var(--space-lg) var(--space-md); }
  .top-in { padding: var(--space-sm) var(--space-md) 0; }
  .lab, .dos { grid-template-columns: 1fr; }
  #visor { height: 56vh; min-height: 300px; }
  .marca .grupo { margin-left: 0; width: 100%; }
  .entrada { grid-template-columns: 1fr; }
  .props, .callout .datos { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: var(--space-xl) var(--space-lg); }
  .hero h2 { font-size: 30px; line-height: 34px; }
}