@import url('corticalia-tokens.css?v=19');
:root {
--ink: #16283C;
--ink-2: #45586C;
--ink-3: #5E7183;
--ink-adorno: #93A1B0;
--line: #E1E9F1;
--line-soft: #EDF2F7;
--bg: #F3F7FB;
--card: #FFFFFF;
--shadow-sm: var(--sh-1);
--shadow-md: var(--sh-2);
--shadow-lg: var(--sh-3);
--ring: 0 0 0 3px rgba(14, 138, 134, 0.20);
--avatar-sm: 38px;
--tabbar-h: 62px;
--surface-subtle: #F0F5F8;
--surface-info: #E4F0F8;
--info: #0F5A96;
--surface-action: #EAF4F1;
--lv-excepcional-esperado-alto: #30784C;  --lv-excepcional-esperado-alto-txt: #215C38;  --lv-excepcional-esperado-alto-bg: #D8F8E1;
--lv-esperado: #77AF76;   --lv-esperado-txt: #386438;   --lv-esperado-bg: #DDF7DB;
--lv-observacion: #E3AD48;--lv-observacion-txt: #775300;--lv-observacion-bg: #FEECCE;
--lv-requiere-apoyo: #CE7340;   --lv-requiere-apoyo-txt: #843F15;   --lv-requiere-apoyo-bg: #FEEAE0;
--lv-intervencion-prioritaria: #A3403B;       --lv-intervencion-prioritaria-txt: #823530;       --lv-intervencion-prioritaria-bg: #FEE9E6;
--sev-ok-bg: var(--lv-esperado-bg);
--sev-ok-txt: var(--lv-esperado-txt);
--sev-ok-color: var(--lv-esperado);
--sev-ambar-bg: var(--lv-observacion-bg);
--sev-ambar-txt: var(--lv-observacion-txt);
--sev-ambar-color: var(--lv-observacion);
--sev-rojo-bg: var(--lv-intervencion-prioritaria-bg);
--sev-rojo-txt: var(--lv-intervencion-prioritaria-txt);
--sev-rojo-color: var(--lv-intervencion-prioritaria);
--sev-info-bg: var(--surface-subtle);
--sev-info-txt: var(--ink-2);
--sev-info-color: var(--ink-3);}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 15px; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
font-family: var(--font-sans);
background: var(--bg);
color: var(--ink);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01';
line-height: 1.5;
}
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.018em; color: var(--navy); }
h1 { font-size: var(--text-2xl); letter-spacing: -0.025em; }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }
button { font-family: inherit; cursor: pointer; }
a { color: var(--blue); text-decoration: none; }
.kpi-value, .score, .sub-val, .cmp-val, .domain-score-row .score,
.heat-cell, .table td, .table th, .likert-opt .lv, .ring-level,
.nav-badge, .pill { font-variant-numeric: tabular-nums; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, .nav-item:focus-visible, .role-card:focus-visible { box-shadow: var(--ring); }
::selection { background: rgba(14,138,134, 0.18); color: var(--navy); }
* { scrollbar-width: thin; scrollbar-color: var(--ink-adorno) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ink-adorno); border-radius: var(--r-sm); border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
::-webkit-scrollbar-track { background: transparent; }
.login-screen {
min-height: 100vh;
display: flex; flex-direction: column; align-items: center; justify-content: center;
background: var(--bg);
padding: 40px 24px;
}
.login-logo { width: 290px; margin-bottom: 2px; }
[data-logo] .brand-art-master {
display: block;
width: 100%;
height: auto;
mix-blend-mode: multiply;
}
.login-logo .brand-art-master { transform: scale(1.16); }
.login-tagline {
color: var(--ink-3); font-size: var(--text-sm); letter-spacing: 0.35em;
text-transform: uppercase; margin-bottom: 22px;
}
.login-intro {
max-width: 620px; text-align: center; color: var(--ink-2);
font-size: var(--text-lg); margin-bottom: 42px;
}
.role-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 16px; width: 100%; max-width: 1150px;
}
.role-card {
display: flex; flex-direction: column; align-items: flex-start;
position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 26px 22px; text-align: left; box-shadow: var(--sh-1); cursor: pointer; overflow: hidden;
transition: transform var(--duration-ui) var(--ease-out), box-shadow var(--duration-ui) var(--ease-out), border-color var(--duration-ui) var(--ease-out);
}
.role-card:hover { transform: translateY(-1px); box-shadow: var(--sh-2); border-color: rgba(14,138,134,0.4); }
.role-card:active { transform: translateY(-1px); }
.role-card .role-icon {
width: 46px; height: 46px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center;
background: var(--teal); color: #fff; margin-bottom: 16px;
}
.role-card h3 { font-size: var(--text-lg); margin-bottom: 6px; }
.role-card p { font-size: var(--text-sm); color: var(--ink-3); line-height: 1.45; }
.elegir-rol { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.elegir-rol .role-card { padding: 18px 20px; }
.login-foot { margin-top: 48px; color: var(--ink-3); font-size: var(--text-sm); }
.role-grid:has(.login-form) { grid-template-columns: minmax(320px, 440px); justify-content: center; }
.login-form { padding: 26px; position: relative; }
.login-back {
background: none; border: 0; color: var(--teal-txt); font: inherit; font-size: var(--text-sm); font-weight: 600;
cursor: pointer; padding: 0; margin-bottom: 16px; display: inline-flex; align-items: center; gap: 4px;
}
.login-back:hover { color: var(--navy); }
.login-role-head { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.login-role-head .role-icon { width: 44px; height: 44px; border-radius: var(--r-md); flex-shrink: 0; margin: 0; }
.login-role-head h3 { font-size: var(--text-lg); margin: 0 0 2px; }
.login-role-head p { font-size: var(--text-sm); line-height: 1.35; }
.login-hint { font-size: var(--text-sm); margin-top: 12px; text-align: center; }
code { font-family: var(--font-ui); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum', 'zero', 'ss02'; }
.login-hint code, .dp-clave, .dp-codigos code { background: var(--surface-subtle); border-radius: var(--r-sm); padding: 2px 7px; font-size: var(--text-sm); color: var(--ink-2); }
.dp-pasos { margin: 0 0 var(--space-4); padding-left: var(--space-5); font-size: var(--text-md); color: var(--ink-2); }
.dp-pasos li { margin-bottom: var(--space-2); }
.dp-qr { width: 200px; height: 200px; margin: var(--space-2) 0; }
.dp-qr svg { display: block; width: 100%; height: 100%; }
.dp-clave { display: inline-block; margin-top: var(--space-1); }
.dp-mismo-celular { margin: var(--space-2) 0 var(--space-1); }
.dp-acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-1); }
.dp-acciones .btn-outline { min-height: 44px; }
.raMsg code { display: inline-block; max-width: 100%; word-break: break-all; }
.dp-codigos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.dp-codigos code { display: block; text-align: center; font-size: var(--text-md); padding: 6px 7px; }
.dp-codigos-uno { grid-template-columns: minmax(0, 1fr); }
.fld { display: block; margin-bottom: 12px; }
.fld span { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--ink-3); margin-bottom: 5px; }
.fld input, .fld select, .fm-editor input:not([type=radio]):not([type=checkbox]), .fm-editor select, .ag-campo input:not([type=checkbox]) {
width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px;
font: inherit; font-size: var(--text-md); color: var(--ink); background: var(--card); outline: none;
transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.fld input:hover, .fld select:hover, .fm-editor input:not([type=radio]):not([type=checkbox]):hover, .fm-editor select:hover, .ag-campo input:not([type=checkbox]):hover { border-color: var(--ink-adorno); }
.fld input:focus, .fld select:focus, .fm-editor input:not([type=radio]):not([type=checkbox]):focus, .fm-editor select:focus, .ag-campo input:not([type=checkbox]):focus { border-color: var(--teal-txt); box-shadow: var(--ring); }
.fld textarea, .fm-editor textarea, .ag-campo textarea {
width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px;
font: inherit; font-size: var(--text-md); color: var(--ink); background: var(--card); outline: none; resize: vertical;
transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.fld textarea:hover, .fm-editor textarea:hover, .ag-campo textarea:hover { border-color: var(--ink-adorno); }
.fld textarea:focus, .fm-editor textarea:focus, .ag-campo textarea:focus { border-color: var(--teal-txt); box-shadow: var(--ring); }
.seg { display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px; margin-right: 4px; }
.seg-btn.on { background: var(--card); color: var(--navy); box-shadow: var(--sh-1); }
.heatmap-link .heat-cell { cursor: pointer; }
.heatmap-link .heat-cell:hover { box-shadow: 0 0 0 2px rgba(255,255,255,0.7) inset; }
.heatmap-link .heat-label a { color: var(--navy); font-weight: 600;
display: inline-flex; align-items: center; min-height: var(--target-min); }
.heatmap-link .heat-label a:hover { color: var(--teal-txt); text-decoration: underline; }
@media print { .no-print, .sidebar, .topbar, .app-footer { display: none !important; } }
@media (max-width: 760px) { .role-grid:has(.login-form) { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
.role-card,.role-card::after { transition:none; }
.role-card:hover,.role-card:active { transform:none; }
}
.app { display: none; min-height: 100vh; }
.app.active { display: flex; }
.sidebar {
width: 248px; min-width: 248px; background: var(--card); border-right: 1px solid var(--line);
display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar-logo { padding: 20px 20px 12px; display: flex; align-items: center; gap: 10px; }
.sidebar-logo img, .sidebar-logo svg { width: 100%; max-width: 168px; }
.nav-section { padding: 14px 14px 4px; }
.nav-label { font-size: var(--text-sm); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); padding: 0 10px 8px; font-weight: 600; }
.nav-item {
display: flex; align-items: center; gap: 11px; width: 100%;
padding: 10px 12px; border: 0; background: transparent; border-radius: var(--r-sm);
color: var(--ink-2); font-size: var(--text-md); font-weight: 600; text-align: left;
transition: background 0.16s var(--ease), color 0.16s var(--ease);
position: relative;
}
.nav-item svg { color: var(--ink-3); transition: color 0.16s var(--ease); }
.nav-item:hover { background: var(--surface-subtle); color: var(--navy); }
.nav-item:hover svg { color: var(--navy); }
.nav-item.active { background: var(--surface-action); color: var(--navy); font-weight: 600; }
.nav-item.active svg { color: var(--teal-txt); }
.nav-item.active::before {
content: ''; position: absolute; left: -14px; top: 7px; bottom: 7px; width: 3px;
border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--teal);
}
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-badge {
margin-left: auto; background: var(--lv-intervencion-prioritaria); color: #fff; font-size: var(--text-sm);
min-width: 19px; height: 19px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center;
padding: 0 5px; font-weight: 600;
}
.sidebar-footer { margin-top: auto; padding: 16px; }
.nav-servicios { border-top: 1px solid var(--line); margin-top: var(--space-2); }
a.nav-item { text-decoration: none; min-height: var(--target-min); }
.pie-servicios { display: none; }
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
display: flex; align-items: center; gap: 18px; padding: 14px 30px;
background: var(--card);
border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40;
}
.breadcrumb { font-size: var(--text-md); color: var(--ink-3); white-space: nowrap; }
.breadcrumb b { color: var(--navy); font-weight: 600; }
.searchbox {
margin-left: auto; display: flex; align-items: center; gap: 9px;
background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 8px 16px; width: 300px; flex: 0 1 300px; min-width: 160px; color: var(--ink-3);
transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease);
}
.searchbox:focus-within { border-color: var(--teal-txt); background: var(--card); box-shadow: var(--ring); }
.searchbox input { border: 0; background: transparent; outline: none; font: inherit; width: 100%; color: var(--ink); text-overflow: ellipsis; }
.topbar.no-global-search .searchbox,
.topbar.no-global-search .topbar-search-toggle { display: none; }
.topbar-user { display: flex; align-items: center; gap: 10px; }
.avatar {
width: 38px; height: 38px; border-radius: 50%; background: var(--navy);
color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: var(--text-md);
}
.topbar-user .who { line-height: 1.2; text-align: left; white-space: nowrap; }
.topbar-account { display: flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer;
font: inherit; padding: 2px 4px; border-radius: var(--r-sm); flex: none; }
.topbar-sel { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 8px; font: inherit; font-size: var(--text-sm); }
#btnLogout, .btn-refresh { white-space: nowrap; flex: none; }
.topbar-user .who b { display: block; font-size: var(--text-md); color: var(--navy); }
.topbar-user .who span { font-size: var(--text-sm); color: var(--ink-3); }
.btn-ghost {
border: 1px solid var(--line); background: var(--card); border-radius: var(--r-sm);
padding: 7px 14px; font-size: var(--text-sm); color: var(--ink-2); font-weight: 600;
transition: border-color 0.16s var(--ease), color 0.16s var(--ease), background 0.16s var(--ease);
}
.btn-ghost:hover { border-color: var(--teal); color: var(--navy); background: var(--surface-action); }
.content { padding: 28px 30px 60px; max-width: 1440px; width: 100%; margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { font-size: var(--text-2xl); }
.page-head p { color: var(--ink-3); font-size: var(--text-md); margin-top: 4px; max-width: 640px; }
.card {
background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
box-shadow: var(--sh-1); padding: 22px;
}
.card.kpi { transition: transform var(--duration-ui) var(--ease-out), box-shadow var(--duration-ui) var(--ease-out); }
.card.kpi:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
.card-title { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.card-title { flex-wrap: wrap; }
.card-title > h3 { flex: 1 1 10rem; min-width: 10rem; }
.card-title h3 { font-size: var(--text-lg); }
.mini-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: var(--r-sm);
color: #fff; flex-shrink: 0;
}
.mini-icon svg { width: 58%; height: 58%; stroke-width: 2; }
.mini-icon:empty,
.role-icon:empty,
.domain-icon:empty,
.kpi-icon:empty,
.alert-ico:empty,
.long-ico:empty,
.rec-num:empty,
.piar-ss-i:empty {
display: none !important;
}
.card-title .mini-icon {
width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--teal); color: #fff;
display: flex; align-items: center; justify-content: center;
}
.card-title .mini-icon svg { width: 16px; height: 16px; }
.card-link { margin-left: auto; font-size: var(--text-sm); font-weight: 600; color: var(--teal-txt); background: none; border: 0;
display: inline-flex; align-items: center; min-height: var(--target-min); }
.card-link:hover { text-decoration: underline; }
.grid { display: grid; gap: 18px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1180px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 780px)  { .grid-4, .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); } }
.kpi { display: flex; flex-direction: column; gap: 5px; }
.kpi .kpi-top { display: flex; align-items: center; justify-content: space-between; }
.kpi .kpi-label { font-size: var(--text-sm); color: var(--ink-3); font-weight: 600; }
.kpi .kpi-value { font-size: var(--text-kpi); font-weight: 700; color: var(--navy); letter-spacing: -0.035em; line-height: 1.05; margin: 2px 0; }
.kpi .kpi-sub { font-size: var(--text-sm); color: var(--ink-3); }
.kpi .kpi-icon {
width: 38px; height: 38px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center;
}
.kpi .kpi-icon svg { width: 19px; height: 19px; }
.pill {
display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: var(--r-lg);
font-size: var(--text-sm); font-weight: 600; white-space: nowrap;
}
.pill-metrica { white-space: normal; max-width: 100%; }
.dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.meter { height: 7px; border-radius: var(--r-pill); background: var(--surface-subtle); overflow: hidden; position: relative; }
.meter > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--teal); }
.meter .norm-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink-3); opacity: 0.55; border-radius: var(--r-pill); }
.pctl-banda { position: relative; display: flex; gap: 1px; }
.pctl-banda > i { display: block; height: 100%; }
.pctl-banda > b { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px;
background: var(--ink); box-shadow: 0 0 0 1.5px var(--card); }
.pctl-banda > b::before { content: ''; position: absolute; left: 50%; bottom: 100%;
transform: translateX(-50%); border-left: 5px solid transparent;
border-right: 5px solid transparent; border-top: 6px solid var(--ink); }
@media (prefers-reduced-motion: no-preference) { .pctl-banda > b { transition: left .25s ease; } }
.pctl-banda > u { position: absolute; top: -2px; bottom: -2px; width: 0; margin-left: 0;
border-left: 1px dashed var(--ink-3); text-decoration: none; }
.pctl-banda > u::after { content: ''; position: absolute; left: 0; top: 100%;
transform: translateX(-50%); border-left: 3px solid transparent;
border-right: 3px solid transparent; border-bottom: 4px solid var(--ink-3); }
.pctl-banda > b > span { position: absolute; left: 50%; bottom: calc(100% + 5px);
transform: translateX(-50%); font-size: var(--text-sm); font-weight: var(--weight-bold);
color: var(--ink); background: var(--card); padding: 0 3px;
line-height: 1.3; font-variant-numeric: tabular-nums; }
.pctl-leyenda { display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 9px; }
.pctl-leyenda span { display: inline-flex; align-items: center; gap: 5px;
font-size: var(--text-sm); color: var(--ink-3); }
.pctl-leyenda i { width: 9px; height: 9px; flex: none; }
.pctl-leyenda i.pctl-m-corte { width: 0; height: 11px; border-left: 1px dashed var(--ink-3);
background: none; margin: 0 4px; }
.pctl-leyenda b { color: var(--ink); font-weight: var(--weight-semibold); }
.pctl-banda.carril-compacto { height: 8px; margin: 8px 0 6px; }
.carril-partes { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-2); }
.carril-parte-cab { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px var(--space-2);
font-size: var(--text-sm); color: var(--ink-2); }
.carril-parte-cab b { color: var(--ink); font-variant-numeric: tabular-nums; }
.carril-parte-cab b.carril-alerta { color: var(--sev-rojo-txt); }
.carril-banda { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); }
.carril-banda i { width: 9px; height: 9px; flex: none; }
.lse-fig-nota { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.lse-neutro { margin-top: var(--space-6); padding-top: var(--space-2); border-top: 1px solid var(--line); }
.lse-fig-titulo { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-md); color: var(--navy); }
.lse-alertas-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.lse-alerta { font-size: var(--text-md); line-height: var(--leading-ui); color: var(--ink-2); }
.lse-alerta b { color: var(--ink); }
.lse-alerta-texto { font-weight: var(--weight-bold); color: var(--sev-ambar-txt); }
.lse-alerta.es-riesgo { background: var(--sev-rojo-bg); border-radius: var(--r-sm); padding: var(--space-1) var(--space-2); }
.lse-alerta.es-riesgo .lse-alerta-texto { color: var(--sev-rojo-txt); }
.table-wrap { width: 100%; max-width: 100%; overflow-x: auto; }
.table, .data-table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
.table-wrap .data-table { width: max-content; min-width: 100%; }
.table th, .data-table th {
text-align: left; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.08em;
color: var(--ink-3); font-weight: 700; padding: 11px 12px; border-bottom: 1.5px solid var(--line);
background: var(--surface-subtle);
}
.table th:first-child, .data-table th:first-child { border-top-left-radius: var(--r-sm); }
.table th:last-child, .data-table th:last-child { border-top-right-radius: var(--r-sm); }
.table td, .data-table td { padding: 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tr:last-child td, .data-table tr:last-child td { border-bottom: 0; }
.table tbody tr, .data-table tbody tr { transition: background var(--duration-fast) var(--ease); }
.table tbody tr:hover, .data-table tbody tr:hover { background: var(--surface-subtle); }
.table tbody tr.clickable, .data-table tbody tr.clickable { cursor: pointer; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; align-items: center; }
.filters select, .filters input:not([type]), .filters input[type="text"], .filters input[type="search"], .filters input[type="date"] {
border: 1px solid var(--line); background: var(--card); border-radius: var(--r-sm);
padding: 8px 12px; font: inherit; font-size: var(--text-md); color: var(--ink);
outline: none; transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.filters select { max-width: 100%; }
.filters select:hover, .filters input:hover { border-color: var(--ink-adorno); }
.filters select:focus, .filters input:focus { border-color: var(--teal-txt); box-shadow: var(--ring); }
.filters .filters-label { font-size: var(--text-sm); color: var(--ink-3); font-weight: 600; }
.scope-note { display:flex; align-items:center; gap:7px; margin:-10px 0 14px; padding:8px 11px;
width:fit-content; max-width:100%; border-radius: var(--r-sm); background:var(--surface-subtle); color:var(--ink-3); font-size: var(--text-sm); }
.sort-dir { min-width:38px; justify-content:center; font-size: var(--text-lg); padding:7px 10px; }
.filter-more { position:relative; }
.filter-more > summary { cursor:pointer; list-style:none; color:var(--teal-txt); font-size: var(--text-sm); font-weight:700; padding:7px 9px; }
.filter-more > summary::-webkit-details-marker { display:none; }
.filter-more-body { position:absolute; z-index:25; right:0; top:calc(100% + 6px); width:min(760px,90vw);
padding:14px; margin:0; background:var(--card); border:1px solid var(--line); border-radius: var(--r-md); box-shadow:var(--sh-3); }
.filter-summary { display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin:-10px 0 15px; min-height:30px; }
.filter-tags { display:flex; gap:6px; flex-wrap:wrap; }
.filter-tag { border:1px solid var(--line); border-radius: var(--r-sm); background:var(--surface-subtle); color:var(--ink-2);
padding:4px 8px; font:inherit; font-size: var(--text-sm); cursor:pointer; }
.filter-count { margin-left:auto; font-size: var(--text-sm); }
.st-presets { border:1px solid var(--line); border-radius: var(--r-sm); padding:6px 8px; color:var(--ink-2); background:var(--card); max-width:190px; }
.student-picker { display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.student-picker-search { border:1px solid var(--line); border-radius: var(--r-sm); background:var(--card); color:var(--ink);
padding:8px 10px; font:inherit; font-size: var(--text-sm); min-width:180px; outline:none; }
.student-picker-search:focus { border-color:var(--teal-txt); box-shadow:var(--ring); }
.mini-sort { border:1px solid var(--line); border-radius: var(--r-sm); background:var(--card);
color:var(--ink-2); padding:5px 7px; font:inherit; font-size: var(--text-sm); }
.toggle-label { display:flex; align-items:center; gap:6px; font-size: var(--text-sm); color:var(--ink-2); white-space:nowrap; }
.alert-student-finding, .alert-student-group { margin-bottom:18px; }
.alert-student-finding > .stu-row, .alert-student-group > .stu-row { margin-bottom:6px; }
.alert-student-group .al-row { margin-left:18px; }
.alert-group-count { display:flex; justify-content:flex-end; margin:-1px 4px 6px; }
.student-hero {
position: relative; overflow: hidden;
background: var(--card);
border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1);
padding: 26px 30px; display: flex; gap: 26px; align-items: center; margin-bottom: 22px; flex-wrap: wrap;
}
.student-avatar {
width: 86px; height: 86px; border-radius: 50%; background: var(--navy); color: #fff;
display: flex; align-items: center; justify-content: center; font-size: var(--text-kpi); font-weight: 700;
}
.student-hero .who h1 { font-size: var(--text-2xl); display: inline; margin-right: 10px; }
.student-meta { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; color: var(--ink-2); font-size: var(--text-md); }
.student-meta span { display: inline-flex; align-items: center; gap: 6px; }
.student-meta svg { width: 15px; height: 15px; color: var(--ink-3); }
.student-admin { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.adm-hint { display: none; }
@media (hover: hover) {
.student-admin {
max-height: 0; margin-top: 0; opacity: 0; overflow: hidden;
transition: max-height 0.22s ease, opacity 0.2s ease, margin-top 0.22s ease;
}
.student-hero:hover .student-admin,
.student-hero:focus-within .student-admin { max-height: 88px; margin-top: 12px; opacity: 1; }
.adm-hint {
display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-sm); color: var(--ink-3);
position: absolute; right: 26px; bottom: 14px; opacity: 0.7; transition: opacity 0.16s ease;
pointer-events: none;
}
.student-hero:hover .adm-hint, .student-hero:focus-within .adm-hint { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .student-admin { transition: none; } }
.global-ring { text-align: center; }
.global-ring .ring-caption { font-size: var(--text-xs); color: var(--ink-3); margin-top: 6px; }
.global-ring .ring-level { font-weight: 700; font-size: var(--text-md); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 22px; overflow-x: auto; }
.tab {
border: 0; background: none; padding: 11px 16px; font-size: var(--text-md); font-weight: 600;
color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
display: flex; align-items: center; gap: 7px;
transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.tab svg { width: 15px; height: 15px; }
.tab:hover { color: var(--navy); border-bottom-color: var(--line); }
.tab.active { color: var(--navy); border-bottom-color: var(--teal-txt); font-weight: 700; }
.usr-panel { max-width: 860px; }
.domain-card { display: flex; flex-direction: column; gap: 12px; transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.domain-card:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
.domain-head { display: flex; align-items: flex-start; gap: 12px; }
.domain-head { flex-wrap: wrap; }
.domain-head > * { min-width: 0; }
.domain-head > div { flex: 1 1 60%; }
.domain-head .pill { white-space: normal; text-align: center; min-width: 0; max-width: 100%; }
.domain-icon {
width: 40px; height: 40px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center;
color: #fff; flex-shrink: 0; background: var(--navy);
}
.domain-icon svg { width: 20px; height: 20px; stroke-width: 2; }
.domain-head h3 { font-size: var(--text-lg); line-height: 1.25; }
.domain-head p { font-size: var(--text-sm); color: var(--ink-3); margin-top: 3px; line-height: 1.4; }
.domain-score-row { display: flex; align-items: baseline; gap: 10px; }
.domain-score-row .score { font-size: var(--text-kpi); font-weight: 700; color: var(--ink); }
.domain-score-row .unit { font-size: var(--text-sm); color: var(--ink-3); }
.compare-row { display: flex; align-items: center; gap: 10px; }
.compare-row .cmp-label { width: 64px; color: var(--ink-3); flex-shrink: 0; }
.compare-row .meter { flex: 1; }
.compare-row .cmp-val { width: 30px; text-align: right; font-weight: 600; color: var(--ink); }
.compare-row .cmp-banda { flex: 1 1 auto; min-width: 0; }
.lg-lectura p { margin: 0 0 9px; color: var(--ink); line-height: 1.6; }
.lg-lectura p:last-child { margin-bottom: 0; }
.lg-aviso { border-left: 3px solid transparent; padding-left: 11px; color: var(--ink-2); }
.lg-aviso-validez { border-left-color: var(--nivel-observacion); }
.lg-aviso-criticos { border-left-color: var(--nivel-requiere_apoyo); }
.lg-card { margin-bottom: 16px; }
.lam-card { margin-bottom: 14px; }
.lam-chips-modo { margin: 0 0 10px; }
.lam-nota { margin: 10px 0 0; }
.lam-riesgo { margin: var(--space-2) 0 0; }
.lam-riesgo p { margin: 0; }
.lam-riesgo-porque { margin: var(--space-1) 0 0; padding-left: var(--space-5); color: var(--ink-2); }
.lam-riesgo-porque li + li { margin-top: var(--space-1); }
.lam-marco { overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
@media screen {
.lam-marco > svg.lamina-perfil { width: 100% !important; min-width: 900px; max-width: 952px; height: auto !important; }
@media (min-width: 700px) { .lam-marco > svg.lamina-perfil { min-width: 0; } }
@media (max-width: 699.98px) {
.lam-marco:has(> svg.lamina-perfil)::before {
position: sticky; left: 0; display: block; width: max-content; margin-bottom: var(--space-1);
font-size: var(--text-sm); color: var(--ink-3);
}
:lang(es) .lam-marco:has(> svg.lamina-perfil)::before { content: 'Deslice para ver toda la lámina'; }
:lang(en) .lam-marco:has(> svg.lamina-perfil)::before { content: 'Swipe to see the whole chart'; }
.pc-pdf .lam-marco:has(> svg.lamina-perfil)::before { content: none; }
}
.lam-marco > svg.lamina-perfil.lamina-papel { min-width: 706px; max-width: 992px; }
@media (min-width: 700px) { .lam-marco > svg.lamina-perfil.lamina-papel { min-width: 0; } }
}
.rec-card-host { margin-bottom: 16px; }
.rec-lista { display: flex; flex-direction: column; gap: 10px; }
.rec-card { border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--r-sm);
padding: 11px 14px; background: var(--card); }
.rec-card header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 6px; }
.rec-card header b { color: var(--navy); }
.rec-nivel { font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.rec-dim { font-size: var(--text-sm); color: var(--ink-3); }
.rec-eje { font-size: var(--text-sm); color: var(--ink-3); border: 1px solid var(--line);
border-radius: var(--r-pill); padding: 1px 8px; }
.rec-card p { margin: 0 0 5px; color: var(--ink); line-height: 1.55; }
.rec-card p:last-child { margin-bottom: 0; }
.rec-entrega, .rec-linea { font-size: var(--text-md); color: var(--ink-2); }
.rec-linea { border-top: 1px solid var(--line-soft); padding-top: 6px; margin-top: 7px; }
.rec-universal { border-left-color: var(--nivel-observacion); }
.rec-universal .rec-nivel { color: var(--nivel-observacion-txt); }
.rec-focalizado { border-left-color: var(--nivel-requiere_apoyo); }
.rec-focalizado .rec-nivel { color: var(--nivel-requiere_apoyo-txt); }
.rec-especializado { border-left-color: var(--nivel-intervencion_prioritaria); }
.rec-especializado .rec-nivel { color: var(--nivel-intervencion_prioritaria-txt); }
.rec-vacio, .rec-cola { margin: 0; }
.rec-nota { margin: 0 0 10px; }
.rec-consolidar { border-left-width: 1px; padding-left: 17px; }
.rec-edad { margin: 0 0 10px; }
.ec-card-host { margin-bottom: 16px; }
.ec-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 720px) { .ec-cols { grid-template-columns: minmax(0, 1fr); } }
.ec-col { border: 1px solid var(--line); border-radius: var(--r-sm);
padding: 11px 14px; background: var(--card); }
.ec-col h4 { margin: 0 0 8px; font-size: var(--text-md); color: var(--navy); }
.ec-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ec-col li { display: flex; flex-direction: column; gap: 2px; }
.ec-col li b { color: var(--navy); }
.ec-cab { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.ec-linea { color: var(--ink-2); }
.ec-linea i { font-style: normal; color: var(--ink-3); }
.ec-pc { color: var(--ink-3); font-size: var(--text-sm); }
.ec-nota { margin: 0 0 8px; }
.ec-col .ec-nota:last-child { margin: 8px 0 0; }
.ec-facilita h4 { color: var(--nivel-excepcional_esperado_alto-txt); }
.ec-retos h4 { color: var(--nivel-observacion-txt); }
.report-lamina-familia { break-before: page; page-break-before: always; break-inside: avoid; }
@media print {
.lam-marco { overflow: visible; }
.lam-marco > svg { width: 100% !important; height: auto !important; }
.report-lamina { break-inside: avoid; page-break-inside: avoid; margin-bottom: 14px; }
.report-lamina-familia { break-before: page; page-break-before: always; }
}
.report-lamina-parte { font-weight: 400; color: var(--ink-3); font-size: var(--text-sm); line-height: var(--leading-ui); }
.pc-fila-nombre { cursor: pointer; outline: none; }
.pc-fila-nombre:hover text { text-decoration: underline; fill: var(--teal-txt); }
.pc-fila-nombre:focus-visible .pc-fila-zona { stroke: var(--teal); stroke-width: 2; }
.pc-cuadro { max-width: 560px; }
.pc-cuadro-parte { margin: var(--space-4) 0 0; }
.pc-cuadro-parte h4 { margin: 0 0 var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--navy); }
.pc-cuadro-parte p { margin: 0 0 var(--space-1); font-size: var(--text-sm); color: var(--ink-2); }
.pc-cuadro-parte p:last-child { margin-bottom: 0; }
.pc-cuadro-cifras { margin: 0 0 var(--space-2); }
.pc-cuadro-cifras div { display: flex; justify-content: space-between; gap: var(--space-4); padding: 3px 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.pc-cuadro-cifras dt { color: var(--ink-2); font-weight: 400; }
.pc-cuadro-cifras dd { margin: 0; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.pc-cuadro-lista { margin: 0 0 var(--space-1); padding-left: var(--space-4); font-size: var(--text-sm); color: var(--ink-2); }
.pc-cuadro-nota { white-space: pre-wrap; }
.lam-leyenda { margin: 12px 0 0; display: flex; flex-direction: column; gap: 7px; }
.lam-leyenda p { margin: 0; }
.lam-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.lam-chip { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.lam-chip > i { width: 9px; height: 9px; border-radius: var(--r-pill); display: block; flex: none; }
.lam-chip > i.lam-aro { background: var(--card); border: 1.2px dashed; box-sizing: border-box; opacity: 0.6; }
.lam-card.lam-solo [data-mirada-fondo], .lam-card.lam-solo .lam-fondo-quien { display: none; }
.lam-chip b { color: var(--ink-3); font-weight: 600; }
.delta { font-size: var(--text-sm); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.drawer-backdrop {
position: fixed; inset: 0; background: rgba(13,58,102,0.35); z-index: 90;
opacity: 0; pointer-events: none; transition: opacity 0.22s;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer {
position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 94vw); background: var(--card);
z-index: 91; box-shadow: var(--sh-3); transform: translateX(102%); transition: transform 0.26s ease;
overflow-y: auto; padding: 28px 30px;
}
.drawer.open { transform: translateX(0); }
.drawer.dsheet {
top: 50%; left: 50%; right: auto; bottom: auto;
width: min(680px, 92vw); max-height: 86vh;
border-radius: var(--r-lg);
padding: 30px 34px 26px;
transform: translate(-50%, -50%) scale(0.96);
opacity: 0;
transition: transform var(--duration-ui) var(--ease-out), opacity var(--duration-ui) var(--ease-out);
}
.drawer.dsheet.open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.drawer.dsheet.dsheet-ancha { width: min(1360px, 96vw); max-height: 94vh; padding: 0; }
.drawer.dsheet .drawer-close { top: 20px; right: 20px; }
.drawer-backdrop.dsheet {
background: rgba(13, 58, 102, 0.28);
}
.drawer.dsheet h3 { font-size: var(--text-xl); letter-spacing: -0.015em; }
.drawer.dsheet .sub-row { padding: 13px 0; }
.drawer.dsheet .sub-row .sub-name { font-size: var(--text-lg); }
.drawer.dsheet .sub-row .sub-val { font-size: var(--text-lg); font-weight: 600; }
.drawer.dsheet .meter { height: 9px; border-radius: var(--r-pill); }
.drawer.dsheet .meter > i { border-radius: var(--r-pill); }
@keyframes dsheet-entra { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes dsheet-llena { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.drawer.dsheet.open .sub-row {
animation: dsheet-entra 0.36s var(--ease-out) both;
}
.drawer.dsheet.open .sub-row:nth-child(1)  { animation-delay: 0.04s; }
.drawer.dsheet.open .sub-row:nth-child(2)  { animation-delay: 0.08s; }
.drawer.dsheet.open .sub-row:nth-child(3)  { animation-delay: 0.12s; }
.drawer.dsheet.open .sub-row:nth-child(4)  { animation-delay: 0.16s; }
.drawer.dsheet.open .sub-row:nth-child(5)  { animation-delay: 0.20s; }
.drawer.dsheet.open .sub-row:nth-child(6)  { animation-delay: 0.24s; }
.drawer.dsheet.open .sub-row:nth-child(7)  { animation-delay: 0.28s; }
.drawer.dsheet.open .sub-row:nth-child(8)  { animation-delay: 0.32s; }
.drawer.dsheet.open .sub-row:nth-child(n+9) { animation-delay: 0.36s; }
.drawer.dsheet.open .meter > i {
transform-origin: left center;
animation: dsheet-llena 0.6s var(--ease-out) 0.14s both;
}
@media (max-width: 620px) {
.drawer.dsheet {
top: auto; bottom: 0; left: 0; right: 0;
width: 100%; max-width: none; max-height: 90vh;
border-radius: var(--r-lg) var(--r-lg) 0 0;
padding: 22px 20px 26px;
transform: translateY(100%); opacity: 1;
transition: transform var(--duration-ui) var(--ease-out);
}
.drawer.dsheet.open { transform: translateY(0); }
.drawer.dsheet::before {
content: ''; display: block; width: 38px; height: 4px; border-radius: var(--r-sm);
background: var(--line); margin: 0 auto 14px;
}
.drawer.dsheet.dsheet-ancha { width: 100%; }
}
.fam-sub { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 13px; margin-bottom: 7px; }
.fam-sub-name { font-size: var(--text-md); color: var(--navy); flex: 1; }
.drawer.dsheet .fam-sub { padding: 13px 15px; margin-bottom: 9px; }
.drawer.dsheet .fam-sub-name { font-size: var(--text-lg); }
.drawer.dsheet.open .fam-sub {
animation: dsheet-entra 0.36s var(--ease-out) both;
animation-delay: min(calc((var(--i, 0) + 1) * 0.04s), 0.24s);
}
@media (prefers-reduced-motion: reduce) {
.drawer.dsheet, .drawer.dsheet.open { transition: opacity 0.12s linear; transform: translate(-50%, -50%); }
.drawer.dsheet.open .sub-row,
.drawer.dsheet.open .fam-sub,
.drawer.dsheet.open .meter > i { animation: none; }
@media (max-width: 620px) {
.drawer.dsheet, .drawer.dsheet.open { transform: none; }
}
}
.flipcard { margin-bottom: 18px; }
.flipcard-in { display: grid; }
.flipcard-face {
grid-area: 1 / 1;
position: relative;
border-radius: var(--r-lg);
padding: 14px 18px 10px;
margin: 0;
transition: opacity var(--duration-ui) var(--ease-out), visibility var(--duration-ui) var(--ease-out);
}
.flipcard-back { padding: 18px 20px 16px; }
.flipcard:not(.girada) .flipcard-back,
.flipcard.girada .flipcard-front { opacity: 0; visibility: hidden; pointer-events: none; }
.flipcard-btn {
position: absolute; top: 12px; right: 12px; z-index: 2;
width: 30px; height: 30px; border-radius: 50%;
border: 1px solid var(--line); background: var(--card);
color: var(--ink-3); cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.flipcard-zona { cursor: pointer; border-radius: var(--r-md); transition: background 0.18s ease;  overflow-x: auto;}
.flipcard-zona:hover { background: var(--line-soft); }
.flipcard-zona:focus-visible { outline: 2px solid var(--teal-txt); outline-offset: 3px; }
.cn-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
gap: var(--space-4) var(--space-5); }
.cn-area { min-width: 0; overflow-x: auto; }
.cn-area-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
gap: var(--space-1) var(--space-2); margin-bottom: var(--space-1); }
.cn-area-cab b { font-size: var(--text-sm); color: var(--ink); }
.cn-area-cab .pill { font-size: var(--text-sm); }
.cn-area-nota { font-size: var(--text-sm); margin: 0; }
.flipcard-zona:hover ~ .flipcard-btn,
.flipcard-front:hover .flipcard-btn { color: var(--teal-txt); border-color: var(--teal); }
.flipcard-back { cursor: pointer; }
.flipcard-btn:hover { color: var(--teal-txt); border-color: var(--teal); }
.flipcard-btn:focus-visible { outline: 2px solid var(--teal-txt); outline-offset: 2px; }
.flipcard-back .flipcard-btn { transform: rotate(180deg); }
.flipcard-tit {
font-size: var(--text-sm); font-weight: 700; color: var(--navy);
margin: 0 0 4px; letter-spacing: -0.005em;
}
.flipcard-tit + .flipcard-txt { margin-bottom: 12px; }
.flipcard-txt { font-size: var(--text-sm); color: var(--ink-2); line-height: 1.6; margin: 0 0 10px; }
.flipcard-txt:last-child { margin-bottom: 0; }
.flipcard-lista {
list-style: none; margin: -4px 0 12px; padding: 0;
font-size: var(--text-sm); color: var(--ink-2); line-height: 1.55;
}
.flipcard-lista li { position: relative; padding-left: 14px; margin-bottom: 3px; }
.flipcard-lista li::before {
content: ''; position: absolute; left: 2px; top: 0.62em;
width: 4px; height: 4px; border-radius: 50%; background: var(--teal);
}
.drawer.dsheet .flipcard-lista { font-size: var(--text-md); }
.que-mide-btn {
margin-left: auto; flex: none; padding: 0;
width: var(--control-sm); height: var(--control-sm); border-radius: 50%;
border: 1px solid var(--gold); background: var(--card); color: var(--gold-txt);
font: 700 var(--text-lg)/1 var(--font-ui); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: border-color var(--duration-fast) var(--ease-out);
}
.que-mide-btn:hover { border-color: var(--gold-txt); }
.que-mide-btn:focus-visible { outline: 2px solid var(--teal-txt); outline-offset: 2px; }
.que-mide-cuest { margin: 0 0 var(--space-4); font-size: var(--text-sm); }
.drawer.dsheet .flipcard-txt { font-size: var(--text-md); }
.drawer.dsheet .flipcard-tit { font-size: var(--text-md); }
@media (prefers-reduced-motion: reduce) {
.flipcard-face { transition: none; }
}
.ds-paso {
border: 1px solid var(--line);
border-radius: var(--r-sm); padding: 12px 15px; margin: 14px 0 2px;
background: var(--bg-soft, transparent);
}
.ds-paso-rot {
display: inline-block; font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--teal-txt); margin-bottom: 5px;
}
.ds-paso-accion { font-size: var(--text-md); color: var(--ink); margin: 0; line-height: 1.55; }
.ds-paso-ind { font-size: var(--text-sm); color: var(--ink-2); margin: 7px 0 0; line-height: 1.5; }
.drawer.dsheet .ds-paso-accion { font-size: var(--text-lg); }
.drawer.dsheet .ds-paso-ind { font-size: var(--text-md); }
.ds-cuerpo p + p { margin-top: 11px; }
.ds-familia p { font-size: var(--text-md); color: var(--ink); line-height: 1.6; margin: 0 0 9px; }
.drawer.dsheet .ds-familia p { font-size: var(--text-lg); }
.drawer-close {
position: absolute; top: 18px; right: 18px; border: 1px solid var(--line); background: var(--card);
width: 34px; height: 34px; border-radius: 50%; color: var(--ink-2); font-size: var(--text-lg);
display: flex; align-items: center; justify-content: center;
transition: border-color 0.16s var(--ease), color 0.16s var(--ease), background 0.16s var(--ease), transform 0.16s var(--ease);
}
.drawer-close:hover { border-color: var(--lv-intervencion-prioritaria-txt); color: var(--lv-intervencion-prioritaria-txt); background: var(--lv-intervencion-prioritaria-bg); transform: rotate(90deg); }
.sub-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--surface-subtle); }
.sub-row:last-child { border-bottom: 0; }
.sub-row .sub-name { width: clamp(120px, 30%, 200px); font-size: var(--text-md); color: var(--ink); flex-shrink: 0; }
.sub-row .meter { flex: 1 1 auto; min-width: 0; }
.sub-row .sub-banda { flex: 1 1 auto; min-width: 0; }
.sub-row .sub-val {
flex: 0 0 auto; min-width: 62px; text-align: right;
font-weight: 700; font-size: var(--text-md); color: var(--navy); white-space: nowrap;
}
.sub-row .sub-marg { font-weight: 400; font-size: var(--text-sm); color: var(--ink-2); margin-left: 3px; cursor: help; }
.heatmap { display: grid; gap: 5px; font-size: var(--text-sm); }
.heat-cell {
border-radius: var(--r-sm); padding: 9px 4px; text-align: center; font-weight: 700; color: #fff;
cursor: default;
}
.heat-label { display: flex; align-items: center; font-size: var(--text-sm); color: var(--ink-2); font-weight: 600; padding-right: 6px; }
.heat-top { text-align: center; color: var(--ink-3); font-weight: 600; padding-bottom: 2px; }
.alert-item {
display: flex; gap: 13px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md);
background: var(--card); align-items: flex-start;
}
.alert-item + .alert-item { margin-top: 10px; }
.alert-ico { width: 36px; height: 36px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.alert-ico svg { width: 18px; height: 18px; }
.alert-item h4 { font-size: var(--text-md); margin-bottom: 2px; }
.alert-item p { font-size: var(--text-sm); color: var(--ink-2); }
.alert-item .alert-meta { font-size: var(--text-sm); color: var(--ink-3); margin-top: 5px; }
.notification-filters { margin: 0; }
.notification-summary { margin: -8px 0 14px; font-size: var(--text-sm); }
.notification-item { margin-bottom: 10px; }
.notification-body { flex: 1; min-width: 0; }
.notification-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 5px;
}
.notification-head .pill { flex: none; }
.notification-student { margin: 2px 0 0; }
.notification-student b { color: var(--navy); }
.notification-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: 10px; }
.notification-more { display: flex; justify-content: center; margin: 12px 0; }
.notification-oversight { margin-top: var(--space-6); }
.notification-oversight .card-title { align-items: flex-start; }
.notification-oversight .card-title p { margin: 3px 0 0; }
.notification-oversight .chip-row { margin: var(--space-4) 0; }
.notification-context-focus {
outline: 2px solid var(--teal-txt);
outline-offset: 3px;
}
@media (max-width: 760px) {
.notification-filters { width: 100%; }
.notification-filters > * { width: 100%; }
.notification-head { flex-direction: column; gap: 7px; }
}
.btn-primary {
position: relative; background: var(--teal-strong); color: #fff; border: 0; border-radius: var(--r-sm); padding: 10px 20px;
font-size: var(--text-md); font-weight: 600; letter-spacing: -0.01em;
box-shadow: var(--sh-1);
display: inline-flex; align-items: center; gap: 8px;
transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease), filter 0.2s var(--ease);
}
.btn-primary:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: var(--sh-2); }
.btn-primary:active { transform: translateY(0); box-shadow: var(--sh-1); filter: brightness(0.98); }
.btn-primary svg { width: 16px; height: 16px; }
.btn-primary:disabled, .btn-primary:disabled:hover {
opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; filter: saturate(.35);
}
.btn-danger {
position: relative; background: var(--lv-intervencion-prioritaria); color: #fff; border: 0;
border-radius: var(--r-sm); padding: 10px 20px;
font-size: var(--text-md); font-weight: 600; letter-spacing: -0.01em;
box-shadow: var(--sh-1);
display: inline-flex; align-items: center; gap: 8px;
transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease), filter 0.2s var(--ease);
}
.btn-danger:hover { filter: brightness(1.04); transform: translateY(-1px);
box-shadow: var(--sh-2); }
.btn-danger:active { transform: translateY(0); box-shadow: var(--sh-1); filter: brightness(0.98); }
.btn-danger svg { width: 16px; height: 16px; }
.btn-outline {
background: var(--card); color: var(--navy); border: 1px solid var(--line); border-radius: var(--r-sm);
padding: 9px 18px; font-size: var(--text-md); font-weight: 600; display: inline-flex; align-items: center; gap: 8px;
transition: border-color 0.18s var(--ease), background 0.18s var(--ease), transform 0.18s var(--ease);
}
.btn-outline:hover { border-color: var(--teal); background: var(--surface-action); transform: translateY(-1px); box-shadow: var(--sh-1); }
.btn-outline:active { transform: translateY(0); background: var(--surface-action); }
.btn-outline svg { width: 15px; height: 15px; }
.chart-box { position: relative; width: 100%; }
.legend-inline { display: flex; gap: 18px; flex-wrap: wrap; font-size: var(--text-sm); color: var(--ink-2); margin-top: 12px; justify-content: center; }
.legend-inline span { display: inline-flex; align-items: center; gap: 7px; }
.legend-toggle { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.lg-chip { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-sm); color: var(--ink-2);
background: var(--surface-subtle); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 5px 12px; cursor: pointer;
transition: opacity 0.14s, background 0.14s; }
.lg-chip:hover { background: var(--surface-info); }
.lg-chip .lg-sw { width: 16px; height: 10px; flex: none; display: inline-flex; align-items: center; }
.lg-chip .lg-dot { width: 11px; height: 11px; border-radius: 50%; margin: 0 auto; }
.lg-chip .lg-line { width: 16px; height: 0; border-top: 2.5px dashed currentColor; }
.lg-chip.off { opacity: 0.42; text-decoration: line-through; background: transparent; }
.clinical-block {  padding: 4px 0 4px 16px; margin-bottom: 18px; }
.clinical-block h4 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin-bottom: 6px; }
.clinical-block p, .clinical-block li { font-size: var(--text-md); color: var(--ink); }
.clinical-block ul { padding-left: 18px; }
.clinical-block li { margin-bottom: 4px; }
.report-sheet {
position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
box-shadow: var(--sh-3); max-width: 860px; margin: 0 auto; padding: 46px 52px; overflow: hidden;
}
.report-sheet::before {
content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--teal);
}
.report-sheet { font-size: var(--text-md); line-height: var(--leading-copy); color: var(--ink); }
.report-sheet h2, .report-sheet h3, .report-sheet h4,
.report-sheet .report-major-title {
font-size: var(--text-lg); line-height: var(--leading-tight);
}
.report-sheet small, .report-sheet .pill, .report-sheet figcaption,
.report-sheet .sub-row .sub-name, .report-sheet .sub-row .sub-val {
font-size: var(--text-md); line-height: var(--leading-copy);
}
.report-sheet .muted, .report-sheet .privacy-note {
font-size: var(--text-sm); line-height: var(--leading-ui);
}
.report-brand { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--line); padding-bottom: 20px; margin-bottom: 26px; }
.report-brand img, .report-brand svg { width: 150px; }
.report-brand .report-kind { text-align: right; font-size: var(--text-sm); line-height: var(--leading-ui); color: var(--ink-3); }
.report-brand .report-kind b { display: block; color: var(--navy); font-size: var(--text-lg); line-height: var(--leading-tight); }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.chip {
display: inline-flex; align-items: center; gap: 6px; min-height: var(--control-sm);
border: 1px solid var(--line); background: var(--card); border-radius: var(--r-sm); padding: 7px 15px;
font-size: var(--text-sm); font-weight: 600; color: var(--ink-2);
transition: border-color 0.16s var(--ease), background 0.16s var(--ease), color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.chip:hover { border-color: var(--teal-txt); color: var(--navy); }
.chip.active { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: var(--sh-1); }
.chip svg { width: 14px; height: 14px; }
.rec-item { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--surface-subtle); align-items: flex-start; font-size: var(--text-md); }
.rec-item:last-child { border-bottom: 0; }
.rec-item .rec-num {
width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--surface-action); color: var(--teal-txt);
display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--text-sm); flex-shrink: 0;
}
.rec-strengths { margin-bottom:18px; padding:14px; border:1px solid color-mix(in srgb, var(--lv-excepcional-esperado-alto) 24%, transparent); border-radius:var(--r-md); background:var(--lv-excepcional-esperado-alto-bg); }
.rec-strengths-title { display:flex; align-items:center; gap:7px; margin-bottom:9px; color:var(--lv-excepcional-esperado-alto-txt); }
.rec-strength { display:flex; align-items:flex-start; gap:9px; padding:8px 0; border-top:1px solid color-mix(in srgb, var(--lv-excepcional-esperado-alto) 15%, transparent); }
.rec-strength > span { width:25px; height:25px; border-radius: var(--r-sm); display:flex; align-items:center; justify-content:center; flex:none;
background:var(--card); color:var(--lv-excepcional-esperado-alto-txt); }
.rec-strength small { color:var(--ink-3); font-size: var(--text-sm); }
.rec-strength p { margin:2px 0 0; color:var(--ink-2); font-size: var(--text-sm); }
.rec-priority-title { margin:4px 0 2px; color:var(--ink-2); font-size: var(--text-md); text-transform:uppercase; letter-spacing:.04em; }
.rec-maintenance { display:flex; gap:7px; align-items:flex-start; margin:-5px 0 15px; padding:9px 11px;
border-radius:var(--r-sm); background:var(--bg); color:var(--ink-2); font-size: var(--text-sm); }
.rec-maintenance svg { flex:none; margin-top:1px; }
.intervention-engine { color: var(--ink); }
.intervention-intro {
display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px;
margin-bottom: 22px; border: 1px solid rgba(14,138,134,.24);
border-radius: var(--r-md); background: var(--lv-excepcional-esperado-alto-bg);
}
.intervention-intro > .mini-icon {
width: 34px; height: 34px; flex: none; background: var(--teal-strong); color: #fff;
}
.intervention-intro b { display: block; color: var(--navy); font-size: var(--text-lg); }
.intervention-intro p { margin: 4px 0 0; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.55; }
.intervention-signals { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.intervention-signals span {
padding: 5px 9px; border: 1px solid rgba(14,138,134,.22); border-radius: var(--r-pill);
background: var(--card); color: var(--ink-2); font-size: var(--text-sm); font-weight: 650;
}
.intervention-section-head { margin: 25px 0 12px; }
.intervention-section-head > div { display: flex; align-items: center; gap: 9px; }
.intervention-section-head > div > span {
width: 25px; height: 25px; display: grid; place-items: center; border-radius: var(--r-sm);
background: var(--navy); color: #fff; font-size: var(--text-sm); font-weight: 750;
}
.intervention-section-head.strengths > div > span { background: var(--teal-strong); }
.intervention-section-head h2 { margin: 0; color: var(--navy); font-size: var(--text-lg); }
.intervention-section-head p { margin: 4px 0 0 34px; color: var(--ink-3); font-size: var(--text-sm); line-height: 1.45; }
.intervention-list { display: grid; gap: 13px; }
.intervention-card {
border: 1px solid var(--line);
border-radius: var(--r-md); padding: 15px 16px; background: var(--card);
}
.intervention-card.is-strength {
background: var(--lv-excepcional-esperado-alto-bg);
}
.intervention-card > header { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 13px; }
.intervention-rank {
width: 29px; height: 29px; display: grid; place-items: center; flex: none;
border-radius: var(--r-sm); font-size: var(--text-sm); font-weight: 750;
}
.intervention-card header small {
display: block; color: var(--ink-3); font-size: var(--text-sm); font-weight: 750;
letter-spacing: .08em; line-height: 1.2; margin-bottom: 3px;
}
.intervention-card h3 { margin: 0; color: var(--navy); font-size: var(--text-lg); line-height: 1.35; }
.intervention-fields {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px;
}
.intervention-fields > div {
min-width: 0; padding-top: 9px; border-top: 1px solid var(--line-soft);
}
.intervention-fields > .intervention-activity { grid-column: 1 / -1; padding: 11px 13px; border: 0;
border-radius: var(--r-sm); background: var(--bg); }
.intervention-fields b { display: block; color: var(--ink-3); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .055em; }
.intervention-fields p { margin: 3px 0 0; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.52; }
.intervention-fields .intervention-activity b { color: var(--teal-txt); }
.intervention-fields .intervention-activity p { color: var(--ink); font-size: var(--text-md); }
.intervention-measurable {
margin-top: 14px; padding: 13px 14px; border: 1px solid rgba(14,138,134,.25);
border-radius: var(--r-sm); background: var(--surface-action);
}
.intervention-measure-head { display:flex; align-items:flex-start; gap:9px; }
.intervention-measure-head > span { color:var(--teal); flex:none; margin-top:2px; }
.intervention-measure-head > div { flex:1; min-width:0; }
.intervention-measure-head b, .intervention-evidence b { color:var(--navy); font-size: var(--text-sm); }
.intervention-measure-head p { margin:2px 0 0; color:var(--ink-2); font-size: var(--text-sm); line-height:1.45; }
.intervention-measure-head strong {
flex:none; padding:5px 8px; border-radius: var(--r-sm); background:var(--card);
color:var(--teal-txt); font-size: var(--text-sm);
}
.intervention-baseline-note {
margin:9px 0 11px; padding:7px 9px;
background:var(--card); color:var(--ink-2); font-size: var(--text-sm); line-height:1.45;
}
.intervention-activity-steps { display:flex; flex-direction:column; gap:7px; }
.intervention-activity-steps article { display:flex; align-items:flex-start; gap:8px; }
.intervention-activity-steps article > span {
width:21px; height:21px; display:grid; place-items:center; flex:none;
border-radius:50%; background:var(--teal); color:#fff; font-size: var(--text-sm); font-weight:700;
}
.intervention-activity-steps article > div { flex:1; min-width:0; }
.intervention-activity-steps b { color:var(--ink); font-size: var(--text-sm); }
.intervention-activity-steps p { margin:2px 0; color:var(--ink-2); font-size: var(--text-sm); line-height:1.42; }
.intervention-activity-steps small, .intervention-evidence small { color:var(--ink-3); font-size: var(--text-sm); }
.intervention-evidence { margin-top:10px; padding-top:9px; border-top:1px solid rgba(14,138,134,.18); }
.intervention-evidence p { margin:3px 0; color:var(--ink-2); font-size: var(--text-sm); line-height:1.42; }
.intervention-audit { margin-top: 12px; border-top: 1px solid var(--line-soft); }
.intervention-audit summary, .intervention-method summary {
display: flex; align-items: center; gap: 6px; padding: 10px 1px 0;
cursor: pointer; list-style: none; color: var(--ink-3); font-size: var(--text-sm); font-weight: 650;
}
.intervention-audit summary::-webkit-details-marker,
.intervention-method summary::-webkit-details-marker { display: none; }
.intervention-audit summary::after, .intervention-method summary::after { content: '▾'; margin-left: 3px; }
.intervention-audit[open] summary::after, .intervention-method[open] summary::after { transform: rotate(180deg); }
.intervention-audit > div {
margin-top: 8px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--bg);
}
.intervention-audit p { margin: 4px 0; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.45; }
.intervention-audit ul { margin: 5px 0 0; padding-left: 18px; }
.intervention-audit li { margin: 4px 0; color: var(--ink-2); font-size: var(--text-sm); }
.intervention-audit li b, .intervention-audit li span { display: block; }
.intervention-audit li span { color: var(--ink-3); margin-top: 1px; }
.intervention-method {
margin-top: 18px; padding: 0 13px 12px; border: 1px solid var(--line);
border-radius: var(--r-sm); background: var(--bg);
}
.intervention-method summary { padding-top: 11px; color: var(--navy); }
.intervention-method > p { margin: 10px 0 0; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.5; }
.intervention-reasoning { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.intervention-reasoning span {
padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--card); color: var(--ink-2); font-size: var(--text-sm); font-weight: 650;
}
.intervention-reasoning i { color: var(--ink-3); font-style: normal; font-size: var(--text-sm); }
.intervention-domain {
margin: 22px 0 18px; padding-top: 20px; border-top: 1px solid var(--line);
}
.intervention-domain-head {
display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px;
}
.intervention-domain-head .mini-icon {
flex: none; background: var(--teal-strong); color: #fff;
}
.intervention-domain-head h3 {
margin: 1px 0 0; color: var(--navy); font-size: var(--text-lg);
}
.intervention-domain-head p {
margin: 4px 0 0; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.5;
}
.intervention-domain .intervention-fields { grid-template-columns: 1fr; }
.intervention-domain .intervention-fields > .intervention-activity { grid-column: auto; }
.intervention-domain .intervention-card { padding: 14px; }
.intervention-domain-full {
width: 100%; justify-content: center; margin-top: 12px;
}
.intervention-overview .intervention-intro { margin-bottom: 6px; }
.intervention-overview-section + .intervention-overview-section { margin-top: 28px; }
.intervention-overview-grid {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px; align-items: start;
}
.drawer .intervention-overview-grid { grid-template-columns: 1fr; }
.intervention-overview-card {
width: 100%; min-width: 0; color: var(--ink); font: inherit;
line-height: inherit; text-align: left; cursor: pointer; appearance: none;
background: var(--card);
}
.intervention-overview-card.is-strength { background: var(--lv-excepcional-esperado-alto-bg); }
.intervention-overview-card:focus-visible {
outline: 3px solid rgba(14,138,134,.3); outline-offset: 3px;
}
.intervention-overview-head {
display: flex; align-items: flex-start; gap: 11px; width: 100%;
}
.intervention-overview-head > div { flex: 1; min-width: 0; }
.intervention-overview-head h3 {
margin: 0 0 3px; color: var(--navy); font-size: var(--text-lg); line-height: 1.35;
}
.intervention-overview-head small {
display: block; color: var(--ink-3); font-size: var(--text-sm); line-height: 1.4;
}
.intervention-overview-head .pill {
flex: none; max-width: 118px; white-space: normal; text-align: center;
justify-content: center; font-size: var(--text-sm); font-weight: 700;
}
.intervention-overview-meta {
display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px;
}
.intervention-overview-meta span {
display: inline-flex; align-items: flex-start; gap: 5px; padding: 5px 7px;
border-radius: var(--r-sm); background: var(--bg); color: var(--ink-3);
font-size: var(--text-sm); line-height: 1.35;
}
.intervention-overview-card.is-strength .intervention-overview-meta span { background: var(--card); }
.intervention-overview-meta svg { flex: none; margin-top: 1px; }
.intervention-overview-card .fam-more p {
margin: 0 0 8px; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.5;
}
.intervention-overview-card .fam-more .intervention-overview-preview {
margin-bottom: 0; color: var(--ink);
}
.intervention-implementation-note {
display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px;
margin-top: 16px; border: 1px solid rgba(14,138,134,.24);
border-radius: var(--r-sm); background: var(--lv-excepcional-esperado-alto-bg);
color: var(--teal-txt);
}
.intervention-implementation-note > svg { flex: none; margin-top: 2px; }
.intervention-implementation-note b { color: var(--navy); font-size: var(--text-sm); }
.intervention-implementation-note p {
margin: 3px 0 0; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.5;
}
@media (max-width: 720px) {
.intervention-fields { grid-template-columns: 1fr; }
.intervention-fields > .intervention-activity { grid-column: auto; }
.intervention-section-head p { margin-left: 0; }
.intervention-overview-grid { grid-template-columns: 1fr; }
.intervention-overview-head { flex-wrap: wrap; }
.intervention-overview-head .pill { margin-left: 40px; max-width: none; }
}
.family-engine-intro {
background: var(--lv-excepcional-esperado-alto-bg); border: 1px solid color-mix(in srgb, var(--lv-excepcional-esperado-alto) 24%, transparent);
border-radius: var(--r-md); padding: 16px; margin-bottom: 14px;
}
.family-engine-intro > div:first-child { display: flex; align-items: flex-start; gap: 10px; }
.family-engine-intro .mini-icon { flex: none; background: var(--teal-strong); color: #fff; }
.family-engine-intro b { color: var(--navy); font-size: var(--text-lg); }
.family-engine-intro p { margin: 3px 0 0; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.5; }
.family-engine-signals { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.family-engine-signals span {
display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px;
border: 1px solid color-mix(in srgb, var(--lv-excepcional-esperado-alto) 24%, transparent); border-radius: var(--r-pill); background: var(--card);
color: var(--ink-2); font-size: var(--text-sm); font-weight: 600;
}
.family-engine-strength {
margin-top: 11px !important; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--lv-excepcional-esperado-alto) 24%, transparent);
display: flex; align-items: flex-start; gap: 6px;
}
.family-rec-card:not(.print-open) { margin-bottom: 12px; }
.family-rec-card.print-open {
display: block; border: 1px solid var(--line); border-radius: var(--r-md);
margin-bottom: 11px; background: var(--card); overflow: hidden;
}
.family-rec-summary { user-select: none; }
.family-rec-summary .mini-icon { color: #fff; flex: none; }
.family-rec-summary .sec-tit { white-space: normal; }
.family-rec-summary > div { flex: 1; min-width: 0; padding: 13px 14px; }
.family-rec-summary > div > b { display: block; color: var(--navy); font-size: var(--text-lg); }
.family-rec-summary small { display: block; color: var(--ink-3); font-size: var(--text-sm); line-height: 1.4; margin-top: 2px; }
.sec-body.family-rec-body { padding: 14px 18px 18px 60px; }
.print-open .family-rec-body { padding: 0 14px 15px 50px; }
.family-rec-body { font-family: inherit; }
.family-rec-body p { margin: 3px 0 0; font-size: var(--text-md); color: var(--ink-2); line-height: 1.55; }
.family-rec-explain, .family-rec-reframe, .family-rec-need, .family-rec-support,
.family-rec-avoid, .family-rec-monitor, .family-rec-next { margin-bottom: 12px; }
.family-rec-explain > b, .family-rec-reframe > b, .family-rec-need > b,
.family-rec-support > b, .family-rec-avoid > b, .family-rec-monitor > b, .family-rec-next > b {
color: var(--navy); font-size: var(--text-lg);
}
.family-empathy-note {
display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
margin: 0 0 18px; background: var(--lv-esperado-bg);
border: 1px solid var(--line); border-radius: var(--r-md);
}
.family-empathy-note .mini-icon { flex: none; background: var(--navy); color: var(--card); }
.family-empathy-note p { margin: 0; color: var(--ink); font-size: var(--text-md); line-height: 1.55; }
.family-rec-reframe {
padding: 10px 12px; background: var(--bg);
border-radius: var(--r-sm);
}
.family-rec-support {
padding: 10px 12px; background: var(--lv-excepcional-esperado-alto-bg);
border-radius: var(--r-sm);
}
.family-rec-support p { margin-top: 3px; }
.family-measurable-goal {
margin-top:9px; padding:9px 10px; border:1px solid rgba(14,138,134,.22);
border-radius:var(--r-sm); background:var(--surface-action);
}
.family-measurable-goal strong { color:var(--teal-txt); font-size: var(--text-sm); }
.family-measurable-goal p { margin:3px 0; font-size: var(--text-sm); }
.family-measurable-goal span { display:block; color:var(--ink-3); font-size: var(--text-sm); line-height:1.4; }
.family-rec-practice {
background: var(--bg); border-radius: var(--r-sm);
padding: 12px 13px; margin: 13px 0;
}
.family-rec-practice > div:first-child { display: flex; align-items: center; gap: 7px; color: var(--navy); }
.family-rec-practice .mini-icon { width: 24px; height: 24px; background: var(--lv-excepcional-esperado-alto-bg); color: var(--teal-txt); }
.family-rec-practice > div:first-child > div { display: flex; flex-direction: column; gap: 1px; }
.family-rec-practice > div:first-child small {
color: var(--ink-3); font-size: var(--text-sm); font-weight: 600;
}
.family-rec-practice ol { margin: 9px 0 8px; padding-left: 20px; }
.family-rec-practice li { margin-bottom: 7px; color: var(--ink); font-size: var(--text-md); line-height: 1.5; padding-left: 3px; }
.family-guided-steps { counter-reset: family-step; list-style: none; padding-left: 0 !important; }
.family-guided-steps li {
counter-increment: family-step; position: relative; padding-left: 31px;
min-height: 24px;
}
.family-guided-steps li::before {
content: counter(family-step); position: absolute; left: 0; top: 0;
width: 22px; height: 22px; display: grid; place-items: center;
border-radius: 50%; background: var(--card); color: var(--teal-txt);
font-size: var(--text-sm); font-weight: 700;
}
.family-age-adapt { background: var(--card); border-radius: var(--r-sm); padding: 8px 9px; color: var(--ink) !important; }
.family-rec-avoid {
padding: 10px 12px; background: var(--lv-observacion-bg);
border-radius: var(--r-sm);
}
.family-rec-next { border-top: 1px dashed var(--line); padding-top: 10px; }
.family-rec-context {
display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px;
margin: 0 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--bg); color: var(--ink-2);
}
.family-rec-context svg { flex: none; margin-top: 3px; }
.family-rec-context p { margin: 0; }
.family-rec-team { background: var(--lv-excepcional-esperado-alto-bg); border-radius: var(--r-sm); padding: 10px 11px; margin: 12px 0; }
.family-rec-team b { display: flex; gap: 6px; align-items: center; font-size: var(--text-md); color: var(--teal-txt); }
.family-engine-note {
display: flex; gap: 8px; align-items: flex-start; color: var(--ink-3);
font-size: var(--text-sm); line-height: 1.5; padding: 10px 2px 2px;
}
.family-engine-note svg { flex: none; margin-top: 2px; }
.family-side-step { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.family-side-step > b {
display: inline-flex; width: 24px; height: 24px; flex: none; align-items: center; justify-content: center;
background: var(--lv-excepcional-esperado-alto-bg); color: var(--teal-txt); border-radius: 50%; font-size: var(--text-sm);
}
.family-side-step span { color: var(--ink-2); font-size: var(--text-md); line-height: 1.5; }
.family-clinical-boundary { border-radius: var(--r-sm); padding: 11px 12px; margin: 14px 0; }
.family-clinical-boundary { background: var(--bg); color: var(--navy); }
.family-clinical-boundary b { display: flex; gap: 6px; align-items: center; font-size: var(--text-md); }
.family-clinical-boundary p { margin: 5px 0 0; color: inherit; font-size: var(--text-sm); line-height: 1.5; }
.family-rec-card.print-open .family-rec-summary { cursor: default; }
.family-tool-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
gap: 12px; align-items: start;
}
.drawer .family-tool-grid { grid-template-columns: 1fr; }
.family-tool-card {
width: 100%; min-width: 0; background: var(--card); color: var(--ink);
font-family: inherit; font-size: inherit; line-height: inherit;
text-align: left; cursor: pointer; appearance: none;
}
.family-tool-head { display: flex; align-items: flex-start; gap: 11px; width: 100%; }
.family-tool-head .mini-icon { width: 34px; height: 34px; flex: none; color: #fff; }
.family-tool-head > div { flex: 1; min-width: 0; }
.family-tool-head h3 { margin: 0 0 2px; color: var(--navy); font-size: var(--text-lg); line-height: 1.3; }
.family-tool-head small { display: block; color: var(--ink-3); font-size: var(--text-sm); line-height: 1.4; letter-spacing: .02em; }
.family-tool-head .pill { flex: none; font-size: var(--text-sm); font-weight: 700; }
.family-tool-card .fam-more p {
margin: 0 0 8px; color: var(--ink-2); font-size: var(--text-md); line-height: 1.5;
}
.family-tool-card .fam-more .family-tool-preview { color: var(--ink); margin-bottom: 0; }
.family-tool-action { color: var(--ink) !important; font-size: var(--text-md) !important; line-height: 1.55 !important; margin: 10px 0 !important; }
.family-tool-drawer-head { display: flex; align-items: flex-start; gap: 12px; padding-right: 42px; margin-bottom: 14px; }
.family-tool-drawer-head .mini-icon { width: 38px; height: 38px; flex: none; color: #fff; }
.family-tool-drawer-head span { display: block; color: var(--ink-3); font-size: var(--text-sm); line-height: 1.4; }
.family-tool-drawer-head h2 { margin: 2px 0 0; color: var(--navy); font-size: var(--text-xl); }
.family-tool-snapshot { border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 18px; }
.family-tool-snapshot p { margin: 6px 0 0; color: var(--ink-2); font-size: var(--text-sm); }
.family-rec-expanded { padding: 0; }
@media (max-width: 620px) {
.sec-body.family-rec-body, .print-open .family-rec-body { padding-left: 18px; }
.family-engine-signals span { width: 100%; }
.family-tool-grid { grid-template-columns: 1fr; }
.family-tool-head { flex-wrap: wrap; }
.family-tool-head .pill { margin-left: 45px; }
}
@media print {
.family-rec-card, .family-engine-intro { box-shadow: none !important; break-inside: avoid; }
.family-rec-card.print-open .family-rec-body { display: block !important; }
.family-rec-practice { background: var(--bg) !important; }
}
.likert-sub {
display: inline-block; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.05em;
color: var(--teal-txt); font-weight: 700; background: var(--surface-action); padding: 2px 8px; border-radius: var(--r-sm); margin-right: 9px;
}
.likert-opt .lv { display: block; font-size: var(--text-lg); font-weight: 700; color: var(--navy); margin-bottom: 2px; }
.likert-opt.sel { background: var(--teal-strong); color: #fff; border-color: transparent; box-shadow: var(--sh-1); }
.likert-opt.sel .lv { color: #fff; }
@media (max-width: 720px) { .likert-opt { min-width: 0; padding: 8px 3px; font-size: var(--text-sm); } }
.modal-backdrop {
position: fixed; inset: 0; z-index: 210; background: rgba(13,58,102,0.42);
display: flex; align-items: center; justify-content: center; padding: 24px;
opacity: 0; transition: opacity var(--duration-ui) var(--ease-out);
}
.modal-backdrop.open { opacity: 1; }
.modal-card {
background: var(--card); border-radius: var(--r-lg); box-shadow: var(--sh-3);
width: min(600px, 100%); max-height: 90vh; overflow-y: auto; padding: 26px 28px;
transform: translateY(10px) scale(0.99); transition: transform var(--duration-ui) var(--ease-out);
}
.modal-backdrop.open .modal-card { transform: none; }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.modal-head h3 { font-size: var(--text-xl); }
.modal-head .drawer-close { position: static; }
.modal-card.hoja .modal-head { position: relative; justify-content: center; min-height: var(--control-lg); }
.modal-card.hoja .modal-head h3 { text-align: center; padding: 0 var(--control-lg); }
.modal-card.hoja .modal-head .drawer-close { position: absolute; top: 0; right: 0; }
.modal-card.hoja > p { text-align: center; }
.hoja-pie { display: flex; flex-direction: column-reverse; gap: var(--space-2); margin-top: var(--space-4); }
.hoja-pie > :is(.btn-primary, .btn-danger, .btn-outline, .btn-ghost) {
width: 100%; justify-content: center; min-height: var(--space-12);
}
.hoja-pie > .muted { text-align: center; }
.bat-overlay {
position: fixed; inset: 0; z-index: 200; background: var(--card);
display: flex; flex-direction: column;
opacity: 0; transform: scale(0.995); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.bat-overlay.open { opacity: 1; transform: none; }
.bat-bar {
display: flex; align-items: center; gap: 16px; padding: 10px 18px; flex-shrink: 0;
background: var(--card); border-bottom: 1px solid var(--line); box-shadow: var(--sh-1);
}
.bat-logo { height: 32px; width: auto; flex-shrink: 0; display: block; }
.bat-back,
.bat-pantalla {
display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--card);
border-radius: var(--r-sm); padding: 8px 15px; font-size: var(--text-md); font-weight: 700; color: var(--navy);
white-space: nowrap; flex: none;
transition: border-color 0.16s var(--ease), background 0.16s var(--ease), transform 0.16s var(--ease);
}
.bat-back:hover { border-color: var(--teal-txt); background: var(--surface-action); transform: translateX(-2px); }
.bat-pantalla { color: var(--teal-txt); border-color: var(--teal); background: var(--surface-action); white-space: nowrap; }
.bat-pantalla:hover { background: var(--card); }
.bat-pantalla[hidden] { display: none; }
.bat-back svg { transform: scaleX(-1); }
.bat-title { font-weight: 700; color: var(--navy); font-size: var(--text-lg);
min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bat-brand { margin-left: auto; font-size: var(--text-sm); color: var(--ink-3); font-weight: 600; letter-spacing: 0.02em;
min-width: 0; flex: 0 10 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bat-guardado { margin-left: 14px; font-size: var(--text-sm); font-weight: 600; color: var(--ink-3);
min-width: 0; max-width: 32ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bat-guardado.ok { color: var(--lv-excepcional-esperado-alto-txt); }
.bat-guardado.err { color: var(--lv-intervencion-prioritaria-txt); }
.bat-pausa-pedir { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 7px;
border: 1px solid var(--line); background: var(--card); border-radius: var(--r-sm); padding: 6px 12px;
min-height: 32px; font-size: var(--text-sm); font-weight: 700; color: var(--navy); white-space: nowrap; }
.bat-pausa-pedir::before { content: ''; width: 9px; height: 11px; border-left: 3px solid currentColor;
border-right: 3px solid currentColor; box-sizing: border-box; }
.bat-pausa-pedir:hover { border-color: var(--teal-txt); background: var(--surface-action); }
.bat-pausa-pedir.pedida { border-color: var(--teal); background: var(--surface-action); color: var(--teal-txt); }
.bat-brand + .bat-pausa-pedir, .bat-nota ~ .bat-pausa-pedir { margin-left: 10px; }
@media (max-width: 900px) { .bat-brand + .bat-pausa-pedir { margin-left: auto; } }
.bat-finalizar, .bat-no-aplicar { margin-left: auto; flex: none; display: inline-flex; align-items: center;
border: 1px solid var(--line); background: var(--card); border-radius: var(--r-sm); padding: 6px 12px;
min-height: 32px; font-size: var(--text-sm); font-weight: 700; color: var(--navy); white-space: nowrap; }
.bat-finalizar:hover, .bat-no-aplicar:hover { border-color: var(--teal-txt); background: var(--surface-action); }
.bat-finalizar.pedida { border-color: var(--teal); background: var(--surface-action); color: var(--teal-txt); }
.bat-finalizar + .bat-pausa-pedir, .bat-brand + .bat-finalizar, .bat-nota ~ .bat-finalizar,
.bat-no-aplicar + .bat-finalizar, .bat-brand + .bat-no-aplicar, .bat-nota ~ .bat-no-aplicar { margin-left: 10px; }
.bat-finalizar-corto { display: none; }
@media (max-width: 900px) {
.bat-brand + .bat-finalizar, .bat-brand + .bat-no-aplicar { margin-left: auto; }
.bat-finalizar-largo { display: none; }
.bat-finalizar-corto { display: inline; }
}
.bat-nota { margin-left: auto; border: 1px solid var(--line); background: var(--card); border-radius: var(--r-sm); padding: 8px 14px; font-size: var(--text-sm); font-weight: 700; color: var(--navy); }
.bat-nota:hover { border-color: var(--teal-txt); background: var(--surface-action); }
.bat-nota-form { display: flex; gap: 8px; align-items: center; }
.bat-nota-form[hidden] { display: none; }
.bat-nota-texto { min-width: 280px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; font-size: var(--text-sm); }
.bat-nota-guardar { border: 1px solid var(--teal-txt); background: var(--teal-txt); color: #fff; border-radius: var(--r-sm); padding: 8px 12px; font-size: var(--text-sm); font-weight: 700; }
.bat-frame { flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; border: 0; background: var(--page, var(--card)); }
.bat-fin { position: absolute; inset: 0; top: 57px; z-index: 2; display: grid; place-items: center;
background: var(--card); }
.bat-fin[hidden] { display: none; }
.bat-fin-card { max-width: 420px; text-align: center; padding: 32px; }
.bat-fin-titulo { font-size: var(--text-xl); font-weight: 700; color: var(--navy); margin: 0 0 8px; }
.bat-fin-txt { font-size: var(--text-md); color: var(--ink-2); margin: 0 0 18px; line-height: 1.5; }
.bat-overlay.bat-pausa { display: grid; place-items: center; }
.bat-pausa-reloj { margin: 0 0 var(--space-5); }
.bat-pausa-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.ses-demora, .ses-fase { border: 1px solid var(--teal); border-radius: var(--r-md); padding: 16px 18px; background: var(--surface-action); margin: 0 0 16px; }
.ses-demora.excedida { border-color: var(--lv-intervencion-prioritaria); background: var(--card); }
.ses-demora [hidden] { display: none; }
.ses-reloj { font-variant-numeric: tabular-nums; font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em; color: var(--navy); line-height: 1.1; }
.ses-empezar { margin: 0 0 var(--space-3); }
.ses-empezar button { width: 100%; justify-content: center; }
.ses-lista { display: grid; gap: var(--space-1); }
.ses-sigue { font-size: var(--text-sm); font-weight: 700; color: var(--teal-txt); white-space: nowrap; }
.ses-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); }
.ses-fila.hecha .ses-num, .ses-fila.hecha .ses-nombre { opacity: 0.62; }
.ses-fila .ses-num { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-size: var(--text-sm); font-weight: 700; background: var(--surface-subtle); color: var(--ink-2); flex: none; }
.ses-fila.hecha .ses-num { background: var(--surface-action); color: var(--teal-txt); }
.ses-fila .ses-nombre { flex: 1 1 150px; min-width: 0; }
.ses-fila .ses-aplicar, .ses-fila .ses-sigue { margin-left: auto; }
.ses-fila .ses-nombre b { display: block; font-size: var(--text-md); }
.ses-fila .ses-nombre span { display: block; font-size: var(--text-sm); color: var(--ink-2); margin-top: 2px; }
.ses-control { margin: var(--space-4) 0 0; }
@media (max-width: 900px) { .bat-brand { display: none; } }
@media (max-width: 620px) { .bat-logo { height: 26px; } }
@media (max-width: 620px) {
.bat-bar { flex-wrap: wrap; gap: 8px 12px; }
.bat-back, .bat-pantalla { padding: 6px 11px; font-size: var(--text-sm); }
.bat-title { flex: 1 1 0; }
}
.brm-campaign { margin-bottom: 16px; }
.brm-campaign .mini-icon { background: var(--ink-3); }
.brm-campaign.is-open .mini-icon { background: var(--teal); }
.brm-campaign-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 12px; }
.brm-page-actions,
.brm-sim-actions,
.brm-sim-report-actions {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.brm-check {
display: flex;
align-items: flex-start;
gap: var(--space-2);
color: var(--ink-2);
font-size: var(--text-sm);
line-height: var(--leading-copy);
}
.brm-check input { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.brm-check span { min-width: 0; }
.brm-check small { display: block; margin-top: var(--space-1); color: var(--ink-3); }
.brm-cognitive-protocol {
margin: 0 0 var(--space-4);
padding: var(--space-4);
border: 1px solid var(--line-soft);
background: var(--surface-subtle);
}
.brm-cognitive-protocol > p { margin: 0 0 var(--space-3); font-size: var(--text-sm); }
.brm-protocolo {
margin: 0 0 var(--space-3);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--line-soft);
background: var(--surface-subtle);
}
.brm-cognitive-options {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
}
.brm-paper-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
margin-top: var(--space-3);
padding: var(--space-3);
border: 1px solid var(--line-soft);
background: var(--surface-subtle);
}
.brm-paper-option b { display: block; color: var(--navy); font-size: var(--text-sm); }
.brm-paper-option small { display: block; margin-top: var(--space-1); color: var(--ink-3); }
.brm-cognitive-task-list { border-top: 1px solid var(--line-soft); }
.brm-fase-titulo { margin: 14px 0 4px; font-size: var(--text-sm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.brm-cognitive-task-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-3) 0;
border-bottom: 1px solid var(--line-soft);
}
.brm-demora-reloj { margin: 0 0 6px; font-size: var(--text-md); font-weight: 700;
color: var(--teal-txt); font-variant-numeric: tabular-nums; }
.brm-cognitive-task-acciones { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.brm-cognitive-task-acciones > button { flex: 0 0 auto; }
.brm-cognitive-task-row b { display: block; color: var(--navy); font-size: var(--text-md); }
.brm-cognitive-task-row span { display: block; margin-top: var(--space-1); color: var(--ink-3); font-size: var(--text-sm); }
.brm-participant-panel {
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--line-soft);
}
.brm-participant-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-4);
}
.brm-participant-head b { color: var(--navy); }
.brm-participant-head p { margin: var(--space-1) 0 0; font-size: var(--text-sm); }
.brm-participant-form {
margin-bottom: var(--space-4);
padding: var(--space-4);
border: 1px solid var(--line-soft);
border-radius: var(--r-md);
background: var(--bg);
}
.brm-participant-fields {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-3);
}
.brm-roster-import .brm-participant-fields {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.brm-names-edit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-2); max-width: 520px; }
.brm-names-actions { grid-column: 1 / -1; display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.brm-participant-actions {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.brm-plan-form button:disabled,
.brm-plan-form button:disabled:hover {
opacity: .5;
cursor: not-allowed;
transform: none;
box-shadow: none;
filter: saturate(.35);
}
.brm-participant-form > .brm-participant-actions { margin-top: var(--space-3); }
.brm-application-conditions {
margin-top: var(--space-3);
padding-top: var(--space-3);
border-top: 1px solid var(--line-soft);
}
.brm-application-conditions > p { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.brm-application-conditions > div { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.brm-sample-repository { margin-bottom: var(--space-5); }
.brm-sample-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--line-soft);
}
.brm-sample-head h2 { margin: 0 0 var(--space-1); color: var(--navy); font-size: var(--text-xl); }
.brm-sample-head p { margin: 0; max-width: 760px; color: var(--ink-3); font-size: var(--text-sm); }
.brm-sample-filters {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-3);
padding: var(--space-4) 0;
}
.brm-sample-summary {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid var(--line-soft);
border-bottom: 1px solid var(--line-soft);
margin-bottom: var(--space-4);
}
.brm-sample-summary > div { padding: var(--space-3); border-right: 1px solid var(--line-soft); }
.brm-sample-summary > div:last-child { border-right: 0; }
.brm-sample-summary b { display: block; color: var(--navy); font-size: var(--text-xl); }
.brm-sample-summary span { color: var(--ink-3); font-size: var(--text-sm); }
.brm-sample-table b { color: var(--navy); }
.brm-sample-note { margin: var(--space-3) 0 0; font-size: var(--text-sm); }
.brm-empty { margin: 0; padding: var(--space-3) 0; }
.brm-sim-card {
margin-bottom: var(--space-5);
}
.brm-sim-intro {
display: flex;
align-items: flex-start;
gap: var(--space-3);
margin-bottom: var(--space-5);
padding: var(--space-4);
border: 1px solid rgba(14,138,134,.24);
border-radius: var(--r-md);
background: var(--surface-action);
color: var(--teal-txt);
}
.brm-sim-intro > svg { flex: 0 0 var(--icon-md); margin-top: 2px; }
.brm-sim-intro p {
margin: 0;
color: var(--ink-2);
font-size: var(--text-md);
line-height: var(--leading-copy);
}
.brm-sim-catalog-status {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin: calc(var(--space-2) * -1) 0 var(--space-4);
}
.brm-sim-catalog-status .pill { background: var(--line-soft); color: var(--ink-2); }
.brm-sim-fields {
display: grid;
grid-template-columns: minmax(240px, 2fr) repeat(3, minmax(132px, 1fr));
gap: var(--space-4);
align-items: end;
}
.brm-sim-fields > [hidden] { display: none; }
.brm-sim-control-audio {
display: grid;
grid-template-columns: minmax(220px, 1.4fr) minmax(240px, 1fr) auto;
align-items: end;
gap: var(--space-3);
margin-top: var(--space-4);
padding: var(--space-4);
border: 1px solid var(--line-soft);
border-radius: var(--r-md);
background: var(--bg);
}
.brm-sim-control-audio[hidden] { display: none; }
.brm-sim-control-audio > div:first-child b { color: var(--navy); font-size: var(--text-sm); }
.brm-sim-control-audio > div:first-child p {
margin: var(--space-1) 0 0; color: var(--ink-3); font-size: var(--text-sm); line-height: var(--leading-copy);
}
.brm-sim-control-audio > .muted { grid-column: 1 / -1; font-size: var(--text-sm); }
.brm-sim-control-audio > #brmSimControlResult { grid-column: 1 / -1; min-width: 0; }
.brm-sim-control-audio > #brmSimControlResult:empty { display: none; }
.brm-sim-actions { margin-top: var(--space-4); }
.brm-sim-preflight {
display: flex;
align-items: flex-start;
gap: var(--space-2);
margin-top: var(--space-3);
padding: var(--space-3);
background: var(--surface-subtle);
color: var(--ink-2);
}
.brm-sim-preflight > svg { flex: none; margin-top: 2px; }
.brm-sim-preflight > div { flex: 1; min-width: 0; }
.brm-sim-preflight b { display: block; color: var(--navy); font-size: var(--text-sm); }
.brm-sim-preflight p { margin: var(--space-1) 0 0; font-size: var(--text-sm); line-height: var(--leading-copy); }
.brm-sim-preflight > span { flex: none; color: var(--ink-3); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.brm-sim-result:empty { display: none; }
.brm-sim-result:not(:empty) {
margin-top: var(--space-5);
padding-top: var(--space-5);
border-top: 1px solid var(--line);
}
.brm-sim-report {
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: var(--space-4);
background: var(--card);
}
.brm-sim-report-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-4);
}
.brm-sim-report-head h3 { margin: var(--space-1) 0 0; color: var(--navy); }
.brm-sim-report-head p {
margin: var(--space-1) 0 0;
color: var(--ink-3);
font-size: var(--text-sm);
}
.brm-sim-status {
display: block;
color: var(--ink-2);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
}
.brm-sim-result-pill { flex: none; background: var(--line-soft); color: var(--ink-2); }
.brm-sim-checks {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-2);
margin: 0 0 var(--space-4);
padding: 0;
list-style: none;
}
.brm-sim-checks li {
min-height: var(--control-md);
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
border: 1px solid var(--line);
border-radius: var(--r-sm);
color: var(--ink-2);
font-size: var(--text-sm);
}
.brm-sim-checks li > span { color: var(--ink-3); font-weight: var(--weight-bold); }
.brm-sim-checks li.is-ok > span { color: var(--teal-txt); }
.brm-sim-checks li.is-warning > span { color: var(--gold-txt); }
.brm-sim-checks li.is-error > span { color: var(--navy-deep); }
.brm-sim-metrics {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.brm-sim-metrics > div {
padding: var(--space-3);
border: 1px solid var(--line-soft);
border-radius: var(--r-sm);
background: var(--surface-subtle);
}
.brm-sim-metrics span {
display: block;
color: var(--ink-3);
font-size: var(--text-sm);
line-height: var(--leading-ui);
}
.brm-sim-metrics b {
display: block;
margin-top: var(--space-1);
color: var(--navy);
font-size: var(--text-lg);
font-variant-numeric: tabular-nums;
}
.brm-sim-protocol {
margin-bottom: var(--space-4);
padding-block: var(--space-3);
border-block: 1px solid var(--line-soft);
}
.brm-sim-protocol > summary,
.brm-sim-protocol-nested > summary {
cursor: pointer;
color: var(--navy);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
}
.brm-sim-protocol > p {
margin: var(--space-2) 0 var(--space-3);
color: var(--ink-2);
font-size: var(--text-sm);
line-height: var(--leading-copy);
}
.brm-sim-protocol-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
}
.brm-sim-protocol-grid h4 { margin: 0 0 var(--space-2); color: var(--navy); font-size: var(--text-sm); }
.brm-sim-protocol-grid ul { margin: 0; padding: 0; list-style: none; }
.brm-sim-protocol-grid li {
display: grid;
grid-template-columns: var(--icon-sm) minmax(0, 1fr);
gap: var(--space-1) var(--space-2);
padding: var(--space-2) 0;
border-bottom: 1px solid var(--line-soft);
font-size: var(--text-sm);
}
.brm-sim-protocol-grid li > span { grid-row: 1 / 3; color: var(--ink-3); font-weight: var(--weight-bold); }
.brm-sim-protocol-grid li.is-ok > span { color: var(--teal-txt); }
.brm-sim-protocol-grid li.is-error > span { color: var(--navy-deep); }
.brm-sim-protocol-grid li b { color: var(--ink-2); overflow-wrap: anywhere; }
.brm-sim-protocol-grid li small { color: var(--ink-3); line-height: var(--leading-copy); }
.brm-sim-protocol-nested { margin-top: var(--space-4); }
.brm-sim-protocol-nested .table-wrap { margin-top: var(--space-2); }
.brm-sim-protocol-pending {
margin-top: var(--space-3);
padding: var(--space-3);
background: var(--surface-subtle);
color: var(--ink-2);
font-size: var(--text-sm);
}
.brm-sim-protocol-pending b { color: var(--gold-txt); }
.brm-sim-protocol-pending p { margin: var(--space-1) 0 0; line-height: var(--leading-copy); }
.brm-sim-audio {
margin-bottom: var(--space-4);
padding-block: var(--space-4);
border-block: 1px solid var(--line-soft);
}
.brm-sim-audio-heading,
.brm-sim-audio-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
}
.brm-sim-audio-heading > div > span {
display: block;
color: var(--ink-3);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: .04em;
}
.brm-sim-audio-heading h4 {
margin: var(--space-1) 0 0;
color: var(--navy);
font-size: var(--text-lg);
}
.brm-sim-audio-heading .pill,
.brm-sim-audio-card-head .pill {
flex: none;
background: var(--line-soft);
color: var(--ink-2);
}
.brm-sim-audio-intro,
.brm-sim-audio-empty {
margin: var(--space-2) 0 var(--space-4);
color: var(--ink-2);
font-size: var(--text-sm);
line-height: var(--leading-copy);
}
.brm-sim-audio-empty {
margin-bottom: 0;
padding: var(--space-3);
background: var(--surface-subtle);
}
.brm-sim-audio-card {
margin-top: var(--space-3);
padding: var(--space-4);
border: 1px solid var(--line);
border-radius: var(--r-sm);
}
.brm-sim-audio-card-head { margin-bottom: var(--space-3); }
.brm-sim-audio-card-head b { display: block; color: var(--navy); font-size: var(--text-sm); }
.brm-sim-audio-card-head > div > span {
display: block;
margin-top: var(--space-1);
color: var(--ink-3);
font-size: var(--text-sm);
}
.brm-sim-audio-card audio { display: block; width: 100%; margin-bottom: var(--space-3); }
.brm-audio-waveform {
display: block;
width: 100%;
min-height: 88px;
border: 1px solid var(--line-soft);
background: var(--surface-subtle);
}
.brm-audio-active-window { fill: var(--surface-action); }
.brm-audio-center { fill: none; stroke: var(--line); stroke-width: 1; }
.brm-audio-envelope { fill: none; stroke: var(--teal-txt); stroke-width: 2; }
.brm-audio-boundary { fill: none; stroke: var(--navy); stroke-width: 1.5; }
.brm-sim-audio-legend {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-2);
color: var(--ink-3);
font-size: var(--text-sm);
}
.brm-sim-audio-legend span { display: inline-flex; align-items: center; gap: var(--space-1); }
.brm-sim-audio-legend i { width: 18px; height: 3px; background: var(--teal-txt); }
.brm-sim-audio-legend i.is-window { height: 10px; background: var(--surface-action); border: 1px solid var(--line); }
.brm-sim-audio-metrics {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
gap: var(--space-2);
margin-top: var(--space-3);
}
.brm-sim-audio-metrics > div {
padding: var(--space-2) var(--space-3);
border: 1px solid var(--line-soft);
background: var(--surface-subtle);
}
.brm-sim-audio-metrics span,
.brm-sim-audio-boundaries span {
display: block;
color: var(--ink-3);
font-size: var(--text-sm);
}
.brm-sim-audio-metrics b {
display: block;
margin-top: var(--space-1);
color: var(--navy);
font-size: var(--text-sm);
font-variant-numeric: tabular-nums;
}
.brm-sim-audio-boundaries {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-3);
margin-top: var(--space-4);
padding-top: var(--space-3);
border-top: 1px solid var(--line-soft);
}
.brm-sim-audio-boundaries b {
display: block;
margin-top: var(--space-1);
color: var(--navy);
font-size: var(--text-sm);
font-variant-numeric: tabular-nums;
}
.brm-sim-audio-boundaries small { display: block; margin-top: var(--space-1); color: var(--ink-3); }
.brm-sim-audio-warnings,
.brm-sim-audio-error {
margin-top: var(--space-3);
padding: var(--space-3);
background: var(--surface-subtle);
color: var(--ink-2);
font-size: var(--text-sm);
}
.brm-sim-audio-error { background: var(--surface-info); }
.brm-sim-audio-warnings b { color: var(--gold-txt); }
.brm-sim-audio-warnings ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.brm-sim-audio-scope {
margin: var(--space-4) 0 0;
padding: 0;
border-top: 1px solid var(--line-soft);
}
.brm-sim-audio-scope > div {
display: grid;
grid-template-columns: minmax(180px, .8fr) minmax(240px, 1.2fr);
gap: var(--space-3);
padding-block: var(--space-2);
border-bottom: 1px solid var(--line-soft);
}
.brm-sim-audio-scope dt { color: var(--ink-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.brm-sim-audio-scope dd { margin: 0; color: var(--ink-3); font-size: var(--text-sm); }
.brm-sim-audio-privacy { margin: var(--space-3) 0 0; color: var(--ink-3); font-size: var(--text-sm); line-height: var(--leading-copy); }
.brm-sim-issues {
margin-bottom: var(--space-4);
padding: var(--space-3) var(--space-4);
background: var(--surface-info);
color: var(--ink-2);
font-size: var(--text-sm);
}
.brm-sim-issues b { color: var(--navy-deep); }
.brm-sim-issues ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.brm-sim-events {
margin-bottom: var(--space-4);
border-block: 1px solid var(--line-soft);
padding-block: var(--space-3);
}
.brm-sim-events summary {
cursor: pointer;
color: var(--navy);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
}
.brm-sim-events ol { margin: var(--space-3) 0 0; padding-left: var(--space-5); }
.brm-sim-events li { padding: var(--space-1) 0; color: var(--ink-2); font-size: var(--text-sm); }
.brm-sim-events time {
display: inline-block;
min-width: 88px;
color: var(--ink-3);
font-size: var(--text-sm);
font-variant-numeric: tabular-nums;
}
.brm-sim-notes { margin-bottom: var(--space-4); }
.brm-sim-notes textarea { width: 100%; resize: vertical; }
.brm-sim-live-pill {
flex: none;
padding: var(--space-1) var(--space-2);
border-radius: var(--r-pill);
background: var(--lv-observacion-bg);
color: var(--lv-observacion-txt);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
}
@media (max-width: 920px) {
.brm-sample-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.brm-sample-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.brm-sample-summary > div:nth-child(2) { border-right: 0; }
.brm-sample-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
.brm-participant-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.brm-roster-import .brm-participant-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.brm-sim-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.brm-sim-control-audio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.brm-sim-control-audio > div:first-child { grid-column: 1 / -1; }
.brm-sim-audio-boundaries { grid-template-columns: 1fr; }
.brm-sim-overlay .bat-bar { flex-wrap: wrap; gap: var(--space-2); }
.brm-sim-overlay .bat-guardado,
.brm-collection-overlay .bat-guardado { order: 5; width: 100%; margin-left: 0; }
.brm-collection-overlay .bat-bar { flex-wrap: wrap; gap: var(--space-2); }
}
@media (max-width: 620px) {
.brm-sample-head { flex-direction: column; }
.brm-sample-filters,
.brm-sample-summary { grid-template-columns: 1fr; }
.brm-sample-summary > div,
.brm-sample-summary > div:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line-soft); }
.brm-sample-summary > div:last-child { border-bottom: 0; }
.brm-page-actions,
.brm-page-actions > button,
.brm-sim-actions > button,
.brm-sim-report-actions > button { width: 100%; justify-content: center; }
.brm-sim-fields,
.brm-sim-checks,
.brm-cognitive-options,
.brm-sim-protocol-grid { grid-template-columns: 1fr; }
.brm-sim-control-audio { grid-template-columns: 1fr; }
.brm-sim-control-audio > div:first-child { grid-column: auto; }
.brm-sim-control-audio > button { width: 100%; justify-content: center; }
.brm-sim-report-head { flex-direction: column; }
.brm-sim-audio-heading,
.brm-sim-audio-card-head { flex-direction: column; }
.brm-sim-audio-scope > div { grid-template-columns: 1fr; gap: var(--space-1); }
.brm-sim-live-pill { margin-left: auto; }
.brm-sim-preflight { flex-wrap: wrap; }
.brm-sim-preflight > span { width: 100%; padding-left: calc(var(--icon-md) + var(--space-2)); }
.brm-participant-head { flex-direction: column; }
.brm-participant-head > button { width: 100%; justify-content: center; }
.brm-participant-fields { grid-template-columns: 1fr; }
.brm-roster-import .brm-participant-fields { grid-template-columns: 1fr; }
.brm-paper-option { align-items: stretch; flex-direction: column; }
.brm-participant-actions > button,
.brm-participant-actions > a { width: 100%; justify-content: center; }
.brm-cognitive-task-row { align-items: stretch; flex-direction: column; gap: var(--space-2); }
.brm-cognitive-task-row > button { width: 100%; justify-content: center; }
}
.quiz-shell { max-width: 780px; margin: 0 auto; }
.quiz-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.quiz-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.quiz-timer {
display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
font-size: var(--text-sm); font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums;
background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 4px 11px;
min-width: 88px; justify-content: center;
}
.quiz-timer svg { color: var(--teal-txt); }
.quiz-progress .meter { flex: 1; }
.quiz-progress .meter > i { transition: width 0.3s var(--ease); }
.quiz-card {
position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
box-shadow: var(--sh-2); padding: 32px 36px 30px; overflow: hidden;
}
.quiz-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--qc, var(--teal)); transition: background 0.25s var(--ease); }
.quiz-area { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.quiz-cierre {
margin-top: 10px; padding: 11px 14px; border-radius: var(--r-sm);
background: var(--line-soft);
font-size: var(--text-sm); line-height: 1.5; color: var(--ink-2);
}
.quiz-saltar { margin-top: 16px; text-align: center; }
.quiz-saltar .btn-ghost { font-size: var(--text-sm); color: var(--ink-3); }
.quiz-sobre { margin-top: 6px; font-size: var(--text-sm); color: var(--ink-2); }
.quiz-sobre b { color: var(--ink); font-weight: 650; }
.quiz-q { font-size: var(--text-xl); font-weight: 700; color: var(--navy); line-height: 1.4; letter-spacing: -0.015em; margin: 14px 0 26px; min-height: 74px; }
.quiz-opts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.quiz-opt {
border: 1px solid var(--line); background: var(--card); border-radius: var(--r-md); padding: 16px 6px 13px;
text-align: center; font-size: var(--text-sm); color: var(--ink-2); font-weight: 600; cursor: pointer;
transition: transform 0.14s var(--ease), border-color 0.14s var(--ease), box-shadow 0.14s var(--ease), background 0.14s var(--ease);
}
.quiz-opt:hover { border-color: var(--qc, var(--teal)); transform: translateY(-1px); box-shadow: var(--sh-1); }
.quiz-opt .lv { display: block; font-size: var(--text-2xl); font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.quiz-opt.sel { background: var(--teal-strong); color: #fff; border-color: transparent; box-shadow: var(--sh-1); animation: quizPick 0.3s var(--ease); }
.quiz-opt.sel .lv { color: #fff; }
.quiz-opt.alt { grid-column: 1 / -1; border-style: dashed; }
.quiz-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
.quiz-card.anim .quiz-body { animation: quizIn 0.28s var(--ease); }
@keyframes quizIn { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes quizPick { 0% { transform: scale(0.96); } 55% { transform: scale(1.04); } 100% { transform: scale(1); } }
@media (max-width: 640px) {
.quiz-card { padding: 22px 20px; }
.quiz-q { font-size: var(--text-lg); min-height: 0; }
.quiz-opts { grid-template-columns: 1fr; gap: 7px; }
.quiz-opt { display: flex; align-items: center; gap: 12px; text-align: left; padding: 11px 14px; }
.quiz-opt .lv { margin-bottom: 0; font-size: var(--text-lg); }
}
.long-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.long-arrow {
width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line);
background: var(--card); color: var(--navy); cursor: pointer; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: var(--text-lg); font-weight: 700; line-height: 1;
transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.long-arrow:hover:not(:disabled) { border-color: var(--teal-txt); color: var(--teal-txt); }
.long-arrow:disabled { opacity: 0.3; cursor: default; }
.long-title { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; text-align: left; }
.long-title b { display: block; font-size: var(--text-lg); color: var(--navy); line-height: 1.25; }
.long-step { display: block; font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-top: 1px; }
.long-scale {
min-height: 24px; margin: -4px 0 8px; display: flex; align-items: center;
justify-content: flex-end; gap: 10px; flex-wrap: wrap;
color: var(--ink-3); font-size: var(--text-sm); font-weight: 600;
}
.long-scale:empty { display: none; }
.long-scale .card-link { padding: 2px 0; }
.long-ico {
width: 32px; height: 32px; border-radius: var(--r-sm); color: #fff; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.long-caption { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: var(--text-md); color: var(--ink-2); flex-wrap: wrap; line-height: 1.5; }
.long-caption .pill { flex-shrink: 0; }
.long-dots { display: flex; gap: 0; justify-content: center; align-items: center; margin-top: 12px; }
.long-dot {
width: var(--target-min); height: var(--target-min); border-radius: 50%;
background: none; border: none; padding: 0;
display: grid; place-items: center;
cursor: pointer;
}
.long-dot::before {
content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--line);
transition: background 0.15s var(--ease), transform 0.15s var(--ease);
}
.long-dot:hover::before { background: var(--ink-3); }
.long-dot.on::before { background: var(--teal); transform: scale(1.25); }
.long-dot-all::before { content: none; }
.long-dot-all {
width: auto; height: auto; border-radius: var(--r-sm); padding: 3px 10px;
min-height: var(--target-min); display: inline-flex; align-items: center;
font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
color: var(--ink-3); background: var(--line-soft);
}
.long-dot-all:hover { background: var(--line); color: var(--ink-2); }
.long-dot-all.on { background: var(--navy); color: #fff; transform: none; }
.muted { color: var(--ink-3); font-size: var(--text-sm); }
.spacer { height: 22px; }
.two-col { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; }
.two-col > * { min-width: 0; }
.two-col.profile-radar-evolution { grid-template-columns: minmax(0, 1fr); }
.profile-radar-evolution .long-host .sw-trend {
min-width: clamp(720px, 100%, 1006px) !important;
}
.clinical-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 18px; }
@media (max-width: 1080px) {
.two-col, .clinical-grid { grid-template-columns: minmax(0, 1fr); }
.clinical-grid > div:first-child { order: 2; }
}
.privacy-note {
display: flex; gap: 10px; align-items: flex-start; background: var(--surface-action); border: 1px solid var(--line);
border-radius: var(--r-md); padding: 13px 16px; font-size: var(--text-sm); color: var(--ink-2); margin-top: 20px;
}
.privacy-note svg { width: 17px; height: 17px; color: var(--teal-txt); flex-shrink: 0; margin-top: 1px; }
.cog-autorizacion { margin: 0 0 12px; }
.cog-aut-ok { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 8px; padding: 10px 12px;
background: var(--surface-action); border-radius: var(--r-md); color: var(--teal-txt); font-size: var(--text-sm); font-weight: 600; }
.cog-aut-ok svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; }
.cog-aut-falta { margin: 0 0 10px; padding: 10px 12px; background: var(--surface-subtle);
border-radius: var(--r-md); color: var(--ink); font-size: var(--text-sm); font-weight: 600; }
.cog-aut-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cog-aut-form { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.cog-aut-doc { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-sm); color: var(--ink-2); line-height: 1.5; }
.cog-aut-doc input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; }
.cog-aut-doc a { color: var(--teal-txt); font-weight: 600; }
.cog-aut-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.cog-aut-enlace code { word-break: break-all; font-size: var(--text-sm); }
footer.app-footer {
margin-top: auto; padding: 18px 30px; border-top: 1px solid var(--line);
color: var(--ink-3); font-size: var(--text-sm); display: flex; justify-content: space-between;
align-items: center; gap: var(--space-3); flex-wrap: wrap; background: var(--card);
}
@media (max-width: 900px) {
.sidebar { display: none; }
.pie-servicios { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); flex-basis: 100%; }
.pie-servicio { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--ink-2); }
.content { padding: 20px 16px 50px; }
.searchbox { width: auto; flex: 1; }
.report-sheet { padding: 28px 22px; }
}
.tabbar, .tabsheet, .tabsheet-backdrop { display: none; }
@media (max-width: 900px) {
.tabbar {
display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
background: var(--card);
border-top: 1px solid var(--line);
padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
}
.tab-item {
flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 3px;
min-height: 48px; padding: 4px 2px; border: 0; background: transparent;
color: var(--ink-3); font-size: var(--text-sm); font-weight: 600; line-height: 1.15;
border-radius: var(--r-sm); position: relative; cursor: pointer;
transition: color 0.16s var(--ease);
}
.tab-item svg { width: 21px; height: 21px; flex-shrink: 0; color: currentColor; }
.tab-t {
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tab-item.active { color: var(--teal-txt); }
.tab-item.active svg { color: var(--teal); }
.tab-badge {
position: absolute; top: 1px; left: 50%; margin-left: 5px;
background: var(--lv-intervencion-prioritaria); color: #fff;
font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums;
min-width: 16px; height: 16px; border-radius: var(--r-sm); padding: 0 4px;
display: flex; align-items: center; justify-content: center;
border: 1.5px solid var(--card);
}
.tabsheet {
display: block; position: fixed; left: 0; right: 0; z-index: 61;
bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
background: var(--card); border-top: 1px solid var(--line);
border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--sh-3);
padding: 8px 12px 16px; max-height: 62vh; overflow-y: auto;
transform: translateY(102%); opacity: 0; pointer-events: none;
transition: transform 0.26s var(--ease), opacity 0.2s var(--ease);
}
.tabsheet.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.tabsheet-tirador {
width: 38px; height: 4px; border-radius: var(--r-sm); background: var(--line);
margin: 2px auto 12px;
}
.tabsheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tabsheet-item {
display: flex; align-items: center; gap: 10px; min-height: 48px;
padding: 10px 12px; border: 0; background: transparent; border-radius: var(--r-sm);
color: var(--ink-2); font-size: var(--text-sm); font-weight: 600; text-align: left;
position: relative; cursor: pointer;
}
.tabsheet-item svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--ink-3); }
.tabsheet-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabsheet-item.active { background: var(--surface-action); color: var(--navy); }
.tabsheet-item.active svg { color: var(--teal-txt); }
.tabsheet-item .tab-badge { position: static; margin: 0 0 0 auto; border: 0; }
.tabsheet-backdrop {
display: block; position: fixed; inset: 0; z-index: 59;
background: rgba(22, 40, 60, 0.28); opacity: 0; pointer-events: none;
transition: opacity 0.2s var(--ease);
}
.tabsheet-backdrop.open { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
.tabsheet, .tabsheet-backdrop { transition: none; }
}
@media print { .tabbar, .tabsheet, .tabsheet-backdrop { display: none !important; } }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ink-adorno); border-radius: var(--r-sm); border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }
.spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--line);
border-top-color: var(--teal-txt); animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-refresh { display: inline-flex; align-items: center; gap: 6px; }
.btn-refresh.loading svg { animation: spin 0.7s linear infinite; }
details.cog-dom > summary::-webkit-details-marker { display: none; }
details.cog-dom > summary::marker { content: ''; }
details.cog-dom > summary:hover .cmp-label { color: var(--navy); }
details.cog-dom > summary { border-radius: var(--r-sm); transition: background 0.14s; }
details.cog-dom > summary:hover { background: var(--surface-subtle); }
details.cog-dom > summary:focus-visible { background: var(--surface-subtle);
outline: 3px solid rgba(14, 138, 134, .24); outline-offset: 2px; }
details.cog-dom > summary .cog-caret { transition: transform .15s; }
details.cog-dom[open] > summary .cog-caret { transform: rotate(90deg); }
details.cog-dom > div > div:last-child { border-bottom: none !important; }
@media print { details.cog-dom > div { display: block !important; } }
.cog-lock {  background: var(--card); }
.cog-lock-ic { background: var(--gold) !important; color: #fff; }
.cog-lock-pill { background: var(--surface-subtle); color: var(--ink-2); font-weight: 700; margin-left: 6px;
letter-spacing: 0.03em; text-transform: uppercase; font-size: var(--text-sm); }
.cog-lock-tx { margin: -6px 0 0 !important; font-size: var(--text-md); line-height: 1.55; color: var(--ink-2); }
.cog-lock-modal { position: fixed; inset: 0; z-index: 9000; background: rgba(13,58,102,0.42);
display: flex; align-items: center; justify-content: center; padding: 22px;
animation: cogLockIn 0.16s ease-out; }
@keyframes cogLockIn { from { opacity: 0 } to { opacity: 1 } }
.cog-lock-box { background: var(--card); border-radius: var(--r-lg); padding: 30px 32px; max-width: 430px; text-align: center;
box-shadow: var(--sh-3); }
.cog-lock-box .mini-icon { margin: 0 auto 14px; }
.cog-lock-box h3 { font-size: var(--text-lg); color: var(--navy); margin-bottom: 10px; }
.cog-lock-box p { font-size: var(--text-md); color: var(--ink-2); line-height: 1.6; margin-bottom: 10px; }
.cog-lock-box .btn-primary { margin-top: 12px; }
.heat-cell.heat-foco { outline: 2px solid var(--navy); outline-offset: -2px; }
.fam-card { padding: 16px 18px; transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.fam-card:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
.fam-card:focus-visible { outline: 3px solid rgba(14,138,134,.24); outline-offset: 2px; }
.fam-mas { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 600;
color: var(--teal-txt); padding-top: 10px; border-top: 1px solid var(--line-soft); }
.fam-card:hover .fam-mas { color: var(--navy); }
.fam-grid { align-items: start; }
.fam-more { margin: 10px 0 8px; }
.fam-card .fam-hint { display: none; }
@media (hover: hover) {
.fam-more {
max-height: 0; opacity: 0; margin: 0; overflow: hidden;
transition: max-height 0.24s ease, opacity 0.2s ease, margin 0.24s ease;
}
.fam-card:hover .fam-more, .fam-card:focus-within .fam-more { max-height: 1200px; opacity: 1; margin: 10px 0 8px; }
.fam-card .fam-hint { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-sm); color: var(--ink-3); }
.fam-card:hover .fam-hint, .fam-card:focus-within .fam-hint { display: none; }
.fam-card .fam-mas { display: none; }
.fam-card:hover .fam-mas, .fam-card:focus-within .fam-mas { display: flex; }
}
@media (prefers-reduced-motion: reduce) { .fam-more { transition: none; } }
.pill.bajo-norma { background: var(--surface-subtle); color: var(--ink-3); font-weight: 600; font-size: var(--text-sm); }
.family-reading-guide {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
margin: -4px 0 14px; padding: 10px 12px; border: 1px solid var(--line);
border-radius: var(--r-sm); background: var(--bg);
}
.family-reading-guide > b {
color: var(--navy); font-size: var(--text-sm); margin-right: 2px;
}
.family-reading-guide > span {
display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px;
border-radius: var(--r-pill); background: var(--card); color: var(--ink-3);
font-size: var(--text-sm); line-height: 1.25; border: 1px solid var(--line-soft);
}
.family-reading-guide i {
width: 8px; height: 8px; border-radius: 50%; flex: none;
background: var(--guide-color);
}
.family-reading-guide strong { color: var(--ink-2); font-weight: 700; }
.family-reading-guide em { color: var(--ink-3); font-style: normal; }
.family-profile-summary-card { align-self: start; }
.family-profile-insight {
display: block; width: 100%; margin-top: var(--space-2);
color: inherit; font: inherit; text-align: left;
}
.family-profile-insight-head {
display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
}
.family-profile-insight-title { display: flex; flex: 1 1 11rem; min-width: 11rem;
flex-direction: column; gap: 1px; }
.family-profile-insight-title small {
color: var(--ink-3); font-size: var(--text-sm); font-weight: 700;
letter-spacing: .035em; text-transform: uppercase;
}
.family-profile-insight-title b { color: var(--navy); font-size: var(--text-md); line-height: 1.35; }
.family-sub-insight {
background: var(--surface-subtle); cursor: default;
}
.family-sub-insight .family-profile-insight-title b {
font-weight: 600;
}
.family-profile-insight .fam-more > p {
color: var(--ink); font-size: var(--text-sm); line-height: 1.58; margin: 0;
}
.family-peer-description {
display: flex; align-items: flex-start; gap: 6px; margin-top: 9px !important;
padding-top: 9px; border-top: 1px dashed rgba(41,63,82,.14);
color: var(--ink-2) !important;
}
.family-peer-description svg { flex: none; margin-top: 3px; color: var(--navy); }
@media (max-width: 720px) {
.family-reading-guide { align-items: stretch; }
.family-reading-guide > b { width: 100%; }
.family-reading-guide > span { width: 100%; border-radius: var(--r-sm); }
}
.sec { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 12px;
box-shadow: var(--sh-1); overflow: hidden; }
.sec-sum { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer;
list-style: none; min-height: 52px; transition: background 0.15s, box-shadow 0.15s; }
.sec-sum::-webkit-details-marker { display: none; }
.sec-ic { flex: none; }
.sec-tit { font-weight: 700; color: var(--navy); font-size: var(--text-lg); white-space: nowrap; }
.sec-tit { white-space: normal; }
.sec-sum { flex-wrap: wrap; }
.sec-res { font-size: var(--text-md); color: var(--ink-2); }
.sec-hover { display: none; font-size: var(--text-sm); color: var(--ink-3); margin-left: auto; font-style: italic; }
.sec-caret { margin-left: auto; color: var(--ink-3); transition: transform 0.18s; font-size: var(--text-md); flex: none; }
.sec-hover + .sec-caret { margin-left: 12px; }
.sec[open] .sec-caret { transform: rotate(180deg); }
.sec:not([open]) .sec-sum:hover { background: var(--surface-subtle); }
@media (hover: hover) { .sec:not([open]) .sec-sum:hover .sec-hover { display: inline; } }
.sec-body { padding: 6px 18px 18px; border-top: 1px solid var(--line-soft); }
.prueba-sec-estado { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
.res-plegar-todo { display: flex; justify-content: flex-end; margin-bottom: var(--space-3); }
.sec-link { display: block; width: 100%; padding: 0; text-align: left; font: inherit; cursor: pointer; }
.sec-link .sec-caret { transition: transform 0.18s var(--ease); }
.sec-link:hover .sec-sum { background: var(--surface-subtle); }
.sec-link:hover .sec-caret { transform: translateX(4px); }
@media (hover: hover) { .sec-link:hover .sec-hover { display: inline; } }
.sec-body .card { box-shadow: none; border: 1px solid var(--line-soft); }
.st-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.kpi-row { display: flex; gap: 10px; flex-wrap: wrap; }
.kpi-chip { flex: 1; min-width: 150px; min-height: 56px; display: flex; align-items: center; gap: 12px;
padding: 10px 14px; background: var(--card); border: 1px solid var(--line);
border-radius: var(--r-md); cursor: pointer; font: inherit; text-align: left;
transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.kpi-chip:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
.kc-n { font-size: var(--text-2xl); font-weight: 700; color: var(--kct, var(--kc)); line-height: 1; flex: none; }
.kc-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kc-l { font-size: var(--text-sm); font-weight: 700; color: var(--ink); }
.kc-h { font-size: var(--text-sm); color: var(--ink-3); }
@media (hover: hover) { .kc-h { display: none; } }
.kpi-row-levels .kpi-chip { min-width: 138px; gap: 6px; padding-inline: 8px; }
.kpi-row-levels .kc-n { font-size: var(--text-xl); }
.kpi-row-levels .kc-l { overflow-wrap: normal; word-break: normal; }
@media (hover: hover) { .kpi-chip:hover .kc-h { display: block; } }
.nav-item { min-height: 46px; font-size: var(--text-lg); }
.btn-primary, .btn-outline { min-height: 44px; }
.stu-row { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line);
border-radius: var(--r-md); padding: 10px 14px 10px 18px; margin-bottom: 8px;
cursor: pointer; min-height: 56px; transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); flex-wrap: wrap; }
.stu-row[style*="--sr"] { border-left: 5px solid var(--sr); padding-left: 14px; }
.stu-row:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
.sr-quien { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 1px; }
.lista-parecidos { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-sm); font-weight: 700;
letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.sr-quien b { color: var(--navy); font-size: var(--text-lg); }
.sr-quien .muted { font-size: var(--text-sm); }
.sr-hover { display: none; flex-basis: 100%; order: 9; font-size: var(--text-sm); color: var(--ink-3);
padding-top: 6px; border-top: 1px dashed var(--line-soft); }
@media (hover: hover) { .stu-row:hover .sr-hover { display: block; } }
.sr-pc { font-size: var(--text-xl); color: var(--navy); min-width: 34px; text-align: right; }
.test-strip { display: flex; flex-wrap: wrap; padding: 0; overflow: hidden; margin-bottom: 14px; }
.ts-item { flex: 1 1 280px; min-width: 0; padding: 12px 16px; border-left: 1px solid var(--line); background: var(--card); }
.ts-item:first-child { border-left: 0; }
.test-domain-groups { display: grid; gap: var(--space-5); }
.test-domain-group { min-width: 0; }
.test-domain-group-head {
display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3);
padding: var(--space-2) var(--space-3); background: var(--card);
}
.test-domain-group-head > div { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.test-domain-group-head b { color: var(--ink); font-size: var(--text-sm); }
.test-domain-group-head small { color: var(--ink-3); font-size: var(--text-sm); }
.test-domain-grid { gap: var(--space-3); }
.pill-neutral { background: var(--surface-subtle); color: var(--ink-2); font-size: var(--text-sm); }
.result-unavailable {  }
.ts-fecha { font-size: var(--text-sm); color: var(--ink-2); font-weight: 600; margin-top: 1px; }
.ts-gap {
flex-basis: 100%; display: flex; gap: 7px; align-items: flex-start;
padding: 8px 16px 9px; border-top: 1px solid var(--line-soft);
font-size: var(--text-sm); color: var(--ink-2); line-height: 1.5;
}
.ts-gap svg { flex: none; margin-top: 2px; }
.dom-pro { transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.dom-pro .domain-head h3 { text-wrap: balance; }
.dom-pro .dp-cifra { margin-top: auto; }
.dom-pro .dp-delta { min-height: 26px; margin-top: 4px; }
.dom-pro:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
.dp-h { display: none; padding-top: 8px; border-top: 1px dashed var(--line-soft); margin-bottom: 8px; }
@media (hover: hover) { .dom-pro:hover .dp-h { display: block; } }
.sec-sum { padding: 15px 18px; }
.sec-tit { font-size: var(--text-lg); }
.sec-res { font-size: var(--text-lg); color: var(--ink); line-height: 1.45; }
.sec-res .muted { color: var(--ink-2); font-size: inherit; }
.sec-hover { font-size: var(--text-md); color: var(--ink-2); }
.sec-caret { font-size: var(--text-lg); color: var(--ink-2); }
.sec-body { color: var(--ink); }
.sec-body .muted { color: var(--ink-2); }
.rector-panel .sec-sum {
min-height: var(--control-lg);
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
}
.rector-panel .sec-tit {
font-size: var(--text-lg);
line-height: var(--leading-ui);
}
.rector-panel .sec-res {
color: var(--ink-2);
font-size: var(--text-sm);
line-height: var(--leading-ui);
}
.rector-panel .sec-hover { display: none !important; }
.rector-panel .sec-caret {
font-size: var(--text-md);
color: var(--ink-2);
}
.rector-panel .kpi-row-levels .kc-l {
font-size: var(--text-sm);
line-height: 1.3;
}
.rector-panel .heat-label,
.rector-panel .heat-top {
font-size: var(--text-sm);
}
.kpi-chip { min-height: 64px; gap: 14px; }
.kc-n { font-size: var(--text-2xl); }
.kc-l { font-size: var(--text-md); }
.kpi-row-levels .kc-l { font-size: var(--text-sm); }
.kc-h { font-size: var(--text-sm); color: var(--ink-2); }
.stu-row { min-height: 60px; }
.sr-quien b { font-size: var(--text-lg); }
.sr-quien .muted { font-size: var(--text-sm); color: var(--ink-2); }
.sr-hover { font-size: var(--text-md); color: var(--ink-2); }
.sr-pc { font-size: var(--text-2xl); }
.stu-row .pill { font-size: var(--text-sm); }
.paginador { display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
gap: var(--space-3) var(--space-4); margin-top: var(--space-4); }
.paginador-n { color: var(--ink-2); font-size: var(--text-md); font-variant-numeric: tabular-nums; }
.paginador .btn-outline:disabled, .paginador .btn-outline:disabled:hover {
opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;
background: var(--card); border-color: var(--line);
}
@media (max-width: 420px) {
.paginador-n { order: -1; flex-basis: 100%; text-align: center; }
}
.dom-pro .domain-head h3 { font-size: var(--text-lg); }
.dom-pro .pill { font-size: var(--text-sm); }
.dp-h { font-size: var(--text-md); }
.dp-h .muted { color: var(--ink-2); }
.dp-h .delta { font-size: var(--text-md); }
.fam-mas { font-size: var(--text-sm); }
.al-row { background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--al);
border-radius: var(--r-md); margin-bottom: 8px; overflow: hidden; }
.al-sum { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px;
background: none; border: none; font: inherit; text-align: left; cursor: pointer; min-height: 58px;
transition: background 0.14s, box-shadow 0.15s; }
.al-row:not(.al-open) .al-sum:hover { background: var(--surface-subtle); }
.al-quien { display: flex; flex-direction: column; gap: 1px; min-width: 200px; }
.al-quien b { color: var(--navy); font-size: var(--text-lg); }
.al-sub { font-size: var(--text-sm); color: var(--ink-2); }
.al-hover { display: none; flex: 1; font-size: var(--text-md); color: var(--ink-2); }
@media (hover: hover) { .al-row:not(.al-open) .al-sum:hover .al-hover { display: block; } }
.al-sum > .pill { margin-left: auto; flex: none; font-size: var(--text-sm); }
.al-pc { font-size: var(--text-lg); color: var(--ink); flex: none; }
.al-caret { color: var(--ink-2); transition: transform 0.18s; flex: none; }
.al-open .al-caret { transform: rotate(180deg); }
.al-det { display: none; padding: 2px 16px 14px 60px; }
.al-open .al-det { display: block; }
.al-det p { font-size: var(--text-lg); color: var(--ink); line-height: 1.55; margin: 0 0 12px; }
.acc-bloque {
border: 1px solid var(--line);
border-radius: var(--r-sm);
padding: 11px 13px;
margin-top: 10px;
background: var(--bg);
}
.acc-head {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--text-sm);
color: var(--navy);
margin-bottom: 8px;
}
.acc-head svg { color: var(--navy); }
.acc-item {
display: flex;
gap: 9px;
align-items: flex-start;
padding: 7px 0;
border-top: 1px solid var(--line-soft);
}
.acc-head + .acc-item { border-top: 0; padding-top: 0; }
.acc-ico { width: 24px; height: 24px; border-radius: var(--r-sm); flex: none; margin-top: 1px; }
.acc-prop {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 8px;
}
.acc-prop[hidden], .acc-botones[hidden], .acc-cambiar[hidden] { display: none; }
.acc-prop-txt { flex: 1; min-width: 180px; font-size: var(--text-md); color: var(--ink-2); }
.acc-prop-txt b { color: var(--navy); }
.acc-prop .acc-ir { flex: none; font-size: var(--text-sm); padding: 7px 16px; }
.acc-bloque > .acc-cambiar { font-size: var(--text-sm); margin-top: 6px; }
.acc-paso { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.acc-paso .fld { margin-bottom: 10px; }
.acc-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
@media (max-width: 560px) { .acc-2col { grid-template-columns: minmax(0, 1fr); } }
.acc-botones { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.acc-botones .acc-add { font-size: var(--text-sm); padding: 8px 18px; }
.rec-cta {
display: flex;
align-items: flex-start;
gap: 12px;
flex-wrap: wrap;
background: var(--lv-esperado-bg);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 12px 14px;
}
.rec-cta .btn-primary { font-size: var(--text-sm); padding: 9px 16px; align-self: center; }
.plan-nuevo { margin-top: 14px; }
.plan-nuevo .plan-abrir { font-size: var(--text-sm); padding: 8px 14px; }
.plan-form {
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 16px 18px;
background: var(--bg);
}
.plan-form[hidden] { display: none; }
.plan-guia { font-size: var(--text-sm); color: var(--ink-2); margin: 0 0 14px; line-height: 1.5; }
.plan-form .fld { margin-bottom: 12px; }
.plan-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.plan-3col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.plan-form-section { margin:0 0 16px; padding:14px; border:1px solid var(--line); border-radius: var(--r-sm); background:var(--card); }
.plan-form-section > header { display:flex; align-items:flex-start; gap:9px; margin-bottom:12px; }
.plan-form-section > header > span {
width:25px; height:25px; display:grid; place-items:center; flex:none;
border-radius:50%; background:var(--info); color:#fff; font-size: var(--text-sm); font-weight:700;
}
.plan-form-section > header b { display:block; color:var(--navy); font-size: var(--text-md); }
.plan-form-section > header small { display:block; margin-top:2px; color:var(--ink-3); font-size: var(--text-sm); }
.plan-metric-grid { display:grid; grid-template-columns:1.25fr .7fr .7fr .8fr; gap:0 12px; }
.plan-activity-list { display:flex; flex-direction:column; gap:12px; }
.plan-actividad-item {
min-width:0; margin:0; padding:12px 13px 4px; border:1px solid var(--line);
border-radius: var(--r-sm); background:var(--bg);
}
.plan-actividad-item legend { padding:0 6px; color:var(--teal-txt); font-size: var(--text-sm); font-weight:750; }
.plan-ayuda {
font-size: var(--text-sm); color: var(--ink-3); font-style: italic;
margin: -6px 0 12px; min-height: 16px;
}
.plan-botones { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.plan-botones .plan-guardar { font-size: var(--text-sm); padding: 9px 18px; }
.story-coding-output { width: 100%; }
.story-coding-panel { margin-top: var(--space-3); }
.story-coding-content { width: 100%; min-width: 0; }
.story-coding-intro { margin: 0 0 var(--space-3); line-height: var(--leading-copy); }
.story-coding-recall {
min-width: 0;
margin: 0 0 var(--space-3);
padding: var(--space-3);
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: var(--card);
}
.story-coding-recall legend {
padding: 0 var(--space-2);
color: var(--navy);
font-size: var(--text-sm);
font-weight: var(--weight-bold);
}
.story-coding-transcript {
margin: 0 0 var(--space-3);
padding: var(--space-3);
border-radius: var(--r-sm);
background: var(--line-soft);
color: var(--ink-2);
font-size: var(--text-sm);
line-height: var(--leading-copy);
}
.story-coding-units { display: grid; gap: var(--space-2); }
.story-coding-units label,
.story-coding-central {
display: flex;
align-items: flex-start;
gap: var(--space-2);
color: var(--ink-2);
font-size: var(--text-sm);
line-height: var(--leading-ui);
}
.story-coding-units input,
.story-coding-central input { flex: none; margin-top: 2px; }
.story-coding-secondary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: start;
gap: var(--space-2);
margin-top: var(--space-4);
}
.story-coding-secondary > label { color: var(--ink-2); font-size: var(--text-sm); }
.story-coding-secondary select,
.story-coding-secondary input[type="number"] { width: 100%; min-height: 44px; margin-top: var(--space-1); }
.story-coding-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.story-coding-actions [data-story-coding-status],
.story-coding-actions [data-reading-coding-status] { font-size: var(--text-sm); }
.reading-coding-audio {
display: grid; grid-template-columns: minmax(220px, 1fr) minmax(180px, auto);
align-items: center; gap: var(--space-3); margin-bottom: var(--space-3);
padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--surface-subtle);
}
.reading-coding-audio audio { width: 100%; }
.reading-coding-audio:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.reading-audio-toolbar {
grid-column: 1 / -1; display: flex; align-items: end; gap: var(--space-2); flex-wrap: wrap;
padding-top: var(--space-3); border-top: 1px solid var(--line-soft);
}
.reading-audio-toolbar button { min-height: var(--control-lg); }
.reading-audio-toolbar label {
display: grid; gap: var(--space-1); color: var(--ink-2); font-size: var(--text-sm);
}
.reading-audio-toolbar select { min-width: 100px; min-height: var(--control-lg); }
.reading-audio-toolbar .reading-audio-loop {
display: flex; align-items: center; min-height: var(--control-lg); padding-inline: var(--space-2);
}
.reading-audio-analysis { grid-column: 1 / -1; min-width: 0; }
.reading-audio-analysis:empty { display: none; }
.reading-audio-analysis-head {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
margin-bottom: var(--space-2); color: var(--navy); font-size: var(--text-sm);
}
.reading-audio-analysis-scope {
margin: var(--space-3) 0 0; color: var(--ink-3); font-size: var(--text-sm);
line-height: var(--leading-copy);
}
.reading-audio-shortcuts { grid-column: 1 / -1; margin: 0; font-size: var(--text-sm); }
.reading-audio-analysis .brm-audio-waveform.is-interactive {
width: 100%;
cursor: crosshair;
}
.reading-audio-analysis .brm-audio-waveform.is-interactive:focus-visible {
outline: 2px solid var(--teal); outline-offset: 2px;
}
.reading-review-notice,
.reading-professional-interpretation {
margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3);
background: var(--line-soft);
color: var(--ink-2); font-size: var(--text-sm); line-height: var(--leading-copy);
}
.reading-boundaries {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: end; gap: var(--space-2); margin-bottom: var(--space-3);
}
.reading-boundaries label,
.reading-word-controls label,
.reading-insertion-controls label {
display: grid; gap: var(--space-1); color: var(--ink-2); font-size: var(--text-sm);
}
.reading-boundaries input { width: 110px; min-height: 44px; }
.reading-boundaries > .muted { grid-column: 1 / -1; font-size: var(--text-sm); }
.reading-token-list {
display: flex; flex-wrap: wrap; gap: var(--space-1);
padding: var(--space-3); border: 1px solid var(--line);
border-radius: var(--r-sm); background: var(--card); line-height: var(--leading-copy);
}
.reading-token {
min-height: var(--control-lg); padding: var(--space-1) var(--space-2);
border: 1px solid transparent; border-radius: var(--r-sm);
background: transparent; color: var(--ink); font: inherit; cursor: pointer;
transition: border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
}
.reading-token::before { margin-right: 3px; font-weight: var(--weight-bold); }
.reading-token[data-status="omission"] { background: var(--surface-subtle); text-decoration: line-through; }
.reading-token[data-status="omission"]::before { content: "−"; }
.reading-token[data-status="substitution"] { background: var(--surface-info); }
.reading-token[data-status="substitution"]::before { content: "≠"; }
.reading-token[data-status="self-correction"] { background: var(--surface-action); }
.reading-token[data-status="self-correction"]::before { content: "↺"; }
.reading-token.is-selected { border-color: var(--teal); outline: 2px solid transparent; }
.reading-token:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.reading-word-editor,
.reading-insertions {
margin-top: var(--space-3); padding: var(--space-3);
border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--line-soft);
}
.reading-word-editor > p,
.reading-insertions > p { margin: 0 0 var(--space-2); color: var(--ink-2); font-size: var(--text-sm); }
.reading-word-controls {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2);
}
.reading-word-controls select,
.reading-word-controls input,
.reading-insertion-controls select,
.reading-insertion-controls input { width: 100%; min-height: 44px; }
.reading-word-controls label[hidden] { display: none; }
.reading-insertion-controls {
display: grid; grid-template-columns: minmax(150px, 1fr) minmax(180px, 2fr) auto;
align-items: end; gap: var(--space-2);
}
.reading-insertion-list { display: grid; gap: var(--space-1); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.reading-insertion-list li { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-2); font-size: var(--text-sm); }
.reading-insertion-list button {
width: var(--control-lg); height: var(--control-lg); border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--card); color: var(--ink-2); cursor: pointer;
}
.reading-secondary-request {
display: flex; align-items: flex-start; gap: var(--space-2);
margin: 0 0 var(--space-3); color: var(--ink-2); font-size: var(--text-sm);
}
.reading-family-recommendations {
margin: var(--space-2) 0 0; padding-left: var(--space-5);
color: var(--ink-2); font-size: var(--text-sm); line-height: var(--leading-copy);
}
@media (prefers-reduced-motion: reduce) {
.reading-token { transition: none; }
}
.reading-coding-notes {
display: grid; gap: var(--space-1); margin-top: var(--space-3);
color: var(--ink-2); font-size: var(--text-sm);
}
.reading-coding-notes textarea {
width: 100%; min-height: 72px; resize: vertical; font: inherit; color: var(--ink);
padding: var(--space-2) var(--space-3); border: 1px solid var(--line);
border-radius: var(--r-sm); background: var(--card);
}
.plan-item {
border: 1px solid var(--line);
border-radius: var(--r-sm);
padding: 12px 14px;
background: var(--card);
}
.plan-item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.plan-item-head b { font-size: var(--text-md); color: var(--navy); }
.plan-campo { font-size: var(--text-md); color: var(--ink); margin: 0 0 5px; line-height: 1.5; }
.plan-campo > span {
display: inline-block; min-width: 74px;
font-size: var(--text-sm); font-weight: 700; text-transform: uppercase;
letter-spacing: 0.05em; color: var(--ink-3); margin-right: 6px;
}
.plan-mov {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
font-size: var(--text-md); color: var(--ink); margin: 8px 0 0;
padding: 8px 10px; border-radius: var(--r-sm); background: var(--bg);
font-variant-numeric: tabular-nums;
}
.plan-mov > span:first-child {
min-width: 74px; font-size: var(--text-sm); font-weight: 700; text-transform: uppercase;
letter-spacing: 0.05em; color: var(--ink-3);
}
.plan-flecha { font-size: var(--text-lg); line-height: 1; }
.plan-cierre {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft);
}
.plan-cierre .rec-estado {
font: inherit; font-size: var(--text-sm); padding: 5px 8px;
border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--navy); font-weight: 600;
}
.rec-measurable { display:flex; flex-direction:column; gap:12px; }
.rec-measurable section { padding:11px 12px; border:1px solid var(--line-soft); border-radius: var(--r-sm); background:var(--bg); }
.rec-measurable h4, .rec-measure-form h4 { margin:0 0 6px; color:var(--navy); font-size: var(--text-sm); }
.rec-observation p, .rec-objective > p { margin:0; color:var(--ink); font-size: var(--text-sm); line-height:1.5; }
.rec-observation small { display:block; margin-top:5px; color:var(--ink-3); font-size: var(--text-sm); line-height:1.4; }
.rec-metric-summary { display:grid; grid-template-columns:2fr repeat(3,.65fr); gap:7px; margin-top:10px; }
.rec-metric-summary > span { padding:7px 8px; border-radius: var(--r-sm); background:var(--card); min-width:0; }
.rec-metric-summary small { display:block; color:var(--ink-3); font-size: var(--text-sm); text-transform:uppercase; letter-spacing:.04em; }
.rec-metric-summary b { display:block; margin-top:2px; color:var(--ink); font-size: var(--text-sm); line-height:1.3; }
.rec-progress { height:8px; margin-top:9px; overflow:hidden; border-radius: var(--r-pill); background:var(--line); }
.rec-progress > span { display:block; height:100%; border-radius:inherit; background:var(--teal); }
.rec-progress-caption { margin-top:4px; color:var(--ink-3); font-size: var(--text-xs); }
.rec-progress-caption b { color:var(--teal-txt); }
.rec-success { margin:7px 0 0; color:var(--ink-2); font-size: var(--text-sm); line-height:1.45; }
.rec-activities > div { display:flex; flex-direction:column; gap:8px; }
.rec-activities article { display:flex; align-items:flex-start; gap:8px; }
.rec-activities article > span {
width:22px; height:22px; display:grid; place-items:center; flex:none;
border-radius:50%; background:var(--info); color:#fff; font-size: var(--text-sm); font-weight:700;
}
.rec-activities article > div { min-width:0; flex:1; }
.rec-activities article b { color:var(--ink); font-size: var(--text-sm); }
.rec-activities article p { margin:2px 0; color:var(--ink-2); font-size: var(--text-sm); line-height:1.45; }
.rec-activities article small, .rec-activities article em { display:block; color:var(--ink-3); font-size: var(--text-sm); font-style:normal; }
.rec-measurement p { margin:3px 0; color:var(--ink-2); font-size: var(--text-sm); line-height:1.42; }
.rec-measurement-history article {
display:grid; grid-template-columns:auto 1fr auto; gap:8px; padding:7px 0; border-top:1px solid var(--line-soft);
}
.rec-measurement-history article b { color:var(--navy); font-size: var(--text-sm); }
.rec-measurement-history article span, .rec-measurement-history article small { color:var(--ink-2); font-size: var(--text-sm); }
.rec-measurement-history article small { grid-column:2; }
.rec-measurement-history article em { color:var(--teal-txt); font-size: var(--text-sm); font-style:normal; font-weight:700; }
.rec-measure-form { padding:12px; border:1px dashed var(--teal); border-radius: var(--r-sm); background:var(--surface-action); }
.rec-measure-grid { display:grid; grid-template-columns:.65fr 1fr 1.25fr; gap:0 10px; }
.rec-measure-form .fld { margin-bottom:8px; }
.rec-measure-msg { margin-left:8px; font-size: var(--text-sm); }
.report-measurable-plans { margin:26px 0; }
.report-measurable-plans > .muted { margin:-3px 0 11px; font-size: var(--text-sm); line-height: var(--leading-ui); }
.report-measurable-plans > article {
margin:0 0 13px; padding:13px 14px; border:1px solid var(--line);
border-radius:var(--r-sm); background:var(--card);
}
.report-measurable-plans article > header { display:flex; align-items:flex-start; gap:9px; margin-bottom:8px; }
.report-measurable-plans article > header > span { width:23px; height:23px; display:grid; place-items:center; flex:none;
border-radius:50%; background:var(--teal); color:#fff; font-weight:700; font-size: var(--text-sm); line-height: var(--leading-ui); }
.report-measurable-plans article > header > div { flex:1; }
.report-measurable-plans article > header b { display:block; color:var(--navy); font-size: var(--text-lg); line-height: var(--leading-tight); }
.report-measurable-plans article > header small { display:block; color:var(--ink-3); font-size: var(--text-sm); line-height: var(--leading-ui); }
.report-measurable-plans article > header strong { color:var(--teal-txt); font-size: var(--text-sm); line-height: var(--leading-ui); }
.report-measurable-plans article > p { margin:5px 0; color:var(--ink-2); }
.report-measurable-plans article > p em { display:inline-block; min-width:75px; color:var(--ink-3);
font-style:normal; font-weight:700; text-transform:uppercase; }
.report-plan-metric { display:grid; grid-template-columns:2fr repeat(3,.6fr); gap:6px; margin:8px 0; }
.report-plan-metric span { padding:6px 7px; border-radius: var(--r-sm); background:var(--bg); color:var(--ink); font-size: var(--text-sm); line-height: var(--leading-ui); }
.report-plan-metric small { display:block; margin-bottom:2px; color:var(--ink-3); text-transform:uppercase; font-size: var(--text-sm); line-height: var(--leading-ui); }
.report-measurable-plans ol { margin:8px 0; padding-left:20px; }
.report-measurable-plans li { margin:4px 0; color:var(--ink-2); }
.report-measurable-plans li small { display:block; color:var(--ink-3); font-size: var(--text-sm); line-height: var(--leading-ui); }
.hist-new-rec { margin-bottom: var(--space-4); }
.hist-new-rec-intro {
margin: 0;
color: var(--ink-2);
font-size: var(--text-sm);
line-height: var(--leading-copy);
}
.sec-action {
flex: none;
margin-left: auto;
min-height: var(--control-md);
padding-inline: var(--space-4);
}
.sec-action + .sec-caret { margin-left: 0; }
.hist-new-rec-picker {
display: grid;
grid-template-columns: minmax(220px, 1fr) auto;
align-items: end;
gap: var(--space-4);
margin-top: var(--space-3);
}
.hist-new-rec-picker[hidden] { display: none; }
.hist-new-rec-picker .fld { margin: 0; }
.hist-new-rec-actions {
display: flex;
align-items: center;
gap: var(--space-3);
min-height: var(--control-lg);
}
.hist-new-rec-forms > [data-hist-rec-domain]:not([hidden]) {
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--line-soft);
}
.hist-new-rec-forms .plan-nuevo { margin-top: 0; }
.hist-linea { display: flex; flex-direction: column; gap: 14px; }
.hist-fila { display: grid; grid-template-columns: 84px 26px 1fr; gap: 10px; align-items: start; }
.hist-fecha { font-size: var(--text-sm); color: var(--ink-3); padding-top: 5px; font-variant-numeric: tabular-nums; }
.hist-ico { width: 26px; height: 26px; border-radius: var(--r-sm); flex: none; margin-top: 1px; }
.hist-cuerpo { min-width: 0; }
.hist-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 4px; }
.hist-meta b { font-size: var(--text-sm); color: var(--navy); }
.hist-fila:not(.hist-rec) .hist-cuerpo { padding-left: 2px; }
@media (max-width: 640px) {
.plan-2col, .plan-3col { grid-template-columns: minmax(0, 1fr); }
.story-coding-secondary { grid-template-columns: minmax(0, 1fr); }
.story-coding-actions .btn-primary { width: 100%; justify-content: center; }
.reading-coding-audio, .reading-boundaries, .reading-word-controls,
.reading-insertion-controls { grid-template-columns: minmax(0, 1fr); }
.plan-metric-grid, .rec-metric-summary, .rec-measure-grid, .report-plan-metric { grid-template-columns:minmax(0,1fr); }
[data-sec="histPlan"] > .sec-sum { flex-wrap: wrap; }
[data-sec="histPlan"] > .sec-sum .sec-tit { white-space: normal; min-width: 0; flex: 1; }
[data-sec="histPlan"] > .sec-sum .sec-res { order: 3; width: 100%; }
[data-sec="histPlan"] > .sec-sum .sec-action { order: 4; width: 100%; justify-content: center; margin-left: 0; }
[data-sec="histPlan"] > .sec-sum .sec-caret { margin-left: 0; }
.hist-new-rec-picker { grid-template-columns: minmax(0, 1fr); }
.hist-new-rec-actions { flex-wrap: wrap; }
.hist-fila { grid-template-columns: 26px 1fr; }
.hist-fecha { grid-column: 1 / -1; padding-top: 0; }
}
.id-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 26px; }
.id-h {
font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--teal-txt); margin: 12px 0 6px;
}
.id-cols > div > .id-h:first-child { margin-top: 0; }
.id-form { border-top: 1px solid var(--line-soft); margin-top: 14px; padding-top: 14px; }
.id-form[hidden] { display: none; }
.piar-sinsustento {
display: flex; gap: 10px; align-items: flex-start;
margin-top: 8px; padding: 11px 14px;
border-radius: var(--r-sm);
border-left: 3px solid var(--sev-ambar-color);
background: var(--sev-ambar-bg); color: var(--sev-ambar-txt);
font-size: var(--text-sm); line-height: var(--leading-copy);
}
.piar-sinsustento[hidden] { display: none; }
.piar-ss-i { flex: none; margin-top: 1px; color: var(--sev-ambar-txt); }
.piar-ss-i svg { display: block; }
.piar-ss-cuerpo { min-width: 0; }
.piar-ss-que { display: block; font-weight: 700; margin-bottom: 3px; }
.piar-ss-por { margin: 0 0 6px; }
.piar-ss-alt { margin: 0; }
.piar-ss-alt b { font-weight: 700; }
.piar-ss-cat {
display: block; margin-top: 4px; padding-left: 9px;
border-left: 2px solid var(--sev-ambar-color);
font-size: var(--text-sm);
}
@media (max-width: 420px) {
.piar-sinsustento { flex-direction: column; gap: 6px; padding: 10px 12px; }
}
.piar-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.piar-hitos { display: flex; flex-direction: column; gap: 10px; }
.piar-hito {
display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start;
padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
}
.piar-n {
width: 30px; height: 30px; border-radius: var(--r-sm); color: #fff; flex: none;
display: grid; place-items: center; font-size: var(--text-md); font-weight: 700;
}
.piar-h-cuerpo { min-width: 0; }
.piar-h-tit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.piar-h-tit b { font-size: var(--text-md); color: var(--navy); }
.piar-h-acc { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.piar-h-acc select {
font: inherit; font-size: var(--text-sm); padding: 5px 8px;
border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--navy); font-weight: 600;
}
.piar-firmas { display: flex; gap: 12px; flex-wrap: wrap; }
.piar-firma { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-sm); color: var(--ink-2); cursor: pointer; }
.piar-seg { border-left: 2px solid var(--line); padding: 6px 0 6px 12px; margin-bottom: 8px; }
.piar-seg-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.piar-enrolar, .piar-nuevo {
border-top: 1px solid var(--line-soft); margin-top: 14px; padding-top: 14px;
}
.dua-lista { display: flex; flex-direction: column; gap: 18px; }
.dua-bloque { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; background: var(--card); }
.dua-cab { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 10px; }
.dua-cab b { color: var(--navy); font-size: var(--text-lg); }
.dua-cab .mini-icon { width: 28px; height: 28px; border-radius: var(--r-sm); flex: none; }
.dua-pauta { padding: 9px 0; border-top: 1px solid var(--line-soft); }
.dua-pauta-cab { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 3px; }
.dua-pauta-cab b { font-size: var(--text-md); color: var(--ink); }
.dua-pauta p { font-size: var(--text-md); color: var(--ink-2); margin: 0; line-height: 1.5; }
.dua-page-head h1 span { color: var(--teal-txt); font-size: var(--text-sm); margin-left: 5px; }
.dua-eyebrow { display: flex; align-items: center; gap: 6px; color: var(--teal-txt); font-size: var(--text-sm); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 5px; }
.dua-scope-filter label > span { display: block; color: var(--ink-3); font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.dua-context { display: grid; grid-template-columns: minmax(220px,.7fr) 1.3fr; gap: 20px; align-items: center; background: var(--lv-excepcional-esperado-alto-bg); border: 1px solid color-mix(in srgb, var(--lv-excepcional-esperado-alto) 24%, transparent); border-radius: var(--r-md); padding: 15px 18px; margin-bottom: 18px; }
.dua-context div { display: flex; flex-direction: column; gap: 2px; }
.dua-context b { color: var(--navy); font-size: var(--text-md); }
.dua-context span, .dua-context p { color: var(--ink-2); font-size: var(--text-sm); margin: 0; line-height: 1.45; }
.dua-kpis { margin-bottom: 18px; }
.kpi-chip.static { cursor: default; }
.dua-layout { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(290px,.75fr); gap: 18px; margin-bottom: 28px; }
.dua-results .muted { margin: -4px 0 8px; font-size: var(--text-sm); }
.dua-legend { display: flex; justify-content: center; gap: 18px; color: var(--ink-3); font-size: var(--text-sm); }
.dua-legend span { display: flex; align-items: center; gap: 6px; }
.dua-legend i { width: 18px; height: 5px; border-radius: var(--r-sm); }
.dua-legend i.norm { height: 0; border-top: 2px dashed var(--ink-adorno); border-radius: 0; }
.dua-priority { align-self: stretch; }
.dua-rank { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; border-top: 1px solid var(--line-soft); background: transparent; padding: 12px 2px; text-align: left; color: var(--ink); }
.dua-rank:hover { background: var(--bg); }
.dua-rank-n { width: 25px; height: 25px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--lv-excepcional-esperado-alto-bg); color: var(--teal-txt); font-weight: 700; font-size: var(--text-sm); }
.dua-rank-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dua-rank-main b { font-size: var(--text-sm); }
.dua-rank-main small { color: var(--ink-3); font-size: var(--text-sm); margin-top: 2px; }
.dua-priority-note { font-size: var(--text-sm); margin: 10px 0 0; line-height: 1.45; }
.dua-section-head { display: flex; justify-content: space-between; align-items: end; margin: 0 0 13px; }
.dua-section-head h2 { color: var(--navy); font-size: var(--text-lg); }
.dua-section-head p { color: var(--ink-3); font-size: var(--text-sm); margin: 3px 0 0; }
.dua-opportunities { display: grid; gap: 16px; margin-bottom: 24px; }
.dua-opportunity { scroll-margin-top: 88px; }
.dua-op-head { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.dua-op-head > div { flex: 1; }
.dua-op-head h3 { font-size: var(--text-lg); margin-top: 1px; }
.dua-order { color: var(--ink-3); font-size: var(--text-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dua-evidence { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 12px; }
.dua-evidence > div { background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 10px 12px; display: flex; flex-direction: column; min-width: 0; }
.dua-evidence b { color: var(--navy); font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dua-evidence span { color: var(--ink-3); font-size: var(--text-sm); margin-top: 2px; }
.dua-rec { display: flex; gap: 10px; padding: 13px 15px; background: var(--lv-excepcional-esperado-alto-bg); border-radius: var(--r-sm); color: var(--teal-txt); margin-bottom: 12px; }
.dua-rec > span { flex: none; margin-top: 1px; }
.dua-rec b { font-size: var(--text-sm); }
.dua-rec p { color: var(--ink-2); font-size: var(--text-sm); line-height: 1.5; margin: 3px 0 0; }
.dua-opportunity .acc-bloque { margin-top: 10px; }
.dua-sources { border: 1px solid var(--line); border-radius: var(--r-sm); margin: 10px 0 12px; background: var(--card); }
.dua-sources summary { display: flex; align-items: center; gap: 7px; padding: 10px 12px; color: var(--navy); font-size: var(--text-sm); font-weight: 700; cursor: pointer; list-style: none; }
.dua-sources summary::-webkit-details-marker { display: none; }
.dua-sources summary::after { content: '▾'; margin-left: auto; color: var(--ink-3); transition: transform .16s; }
.dua-sources[open] summary::after { transform: rotate(180deg); }
.dua-sources > div { border-top: 1px solid var(--line-soft); padding: 4px 10px 8px; }
.dua-sources a { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: start; padding: 8px 3px; color: var(--ink); border-bottom: 1px solid var(--line-soft); }
.dua-sources a:last-child { border-bottom: 0; }
.dua-sources a:hover b { color: var(--teal-txt); }
.dua-sources a > span:first-child { color: var(--teal-txt); }
.dua-sources a span { display: flex; flex-direction: column; }
.dua-sources a b { font-size: var(--text-sm); }
.dua-sources a small { color: var(--ink-3); font-size: var(--text-sm); line-height: 1.4; margin-top: 2px; }
.dua-sources a i { color: var(--ink-3); font-style: normal; }
.dua-library { margin-bottom: 18px; }
.dua-library > .muted { margin: -4px 0 13px; font-size: var(--text-sm); }
.dua-library-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.dua-library-grid > a { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 9px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 12px; color: var(--ink); background: var(--card); }
.dua-library-grid > a:hover { border-color: var(--teal-txt); background: var(--lv-excepcional-esperado-alto-bg); }
.dua-library-grid > a > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.dua-library-grid b { font-size: var(--text-sm); line-height: 1.35; }
.dua-library-grid small { color: var(--ink-3); font-size: var(--text-sm); margin-top: 3px; }
.dua-library-grid em { color: var(--teal-txt); font-size: var(--text-sm); font-style: normal; font-weight: 700; margin-top: 5px; }
.dua-library-grid > a > i { color: var(--ink-3); font-style: normal; }
.dua-index-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 13px; }
.dua-courses { margin-top: 4px; }
.dua-courses > .muted { margin: -4px 0 12px; font-size: var(--text-sm); }
.dua-course-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.dua-course-grid button { border: 1px solid var(--line); background: var(--card); border-radius: var(--r-sm); padding: 11px 12px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; text-align: left; color: var(--ink); }
.dua-course-grid button:hover { border-color: var(--teal-txt); background: var(--lv-excepcional-esperado-alto-bg); }
.dua-course-grid button > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.dua-course-grid button b { font-size: var(--text-sm); }
.dua-course-grid button small { color: var(--ink-3); font-size: var(--text-sm); }
.dua-course-risk { text-align: center; display: flex; flex-direction: column; }
.dua-course-risk b { color: var(--navy); font-size: var(--text-lg) !important; }
.edss-page-head { align-items: center; margin-bottom: 16px; }
.edss-page-head h1 span { color: var(--teal-txt); font-size: var(--text-sm); }
.edss-scope {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 12px 14px; margin-bottom: 12px; background: var(--card);
border: 1px solid var(--line); border-radius: var(--r-md);
}
.edss-scope-label { color: var(--ink-3); font-size: var(--text-sm); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.edss-levels { display: flex; padding: 3px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line-soft); }
.edss-levels button {
border: 0; background: transparent; color: var(--ink-2); border-radius: var(--r-sm);
padding: 7px 11px; font-size: var(--text-sm); font-weight: 650;
}
.edss-levels button.active { background: var(--card); color: var(--navy); box-shadow: var(--sh-1); }
.edss-entity { margin-left: auto; min-width: min(100%, 290px); }
.edss-entity span { display: block; margin-bottom: 3px; color: var(--ink-3); font-size: var(--text-sm); font-weight: 700; }
.edss-entity select { width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); padding: 8px 10px; color: var(--ink); font: inherit; font-size: var(--text-sm); }
.edss-student-search { display: flex; align-items: end; gap: 6px; margin-left: auto; }
.edss-student-search label { min-width: 250px; }
.edss-student-search span { display: block; margin-bottom: 3px; color: var(--ink-3); font-size: var(--text-sm); font-weight: 700; }
.edss-student-search input { width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); padding: 8px 10px; color: var(--ink); font: inherit; font-size: var(--text-sm); }
.edss-student-search + .edss-entity { margin-left: 0; }
.edss-tabs {
position: sticky; top: 0; z-index: 7; display: flex; gap: 4px; overflow-x: auto;
margin: 0 0 18px; padding: 5px; background: var(--bg);
border: 1px solid var(--line); border-radius: var(--r-md);
}
.edss-tabs button {
display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1;
min-width: max-content; border: 0; border-radius: var(--r-sm); padding: 9px 12px;
color: var(--ink-3); background: transparent; font-size: var(--text-sm); font-weight: 700;
}
.edss-tabs button.active { color: #fff; background: var(--navy); box-shadow: var(--sh-1); }
.edss-tabs em {
min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center;
border-radius: var(--r-pill); background: rgba(255,255,255,.2); font-size: var(--text-sm); font-style: normal;
}
.edss-content { min-height: 400px; }
.edss-brief {
display: grid; grid-template-columns: minmax(0,1.45fr) minmax(280px,.65fr);
overflow: hidden; margin-bottom: 14px; color: #fff;
border-radius: var(--r-lg); background: var(--navy);
box-shadow: var(--sh-1);
}
.edss-brief-main { padding: 24px 26px; }
.edss-brief-main > span { display: flex; align-items: center; gap: 7px; color: var(--surface-action); font-size: var(--text-sm); font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.edss-brief h2 { max-width: 780px; margin: 10px 0 8px; color: #fff; font-size: var(--text-xl); line-height: 1.42; }
.edss-brief-main > p { margin: 0; color: rgba(255,255,255,.78); font-size: var(--text-sm); line-height: 1.55; }
.edss-confidence { display: flex; align-items: center; gap: 6px; margin-top: 15px; color: var(--surface-action); font-size: var(--text-sm); }
.edss-brief-action { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 21px; background: rgba(255,255,255,.1); border-left: 1px solid rgba(255,255,255,.15); }
.edss-brief-action small { color: var(--surface-action); font-size: var(--text-sm); font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.edss-brief-action b { font-size: var(--text-sm); line-height: 1.5; }
.edss-brief-action .btn-primary { align-self: flex-start; margin-top: 4px; background: var(--card); color: var(--navy); }
.edss-questions {
display: grid; grid-template-columns: 220px 1fr; gap: 13px 18px; margin-bottom: 14px;
padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
}
.edss-questions h3 { color: var(--navy); font-size: var(--text-md); }
.edss-questions > div:first-child p { margin: 3px 0 0; color: var(--ink-3); font-size: var(--text-sm); line-height: 1.4; }
.edss-question-chips { display: flex; gap: 6px; align-items: flex-start; overflow-x: auto; padding-bottom: 2px; }
.edss-question-chips button {
flex: none; max-width: 210px; padding: 7px 10px; color: var(--ink-2); background: var(--bg);
border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--text-sm); line-height: 1.3; text-align: left;
}
.edss-question-chips button.active { color: var(--teal-txt); border-color: var(--teal); background: var(--lv-excepcional-esperado-alto-bg); font-weight: 700; }
.edss-answer {
grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
border-radius: var(--r-sm); background: var(--surface-action); color: var(--teal-txt);
}
.edss-answer span { flex: none; margin-top: 1px; }
.edss-answer p { margin: 0; color: var(--ink); font-size: var(--text-sm); line-height: 1.55; font-weight: 520; }
.edss-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.edss-kpis > div { padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.edss-kpis span { display: block; color: var(--navy); font-size: var(--text-xl); font-weight: 750; line-height: 1.1; }
.edss-kpis b { display: block; margin-top: 4px; color: var(--ink); font-size: var(--text-sm); }
.edss-kpis small { display: block; margin-top: 2px; color: var(--ink-3); font-size: var(--text-sm); }
.edss-overview-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 14px; }
.edss-overview-grid .card { margin: 0; }
.edss-priority-list { display: grid; gap: 3px; }
.edss-priority-list button {
display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 10px; align-items: center;
width: 100%; padding: 10px 4px; border: 0; border-top: 1px solid var(--line-soft);
background: transparent; color: var(--ink); text-align: left;
}
.edss-priority-list button:hover { background: var(--bg); }
.edss-priority-list button > span:first-child, .edss-rank {
width: 27px; height: 27px; display: grid; place-items: center; border-radius: var(--r-sm);
background: var(--surface-info); color: var(--info); font-size: var(--text-sm); font-weight: 800;
}
.edss-priority-list button > div { min-width: 0; }
.edss-priority-list b { display: block; font-size: var(--text-sm); }
.edss-priority-list small { color: var(--ink-3); font-size: var(--text-sm); }
.edss-priority {
display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
border-radius: var(--r-pill); padding: 5px 8px; background: color-mix(in srgb,var(--pc) 12%,white);
color: var(--pc); font-size: var(--text-sm); font-weight: 750;
}
.edss-priority::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--pc); }
.edss-strength, .edss-pattern-mini { padding: 11px 0; border-top: 1px solid var(--line-soft); }
.edss-strength b, .edss-pattern-mini b { color: var(--navy); font-size: var(--text-sm); }
.edss-strength p, .edss-pattern-mini p { margin: 3px 0 0; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.5; }
.edss-pattern-mini { margin-top: 4px; padding: 11px 12px; background: var(--surface-info); border: 0; border-radius: var(--r-sm); }
.edss-section-intro { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin: 4px 0 14px; }
.edss-section-intro span { color: var(--teal-txt); font-size: var(--text-sm); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.edss-section-intro h2 { margin-top: 3px; color: var(--navy); font-size: var(--text-xl); }
.edss-section-intro > p { max-width: 500px; margin: 0; color: var(--ink-3); font-size: var(--text-sm); line-height: 1.5; text-align: right; }
.edss-findings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.edss-findings-grid .card { margin: 0; }
.edss-finding { display: grid; grid-template-columns: 48px 1fr; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.edss-finding > span { align-self: start; padding: 7px 5px; border-radius: var(--r-sm); background: var(--surface-info); color: var(--info); font-size: var(--text-sm); font-weight: 800; text-align: center; }
.edss-finding b { font-size: var(--text-sm); color: var(--navy); }
.edss-finding p { margin: 3px 0; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.5; }
.edss-finding small { color: var(--ink-3); font-size: var(--text-sm); }
.edss-domain-table > div { display: grid; grid-template-columns: 1fr 48px 112px 95px; gap: 8px; align-items: center; padding: 10px 2px; border-top: 1px solid var(--line-soft); font-size: var(--text-sm); }
.edss-domain-table b { color: var(--ink); }
.edss-domain-table span { color: var(--ink-2); }
.edss-domain-table em { color: var(--ink-3); font-style: normal; text-align: right; }
.edss-domain-table em.up { color: var(--lv-excepcional-esperado-alto-txt); font-weight: 700; }
.edss-domain-table em.down { color: var(--lv-intervencion-prioritaria-txt); font-weight: 700; }
.edss-group-list, .edss-student-list { display: grid; }
.edss-group-list button, .edss-student-list button {
display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center;
padding: 10px 3px; border: 0; border-top: 1px solid var(--line-soft); background: transparent; color: var(--ink); text-align: left;
}
.edss-group-list button:hover, .edss-student-list button:hover { background: var(--bg); }
.edss-group-list b, .edss-student-list span { color: var(--navy); font-size: var(--text-sm); font-weight: 700; }
.edss-group-list span, .edss-group-list em, .edss-student-list small, .edss-student-list b { color: var(--ink-3); font-size: var(--text-sm); font-style: normal; }
.edss-student-list button { grid-template-columns: 1fr auto; }
.edss-student-list small { grid-column: 1; }
.edss-student-list b { grid-column: 2; grid-row: 1 / 3; }
.edss-filterbar {
display: flex; align-items: end; gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
}
.edss-filterbar label { color: var(--ink-3); font-size: var(--text-sm); font-weight: 700; }
.edss-filterbar select { display: block; min-width: 180px; margin-top: 3px; padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--ink); }
.edss-filterbar > span { margin-left: auto; padding-bottom: 7px; color: var(--ink-3); font-size: var(--text-sm); }
.edss-recommendations { display: grid; gap: 14px; }
.edss-rec-card { margin: 0; padding: 18px; }
.edss-rec-head { display: flex; gap: 11px; align-items: center; margin-bottom: 13px; }
.edss-rec-head > div { flex: 1; min-width: 0; }
.edss-rec-head small { color: var(--teal-txt); font-size: var(--text-sm); font-weight: 700; }
.edss-rec-head h3 { margin-top: 2px; color: var(--navy); font-size: var(--text-lg); }
.edss-rec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.edss-rec-grid section { padding: 11px 12px; border-radius: var(--r-sm); background: var(--bg); }
.edss-rec-grid section > b, .edss-detail-grid section > b { color: var(--navy); font-size: var(--text-sm); }
.edss-rec-grid p, .edss-detail-grid p { margin: 4px 0 0; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.5; }
.edss-rec-grid .edss-hypothesis { background: var(--surface-info); }
.edss-rec-grid .edss-hypothesis > b { display: flex; align-items: center; gap: 5px; color: var(--info); }
.edss-rec-grid .edss-action { background: var(--surface-action); border: 1px solid rgba(14,138,134,.16); }
.edss-rec-grid .edss-action > b { display: flex; align-items: center; gap: 5px; color: var(--teal-txt); }
.edss-rec-meta { display: grid; grid-template-columns: 1.5fr 1fr .55fr .55fr; gap: 7px; margin-top: 8px; }
.edss-rec-meta div { padding: 9px 10px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); }
.edss-rec-meta span { display: block; color: var(--ink-3); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .04em; }
.edss-rec-meta b { display: block; margin-top: 3px; color: var(--ink); font-size: var(--text-sm); line-height: 1.45; }
.edss-details { margin-top: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.edss-details summary { padding: 9px 11px; color: var(--navy); cursor: pointer; font-size: var(--text-sm); font-weight: 700; }
.edss-detail-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 11px; border-top: 1px solid var(--line-soft); }
.edss-detail-grid ul { margin: 5px 0 0; padding-left: 17px; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.55; }
.edss-axes { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; margin-top: 9px; padding: 10px; background: var(--bg); border-radius: var(--r-sm); }
.edss-axis { display: grid; grid-template-columns: 1fr auto; gap: 3px 7px; align-items: center; }
.edss-axis span { color: var(--ink-3); font-size: var(--text-sm); }
.edss-axis b { color: var(--navy); font-size: var(--text-sm); }
.edss-axis i { grid-column: 1 / -1; height: 4px; overflow: hidden; background: var(--line); border-radius: var(--r-sm); }
.edss-axis em { display: block; height: 100%; background: var(--teal); border-radius: inherit; }
.edss-plan-cta { display: flex; align-items: center; gap: 11px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.edss-plan-cta span { color: var(--ink-3); font-size: var(--text-sm); }
.edss-plan-form, .edss-plan-update {
display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px;
margin-top: 11px; padding: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.edss-plan-form[hidden] { display: none; }
.edss-plan-form .field, .edss-plan-update .field { min-width: 0; }
.edss-plan-form .field.wide, .edss-plan-update .field.wide, .edss-plan-form .form-actions, .edss-plan-update .form-actions { grid-column: 1 / -1; }
.edss-plan-form label, .edss-plan-update label { display: block; margin-bottom: 4px; color: var(--ink-3); font-size: var(--text-sm); font-weight: 700; }
.edss-plan-form input, .edss-plan-form textarea, .edss-plan-form select,
.edss-plan-update input, .edss-plan-update textarea, .edss-plan-update select {
width: 100%; padding: 8px 9px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--ink); font: inherit; font-size: var(--text-sm);
}
.edss-plan-form textarea { min-height: 64px; resize: vertical; }
.edss-plan-form .form-actions, .edss-plan-update .form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.edss-plan-form .form-msg, .edss-plan-update .form-msg { margin-right: auto; color: var(--ink-3); font-size: var(--text-sm); }
.edss-plan-summary { display: grid; grid-template-columns: repeat(6,1fr); gap: 7px; margin-bottom: 12px; }
.edss-plan-summary > div { display: flex; align-items: center; gap: 6px; padding: 9px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); }
.edss-plan-summary span { width: 7px; height: 7px; border-radius: 50%; }
.edss-plan-summary b { flex: 1; color: var(--ink-2); font-size: var(--text-sm); }
.edss-plan-summary em { color: var(--navy); font-size: var(--text-sm); font-style: normal; font-weight: 800; }
.edss-plan-list, .edss-impact-list { display: grid; gap: 12px; }
.edss-plan-card { margin: 0; }
.edss-plan-card > header { display: flex; align-items: flex-start; gap: 12px; }
.edss-plan-card > header > div { flex: 1; }
.edss-plan-card header small { color: var(--ink-3); font-size: var(--text-sm); }
.edss-plan-card header h3 { margin-top: 2px; color: var(--navy); font-size: var(--text-md); }
.edss-status { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; color: var(--sc); background: color-mix(in srgb,var(--sc) 12%,white); border-radius: var(--r-pill); font-size: var(--text-sm); font-weight: 750; }
.edss-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--sc); }
.edss-plan-card > p { margin: 9px 0; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.5; }
.edss-plan-facts { display: grid; grid-template-columns: 1.4fr repeat(5,1fr); gap: 6px; }
.edss-plan-facts span { padding: 8px 9px; color: var(--ink-2); background: var(--bg); border-radius: var(--r-sm); font-size: var(--text-sm); line-height: 1.4; }
.edss-plan-facts b { display: block; margin-bottom: 3px; color: var(--ink-3); font-size: var(--text-sm); text-transform: uppercase; }
.edss-evidence-note { margin-top: 8px; padding: 9px 11px; border-radius: var(--r-sm); background: var(--surface-action); }
.edss-evidence-note b { color: var(--teal-txt); font-size: var(--text-sm); }
.edss-evidence-note p { margin: 3px 0 0; color: var(--ink-2); font-size: var(--text-sm); }
.edss-plan-card > footer { margin-top: 9px; color: var(--ink-3); font-size: var(--text-xs); }
.empty-state { padding: 28px; text-align: center; }
.empty-state h3 { margin: 7px 0 4px; color: var(--navy); }
.empty-state p { max-width: 540px; margin: 0 auto 12px; color: var(--ink-3); font-size: var(--text-sm); line-height: 1.5; }
.edss-impact-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin-bottom: 12px; }
.edss-impact-kpis div { padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); text-align: center; }
.edss-impact-kpis b { display: block; color: var(--navy); font-size: var(--text-xl); }
.edss-impact-kpis span { color: var(--ink-3); font-size: var(--text-sm); }
.edss-impact-card { margin: 0; }
.edss-impact-card header { display: flex; align-items: flex-start; gap: 12px; }
.edss-impact-card header div { flex: 1; }
.edss-impact-card header small { color: var(--ink-3); font-size: var(--text-sm); }
.edss-impact-card header h3 { margin-top: 2px; color: var(--navy); font-size: var(--text-md); }
.edss-impact-card header > b { padding: 5px 8px; color: var(--ic); background: color-mix(in srgb,var(--ic) 12%,white); border-radius: var(--r-pill); font-size: var(--text-sm); }
.edss-impact-data { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 10px 0; }
.edss-impact-data span { padding: 9px; color: var(--ink-3); background: var(--bg); border-radius: var(--r-sm); font-size: var(--text-sm); }
.edss-impact-data b { display: block; margin-bottom: 2px; color: var(--navy); font-size: var(--text-md); }
.edss-impact-card section { padding: 10px 12px; border-radius: var(--r-sm); background: var(--bg); }
.edss-impact-card section b { color: var(--navy); font-size: var(--text-sm); }
.edss-impact-card section p { margin: 3px 0 0; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.5; }
.edss-impact-card footer { margin-top: 8px; color: var(--ink-3); font-size: var(--text-xs); }
.edss-guardrail { margin-top: 18px; }
@media (max-width: 950px) {
.dua-layout, .dua-context { grid-template-columns: 1fr; }
.dua-course-grid, .dua-library-grid { grid-template-columns: 1fr; }
.edss-brief, .edss-overview-grid { grid-template-columns: 1fr; }
.edss-brief-action { border-left: 0; border-top: 1px solid rgba(255,255,255,.15); }
.edss-kpis { grid-template-columns: repeat(2,1fr); }
.edss-rec-meta { grid-template-columns: repeat(2,1fr); }
.edss-axes { grid-template-columns: repeat(3,1fr); }
.edss-plan-summary { grid-template-columns: repeat(3,1fr); }
.edss-plan-facts { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 620px) {
.dua-evidence { grid-template-columns: 1fr; }
.dua-course-grid button { grid-template-columns: 1fr auto; }
.dua-course-grid button .pill { grid-column: 1 / -1; justify-self: start; }
.edss-page-head { align-items: flex-start; }
.edss-scope { align-items: stretch; }
.edss-levels { width: 100%; overflow-x: auto; }
.edss-levels button { flex: 1; }
.edss-entity { width: 100%; margin-left: 0; }
.edss-student-search { width: 100%; margin-left: 0; }
.edss-student-search label { flex: 1; min-width: 0; }
.edss-tabs button { flex: none; }
.edss-brief-main, .edss-brief-action { padding: 18px; }
.edss-questions { grid-template-columns: 1fr; }
.edss-answer { grid-column: 1; }
.edss-kpis, .edss-findings-grid, .edss-rec-grid, .edss-impact-kpis { grid-template-columns: 1fr; }
.edss-section-intro { align-items: flex-start; flex-direction: column; }
.edss-section-intro > p { text-align: left; }
.edss-domain-table > div { grid-template-columns: 1fr auto; }
.edss-domain-table > div span:nth-child(3), .edss-domain-table em { grid-column: 1 / -1; text-align: left; }
.edss-rec-head { align-items: flex-start; flex-wrap: wrap; }
.edss-rec-head .edss-priority { margin-left: 38px; }
.edss-rec-meta, .edss-detail-grid, .edss-axes, .edss-plan-form, .edss-plan-update { grid-template-columns: 1fr; }
.edss-plan-form .field.wide, .edss-plan-update .field.wide, .edss-plan-form .form-actions, .edss-plan-update .form-actions { grid-column: 1; }
.edss-plan-summary { grid-template-columns: repeat(2,1fr); }
.edss-plan-facts, .edss-impact-data { grid-template-columns: 1fr; }
.edss-filterbar label, .edss-filterbar select { width: 100%; }
.edss-filterbar > span { margin-left: 0; }
}
@media (max-width: 640px) {
.id-cols { grid-template-columns: minmax(0, 1fr); }
.piar-hito { grid-template-columns: 1fr; }
.piar-n { display: none; }
}
.mej-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mej-kpi {
display: flex; flex-direction: column; gap: 2px;
padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg);
}
.mej-n { font-size: var(--text-2xl); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.mej-l { font-size: var(--text-sm); color: var(--ink-3); }
.mej-fila { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: var(--text-sm); }
.mej-fila-n { flex: 1; min-width: 0; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mej-bar { width: 90px; height: 7px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; flex: none; }
.mej-bar i { display: block; height: 100%; background: var(--teal); border-radius: var(--r-pill); }
.mej-fila-v { color: var(--navy); flex: none; width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
.mej-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.an-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.an-kpi { width: 100%; min-width: 0; min-height: 72px; box-shadow: none; }
.an-kpi .kc-tx { justify-content: center; }
.an-kpi .kc-l { color: var(--ink); line-height: 1.25; }
.an-h { font-size: var(--text-sm); color: var(--ink-3); line-height: 1.35; }
.an-nota {
margin-top: 14px; padding: 10px 14px;
background: var(--surface-subtle); border-radius: var(--r-sm); font-size: var(--text-md); color: var(--ink-2);
}
.an-aviso {
display: flex; gap: 9px; align-items: flex-start;
background: var(--surface-action); border: 1px solid rgba(14,138,134,.2);
border-radius: var(--r-sm); padding: 12px 15px; margin: 4px 0 16px;
font-size: var(--text-sm); color: var(--ink-2); line-height: 1.55;
}
.an-aviso svg { color: var(--teal-txt); flex: none; margin-top: 2px; }
.an-cruce {
border: 1px solid var(--line);
border-radius: var(--r-md); padding: 15px 17px; margin-bottom: 12px;
background: var(--card); box-shadow: var(--sh-1);
}
.an-cruce-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.an-cruce-head b { font-size: var(--text-lg); color: var(--navy); }
.an-lado { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.an-grupo {
display: flex; flex-direction: column; gap: 1px;
padding: 11px 13px; border: 1px solid var(--line-soft); border-radius: var(--r-sm);
background: var(--bg);
}
.an-g-nom { font-size: var(--text-sm); color: var(--ink-2); }
.an-g-pc { font-size: var(--text-xl); font-weight: 700; color: var(--navy); line-height: 1.15; font-variant-numeric: tabular-nums; }
.an-g-de { font-size: var(--text-sm); color: var(--ink-3); }
.an-cifras { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; margin-top: 12px; }
.an-cif { font-size: var(--text-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.an-cif i { display: block; font-style: normal; font-size: var(--text-sm); letter-spacing: .04em; text-transform: uppercase; font-weight: 700; }
.an-cif-ok { color: var(--ink); }
.an-cif-ok b { font-size: var(--text-lg); }
.an-cruce-nota { font-size: var(--text-sm); color: var(--ink-2); line-height: 1.55; margin: 10px 0 0; }
.an-vacio { border: 1px dashed var(--line); border-radius: var(--r-md); padding: 20px; text-align: center; }
.an-vacio b { display: block; color: var(--navy); margin-bottom: 6px; }
.an-vacio p { font-size: var(--text-md); color: var(--ink-2); margin: 0; max-width: 60ch; margin-inline: auto; }
.an-vacio-accion { margin-top: var(--space-3); }
@media (max-width: 720px) {
.an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.an-lado { grid-template-columns: 1fr; }
}
.cmp-toolbar {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-4);
}
.cmp-student-picker {
display: grid;
grid-template-columns: auto minmax(150px, 220px) minmax(260px, 1fr);
align-items: center;
gap: var(--space-2);
flex: 1 1 620px;
}
.cmp-student-picker .filters-label {
color: var(--ink-2);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
}
.cmp-student-picker input,
.cmp-student-picker select {
min-height: var(--control-md);
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: var(--card);
color: var(--ink);
font: inherit;
font-size: var(--text-sm);
padding: 8px 12px;
transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.cmp-student-picker input:focus,
.cmp-student-picker select:focus {
border-color: var(--teal-txt);
box-shadow: var(--ring);
outline: none;
}
.cmp-context {
display: flex;
flex: 1 1 360px;
justify-content: flex-end;
gap: var(--space-2);
flex-wrap: wrap;
}
.cmp-context span {
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 32px;
padding: 5px 10px;
border: 1px solid var(--line);
border-radius: var(--r-pill);
background: var(--card);
color: var(--ink-2);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
white-space: nowrap;
}
.cmp-context svg { color: var(--teal-txt); }
.cmp-overview {
display: grid;
grid-template-columns: minmax(260px, .8fr) minmax(0, 1.7fr);
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.cmp-current {
display: flex;
align-items: center;
gap: var(--space-3);
min-width: 0;
padding: var(--space-4);
border: 1px solid var(--cmp-level);
border-left: 5px solid var(--cmp-level);
border-radius: var(--r-md);
background: var(--cmp-level-bg);
}
.cmp-current .mini-icon { background: var(--cmp-level); }
.cmp-current small {
display: block;
color: var(--ink-2);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
}
.cmp-current b {
display: block;
margin-top: 2px;
color: var(--cmp-level-txt);
font-size: var(--text-lg);
line-height: var(--leading-ui);
}
.cmp-current p {
margin: 3px 0 0;
color: var(--ink-2);
font-size: var(--text-sm);
line-height: var(--leading-copy);
}
.cmp-metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-3);
}
.cmp-metric {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
align-items: center;
column-gap: var(--space-3);
min-width: 0;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--line);
border-radius: var(--r-md);
background: var(--card);
box-shadow: var(--sh-1);
}
.cmp-metric b {
grid-row: 1 / 3;
color: var(--cmp-accent);
font-size: var(--text-xl);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.cmp-metric span {
min-width: 0;
color: var(--ink);
font-size: var(--text-sm);
font-weight: var(--weight-bold);
line-height: var(--leading-ui);
}
.cmp-metric small {
color: var(--ink-3);
font-size: var(--text-sm);
line-height: var(--leading-ui);
}
.compare-panel .sec[open] > .sec-body { animation: cmpReveal var(--duration-ui) var(--ease-out); }
@keyframes cmpReveal {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: translateY(0); }
}
.cmp-heat-scroll { overflow-x: auto; padding: 2px 2px 6px; }
.cmp-heatmap { min-width: 760px; }
.cmp-heat-cell {
appearance: none;
width: 100%;
border: 1px solid;
font: inherit;
cursor: pointer;
transition: box-shadow var(--duration-fast) var(--ease-out);
}
.cmp-heat-cell:hover,
.cmp-heat-cell:focus-visible,
.cmp-heat-cell.active {
box-shadow: 0 0 0 2px var(--card), 0 0 0 4px currentColor;
outline: none;
}
.cmp-norm-cell {
border: 1px solid var(--lv-esperado);
background: var(--lv-esperado-bg);
color: var(--lv-esperado-txt);
}
.cmp-domain-detail {
position: relative;
margin-top: var(--space-4);
padding: var(--space-4);
border: 1px solid var(--line);
border-radius: var(--r-md);
background: var(--card);
box-shadow: var(--sh-1);
}
.cmp-domain-detail.open { animation: cmpReveal var(--duration-ui) var(--ease-out); }
.cmp-domain-close {
position: absolute;
top: 10px;
right: 10px;
width: 32px;
height: 32px;
border: 1px solid var(--line);
border-radius: 50%;
background: var(--card);
color: var(--ink-2);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.cmp-domain-close:hover { background: var(--bg); color: var(--navy); }
.cmp-domain-head {
display: flex;
align-items: center;
gap: var(--space-3);
padding-right: 38px;
margin-bottom: var(--space-4);
}
.cmp-domain-head > div { flex: 1; min-width: 0; }
.cmp-domain-head small {
display: block;
color: var(--ink-3);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
}
.cmp-domain-head h3 { margin: 2px 0 0; color: var(--navy); font-size: var(--text-lg); }
.cmp-domain-refs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-3);
}
.cmp-domain-refs > div {
display: grid;
grid-template-columns: 1fr auto;
gap: 3px var(--space-2);
min-width: 0;
padding: var(--space-3);
border: 1px solid var(--line-soft);
border-radius: var(--r-sm);
background: var(--bg);
}
.cmp-domain-refs > div.is-student { border-top: 3px solid var(--cmp-ref); }
.cmp-domain-refs span { color: var(--ink-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.cmp-domain-refs b { color: var(--cmp-ref); font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.cmp-domain-refs i {
grid-column: 1 / -1;
color: var(--ink-3);
font-size: var(--text-sm);
font-style: normal;
}
.cmp-domain-refs .meter { grid-column: 1 / -1; margin-top: 5px; }
.cmp-domain-refs .meter em {
display: block;
height: 100%;
border-radius: inherit;
background: var(--cmp-ref);
transition: width var(--duration-ui) var(--ease-out);
}
.cmp-domain-detail > p {
margin: var(--space-4) 0 0;
color: var(--ink-2);
font-size: var(--text-sm);
line-height: var(--leading-copy);
}
@media (max-width: 980px) {
.cmp-toolbar { align-items: stretch; flex-direction: column; }
.cmp-context { justify-content: flex-start; flex-basis: auto; }
.cmp-overview { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.cmp-student-picker { grid-template-columns: 1fr; }
.cmp-metrics, .cmp-domain-refs { grid-template-columns: 1fr; }
.cmp-domain-head { align-items: flex-start; flex-wrap: wrap; }
}
.btn-primary:hover { background: var(--teal-strong); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition: none !important; animation: none !important; }
.sec-sum:hover, .kpi-chip:hover, .stu-row:hover, .dom-pro:hover, .fam-card:hover,
.al-sum:hover, .ex-c:hover, .test-card:hover, .ha-fila:hover { transform: none !important; }
}
details.cog-dom > summary { flex-wrap: wrap; }
details.cog-dom > summary .compare-row { min-width: 230px; }
details.cog-dom > summary .pill { white-space: normal; }
.who > .pill { white-space: normal; }
.report-cover .pill { white-space: normal; }
@media (max-width: 700px) {
.topbar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
.topbar-user .who { display: none; }
.topbar-user select { max-width: 46vw; }
.searchbox { min-width: 0; flex: 1 1 140px; }
.btn-ghost { padding: 6px 10px; font-size: var(--text-sm); }
}
.pl-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(8px);
background: var(--navy); color: #fff; padding: 11px 20px; border-radius: var(--r-md);
font-size: var(--text-md); font-weight: 600; box-shadow: var(--sh-3);
opacity: 0; transition: opacity 0.2s, transform 0.2s; z-index: 9500; max-width: min(92vw, 480px); }
.pl-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.pl-toast.err { background: var(--lv-intervencion-prioritaria); }
.cie { position: relative; margin-bottom: 12px; }
.cie-lista { position: absolute; z-index: 60; left: 0; right: 0; top: 100%; margin-top: 3px;
background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
box-shadow: var(--sh-3); max-height: 264px; overflow-y: auto; }
.cie-op { display: grid; grid-template-columns: 68px 1fr; gap: 2px 10px; width: 100%;
padding: 8px 12px; border: 0; background: none; text-align: left; cursor: pointer;
border-bottom: 1px solid var(--line-soft); }
.cie-op:last-child { border-bottom: 0; }
.cie-op:hover, .cie-op.on { background: var(--surface-subtle); }
.cie-op.institution-op { grid-template-columns: 1fr; }
.cie-op.institution-op .cie-op-b { grid-column: 1; }
.cie-op-t { font-size: var(--text-sm); color: var(--ink); line-height: 1.32; }
.cie-op-b { grid-column: 2; font-size: var(--text-sm); color: var(--ink-3); text-transform: uppercase;
letter-spacing: 0.04em; }
.cie-sel { display: flex; align-items: center; gap: 9px; margin-top: 7px; padding: 9px 11px;
background: var(--surface-action); border-radius: var(--r-sm); }
.cie-sel[hidden] { display: none; }
.cie-txt { flex: 1; font-size: var(--text-sm); color: var(--ink); line-height: 1.35; }
.cie-x { border: 0; background: none; cursor: pointer; font-size: var(--text-xl); line-height: 1;
color: var(--ink-3); padding: 0 3px; }
.cie-x:hover { color: var(--lv-intervencion-prioritaria-txt); }
.cie-libre-fila { margin: 6px 0 0; }
.cie-op.dsm-op { grid-template-columns: 1fr; }
.cie-op.dsm-op .cie-op-b { grid-column: 1; text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.cie-grupo { margin: 0; padding: 6px 12px; font-size: var(--text-sm); font-weight: 600; color: var(--ink-3);
background: var(--surface-subtle); border-bottom: 1px solid var(--line-soft); }
.dx-cods { display: block; margin-top: 2px; font-size: var(--text-sm); font-weight: 400; color: var(--ink-3);
font-variant-numeric: tabular-nums; }
.dsm-esp { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.dsm-esp-t { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--ink-3); margin-bottom: var(--space-2); }
.dsm-esp .chip-row { margin-bottom: 0; }
.cn-kpis { margin-bottom: var(--space-6); }
.cn-fila { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-2);
padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--r-md); }
.cn-fila-txt { flex: 1; min-width: 200px; }
.cn-fila-txt b { font-size: var(--text-md); color: var(--ink); }
.cn-fila-meta { display: block; margin-top: 2px; font-size: var(--text-sm); color: var(--ink-3); }
.ft-datos { margin-top: var(--space-3); font-size: var(--text-md); color: var(--ink); }
.ft-datos .hc-rotulo { margin: var(--space-2) 0 var(--space-1); }
.cn-fila .btn-primary, .cn-fila .btn-outline, .cn-fila .btn-ghost { min-height: var(--control-sm); padding: 6px 14px; font-size: var(--text-sm); }
.cn-fila-sub { display: block; margin-top: 2px; }
.cn-fila-sub b { color: var(--ink); }
.cn-fila--ambar { border-color: var(--sev-ambar-color); background: var(--sev-ambar-bg); }
.cn-fila--ambar .cn-fila-meta { color: var(--sev-ambar-txt); }
.hc-cabecera { margin-bottom: var(--space-4); }
.hc-cab { display: flex; gap: var(--space-3); align-items: baseline; flex-wrap: wrap; }
.hc-cab h1 { margin: 0; font-size: var(--text-2xl); }
.hc-id { font-size: var(--text-sm); }
.hc-meta { margin: var(--space-2) 0 0; font-size: var(--text-md); }
.hc-aviso { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-top: var(--space-3);
padding: var(--space-3) var(--space-4); border: 1px solid; border-radius: var(--r-sm); }
.hc-aviso-txt { flex: 1; min-width: 220px; font-size: var(--text-md); }
.hc-aviso .btn-primary, .hc-aviso .btn-outline { min-height: var(--control-sm); padding: 6px 14px; font-size: var(--text-sm); }
.hc-aviso--neutro { border-color: var(--line); background: var(--surface-subtle); color: var(--ink-2); }
.hc-aviso--ambar { border-color: var(--sev-ambar-color); background: var(--sev-ambar-bg); }
.hc-aviso--ambar .hc-aviso-txt { color: var(--sev-ambar-txt); }
.hc-aviso--rojo { border-color: var(--sev-rojo-color); background: var(--sev-rojo-bg); }
.hc-aviso--rojo .hc-aviso-txt { color: var(--sev-rojo-txt); font-weight: 700; }
.hc-aviso--rojo .btn-outline { color: var(--sev-rojo-txt); border-color: var(--sev-rojo-color); }
.hc-siguiente { display: flex; justify-content: flex-end; margin: var(--space-4) 0 var(--space-6); }
.hc-rotulo { font-size: var(--text-sm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: var(--ink-3); margin: 0 0 var(--space-2); }
.accesos-lista { list-style: none; margin: 0; padding: 0; }
.accesos-fila { padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.accesos-fila:last-child { border-bottom: 0; }
.accesos-persona + .accesos-persona { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.cuentas-lista .sec-tit { display: flex; align-items: center; gap: var(--space-3); flex: 1 1 260px; min-width: 0; }
.cuentas-lista .sr-quien { min-width: 0; }
.cuentas-lista .sr-quien .muted { font-weight: 400; overflow-wrap: anywhere; }
.cuentas-lista .avatar { flex: none; }
.cuenta-acciones { display: flex; flex-wrap: wrap; gap: var(--space-1); justify-content: flex-end; margin-left: auto; }
.cuentas-lista .sec-caret { margin-left: 0; }
.cuenta-rotulo { margin-top: var(--space-4); }
.cuenta-valor { min-width: 0; overflow-wrap: anywhere; }
.cuenta-codigo { white-space: nowrap; }
.cuenta-nota { margin: var(--space-2) 0 0; font-size: var(--text-sm); }
.cuenta-tabla { table-layout: fixed; }
.cuenta-tabla th:not(:first-child) { width: 30%; }
.cuentas-mas { text-align: center; }
@media (max-width: 720px) {
.cuentas-lista .sec-tit { flex-basis: 0; }
.cuentas-lista .sec-caret { order: 1; }
.cuenta-acciones { order: 2; flex-basis: 100%; justify-content: flex-start; margin-left: 0; }
}
.inv-aviso { margin: 0 0 var(--space-3); font-size: var(--text-sm); }
.inv-msg { min-height: var(--space-5); margin: var(--space-1) 0 var(--space-2); font-size: var(--text-sm); color: var(--ink-2); }
.inv-lista-titulo { margin: var(--space-6) 0 var(--space-1); font-size: var(--text-md); color: var(--navy); }
.inv-lista { list-style: none; margin: 0; padding: 0; }
.inv-fila {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: var(--space-1) var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--line);
}
.inv-fila:last-child { border-bottom: 0; }
.inv-fila-quien { flex: 1 1 260px; min-width: 0; }
.inv-fila-quien p { margin: 0; overflow-wrap: anywhere; }
.inv-fila-rol { margin-top: var(--space-1); font-size: var(--text-sm); }
.inv-fila-acciones { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.inv-usuario-estado { margin: calc(var(--space-3) * -1) 0 var(--space-4); font-size: var(--text-sm); color: var(--ink-2); }
.inv-usuario-estado:empty { display: none; }
#hcAccesosCaja { margin-top: var(--space-4); }
.dx-sos { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--space-3) var(--space-4); background: var(--card); }
.dx-sos-cab { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: flex-start; justify-content: space-between; }
.dx-sos-cab > div { flex: 1 1 180px; min-width: 0; }
.dx-sos-cab b { font-size: var(--text-md); color: var(--ink); }
.dx-sos-cab .pill { flex: none; }
.dx-sos-nota { margin: var(--space-3) 0 0; }
.dx-sos-fecha { font-size: var(--text-sm); margin: var(--space-2) 0 0; }
.cie-sel { flex-wrap: wrap; }
.cie-sel .cie-txt { flex: 1 1 160px; }
.card-link[hidden] { display: none; }
.fld-off { opacity: 0.45; }
.fld-off input, .fld-off select, .fld-off textarea { background: var(--surface-subtle); cursor: not-allowed; }
.cie.fld-off .cie-lista { display: none; }
.id-cie { margin: -4px 0 8px; }
.piar-avatar { width: var(--avatar-sm); height: var(--avatar-sm); font-size: var(--text-sm); flex: none; }
.piar-datos {
flex: 0 1 15rem; min-width: 0; display: flex; flex-direction: column; gap: 2px;
font-size: var(--text-sm); line-height: var(--leading-ui); color: var(--ink-2);
font-variant-numeric: tabular-nums;
}
.piar-datos b { color: var(--ink); font-weight: var(--weight-semibold); }
.piar-proxima.vencida b { color: var(--lv-requiere-apoyo-txt); }
.piar-estado {
flex: 0 0 11.5rem; font-size: var(--text-sm); font-weight: var(--weight-semibold);
color: var(--ink-2); text-align: right;
}
.piar-filtros .piar-q { min-width: 15rem; }
.piar-filtros .piar-q-n { font-size: var(--text-sm); }
@media (max-width: 700px) {
.piar-datos, .piar-estado { flex: 1 1 100%; padding-left: calc(var(--avatar-sm) + 12px); text-align: left; }
.piar-filtros .piar-q { min-width: 0; flex: 1 1 100%; }
}
.rep-prep { display:flex; flex-wrap:wrap; gap:22px; align-items:center;
padding:12px 16px; margin-bottom:16px; background:var(--bg);
border:1px solid var(--line); border-radius: var(--r-md); }
.rep-prep-g { display:flex; align-items:center; gap:10px; }
.rep-prep-g > span { font-size: var(--text-sm); text-transform:uppercase;
letter-spacing:0.04em; color:var(--ink-3); font-weight:600; }
.report-head-actions { display:flex; gap:9px; flex-wrap:wrap; justify-content:flex-end; }
.fam-hall { display:flex; flex-direction:column; gap:10px; margin-bottom:4px; }
.fam-hall-i { display:flex; gap:11px; align-items:flex-start; }
.fam-hall-i p { margin:0; color:var(--ink); }
.fam-diagnosis {
margin-bottom: 22px; padding: 17px 18px;
border: 1px solid var(--line);
border-radius: var(--r-md); background: var(--lv-esperado-bg);
}
.fam-report-heading {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
}
.fam-report-heading h3 { margin: 0; }
.fam-report-heading .pill { background: var(--card); color: var(--ink-2); font-size: var(--text-sm); line-height: var(--leading-ui); }
.fam-diagnosis-main { margin: 0; color: var(--ink); }
.clinical-integrated-synthesis p {
margin: 0 0 11px;
color: var(--ink);
text-align: left;
orphans: 3;
widows: 3;
}
.clinical-integrated-synthesis p:last-child { margin-bottom: 0; }
.fam-level-guide {
margin: 14px 0 24px; padding: 14px 16px;
border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card);
}
.fam-level-guide > h3 { margin: 0 0 4px; color: var(--navy); }
.fam-level-guide > p { margin: 0 0 10px; color: var(--ink-2); }
.fam-level-guide > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 14px; }
.fam-level-guide article { display: flex; align-items: flex-start; gap: 8px; }
.fam-level-guide article > span { width: 10px; height: 10px; flex: none; margin-top: 4px; border-radius: 50%; }
.fam-level-guide article div { min-width: 0; }
.fam-level-guide article b { display: block; color: var(--ink); }
.fam-level-guide article small { display: block; margin-top: 1px; color: var(--ink-2); font-size: var(--text-sm); line-height: var(--leading-ui); }
.fam-diagnosis-meta { margin-top: 12px; padding-top: 9px; border-top: 1px solid color-mix(in srgb, var(--info) 16%, transparent); }
.fam-diagnosis-meta p { display: flex; gap: 7px; align-items: flex-start; margin: 5px 0 0; color: var(--ink-2); font-size: var(--text-sm); line-height: var(--leading-ui); }
.fam-diagnosis-meta svg { flex: none; margin-top: 2px; color: var(--teal-txt); }
.fam-report-findings { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 13px; }
.fam-report-findings > div { display: flex; gap: 7px; align-items: flex-start; padding: 9px; background: var(--card); border-radius: var(--r-sm); }
.fam-report-findings .mini-icon { width: 24px; height: 24px; flex: none; }
.fam-report-findings p { margin: 0; color: var(--ink-2); }
.fam-report-section { margin: 24px 0; }
.fam-report-intro { margin: -2px 0 11px; color: var(--ink-2); }
.fam-strength-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.fam-strength-card { display: flex; gap: 9px; padding: 11px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); }
.fam-strength-card .mini-icon { width: 27px; height: 27px; flex: none; background: var(--lv-excepcional-esperado-alto); color: var(--card); }
.fam-strength-card > div { min-width: 0; }
.fam-strength-card b { display: block; color: var(--navy); font-size: var(--text-lg); line-height: var(--leading-tight); }
.fam-strength-card small { display: block; color: var(--ink-3); margin-top: 1px; font-size: var(--text-sm); line-height: var(--leading-ui); }
.fam-strength-card p { margin: 5px 0 0; color: var(--ink-2); }
.fam-strength-card .fam-strength-use { color: var(--ink); }
.fam-report-plan { display: flex; flex-direction: column; gap: 12px; }
.fam-plan-shared { display: grid; grid-template-columns: 1.45fr 1fr; gap: 8px 14px;
margin: 0 0 12px; padding: 9px 11px; background: var(--lv-excepcional-esperado-alto-bg); border-radius: var(--r-sm); }
.fam-plan-shared p { margin: 0; color: var(--ink-2); }
.fam-plan-card {
padding: 14px 15px; border: 1px solid var(--line); border-left: 4px solid var(--plan-color);
border-radius: var(--r-md); background: var(--card);
}
.fam-plan-head { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 9px;
flex-wrap: wrap; }
.fam-card-head { flex-wrap: wrap; }
.fam-card-tit { flex: 1 1 11rem; min-width: 11rem; }
.fam-plan-number { width: 25px; height: 25px; display: grid; place-items: center; flex: none; border-radius: 50%; background: var(--plan-color); color: var(--card); font-weight: 700; font-size: var(--text-sm); line-height: var(--leading-ui); }
.fam-plan-head > div { flex: 1 1 11rem; min-width: 11rem; }
.fam-plan-head b { display: block; color: var(--navy); font-size: var(--text-lg); line-height: var(--leading-tight); }
.fam-plan-head small { display: block; color: var(--ink-3); margin-top: 1px; font-size: var(--text-sm); line-height: var(--leading-ui); }
.fam-plan-card > p { margin: 6px 0; color: var(--ink-2); }
.fam-plan-card .fam-plan-why { color: var(--ink); }
.fam-plan-reframe { padding: 7px 9px; background: var(--bg); border-radius: var(--r-sm); color: var(--ink) !important; }
.fam-plan-card ol { margin: 9px 0; padding-left: 22px; }
.fam-plan-card li { padding-left: 3px; margin-bottom: 5px; color: var(--ink); }
.fam-plan-how { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; padding: 8px 10px; background: var(--lv-excepcional-esperado-alto-bg); border-radius: var(--r-sm); }
.fam-plan-how p { margin: 0; color: var(--ink-2); }
.fam-plan-how p:first-child { grid-column: 1 / -1; }
.fam-plan-avoid { color: var(--lv-observacion-txt) !important; }
.fam-plan-context { display: flex; align-items: flex-start; gap: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
.fam-plan-context svg { flex: none; margin-top: 2px; }
.family-report-responsible {
margin: 24px 0; padding: 13px 15px;
border: 1px solid var(--line);
border-radius: var(--r-sm); background: var(--bg);
}
.family-report-responsible h3 { margin: 0 0 6px; color: var(--navy); }
.family-report-responsible p { margin: 0; color: var(--ink-2); }
.family-report-responsible small { display: block; margin-top: 7px; color: var(--ink-3); font-size: var(--text-sm); line-height: var(--leading-ui); }
.fam-area { display:flex; align-items:flex-start; gap:11px; flex-wrap:wrap;
padding:11px 0; border-bottom:1px solid var(--line); }
.fam-area-t { flex: 1 1 11rem; min-width: 11rem; }
.fam-area-t b { display:block; color:var(--navy); font-size: var(--text-lg); line-height: var(--leading-tight); }
.fam-area-t p { margin:2px 0 0; color:var(--ink-2); }
.fam-area-t .fam-area-inside {
margin-top:6px; padding-left:9px; border-left:2px solid var(--line);
color:var(--ink);
}
.fam-informant-radar {
margin: 22px 0 26px; padding: 16px 18px 13px;
border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg);
}
.fam-informant-radar h3 { margin: 0 0 5px; color: var(--navy); }
.fam-informant-radar > p { margin: 0; color: var(--ink-2); }
.fam-informant-radar svg { display: block; width: 100%; height: auto; margin: 4px auto 0; }
.fam-informant-radar .fam-informant-note {
margin-top: 0; padding: 8px 10px;
border-radius: var(--r-sm); background: var(--surface-action); color: var(--ink);
}
.family-view-banner {
display:flex; align-items:center; justify-content:space-between; gap:16px;
margin:0 0 16px; padding:12px 16px; border:1px solid var(--teal);
border-radius:var(--r-md); background:var(--surface-action);
}
.family-view-banner > div { display:flex; align-items:center; gap:10px; min-width:0; }
.family-view-banner svg { color:var(--teal-txt); flex:none; }
.family-view-banner span { display:flex; flex-direction:column; gap:2px; color:var(--ink); }
.family-view-banner small { color:var(--ink-2); font-size: var(--text-sm); line-height:1.4; }
.family-view-banner .btn-outline { flex:none; background:var(--card); }
.family-view-banner .family-view-banner-actions { justify-content:flex-end; flex-wrap:wrap; }
.family-observation-inline { margin:12px 0; display:flex; flex-direction:column; gap:8px; }
.family-observation-inline article {
padding:11px 13px; border:1px solid var(--line);
border-radius:var(--r-sm); background:var(--card);
}
.family-observation-inline article.is-draft {
background:var(--lv-observacion-bg);
}
.family-observation-inline p { margin:6px 0 4px; color:var(--ink); font-size: var(--text-sm); line-height:1.5; }
.family-observation-inline small { color:var(--ink-3); font-size: var(--text-sm); }
.family-observation-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.family-observation-meta b { color:var(--navy); font-size: var(--text-sm); }
.family-observation-meta .pill {
margin-left:auto; font-size: var(--text-sm); background:var(--lv-esperado-bg); color:var(--lv-esperado-txt);
}
.family-observation-meta .pill.draft,
.family-observation-manager .pill.draft {
background:var(--lv-observacion-bg); color:var(--lv-observacion-txt);
}
.family-observation-manager { margin:22px 0 0; }
.family-observation-manager > .muted { margin:-5px 0 16px; font-size: var(--text-sm); }
.family-observation-compose {
display:grid; grid-template-columns:minmax(170px,.7fr) minmax(190px,1fr);
gap:10px 14px; align-items:end;
}
.family-observation-compose .family-observation-text { grid-column:1 / -1; }
.family-observation-compose > .btn-outline { justify-self:start; }
.family-observation-list { display:flex; flex-direction:column; gap:10px; margin:18px 0 12px; }
.family-observation-list article { padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-sm); }
.family-observation-list header { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; margin-bottom:8px; }
.family-observation-list header > div { display:flex; flex-direction:column; gap:2px; }
.family-observation-list header b { color:var(--navy); font-size: var(--text-sm); }
.family-observation-list header small { color:var(--ink-3); font-size: var(--text-sm); }
.family-observation-list textarea { width:100%; resize:vertical; }
.family-observation-list p { margin:0; color:var(--ink); font-size: var(--text-sm); line-height:1.5; }
.family-observation-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.family-observation-actions .danger { color:var(--lv-intervencion-prioritaria-txt); }
#familyObservationMessage { min-height:18px; margin-top:8px; font-size: var(--text-sm); }
.fam-team-message {
margin: 0 0 22px; padding: 14px 16px; border: 1px solid rgba(14,138,134,.25);
border-radius: var(--r-sm); background: var(--surface-action);
}
.fam-team-message h3, .fam-team-notes h3 { margin: 0 0 6px; color: var(--navy); }
.fam-team-message p { margin: 0; color: var(--ink); }
.fam-team-message small { display:block; margin-top:8px; color:var(--ink-3); font-size: var(--text-sm); line-height: var(--leading-ui); }
.fam-team-notes { margin: 24px 0; padding-top: 16px; border-top: 2px solid var(--line); }
.fam-team-notes article { display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--line); }
.fam-team-notes article > span { width:24px; height:24px; display:grid; place-items:center; flex:none;
border-radius:50%; background:var(--surface-info); color:var(--info); font-weight:700; font-size: var(--text-sm); line-height: var(--leading-ui); }
.fam-team-notes article p { margin:0; color:var(--ink); }
.fam-team-notes article small { display:block; margin-top:4px; color:var(--ink-3); font-size: var(--text-sm); line-height: var(--leading-ui); }
.nota-curso {
display: flex; gap: 10px; align-items: flex-start;
margin-top: 10px; padding: 10px 13px;
border-radius: var(--r-sm);
background: var(--surface-info); color: var(--info);
font-size: var(--text-md); line-height: 1.55;
}
.nota-curso > i {
flex: none; width: 20px; height: 20px; border-radius: 50%;
background: var(--info); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-style: normal; font-size: var(--text-xs);
margin-top: 1px;
}
.family-report-editor { max-width: 860px; margin: 22px auto 0; }
.family-report-editor > .muted { margin:-5px 0 16px; font-size: var(--text-sm); }
.family-report-editor-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:20px; align-items:start; }
.editor-field-label {
display:block; margin:0 0 7px; color:var(--ink-2); font-size: var(--text-sm);
font-weight:700; text-transform:uppercase; letter-spacing:.035em;
}
.family-report-order { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.family-report-order > div {
display:flex; align-items:center; gap:8px; min-height:38px; padding:6px 7px;
border:1px solid var(--line); border-radius: var(--r-sm); background:var(--bg);
}
.family-report-order .drag-mark { color:var(--ink-3); font-size: var(--text-md); }
.family-report-order b { flex:1; color:var(--ink); font-size: var(--text-sm); line-height:1.25; }
.family-report-order .frs-on {
display:flex; align-items:center; gap:8px; flex:1; cursor:pointer; margin:0;
}
.family-report-order .frs-on input { flex:none; width:15px; height:15px; accent-color:var(--teal); cursor:pointer; }
.family-report-order > div.frs-off { background:var(--bg); border-style:dashed; }
.family-report-fixed { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.family-report-fixed > div {
display:flex; align-items:center; gap:8px; min-height:38px; padding:6px 7px;
border:1px solid var(--line); border-radius: var(--r-sm); background:var(--bg);
}
.family-report-fixed b { flex:1; color:var(--ink); font-size: var(--text-sm); line-height:1.25; }
.family-report-fixed .frs-on {
display:flex; align-items:center; gap:8px; flex:1; cursor:pointer; margin:0;
}
.family-report-fixed .frs-on input { flex:none; width:15px; height:15px; accent-color:var(--teal); cursor:pointer; }
.family-report-fixed small { flex:none; font-size: var(--text-sm); white-space:nowrap; }
.family-report-fixed > div.frs-off { background:var(--bg); border-style:dashed; }
.family-report-order > div.frs-off b { color:var(--ink-3); text-decoration:line-through; }
.family-report-order .order-actions { display:flex; gap:3px; }
.family-report-order .btn-ghost { width:28px; height:28px; padding:0; }
.family-report-order .btn-ghost:disabled { opacity:.28; cursor:not-allowed; }
.family-report-note-editor { margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.family-report-note-list { margin-top:12px; }
.family-report-note-list > div {
display:flex; align-items:flex-start; gap:10px; padding:8px 0; border-bottom:1px solid var(--line);
color:var(--ink); font-size: var(--text-sm); line-height:1.4;
}
.family-report-note-list > div > span { flex:1; }
.family-report-note-list small { color:var(--ink-3); }
.report-cover-name { margin-bottom:4px; }
.report-cover-data { margin-bottom:18px; }
.anexo { margin-top:28px; padding-top:18px; border-top:2px solid var(--line); }
.anexo h3 { font-size: var(--text-lg); margin:0 0 6px; }
.anexo h4 { margin:20px 0 8px; color:var(--navy); font-size: var(--text-md); }
.anexo .anexo-titulo { margin-top:26px; padding-top:12px; border-top:1px solid var(--line); }
.anexo .anexo-titulo:first-of-type { margin-top:20px; padding-top:0; border-top:0; }
.anexo h5.anexo-sub { margin:18px 0 8px; color:var(--ink); font-size: var(--text-sm); font-weight:600; }
.anexo-nota { font-size: var(--text-xs); color:var(--ink-2); line-height:1.5; margin:0 0 12px; }
.anexo-t .pill { white-space: normal; }
.anexo-t { width:100%; border-collapse:collapse; table-layout: fixed; font-size: var(--text-sm); }
.anexo-t th, .anexo-t td { overflow-wrap: anywhere; }
.anexo-t th { text-align:left; font-size: var(--text-sm); text-transform:uppercase;
letter-spacing:0.04em; color:var(--ink-3); font-weight:600;
padding:0 8px 6px 0; border-bottom:1px solid var(--line); }
.anexo-t td { padding:7px 8px 7px 0; border-bottom:1px solid var(--line); color:var(--ink); }
.anexo-t .num { text-align:right; font-variant-numeric:tabular-nums; }
.anexo-subdimensions { margin-top:24px; }
.anexo-domain { margin-top:18px; }
.anexo-domain-head { display:flex; align-items:center; gap:9px; margin-bottom:8px; }
.anexo-domain-head .mini-icon { width:28px; height:28px; }
.anexo-domain-head h5 { margin:0; color:var(--navy); font-size: var(--text-sm); }
.anexo-domain-head small { color:var(--ink-3); font-size: var(--text-sm); }
.anexo-curve-grid {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
}
.anexo-curve-card {
min-width:0; padding:10px 11px 7px; border:1px solid var(--line);
border-radius:var(--r-sm); background:var(--card);
overflow-x: auto;}
.anexo-curve-card header {
display:flex; align-items:flex-start; justify-content:space-between; gap:8px;
margin-bottom:2px;
flex-wrap: wrap;
}
.anexo-curve-card header b { flex: 1 1 9rem; min-width: 9rem;
color:var(--ink); font-size: var(--text-sm); line-height:1.35; }
.anexo-curve-card header .pill { flex:none; font-size: var(--text-sm); }
.anexo-curve-card svg { width:100%; height:auto; }
@media (max-width: 700px) {
.fam-report-findings, .fam-strength-grid, .fam-plan-how, .fam-level-guide > div { grid-template-columns: 1fr; }
.fam-plan-how p:first-child { grid-column: auto; }
.family-view-banner { align-items:stretch; flex-direction:column; }
.family-view-banner .btn-outline { width:100%; justify-content:center; }
.family-view-banner .family-view-banner-actions { width:100%; }
.family-observation-compose { grid-template-columns:1fr; }
.family-observation-compose .family-observation-text { grid-column:auto; }
.family-observation-list header { flex-direction:column; }
.family-report-editor-grid { grid-template-columns:1fr; }
.report-head-actions { justify-content:flex-start; }
.anexo-curve-grid { grid-template-columns:1fr; }
}
@media print {
.rep-prep { display:none; }
.fam-diagnosis, .fam-strength-card, .fam-informant-radar,
.fam-team-message, .fam-team-notes article, .family-report-responsible,
.family-profile-overview, .family-cognitive-summary, .family-cognitive-domain,
.fam-level-guide article { break-inside: avoid; }
.fam-report-heading { break-after: avoid; }
.fam-report-section { break-before: auto; }
.fam-plan-card { box-shadow: none; break-inside: avoid; }
.fam-plan-head, .fam-plan-reframe, .fam-plan-how { break-inside: avoid; }
.fam-strength-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
[data-family-report-section="cuestionarios"] .grid > div { break-inside: avoid; }
}
.fam-report-conclusion, .professional-summary, .professional-conclusion {
margin: 24px 0; padding: 15px 17px;
border-radius: var(--r-sm); background: var(--surface-subtle);
}
.fam-report-conclusion h3, .professional-summary h3, .professional-conclusion h3 { margin: 0 0 7px; color: var(--navy); }
.fam-report-conclusion p, .professional-summary p, .professional-conclusion p { margin: 6px 0 0; color: var(--ink-2); }
.professional-section { margin: 24px 0; }
.professional-section > h3 { margin: 0 0 9px; color: var(--navy); }
.professional-resource-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.professional-resource { padding: 11px 12px; border: 1px solid var(--line);
border-radius: var(--r-sm); background: var(--card); }
.professional-resource b { color: var(--navy); font-size: var(--text-lg); line-height: var(--leading-tight); }
.pr-cab { flex-wrap: wrap; }
.pr-cab > b { flex: 1 1 9rem; min-width: 9rem; }
.professional-resource p { margin: 5px 0 0; color: var(--ink-2); }
.professional-opportunity-list { display: flex; flex-direction: column; gap: 8px; }
.professional-opportunity { display: flex; gap: 10px; padding: 11px 12px; border: 1px solid var(--line);
border-radius: var(--r-sm); background: var(--card); }
.professional-opportunity > span, .professional-plan-item header > span {
width: 24px; height: 24px; display: grid; place-items: center; flex: none;
border-radius: 50%; background: var(--navy); color: #fff; font-size: var(--text-sm); font-weight: 700;
}
.professional-opportunity b { color: var(--navy); font-size: var(--text-lg); line-height: var(--leading-tight); }
.professional-opportunity p { margin: 4px 0 0; color: var(--ink-2); }
.professional-plan > .muted { margin: -4px 0 10px; font-size: var(--text-sm); }
.professional-plan-item { margin-top: 9px; padding: 12px 14px; border: 1px solid var(--line);
border-radius: var(--r-sm); }
.professional-plan-item header { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 7px; }
.professional-plan-item header b { display: block; color: var(--navy); font-size: var(--text-lg); line-height: var(--leading-tight); }
.professional-plan-item header small { color: var(--ink-3); font-size: var(--text-sm); }
.professional-plan-item p, .professional-plan-item li { color: var(--ink-2); }
.professional-plan-item p { margin: 5px 0; }
.professional-plan-item ol { margin: 7px 0; padding-left: 22px; }
.professional-plan-item li { margin-bottom: 3px; }
.professional-plan-item > div { display: flex; gap: 8px; padding: 7px 9px; background: var(--lv-excepcional-esperado-alto-bg);
border-radius: var(--r-sm); color: var(--ink-2); font-size: var(--text-sm); }
.report-signature { width: 260px; margin: 42px 0 10px auto; text-align: center; break-inside: avoid; }
.report-signature > span { display: block; border-top: 1px solid var(--ink-2); }
.report-signature b { display: block; margin-top: 5px; color: var(--navy); }
.report-signature small { color: var(--ink-3); font-size: var(--text-sm); line-height: var(--leading-ui); }
.report-quality-panel { max-width: 860px; margin: 12px auto 18px; padding: 12px 15px; border: 1px solid var(--line);
border-radius: var(--r-sm); background: var(--card); }
.report-quality-panel.warn { border-left: 4px solid var(--lv-observacion); padding-left: 12px; }
.report-quality-panel.error { border-left: 4px solid var(--lv-intervencion-prioritaria); padding-left: 12px; }
.report-quality-panel > div { display: flex; justify-content: space-between; gap: 12px; }
.report-quality-panel b { color: var(--navy); font-size: var(--text-sm); }
.report-quality-panel span, .report-quality-panel p, .report-quality-panel li {
color: var(--ink-2); font-size: var(--text-sm); line-height: 1.45;
}
.report-quality-panel p { margin: 5px 0 0; }
.report-quality-panel ul { margin: 7px 0 0; padding-left: 18px; }
.report-quality-checks {
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 6px;
margin-top: 10px;
}
.report-quality-checks span {
display: block;
padding: 6px 8px;
border-radius: var(--r-sm);
background: var(--surface-soft);
font-size: var(--text-sm);
line-height: 1.25;
}
.report-quality-checks .pass { color: var(--teal-txt); }
.report-quality-checks .fail { color: var(--lv-intervencion-prioritaria-txt); }
@media (max-width: 760px) {
.report-quality-checks { grid-template-columns: 1fr 1fr; }
}
.report-running-head { display: none; }
.report-major-title { margin: 24px 0 12px; padding: 8px 0 7px; border-bottom: 2px solid var(--teal);
color: var(--navy); letter-spacing: .01em; }
.report-brand + .report-major-title { margin-top: 0; }
.report-applied-tests {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px;
margin: 0 0 18px;
}
.report-applied-tests > div {
display: flex; flex-direction: column; gap: 3px; padding: 10px 12px;
border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg);
}
.report-applied-tests b { color: var(--navy); font-size: var(--text-lg); line-height: var(--leading-tight); }
.report-applied-tests span { color: var(--ink-3); font-size: var(--text-sm); line-height: var(--leading-ui); }
@media (max-width: 700px) {
.professional-resource-grid, .report-applied-tests { grid-template-columns: 1fr; }
}
@media print {
@page :left {
@top-center {
content: var(--print-document-title, "Informe Corticalia") " · "
var(--print-document-context, "Evaluación escolar integral");
color: #0D3A66;
font-family: "Inter", sans-serif;
font-size: 9.5pt;
font-weight: 700;
}
@bottom-left {
content: "Corticalia";
color: #607487;
font-family: "Inter", sans-serif;
font-size: 9pt;
}
@bottom-right {
content: "Página " counter(page) " de " counter(pages);
color: #607487;
font-family: "Inter", sans-serif;
font-size: 9pt;
}
}
@page :right {
@top-center {
content: var(--print-document-title, "Informe Corticalia") " · "
var(--print-document-context, "Evaluación escolar integral");
color: #0D3A66;
font-family: "Inter", sans-serif;
font-size: 9.5pt;
font-weight: 700;
}
@bottom-left {
content: "Corticalia";
color: #607487;
font-family: "Inter", sans-serif;
font-size: 9pt;
}
@bottom-right {
content: "Página " counter(page) " de " counter(pages);
color: #607487;
font-family: "Inter", sans-serif;
font-size: 9pt;
}
}
@page report {
size: letter portrait;
margin: 23mm 18mm 19mm 21mm;
@top-center {
content: var(--print-document-title, "Informe Corticalia") " · "
var(--print-document-context, "Evaluación escolar integral");
color: #0D3A66;
font-family: "Inter", sans-serif;
font-size: 9.5pt;
font-weight: 700;
}
@bottom-left {
content: "Corticalia";
color: #607487;
font-family: "Inter", sans-serif;
font-size: 9pt;
}
@bottom-right {
content: "Página " counter(page) " de " counter(pages);
color: #607487;
font-family: "Inter", sans-serif;
font-size: 9pt;
}
}
@page familyReport {
size: letter portrait;
margin: 23mm 18mm 19mm 21mm;
@top-center {
content: var(--print-document-title, "Informe para la familia") " · "
var(--print-document-context, "Corticalia");
color: #0D3A66;
font-family: "Inter", sans-serif;
font-size: 9.5pt;
font-weight: 700;
}
@bottom-left {
content: "Corticalia";
color: #607487;
font-family: "Inter", sans-serif;
font-size: 9pt;
}
@bottom-right {
content: "Página " counter(page) " de " counter(pages);
color: #607487;
font-family: "Inter", sans-serif;
font-size: 9pt;
}
}
@page professionalReport {
size: letter portrait;
margin: 23mm 18mm 19mm 21mm;
@top-center {
content: var(--print-document-title, "Informe psicoeducativo individual") " · "
var(--print-document-context, "Corticalia");
color: #0D3A66;
font-family: "Inter", sans-serif;
font-size: 9.5pt;
font-weight: 700;
}
@bottom-left {
content: "Corticalia";
color: #607487;
font-family: "Inter", sans-serif;
font-size: 9pt;
}
@bottom-right {
content: "Página " counter(page) " de " counter(pages);
color: #607487;
font-family: "Inter", sans-serif;
font-size: 9pt;
}
}
@page {
size: letter portrait;
margin: 20mm 18mm;
}
html, body { background: var(--card) !important; }
body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.report-sheet svg, .report-sheet img, .pds svg, .pds img {
max-width: 100% !important; height: auto;
}
.report-sheet .meter { min-width: 0; }
.page-head, .rep-prep, .report-quality-panel, .no-print,
.drawer, .drawer-backdrop, .modal-backdrop, .bat-overlay { display: none !important; }
.app.active, .main { display: block !important; min-height: 0 !important; height: auto !important; }
#content > * { display: none !important; }
#content > .report-sheet, #content > #reportPreview { display: block !important; }
#content > .hoja-imprimible, #content > :has(> .hoja-imprimible) { display: block !important; }
#reportPreview > * { display: none !important; }
#reportPreview > .report-sheet { display: block !important; }
.content { padding: 0 !important; overflow: visible !important; }
.report-sheet {
page: report; width: auto !important; max-width: none !important; margin: 0 !important;
padding: 0 !important; overflow: visible !important; border: 0 !important;
border-radius: 0 !important; box-shadow: none !important;
position: static !important;
font-family: var(--font-sans); font-size: 12pt; line-height: 1.55;
}
.report-sheet.report-family { page: familyReport; }
.report-sheet.report-professional { page: professionalReport; }
.report-sheet::before { display: none !important; }
.report-running-head { display: none !important; }
.report-brand { margin-bottom: 18px; padding-bottom: 12px; }
.report-brand img, .report-brand svg { width: 120px; }
.report-sheet h2 { font-size: 16pt !important; line-height: 1.28; }
.report-sheet h3 { font-size: 13.5pt !important; line-height: 1.32; }
.report-sheet h4 { font-size: 12.5pt !important; line-height: 1.35; }
.report-sheet p, .report-sheet li, .report-sheet td {
font-size: 12pt !important; line-height: 1.55;
}
.report-sheet th {
font-size: 10.5pt !important; line-height: 1.35;
}
.report-sheet small, .report-sheet .report-kind,
.report-sheet .pill, .report-sheet .muted small {
font-size: 10pt !important; line-height: 1.4;
}
.report-sheet .privacy-note span,
.report-sheet .report-document-footer span {
font-size: 10.5pt !important; line-height: 1.45;
}
.report-sheet table {
width: 100%; overflow-wrap: anywhere; hyphens: auto;
}
.report-sheet .pill {
border: .3mm solid currentColor;
}
.fam-report-section, .professional-section { margin: 18px 0; }
.fam-diagnosis, .professional-summary, .professional-conclusion, .fam-report-conclusion {
box-shadow: none; break-inside: avoid;
}
.professional-resource, .professional-opportunity,
.fam-strength-card, .fam-area, .test-strip, .report-applied-tests,
.report-measurable-plans > article, .family-cognitive-summary,
.family-cognitive-domain, .family-report-responsible,
.family-profile-overview { break-inside: avoid; }
.anexo-cognitive { break-inside: auto; }
.anexo-cognitive > h4, .anexo-cognitive > .anexo-nota { break-after: avoid; }
.privacy-note, .report-signature, .report-major-title, .report-document-footer { break-inside: avoid; }
.report-signature { margin-top: 22px; margin-bottom: 4px; }
.report-document-footer { margin-top: 8px !important; padding-top: 8px !important; }
.report-sheet h2, .report-sheet h3, .report-sheet h4, .report-major-title,
.fam-report-heading, .card-title { break-after: avoid; }
.report-sheet h2 + p, .report-sheet h3 + p, .report-sheet h4 + p { break-before: avoid; }
.report-sheet p, .report-sheet li { orphans: 3; widows: 3; }
.report-sheet table { break-inside: auto; }
.report-sheet thead { display: table-header-group; }
.report-sheet tr { break-inside: avoid; }
.report-sheet figure, .report-sheet svg, .report-sheet .sub-row,
.report-sheet .kpi-row { break-inside: avoid; }
.report-institutional .table,
.pds-tbl[data-print-keep="true"] { break-inside: avoid; }
.report-sheet .anexo-curve-grid { grid-template-columns: 1fr; }
.report-sheet .fam-informant-radar { max-width: 170mm; margin-left: auto; margin-right: auto; }
.report-sheet .family-profile-overview svg {
max-width: 133mm !important; display: block; margin-left: auto; margin-right: auto;
}
.anexo-t { break-inside: auto; }
.anexo { break-before:page; }
.report-cover { break-after: page; break-inside: avoid; }
.report-family .report-cover { break-after: auto; }
.anexo-titulo { break-after: avoid; margin-top: 20px; }
.anexo-sub { break-after: avoid; }
.anexo-domain-head { break-after:avoid; }
.anexo-curve-card { break-inside:avoid; }
.fam-diagnosis, .fam-plan-card, .fam-informant-radar,
.professional-summary, .professional-conclusion, .fam-report-conclusion,
.report-measurable-plans > article {
break-inside: auto;
}
.clinical-integrated-synthesis { break-inside: auto; }
.professional-plan-item { break-inside: auto; }
.fam-diagnosis .fam-report-heading,
.fam-plan-head, .fam-plan-reframe,
.fam-informant-radar > h3, .fam-informant-radar > h3 + p,
.professional-summary h3, .professional-conclusion h3,
.fam-report-conclusion h3,
.professional-plan-item header {
break-after: avoid;
}
.professional-plan-item header + p { break-before: avoid; }
.report-sheet, .report-sheet p, .report-sheet li,
.report-sheet div, .report-sheet td {
orphans: 3; widows: 3;
}
.fam-plan-card ol, .fam-plan-card ul, .fam-plan-how,
.fam-plan-avoid, .fam-plan-context { break-inside: avoid; }
.professional-plan-item ol, .professional-plan-item ul,
.professional-plan-item > div { break-inside: avoid; }
.fam-informant-radar svg { break-after: avoid; }
.fam-informant-note { break-before: avoid; break-inside: avoid; }
.family-profile-overview h3, .family-profile-overview h3 + p { break-after: avoid; }
.anexo-curve-card b, .anexo-curve-card svg { break-after: avoid; }
.report-sheet .anexo-curve-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8mm 6mm;
}
.report-sheet .anexo-curve-card svg { min-width: 0 !important; }
.report-signature { break-before: avoid; }
.report-document-footer { break-before: avoid; }
}
.synthesis-frame {
margin: 0 0 12px; padding: 9px 14px;
border-radius: var(--r-sm);
font-weight: 600;
}
.rq-ledger { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; }
.rq-ledger summary { cursor: pointer; font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); }
.rq-ledger summary:hover { color: var(--navy); }
.rq-ledger-scroll { overflow-x: auto; margin-top: 10px; }
.rq-ledger table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.rq-ledger th { text-align: left; padding: 6px 10px; background: var(--surface-subtle); color: var(--navy);
border-bottom: 2px solid var(--line); white-space: nowrap; }
.rq-ledger td { padding: 7px 10px; border-bottom: 1px solid var(--line);
color: var(--ink-2); line-height: 1.45; vertical-align: top; min-width: 150px; }
.rq-ledger td b { color: var(--navy); }
.pv-guide {
position: absolute; left: -18mm; right: -18mm; height: 0;
border-top: 1px dashed var(--lv-intervencion-prioritaria); pointer-events: none; z-index: 5;
}
.pv-guide span {
position: absolute; right: 0; top: 4px; padding: 1px 7px;
border-radius: var(--r-sm); background: var(--card); color: var(--lv-intervencion-prioritaria-txt);
font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.04em;
}
.pv-bar {
position: fixed; left: 50%; bottom: 22px; z-index: 300; transform: translateX(-50%);
display: flex; align-items: center; gap: 14px; padding: 10px 8px 10px 18px;
border-radius: var(--r-md); background: var(--navy); color: #fff;
box-shadow: var(--sh-3); font-size: var(--text-sm);
}
.pv-bar b { font-weight: 700; }
.pv-bar .pv-sep { opacity: 0.45; }
.pv-bar button {
border: 0; border-radius: var(--r-sm); padding: 7px 15px; cursor: pointer;
background: rgba(255,255,255,0.16); color: #fff;
font-size: var(--text-sm); font-weight: 600; font-family: inherit;
}
.pv-bar button:hover { background: rgba(255,255,255,0.3); }
.piar-fila.abierta { background: var(--surface-action); }
.piar-fila.recien { animation: piarOk 1.4s ease-out; }
@keyframes piarOk { 0%, 30% { background: var(--surface-action); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .piar-fila.recien { animation: none; } }
.piar-det { margin: -8px 0 2px; background: var(--bg); border: 1px solid var(--line);
border-top: 0; border-radius: 0 0 var(--r-md) var(--r-md); }
.piar-det-cuerpo { padding: 16px 18px; border-bottom: 2px solid var(--line); }
.pws-topline {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
margin-bottom: var(--space-3);
}
.pws-topline .pws-back { margin-left: 0; }
.pws-loading {
max-width: 620px; margin: 56px auto; display: flex; align-items: center;
gap: var(--space-4);
}
.pws-loading .spinner { flex: none; }
.pws-loading b, .pws-error b { color: var(--navy); }
.pws-loading p, .pws-error p { margin: 3px 0 0; }
.pws-error { max-width: 620px; margin: 40px auto; }
.pws-error .btn-outline { margin-top: var(--space-4); }
.pws-person { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.pws-person > div { min-width: 0; }
.pws-person h1 { color: var(--navy); overflow-wrap: anywhere; }
.pws-status { font-weight: var(--weight-semibold); color: var(--ink-2); }
.pws-body { margin: 0; padding: var(--space-5); }
.pws-body > .piar-mx { margin: calc(-1 * var(--space-5)); }
.pws-body .wz { max-width: none; }
@media (max-width: 620px) {
.pws-topline > span { display: none; }
.pws-person { align-items: flex-start; }
.pws-body { padding: var(--space-4); }
}
.piar-ed { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; }
@media (max-width: 900px) { .piar-ed { grid-template-columns: 1fr; gap: 16px; } }
.piar-ed-h { padding: 8px 0; border-bottom: 1px solid var(--line-soft);
display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.piar-ed-h:last-of-type { border-bottom: 0; }
.piar-ed-h-t { flex: 1 1 100%; display: flex; justify-content: space-between; gap: 10px;
font-size: var(--text-sm); }
.piar-ed-h-t .muted { font-size: var(--text-sm); }
.piar-ed-estado { font-size: var(--text-sm); padding: 4px 8px; }
.piar-ed-nota { flex: 1 1 180px; font-size: var(--text-xs); padding: 5px 8px; }
.piar-ed-nota-ro { font-size: var(--text-xs); }
.piar-ed-firmas { display: flex; gap: 9px; font-size: var(--text-sm); color: var(--ink-2); }
.piar-ed-firmas label { display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.piar-ed-aviso { flex: 1 1 100%; margin: 2px 0 0; font-size: var(--text-sm); color: var(--ink-3); }
.piar-ed-aviso.alerta { color: var(--lv-intervencion-prioritaria-txt); font-weight: 600; }
.piar-ed-guardar-fila { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.piar-ed-msg, .piar-ed-smsg { font-size: var(--text-sm); }
.piar-ed-nueva textarea { width: 100%; font-size: var(--text-sm); padding: 8px 10px; resize: vertical; }
.piar-ed-nueva-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 7px; }
.piar-ed-nueva-pie select, .piar-ed-nueva-pie input { font-size: var(--text-sm); padding: 5px 8px; }
.piar-ed-prox { display: flex; align-items: center; gap: 5px; font-size: var(--text-sm); color: var(--ink-2); }
.piar-ed-hist { margin-top: 12px; }
.piar-ed-seg { padding: 7px 0; border-top: 1px solid var(--line-soft); }
.piar-ed-seg .muted { font-size: var(--text-sm); margin-left: 6px; }
.piar-ed-seg p { margin: 3px 0 0; font-size: var(--text-sm); color: var(--ink-2); line-height: 1.42; }
.piar-ir { margin-top: 12px; }
.piar-inc { display: flex; align-items: flex-start; gap: 7px; margin: 8px 0 0;
padding: 9px 12px; background: var(--surface-subtle);
border-radius: var(--r-sm); font-size: var(--text-sm); color: var(--ink-2); line-height: 1.45; }
.piar-inc svg { flex: none; margin-top: 2px; }
.btn-primary, .btn-danger, .btn-outline, .btn-ghost, .chip, .kpi-chip, .stu-row, .card-link, .nav-item {
transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-ui) var(--ease-out),
background-color var(--duration-ui) var(--ease-out), border-color var(--duration-ui) var(--ease-out),
color var(--duration-ui) var(--ease-out), filter var(--duration-ui) var(--ease-out);
}
.btn-primary:active, .btn-danger:active, .btn-outline:active, .btn-ghost:active, .chip:active { transform: scale(0.98); transition-duration: 90ms; }
.kpi-chip:active, .stu-row:active, .ha-fila:active { transform: none; transition-duration: 90ms; }
.kpi-chip:hover, .stu-row:hover, .ha-fila:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
.card { box-shadow: var(--sh-1); }
:is(.card, .sec, .modal-card, .drawer) :is(.card, .sec) { box-shadow: none; }
.modal-card[style*="--qc"] { border-top: 4px solid var(--qc); }
@keyframes vistaAparece { from { opacity: 0; } to { opacity: 1; } }
.vista-entra { animation: vistaAparece var(--duration-fast) var(--ease-out); }
h1, .page-head h1 { letter-spacing: -0.021em; }
h2 { letter-spacing: -0.014em; }
h3, .card-title h3 { letter-spacing: -0.008em; }
.kpi-value, .kc-n, .score { letter-spacing: -0.028em; }
:where(button, a, select, input, textarea, [tabindex]):focus-visible {
outline: none; box-shadow: var(--ring);
transition: box-shadow .18s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
.btn-primary:active, .btn-danger:active, .btn-outline:active, .btn-ghost:active, .chip:active,
.kpi-chip:active, .stu-row:active, .ha-fila:active,
.kpi-chip:hover, .stu-row:hover, .ha-fila:hover,
.btn-primary:hover, .btn-danger:hover, .btn-outline:hover, .role-card:hover, .card.kpi:hover,
.domain-card:hover, .fam-card:hover, .dom-pro:hover, .quiz-opt:hover, .piar-fila:hover { transform: none; }
.vista-entra { animation: none; }
}
.pd { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.pd-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pd-conf { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
@media (max-width: 700px) { .pd-conf { grid-template-columns: 1fr; } }
.pd-tabla-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }
.pd-tabla { margin: 0; min-width: 720px; }
.pd-tabla th { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.3px;
vertical-align: bottom; white-space: normal; line-height: 1.25; }
.pd-tabla td { vertical-align: top; padding: 6px; }
.pd-i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; cursor: help;
background: var(--ink-3); color: #fff; font-size: var(--text-sm); line-height: 12px; text-align: center;
font-style: normal; text-transform: none; }
.pd-in { width: 100%; min-width: 128px; font: inherit; font-size: var(--text-sm); color: var(--ink);
border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 7px; background: var(--card); resize: vertical; }
.pd-in:focus { outline: none; border-color: var(--teal-txt); box-shadow: var(--ring); }
.pd-del { border: none; background: none; cursor: pointer; color: var(--ink-3); font-size: var(--text-lg);
line-height: 1; padding: 4px 6px; border-radius: var(--r-sm); }
.pd-del:hover { background: var(--lv-intervencion-prioritaria-bg); color: var(--lv-intervencion-prioritaria-txt); }
.pd-aviso { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 10px 12px;
background: var(--lv-requiere-apoyo-bg); border-left: 3px solid var(--lv-requiere-apoyo); border-radius: var(--r-sm); }
.pd-aviso b { color: var(--lv-requiere-apoyo-txt); font-size: var(--text-sm); }
.pd-aviso p { margin: 3px 0 0; font-size: var(--text-sm); color: var(--ink-2); line-height: 1.45; }
.pd-aviso-alt { color: var(--ink) !important; }
.pd-props { margin-top: 18px; }
.pd-prop { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; margin-top: 10px;
background: var(--bg-soft); }
.pd-prop-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.pd-ev { font-size: var(--text-sm); font-weight: 600; padding: 2px 8px; border-radius: var(--r-lg); cursor: help; }
.pd-prop-aj { margin: 0; font-size: var(--text-md); color: var(--ink); line-height: 1.5; }
.pd-prop-ba { margin: 6px 0 0; font-size: var(--text-sm); color: var(--ink-2); line-height: 1.45; }
.pd-prop-fu { margin: 6px 0 0; font-size: var(--text-sm); color: var(--ink-3); line-height: 1.45; }
.pd-prop-no { margin: 5px 0 0; font-size: var(--text-sm); color: var(--lv-requiere-apoyo-txt); line-height: 1.45; }
.pd-prop-dua { margin: 6px 0 0; font-size: var(--text-sm); color: var(--navy); line-height: 1.45;
padding: 6px 9px; background: var(--card); border-radius: var(--r-sm); }
.pd-prop-acc { display: flex; align-items: center; gap: 12px; margin-top: 9px; }
@media print {
.pd-conf, .pd-props, .pd-del, .pd-add, .pd-guardar, .pd-msg, .pd-nota-per { display: none !important; }
.pd-tabla-wrap { overflow: visible; border: none; }
.pd-tabla { min-width: 0; font-size: var(--text-sm); }
.pd-in { border: none; padding: 2px; background: none; resize: none; }
}
.pds-wrap { display: none; }
.pds-running { display: none; }
.pd-export { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.pd-export-t { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.4px;
color: var(--ink-3); font-weight: 600; }
@media print {
body.pds-imprimiendo > *:not(.pds-wrap) { display: none !important; }
body.pds-imprimiendo .pds-wrap { display: block !important; }
body.pds-imprimiendo .pds { page: piar; }
@page piar {
size: letter landscape;
margin: 22mm 17mm 18mm 20mm;
@top-center {
content: var(--print-document-title, "Corticalia · PIAR") " · "
var(--print-document-context, "Plan individual de ajustes razonables");
color: #0D3A66;
font-family: "Inter", sans-serif;
font-size: 9.5pt;
font-weight: 700;
}
@bottom-left {
content: "Corticalia · PIAR";
color: #607487;
font-family: "Inter", sans-serif;
font-size: 9pt;
}
@bottom-right {
content: "Página " counter(page) " de " counter(pages);
color: #607487;
font-family: "Inter", sans-serif;
font-size: 9pt;
}
}
body.pds-imprimiendo .pds-running { display: none; }
}
.pds { font-family: var(--font-sans); color: var(--ink); font-size: 12pt; line-height: 1.55; }
.pds-head { display: flex; justify-content: space-between; align-items: flex-start;
border-bottom: 2px solid var(--navy); padding-bottom: 8px; margin-bottom: 14px; }
.pds-head h1 { font-size: 14pt; color: var(--navy); margin: 0; letter-spacing: 0.2px; }
.pds-head p { margin: 3px 0 0; font-size: 10pt; color: var(--ink-2); }
.pds-fmt { font-size: 10pt; color: var(--ink-2); white-space: nowrap; }
.pds h2 { font-size: 14pt; color: var(--navy); margin: 18px 0 8px; break-after: avoid; }
.pds h3 { font-size: 12.5pt; color: var(--info); margin: 14px 0 6px; break-after: avoid; }
.pds p { font-size: 12pt; line-height: 1.55; margin: 0 0 9px; orphans: 3; widows: 3; }
.pds-datos { width: 100%; border-collapse: collapse; }
.pds-datos th { width: 26%; text-align: left; font-size: 10.5pt; background: var(--surface-subtle);
border: 1px solid var(--ink-adorno); padding: 6px 8px; font-weight: 600; }
.pds-datos td { border: 1px solid var(--ink-adorno); padding: 6px 8px; font-size: 11.5pt; }
.pds-tbl { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.pds-tbl th { background: var(--surface-info); border: 1px solid var(--ink-adorno); padding: 6px 7px;
font-size: 9.5pt; text-align: left; color: var(--navy); line-height: 1.35; }
.pds-tbl td { border: 1px solid var(--ink-adorno); padding: 6px 7px; font-size: 10.5pt;
vertical-align: top; line-height: 1.45; overflow-wrap: anywhere; hyphens: auto; }
.pds-tbl thead { display: table-header-group; }
.pds-tbl tr { break-inside: avoid; }
.pds-firmas { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 22px; }
.pds-firma { flex: 1 1 200px; break-inside: avoid; }
.pds-firma span { display: block; border-bottom: 1px solid var(--ink-3); height: 30px; }
.pds-firma b { display: block; font-size: 10.5pt; margin-top: 4px; }
.pds-firma i { font-size: 10pt; color: var(--ink-3); font-style: normal; }
.pds-pie { margin-top: 20px; padding-top: 8px; border-top: 1px solid var(--ink-adorno);
font-size: 10pt !important; color: var(--ink-2); line-height: 1.5; break-inside: avoid; }
.piar-link { padding: 15px 18px; }
.piar-link-t { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.piar-link-t h3 { margin: 0; font-size: var(--text-md); }
.piar-link-t p { margin: 3px 0 0; font-size: var(--text-sm); color: var(--ink-2); }
.piar-alta-fila { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
gap: 12px; margin-bottom: 8px; }
@media (max-width: 620px) { .piar-alta-fila { grid-template-columns: 1fr; } }
.piar-mx { padding: 16px 18px; border-bottom: 2px solid var(--line); background: var(--card); }
.piar-mx-cab { display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.piar-mx-cab .id-h { margin: 0; }
.piar-mx-n { display: inline-block; min-width: 20px; padding: 1px 6px; margin-left: 5px;
background: var(--navy); color: #fff; border-radius: var(--r-sm); font-size: var(--text-sm);
font-weight: 700; text-align: center; }
.piar-mx-cab-acc { display: flex; align-items: center; gap: 10px; }
.piar-mx-cab-acc select { font-size: var(--text-sm); padding: 4px 7px; }
.piar-mx-lista { display: flex; flex-direction: column; gap: 9px; }
.aj-vacio { margin: 0 0 10px; font-size: var(--text-sm); color: var(--ink-3); }
.aj { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; }
.aj-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.aj-area { font-size: var(--text-sm); font-weight: 700; color: var(--navy); }
.aj-acc { margin-left: auto; display: flex; gap: 9px; }
.aj-meta { background: var(--surface-subtle); color: var(--ink-2); }
.aj p { margin: 3px 0 0; font-size: var(--text-sm); line-height: 1.45; color: var(--ink-2); }
.aj-ajuste { color: var(--ink) !important; }
.aj-barrera span, .aj-salida span, .aj-nmeta span, .aj-origen span {
display: block; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.05em;
color: var(--ink-3); margin-bottom: 1px; }
.aj-meta-linea { font-size: var(--text-sm) !important; color: var(--ink-3) !important; }
.aj-nmeta { background: var(--surface-subtle); border-radius: var(--r-sm); padding: 6px 8px; margin-top: 6px !important; }
.aj-salida { border-top: 1px dashed var(--line); padding-top: 5px; margin-top: 6px !important; }
.aj-prop { background: var(--bg); border-color: var(--line); border-style: dashed; }
.aj-tag { background: var(--teal); color: #fff; border-radius: var(--r-sm); padding: 2px 7px;
font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.aj-origen { font-size: var(--text-sm) !important; color: var(--ink-3) !important; }
.aj-dua { font-size: var(--text-sm) !important; background: var(--surface-action); border-radius: var(--r-sm);
padding: 6px 8px; margin-top: 6px !important; color: var(--teal) !important; }
.aj-prop-acc { display: flex; align-items: center; gap: 9px; margin-top: 9px; flex-wrap: wrap; }
.aj-prop-acc .muted { font-size: var(--text-sm); }
.piar-mx-props { margin-top: 12px; }
.piar-mx-props-t { font-size: var(--text-sm); color: var(--ink-2); margin: 0 0 8px; }
.piar-mx-props .aj { margin-bottom: 9px; }
.aj-form { margin-top: 14px; padding: 14px; background: var(--bg); border-radius: var(--r-sm); }
.aj-form textarea, .aj-form input[type=text] { width: 100%; font-size: var(--text-sm); }
.wz { padding: 4px 2px; }
.wz-hoy {
display: flex; flex-wrap: wrap; align-items: center; gap: 11px;
margin: 0 0 14px; padding: 11px 12px; border: 1px solid var(--line);
border-radius: var(--r-sm); background: var(--surface-action);
}
.wz-hoy > div { flex: 1 1 16rem; min-width: 0; }
.wz-hoy.urgente { background: var(--surface-subtle); }
.wz-hoy.al-dia { background: var(--surface-action); }
.wz-hoy .mini-icon { width: 29px; height: 29px; background: var(--navy); flex: none; }
.wz-hoy.urgente .mini-icon { background: var(--gold); }
.wz-hoy.al-dia .mini-icon { background: var(--lv-excepcional-esperado-alto); }
.wz-hoy b { display: block; color: var(--navy); font-size: var(--text-sm); }
.wz-hoy p { margin: 2px 0 0; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.4; }
.wz-hoy button { white-space: nowrap; }
.wz-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: var(--space-4); }
.wz-tira { display: flex; flex-wrap: wrap; gap: var(--space-2); flex: 1; }
.wz-paso:not(.ok) .wz-paso-n { display: none; }
@media (max-width: 720px) {
.wz-top { flex-wrap: wrap; }
.wz-tira { flex-basis: 100%; }
.wz-paso-t { display: none; }
.wz-paso:not(.ok) .wz-paso-n { display: inline; }
.wz-paso { min-width: var(--control-sm); justify-content: center; padding-left: var(--space-3); padding-right: var(--space-3); }
}
.wz-paso-cab { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.wz-paso-cab h3 { margin: 0; font-size: var(--text-lg); color: var(--navy); }
.wz-paso-cab p { margin: 3px 0 0; font-size: var(--text-sm); color: var(--ink-2); line-height: 1.5; }
.wz-cuerpo { margin-bottom: 16px; }
.wz-cuerpo .piar-mx { border: 0; padding: 0; }
.wz-nav { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line);
padding-top: 12px; }
.wz-nav .wz-sig, .wz-nav .wz-fin { margin-left: auto; }
.wz-nav .wz-msg { margin-left: auto; }
.wz-nav .wz-sig ~ .wz-msg, .wz-nav .wz-fin ~ .wz-msg { margin-left: 0; }
.wz-doc .fld { margin-bottom: 12px; }
.wz-doc textarea, .wz-doc input[type=text] { width: 100%; font-size: var(--text-sm); }
.wz-casa { display: grid; grid-template-columns: 1fr 1.5fr auto auto; gap: 8px; margin-bottom: 7px; align-items: center; }
.wz-casa input, .wz-casa select { font-size: var(--text-sm); padding: 5px 8px; }
.wzc-quitar { font-size: var(--text-lg); line-height: 1; padding: 0 4px; }
@media (max-width: 620px) { .wz-casa { grid-template-columns: 1fr 1fr; } }
.wz-actor { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.wz-actor h5 { margin: 0 0 5px; font-size: var(--text-sm); color: var(--navy); }
.wz-actor input { width: 100%; font-size: var(--text-sm); margin-bottom: 5px; }
.acta-firma { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.acta-firma-rol { flex: 0 0 34%; font-size: var(--text-sm); color: var(--ink-2); }
.acta-firma-n { flex: 1; font-size: var(--text-sm); }
.acta-firma-f { font-size: var(--text-sm); white-space: nowrap; }
.chk { display: flex; align-items: center; gap: 7px; font-size: var(--text-sm); cursor: pointer; }
.pe-ejemplos { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.pe-ejemplos-t { font-size: var(--text-lg); color: var(--navy); margin: 0 0 var(--space-1); }
.pe-ejemplos-d { margin: 0 0 var(--space-3); font-size: var(--text-sm); }
fieldset.fld { border: 0; padding: 0; margin: 0 0 var(--space-3); min-width: 0; }
fieldset.fld legend { font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); margin-bottom: var(--space-1); padding: 0; }
fieldset.fld .chk { min-height: var(--target-min); }
fieldset.fld .chk input { width: auto; min-height: 0; padding: 0; margin: 0; }
.wz-seg-guia {
display: grid; grid-template-columns: 1.15fr repeat(3,minmax(0,1fr)); gap: 8px;
margin-bottom: 13px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--bg);
}
.wz-seg-guia b { color: var(--navy); font-size: var(--text-sm); }
.wz-seg-guia span { color: var(--ink-2); font-size: var(--text-sm); line-height: 1.35; }
.wz-seguimiento textarea { width: 100%; font-size: var(--text-sm); }
.wz-cumplimiento { margin: 0 0 13px; padding: 0; border: 0; }
.wz-cumplimiento legend { margin-bottom: 7px; color: var(--ink-2); font-size: var(--text-sm); font-weight: 600; }
.wz-cumplimiento label { display: inline-flex; align-items: center; gap: 6px; margin: 0 6px 6px 0;
padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card);
color: var(--ink-2); font-size: var(--text-sm); cursor: pointer; }
.wz-cumplimiento label:has(input:checked) { border-color: var(--wzc); background: var(--wzbg); color: var(--ink); }
.wz-cumplimiento input { accent-color: var(--wzc); }
.wz-seg-pie { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding-bottom: 14px;
border-bottom: 1px solid var(--line); }
.wz-seg-pie .fld { margin: 0; }
.wz-seg-pie input[type=date] { min-width: 160px; }
.wz-seg-pie .wzs-msg { font-size: var(--text-sm); }
.wz-historial { margin-top: 14px; }
.wz-historial h4 { margin: 0 0 9px; color: var(--navy); font-size: var(--text-sm); }
.wz-historial > p { margin: 0; font-size: var(--text-sm); }
.wz-historial article { display: grid; grid-template-columns: 10px minmax(0,1fr); gap: 9px;
padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.wz-hist-punto { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; }
.wz-hist-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ink-3); font-size: var(--text-sm); }
.wz-historial article p { margin: 4px 0 0; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.42; }
.wz-historial article small { display: block; margin-top: 3px; color: var(--ink-3); font-size: var(--text-sm); }
@media (max-width: 760px) {
.wz-seg-guia { grid-template-columns: 1fr; }
}
.wz-emitir { }
.wz-falta { background: var(--surface-subtle); border-radius: var(--r-sm);
padding: 11px 14px; margin-bottom: 14px; }
.wz-falta b { font-size: var(--text-sm); color: var(--ink-2); }
.wz-falta ul { margin: 7px 0 0; padding-left: 18px; }
.wz-falta li { font-size: var(--text-sm); color: var(--ink-2); line-height: 1.5; }
.wz-completo { display: flex; align-items: center; gap: 8px; background: var(--surface-action);
border-radius: var(--r-sm); padding: 11px 14px; margin-bottom: 14px; font-size: var(--text-sm);
color: var(--teal-txt); font-weight: 600; }
.wz-export { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 12px 0 4px; border-top: 1px solid var(--line); }
.wz-export-t { font-size: var(--text-sm); font-weight: 600; color: var(--navy); margin-right: 4px; }
.piar-q-n { white-space: nowrap; }
.piar-q-x { white-space: nowrap; }
@media (max-width: 760px) {
.filter-more { position:static; }
.filter-count { width:100%; margin-left:0; }
}
.page-head {
align-items: flex-end;
gap: var(--space-4);
margin-bottom: var(--space-6);
}
.page-head h1 {
font-size: var(--text-2xl);
line-height: var(--leading-tight);
font-weight: var(--weight-bold);
letter-spacing: -0.025em;
}
.page-head p {
max-width: 680px;
margin-top: var(--space-1);
font-size: var(--text-md);
line-height: var(--leading-copy);
}
.page-head p.datos-de {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-1);
font-size: var(--text-sm);
color: var(--ink-3);
}
.datos-de .card-link { margin-left: 0; }
.card-title {
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.card-title h2,
.card-title h3,
.card-title h4 {
font-size: var(--text-lg);
line-height: var(--leading-ui);
font-weight: var(--weight-bold);
letter-spacing: -0.01em;
}
.card {
border-color: var(--line);
border-radius: var(--r-lg);
padding: var(--space-5);
box-shadow: var(--sh-1);
}
.card .card,
.modal-card .card,
.drawer .card {
border-radius: var(--r-md);
box-shadow: none;
}
.kpi-chip,
.alert-item,
.edss-kpis > div,
.edss-rec-grid section,
.edss-plan-summary > div {
border-radius: var(--r-md);
}
.btn-primary,
.btn-outline {
min-height: var(--control-lg);
border-radius: var(--r-sm);
padding-inline: var(--space-5);
font-size: var(--text-md);
}
.btn-ghost {
min-height: var(--control-md);
border-radius: var(--r-sm);
padding-inline: var(--space-4);
font-size: var(--text-sm);
}
:where(.fld, .field) :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.filterbar select,
.edss-entity select,
.edss-student-search input,
.edss-filterbar select {
min-height: var(--control-md);
border-radius: var(--r-sm);
font-family: var(--font-sans);
font-size: var(--text-md);
}
.pill {
border-radius: var(--r-pill);
font-size: var(--text-sm);
}
.chip,
.lg-chip {
border-radius: var(--r-sm);
font-size: var(--text-sm);
}
.content :where(select, input:not([type]), input[type="text"], input[type="search"], input[type="date"], input[type="number"], input[type="email"]) {
min-height: var(--control-md);
border-radius: var(--r-sm);
font-family: var(--font-sans);
font-size: var(--text-sm);
}
.table, .data-table {
font-size: var(--text-md);
}
.table th, .data-table th {
padding: var(--space-3);
background: var(--surface-subtle);
font-size: var(--text-sm);
}
.table td, .data-table td {
padding: var(--space-3);
}
.tabs {
gap: var(--space-1);
margin-bottom: var(--space-6);
}
.tab {
min-height: var(--control-md);
font-size: var(--text-sm);
}
.empty-state {
padding: var(--space-8);
}
.empty-state p {
font-size: var(--text-sm);
line-height: var(--leading-copy);
}
.edss-scope-label,
.edss-entity span,
.edss-student-search span,
.edss-brief-main > span,
.edss-brief-action small,
.edss-confidence,
.edss-questions > div:first-child p,
.edss-kpis small,
.edss-priority-list small,
.edss-section-intro span,
.edss-finding small,
.edss-group-list span,
.edss-group-list em,
.edss-student-list small,
.edss-student-list b,
.edss-filterbar label,
.edss-filterbar > span,
.edss-rec-head small,
.edss-rec-meta span,
.edss-details summary,
.edss-axis span,
.edss-axis b,
.edss-plan-cta span,
.edss-plan-form label,
.edss-plan-update label,
.edss-plan-form .form-msg,
.edss-plan-update .form-msg,
.edss-plan-summary b {
font-size: var(--text-sm);
line-height: var(--leading-ui);
}
.edss-kpis b,
.edss-priority-list b,
.edss-strength b,
.edss-pattern-mini b,
.edss-finding b,
.edss-domain-table > div,
.edss-group-list b,
.edss-student-list span,
.edss-rec-grid section > b,
.edss-detail-grid section > b,
.edss-rec-meta b,
.edss-rec-grid p,
.edss-detail-grid p,
.edss-detail-grid ul {
font-size: var(--text-sm);
line-height: var(--leading-copy);
}
.edss-section-intro h2 {
font-size: var(--text-xl);
line-height: var(--leading-tight);
}
.edss-shape-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; align-items: center; }
.edss-shape-badge {
display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--r-pill);
background: color-mix(in srgb, var(--sc) 12%, var(--card)); color: var(--sc);
font-size: var(--text-sm); font-weight: 700; letter-spacing: .01em;
}
.edss-driver-chip {
display: inline-flex; padding: 2px 8px; border-radius: var(--r-pill); background: var(--bg);
color: var(--ink-2); font-size: var(--text-sm); font-weight: 600;
}
.edss-driver-chip.edss-reserve { font-weight: 500; font-style: italic; }
.edss-signals { display: grid; gap: 6px; margin: 10px 0 2px; }
.edss-signals p {
margin: 0; font-size: var(--text-sm); line-height: var(--leading-copy); color: var(--ink-2);
display: flex; gap: 7px; align-items: flex-start; flex-wrap: wrap;
}
.edss-signals svg { flex: none; margin-top: 2px; }
.edss-signals .edss-tail { color: var(--ink); background: var(--surface-subtle); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; }
.edss-jumps { display: inline-flex; gap: 6px; margin-left: 2px; }
.edss-jumps .btn-ghost { padding: 2px 10px; font-size: var(--text-sm); }
.edss-gen { background: var(--bg); border-radius: var(--r-md); padding: 12px 14px; margin: 10px 0 4px; display: grid; gap: 9px; }
.edss-gen-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.edss-gen-head b { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); }
.edss-gen-head small { color: var(--ink-2); font-size: var(--text-sm); }
.edss-gen-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.edss-gen-chips button {
border: 1px solid var(--line); background: var(--card); border-radius: var(--r-sm); padding: 4px 12px;
font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); cursor: pointer;
}
.edss-gen-chips button.active { background: var(--teal-strong); border-color: var(--teal-strong); color: #fff; }
.edss-gen-chips button:not(.active):hover { border-color: var(--teal-strong); color: var(--teal-strong); }
.edss-gen-controls { display: flex; flex-wrap: wrap; gap: 10px; }
.edss-gen-controls label {
display: grid; gap: 3px; font-size: var(--text-sm); font-weight: 600; color: var(--ink-2);
}
.edss-gen-controls select {
border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 8px; background: var(--card);
font-size: var(--text-sm); color: var(--ink); max-width: 260px;
}
.edss-gen-text { margin: 0; font-size: var(--text-sm); line-height: var(--leading-copy); }
.edss-gen-rule { color: var(--ink-2); font-size: var(--text-sm); }
@media (max-width: 780px) {
.content { padding: var(--space-5) var(--space-4) var(--space-12); }
.page-head { align-items: flex-start; margin-bottom: var(--space-5); }
.card { padding: var(--space-4); }
}
.piar-modo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 9px 12px; margin-bottom: 14px; background: var(--surface-action); border-radius: var(--r-sm); }
.piar-modo-t { font-size: var(--text-sm); font-weight: 700; color: var(--navy); }
.piar-modo-d { font-size: var(--text-sm); }
.piar-modo .wz-guiado { margin-left: auto; }
.wz-experto { white-space: nowrap; flex: none; }
.piar-ed-emitir { margin-top: 18px; padding-top: 14px; border-top: 2px solid var(--line); }
.piar-ed-emitir .id-h { margin: 0 0 10px; }
.institutional-reading {
display: grid;
gap: var(--space-3);
}
.institutional-reading-block {
position: relative;
min-width: 0;
padding: var(--space-4) var(--space-5) var(--space-4) 54px;
border: 1px solid var(--line);
border-radius: var(--r-md);
background: var(--card);
}
.institutional-reading-index {
position: absolute;
top: var(--space-4);
left: var(--space-4);
display: grid;
width: 24px;
height: 24px;
place-items: center;
border-radius: 50%;
background: var(--reading-color);
color: #fff;
font-size: var(--text-sm);
font-weight: var(--weight-bold);
}
.institutional-reading-block p {
margin: 0;
color: var(--ink-2);
font-size: var(--text-sm);
line-height: 1.65;
}
.institutional-reading-block strong {
color: var(--navy);
}
.institutional-reading-method {
margin: 0;
color: var(--ink-3);
font-size: var(--text-sm);
line-height: var(--leading-copy);
}
@media (max-width: 560px) {
.institutional-reading-block {
padding: var(--space-4);
}
.institutional-reading-index {
position: static;
margin-bottom: var(--space-2);
}
}
@media (max-width: 900px) {
.content { padding-bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom, 0px)); }
footer.app-footer { padding-bottom: calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom, 0px)); }
}
@media (pointer: coarse) {
.chip { min-height: var(--control-lg); }
.que-mide-btn { width: var(--control-lg); height: var(--control-lg); }
}
.rep-indice {
background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md, 14px);
padding: 16px 18px; margin-bottom: 18px; box-shadow: var(--sh-1);
}
.rep-indice-t { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--ink-3); margin-bottom: 10px; cursor: pointer; list-style: none;
display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: var(--text-sm); line-height: var(--leading-ui); }
.rep-indice-t::-webkit-details-marker { display: none; }
.rep-indice-t::after {
content: ''; width: 7px; height: 7px; border-right: 1.6px solid var(--ink-3);
border-bottom: 1.6px solid var(--ink-3); transform: rotate(45deg);
margin-left: auto; margin-right: 2px;
transition: transform 0.18s var(--ease);
}
.rep-indice[open] .rep-indice-t::after { transform: rotate(-135deg); }
.rep-indice-n {
text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.rep-indice-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 18px; }
.rep-indice-i { display: block; padding: 7px 8px; border-radius: var(--r-sm); text-decoration: none;
color: var(--ink-2); font-weight: 600;
border-left: 2px solid transparent; font-size: var(--text-sm); line-height: var(--leading-ui); }
.rep-indice-i:hover { background: var(--surface-subtle); color: var(--navy); border-left-color: var(--teal); }
.report-sheet h3[id] { scroll-margin-top: 86px; }
@media (max-width: 620px) {
.rep-indice-l { grid-template-columns: minmax(0, 1fr); }
.rep-indice-i { min-height: 44px; display: flex; align-items: center; }
.rep-indice-t { min-height: 44px; margin-bottom: 0; font-size: var(--text-sm); line-height: var(--leading-ui); }
.rep-indice[open] .rep-indice-t { margin-bottom: 6px; }
}
.topbar-search-toggle {
display: none; align-items: center; justify-content: center;
height: 40px; flex: 0 0 auto; padding: 0 var(--space-3); font: inherit; font-size: var(--text-sm); font-weight: 600; white-space: nowrap;
border: 1px solid var(--line); background: var(--card); border-radius: var(--r-sm);
color: var(--ink-2); cursor: pointer;
transition: border-color 0.16s var(--ease), color 0.16s var(--ease), background 0.16s var(--ease);
}
.topbar-search-toggle:hover { border-color: var(--teal-txt); color: var(--navy); background: var(--surface-action); }
.con-foto { position: relative; overflow: hidden; }
.con-foto .avatar-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ac-quien { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.ac-quien p { margin: 0 0 var(--space-2); }
.ac-avatar { width: var(--space-16); height: var(--space-16); flex: none; font-size: var(--text-lg); }
.ac-pro-doc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--space-3); }
.ac-firma { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.ac-firma h4 { margin: 0 0 var(--space-1); font-size: var(--text-md); color: var(--navy); }
.ac-firma p { margin: 0 0 var(--space-3); font-size: var(--text-sm); }
.ac-firma-vista { margin-bottom: var(--space-3); }
.ac-firma-vista img { display: block; max-width: 260px; max-height: 88px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.foto-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.foto-subir { cursor: pointer; }
.foto-subir:focus-within { box-shadow: var(--ring); }
.foto-nota { margin: 0 0 var(--space-3); font-size: var(--text-sm); }
.foto-marco { width: 240px; height: 240px; margin: var(--space-2) auto var(--space-3); border-radius: 50%;
overflow: hidden; background: var(--surface-subtle); display: grid; place-items: center; }
.foto-marco .foto-grande { width: 100%; height: 100%; font-size: var(--text-2xl); }
.foto-marco video, .foto-marco > img { width: 100%; height: 100%; object-fit: cover; }
.foto-marco [hidden] { display: none; }
.foto-msg { min-height: 20px; margin-bottom: var(--space-2); font-size: var(--text-sm); color: var(--ink-2); text-align: center; }
.foto-msg--error { color: var(--lv-intervencion-prioritaria); }
.foto-modal .foto-acciones { justify-content: center; }
.foto-modal .foto-acciones[hidden] { display: none; }
.hc-avatar { width: var(--space-12); height: var(--space-12); flex: none; align-self: center; }
.hist-solo-lectura #content .hist-no-lee, .hist-solo-lectura #drawer .hist-no-lee,
.hist-solo-lectura #content :is(.fld, input, select, textarea), .hist-solo-lectura #drawer :is(.fld, input, select, textarea) { display: none; }
.hc-cab-acciones { margin-left: auto; align-self: center; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hc-cab-acciones .hc-cerrar { margin-left: 0; }
@media (max-width: 620px) {
.ac-pro-doc { grid-template-columns: minmax(0, 1fr); }
.foto-marco { width: 200px; height: 200px; }
}
.ac-salir { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2);
padding: 14px 0 2px; margin-top: 6px; border-top: 1px solid var(--line); }
.ac-salir .btn-ghost { display: inline-flex; align-items: center; gap: 7px; }
.ac-salir .ac-solo-movil { display: none; }
@media (min-width: 901px) and (max-width: 1180px) {
.topbar { gap: var(--space-3); padding: 12px 20px; }
.topbar-user .who { display: none; }
.breadcrumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.searchbox { min-width: 140px; }
}
@media (max-width: 900px) {
.topbar { gap: 8px; padding: 8px 12px; flex-wrap: wrap; }
.breadcrumb { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.topbar-search-toggle { display: inline-flex; }
.searchbox { display: none; order: 9; flex: 1 0 100%; width: auto; margin-left: 0; }
.topbar.search-open .searchbox { display: flex; }
.topbar-user { gap: 8px; flex: 0 0 auto; }
.topbar-user .who { display: none; }
#btnRefresh { display: none; }
#btnLogout { display: none; }
.ac-salir .ac-solo-movil { display: inline-flex; }
#langSel, #childSwitch { max-width: 108px; }
}
.fq-bar { height: 8px; border-radius: var(--r-sm); background: var(--line); overflow: hidden; }
.fq-bar i { display: block; height: 100%; border-radius: var(--r-sm); background: var(--teal);
transition: width .2s; }
.fq-bar--fino { height: 4px; }
.fq-avance { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.fq-avance .fq-bar { flex: 1; }
.fq-avance b { color: var(--ink); font-weight: 700; }
.fq-cuenta { font-weight: 600; white-space: nowrap; font-size: var(--text-md); color: var(--ink-2);
font-variant-numeric: tabular-nums; }
.fq-sobre { font-size: var(--text-sm); color: var(--ink-2); margin: 0 0 10px; }
.fq-sobre b { color: var(--ink); font-weight: 700; }
.fq-q { font-size: var(--text-xl); line-height: 1.45; font-weight: 700; color: var(--ink);
margin: 0 0 20px; text-wrap: balance; }
.fq-nota { font-size: var(--text-sm); color: var(--ink-2); margin: -12px 0 16px; line-height: 1.5; }
.fq-opts { display: flex; flex-direction: column; }
.fq-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
min-height: 44px; padding: 13px 16px; border: 1.5px solid var(--line); border-radius: var(--r-md);
background: var(--card); cursor: pointer; font: inherit; font-size: var(--text-lg); color: var(--ink);
margin-bottom: 9px; transition: border-color .12s, background .12s; }
@media (hover: hover) {
.fq-opt:hover { border-color: var(--teal); background: var(--surface-action); }
}
.fq-opt:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.fq-opt.sel { border-color: var(--teal); background: var(--surface-action); font-weight: 600; }
.fq-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line);
flex: none; display: inline-flex; align-items: center; justify-content: center;
font-size: var(--text-sm); line-height: 1; }
.fq-opt.sel .fq-dot { border-color: var(--teal); background: var(--teal); color: var(--card); }
.fq-opt.ns, .fq-opt.alt { border-style: dashed; color: var(--ink-2); }
.fq-cierre { margin: 0 0 14px; padding: 12px 15px; border-radius: var(--r-sm);
background: var(--surface-subtle);
font-size: var(--text-md); line-height: 1.55; color: var(--ink-2); }
.fq-cond { border-left: 3px solid var(--sev-ambar-color); padding-left: 12px; }
.fq-saltar { margin-top: 14px; text-align: center; }
.fq-saltar button { background: none; border: 0; font: inherit; font-size: var(--text-sm);
color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px;
cursor: pointer; padding: 6px 10px; }
.fq-saltar button:hover { color: var(--ink); }
.fq-pick { display: grid; grid-template-columns: 1fr; gap: 7px; margin: 0 0 4px; }
.fq-pickitem { display: flex; align-items: flex-start; gap: 11px; padding: 11px 13px;
border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--card);
cursor: pointer; min-height: 44px; transition: border-color .12s, background .12s; }
.fq-pickitem:hover { border-color: var(--teal); background: var(--surface-action); }
.fq-pickitem.sel { border-color: var(--teal); background: var(--surface-action); }
.fq-pickitem input { margin: 3px 0 0; width: 18px; height: 18px; flex: none; accent-color: var(--teal); }
.fq-pickitem.bloqueada, .fq-pickitem.bloqueada:hover {
cursor: not-allowed; border-color: var(--line); background: var(--surface-subtle); }
.fq-pickitem.bloqueada input { opacity: .5; cursor: not-allowed; }
.fq-pickitem.aparte { background: var(--surface-subtle); border-color: var(--line); }
.fq-pickitem.aparte .fq-picktxt b { color: var(--ink-2); font-weight: 400; }
.fq-picktxt { min-width: 0; }
.fq-picktxt b { font-size: var(--text-md); display: block; }
.fq-picktxt span { font-size: var(--text-sm); color: var(--ink-2); display: block; margin-top: 2px; }
@media (min-width: 861px) { .fq-pick { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) {
.fq-opt, .fq-pickitem, .fq-bar i { transition: none; }
}
.form-brand-img { width: 190px; height: auto; display: block; margin-bottom: 22px;
mix-blend-mode: multiply; }
@media (max-width: 460px) { .form-brand-img { width: 160px; } }
.form-marca { display: inline-block; margin-bottom: 22px; border-radius: var(--r-sm); }
.form-marca .form-brand-img { margin-bottom: 0; }
.form-sitio { display: block; margin-top: var(--space-5); padding-top: var(--space-4);
border-top: 1px solid var(--line); font-size: var(--text-sm); color: var(--ink-2); }
.form-sitio a { display: inline-flex; align-items: center; min-height: var(--target-min);
color: var(--teal-txt); font-weight: 600; }
.pkg-wrap { max-width: 720px; margin: 0 auto; padding: 28px 20px 60px; }
.pkg-card { padding: var(--space-6); }
.pkg-head { display: flex; align-items: flex-start; justify-content: space-between;
gap: var(--space-4); margin-bottom: var(--space-5); }
.pkg-head h1 { color: var(--navy); font-size: var(--text-2xl); margin: 0 0 var(--space-2); }
.pkg-progress { min-width: 72px; text-align: center; padding: var(--space-2) var(--space-3);
border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-subtle);
color: var(--navy); font-weight: var(--weight-bold); }
.pkg-list { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.pkg-task { display: flex; align-items: center; gap: var(--space-4); min-height: 64px;
padding: var(--space-3) var(--space-4); border: 1px solid var(--line);
border-radius: var(--r-md); background: var(--card); }
.pkg-task-main { flex: 1; min-width: 0; }
.pkg-task-main b { display: block; color: var(--ink); font-size: var(--text-md); }
.pkg-task-main span { display: block; margin-top: 2px; color: var(--ink-2); font-size: var(--text-sm); }
.pkg-task.done {  }
.pkg-task .btn-primary, .pkg-task .btn-outline { flex: none; min-width: 108px; }
.pkg-salida { display: flex; justify-content: flex-end; margin-top: var(--space-3);
padding: 0 calc(var(--space-4) + 1px); }
.pkg-salida .btn-outline { min-width: 108px; }
.pkg-note { margin: var(--space-5) 0 0; padding-top: var(--space-4);
border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--text-sm); }
.pkg-builder { margin-top: var(--space-3); }
.pkg-builder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
.pkg-builder-grid > [hidden] { display: none; }
.pkg-builder-label { margin: var(--space-4) 0 var(--space-2); color: var(--ink-3);
font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: .06em;
text-transform: uppercase; }
.pkg-builder-picks { max-height: 360px; overflow: auto; padding-right: var(--space-1); }
.pkg-builder-actions { display: flex; align-items: center; gap: var(--space-3);
flex-wrap: wrap; margin-top: var(--space-4); }
.pkg-builder-result { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-3);
align-items: center; margin-top: var(--space-4); padding: var(--space-4);
border: 1px solid var(--teal);
border-radius: var(--r-md); background: var(--surface-action); }
.pkg-builder-result b, .pkg-builder-result span { grid-column: 1 / -1; }
.pkg-builder-result input { min-width: 0; }
.pkg-builder-result.error { border-color: var(--sev-ambar-color); background: var(--sev-ambar-bg); }
.pkg-builder-history { margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.pkg-builder-history-row { display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.pkg-builder-history-row > span { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.pkg-builder-history-row small { color: var(--ink-2); font-size: var(--text-sm); }
.apply-pending { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4);
border-radius: var(--r-md); background: var(--surface-action); }
.apply-pending-kicker { margin: 0 0 var(--space-1); color: var(--teal-txt); font-size: var(--text-sm);
font-weight: var(--weight-bold); letter-spacing: .06em; text-transform: uppercase; }
.apply-pending-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; }
.apply-pending-row + .apply-pending-row { border-top: 1px solid var(--line); }
.apply-pending-row > span { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.apply-pending-row b { color: var(--ink); font-size: var(--text-md); }
.apply-pending-row small { margin-top: 2px; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.45; }
.apply-pending-row .btn-primary { flex: none; }
@media (max-width: 560px) {
.apply-pending-row { align-items: stretch; flex-direction: column; }
.apply-pending-row .btn-primary { width: 100%; justify-content: center; }
.pkg-wrap { padding: 20px 14px 44px; }
.pkg-card { padding: var(--space-4); }
.pkg-head { align-items: stretch; }
.pkg-task { align-items: stretch; flex-direction: column; }
.pkg-task .btn-primary, .pkg-task .btn-outline, .pkg-salida .btn-outline { width: 100%; }
.pkg-builder-grid { grid-template-columns: 1fr; }
.pkg-builder-result { grid-template-columns: 1fr; }
.pkg-builder-result .btn-outline { width: 100%; }
.pkg-builder-history-row { align-items: stretch; flex-direction: column; }
}
.legend-inline .ramp {
display: inline-flex; width: 34px; height: 9px; border-radius: var(--r-sm);
overflow: hidden; vertical-align: middle; flex: none;
}
.legend-inline .ramp > i { flex: 1; }
.sw-card { padding-bottom: 18px; }
.sw-sub { margin: -4px 0 12px; font-size: var(--text-sm); }
.sw-leg { margin: 0 0 10px; flex-wrap: wrap; gap: 8px 16px; }
.sw-leg .sw-mean {
display: inline-block; width: 15px; height: 0; vertical-align: middle;
border-top: 2.4px solid var(--ink); position: relative; flex: none;
}
.sw-leg .sw-mean::after {
content: ''; position: absolute; left: 4px; top: -3.4px;
width: 7px; height: 7px; border-radius: 50%; background: var(--ink);
}
.sw-host { width: 100%; overflow-x: auto; }
.sw-fig {
width: 100%; height: auto; display: block;
font-family: var(--font-ui);
font-variant-numeric: tabular-nums;
}
.sw-leg2 { margin: 0 0 8px; gap: 6px 18px; flex-wrap: wrap; }
.sw-ser { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm);
font-weight: 600; color: var(--ink-2); }
.sw-ser svg { flex: none; overflow: visible; }
table.sw-stats tbody tr.sw-rep th, table.sw-stats tbody tr.sw-rep td { border-top: 0 !important; }
.sw-tabla { width: 100%; overflow-x: auto; margin-top: 14px; }
table.sw-stats {
width: 100%; min-width: 720px; border-collapse: collapse;
font-size: var(--text-sm); font-variant-numeric: tabular-nums;
}
.sw-tabla-una table.sw-stats { width: auto; min-width: 0; }
.cmp-cuerpo.cmp-en-panel { display: flex; flex-wrap: wrap; }
.cmp-en-panel > .cmp-principal { flex: 0 1 316px; max-width: 316px; }
.cmp-en-panel > .cmp-lateral { flex: 0 1 430px; max-width: 430px; }
.sw-leg[hidden] { display: none; }
table.sw-stats th[scope="col"] {
font-size: var(--text-sm); font-weight: 600; color: var(--ink-3); text-align: center;
padding: 0 6px 7px; border-bottom: 1px solid var(--ink-adorno);
}
table.sw-stats th[scope="row"] {
text-align: left; font-weight: 600; color: var(--ink-2); padding: 6px 10px 6px 0;
white-space: nowrap;
}
table.sw-stats td { text-align: center; padding: 6px; color: var(--ink); }
table.sw-stats tbody tr + tr th, table.sw-stats tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.sw-nota {
margin: 12px 0 0; font-size: var(--text-xs); line-height: 1.55; color: var(--ink-3);
border-top: 1px solid var(--line-soft); padding-top: 10px;
}
@media (max-width: 900px) {
}
@media print {
.sw-host, .sw-tabla { overflow: visible; }
.sw-fig { min-width: 0 !important; } table.sw-stats { min-width: 0; }
.sw-card { break-inside: avoid; }
}
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar-al-contenido:not(:focus) {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar-al-contenido:focus {
position: fixed; top: var(--space-3); left: var(--space-3); z-index: 1000;
background: var(--card); color: var(--navy); font-weight: 600;
padding: var(--space-2) var(--space-4); border-radius: var(--r-sm);
box-shadow: var(--sh-1);
}
#content:focus { outline: none; }
table.sw-stats .sw-gr {
display: inline-block; font-size: var(--text-sm); font-weight: 700; color: var(--ink-3);
background: var(--surface-subtle); border-radius: var(--r-sm); padding: 1px 5px; margin-right: 5px;
}
.panel-filtro {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-md, 12px);
background: var(--surface-subtle);
}
.panel-filtro select { font-size: var(--text-sm); }
.pf-rot { font-size: var(--text-sm); font-weight: 700; color: var(--ink-2); }
.pf-nota { font-size: var(--text-sm); color: var(--ink-3); margin-left: auto; }
@media (max-width: 620px) { .pf-nota { margin-left: 0; flex: 1 0 100%; } }
.ha-fila {
display: grid; grid-template-columns: minmax(140px, 1.1fr) minmax(0, 1.4fr) auto 16px;
align-items: center; gap: 12px; width: 100%; text-align: left;
padding: 11px 13px 11px 15px; margin-bottom: 6px; min-height: 48px;
border: 1px solid var(--line);
border-radius: var(--r-sm); background: var(--card); cursor: pointer;
transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.ha-fila.ha-sin { border-left: 3px solid var(--lv-intervencion-prioritaria); padding-left: 13px; }
.ha-quien { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ha-quien b { font-size: var(--text-sm); color: var(--navy); font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ha-curso { font-size: var(--text-sm); color: var(--ink-3); }
.ha-areas { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.ha-area, .ha-mas {
font-size: var(--text-sm); font-weight: 600; padding: 2px 7px; border-radius: var(--r-sm);
white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ha-mas { background: var(--surface-subtle); color: var(--ink-3); }
.ha-estado { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.ha-alerta { color: var(--lv-intervencion-prioritaria-txt); }
.ha-ok { color: var(--ink-3); font-weight: 500; }
.ha-ir { color: var(--ink-adorno); display: flex; }
.ha-resto {
display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
min-height: 44px; margin-top: 4px; padding: 10px; border: 1px dashed var(--line);
border-radius: var(--r-sm, 10px); background: transparent; cursor: pointer;
font-size: var(--text-sm); font-weight: 600; color: var(--teal-txt);
}
.ha-resto:hover { background: var(--surface-action); border-style: solid; }
@media (max-width: 700px) {
.ha-fila { grid-template-columns: 1fr auto; row-gap: 8px; }
.ha-areas { grid-column: 1 / -1; }
.ha-ir { display: none; }
}
.ha-ext {
font-size: var(--text-sm); font-weight: 700; padding: 2px 8px; border-radius: var(--r-sm);
background: var(--lv-intervencion-prioritaria-bg); color: var(--lv-intervencion-prioritaria-txt);
border: 1px solid var(--lv-intervencion-prioritaria); white-space: nowrap;
}
.dist-par { display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; align-items: start; }
.dist-uno { margin: 0; min-width: 0; }
.dist-uno figcaption {
font-size: var(--text-sm); font-weight: 600; color: var(--ink-3);
text-align: center; margin-bottom: 6px;
}
.dist-caja { height: 320px; max-width: none; margin: 0; }
.dist-caja-dona { height: 320px; }
@media (max-width: 820px) {
.dist-par { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.dist-caja, .dist-caja-dona { height: 290px; }
}
.cmp-caja {
--cmp-fig-w: 906px;
--cmp-forest-w: 430px;
--cmp-medida: calc(var(--cmp-fig-w) + var(--space-5) + var(--cmp-forest-w));
--cmp-relleno: 28px;
scrollbar-gutter: stable;
width: min(calc(var(--cmp-medida) + 2 * var(--cmp-relleno) + 15px), 94vw);
max-width: none;
padding-inline: var(--cmp-relleno);
}
@media (max-width: 1460px) {
.cmp-caja { --cmp-medida: var(--cmp-fig-w); }
}
.cmp-caja > * { width: 100%; max-width: var(--cmp-medida); margin-inline: auto; }
.cmp-intro {
margin: 0 0 var(--space-3); font-size: var(--text-sm);
line-height: var(--leading-copy); max-width: 74ch; color: var(--ink-2);
}
.cmp-modo { margin: 0 0 var(--space-3); }
.cmp-sel { margin: 0 0 var(--space-4); align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cmp-vs { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.cmp-modo .chip { font-size: var(--text-sm); }
.cmp-sel select {
min-height: var(--control-sm);
font-size: var(--text-sm);
}
.cmp-sel select { border-radius: var(--r-sm); }
.cmp-cabecera {
position: sticky; top: calc(-1 * var(--space-6)); z-index: 2;
background: var(--card);
padding-top: var(--space-6); margin-top: calc(-1 * var(--space-6));
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--line);
}
.cmp-cabecera > * { max-width: none; }
.cmp-pip {
width: 11px; height: 11px; border-radius: var(--r-pill); flex: none;
display: inline-block;
}
.cmp-pip-b { background: var(--card) !important; border: 2.6px solid; }
.cmp-cuerpo {
display: grid; grid-template-columns: var(--cmp-fig-w) var(--cmp-forest-w);
gap: var(--space-5); align-items: start; justify-content: start;
}
.cmp-principal, .cmp-lateral { min-width: 0; }
.cmp-principal { max-width: var(--cmp-fig-w); }
.cmp-lateral { max-width: var(--cmp-forest-w); }
@media (max-width: 1460px) { .cmp-cuerpo { grid-template-columns: var(--cmp-fig-w); } }
.cmp-forest {
width: 100%; height: auto; display: block;
font-family: var(--font-ui);
font-variant-numeric: tabular-nums;
}
.cmp-forest .cmp-t1 {
font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: -0.012em;
}
.cmp-forest .cmp-t2 { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.cmp-cifra { font-weight: var(--weight-semibold); }
.cmp-tabla { margin-top: var(--space-4); }
.cmp-mag { font-size: 0.9em; color: var(--ink-3); font-weight: var(--weight-medium); }
table.cmp-tabla th[scope="row"] { display: flex; align-items: center; gap: var(--space-2); }
@media (max-width: 980px) { .cmp-cuerpo { grid-template-columns: minmax(0, 1fr); } }
.btn-comparar {
margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-2);
min-height: var(--control-sm); font-size: var(--text-sm);
transition: border-color var(--duration-fast) var(--ease),
color var(--duration-fast) var(--ease),
background var(--duration-fast) var(--ease);
}
@media (pointer: coarse) { .btn-comparar { min-height: var(--control-lg); } }
@media (prefers-reduced-motion: reduce) {
.modal-card { transform: none; transition: none; }
.modal-backdrop.open .modal-card { transform: none; }
.ha-fila, .btn-comparar { transition: none; }
}
@media (pointer: coarse) {
.drawer-close { min-width: 44px; min-height: 44px; }
}
.cmp-sel select[data-grupo] {
border-color: var(--cmp-grupo);
color: var(--cmp-grupo);
font-weight: var(--weight-semibold);
}
.cmp-sel select[data-grupo]:hover { border-color: var(--cmp-grupo); }
.cmp-entra { animation: cmpReveal var(--duration-ui) var(--ease-out); }
.ctx-bar {
position: sticky; top: 0; z-index: 12;
display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4);
border: 1px solid var(--navy);
border-radius: var(--r-md); background: var(--surface-info);
}
.ctx-quien { display: flex; align-items: center; gap: var(--space-3); min-width: 0; flex: 1; }
.ctx-quien > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ctx-quien b { color: var(--navy); font-size: var(--text-md); }
.ctx-quien small { color: var(--ink-2); font-size: var(--text-sm); }
.ctx-avatar {
width: var(--control-sm); height: var(--control-sm); flex: none;
display: grid; place-items: center; border-radius: var(--r-pill);
background: var(--navy); color: #fff; font-size: var(--text-sm); font-weight: var(--weight-bold);
}
.ctx-fondo {
margin: 0; flex-basis: 100%; order: 3;
display: flex; align-items: center; gap: var(--space-2);
color: var(--ink-2); font-size: var(--text-sm); line-height: var(--leading-ui);
}
.ctx-fondo svg { color: var(--blue); flex: none; }
.ctx-acciones { display: flex; gap: var(--space-2); flex: none; }
.ctx-acciones .btn-outline { background: var(--card); }
.demo-aviso { position: static; }
.licencia-aviso--vencida { border-color: var(--sev-ambar-color); background: var(--sev-ambar-bg); }
.licencia-aviso--vencida .ctx-quien b, .licencia-aviso--vencida .ctx-quien small { color: var(--sev-ambar-txt); }
.sidebar-footer:not(:empty) { position: sticky; bottom: 0; background: var(--card); }
.sidebar-footer:empty { display: none; }
.beta-aviso { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.sidebar-footer .beta-aviso { border-top: 1px solid var(--line); padding-top: var(--space-3); }
.beta-aviso p { margin: 0; color: var(--ink-3); font-size: var(--text-sm); line-height: var(--leading-ui); }
.beta-aviso b { color: var(--ink-2); font-weight: 600; }
.beta-aviso .btn-ghost { min-height: var(--control-sm); padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }
.beta-movil { display: none; }
@media (max-width: 900px) {
.beta-movil { display: block; border-bottom: 1px solid var(--line); background: var(--card); }
.beta-movil .beta-aviso { flex-direction: row; align-items: center; justify-content: space-between;
gap: var(--space-3); padding: var(--space-2) var(--space-4); }
.beta-movil .btn-ghost { flex: none; white-space: nowrap; }
}
.reporte-beta-texto { color: var(--ink); white-space: pre-line; }
@media (max-width: 620px) {
.ctx-bar { position: static; }
.ctx-acciones { width: 100%; }
.ctx-acciones button { flex: 1; }
}
.story-coding-transcript{white-space:pre-wrap;line-height:1.6;background:var(--bg);border-radius:var(--r-md);padding:10px 12px;margin:6px 0 4px}
.story-coding-transcript mark.story-evidencia{background:var(--surface-action);color:inherit;border-radius:var(--r-sm);padding:0 2px}
.story-coding-transcript mark.story-intrusion{background:var(--surface-info);color:inherit;border-radius:var(--r-sm);padding:0 2px}
.story-coding-units label.story-has-evidence{background:var(--surface-action);border-radius:var(--r-sm)}
.story-coding-units label small{display:block}
.story-chips{display:inline-flex;flex-wrap:wrap;gap:4px;margin-left:6px;vertical-align:middle}
.story-chip{background:var(--surface-action);color:var(--teal-txt);border-radius:var(--r-pill);padding:0 8px;font-size:var(--text-sm)}
table.par-tabla { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--text-md); }
table.par-tabla col.par-c-area { width: 44%; }
table.par-tabla th[scope="col"] { text-align: left; font-size: var(--text-sm); font-weight: 700;
color: var(--ink-3); padding: 0 6px 8px; overflow-wrap: break-word; }
table.par-tabla th.par-sec { text-align: left; font-weight: 700; color: var(--ink);
padding: var(--space-3) 6px 4px; }
table.par-tabla th[scope="row"] { text-align: left; font-weight: 400; color: var(--ink-2);
padding: 8px 6px; vertical-align: top; overflow-wrap: break-word; }
table.par-tabla td { padding: 8px 6px; vertical-align: top; overflow-wrap: break-word; }
table.par-tabla tbody tr.par-fila + tr.par-fila > * { border-top: 1px solid var(--line-soft); }
.par-val { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }
.par-de, .par-fecha { color: var(--ink-3); font-weight: 400; }
.par-fecha { display: block; font-size: var(--text-sm); }
.par-corte { display: block; font-size: var(--text-sm); color: var(--sev-ambar-txt); }
table.par-tabla td.par-nota { font-size: var(--text-sm); color: var(--ink-2); background: var(--surface-subtle);
border-radius: var(--r-sm); padding: 8px 10px; }
@media (max-width: 520px) {
table.par-tabla, table.par-tabla tbody, table.par-tabla tr { display: block; }
table.par-tabla thead { display: none; }
table.par-tabla tr.par-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; }
table.par-tabla tr.par-fila > th[scope="row"] { grid-column: 1 / -1; padding-bottom: 2px; color: var(--ink); }
table.par-tabla tr.par-fila > td { padding-top: 2px; }
table.par-tabla td[data-quien]::before { content: attr(data-quien); display: block;
font-size: var(--text-sm); font-weight: 700; color: var(--ink-3); }
table.par-tabla th.par-sec, table.par-tabla td.par-nota { display: block; }
}
.pc-pdf { position: fixed; inset: 0; z-index: 1200; overflow: auto; background: var(--bg); }
.pc-pdf-barra { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center;
gap: 10px 12px; padding: 12px 16px; background: var(--card); border-bottom: 1px solid var(--line); }
.pc-pdf-barra .muted { font-size: var(--text-sm); }
.pc-pdf-hoja { max-width: 820px; margin: 24px auto 48px; padding: 32px 36px; background: var(--card);
border-radius: var(--r-md); box-shadow: var(--sh-1); }
.pc-informe-cabecera { display: flex; align-items: center; gap: 18px; margin: 0 0 16px; }
.pc-informe-logo { height: 40px; width: auto; }
.pc-pdf .lam-marco { overflow: visible; }
.pc-pdf .lam-marco > svg { width: 100% !important; height: auto !important; min-width: 0; max-width: none; }
.ft-barra-titulo { flex: 1; min-width: 0; font-weight: 600; color: var(--navy);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-hoja h2 { font-size: var(--text-xl); color: var(--navy); margin: 0 0 var(--space-3); }
.ft-hoja h3 { font-size: var(--text-lg); color: var(--ink); margin: var(--space-5) 0 var(--space-2); }
.ft-texto p, p.ft-texto { font-size: var(--text-lg); line-height: 1.6; color: var(--ink); margin: 0 0 var(--space-3); }
.ft-version { font-size: var(--text-sm); margin: calc(-1 * var(--space-2)) 0 var(--space-3); }
.ft-hoja .cog-aut-doc { font-size: var(--text-lg); color: var(--ink); min-height: var(--control-lg); padding: var(--space-2) 0; }
.ft-hoja .cog-aut-doc input { width: 22px; height: 22px; margin-top: 3px; }
.ft-alcances { display: flex; flex-direction: column; }
.ft-alcance { border-bottom: 1px solid var(--line-soft); }
.ft-doc { margin-bottom: var(--space-6); }
.ft-eleccion { display: flex; flex-direction: column; margin-bottom: var(--space-3); }
.ft-pedido { margin: 0 0 var(--space-3); }
.ft-nota { font-size: var(--text-md); }
.ft-acciones { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }
.ft-acciones button { min-height: var(--control-lg); }
.ft-recuadro { color: var(--ink); background: var(--card); border: 1px solid var(--line);
border-radius: var(--r-md); height: 220px; margin-top: var(--space-3); }
.ft-recuadro--usado { border-color: var(--ink-adorno); }
.ft-lienzo { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.ft-recuadro-pie { display: flex; justify-content: flex-end; margin-top: var(--space-2); }
.ft-clave { max-width: 420px; margin-top: var(--space-5); }
.ft-constancia h1, .ft-constancia h2 { font-size: var(--text-xl); color: var(--navy); margin: 0 0 var(--space-4); }
.ft-dato { margin: 0 0 var(--space-2); font-size: var(--text-md); color: var(--ink); }
.ft-dato .hc-rotulo { display: block; margin: 0; }
.ft-firmas { display: flex; flex-wrap: wrap; gap: var(--space-6); margin: var(--space-5) 0; }
.ft-firma { margin: 0; }
.ft-firma img { display: block; width: 280px; max-width: 100%; height: auto; border-bottom: 1px solid var(--ink-3); }
.ft-firma figcaption { font-size: var(--text-sm); color: var(--ink-3); margin-top: var(--space-1); }
.ft-firma-raya { display: block; width: 280px; max-width: 100%; height: var(--space-10); border-bottom: 1px solid var(--ink-3); }
.ft-sello { font-size: var(--text-sm); color: var(--ink-3); word-break: break-all; margin-top: var(--space-4); }
.ft-carta .ft-dato { margin-bottom: var(--space-4); }
.ft-membrete { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6);
padding-bottom: var(--space-3); border-bottom: 1px solid var(--ink-3); font-size: var(--text-sm); color: var(--ink-2); text-align: right; }
.ft-membrete img { display: block; width: 180px; max-width: 45%; height: auto; }
.ft-membrete b { color: var(--ink); }
.ft-verifica { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-6); }
.ft-verifica .dp-qr { flex: none; width: 96px; height: 96px; margin: 0; }
.ft-verifica .ft-sello { margin: 0; }
@media (max-width: 600px) { .ft-recuadro { height: 180px; } }
.ft-reenvio { display: flex; gap: var(--space-2); align-items: flex-end; flex-wrap: wrap; margin: var(--space-1) 0 var(--space-3); }
.ft-reenvio .fld { flex: 1 1 220px; margin: 0; }
.ev-barra { position: sticky; top: var(--ev-tope, 0); z-index: 12; margin-bottom: var(--space-4);
padding: var(--space-2) var(--space-3); background: var(--card); border-bottom: 1px solid var(--line); }
.ev-barra .hc-rotulo { margin: 0; }
.ev-barra-prueba { margin: 0; font-size: var(--text-xl); font-weight: 600; color: var(--navy); }
.ev-barra-otra { margin: 0; font-size: var(--text-sm); color: var(--ink-2); }
.ev-hoja { scroll-margin-top: var(--ev-tope-hoja, 0); }
.ev-barra-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-1) var(--space-3); }
.ev-barra-cab > div { flex: 1 1 16rem; min-width: 0; }
.ev-barra-parte { margin: 0; font-size: var(--text-md); color: var(--ink); }
.ev-salir { flex: none; min-height: var(--control-lg); }
.ev-aviso-parte { margin-top: var(--space-2); }
.ev-aviso-parte button { min-height: var(--control-lg); }
.ev-hoja .obs-parte { scroll-margin-top: var(--ev-tope-hoja, 0); }
body.modo-observacion .sidebar, body.modo-observacion .topbar, body.modo-observacion .tabbar,
body.modo-observacion .tabsheet, body.modo-observacion .tabsheet-backdrop, body.modo-observacion .app-footer,
body.modo-observacion #ctxBar, body.modo-observacion #betaAviso, body.modo-observacion #demoAviso,
body.modo-observacion #licenciaAviso, body.modo-observacion .saltar-al-contenido { display: none; }
.ev-aviso-acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-3); }
.ev-aviso-acciones button { min-height: var(--control-lg); }
.ev-curso { font-size: var(--text-xl); color: var(--navy); font-weight: 600; margin: 0 0 var(--space-2); }
.ev-reloj { margin: 0 0 var(--space-1); color: var(--ink-2); }
.ev-pedidos, .ev-marcas { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.ev-pedidos button, .ev-marca { min-height: var(--control-lg); }
.ev-plan { display: flex; flex-direction: column; gap: var(--space-1); }
.ev-fila { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; align-items: baseline;
min-height: var(--control-lg); padding: var(--space-2) var(--space-3); text-align: left; font: inherit; color: var(--ink);
background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; }
.ev-fila--vista { border-color: var(--teal-txt); background: var(--surface-action); }
.ev-fila:focus-visible { outline: none; box-shadow: var(--ring); }
.ev-guardado { font-size: var(--text-sm); min-height: 1.2em; }
.ev-paso { margin-top: var(--space-3); }
.ev-paso-texto { margin: 0 0 var(--space-3); line-height: var(--leading-copy); color: var(--ink); }
.ev-contador { display: flex; align-items: center; gap: var(--space-2); }
.ev-contador button { min-width: var(--control-lg); min-height: var(--control-lg); }
.ev-contador input { width: 6rem; min-height: var(--control-lg); text-align: center; }
.ev-qr { display: block; width: min(280px, 100%); height: auto; margin: var(--space-4) auto; color: var(--ink); }
.ev-qr-card { max-width: 420px; }
.pc-informe h1 { margin: 0; font-size: var(--text-xl); color: var(--navy); }
.pc-informe-rotulo { margin: 2px 0 0; font-size: var(--text-sm); color: var(--ink-2); }
.pc-informe-ident { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px;
margin: 0 0 18px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pc-informe-ident dt { font-size: var(--text-sm); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
color: var(--ink-3); }
.pc-informe-ident dd { margin: 2px 0 0; font-size: var(--text-md); color: var(--ink); }
.pc-informe-lamina { margin: 0 0 20px; }
.pc-informe-pruebas h2 { margin: 0 0 8px; font-size: var(--text-lg); color: var(--navy); }
.pc-informe-pruebas table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.pc-informe-pruebas th { text-align: left; font-weight: 600; color: var(--ink-3); padding: 6px 10px 6px 0;
border-bottom: 1px solid var(--line); }
.pc-informe-pruebas td { vertical-align: top; color: var(--ink-2); padding: 7px 10px 7px 0;
border-bottom: 1px solid var(--line-soft); }
.pc-informe-forma { display: block; color: var(--ink-3); }
.pc-informe-pie { margin: 16px 0 0; font-size: var(--text-sm); color: var(--ink-3); }
.pc-pdf-seleccion { max-width: 820px; margin: var(--space-6) auto 0; }
.pc-informe-ident .pc-informe-ancho { grid-column: 1 / -1; }
.pcc { margin: var(--space-5) 0 0; }
.pcc-curva { margin: var(--space-4) 0 0; max-width: 360px; color: var(--navy); }
.pcc-curva svg { display: block; width: 100%; height: auto; }
.pcc-curva-tit { margin: 0 0 var(--space-1); font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--navy); }
.pcc-curva-eje { stroke: var(--ink-2); stroke-width: .6; }
.pcc-curva-linea { fill: none; stroke: currentColor; stroke-width: 1.5; }
.pcc-curva-pausa { stroke-dasharray: 3 3; }
.pcc-curva-punto { fill: currentColor; }
.pcc-curva-num { fill: var(--ink-2); font-size: var(--text-lg); }
.pcc-curva-valor { fill: var(--navy); font-weight: var(--weight-bold); }
.pcc-curva-pie { margin: var(--space-1) 0 0; font-size: var(--text-sm); }
.pcc-observacion { margin: var(--space-5) 0 0; }
.pcc-observacion .pcc-titulo { display: block; margin: 0 0 var(--space-1); }
.pcc-registro { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--navy); }
.pcc-registro-falta { margin: var(--space-1) 0 0; font-size: var(--text-sm); }
.pcc-observacion .sec { margin: var(--space-2) 0 0; }
.pcc-notas { margin: 0; display: grid; gap: var(--space-2); }
.pcc-notas dt { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--navy); }
.pcc-notas dd { margin: 0; max-width: 72ch; font-size: var(--text-md); line-height: var(--leading-copy); color: var(--ink); }
.pcc-pendientes { margin: 0 0 var(--space-3); }
.pcc-pendientes p { margin: var(--space-1) 0 var(--space-2); font-size: var(--text-sm); }
.pcc-pendientes ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); }
.pcc-pendientes li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.pcc-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-2); }
.pcc-titulo { font-size: var(--text-md); color: var(--navy); }
.pcc-sub { font-size: var(--text-sm); }
.pcc-aviso { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--ink-2); }
.pcc-sintesis { margin: 0 0 var(--space-3); }
.pcc-sintesis-tit { margin: 0 0 var(--space-1); font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--navy); }
.pcc-texto p { margin: 0 0 var(--space-2); max-width: 72ch; font-size: var(--text-md); line-height: var(--leading-copy);
color: var(--ink); }
.pcc-grupo { margin: var(--space-3) 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: .06em;
text-transform: uppercase; color: var(--ink-3); }
.pcc-secciones { display: grid; gap: var(--space-2); }
.pcc-pdf .pcc-nota-campo { margin: var(--space-4) 0 0; }
.pcc-pdf .pcc-nota-campo textarea { width: 100%; resize: vertical; }
.pc-informe-seccion { margin: 0 0 var(--space-5); }
.pc-informe-seccion > h2 { margin: 0 0 var(--space-2); font-size: var(--text-lg); color: var(--navy); }
.pc-informe-aplicadas ul { margin: 0; padding-left: var(--space-5); font-size: var(--text-md); color: var(--ink-2); }
.pc-informe-aplicadas li { margin: 0 0 var(--space-1); }
.pc-informe-pruebas h3 { margin: var(--space-3) 0 var(--space-2); font-size: var(--text-md); color: var(--navy); }
.pc-informe-bloque { margin: 0 0 var(--space-3); }
.pc-informe-bloque h3 { margin: 0 0 var(--space-1); font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--navy); }
.pc-informe-bloque p { margin: 0 0 var(--space-2); font-size: var(--text-md); line-height: var(--leading-copy); color: var(--ink); }
.pc-informe-firma { display: flex; flex-direction: column; gap: var(--space-1); max-width: 320px; margin: var(--space-10) 0 0;
font-size: var(--text-sm); color: var(--ink-2); }
.pc-informe-firma b { font-size: var(--text-md); color: var(--ink); }
.pc-informe-firma-linea { display: block; margin: 0 0 var(--space-2); border-top: 1px solid var(--ink-3); }
[data-perfil-cognitivo][aria-busy="true"] { pointer-events: none; }
.obs-pill { background: var(--surface-subtle); color: var(--ink-2); }
.obs-pill[data-validez="adecuada"] { background: var(--surface-action); color: var(--teal-txt); }
.obs-pill[data-validez="cautela"], .obs-pill[data-validez="insuficiente"] { background: var(--sev-ambar-bg); color: var(--sev-ambar-txt); }
.obs-salida { width: 100%; }
.obs-form { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.obs-cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.obs-ayuda { flex: 1 1 320px; margin: 0; font-size: var(--text-sm); color: var(--ink-2); line-height: var(--leading-copy); }
.obs-bloque { border: 0; margin: var(--space-5) 0 0; padding: 0; min-width: 0; }
.obs-bloque > legend { padding: 0; margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-bold);
letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.obs-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--space-2) var(--space-4);
align-items: center; padding: var(--space-2) 0; border-top: 1px solid var(--line-soft); }
.obs-var { font-size: var(--text-md); color: var(--ink); }
.obs-pregunta { display: block; font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-ui); color: var(--ink); }
.obs-dir { display: flex; gap: var(--space-3); margin-top: var(--space-1); }
.obs-opciones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-1); }
.obs-op { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: var(--control-lg);
padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer;
font-size: var(--text-sm); color: var(--ink-2); line-height: var(--leading-ui);
transition: border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease); }
.obs-op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
@media (hover: hover) { .obs-op:hover { border-color: var(--teal); } }
.obs-op { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.obs-op:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: 2px; }
.obs-op:has(input:checked) { border-color: var(--teal); background: var(--surface-action); color: var(--ink); }
.obs-ancla { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.pill.dib-pill { background: var(--surface-action); color: var(--ink-2); }
.pill.dib-pill.dib-atencion { background: var(--sev-ambar-bg); }
.dib-form { container-type: inline-size; }
.dib-paso { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.dib-svg { display: block; width: 100%; height: auto; }
.dib-svg g { fill: none; stroke: var(--ink-3); color: var(--ink-3); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.dib-svg g.dib-actual { stroke: var(--sev-rojo-color); color: var(--sev-rojo-color); stroke-width: 3.4; }
.dib-contador { margin: 0; font-size: var(--text-sm); color: var(--ink-3); }
.dib-nombre { margin: var(--space-1) 0 var(--space-3); font-size: var(--text-lg); color: var(--navy); }
.dib-nombre:focus { outline: none; }
.dib-nombre:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: var(--r-sm); }
.dib-opciones { display: grid; gap: var(--space-2); }
.obs-op.dib-op { flex-direction: row; gap: var(--space-3); padding: var(--space-2) var(--space-3); }
.dib-op .obs-n { flex: 0 0 3.2em; }
.dib-op .obs-ancla { color: var(--ink); hyphens: manual; }
.dib-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.dib-fila { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: var(--space-1); margin-top: var(--space-4); }
.dib-chip { min-height: 32px; padding: var(--space-1) var(--space-2); border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--card); color: var(--ink-2); font: inherit; font-size: var(--text-sm); font-variant-numeric: tabular-nums; cursor: pointer;
transition: border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease); }
.dib-chip b { color: var(--ink-3); font-weight: var(--weight-bold); }
.dib-chip.dib-hecho b { color: var(--navy); }
.dib-chip:hover { border-color: var(--teal); }
.dib-chip:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.dib-chip[aria-current="step"] { border-color: var(--sev-rojo-color); color: var(--sev-rojo-txt); font-weight: var(--weight-semibold); }
.dib-grupos { column-gap: var(--space-6); }
.dib-grupo .obs-sub { margin-top: var(--space-2); break-after: avoid; }
.obs-check.dib-parte { display: flex; align-items: flex-start; padding: var(--space-1) 0; break-inside: avoid; }
.dib-parte input { margin-top: 2px; flex: none; }
.dib-parte > span { display: flex; flex-direction: column; }
.dib-parte b { font-weight: var(--weight-semibold); color: var(--ink); }
.dib-ayuda { font-size: var(--text-sm); color: var(--ink-2); line-height: var(--leading-ui); }
.dib-resumen { flex: 1 1 100%; margin: 0; font-size: var(--text-sm); color: var(--ink-2); line-height: var(--leading-ui); }
.dib-figura { position: relative; min-width: 0; }
.dib-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.dib-ver-ejemplos { display: none; }
.dib-ejemplos { display: none; flex-direction: column; gap: var(--space-2); background: var(--card); }
.dib-form[data-ejemplo="2"] .dib-ejemplos[data-v="2"],
.dib-form[data-ejemplo="1"] .dib-ejemplos[data-v="1"],
.dib-form[data-ejemplo="0.5"] .dib-ejemplos[data-v="0.5"] { display: flex; position: absolute; top: 0; left: 0; right: 0; z-index: 1; min-height: 100%; }
.dib-form[data-ejemplo]:not([data-ejemplo="todos"]) .dib-svg { visibility: hidden; }
.dib-form[data-ejemplo="todos"] .dib-svg { display: none; }
.dib-form[data-ejemplo="todos"] .dib-ejemplos { display: flex; margin-bottom: var(--space-4); }
.dib-ej-titulo { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--navy); }
.dib-ej-margen { margin: 0; font-size: var(--text-sm); color: var(--ink-2); line-height: var(--leading-ui); }
.dib-ej-fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.dib-ej-fila.dib-ej-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dib-ejemplo { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; }
.dib-ejemplo svg { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; border: 1px solid var(--line); border-radius: var(--r-sm); }
.dib-ejemplo figcaption { font-size: var(--text-sm); color: var(--ink); line-height: var(--leading-ui); }
.dib-ej-contexto { fill: none; stroke: var(--ink-3); color: var(--ink-3); }
.dib-ej-contexto > * { stroke-width: 1.25px; vector-effect: non-scaling-stroke; }
.dib-ej-fantasma { fill: none; stroke: var(--ink-2); }
.dib-ej-fantasma > * { fill: none; stroke-width: 1.5px; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.dib-ej-mano path { fill: none; stroke: var(--sev-rojo-color); stroke-width: 3px; vector-effect: non-scaling-stroke;
stroke-linecap: round; stroke-linejoin: round; }
.dib-ej-mano circle { fill: var(--sev-rojo-color); }
@media (hover: none) { .dib-ver-ejemplos { display: inline-flex; } }
@media (max-width: 620px) { .dib-ej-fila.dib-ej-dos { grid-template-columns: minmax(0, 1fr); } }
@container (min-width: 720px) {
.dib-paso { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-6); }
.dib-grupos { columns: 2; }
}
@media (min-width: 621px) { .drawer.dsheet:has(.dib-form) { width: min(1180px, 94vw); } }
@media (prefers-reduced-motion: reduce) { .dib-chip { transition: none; } }
.obs-opciones.obs-sino { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 240px; }
.obs-n { font-weight: var(--weight-bold); color: var(--navy); font-variant-numeric: tabular-nums; }
.obs-op:has(input:checked) .obs-n::after { content: ' ✓'; color: var(--teal-txt); }
.obs-checks { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); }
.obs-validez { flex-direction: column; }
.obs-check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; font-size: var(--text-md);
color: var(--ink); cursor: pointer; }
.obs-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--teal); }
.obs-sugerida { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--ink-2); }
.obs-sugerida:empty { display: none; }
.obs-sub { margin: var(--space-3) 0 var(--space-1); font-size: var(--text-sm); color: var(--ink-3); }
.obs-otra { margin-top: var(--space-3); max-width: 480px; }
.obs-form > .fld { margin-top: var(--space-5); }
.obs-parte { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.obs-parte-titulo { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--navy); }
.obs-parte > .fld { margin-top: var(--space-5); }
.obs-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-5); }
.obs-estado { font-size: var(--text-sm); color: var(--ink-2); }
@media (max-width: 640px) {
.obs-fila { grid-template-columns: minmax(0, 1fr); }
.obs-opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .obs-op { transition: none; } }
.obs-boton-sesion { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 var(--space-4); }
.obs-sesion { padding-bottom: 8px; border-bottom: 1.5px solid var(--ink-3); }
.obs-sesion-marca { display: flex; align-items: center; gap: 16px; margin: 0 0 8px; }
.obs-sesion-marca h2 { margin: 0; font-size: var(--text-xl); color: var(--navy); }
.obs-ident { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 4px 16px; margin: 0 0 4px; }
.obs-ident dt { font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.obs-ident dd { margin: 0; min-height: 20px; border-bottom: 1px solid var(--ink-3); font-size: var(--text-md); color: var(--ink); }
.obs-leyenda { margin: 4px 0 0; font-size: var(--text-sm); color: var(--ink-2); }
.obs-bp-linea { margin: 4px 0 0; font-size: var(--text-sm); line-height: var(--leading-ui); color: var(--ink); }
.obs-bp-linea b { color: var(--navy); }
.obs-marca { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; white-space: nowrap; }
.obs-raya { display: inline-block; width: 64px; height: 12px; border-bottom: 1px solid var(--ink-3); }
.obs-caja { display: inline-block; flex: none; width: 12px; height: 12px; border: 1.5px solid var(--ink-2); vertical-align: -2px; }
.obs-bp-pagina { display: flex; flex-direction: column;
padding: 6px 0; border-bottom: 1px solid var(--line); break-inside: avoid; page-break-inside: avoid; }
.obs-bp-pagina > .obs-sesion { margin-bottom: 6px; }
.obs-bp-titulo { display: flex; align-items: baseline; gap: 12px; margin: 0 0 4px; padding: 2px 8px;
background: var(--surface-subtle); font-size: var(--text-2xl); font-weight: var(--weight-bold);
line-height: var(--leading-tight); color: var(--navy); }
.obs-bp-num { font-size: var(--text-xl); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.obs-bp-parte { display: flex; flex-direction: column; margin-top: 4px; break-inside: avoid; page-break-inside: avoid; }
.obs-bp-parte-titulo { margin: 4px 0 2px; font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--navy); }
.obs-bp-nota { display: flex; flex-direction: column; break-inside: avoid; page-break-inside: avoid; }
.obs-bp-renglones > span { display: block; height: var(--space-8); border-bottom: 1px solid var(--ink-3); }
.obs-bp-escala { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 0 20px; align-items: start; }
.obs-bp-tabla { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--text-sm); }
.obs-bp-tabla th, .obs-bp-tabla td { padding: 1px 4px; border-bottom: 1px solid var(--line-soft); text-align: left;
font-weight: 400; line-height: var(--leading-tight); color: var(--ink); }
.obs-bp-tabla thead th { font-weight: var(--weight-bold); color: var(--navy); border-bottom: 1px solid var(--ink-3); }
.obs-bp-tabla thead th + th, .obs-bp-tabla td { text-align: center; }
.obs-col-no, .obs-col-sino { width: 30px; }
.obs-col-leve { width: 40px; }
.obs-col-grado { width: 68px; }
.obs-bp-dir { white-space: nowrap; color: var(--ink-2); }
.obs-bp-validez { display: flex; flex-direction: column; margin: 8px 0 0; font-size: var(--text-sm); color: var(--ink); }
.obs-bp-validez b { padding: 1px 4px; border-bottom: 1px solid var(--ink-3); color: var(--navy); }
.obs-bp-validez .obs-marca { padding: 1px 4px; }
.obs-guia h3 { margin: 16px 0 4px; font-size: var(--text-md); color: var(--navy); }
.obs-guia-tabla { width: 100%; margin-top: 12px; border-collapse: collapse; table-layout: fixed; font-size: var(--text-sm); }
.obs-guia-tabla th, .obs-guia-tabla td { padding: 4px 8px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left;
font-weight: 400; line-height: var(--leading-tight); color: var(--ink); }
.obs-guia-tabla thead th { font-weight: var(--weight-bold); color: var(--navy); border-bottom: 1.5px solid var(--ink-3); }
.obs-guia-tabla thead th:first-child { width: 31%; }
.obs-guia-tabla tbody th { font-weight: var(--weight-semibold); }
.obs-guia-nota { display: block; margin-top: 4px; font-weight: 400; color: var(--ink-2); }
.obs-fin-titulo { margin: 0 0 6px; font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: .06em;
text-transform: uppercase; color: var(--ink-3); }
.obs-fin-texto { margin: 0 0 12px; font-size: var(--text-md); }
.obs-cierre-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.obs-registro { padding: 22px 22px 26px; }
.obs-registro-cab { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.obs-registro-cab h3 { margin: 0; }
.obs-registro-cab .btn-ghost { margin-left: auto; }
.obs-registro-paso { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: .06em;
text-transform: uppercase; color: var(--ink-3); }
.obs-registro-prueba { margin: 4px 0 0; font-size: var(--text-2xl); color: var(--navy); }
.obs-registro-prueba:focus { outline: none; }
.obs-lista { display: grid; gap: 8px; }
@media (max-width: 640px) {
.obs-bp-escala { grid-template-columns: minmax(0, 1fr); }
.obs-ident { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
.pc-pdf-hoja { margin: 12px 8px 32px; padding: 18px 14px; }
.pc-pdf-seleccion { margin: var(--space-3) var(--space-2) 0; }
.pc-informe-pruebas td:last-child { overflow-wrap: anywhere; hyphens: auto; }
}
@media print {
body.imprime-perfil > *:not(.pc-pdf) { display: none !important; }
body.imprime-perfil .pc-pdf { position: static; overflow: visible; background: none; }
body.imprime-perfil .pc-pdf-barra, body.imprime-perfil .pc-pdf-seleccion { display: none; }
body.imprime-perfil .pc-pdf-hoja { max-width: none; margin: 0; padding: 0; box-shadow: none; border-radius: 0; }
.pc-informe-lamina, .pc-informe-pruebas tr { break-inside: avoid; page-break-inside: avoid; }
.pc-informe-seccion > h2, .pc-informe-bloque > h3 { break-after: avoid; page-break-after: avoid; }
.pc-informe-bloque p { orphans: 3; widows: 3; }
.pcc-curva { break-inside: avoid; page-break-inside: avoid; }
.pc-informe-firma { break-inside: avoid; page-break-inside: avoid; }
body.imprime-perfil .obs-pdf { page: observacion; }
@page observacion {
size: letter portrait;
margin: 14mm 14mm 12mm;
@top-center { content: var(--print-document-title, "Registro de observación") " · Corticalia"; }
}
.obs-sesion, .obs-guia { break-inside: avoid; page-break-inside: avoid; }
}
.inf-intro { margin: -6px 0 var(--space-3); font-size: var(--text-md); }
.inf-vacio { margin: var(--space-3) 0 0; }
.inf-fila { display: flex; align-items: center; gap: var(--space-2) var(--space-3); flex-wrap: wrap;
padding: var(--space-3) 0; border-top: 1px solid var(--line); }
#infNuevoPanel + .inf-fila { margin-top: var(--space-3); }
.inf-fila-txt { flex: 1 1 240px; min-width: 0; }
.inf-fila-txt .muted { display: block; font-size: var(--text-sm); }
.inf-btn-fila { min-height: var(--control-sm); padding: 6px 14px; font-size: var(--text-sm); }
.inf-pill-lista { background: var(--surface-action); color: var(--teal-txt); }
.inf-pill-falta { background: var(--sev-ambar-bg); color: var(--sev-ambar-txt); }
.inf-pill-auto { background: var(--surface-subtle); color: var(--ink-2); }
.inf-panel { margin: var(--space-3) 0; padding: var(--space-4); border: 1px solid var(--line);
border-radius: var(--r-md); background: var(--surface-subtle); }
.inf-panel-tit { margin: 0 0 var(--space-3); font-weight: var(--weight-bold); }
.inf-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 var(--space-4); }
.inf-nota { margin: -4px 0 var(--space-2); font-size: var(--text-sm); }
.inf-error { margin: 0; min-height: 1em; font-size: var(--text-sm); color: var(--sev-rojo-txt); }
.inf-acciones { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-top: var(--space-2); }
.inf-cabecera .inf-volver { margin: 0 0 var(--space-3); }
.inf-meta { margin: -6px 0 var(--space-3); font-size: var(--text-sm); }
.inf-rango { max-width: 460px; }
.inf-estado { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--ink-3); }
.inf-faltan { margin: 0 0 var(--space-2); font-size: var(--text-md); color: var(--ink-2); line-height: var(--leading-copy); }
.inf-faltan-ok { color: var(--teal-txt); }
.inf-ayuda { margin: 0 0 var(--space-3); font-size: var(--text-sm); line-height: var(--leading-copy); }
.inf-sub { margin: var(--space-3) 0 var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-bold);
letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.inf-lista { margin: 0 0 var(--space-3); padding-left: 1.2em; font-size: var(--text-md); color: var(--ink-2); }
.inf-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-2) var(--space-4); margin: 0; }
.inf-datos dt { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--ink-3); }
.inf-datos dd { margin: 2px 0 0; font-size: var(--text-md); color: var(--ink); }
.inf-fuente { margin: 0 0 var(--space-3); padding-left: var(--space-3);
font-size: var(--text-md); color: var(--ink-2); }
.inf-fuente p { margin: 0 0 var(--space-1); }
.inf-pruebas { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); }
.inf-prueba .fld { margin: var(--space-1) 0 0; }
.inf-grupo { padding-top: var(--space-2); border-top: 1px solid var(--line-soft); }
.inf-datos-grupo { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.inf-dx, .inf-rec { padding: var(--space-3) 0; border-top: 1px solid var(--line-soft); }
.inf-dx-nombre { margin: 0 0 var(--space-2); font-size: var(--text-md); }
.inf-check { margin: var(--space-3) 0; }
.inf-quitar { padding: 2px 8px; font-size: var(--text-sm); }
.inf-externa { padding: var(--space-3) 0; border-top: 1px solid var(--line-soft); }
.inf-externa-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); margin: var(--space-3) 0; }
.inf-externa-img { margin: 0; }
.inf-externa-img img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }
.inf-elegir { margin: 0; }
.inf-panel .fld[hidden] { display: none; }
.inf-hoja-externa { margin-bottom: var(--space-4); }
.inf-hoja-externa .inf-externa-imgs { grid-template-columns: 1fr; }
.inf-lamina { margin-top: var(--space-3); }
.inf-revision { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.inf-revision-lista { margin: 0 0 var(--space-3); padding-left: 1.2em; display: grid; gap: var(--space-2);
font-size: var(--text-md); color: var(--ink-2); }
.inf-revision-lista li span { margin-right: var(--space-2); }
.inf-bloquea { color: var(--ink); }
.inf-version { margin: -6px 0 var(--space-3); font-size: var(--text-sm); }
.inf-preguntas-ficha { margin: 0; padding-left: 1.2em; font-size: var(--text-lg); line-height: var(--leading-copy); }
.inf-form-campo {  padding-left: var(--space-3); margin-bottom: var(--space-3); }
.inf-form-rotulo { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: .05em;
text-transform: uppercase; color: var(--ink-3); }
.inf-form-texto { margin: 3px 0 0; font-size: var(--text-md); line-height: var(--leading-copy); white-space: pre-wrap; }
.fm-nota { margin: -6px 0 var(--space-3); font-size: var(--text-md); line-height: var(--leading-copy); }
.fm-editar { margin-top: var(--space-3); }
.fm-editar[hidden] { display: none; }
.fm-paso-lect + .fm-paso-lect { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line-soft); }
.fm-paso-tit { margin: 0 0 var(--space-2); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--navy); }
.fm-campo-lect { margin-bottom: var(--space-3); }
.fm-rotulo { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--ink-3); }
.fm-texto { margin: 3px 0 0; font-size: var(--text-md); line-height: var(--leading-copy); white-space: pre-wrap; color: var(--ink); }
.fm-tabla { overflow-x: auto; margin-top: var(--space-1); }
.fm-tabla table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.fm-tabla th { text-align: left; font-weight: var(--weight-semibold); color: var(--ink-3); padding: 6px 10px 6px 0;
border-bottom: 1px solid var(--line); }
.fm-tabla td { vertical-align: top; color: var(--ink-2); padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line-soft); }
.fm-aspectos { margin: var(--space-1) 0 0; display: grid; gap: var(--space-1); }
.fm-aspectos > div { display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr); gap: var(--space-3); }
.fm-aspectos dt { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--ink-3); line-height: var(--leading-copy); }
.fm-aspectos dd { margin: 0; font-size: var(--text-md); color: var(--ink); line-height: var(--leading-copy); }
.fm-mapa { margin: 0 0 var(--space-4); }
.fm-mapa-tit { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--ink-3); }
.fm-mapa-rejilla { display: grid; align-items: center; gap: var(--space-2) 0;
grid-template-columns: minmax(0, 1fr) 6rem minmax(0, 1fr) 6rem minmax(0, 1fr);
grid-template-areas: "origen der centro izq mantiene" ". . arr . ." ". . protege . ."; }
.fm-lugar-origen { grid-area: origen; } .fm-lugar-centro { grid-area: centro; }
.fm-lugar-mantiene { grid-area: mantiene; } .fm-lugar-protege { grid-area: protege; }
.fm-flecha-der { grid-area: der; } .fm-flecha-izq { grid-area: izq; } .fm-flecha-arr { grid-area: arr; }
.fm-lugar { align-self: stretch; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); }
.fm-lugar-centro { border-color: var(--navy); }
.fm-lugar-tit { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--navy); }
.fm-nodo + .fm-nodo { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--line-soft); }
.fm-nodo-rot { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--ink-3); }
.fm-nodo-txt, .fm-nodo-vacio { margin: 2px 0 0; font-size: var(--text-sm); line-height: var(--leading-ui); color: var(--ink); }
.fm-nodo-vacio { color: var(--ink-3); }
.fm-flecha { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: 0 var(--space-1);
font-size: var(--text-sm); line-height: var(--leading-tight); text-align: center; color: var(--ink-3); }
.fm-flecha svg { width: 40px; height: 12px; flex: none; }
.fm-flecha-izq svg { transform: scaleX(-1); }
.fm-flecha-arr { flex-direction: row; justify-content: center; }
.fm-flecha-arr svg { transform: rotate(-90deg); margin: var(--space-3) calc(var(--space-3) * -1); }
.fm-mapa-nota { margin: var(--space-2) 0 0; font-size: var(--text-xs); }
@media (max-width: 760px) {
.fm-mapa-rejilla { grid-template-columns: minmax(0, 1fr); grid-template-areas: "origen" "der" "centro" "izq" "mantiene" "arr" "protege"; }
.fm-flecha { flex-direction: row; justify-content: center; }
.fm-flecha-der svg { transform: rotate(90deg); margin: var(--space-3) calc(var(--space-3) * -1); }
.fm-flecha-izq svg { transform: rotate(-90deg); margin: var(--space-3) calc(var(--space-3) * -1); }
.fm-mapa .fm-flecha-corta { display: none; }
.fm-mapa .fm-flecha-larga { display: inline; }
.fm-ficha > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
.fm-aspectos > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
.fm-editor { margin-top: var(--space-3); }
.fm-modelos { border: 0; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2); min-width: 0; }
.fm-modelos legend { padding: 0; margin-bottom: var(--space-1); font-size: var(--text-md); color: var(--ink); }
.fm-modelo-op { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); cursor: pointer;
border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
transition: border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease); }
.fm-modelo-op:hover { border-color: var(--ink-adorno); }
.fm-modelo-op:has(input:checked) { border-color: var(--teal-txt); background: var(--surface-action); }
.fm-modelo-op input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--teal-txt); }
.fm-modelo-nombre { display: block; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--ink); }
.fm-modelo-cuando { display: block; margin-top: 2px; font-size: var(--text-sm); line-height: var(--leading-ui); color: var(--ink-2); }
.fm-cuando { margin: 0 0 var(--space-3); font-size: var(--text-sm); line-height: var(--leading-ui); color: var(--ink-3); }
.fm-anterior { margin: 0 0 var(--space-4); padding: var(--space-3); border-radius: var(--r-sm); background: var(--surface-subtle);
font-size: var(--text-md); line-height: var(--leading-copy); }
.fm-anterior p:not(.fm-rotulo) { margin: var(--space-1) 0 0; color: var(--ink-2); }
.fm-editor .sec { box-shadow: none; }
.fm-paso-n { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--teal-txt); }
.fm-paso-cuenta { font-size: var(--text-sm); color: var(--ink-3); }
.fm-plegable { margin: var(--space-1) 0 var(--space-2); }
.fm-plegable summary { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--target-min);
cursor: pointer; list-style: none; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--teal-txt); }
.fm-plegable summary::-webkit-details-marker { display: none; }
.fm-plegable summary::after { content: '▾'; color: var(--ink-3); transition: transform var(--duration-fast) var(--ease); }
.fm-plegable[open] summary::after { transform: rotate(180deg); }
.fm-plegable summary:hover { color: var(--navy); }
.fm-plegable > p, .fm-plegable > ul { margin: var(--space-1) 0 0; padding: var(--space-3); border-radius: var(--r-sm); background: var(--surface-subtle);
font-size: var(--text-md); line-height: var(--leading-copy); color: var(--ink-2); }
.fm-plegable > ul { padding-left: var(--space-8); display: grid; gap: var(--space-1); }
.fm-plegable > p + p { margin-top: var(--space-2); }
.fm-sin-objetivo { color: var(--ink-3); font-style: italic; }
.fm-referencia { margin: 0 0 var(--space-3); padding: var(--space-3); border-radius: var(--r-sm); background: var(--card); }
.pl-responde { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--ink-2); }
.fm-franja { margin-top: var(--space-2); padding: var(--space-3); border-radius: var(--r-sm); background: var(--surface-subtle); }
.fm-ficha { margin: 0 0 var(--space-3); display: grid; gap: var(--space-1); }
.fm-ficha > div { display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr); gap: var(--space-3); }
.fm-ficha dt { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--ink-3); line-height: var(--leading-copy); }
.fm-ficha dd { margin: 0; font-size: var(--text-md); color: var(--ink); line-height: var(--leading-copy); }
.fm-aviso { margin: 0 0 var(--space-3); padding: var(--space-3); border-radius: var(--r-sm); background: var(--surface-subtle);
font-size: var(--text-md); line-height: var(--leading-copy); color: var(--ink); }
.fm-acciones .fm-editar { margin-top: 0; }
.fm-ayudas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); }
.fm-ayudas-tit { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--ink-3); }
.fm-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fm-caso { margin-top: var(--space-2); padding: var(--space-3); border-radius: var(--r-sm); background: var(--surface-subtle); }
.fm-caso-quien { margin: 0 0 var(--space-2); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--ink); }
.fm-caso-notas { margin: var(--space-1) 0 0; padding-left: var(--space-5); display: grid; gap: var(--space-1);
font-size: var(--text-md); line-height: var(--leading-copy); color: var(--ink-2); }
.fm-nota-hip { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--ink-2); }
.fm-fuentes { margin: var(--space-1) 0 0; padding-left: var(--space-5); font-size: var(--text-md); line-height: var(--leading-copy); color: var(--ink); }
.fm-fuentes-ed { display: grid; gap: var(--space-1); margin-bottom: var(--space-2); }
.fm-fuente-op { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-sm); font-size: var(--text-md); color: var(--ink); cursor: pointer; }
.fm-fuente-op input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--teal-txt); }
.fm-revision { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.fm-fuera { margin: var(--space-2) 0 0; font-size: var(--text-sm); }
.fm-fuera:empty { display: none; }
.fm-preguntas { margin: 0 0 var(--space-3); }
.fm-preguntas > ul { list-style: none; padding-left: var(--space-3); }
.fm-preguntas li + li { padding-top: var(--space-2); border-top: 1px solid var(--line); }
.fm-preguntas li p { margin: 0; color: var(--ink); }
.fm-preguntas-acc { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-1); }
.fm-revision-lect p { margin: 0 0 var(--space-2); font-size: var(--text-md); line-height: var(--leading-copy); }
.fm-diff { margin: var(--space-2) 0; }
.fm-diff-modelo { margin: var(--space-2) 0; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--navy); }
.fm-diff-antes, .fm-diff-ahora { margin: 2px 0 0; font-size: var(--text-md); line-height: var(--leading-copy); }
.fm-diff-antes { color: var(--ink-3); }
.fm-diff-ahora { color: var(--ink); }
.fm-diff-antes span, .fm-diff-ahora span { font-weight: var(--weight-semibold); }
.pl-cierre { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.fm-flecha-larga { display: none; }
.fm-campo { margin: var(--space-3) 0 var(--space-5); }
.fm-rotulo-fila { display: flex; align-items: center; gap: var(--space-1); }
.fm-info-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); flex: none;
min-width: var(--target-min); min-height: var(--target-min); padding: 0; border: 0; background: none; cursor: pointer;
font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--teal-txt);
transition: color var(--duration-fast) var(--ease); }
.fm-info-btn svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fm-info-btn:hover, .fm-info-btn[aria-expanded="true"] { color: var(--navy); }
.fm-info-btn--txt { padding: 0 var(--space-1); }
.fm-info { margin: var(--space-1) 0 var(--space-2); padding: var(--space-3); border-radius: var(--r-sm);
background: var(--surface-subtle); font-size: var(--text-md); line-height: var(--leading-copy); color: var(--ink); }
.fm-info[hidden] { display: none; }
.fm-info p { margin: 0; }
.fm-info p + p { margin-top: var(--space-2); }
.fm-info p span { font-weight: var(--weight-semibold); }
.fm-info .fm-info-tit { font-weight: var(--weight-semibold); color: var(--navy); }
.fm-info-cols { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3); margin: 0 0 var(--space-1); }
.fm-info-cols-tit { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--ink-3); }
.fm-celda .fm-celda-rot { display: flex; align-items: center; gap: var(--space-1); }
.fm-campo .fm-rotulo { display: block; font-size: var(--text-md); color: var(--ink); }
.fm-pregunta { margin: 2px 0 0; font-size: var(--text-md); line-height: var(--leading-copy); color: var(--ink-2); }
.fm-ejemplo { margin: 2px 0 var(--space-2); font-size: var(--text-sm); line-height: var(--leading-ui); color: var(--ink-3); }
.fm-ejemplo span { font-weight: var(--weight-semibold); }
.fm-filas { display: grid; gap: var(--space-2); margin-bottom: var(--space-2); }
.fm-fila { display: grid; gap: var(--space-2); align-items: end; padding-bottom: var(--space-2); border-bottom: 1px solid var(--line-soft);
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.fm-celda { display: block; min-width: 0; }
.fm-celda span { display: block; margin-bottom: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--ink-3); }
.fm-quitar { justify-self: start; min-height: var(--control-md); }
.fm-aspectos-ed { display: grid; gap: var(--space-2); }
.fm-aspecto { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.fm-acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.fm-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-3) var(--space-4); }
.fm-voz { min-width: 0; }
.fm-dos > .fm-voz + .fm-voz { padding-left: var(--space-4); border-left: 1px solid var(--line-soft); }
.fm-voz-nombre { display: block; margin: 0 0 var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--navy); }
.fm-voz textarea { width: 100%; }
.fm-dos--familia { grid-template-columns: minmax(0, 1fr); }
.fm-dos--familia > .fm-voz + .fm-voz { padding-left: 0; border-left: 0; padding-top: var(--space-3); border-top: 1px solid var(--line-soft); }
.fm-voz-quitar { margin-top: var(--space-1); min-height: var(--control-md); }
.fm-voz-anadir { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
.fm-voz-anadir[hidden] { display: none; }
.fm-nota-fija { margin: var(--space-1) 0 var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--r-sm);
background: var(--surface-subtle); font-size: var(--text-md); line-height: var(--leading-copy); color: var(--ink); }
.fm-seg-compromiso { display: grid; gap: var(--space-2); }
.fm-seg-comp-voz { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.fm-seg-comp-voz .fm-voz-nombre { flex-basis: 100%; margin: 0; }
.fm-seguridad { border: 0; margin: 0 0 var(--space-4); padding: 0 0 var(--space-4); border-bottom: 1px solid var(--line);
display: grid; gap: var(--space-2); min-width: 0; }
.fm-seguridad legend { padding: 0; margin-bottom: var(--space-1); font-size: var(--text-md); color: var(--ink); }
.fm-seg-entrevistas, .fm-seg-conjunto { display: grid; gap: var(--space-2); }
.fm-seg-tit { margin: var(--space-1) 0 0; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--ink); }
.fm-seguridad .fm-aviso, .fm-seguridad .fm-nota { margin: 0; }
.fm-seguridad [hidden] { display: none; }
.fm-ciclo-rejilla { display: grid; gap: var(--space-2); align-items: stretch;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.fm-ciclo-medio { display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); }
@media (max-width: 760px) {
.fm-ciclo-rejilla { grid-template-columns: minmax(0, 1fr); }
.fm-dos > .fm-voz + .fm-voz { padding-left: 0; border-left: 0; padding-top: var(--space-3); border-top: 1px solid var(--line-soft); }
}
.inf-form-pareja { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.fm-pareja-tit { margin: 0 0 var(--space-2); font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--navy); }
.fm-pareja { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.par-seccion { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line-soft); }
.par-seccion-tit { margin: 0 0 var(--space-2); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--ink); }
.fm-tipo { margin-bottom: var(--space-4); }
@media print { .fm-lugar, .fm-nodo, .fm-campo-lect { break-inside: avoid; } }
@media (prefers-reduced-motion: reduce) { .fm-modelo-op, .fm-plegable summary::after, .fm-info-btn { transition: none; } }
.inf-hoja .inf-hoja-titulo { margin: 0; font-size: var(--text-xl); color: var(--navy); }
.inf-hoja .inf-hoja-h { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-lg); color: var(--navy); }
.inf-hoja p { margin: 0 0 var(--space-2); font-size: var(--text-md); line-height: var(--leading-copy); color: var(--ink); }
.inf-hoja ol, .inf-hoja ul { margin: 0 0 var(--space-2); padding-left: 1.2em; font-size: var(--text-md); }
.inf-hoja .inf-sub { margin-top: var(--space-2); }
.inf-linea-firma { margin-top: var(--space-8); padding-top: var(--space-1); border-top: 1px solid var(--ink-3);
max-width: 260px; font-size: var(--text-sm); color: var(--ink-3); }
.inf-hoja .inf-firma-datos, .inf-firma-datos { font-size: var(--text-sm); color: var(--ink-2); }
.inf-firma-imagen { display: block; max-width: 260px; max-height: 88px; margin-top: var(--space-4); }
.inf-firma-imagen + .inf-linea-firma { margin-top: 0; }
.inf-hoja-pantalla .lam-marco { overflow-x: auto; }
@media print {
body.imprime-perfil .inf-hoja { page: informeEvaluacion; }
@page informeEvaluacion {
size: letter portrait;
margin: 20mm 18mm 18mm;
@top-center { content: "Informe de evaluación · Corticalia"; }
}
.inf-hoja-sec .inf-hoja-h { break-after: avoid; page-break-after: avoid; }
.inf-hoja-firma, .inf-pregunta { break-inside: avoid; page-break-inside: avoid; }
.inf-externa-img { break-inside: avoid; page-break-inside: avoid; }
}
.franja-cifras {
display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
gap: 1px; background: var(--line);
border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
margin-bottom: var(--space-4);
}
.franja-cifra {
display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
min-width: 0; min-height: var(--control-lg);
padding: var(--space-3) var(--space-4);
background: var(--card); border: 0; border-radius: 0; margin: 0;
color: var(--ink); font: inherit; text-align: left;
}
button.franja-cifra { cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); }
.fc-n {
font-size: var(--text-kpi); font-weight: var(--weight-bold); line-height: 1;
color: var(--navy); font-variant-numeric: tabular-nums;
}
.fc-l {
display: block; margin-top: var(--space-2);
font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1.3; color: var(--ink);
text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.fc-h { display: block; margin-top: var(--space-1); font-size: var(--text-sm); line-height: 1.3; color: var(--ink-3); }
.fc-punto {
display: inline-block; width: 8px; height: 8px; border-radius: 50%;
background: var(--fc); margin-right: var(--space-2); vertical-align: 1px;
}
@media (hover: hover) {
button.franja-cifra:hover { background: var(--surface-subtle); }
button.franja-cifra:hover .fc-l { text-decoration: underline; text-decoration-color: currentColor; }
}
@media (hover: none) {
button.franja-cifra .fc-l { text-decoration: underline; text-decoration-color: var(--ink-adorno); }
}
.franja-cifra[aria-expanded="true"],
.franja-cifra[aria-pressed="true"] { background: var(--surface-action); }
.franja-cifra[aria-expanded="true"] .fc-l,
.franja-cifra[aria-pressed="true"] .fc-l { color: var(--teal-txt); text-decoration: underline; text-decoration-color: currentColor; }
button.franja-cifra:focus-visible { box-shadow: none; outline: 2px solid var(--teal-txt); outline-offset: -2px; }
@media (max-width: 600px) {
.franja-cifras { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.franja-cifra { padding: var(--space-3); }
}
@media (max-width: 420px) {
.franja-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.franja-cifra:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
button.franja-cifra { transition: none; }
}
@media print {
.franja-cifras { break-inside: avoid; }
}
.filter-more-guardados { flex-basis:100%; display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3);
padding-top:var(--space-3); border-top:1px solid var(--line-soft); }
.filter-more-guardados .card-link { margin-left:0; }
@media (max-width: 760px) {
.filter-more[open] { flex-basis:100%; min-width:0; }
.filter-more-body { position:static; width:auto; margin-top:var(--space-2); }
.filter-more-body select { max-width:100%; min-width:0; }
}
.cn-recientes { margin-bottom: var(--space-4); }
.cn-recientes .card-title { margin-bottom: var(--space-3); }
.hc-cerrar { margin-left: auto; align-self: center; }
.perfil-acciones {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: var(--space-3) var(--space-6); margin: 0 0 var(--space-5);
}
.perfil-acciones-ver,
.perfil-acciones-gestionar,
.perfil-dims { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-4); }
.perfil-acciones-gestionar { gap: var(--space-2); }
.perfil-acciones-rot { font-size: var(--text-sm); font-weight: 600; color: var(--ink-3); }
.perfil-acciones .card-link,
.perfil-dims .card-link { margin-left: 0; }
.perfil-dims { margin: 0 0 var(--space-5); }
.perfil-dims-item { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.perfil-dims-cambio { color: var(--ink-3); font-size: var(--text-sm); }
@media (max-width: 640px) {
.perfil-acciones { gap: var(--space-3); }
.perfil-acciones-gestionar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); width: 100%; }
.perfil-acciones-gestionar .perfil-acciones-rot { grid-column: 1 / -1; }
.perfil-acciones-gestionar .btn-outline { justify-content: center; padding-inline: var(--space-3); }
}
.fam-oferta { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.fam-oferta h3 { font-size: var(--text-md); color: var(--navy); margin: 0 0 var(--space-2); }
.fam-oferta .cog-lock-tx { margin: 0 !important; font-size: var(--text-sm); }
.fam-oferta .card-link { margin-left: 0; }
.fam-aut-aviso { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin-top: var(--space-5); }
.fam-aut-aviso .card-link { margin-left: auto; }
.entrada-pagina {
display: grid; grid-template-columns: minmax(0, 1fr);
background: var(--bg); color: var(--ink);
font-size: var(--text-lg); line-height: var(--leading-copy);
}
.entrada-pagina > * { min-width: 0; }
.entrada-pagina img { display: block; max-width: 100%; height: auto; }
@media (min-width: 1024px) {
.entrada-pagina { grid-template-columns: minmax(380px, 34%) minmax(0, 1fr); min-height: 100vh; }
.entrada { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}
.entrada-pagina:has(> .vitrina:empty) { grid-template-columns: minmax(0, 1fr); }
.entrada-pagina:has(> .vitrina:empty) .entrada { border-right: 0; align-items: center; }
.entrada-pagina:has(> .vitrina:empty) .entrada-pie a.entrada-conocer { display: none; }
.vitrina:empty { display: none; }
.entrada-pagina :focus-visible { outline: 2px solid var(--teal-txt); outline-offset: 2px; box-shadow: none; }
.entrada-pagina .btn-primary:focus-visible { outline-color: var(--navy); }
.entrada {
display: flex; flex-direction: column; padding: var(--space-10) var(--space-12);
background: var(--card); border-right: 1px solid var(--line);
}
.entrada-cuerpo { width: 100%; max-width: 380px; margin: auto 0; padding: var(--space-10) 0; }
.entrada-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.entrada-cabeza .form-brand-img { margin-bottom: 0; }
.entrada-marca { display: inline-block; border-radius: var(--r-sm); }
.entrada-volver span { margin-right: var(--space-1); }
.entrada-idioma { display: flex; gap: var(--space-1); flex: none; }
.entrada-idioma .chip { min-width: var(--control-lg); justify-content: center; }
.entrada-pagina:not(:has(#loginForm)) .entrada-idioma { display: none; }
.entrada h1 { margin-top: var(--space-12); }
.entrada-bajada { margin-top: var(--space-2); font-size: var(--text-md); color: var(--ink-2); }
.entrada-paso { margin-top: var(--space-8); }
.entrada-paso h2 { font-size: var(--text-xl); }
.entrada-contexto { margin: var(--space-2) 0 var(--space-6); font-size: var(--text-md); color: var(--ink-2); }
.entrada-ayuda { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--ink-3); }
.entrada .fld { margin-bottom: var(--space-4); }
.entrada .fld span { color: var(--ink-2); margin-bottom: var(--space-2); }
.entrada .fld input:not([type="checkbox"]), .entrada .fld select {
height: var(--control-lg); padding: 0 var(--space-3);
border-color: var(--ink-adorno); font-size: var(--text-lg);
transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.entrada .fld input:not([type="checkbox"]):hover, .entrada .fld select:hover { border-color: var(--ink-3); }
.entrada .fld input:focus, .entrada .fld input:focus-visible,
.entrada .fld select:focus, .entrada .fld select:focus-visible { outline: none; border-color: var(--teal-txt); box-shadow: var(--ring); }
.entrada .fld input[autocomplete="one-time-code"] { letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.entrada-paso .btn-primary {
width: 100%; justify-content: center; min-height: var(--control-lg);
margin-top: var(--space-2); font-size: var(--text-lg);
}
.entrada-error { font-size: var(--text-sm); color: var(--lv-intervencion-prioritaria-txt); }
.entrada-error:not(:empty) { margin-bottom: var(--space-2); }
.entrada-aviso {
margin-top: var(--space-8); padding: var(--space-3) var(--space-4);
border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-subtle);
font-size: var(--text-md); color: var(--ink);
}
.entrada-aviso + .entrada-paso { margin-top: var(--space-4); }
.entrada-paso .entrada-aviso { margin: 0 0 var(--space-2); }
.entrada-acciones {
display: flex; flex-wrap: wrap; justify-content: space-between;
gap: var(--space-2) var(--space-4); margin-top: var(--space-4);
}
.entrada-enlace {
display: inline-flex; align-items: center; min-height: var(--target-min);
padding: 0; border: 0; background: none; text-align: left; cursor: pointer;
font: inherit; font-size: var(--text-md); font-weight: 600; color: var(--teal-txt);
}
.entrada-enlace:hover { text-decoration: underline; text-underline-offset: 3px; }
.entrada-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.entrada-fila-estado { font-size: var(--text-sm); color: var(--ink-3); }
.entrada-paso .chk + .btn-primary { margin-top: var(--space-4); }
.entrada-paso .dp-pasos { margin-top: 0; }
.ac-dp-equipos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); }
.ac-dp-equipos p { margin: 0; font-size: var(--text-sm); }
.ac-dp-equipos[hidden] { display: none; }
.entrada .login-form { margin-top: var(--space-8); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.entrada .login-role-head .role-icon { display: none; }
.entrada-nota {
margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--line);
font-size: var(--text-md); color: var(--ink-2);
}
.entrada-nota strong { color: var(--ink); font-weight: 600; }
.entrada-pie {
width: 100%; max-width: 380px; display: flex; flex-wrap: wrap; justify-content: space-between;
gap: var(--space-2) var(--space-4); font-size: var(--text-sm); color: var(--ink-3);
}
.entrada-pie a {
display: inline-flex; align-items: center; min-height: var(--target-min);
color: var(--ink-2); font-weight: 600; text-decoration: none;
}
.entrada-pie a:hover { text-decoration: underline; text-underline-offset: 3px; }
.entrada-servicios {
width: 100%; max-width: 380px; display: flex; flex-wrap: wrap; gap: 0 var(--space-4);
padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: var(--text-sm);
}
.entrada-servicios-t { flex-basis: 100%; color: var(--ink-3); font-weight: 600; margin-bottom: var(--space-1); }
.entrada-servicios a {
display: inline-flex; align-items: center; min-height: var(--target-min);
color: var(--ink-2); text-decoration: none;
}
.entrada-servicios a:hover { text-decoration: underline; text-underline-offset: 3px; }
.vitrina { padding: 0; container: vitrina / inline-size; background: var(--card); }
.vit-ancho { max-width: none; }
.vit-muestra, .vit-fichas { --text-presentacion: clamp(var(--text-kpi), 5.8cqi, calc(var(--text-kpi) * 1.6)); }
.vit-muestra { scroll-margin-top: 0; }
.vit-escenas { display: grid; }
.vit-vista { min-width: 0; padding: var(--space-16) var(--space-8); display: grid; gap: var(--space-8); }
.vit-vista + .vit-vista { border-top: 1px solid var(--line); }
.vit-escena-cabecera { width: 100%; max-width: 720px; margin: 0 auto; }
.vit-contexto { display: flex; justify-content: space-between; gap: var(--space-4); margin: 0 0 var(--space-4); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--teal-txt); }
.vit-numero { flex: none; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.vit-escena-titulo { font-size: var(--text-presentacion); font-weight: var(--weight-bold); letter-spacing: -.04em; line-height: 1.05; color: var(--navy); text-wrap: balance; }
.vit-escena-texto { max-width: 52ch; margin: var(--space-4) 0 0; font-size: var(--text-lg); line-height: var(--leading-copy); color: var(--ink-2); text-wrap: pretty; }
.vit-producto { min-width: 0; width: 100%; max-width: 880px; margin: 0 auto; overflow: clip; }
.vit-producto-plano { height: 100%; background: var(--card); }
.vit-producto .vit-captura { margin: 0; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--space-2); }
.vit-lienzo { display: flex; align-items: center; justify-content: center; min-height: 0; }
.vit-lienzo picture { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 0; }
.vit-lienzo img { width: 100%; height: auto; object-fit: contain; }
.vit-producto .vit-captura figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: var(--space-4); margin: 0; font-size: var(--text-xs); line-height: var(--leading-ui); text-align: center; color: var(--ink-3); }
.vit-producto .vit-ampliar { display: inline-flex; align-items: center; gap: var(--space-1); margin: 0; min-height: var(--control-lg); }
.vit-escena-pie { max-width: 720px; width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); border-top: 1px solid var(--line); }
.vit-escena-pie .entrada-enlace { min-height: var(--control-lg); gap: var(--space-2); }
.vit-escena-pie .vit-demo { font-size: var(--text-sm); color: var(--ink-3); text-align: right; }
.vit-fichas { padding: var(--space-16) var(--space-8); display: grid; gap: var(--space-16); border-top: 1px solid var(--line); }
.vit-fichas-titulo { width: 100%; max-width: 720px; margin: 0 auto; font-size: var(--text-presentacion); font-weight: var(--weight-bold); letter-spacing: -.04em; line-height: 1.05; color: var(--navy); text-wrap: balance; }
.vit-ficha { width: 100%; max-width: 880px; margin: 0 auto; display: grid; gap: var(--space-4); padding-top: var(--space-10); border-top: 1px solid var(--line); }
.vit-ficha-sigla { justify-self: start; margin: 0; padding: var(--space-1) var(--space-3); border: 1px solid currentColor; border-radius: var(--r-pill); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--vit-acento, var(--teal-txt)); }
.vit-ficha-titulo { margin: 0; font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: 1.15; color: var(--navy); text-wrap: balance; }
.vit-ficha-frase { max-width: 62ch; margin: 0; font-size: var(--text-lg); line-height: var(--leading-copy); color: var(--ink-2); text-wrap: pretty; }
.vit-ficha-datos { display: grid; margin: var(--space-2) 0 0; }
.vit-ficha-datos > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.vit-ficha-datos dt { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--navy); }
.vit-ficha-datos dd { margin: 0; font-size: var(--text-md); line-height: var(--leading-copy); color: var(--ink-2); }
.vit-ficha-ej { margin: var(--space-4) 0 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--ink-3); }
.vit-ficha .vit-captura { margin: 0; }
.vit-ficha .vit-captura figcaption { display: flex; flex-wrap: wrap; justify-content: center; column-gap: var(--space-4); font-size: var(--text-xs); color: var(--ink-3); }
.vit-ficha .vit-escena-pie { max-width: none; }
@media screen and (prefers-reduced-motion: no-preference) {
.vit-aparece :is(.vit-contexto, .vit-escena-titulo, .vit-escena-texto, .vit-producto, .vit-escena-pie) {
transition: opacity var(--duration-aparece) var(--ease-out), transform var(--duration-aparece-subida) var(--ease-out);
transition-delay: calc(var(--vit-pieza, 0) * var(--duration-aparece-paso));
}
.vit-aparece .vit-escena-titulo { --vit-pieza: 1; }
.vit-aparece .vit-escena-texto { --vit-pieza: 2; }
.vit-aparece .vit-producto { --vit-pieza: 3; }
.vit-aparece .vit-escena-pie { --vit-pieza: 4; }
.vit-aparece .vit-vista:not(.vit-entro) :is(.vit-contexto, .vit-escena-titulo, .vit-escena-texto, .vit-producto, .vit-escena-pie) {
opacity: 0; transform: translateY(var(--space-8));
}
}
.vit-deslizar, .vit-muestra-movil { display: none; }
.vit-ver { min-height: var(--control-lg); margin-top: var(--space-3); color: var(--teal-txt); }
.vit-detalles { max-width: 1008px; margin: 0 auto; padding: var(--space-16) var(--space-12) var(--space-20); border-top: 1px solid var(--line); scroll-margin-top: var(--space-8); }
.vit-resumen { font-size: var(--text-kpi); letter-spacing: -.03em; line-height: var(--leading-tight); }
.vit-lead { margin-top: var(--space-5); max-width: 60ch; font-size: var(--text-xl); line-height: var(--leading-copy); color: var(--ink-2); }
.vit-lead + .vit-lead { margin-top: var(--space-3); }
.vit-detalles > .vit-publico { font-size: var(--text-lg); }
.vit-detalles > .vit-confianza { margin-top: var(--space-4); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--navy); }
.vit-puertas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-6) 0 var(--space-8); max-width: 720px; }
.vit-puerta { display: grid; gap: var(--space-1); padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink-2); text-decoration: none; transition: border-color var(--duration-fast) var(--ease); }
.vit-puerta b { font-size: var(--text-lg); color: var(--navy); }
.vit-puerta span { font-size: var(--text-sm); line-height: var(--leading-copy); }
.vit-puerta:hover { border-color: var(--teal); }
.vit-puerta:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.vit-categorias { margin: var(--space-12) calc(-1 * var(--space-4)) 0; border-bottom: 1px solid var(--line); }
.vit-cat {
position: relative; display: grid; align-items: baseline;
grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) var(--icon-md);
grid-template-areas: "tit tx signo" "tit meta signo";
column-gap: var(--space-8); row-gap: var(--space-1);
padding: var(--space-5) var(--space-4);
border-top: 1px solid var(--line);
transition: background-color var(--duration-fast) var(--ease);
}
.vit-cat:first-child { border-top: 0; }
.vit-cat:hover { background: var(--surface-subtle); }
.vit-cat-h { grid-area: tit; margin: 0; font-size: var(--text-xl); }
.vit-cat-btn {
display: inline-flex; align-items: center; min-height: var(--control-lg); padding: 0;
border: 0; background: none; cursor: pointer; text-align: left;
font: inherit; font-weight: var(--weight-semibold); letter-spacing: -0.02em; color: var(--navy);
}
.vit-cat-btn::after { content: ''; position: absolute; inset: 0; }
.vit-cat-tx { grid-area: tx; margin: 0; max-width: 56ch; font-size: var(--text-lg); color: var(--ink-2); }
.vit-cat-meta { grid-area: meta; margin: 0; font-size: var(--text-sm); color: var(--ink-3); }
.vit-cat-signo {
grid-area: signo; align-self: center; width: var(--icon-md); height: var(--icon-md); color: var(--ink-3);
transition: transform var(--duration-fast) var(--ease);
}
.vit-cat.abierta .vit-cat-btn { color: var(--teal-txt); }
.vit-cat.abierta .vit-cat-signo { transform: rotate(180deg); color: var(--teal-txt); }
.vitrina .vit-cat-btn:focus-visible { outline: none; }
.vit-cat:has(.vit-cat-btn:focus-visible) { outline: 2px solid var(--teal-txt); outline-offset: -2px; }
.vit-panel { padding: var(--space-2) var(--space-4) var(--space-12); }
.vit-panel > .vit-lead:first-child { margin-top: 0; font-size: var(--text-lg); }
.vit-panel h4 { margin-top: var(--space-12); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--navy); }
.vit-panel h5 { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--ink); }
.vit-texto { margin-top: var(--space-3); max-width: 64ch; font-size: var(--text-md); line-height: var(--leading-copy); color: var(--ink-2); }
.vit-cuenta { margin-left: var(--space-2); font-weight: var(--weight-medium); color: var(--ink-3); }
.vit-area { margin-top: var(--space-8); }
.vit-pruebas { margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.vit-pruebas > li {
display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: var(--space-1) var(--space-8);
padding: var(--space-3) 0; border-top: 1px solid var(--line-soft);
}
.vit-prueba-nom { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--ink); }
.vit-prueba-edad { display: block; margin-top: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink-3); }
.vit-prueba-tx { margin: 0; font-size: var(--text-md); line-height: var(--leading-copy); color: var(--ink-2); }
.vit-dims { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8) var(--space-10); margin-top: var(--space-4); }
@media (min-width: 640px) { .vit-dims { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vit-dim dl { margin: var(--space-2) 0 0; }
.vit-dim dl > div { padding: var(--space-3) 0; border-top: 1px solid var(--line-soft); }
.vit-dim dt { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--navy); }
.vit-dim dd { margin: var(--space-1) 0 0; font-size: var(--text-md); color: var(--ink-2); }
.vit-tabla { width: 100%; margin-top: var(--space-8); border-collapse: collapse; font-size: var(--text-md); font-variant-numeric: tabular-nums; }
.vit-tabla caption { margin-bottom: var(--space-2); text-align: left; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--ink); }
.vit-tabla th, .vit-tabla td { padding: var(--space-3) var(--space-4) var(--space-3) 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.vit-tabla thead th { border-top: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--ink-3); }
.vit-tabla tbody th { font-weight: var(--weight-semibold); color: var(--ink); white-space: nowrap; }
.vit-tabla td { color: var(--ink-2); }
.vit-tabla td span { display: block; }
.vit-grupos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-10); margin: var(--space-4) 0 0; }
@media (min-width: 640px) { .vit-grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vit-grupos > div { padding: var(--space-3) 0; border-top: 1px solid var(--line-soft); }
.vit-grupos dt { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--ink); }
.vit-grupos dd { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--ink-2); }
.vit-pieza { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.vit-panel > .vit-lead + .vit-pieza { margin-top: var(--space-8); }
.vit-pieza h4 { margin-top: 0; }
.vit-pieza .vit-texto { margin-top: var(--space-2); }
.vit-quien { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--ink-3); }
.vit-quien strong { font-weight: var(--weight-semibold); color: var(--ink-2); }
.vit-captura { margin: var(--space-8) 0 0; }
.vit-pieza .vit-captura { margin-top: var(--space-5); }
.vit-marco { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--card); }
.vitrina figcaption { margin-top: var(--space-3); font-size: var(--text-xs); line-height: var(--leading-ui); color: var(--ink-3); }
.vit-demo { font-weight: var(--weight-semibold); color: var(--ink-2); }
.vit-ampliar { display: flex; align-items: center; width: fit-content; min-height: var(--control-lg); color: var(--teal-txt); font-size: var(--text-sm); text-underline-offset: 3px; }
.vit-fundamentos { margin: var(--space-12) calc(-1 * var(--space-4)) 0; border-bottom: 1px solid var(--line); }
.vit-detalle > .vit-cat { border-top: 1px solid var(--line); }
.vit-seccion { margin-top: var(--space-20); }
.vit-seccion > h3 { font-size: var(--text-2xl); letter-spacing: -0.025em; max-width: 26ch; }
.vit-seccion > .vit-texto { font-size: var(--text-lg); max-width: 60ch; }
.vit-puntos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-10); margin: var(--space-6) 0 0; }
@media (min-width: 640px) { .vit-puntos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vit-puntos > div { padding: var(--space-4) 0 var(--space-5); border-top: 1px solid var(--line); }
.vit-puntos dt { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--navy); }
.vit-puntos dd { margin: var(--space-1) 0 0; font-size: var(--text-md); line-height: var(--leading-copy); color: var(--ink-2); }
.vit-wa { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.btn-wa {
display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-lg);
padding: 0 var(--space-5); border: 1px solid var(--teal-txt); border-radius: var(--r-sm);
background: var(--card); color: var(--teal-txt); font-size: var(--text-lg); font-weight: var(--weight-semibold); text-decoration: none;
transition: background-color var(--duration-fast) var(--ease);
}
.btn-wa:hover { background: var(--surface-action); }
.btn-wa svg { width: var(--icon-md); height: var(--icon-md); flex: none; }
.vit-nota { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--ink-3); }
.vit-cierre { margin-top: var(--space-20); padding-top: var(--space-10); border-top: 1px solid var(--line); }
.vit-cierre h3 { font-size: var(--text-xl); }
.vit-cierre p { margin-top: var(--space-2); max-width: 60ch; color: var(--ink-2); }
@media (max-width: 1023px) {
.entrada { border-right: 0; border-bottom: 1px solid var(--line); padding: var(--space-8); align-items: center; }
.entrada-cuerpo { max-width: 440px; margin: 0; padding: 0 0 var(--space-8); }
.entrada-pie, .entrada-servicios { max-width: 440px; }
.entrada h1 { margin-top: var(--space-8); }
.vit-vista { min-height: auto; padding: var(--space-16) var(--space-8); }
.vit-detalles { padding: var(--space-12) var(--space-8) var(--space-16); }
.vit-ancho { margin: 0 auto; }
}
@container vitrina (max-width: 680px) {
.vit-cat { grid-template-columns: minmax(0, 1fr) var(--icon-md); grid-template-areas: "tit signo" "tx signo" "meta signo"; }
.vit-pruebas > li { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
.entrada { padding: var(--space-6) var(--space-4); align-items: stretch; }
.vit-vista { padding: var(--space-12) var(--space-4); }
.vit-fichas { padding: var(--space-12) var(--space-4); gap: var(--space-12); }
.vit-ficha-datos > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
#vitFicha-cognitiva .vit-lienzo { overflow-x: auto; justify-content: flex-start; }
#vitFicha-cognitiva .vit-lienzo picture { width: auto; }
#vitFicha-cognitiva .vit-lienzo img { width: 680px; max-width: none; }
.vit-lienzo-con-detalle > picture { display: none; }
.vit-muestra-movil { display: block; width: 100%; }
.vit-muestra-movil .vit-grupos { grid-template-columns: minmax(0, 1fr); }
.vit-muestra-movil .card-title { margin-bottom: var(--space-2); }
.vit-muestra-movil .vit-pruebas { margin: 0; }
.vit-lienzo picture:has(source) { max-width: 316px; margin: auto; }
.vit-producto figcaption { gap: 0; flex-direction: column; }
.vit-escena-pie { gap: var(--space-2); }
.vit-escena-pie .vit-demo { max-width: 10ch; }
.vit-detalles { padding: var(--space-10) var(--space-4) var(--space-12); }
.vit-lead { font-size: var(--text-lg); }
.vit-seccion { margin-top: var(--space-16); }
.vit-seccion > h3 { font-size: var(--text-xl); }
.btn-wa { width: 100%; justify-content: center; }
.vit-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vit-tabla, .vit-tabla tbody, .vit-tabla tr, .vit-tabla th, .vit-tabla td { display: block; }
.vit-tabla caption { display: block; }
.vit-tabla tr { padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.vit-tabla th, .vit-tabla td { padding: var(--space-1) 0; border-top: 0; }
.vit-tabla td { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); column-gap: var(--space-3); }
.vit-tabla td::before { content: attr(data-et); grid-row: span 2; font-size: var(--text-sm); color: var(--ink-3); }
}
@media (prefers-reduced-motion: reduce) {
.btn-wa, .entrada .fld input, .entrada .fld select, .vit-cat, .vit-cat-signo { transition: none; }
.entrada-paso .btn-primary:hover { transform: none; }
}
.tc-persona { margin: var(--space-6) 0 var(--space-3); }
.tc-tarea h3 { margin: 0 0 var(--space-2); }
.tc-para { margin: 0 0 var(--space-2); color: var(--ink); }
.tc-pasos { margin: 0 0 var(--space-3); padding-left: var(--space-5); line-height: var(--leading-copy); }
.tc-meta { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.tc-semana { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: var(--space-1);
margin: var(--space-3) 0 var(--space-4); padding: 0; }
.tc-semana li { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2);
border-radius: var(--r-sm); background: var(--surface-subtle); font-size: var(--text-sm); }
.tc-semana li span { color: var(--ink-2); }
.tc-semana li b { font-weight: var(--weight-semibold); color: var(--ink-2); }
.tc-semana li.tc-si, .tc-semana li.tc-medias { background: var(--surface-action); }
.tc-semana li.tc-si b { color: var(--teal-txt); }
.tc-form { border-top: 1px solid var(--line-soft); padding-top: var(--space-4); }
.tc-form .fld { max-width: 420px; }
.tc-preg { font-weight: var(--weight-semibold); margin: var(--space-4) 0 var(--space-2); }
.tc-opts { max-width: 420px; }
.tc-cerradas { margin-top: var(--space-3); }
.tc-cerradas > summary { cursor: pointer; font-size: var(--text-sm); color: var(--ink-2); min-height: var(--target-min);
display: flex; align-items: center; }
.tc-emergencia h3 { margin: 0 0 var(--space-2); }
.tc-emergencia ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); line-height: var(--leading-copy); }
.tc-vacio { max-width: 560px; margin: var(--space-10) auto; text-align: center; }
.tc-intro { margin: -6px 0 var(--space-3); font-size: var(--text-md); }
.tc-pro { border-top: 1px solid var(--line-soft); padding: var(--space-4) 0; }
.tc-pro-cab { display: flex; gap: var(--space-3); align-items: baseline; flex-wrap: wrap; margin-bottom: var(--space-2); }
.tc-pro-cab b { flex: 1; min-width: 200px; font-size: var(--text-md); }
.tc-resumen { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--ink); }
.tc-regs > summary { cursor: pointer; font-size: var(--text-sm); color: var(--ink-2); min-height: var(--target-min);
display: flex; align-items: center; }
.tc-regs ul { list-style: none; margin: 0; padding: 0; }
.tc-regs li { padding: var(--space-2) 0; border-bottom: 1px solid var(--line-soft); font-size: var(--text-sm); }
.tc-regs li p { margin: var(--space-1) 0; }
.tc-acciones, .tc-fila { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
.tc-fila .fld { flex: 1 1 180px; }
.tc-nueva { margin: var(--space-3) 0; padding: var(--space-4); border-radius: var(--r-md); background: var(--surface-subtle); }
#tcNueva { margin-bottom: var(--space-3); }
.tc-mensajes h3 { margin: 0 0 var(--space-1); }
.tc-subt { margin: var(--space-6) 0 var(--space-2); font-size: var(--text-md); }
.tc-elegido { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-3) 0; }
.tc-casilla { display: flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); margin: var(--space-2) 0; }
.tc-urge { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border-radius: var(--r-md);
background: var(--sev-ambar-bg); color: var(--sev-ambar-txt); max-width: 560px; }
.tc-urge p { margin: 0 0 var(--space-1); }
.tc-urge ul { margin: 0; padding-left: var(--space-5); }
.tc-urge a { color: inherit; }
.tc-lista-msj { list-style: none; margin: 0; padding: 0; }
.tc-lista-msj li { padding: var(--space-3) 0; border-top: 1px solid var(--line-soft); }
.tc-lista-msj p { margin: var(--space-1) 0; }
.tc-respuesta { margin-top: var(--space-2); padding: var(--space-2) var(--space-3);
background: var(--surface-subtle); border-radius: var(--r-sm); }
.tc-respuesta p { margin: var(--space-1) 0 0; }
.tc-prioritario { background: var(--sev-ambar-bg); color: var(--sev-ambar-txt); }
.tc-campos { margin: 0 0 var(--space-2); }
.tc-campos > div { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: var(--space-2); padding: 2px 0; font-size: var(--text-sm); }
.tc-campos dt { color: var(--ink-2); }
.tc-campos dd { margin: 0; color: var(--ink); white-space: pre-wrap; }
@media (max-width: 520px) { .tc-campos > div { grid-template-columns: 1fr; gap: 0; } }
.ag-campo { padding: var(--space-3) 0; border-bottom: 1px solid var(--line-soft); }
.ag-campo:last-child { border-bottom: 0; }
.ag-rotulo { margin: 0 0 var(--space-2); font-size: var(--text-md); font-weight: 600; color: var(--ink); }
.ag-campo .chip-row { margin-bottom: var(--space-2); }
.ag-campo .ag-detalle { margin-bottom: 0; }
.ag-guia { padding: var(--space-3) var(--space-4); border-radius: var(--r-sm); background: var(--surface-subtle); }
.ag-guia p { overflow-wrap: anywhere; }
.ag-previo { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin: var(--space-2) 0 0;
padding: var(--space-2) var(--space-3); border-radius: var(--r-sm); background: var(--surface-action); font-size: var(--text-sm); }
.ag-previo span { flex: 1; min-width: 200px; }
.ag-origen { margin: var(--space-1) 0 0; font-size: var(--text-sm); }
.inicio-hoy {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4);
padding: var(--space-2) 0 var(--space-3); margin-bottom: var(--space-5);
border-bottom: 1px solid var(--line);
font-size: var(--text-md); color: var(--ink-2);
}
.inicio-hoy b { color: var(--ink); font-weight: var(--weight-semibold); }
.inicio-hoy .card-link { margin-left: 0; }
.inicio-cuadros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
@media (max-width: 699.98px) { .inicio-cuadros { grid-template-columns: minmax(0, 1fr); } }
.inicio-cuadro { display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding-bottom: 0; }
.inicio-cuadro .card-title { margin-bottom: var(--space-2); }
.ic-lema { margin: 0; font-size: var(--text-md); line-height: var(--leading-copy); color: var(--ink-2); }
.ic-imagen {
margin: var(--space-4) calc(-1 * var(--space-5)) 0; aspect-ratio: 16 / 9; overflow: hidden;
border-top: 1px solid var(--line-soft);
}
.ic-imagen img { display: block; width: 100%; height: auto; }
.inicio-cuadro .ic-imagen { flex: 1; display: flex; align-items: center; aspect-ratio: auto; }
.ic-muestra {
display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1;
margin: var(--space-4) calc(-1 * var(--space-5)) 0; padding: var(--space-4) var(--space-5) var(--space-5);
border-top: 1px solid var(--line-soft);
}
.ic-muestra .gn-dibujo { max-width: 100%; height: auto; }
.ic-cuestionario { align-items: stretch; gap: var(--space-3); }
.ic-enunciado { margin: 0; font-size: var(--text-sm); color: var(--ink-2); }
.ic-pregunta p { margin: 0 0 var(--space-2); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--ink); }
.ic-opciones { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.ic-opcion { padding: 4px var(--space-2); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--text-sm); color: var(--ink-2); }
.ic-opcion.sel { border-color: var(--teal); background: var(--surface-action); color: var(--teal-txt); font-weight: var(--weight-semibold); }
.prueba-marco { container: pruebas / inline-size; margin-bottom: var(--space-5); }
.prueba-rotulo { margin: 0 0 var(--space-3); font-size: var(--text-xl); color: var(--navy); }
.prueba-cuadros { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-4); }
.ic-acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.ic-acciones > button { min-height: 44px; }
.ic-notas { margin: var(--space-3) 0 var(--space-5); }
.ic-nota { margin: var(--space-2) 0 0; font-size: var(--text-sm); line-height: var(--leading-copy); color: var(--ink-2); }
.prueba-cuadros .ic-imagen { margin-top: auto; }
.prueba-panel:empty { display: none; }
.prueba-panel .cog-autorizacion { margin: 0; }
@container pruebas (max-width: 620px) {
.prueba-cuadros { grid-auto-flow: row; }
}
.inicio-incluye .flipcard { margin-bottom: 0; }
.inicio-incluye .flipcard-face { display: flex; flex-direction: column; gap: var(--space-3); }
.inicio-incluye .flipcard-face > .card-link { align-self: flex-start; margin: auto 0 0; }
.inicio-incluye .vit-ficha-sigla { align-self: flex-start; }
.is-incluye { margin: 0; padding: 0; list-style: none; }
.is-incluye li {
padding: var(--space-2) 0; border-top: 1px solid var(--line-soft);
font-size: var(--text-md); line-height: var(--leading-copy); color: var(--ink);
}
.is-incluye li:last-child { border-bottom: 1px solid var(--line-soft); }
.is-marco { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.is-marco img { display: block; width: 100%; height: auto; max-height: 24rem; object-fit: cover; object-position: left top; }
@media (pointer: coarse), (max-width: 1180px) { .is-marco img { max-height: none; } }
.inicio-incluye figcaption { font-size: var(--text-xs); color: var(--ink-3); }
.inicio-tut { width: min(560px, 100%); }
.inicio-tut .modal-head h2 { font-size: var(--text-xl); color: var(--navy); }
.it-sec { margin-top: var(--space-5); }
.it-sec h3 {
margin: 0 0 var(--space-1);
font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--ink-3);
}
.it-sec p { margin: 0; font-size: var(--text-md); line-height: var(--leading-copy); color: var(--ink); }
.it-pasos { list-style: none; counter-reset: paso; margin: var(--space-2) 0 0; padding: 0; }
.it-pasos li {
counter-increment: paso; position: relative;
padding: 0 0 var(--space-3) calc(26px + var(--space-3));
font-size: var(--text-md); line-height: var(--leading-copy); color: var(--ink);
}
.it-pasos li:last-child { padding-bottom: 0; }
.it-pasos li::before {
content: counter(paso);
position: absolute; left: 0; top: 0;
width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 50%;
background: var(--surface-action); color: var(--teal-txt);
font-size: var(--text-sm); font-weight: var(--weight-bold);
}
.it-pie {
display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2);
margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line-soft);
}
.cat-nota { margin: calc(-1 * var(--space-2)) 0 var(--space-3); font-size: var(--text-sm); color: var(--ink-3); max-width: 72ch; }
.cat-grupo { margin: var(--space-5) 0 var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--ink-3); }
.cat-lista { margin: 0; }
.cat-fila { padding: var(--space-3) 0; border-top: 1px solid var(--line-soft); }
.cat-fila:first-child { border-top: 0; padding-top: 0; }
.cat-fila b { display: block; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--ink); }
.cat-sub { display: block; margin-top: 2px; font-size: var(--text-sm); color: var(--ink-3); }
.cat-fila p { margin: var(--space-1) 0 0; font-size: var(--text-sm); line-height: var(--leading-copy); color: var(--ink-2); max-width: 80ch; }
.breadcrumb { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.miga-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-volver {
flex: none; min-height: var(--control-md); padding: 0 var(--space-4); gap: var(--space-1);
font-size: var(--text-sm); white-space: nowrap;
}
@media (max-width: 1180px) { .bv-destino { display: none; } }
.cat-fila-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); }
.cat-fila-meta > span:first-child { flex: 1 1 18rem; min-width: 0; }
.cat-lado { flex: none; font-size: var(--text-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rc-barra {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4);
margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4);
background: var(--surface-action); border: 1px solid var(--line); border-radius: var(--r-md);
}
.rc-barra p { flex: 1 1 24rem; margin: 0; font-size: var(--text-md); line-height: var(--leading-copy); color: var(--ink); }
.rc-barra b { color: var(--navy); }
.rc-punto { margin: 0 0 0 var(--space-2); vertical-align: middle; cursor: help; }
[data-ht] + .rc-punto, .rc-punto + [data-ht] { margin-left: 0; }
.rc-globo {
position: fixed; z-index: 230; max-width: min(340px, calc(100vw - 16px));
padding: var(--space-3) var(--space-4); background: var(--card);
border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-3);
pointer-events: none;
}
.rc-globo[hidden] { display: none; }
.rc-globo-t { margin: 0 0 var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--navy); }
.rc-globo-d { margin: 0; font-size: var(--text-sm); line-height: var(--leading-copy); color: var(--ink-2); }
.card > .vit-ficha-sigla { display: inline-block; margin-bottom: var(--space-3); }
.in-cat-titulo { font-size: var(--text-xl); margin: 0 0 var(--space-2); }
.card > .vit-ficha-frase { font-size: var(--text-md); margin: 0 0 var(--space-4); }
.in-lamina { margin: 0 0 var(--space-5); }
.in-lamina img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.in-lamina figcaption { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--ink-3); }
.in-responde { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: var(--space-8); align-items: start; margin-top: var(--space-4); }
@media (max-width: 900px) { .in-responde { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } }
.in-pregunta { padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.in-pregunta .fq-q { margin: 0 0 var(--space-4); }
.in-pregunta .fq-opt { cursor: default; }
.in-quien { margin-top: 0; }
@media (min-width: 640px) { .in-quien { grid-template-columns: minmax(0, 1fr); } }
.in-nota-ej { margin: var(--space-4) 0 0; }
.in-lamina img { max-width: 720px; }
.bt-fila { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
@media (max-width: 720px) { .bt-fila { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } }
.bt-texto b { display: block; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--ink); }
.bt-texto p { margin: var(--space-1) 0 0; font-size: var(--text-sm); line-height: var(--leading-copy); color: var(--ink-2); max-width: 70ch; }
.bt-mini {
position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0; padding: 0;
overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-subtle);
font: inherit; text-align: left; cursor: pointer;
}
.bt-cuadro {
position: absolute; inset: 0; opacity: 0;
transition: opacity var(--duration-ui) var(--ease-out);
}
.bt-cuadro.activo, .bt-solo-registra .bt-cuadro { opacity: 1; }
.bt-cuadro img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bt-registra {
display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-3) var(--space-8);
background: var(--card); color: var(--ink);
}
.bt-solo-registra .bt-registra { padding-bottom: var(--space-3); }
.bt-registra b { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--navy); }
.bt-registra ul { margin: 0; padding: 0; list-style: none; }
.bt-registra li, .bt-ind { font-size: var(--text-sm); line-height: 1.35; color: var(--ink-2); }
.bt-registra li + li { margin-top: 2px; }
.bt-pie {
position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
padding: var(--space-1) var(--space-2); background: var(--card); border-top: 1px solid var(--line);
font-size: var(--text-sm); color: var(--ink-2);
}
.bt-puntos { display: inline-flex; gap: var(--space-1); }
.bt-puntos i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.bt-puntos i.activo { background: var(--navy); }
.bt-mini:hover, .bt-mini:focus-visible { border-color: var(--teal); }
@media (prefers-reduced-motion: reduce) {
.bt-fila { grid-template-columns: minmax(0, 1fr); }
.bt-mini:not(.bt-solo-registra) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); aspect-ratio: auto; border: 0; background: none; overflow: visible; cursor: default; }
.bt-mini:not(.bt-solo-registra) .bt-cuadro { position: relative; opacity: 1; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-sm); }
.bt-mini:not(.bt-solo-registra) .bt-registra { padding-bottom: var(--space-3); }
.bt-pie { display: none; }
}
.bt-mini.bt-solo-registra { aspect-ratio: auto; min-height: 0; }
.bt-solo-registra .bt-registra { position: static; }
.agd-acciones { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.agd-barra { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.agd-pasos { display: flex; gap: var(--space-1); }
.agd-barra .chip-row { margin-bottom: 0; }
.agd-fecha { margin: 0; flex: 1 1 220px; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--navy); }
.agd-filtros { align-items: flex-end; margin-bottom: var(--space-3); }
.agd-filtros .fld { margin-bottom: 0; min-width: 180px; }
.agd-check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target-min);
font-size: var(--text-sm); color: var(--ink-2); }
.agd-invitacion { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap;
margin-bottom: var(--space-3); }
.agd-invitacion p { margin: 0; }
.agd-marco { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow-x: auto; }
.agd-rejilla { display: grid; grid-template-columns: 72px repeat(var(--agd-cols), minmax(132px, 1fr)); min-width: fit-content; }
.agd-esquina, .agd-cab { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--line); }
.agd-cab { text-align: center; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--navy); }
.agd-cab.agd-hoy { color: var(--teal-txt); }
.agd-horas { position: relative; height: var(--agd-alto); }
.agd-hora { position: absolute; top: var(--y); right: var(--space-2); padding-top: var(--space-1);
font-size: var(--text-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.agd-col { position: relative; height: var(--agd-alto); background: var(--agd-fuera); border-left: 1px solid var(--line); }
.agd-habil { position: absolute; left: 0; right: 0; top: var(--y); height: var(--h); background: var(--card); }
.agd-hueco { position: absolute; left: 0; right: 0; top: var(--y); height: var(--h); padding: 0; border: 0;
border-top: 1px solid var(--line-soft); background: transparent; cursor: pointer;
transition: background-color var(--duration-fast) var(--ease-out); }
.agd-hueco:hover, .agd-hueco:focus-visible, .agd-hueco.agd-elegida { background: var(--surface-action); }
.agd-hueco[data-hora]:hover::after, .agd-hueco[data-hora].agd-elegida::after { content: attr(data-hora); position: absolute; top: var(--space-1); left: var(--space-2);
font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--teal-txt); pointer-events: none; }
.agd-hora.agd-senalada, .agd-cab.agd-senalada, .agd-hora.agd-elegida, .agd-cab.agd-elegida { color: var(--teal-txt); font-weight: var(--weight-semibold); }
.agd-cita { position: absolute; top: var(--y); min-height: var(--h); height: var(--h);
left: calc(2px + (100% - 4px) * var(--i) / var(--n)); width: calc((100% - 4px) / var(--n) - 2px);
display: flex; flex-direction: column; align-items: flex-start; gap: 1px; overflow: hidden; padding: var(--space-1) var(--space-2);
border: 0; border-radius: var(--r-sm); background: var(--surface-info); color: var(--navy); text-align: left;
font: inherit; font-size: var(--text-sm); line-height: var(--leading-tight); cursor: pointer;
transition: box-shadow var(--duration-fast) var(--ease-out); }
.agd-cita:hover { box-shadow: var(--sh-2); }
.agd-cita:focus-visible, .agd-fila:focus-visible, .agd-resultado:focus-visible { outline: 0; box-shadow: var(--ring); }
.agd-cita-t { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.agd-cita-wa, .agd-fila-wa { position: absolute; display: inline-flex; align-items: center; justify-content: center; padding: 0;
border: 1px solid var(--teal); border-radius: var(--r-sm); background: var(--card); color: var(--teal-txt); cursor: pointer;
transition: background-color var(--duration-fast) var(--ease-out); }
.agd-cita-wa { top: calc(var(--y) + 2px); width: 24px; height: 24px;
right: calc((100% - 4px) * (var(--n) - var(--i) - 1) / var(--n) + 6px); }
.agd-cita-wa:hover, .agd-fila-wa:hover { background: var(--surface-action); }
.agd-cita-wa:focus-visible, .agd-fila-wa:focus-visible { outline: 0; box-shadow: var(--ring); }
.agd-cita-wa:disabled, .agd-fila-wa:disabled { opacity: .6; cursor: default; }
.agd-ico-wa { width: 16px; height: 16px; flex: none; }
#agdWhats { display: inline-flex; align-items: center; gap: var(--space-2); }
.agd-fila-caja { position: relative; }
.agd-fila-caja:has(.agd-fila-wa) .agd-fila { padding-right: 60px; }
.agd-fila-wa { top: var(--space-2); right: var(--space-2); width: 44px; height: 44px; }
.agd-cita-s { color: var(--ink-2); }
.agd-hueco-fijo { cursor: default; }
.agd-hueco-fijo:hover { background: transparent; }
.agd-franja { padding: 0; overflow: visible; cursor: default; }
.agd-franja:hover { box-shadow: none; }
.agd-franja-abre { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; height: 100%; overflow: hidden;
padding: var(--space-3) var(--space-2); border: 0; border-radius: var(--r-sm); background: transparent; color: inherit;
font: inherit; line-height: inherit; text-align: left; }
button.agd-franja-abre { cursor: pointer; transition: box-shadow var(--duration-fast) var(--ease-out); }
button.agd-franja-abre:hover { box-shadow: var(--sh-2); }
button.agd-franja-abre:focus-visible { outline: 0; box-shadow: var(--ring); }
.agd-franja-nueva { background: var(--surface-action); pointer-events: none; }
.agd-asa { position: absolute; left: 0; right: 0; z-index: 1; display: flex; justify-content: center; height: var(--space-3);
cursor: ns-resize; touch-action: none; }
.agd-asa::after { content: ''; align-self: center; width: var(--space-6); height: 2px; border-radius: var(--r-pill); background: var(--ink-3); }
.agd-asa-arriba { top: 0; }
.agd-asa-abajo { bottom: 0; }
.agd-arrastrando { user-select: none; -webkit-user-select: none; }
.agd-cita[data-mueve] { cursor: grab; }
.agd-arrastrando, .agd-arrastrando .agd-cita[data-mueve] { cursor: grabbing; }
.agd-arrastrando .agd-hueco, .agd-arrastrando .agd-hueco:hover { background: transparent; }
@media (pointer: coarse) { .agd-asa { height: var(--target-min); } }
.agd-marca { display: inline-block; align-self: flex-start; margin: 1px var(--space-1) 0 0; padding: 0 var(--space-2); border-radius: var(--r-pill);
background: var(--card); color: var(--gold-txt); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.agd-fila { display: grid; grid-template-columns: 84px 1fr; gap: var(--space-2); width: 100%; min-height: var(--control-lg);
margin-bottom: var(--space-1); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--r-sm);
background: var(--surface-info); color: var(--navy); text-align: left; font: inherit; font-size: var(--text-sm); }
.agd-cita.e-confirmada, .agd-fila.e-confirmada { background: var(--agd-agendada); color: var(--navy-deep); }
.agd-cita.e-confirmo, .agd-fila.e-confirmo { background: var(--agd-confirmada); color: var(--navy-deep); }
.agd-cita.e-asistio, .agd-fila.e-asistio { background: var(--agd-asistio); color: var(--navy-deep); }
.agd-cita.e-virtual, .agd-fila.e-virtual { background: var(--agd-virtual); color: var(--ink); }
.agd-cita.e-atendida, .agd-fila.e-atendida { background: var(--agd-atendida); color: var(--card); }
.e-confirmada .agd-cita-s, .e-confirmo .agd-cita-s, .e-asistio .agd-cita-s, .e-virtual .agd-cita-s, .e-atendida .agd-cita-s, .e-por-aprobar .agd-cita-s,
.e-bloqueo .agd-cita-s { color: inherit; }
.e-no_asistio { background: var(--surface-subtle); color: var(--ink-2); border: 1px solid var(--line); }
.agd-cita.e-por-aprobar, .agd-fila.e-por-aprobar { background: var(--agd-por-aprobar); color: var(--ink); }
.agd-cita.e-en-linea, .agd-fila.e-en-linea { background: var(--agd-en-linea); color: var(--navy-deep); }
.agd-cita.e-resultados, .agd-fila.e-resultados { background: var(--agd-resultados); color: var(--navy-deep); }
.agd-cita.e-espera-datos, .agd-fila.e-espera-datos { background: var(--agd-fuera); color: var(--navy-deep); outline: 1px dashed var(--ink-3); outline-offset: -1px; }
.agd-cita.e-recordar-datos, .agd-fila.e-recordar-datos { background: var(--agd-recordar); color: var(--card); }
.e-espera-datos .agd-cita-s, .e-recordar-datos .agd-cita-s, .e-recordar-datos .agd-fila-t span:not(.agd-marca) { color: inherit; }
.agd-mensaje-enlace { padding: var(--space-3); border-radius: var(--r-sm); background: var(--surface-subtle); color: var(--ink); overflow-wrap: anywhere; user-select: all; }
.e-en-linea .agd-cita-s, .e-resultados .agd-cita-s { color: inherit; }
.agd-ico-hojas { width: 16px; height: 16px; flex: none; }
.e-cancelada_paciente, .e-cancelada_organizacion, .e-reprogramada, .e-expirada, .e-bloqueo_retirado {
background: var(--card); color: var(--ink-2); border: 1px solid var(--line); }
.e-cancelada_paciente .agd-cita-t, .e-cancelada_organizacion .agd-cita-t, .e-reprogramada .agd-cita-t,
.e-expirada .agd-cita-t, .e-bloqueo_retirado .agd-cita-t { text-decoration: line-through; }
.agd-cita.e-bloqueo, .agd-fila.e-bloqueo, .agd-cita.agd-ocupado, .agd-fila.agd-ocupado { background: var(--ink-3); color: var(--card); }
.agd-cita.agd-ocupado { cursor: default; font-size: var(--text-sm); }
.agd-cita.agd-ocupado:hover { box-shadow: none; }
.agd-cab-nota { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink-2); }
.agd-leyenda { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-3); padding: 0;
list-style: none; font-size: var(--text-sm); color: var(--ink-2); }
.agd-leyenda li { display: inline-flex; align-items: center; gap: var(--space-2); }
.agd-muestra { width: 16px; height: 16px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.agd-m-horario { background: var(--card); }
.agd-m-fuera { background: var(--agd-fuera); }
.agd-m-cita { background: var(--agd-agendada); }
.agd-m-confirmo { background: var(--agd-confirmada); }
.agd-m-asistio { background: var(--agd-asistio); }
.agd-m-atendida { background: var(--agd-atendida); }
.agd-m-virtual { background: var(--agd-virtual); }
.agd-m-aprobar { background: var(--agd-por-aprobar); }
.agd-m-en-linea { background: var(--agd-en-linea); }
.agd-m-resultados { background: var(--agd-resultados); }
.agd-m-espera-datos { background: var(--agd-fuera); outline: 1px dashed var(--ink-3); outline-offset: -1px; }
.agd-m-recordar-datos { background: var(--agd-recordar); }
.agd-m-bloqueo { background: var(--ink-3); }
.agd-m-libre { background: var(--surface-action); border-color: var(--teal); }
.agd-resumen { margin: 0 0 var(--space-2); color: var(--ink); }
.agd-resumen b { color: var(--navy); }
.agd-cinta { position: sticky; top: 71px; z-index: 30; display: flex; align-items: center; justify-content: space-between;
gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.agd-cinta p { margin: 0; flex: 1 1 280px; }
.agd-cinta b { color: var(--navy); }
.agd-cita.agd-movida { background: var(--navy); color: var(--card); cursor: default; }
.agd-cita.agd-movida .agd-cita-s { color: var(--card); }
div.agd-cita { cursor: default; }
div.agd-cita:hover { box-shadow: none; }
.agd-libre { position: absolute; top: var(--y); left: 2px; right: 2px; height: var(--h); display: flex; align-items: center; gap: var(--space-2);
overflow: hidden; padding: 0 var(--space-2); border: 1px solid var(--teal); border-radius: var(--r-sm); background: var(--surface-action);
color: var(--teal-txt); font: inherit; font-size: var(--text-sm); text-align: left; white-space: nowrap; cursor: pointer;
transition: box-shadow var(--duration-fast) var(--ease-out); }
.agd-libre:hover { box-shadow: var(--sh-2); }
.agd-libre:focus-visible { outline: 0; box-shadow: var(--ring); }
.agd-libre span { overflow: hidden; text-overflow: ellipsis; }
.agd-libre-fila { border: 1px solid var(--teal); background: var(--surface-action); color: var(--teal-txt); }
.agd-pago { margin: var(--space-3) 0; padding: var(--space-3) 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.agd-pago p { margin: 0 0 var(--space-2); }
.fin-tabs { margin-bottom: var(--space-4); flex-wrap: wrap; }
.fin-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.fin-cifra { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: var(--space-4); }
.fin-cifra span { display: block; color: var(--ink-2); font-size: var(--text-sm); }
.fin-cifra b { display: block; margin-top: var(--space-1); color: var(--navy); font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.fin-cifra small { display: block; margin-top: var(--space-1); color: var(--ink-2); font-size: var(--text-sm); }
.fin-grafica { display: block; width: 100%; height: auto; }
.fin-grafica text { font-size: var(--text-sm); fill: var(--ink-2); }
.fin-leyenda { display: flex; gap: var(--space-4); margin: 0 0 var(--space-2); color: var(--ink-2); font-size: var(--text-sm); }
.fin-pie { color: var(--ink-2); font-size: var(--text-sm); }
.fin-foto { display: block; max-width: 100%; max-height: 420px; margin-top: var(--space-2); }
.cob-grupos { margin-top: var(--space-4); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.cob-grupo h4 { margin: 0 0 var(--space-2); color: var(--navy); }
.cob-fila { display: flex; justify-content: space-between; gap: var(--space-3); margin: 0; padding: var(--space-1) 0; border-bottom: 1px solid var(--line-soft); }
.agd-grupo { margin-bottom: var(--space-5); }
.agd-grupo h2 { margin: 0 0 var(--space-2); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--navy); }
.agd-fila-h { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.agd-fila-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.agd-fila-t span:not(.agd-marca) { color: var(--ink-2); font-size: var(--text-sm); }
.agd-panel-titulo { margin: 0 var(--space-8) var(--space-4) 0; }
.agd-estado { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: 0 0 var(--space-3);
font-weight: var(--weight-semibold); color: var(--navy); }
.agd-datos { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-4);
font-size: var(--text-md); }
.agd-datos dt { color: var(--ink-3); }
.agd-datos dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.agd-pasos-cita { margin-bottom: var(--space-3); }
.agd-plegable { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line-soft); }
.agd-plegable summary { cursor: pointer; min-height: var(--target-min); font-size: var(--text-md);
font-weight: var(--weight-semibold); color: var(--navy); }
.agd-plegable[open] summary { margin-bottom: var(--space-3); }
.agd-traza { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
.agd-traza li { display: flex; flex-direction: column; padding: var(--space-1) 0; }
.agd-traza span { color: var(--ink-3); }
.agd-marca-nota { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--navy); }
.agd-ico-nota { width: 16px; height: 16px; flex: none; }
.agd-notas { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.agd-notas h3 { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1); font-size: var(--text-md); color: var(--navy); }
.agd-error { margin: var(--space-2) 0; color: var(--ink); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.agd-alerta, .agd-pasos-cita + .agd-error, #agdCitaError { grid-column: 1 / -1; padding: var(--space-3); border: 1px solid var(--agd-por-aprobar);
border-left-width: 4px; border-radius: var(--r-sm); background: var(--card); color: var(--ink); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.agd-alerta { margin: var(--space-2) 0; }
#agdParejaCampos { grid-column: 1 / -1; }
.agd-lista-presta { display: flex; flex-direction: column; align-items: flex-start; }
.agd-alerta-accion { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin: 0 0 var(--space-3); }
.agd-alerta p { margin: 0 0 var(--space-2); }
.agd-ayuda { margin: 0 0 var(--space-3); font-size: var(--text-sm); }
.cita-tarjeta { padding: var(--space-6); }
.cita-tarjeta h1 { margin: 0 0 var(--space-3); color: var(--navy); font-size: var(--text-xl); }
.cita-tarjeta h1:focus { outline: none; }
.cita-tarjeta form > .btn-primary { margin-top: var(--space-3); }
.cita-acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.cita-emergente { max-width: 440px; }
.cita-emergente .agd-datos { margin-top: var(--space-3); }
.cita-dia { margin: var(--space-4) 0 0; color: var(--navy); font-size: var(--text-lg); }
.res-trampa { position: absolute; left: -9999px; }
.agd-elegido { margin: 0 0 var(--space-2); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--teal-txt); }
.agd-enlace { min-height: var(--target-min); margin-bottom: var(--space-3); padding: 0; border: 0; background: none;
color: var(--teal-txt); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer; }
.agd-paciente-nuevo { margin-bottom: var(--space-3); }
.agd-paciente-nuevo[hidden] { display: none; }
.agd-resultados { margin-bottom: var(--space-2); }
.agd-resultado { display: flex; flex-direction: column; width: 100%; min-height: var(--control-lg); padding: var(--space-2) var(--space-3);
border: 0; border-radius: var(--r-sm); background: var(--surface-subtle); color: var(--navy); text-align: left; font: inherit;
font-size: var(--text-sm); cursor: pointer; margin-bottom: var(--space-1);
transition: background-color var(--duration-fast) var(--ease-out); }
.agd-resultado:hover { background: var(--surface-action); }
.agd-pend-grupo { margin: var(--space-4) 0 var(--space-2); }
.agd-pend-grupo:first-child { margin-top: 0; }
.agd-resultado span { color: var(--ink-2); font-size: var(--text-sm); }
.agd-traible { display: flex; gap: var(--space-2); align-items: flex-start; min-height: var(--target-min); padding: var(--space-1) 0;
font-size: var(--text-sm); color: var(--ink-2); }
.agd-traible b { color: var(--navy); font-weight: var(--weight-semibold); }
.agd-separa { margin-top: var(--space-3); }
.agd-dia { margin: var(--space-4) 0 var(--space-1); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--navy); }
.agd-renglon { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: var(--control-md);
padding: var(--space-1) 0; border-top: 1px solid var(--line-soft); font-size: var(--text-md); color: var(--ink-2); }
.agd-renglon b { color: var(--navy); font-weight: var(--weight-semibold); margin-right: var(--space-2); }
.agd-mensaje-wa { margin-top: var(--space-4); white-space: pre-wrap; overflow-wrap: anywhere; }
.agd-sede { margin-bottom: var(--space-4); }
.agd-serie-fecha { margin-bottom: 0; }
.agd-sala { display: flex; flex-direction: column; overflow: hidden; }
.agd-sala-marco { flex: 1; width: 100%; border: 0; background: var(--ink); }
.org-pasos li.hecho { color: var(--ink-2); }
.org-pasos li.hecho::before { content: '✓'; }
.org-pasos li b { font-weight: var(--weight-semibold); color: var(--navy); }
.org-pasos li.hecho b { color: var(--ink-2); }
.org-pasos p { margin: var(--space-1) 0 var(--space-2); font-size: var(--text-sm); color: var(--ink-2); }
.agd-linea-form { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; margin-top: var(--space-3); }
.agd-linea-form .fld { flex: 1 1 200px; margin-bottom: 0; }
.drawer .fld[hidden], .drawer [hidden].fld { display: none; }
@media (max-width: 719px) {
.agd-filtros .fld { flex: 1 1 100%; }
.agd-fecha { flex-basis: 100%; order: -1; }
.page-head .agd-acciones { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.agd-hueco, .agd-cita, .agd-resultado, button.agd-franja-abre { transition: none; }
}
.gn-lamina { overflow-x: auto; margin-bottom: var(--space-2); }
.gn-dibujo { display: block; margin: 0 auto; }
.gn-trazo { fill: var(--card); stroke: var(--navy); stroke-width: 1.5; }
.gn-marca { fill: var(--navy-soft); }
.gn-contorno .gn-trazo { fill: none; }
.gn-linea { fill: none; stroke: var(--navy); stroke-width: 1.5; }
.gn-punteada { stroke-dasharray: 4 4; }
.gn-nombre, .gn-texto { font-family: var(--font-sans, Inter, sans-serif); font-size: var(--text-sm); text-anchor: middle; fill: var(--ink-3); }
.gn-nombre { fill: var(--navy); font-weight: 600; }
.gn-leyenda { margin: 0 0 var(--space-3); font-size: var(--text-sm); }
.gn-fila { display: flex; gap: var(--space-3); align-items: flex-start; justify-content: space-between; flex-wrap: wrap; padding: 9px 0; border-bottom: 1px solid var(--line); }
.gn-fila-texto { flex: 1 1 240px; min-width: 0; }
.gn-fila-texto .hc-rotulo { margin: 0 0 var(--space-1); }
.gn-fila-nombre { margin: 0; font-size: var(--text-lg); }
.gn-fila-dato { margin: var(--space-1) 0 0; font-size: var(--text-md); }
.gn-fila-acciones { display: flex; gap: var(--space-2); }
.gn-union { margin: var(--space-3) 0 0; font-size: var(--text-md); }
.gn-vacio { margin: 0; }
.gn-sugeridos { margin: var(--space-3) 0 var(--space-1); }
.gn-acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.gn-editor { margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-subtle); }
.gn-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 14px; }
.gn-rejilla[hidden], .gn-si[hidden] { display: none; }
.gn-marcar { display: flex; gap: var(--space-2); align-items: center; min-height: 44px; font-size: var(--text-md); }
.cp-seccion { margin-top: var(--space-4); page-break-inside: auto; }
.cp-datos { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: var(--space-1) var(--space-3); margin: 0; }
.cp-datos dt { font-weight: 600; }
.cp-datos dd { margin: 0; }
.cp-entrada { padding: var(--space-2) 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.cp-texto { margin: var(--space-1) 0; white-space: pre-wrap; }
.cp-seccion .card { padding: 0; border: 0; box-shadow: none; background: none; }
.cp-seccion .card > .card-title { display: none; }
.gn-rel { fill: none; stroke: var(--navy-soft); stroke-width: 1.25; }
.gn-rel-distante { stroke-dasharray: 3 4; }
.cp-firma { margin-top: var(--space-4); break-inside: avoid; }
.cp-firma p { margin: var(--space-1) 0 0; }