/* ==========================================================
   Manual de Convivencia — consulta interactiva
   Tokens de tema en :root; dark = predeterminado de la Intranet
   ========================================================== */
:root{
  --fs: 16px;
  --k: 1; /* factor A−/A+ (fs/16) para tamaños que dependen del contenedor */
  --font: 'Nunito', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-t: 'Space Grotesk', 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --radio: 18px;
  --radio-s: 12px;
  --t: .28s cubic-bezier(.2,.8,.2,1);

  --bg: #f4f6fb;
  --bg2: #e9edf6;
  --panel: #ffffff;
  --panel2: #f7f8fc;
  --borde: #dfe4ef;
  --text: #1d2433;
  --text2: #4a5468;
  --muted: #7a8498;
  --sombra: 0 6px 22px rgba(30,40,70,.08), 0 1px 3px rgba(30,40,70,.06);
  --sombra-h: 0 14px 34px rgba(30,40,70,.14), 0 2px 6px rgba(30,40,70,.08);
  --cab: rgba(255,255,255,.82);
  --mark: #ffe066;
  --mark-t: #1d2433;

  --acento: #6d5dfc;
  --c: var(--acento);
  --c-violeta: #7c5cff;
  --c-cian: #0ea5c6;
  --c-verde: #10a37f;
  --c-naranja: #f2711c;
  --n1: #16a34a; --n1-s: rgba(22,163,74,.12);
  --n2: #d97706; --n2-s: rgba(217,119,6,.13);
  --n3: #dc2626; --n3-s: rgba(220,38,38,.12);
  --n0: #64748b; --n0-s: rgba(100,116,139,.12);
}
:root[data-theme="dark"]{
  --bg: #0d1220;
  --bg2: #121a2c;
  --panel: #151d31;
  --panel2: #1a2340;
  --borde: #263252;
  --text: #e6eaf4;
  --text2: #b8c1d6;
  --muted: #8691ab;
  --sombra: 0 8px 26px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.3);
  --sombra-h: 0 16px 40px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35);
  --cab: rgba(13,18,32,.84);
  --mark: #facc15;
  --mark-t: #111827;
  --acento: #8b7dff;
  --c-violeta: #9b84ff;
  --c-cian: #22c3e6;
  --c-verde: #2fd3a1;
  --c-naranja: #ff8f3d;
  --n1: #34d399; --n1-s: rgba(52,211,153,.13);
  --n2: #fbbf24; --n2-s: rgba(251,191,36,.13);
  --n3: #f87171; --n3-s: rgba(248,113,113,.14);
  --n0: #94a3b8; --n0-s: rgba(148,163,184,.13);
}

*{ box-sizing: border-box; }
html{ font-size: var(--fs); height: 100%; }
body{
  margin: 0; font-family: var(--font); color: var(--text); background: var(--bg);
  line-height: 1.6; -webkit-font-smoothing: antialiased; overflow: hidden;
  height: 100vh; height: 100dvh; display: flex; flex-direction: column;
  transition: background var(--t), color var(--t);
}
a{ color: var(--acento); }
button{ font-family: inherit; }
strong{ font-weight: 800; }
::selection{ background: var(--acento); color: #fff; }

/* ---------- Fondo animado sutil ---------- */
.fondo{ position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.blob{ position: absolute; border-radius: 50%; filter: blur(70px); opacity: .22; animation: flotar 22s ease-in-out infinite alternate; }
.b1{ width: 460px; height: 460px; background: var(--c-violeta); top: -120px; left: -100px; }
.b2{ width: 380px; height: 380px; background: var(--c-cian); bottom: -120px; right: -80px; animation-delay: -7s; }
.b3{ width: 300px; height: 300px; background: var(--c-naranja); top: 40%; left: 55%; opacity: .12; animation-delay: -13s; }
@keyframes flotar{ to{ transform: translate(60px, 40px) scale(1.12); } }

.progreso{ position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 60;
  background: linear-gradient(90deg, var(--c-violeta), var(--c-cian), var(--c-verde), var(--c-naranja)); transition: width .1s linear; }

/* ---------- Cabecera ---------- */
.cabecera{ position: relative; flex-shrink: 0; z-index: 50; background: var(--cab);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--borde); }
.cab-fila{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 18px; max-width: 1600px; margin: 0 auto; }
.marca{ display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); flex-shrink: 0; }
.marca-ico{ font-size: 1.45rem; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  background: linear-gradient(135deg, var(--c-violeta), var(--c-cian)); box-shadow: 0 6px 16px rgba(109,93,252,.35);
  transition: transform var(--t); }
.marca:hover .marca-ico{ transform: rotate(-8deg) scale(1.06); }
.marca-txt{ display: flex; flex-direction: column; line-height: 1.15; }
.marca-txt b{ font-family: var(--font-t); font-size: 1.02rem; }
.marca-txt small{ color: var(--muted); font-size: .76rem; }

.buscador{ position: relative; flex: 1; max-width: 560px; margin-left: auto; }
.buscador input{ width: 100%; padding: 8px 38px 8px 40px; border-radius: 999px; border: 1.5px solid var(--borde);
  background: var(--panel); color: var(--text); font: inherit; font-size: .95rem; outline: none; transition: border-color var(--t), box-shadow var(--t); }
.buscador input::-webkit-search-cancel-button{ display: none; }
.buscador input:focus{ border-color: var(--acento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 22%, transparent); }
.bus-ico{ position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-size: .95rem; opacity: .7; }
.bus-limpiar{ position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: var(--panel2); color: var(--muted);
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; display: none; }
.buscador.con-texto .bus-limpiar{ display: block; }
.bus-panel{ position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: 70vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-h); padding: 8px;
  animation: aparecer .18s ease-out; }
.bus-info{ padding: 8px 12px; font-size: .82rem; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.bus-grupo{ padding: 10px 12px 4px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bus-item{ display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--text); padding: 10px 12px; border-radius: 12px; cursor: pointer; font-size: .9rem; }
.bus-item:hover, .bus-item.activo{ background: var(--panel2); }
.bus-item .bi-ruta{ display: block; font-size: .74rem; color: var(--muted); margin-bottom: 2px; }
.bus-item .bi-txt{ display: block; line-height: 1.45; }
.bus-vacio{ padding: 22px; text-align: center; color: var(--muted); }
mark{ background: var(--mark); color: var(--mark-t); border-radius: 4px; padding: 0 2px; }

.herramientas{ display: flex; gap: 6px; flex-shrink: 0; }
.btn-ico{ width: 36px; height: 36px; border-radius: 11px; border: 1px solid var(--borde); background: var(--panel); color: var(--text);
  display: grid; place-items: center; cursor: pointer; font-size: 1rem; font-weight: 800; text-decoration: none;
  transition: transform var(--t), background var(--t), border-color var(--t); }
.btn-ico:hover{ transform: translateY(-2px); border-color: var(--acento); }
.btn-ico:active{ transform: scale(.92); }
.btn-ico[aria-pressed="false"]{ opacity: .6; }
#btnBuscarMovil{ display: none; }

/* ---------- Pestañas ---------- */
.pestanas{ order: 5; flex: 1 0 100%; min-width: 0; position: relative; display: flex; gap: 6px; padding: 0 0 2px; overflow-x: auto; scrollbar-width: none; }
@media (min-width: 1560px){
  .pestanas{ order: 0; flex: 1 1 auto; padding: 0; }
  .buscador{ flex: 0 1 320px; margin-left: 0; }
}
.pestanas::-webkit-scrollbar{ display: none; }
.pestana{ --c: var(--acento); position: relative; display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--borde); background: var(--panel);
  color: var(--text2); padding: 5px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap; font-weight: 700; font-size: .86rem;
  transition: all var(--t); }
.pestana .p-num{ font-family: var(--font-t); font-size: .72rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); }
.pestana:hover{ border-color: var(--c); color: var(--text); transform: translateY(-1px); }
.pestana[aria-selected="true"]{ background: var(--c); border-color: var(--c); color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--c) 40%, transparent); }
.pestana[aria-selected="true"] .p-num{ background: rgba(255,255,255,.25); color: #fff; }

/* ---------- Vistas (marco fijo) ---------- */
.vistas{ flex: 1; min-height: 0; width: 100%; max-width: 1600px; margin: 0 auto; padding: 12px 18px; }
.vista{ display: none; height: 100%; }
.vista.activa{ display: block; animation: entrarVista .4s cubic-bezier(.2,.8,.2,1); }
@keyframes entrarVista{ from{ opacity: 0; transform: translateY(10px); } to{ opacity: 1; transform: none; } }
@keyframes aparecer{ from{ opacity: 0; transform: translateY(-6px); } to{ opacity: 1; transform: none; } }
@keyframes latir{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.08) rotate(-4deg); } }
.vista-scroll{ height: 100%; overflow-y: auto; scrollbar-width: thin; }
.h-stat{ background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.25); padding: 4px 11px; border-radius: 999px; font-size: .8rem; font-weight: 700; }

/* Capítulo: barra lateral fija + panel con una sección a la vez */
.cap-cuerpo{ display: grid; grid-template-columns: 290px minmax(0,1fr); gap: 14px; height: 100%; }
.lateral{ display: flex; flex-direction: column; min-height: 0; background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.cap-barra{ position: relative; overflow: hidden; padding: 14px; color: #fff; flex-shrink: 0;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #1b1f3b)); }
.cb-fila{ display: flex; gap: 10px; align-items: center; min-width: 0; }
.cb-num{ flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-family: var(--font-t);
  font-weight: 800; font-size: 1.3rem; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.3); }
.cb-tit{ min-width: 0; }
.cb-tit small{ display: block; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
.cb-tit b{ display: block; font-family: var(--font-t); font-size: .98rem; line-height: 1.2; }
.cb-stats{ display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.cb-stats span{ font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.18); }
.cb-acc{ display: flex; gap: 6px; margin-top: 10px; }
.cb-acc button{ flex: 1; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.14); color: #fff; padding: 4px 8px;
  border-radius: 999px; font-size: .74rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background var(--t); }
.cb-acc button:hover{ background: rgba(255,255,255,.28); }
.indice{ flex: 1; min-height: 0; overflow-y: auto; padding: 8px; scrollbar-width: thin; }
.ind-link{ display: flex; gap: 8px; align-items: flex-start; padding: 6px 10px; border-radius: 10px; color: var(--text2);
  text-decoration: none; font-size: .85rem; line-height: 1.3; border-left: 3px solid transparent; transition: all var(--t); }
.ind-link:hover{ background: var(--panel2); color: var(--text); }
.ind-link.activo{ background: color-mix(in srgb, var(--c) 12%, transparent); border-left-color: var(--c); color: var(--text); font-weight: 800; }
.ind-link .il-num{ font-family: var(--font-t); font-size: .74rem; font-weight: 800; color: var(--c); min-width: 34px; padding-top: 1px; }
.ind-link.sub{ display: none; padding: 4px 10px 4px 26px; font-size: .78rem; }
.ind-link.sub.visible{ display: flex; animation: aparecer .25s ease-out; }
.cap-contenido{ min-height: 0; overflow-y: auto; scroll-behavior: smooth; container-type: inline-size; scrollbar-width: thin; border-radius: var(--radio); }
.cap-in > .seccion{ display: none; }
.cap-in > .seccion.activa{ display: block; animation: entrarVista .35s cubic-bezier(.2,.8,.2,1); }
.sec-nav{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sec-nav:empty{ display: none; }
.sn-btn{ display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--borde); background: var(--panel);
  text-decoration: none; color: var(--text); transition: transform var(--t), border-color var(--t), box-shadow var(--t); }
.sn-btn:hover{ transform: translateY(-2px); border-color: var(--c); box-shadow: var(--sombra); }
.sn-next{ text-align: right; }
.sn-btn small{ color: var(--c); font-weight: 800; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.sn-btn span{ font-weight: 700; font-size: .88rem; line-height: 1.3; }
.cap-cuerpo.horiz{ grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); gap: 10px; }
.horiz .lateral{ flex-direction: row; align-items: stretch; border-radius: 16px; }
.horiz .cap-barra{ display: flex; align-items: center; gap: 12px; padding: 8px 14px; max-width: 70%; }
.horiz .cb-num{ width: 38px; height: 38px; font-size: 1.05rem; border-radius: 11px; }
.horiz .cb-tit b{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.horiz .cb-stats, .horiz .cb-acc{ margin: 0; flex-wrap: nowrap; flex-shrink: 0; }
.horiz .indice{ flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 6px 10px; scrollbar-width: none; }
.horiz .indice::-webkit-scrollbar{ display: none; }
.horiz .ind-link{ flex-shrink: 0; white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; padding: 6px 10px; }
.horiz .ind-link.sub, .horiz .ind-link.sub.visible{ display: none; }
.horiz .ind-link.activo{ border-bottom-color: var(--c); }
.unico .indice, .unico .sec-nav, .unico .cap-in > .seccion > .sec-cab{ display: none; }
.unico .cap-barra{ max-width: none; flex: 1; }
.unico .cap-in > .seccion.activa{ margin: 0; padding: 12px 14px; }
/* Pantallas de escritorio: las 12 tarjetas caben sin scroll (rejilla que llena el alto) */
@media (min-width: 1000px) and (min-height: 600px){
  .unico .cap-in{ height: 100%; }
  .unico .cap-in > .seccion.activa{ height: 100%; display: flex; flex-direction: column; }
  .unico .directorio{ flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .unico .dir-grid{ flex: 1; min-height: 0; }
  .unico .dir-modo-tabla .dir-tabla-envoltura{ flex: 1; }
  .unico .dir-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); grid-template-rows: repeat(4, minmax(0,1fr)); }
  .unico .contacto{ container-type: size; }
  .unico .cap-contenido{ overflow: hidden; }
  .unico .dir-modo-tabla .dir-tabla-envoltura{ overflow: auto; }
  .unico .ct-img{ height: 90cqh; width: auto; aspect-ratio: 1; font-size: 50cqh; }
}
@media (min-width: 1500px) and (min-height: 600px){
  .unico .dir-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); grid-template-rows: repeat(3, minmax(0,1fr)); }
  .unico .ct-dep{ font-size: .92rem; }
  .unico .ct-fila{ font-size: .8rem; }
}
@container (min-width: 880px){
  .lista.cols{ columns: 2; column-gap: 22px; }
  .lista.cols > li{ break-inside: avoid; }
}

/* ---------- Secciones ---------- */
.seccion{ background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px 22px;
  margin-bottom: 12px; box-shadow: var(--sombra); scroll-margin-top: 8px; }
.sec-cab{ display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sec-ico{ flex-shrink: 0; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 1.3rem;
  background: color-mix(in srgb, var(--c) 15%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.sec-tit{ flex: 1; min-width: 0; }
.sec-num{ display: inline-block; font-family: var(--font-t); font-size: .76rem; font-weight: 800; color: var(--c); letter-spacing: .04em; }
.sec-tit h2{ margin: 0; font-family: var(--font-t); font-size: clamp(1.02rem, 1.7vw, 1.25rem); line-height: 1.25; }
.btn-enlace{ flex-shrink: 0; border: 1px solid var(--borde); background: var(--panel2); color: var(--muted); width: 34px; height: 34px; border-radius: 10px;
  cursor: pointer; font-size: .9rem; opacity: .7; transition: all var(--t); }
.btn-enlace:hover{ opacity: 1; color: var(--c); border-color: var(--c); transform: rotate(-10deg); }

/* Acordeones (subsecciones) */
.acc{ border: 1px solid var(--borde); border-radius: 16px; margin: 10px 0; background: var(--panel2); overflow: hidden;
  scroll-margin-top: 8px; transition: border-color var(--t), box-shadow var(--t); }
.acc.abierto{ border-color: color-mix(in srgb, var(--c) 45%, var(--borde)); box-shadow: 0 6px 20px color-mix(in srgb, var(--c) 12%, transparent); }
.acc-cab{ display: flex; align-items: center; gap: 8px; padding-right: 12px; transition: background var(--t); }
.acc-cab:hover{ background: color-mix(in srgb, var(--c) 7%, transparent); }
.acc-tg{ display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); text-align: left;
  padding: 14px 16px; cursor: pointer; font: inherit; }
.acc-ico{ flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem;
  background: color-mix(in srgb, var(--c) 14%, transparent); transition: transform var(--t); }
.acc.abierto > .acc-cab .acc-ico{ transform: scale(1.08) rotate(-6deg); }
.acc-txt{ flex: 1; min-width: 0; }
.acc-num{ display: block; font-family: var(--font-t); font-size: .72rem; font-weight: 800; color: var(--c); }
.acc-tit{ display: block; font-weight: 800; font-size: 1rem; line-height: 1.3; }
.acc-flecha{ flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--panel);
  border: 1px solid var(--borde); transition: transform var(--t), background var(--t); font-size: .8rem; }
.acc.abierto > .acc-cab .acc-flecha{ transform: rotate(180deg); background: var(--c); color: #fff; border-color: var(--c); }
.acc-cuerpo{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s cubic-bezier(.2,.8,.2,1); }
.acc.abierto > .acc-cuerpo{ grid-template-rows: 1fr; }
.acc-in{ overflow: hidden; min-height: 0; }
.acc-in > .acc-pad{ padding: 4px 18px 18px; }
.acc .acc{ background: var(--panel); }
.acc-cab .btn-enlace{ width: 30px; height: 30px; font-size: .8rem; }

/* ---------- Bloques ---------- */
.p{ margin: 0 0 12px; color: var(--text2); }
.h{ font-family: var(--font-t); font-size: 1.08rem; margin: 20px 0 10px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.h::before{ content: ''; width: 6px; height: 20px; border-radius: 4px; background: var(--c); }

/* Listas */
.lista{ list-style: none; margin: 6px 0 14px; padding: 0; counter-reset: li var(--inicio, 0); }
.lista > li{ position: relative; padding: 7px 12px 7px 50px; border-radius: 12px; margin-bottom: 4px; color: var(--text2);
  transition: background var(--t), transform var(--t); }
.lista > li:hover{ background: color-mix(in srgb, var(--c) 7%, transparent); transform: translateX(3px); }
.lista.num > li{ counter-increment: li; }
.lista.num > li::before{ content: counter(li); position: absolute; left: 10px; top: 6px; width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center; font-size: .78rem; font-weight: 800; font-family: var(--font-t);
  background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); }
.lista.alfa > li::before{ content: counter(li, lower-alpha) '.'; }
.lista.vineta > li{ padding-left: 34px; }
.lista.vineta > li::before{ content: ''; position: absolute; left: 14px; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.lista.chequeo > li{ padding-left: 44px; }
.lista.chequeo > li::before{ content: '✓'; position: absolute; left: 10px; top: 9px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: .8rem; font-weight: 900; color: #fff; background: var(--c); }
.li-extra{ display: block; margin-top: 6px; padding: 8px 12px; border-radius: 10px; background: var(--panel2); border-left: 3px solid var(--c); font-size: .94em; }
.acc .li-extra{ background: var(--panel); }
.li-sub{ list-style: none; margin: 8px 0 0; padding: 0; }
.li-sub li{ position: relative; padding: 3px 0 3px 20px; }
.li-sub li::before{ content: '›'; position: absolute; left: 4px; color: var(--c); font-weight: 900; }

/* Segmentos (Derechos / Deberes) */
.seg-barra{ display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--borde); margin: 4px 0 14px; flex-wrap: wrap; }
.seg-btn{ border: 0; background: transparent; color: var(--text2); padding: 8px 16px; border-radius: 999px; cursor: pointer; font-weight: 800; font-size: .88rem;
  display: flex; align-items: center; gap: 6px; transition: all var(--t); }
.seg-btn .seg-n{ font-size: .7rem; background: var(--panel); padding: 1px 7px; border-radius: 999px; color: var(--muted); }
.seg-btn.activo{ background: var(--c); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--c) 35%, transparent); }
.seg-btn.activo .seg-n{ background: rgba(255,255,255,.25); color: #fff; }
.seg-pane{ display: none; }
.seg-pane.activo{ display: block; animation: aparecer .3s ease-out; }

/* Tarjetas de definición */
.defs{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.def{ position: relative; display: flex; gap: 12px; padding: 13px 14px; border-radius: 16px; background: var(--panel2); border: 1px solid var(--borde);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.def:hover{ transform: translateY(-3px); box-shadow: var(--sombra-h); border-color: color-mix(in srgb, var(--c) 45%, var(--borde)); }
.def-ico{ flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.45rem;
  background: color-mix(in srgb, var(--c) 14%, transparent); transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.def:hover .def-ico{ transform: scale(1.15) rotate(-8deg); }
.def-k{ display: block; font-weight: 800; color: var(--text); margin-bottom: 4px; line-height: 1.3; }
.def-x{ margin: 0; color: var(--text2); font-size: .94rem; }
.def-sub{ display: grid; gap: 8px; margin-top: 10px; }
.def-sub div{ padding: 8px 12px; border-radius: 10px; background: var(--panel); border: 1px dashed var(--borde); font-size: .9rem; color: var(--text2); }
.def-sub b{ color: var(--text); }

/* Notas */
.nota{ display: flex; gap: 12px; padding: 14px 16px; border-radius: 14px; margin: 12px 0; background: color-mix(in srgb, var(--c) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); color: var(--text2); }
.nota-ico{ font-size: 1.3rem; flex-shrink: 0; }
.nota b.nota-k{ color: var(--text); }
.aviso{ font-size: .82rem; color: var(--muted); font-style: italic; margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--bg2); }

/* Directorio */
.dir-barra{ display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; flex-shrink: 0; }
.dir-filtro{ flex: 1; min-width: 200px; max-width: 360px; padding: 9px 14px; border-radius: 12px; border: 1.5px solid var(--borde); background: var(--panel2); color: var(--text); font: inherit; outline: none; }
.dir-filtro:focus{ border-color: var(--c); }
.dir-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; padding: 4px; }
.contacto{ --k: var(--acento); position: relative; display: flex; align-items: center; gap: 12px; padding: 6px 12px 6px 6px; min-height: 0; overflow: hidden;
  background: #fff; color: #1d2433; border: 2px solid var(--k); border-radius: 16px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--k) 16%, transparent); transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s; }
.contacto::after{ content: ''; position: absolute; right: -30px; top: -30px; width: 80px; height: 80px; border-radius: 50%; background: var(--k); opacity: .07; transition: transform .4s; }
.contacto:hover{ transform: scale(1.05); z-index: 3; box-shadow: 0 16px 32px color-mix(in srgb, var(--k) 35%, transparent); }
.contacto:hover::after{ transform: scale(2.4); }
.ct-img{ flex-shrink: 0; width: 76px; height: 76px; border-radius: 14px; display: grid; place-items: center; font-size: 2.6rem; line-height: 1;
  background: linear-gradient(140deg, color-mix(in srgb, var(--k) 24%, #fff), color-mix(in srgb, var(--k) 7%, #fff));
  border: 1px solid color-mix(in srgb, var(--k) 30%, #fff); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.contacto:hover .ct-img{ transform: rotate(-5deg) scale(1.04); }
.ct-info{ position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ct-dep{ font-weight: 800; font-size: .86rem; line-height: 1.2; color: #111827; }
.ct-of{ font-size: .72rem; font-weight: 800; color: var(--k); line-height: 1.25; margin-bottom: 2px; }
.ct-fila{ display: flex; gap: 6px; align-items: flex-start; font-size: .75rem; line-height: 1.3; color: #475569; word-break: break-word; }
.ct-fila .ct-l{ flex-shrink: 0; width: 16px; text-align: center; font-size: .72rem; }
.ct-fila a{ color: color-mix(in srgb, var(--k) 78%, #000); font-weight: 700; text-decoration: none; }
.ct-fila a:hover{ text-decoration: underline; }
.vacio{ color: var(--muted); }
.dir-tabla-envoltura{ overflow: auto; display: none; min-height: 0; }
.dir-modo-tabla .dir-grid{ display: none; }
.dir-modo-tabla .dir-tabla-envoltura{ display: block; }

/* Tablas genéricas */
.tabla{ width: 100%; border-collapse: separate; border-spacing: 0; font-size: .88rem; border: 1px solid var(--borde); border-radius: 14px; overflow: hidden; }
.tabla th{ background: color-mix(in srgb, var(--c) 16%, var(--panel)); text-align: left; padding: 10px 12px; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.tabla td{ padding: 10px 12px; border-top: 1px solid var(--borde); vertical-align: top; color: var(--text2); }
.tabla tr:hover td{ background: color-mix(in srgb, var(--c) 5%, transparent); }
.tabla td p{ margin: 0 0 4px; }

/* Agravantes / atenuantes */
.cmp{ display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--borde); margin: 14px 0 18px; }
.cmp-cab{ padding: 12px 16px; font-weight: 800; display: flex; gap: 8px; align-items: center; color: #fff; }
.cmp-cab.ag{ background: var(--n3); }
.cmp-cab.at{ background: var(--n1); }
.cmp-c{ padding: 12px 16px; border-top: 1px solid var(--borde); font-size: .92rem; color: var(--text2); transition: background var(--t); }
.cmp-c p{ margin: 0 0 3px; }
.cmp-c.ag{ background: var(--n3-s); border-right: 1px solid var(--borde); }
.cmp-c.at{ background: var(--n1-s); }
.cmp-par:hover .cmp-c{ filter: brightness(1.05); }
.cmp-par{ display: contents; }

/* Tipos (semáforo) */
.tipos-nav{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 8px; }
.tipo-btn{ --n: var(--n1); --ns: var(--n1-s); position: relative; text-align: left; border: 2px solid var(--n); background: var(--ns); color: var(--text);
  border-radius: 18px; padding: 18px; cursor: pointer; font: inherit; transition: transform var(--t), box-shadow var(--t); overflow: hidden; }
.tipo-btn:hover{ transform: translateY(-4px); box-shadow: 0 12px 26px color-mix(in srgb, var(--n) 30%, transparent); }
.tipo-btn .tb-luz{ width: 18px; height: 18px; border-radius: 50%; background: var(--n); box-shadow: 0 0 0 5px color-mix(in srgb, var(--n) 25%, transparent), 0 0 18px var(--n);
  display: inline-block; animation: pulso 2.2s ease-in-out infinite; }
.tipo-btn b{ display: block; font-family: var(--font-t); font-size: 1.5rem; margin: 8px 0 2px; color: var(--n); }
.tipo-btn span.tb-t{ font-size: .84rem; color: var(--text2); }
.tipo-btn .tb-ir{ position: absolute; right: 14px; top: 14px; font-weight: 800; color: var(--n); transition: transform var(--t); }
.tipo-btn:hover .tb-ir{ transform: translateX(4px); }
@keyframes pulso{ 0%,100%{ opacity: 1; } 50%{ opacity: .55; } }
.n1{ --n: var(--n1); --ns: var(--n1-s); }
.n2{ --n: var(--n2); --ns: var(--n2-s); }
.n3{ --n: var(--n3); --ns: var(--n3-s); }
.n0{ --n: var(--n0); --ns: var(--n0-s); }

.tipo-hero{ display: flex; gap: 18px; align-items: center; padding: 18px 20px; border-radius: 18px; margin-bottom: 16px; background: var(--ns); border: 2px solid var(--n); }
.th-badge{ flex-shrink: 0; text-align: center; padding: 10px 14px; border-radius: 16px; background: var(--n); color: #fff; min-width: 96px; box-shadow: 0 8px 20px color-mix(in srgb, var(--n) 35%, transparent); }
.th-badge small{ display: block; font-size: .7rem; font-weight: 800; letter-spacing: .14em; }
.th-badge b{ display: block; font-family: var(--font-t); font-size: 2.2rem; line-height: 1; }
.th-txt{ margin: 0; color: var(--text); font-weight: 600; }
.th-sub{ margin: 8px 0 0; padding-left: 18px; color: var(--text2); }

/* Grid de tarjetas */
.grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin: 10px 0 16px; }
.grid.g2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.tarjeta{ padding: 12px 14px; border-radius: 16px; background: var(--panel2); border: 1px solid var(--borde); border-top: 4px solid var(--c);
  transition: transform var(--t), box-shadow var(--t); }
.tarjeta:hover{ transform: translateY(-3px); box-shadow: var(--sombra-h); }
.tarjeta .tj-ico{ font-size: 1.3rem; }
.tarjeta h4{ margin: 0 0 6px; font-size: .98rem; display: flex; align-items: center; gap: 8px; }
.tarjeta p{ margin: 0 0 6px; color: var(--text2); font-size: .9rem; line-height: 1.5; }
.chips{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip{ display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 800; padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); }

/* Escalera (conducto regular) */
.escalera{ display: flex; align-items: flex-end; gap: 8px; margin: 14px 0 6px; padding: 10px 0; overflow-x: auto; }
.esc-paso{ flex: 1 1 0; min-width: 120px; padding: 12px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--borde); text-align: center;
  position: relative; transition: transform var(--t), box-shadow var(--t); }
.esc-paso:hover{ transform: translateY(-4px); box-shadow: var(--sombra-h); }
.esc-paso .ep-letra{ display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c); color: #fff; font-weight: 900; font-size: .8rem; }
.esc-paso .ep-ico{ display: block; font-size: 1.5rem; margin: 6px 0 2px; }
.esc-paso .ep-txt{ font-size: .84rem; font-weight: 700; line-height: 1.3; color: var(--text); }
.esc-paso:not(:last-child)::after{ content: '›'; position: absolute; right: -9px; top: 50%; transform: translateY(-50%); color: var(--c); font-weight: 900; font-size: 1.2rem; z-index: 1; }

/* Pasos (línea de tiempo) */
.pasos{ list-style: none; margin: 8px 0 14px; padding: 0; position: relative; }
.paso{ position: relative; padding: 0 0 18px 58px; }
.paso::before{ content: ''; position: absolute; left: 20px; top: 40px; bottom: 0; width: 3px; border-radius: 3px;
  background: linear-gradient(var(--n, var(--c)), color-mix(in srgb, var(--n, var(--c)) 15%, transparent)); }
.paso:last-child::before{ display: none; }
.paso-num{ position: absolute; left: 0; top: 0; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; cursor: pointer;
  font-family: var(--font-t); font-weight: 800; color: #fff; background: var(--n, var(--c)); border: 0; font-size: 1rem;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--n, var(--c)) 35%, transparent); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.paso-num:hover{ transform: scale(1.1) rotate(-6deg); }
.paso.hecho .paso-num{ background: var(--n1); }
.paso.hecho .paso-num::after{ content: '✓'; position: absolute; right: -6px; top: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--panel);
  color: var(--n1); font-size: .7rem; display: grid; place-items: center; border: 2px solid var(--n1); }
.paso-cont{ padding: 10px 14px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--borde); color: var(--text2); transition: border-color var(--t), opacity var(--t); }
.acc .paso-cont{ background: var(--panel); }
.paso.hecho .paso-cont{ opacity: .72; }
.paso-cont > .p:last-child, .paso-cont > *:last-child{ margin-bottom: 0; }
.paso-x{ margin: 0 0 8px; }
.paso-tel{ display: inline-flex; gap: 6px; align-items: center; margin-top: 6px; padding: 6px 12px; border-radius: 999px; background: var(--n1); color: #fff !important;
  font-weight: 800; text-decoration: none; font-size: .84rem; }
.ayuda-pasos{ font-size: .78rem; color: var(--muted); margin: -2px 0 10px; }

/* Ramas por edad del presunto agresor */
.ramas{ display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 10px 0; }
.rama{ padding: 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--borde); border-top: 4px solid var(--n3); font-size: .88rem; color: var(--text2);
  transition: transform var(--t); }
.acc .rama{ background: var(--panel2); }
.rama:hover{ transform: translateY(-3px); }
.rama .ra-k{ display: flex; gap: 6px; align-items: center; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.rama .ra-k span{ font-size: 1.3rem; }
.rama p{ margin: 0; }

/* Grupos de estrategias */
.grupos{ display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.grupo{ border-radius: 16px; background: var(--panel); border: 1px solid var(--borde); overflow: hidden; }
.grupo-cab{ display: flex; gap: 10px; align-items: center; padding: 12px 14px; background: color-mix(in srgb, var(--c) 12%, transparent); font-weight: 800; line-height: 1.3; }
.grupo-cab span{ font-size: 1.35rem; }
.grupo .lista{ margin: 8px; }

/* Estrategias de prevención */
.estr{ display: grid; gap: 12px; }
.estr-fila{ display: grid; grid-template-columns: 240px minmax(0,1fr); border-radius: 16px; border: 1px solid var(--borde); overflow: hidden; background: var(--panel); }
.estr-e{ padding: 14px; background: color-mix(in srgb, var(--c) 13%, transparent); font-weight: 800; color: var(--text); line-height: 1.35; display: flex; gap: 8px; }
.estr-e .ee-n{ flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--c); color: #fff; font-size: .78rem; }
.estr-as{ display: grid; }
.estr-a{ display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 12px 14px; color: var(--text2); font-size: .92rem; align-items: start; }
.estr-a + .estr-a{ border-top: 1px dashed var(--borde); }
.estr-a p{ margin: 0 0 6px; }
.estr-a p:last-child{ margin: 0; }
.estr-r{ display: flex; flex-direction: column; gap: 4px; align-items: flex-end; max-width: 220px; }
.estr-r .chip{ text-align: right; }
.estr-cab{ display: grid; grid-template-columns: 240px minmax(0,1fr); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 14px; }

/* Lista + responsable */
.lr{ display: grid; grid-template-columns: minmax(0,1fr) 200px; border: 1px solid var(--borde); border-radius: 16px; overflow: hidden; }
.lr .lista{ margin: 10px; }
.lr-r{ display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; padding: 16px; text-align: center;
  background: color-mix(in srgb, var(--c) 12%, transparent); font-weight: 800; }
.lr-r small{ font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lr-r span{ font-size: 2rem; }

/* Rutas A/B/C */
.ruta{ border-radius: 16px; border: 2px solid var(--n); background: var(--ns); padding: 14px 16px; margin: 12px 0; }
.ruta-cab{ display: flex; align-items: center; gap: 10px; font-family: var(--font-t); font-weight: 800; font-size: 1.04rem; color: var(--text); }
.ruta-cab .tb-luz{ width: 14px; height: 14px; border-radius: 50%; background: var(--n); box-shadow: 0 0 12px var(--n); flex-shrink: 0; }
.ruta-x{ margin: 6px 0 4px; color: var(--text2); font-style: italic; }
.ruta .lista{ --c: var(--n); }
.ruta .lista > li:hover{ background: rgba(255,255,255,.06); }
.ruta-pie{ margin: 6px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--panel); font-weight: 700; color: var(--text); font-size: .9rem; }

/* ---------- Inicio: tablero (dashboard) ---------- */
.tablero{ max-width: 1500px; margin: 0 auto; height: 100%; min-height: 540px; display: flex; flex-direction: column; gap: 10px; }
.tb-titulo{ flex-shrink: 0; display: flex; align-items: center; gap: 14px; padding: 9px 18px; border-radius: 18px; color: #fff; box-shadow: var(--sombra);
  background: radial-gradient(circle at 90% 10%, rgba(255,255,255,.2), transparent 40%), linear-gradient(130deg, var(--c-violeta), var(--c-cian) 60%, var(--c-verde)); }
.tb-logo{ font-size: 2rem; animation: latir 4s ease-in-out infinite; }
.tb-tt{ flex: 1; min-width: 0; }
.tb-titulo h1{ margin: 0; font-family: var(--font-t); font-size: 1.18rem; line-height: 1.2; }
.tb-titulo h1 span{ font-weight: 600; opacity: .9; }
.tb-titulo p{ margin: 0; font-size: .76rem; opacity: .9; }
.tb-etqs{ display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tb-etqs span{ font-size: .68rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.3); white-space: nowrap; }
.tb-kpis{ flex-shrink: 0; display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; }
.kpi{ display: grid; grid-template-columns: auto minmax(0,1fr); column-gap: 10px; align-items: center; text-align: left; padding: 9px 12px; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--borde); box-shadow: var(--sombra); color: var(--text); font: inherit;
  animation: entrarVista .5s cubic-bezier(.2,.8,.2,1) both; transition: transform var(--t), border-color var(--t); }
button.kpi{ cursor: pointer; }
button.kpi:hover{ transform: translateY(-3px); border-color: var(--acento); }
.kpi-ic{ grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.35rem; background: var(--panel2); }
.kpi-n{ font-family: var(--font-t); font-size: 1.45rem; font-weight: 800; line-height: 1.05; }
.kpi-t{ font-size: .72rem; font-weight: 700; color: var(--muted); line-height: 1.2; }
.tb-grid{ flex: 1; min-height: 0; display: grid; grid-template-columns: 1.15fr .75fr 1.3fr; gap: 10px; }
.tb-panel{ min-height: 0; display: flex; flex-direction: column; padding: 12px; border-radius: 18px; background: var(--panel); border: 1px solid var(--borde); box-shadow: var(--sombra); }
.tb-panel h2{ margin: 0 0 8px; font-family: var(--font-t); font-size: .92rem; }
.tb-caps-in{ flex: 1; min-height: 0; display: grid; grid-template-rows: repeat(4, minmax(0,1fr)); gap: 8px; }
.cap-card{ --c: var(--acento); position: relative; overflow: hidden; min-height: 0; display: flex; align-items: center; gap: 12px; text-align: left; padding: 6px 12px;
  border-radius: 14px; border: 1px solid var(--borde); border-left: 5px solid var(--c); background: var(--panel2); color: var(--text); cursor: pointer; font: inherit;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.cap-card::after{ content: attr(data-num); position: absolute; right: 38px; bottom: -12px; font-family: var(--font-t); font-weight: 800; font-size: 3.2rem; color: var(--c); opacity: .1; }
.cap-card:hover{ transform: translateX(4px); border-color: var(--c); box-shadow: var(--sombra-h); }
.cc-ico{ flex-shrink: 0; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 1.6rem;
  background: color-mix(in srgb, var(--c) 15%, transparent); transition: transform .45s cubic-bezier(.3,1.6,.5,1); }
.cap-card:hover .cc-ico{ transform: scale(1.12) rotate(-8deg); }
.cc-txt{ flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.cc-txt small{ color: var(--c); font-weight: 800; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; }
.cc-txt b{ font-family: var(--font-t); font-size: .9rem; }
.cc-stats{ font-size: .7rem; color: var(--text2); }
.cc-ir{ font-weight: 900; color: var(--c); font-size: 1.1rem; transition: transform var(--t); }
.cap-card:hover .cc-ir{ transform: translateX(4px); }
.tb-sem-in{ flex: 1; min-height: 0; display: grid; grid-template-rows: repeat(3, minmax(0,1fr)); gap: 8px; }
.sem{ min-height: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; border: 2px solid var(--n); background: var(--ns); }
.sem-main{ flex: 1; min-height: 0; display: grid; grid-template-columns: auto auto minmax(0,1fr); align-items: center; column-gap: 10px; row-gap: 2px;
  border: 0; background: transparent; color: var(--text); font: inherit; cursor: pointer; padding: 6px 12px; text-align: left; transition: background var(--t); }
.sem .tb-luz{ grid-row: span 2; width: 14px; height: 14px; border-radius: 50%; background: var(--n); box-shadow: 0 0 12px var(--n); animation: pulso 2.2s ease-in-out infinite; }
.sem-tipo{ grid-column: 2 / 4; font-family: var(--font-t); font-weight: 800; font-size: 1.02rem; color: var(--n); }
.sem-n{ font-family: var(--font-t); font-size: 1.55rem; font-weight: 800; line-height: 1; }
.sem-l{ font-size: .68rem; line-height: 1.15; color: var(--text2); }
.sem-ruta{ flex-shrink: 0; border: 0; border-top: 1px dashed color-mix(in srgb, var(--n) 55%, transparent); background: transparent; color: var(--n);
  font: inherit; font-weight: 800; font-size: .74rem; padding: 4px 12px; cursor: pointer; text-align: left; transition: background var(--t); }
.sem-main:hover, .sem-ruta:hover{ background: color-mix(in srgb, var(--n) 13%, transparent); }
.tb-atajos .atajos{ flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: minmax(0,1fr); gap: 6px; }
.atajo{ --c: var(--acento); min-height: 0; display: flex; gap: 9px; align-items: center; text-align: left; padding: 4px 8px; border-radius: 12px; border: 1px solid var(--borde);
  background: var(--panel2); color: var(--text); cursor: pointer; font: inherit; font-weight: 700; font-size: .8rem; line-height: 1.2; transition: all var(--t); }
.atajo span{ flex-shrink: 0; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: 1rem; background: color-mix(in srgb, var(--c) 15%, transparent); }
.atajo:hover{ transform: translateY(-2px); border-color: var(--c); box-shadow: var(--sombra-h); }
.kbd{ font-family: inherit; font-size: .72rem; font-weight: 800; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--borde); background: var(--panel2); }
.tb-pie{ flex-shrink: 0; display: flex; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; font-size: .7rem; color: var(--muted); padding: 0 4px; }
@media (max-width: 1100px){
  .tablero{ height: auto; }
  .tb-kpis{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .tb-grid{ grid-template-columns: 1fr 1fr; }
  .tb-atajos{ grid-column: 1 / -1; }
  .tb-caps-in, .tb-sem-in{ grid-template-rows: none; }
  .tb-atajos .atajos{ grid-auto-rows: auto; }
  .atajo{ padding: 7px 8px; }
  .horiz .lateral{ flex-direction: column; }
  .horiz .cap-barra{ max-width: none; }
}
@media (max-width: 600px){
  .tb-kpis{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tb-grid{ grid-template-columns: minmax(0,1fr); }
  .tb-etqs, .tb-titulo h1 span{ display: none; }
  .horiz .cb-stats{ display: none; }
}

/* ---------- Resaltado al navegar ---------- */
.destello{ animation: destello 2.2s ease-out; border-radius: 10px; }
@keyframes destello{ 0%,35%{ box-shadow: 0 0 0 4px var(--mark); background: color-mix(in srgb, var(--mark) 22%, transparent); } 100%{ box-shadow: 0 0 0 0 transparent; } }

/* ---------- Botón arriba, toast ---------- */
.arriba{ position: fixed; right: 20px; bottom: 20px; width: 48px; height: 48px; border-radius: 16px; border: 0; cursor: pointer; z-index: 40;
  background: linear-gradient(135deg, var(--c-violeta), var(--c-cian)); color: #fff; font-size: 1.3rem; font-weight: 900; box-shadow: var(--sombra-h);
  opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none; transition: all var(--t); }
.arriba.visible{ opacity: 1; transform: none; pointer-events: auto; }
.arriba:hover{ transform: translateY(-3px); }
.toast{ position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 30px); background: var(--text); color: var(--bg); padding: 10px 18px;
  border-radius: 999px; font-weight: 700; font-size: .88rem; opacity: 0; pointer-events: none; transition: all var(--t); z-index: 70; box-shadow: var(--sombra-h); }
.toast.visible{ opacity: 1; transform: translate(-50%, 0); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px){
  .cap-cuerpo{ grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); gap: 10px; }
  .lateral{ border-radius: 16px; }
  .cap-barra{ padding: 8px 12px; display: flex; align-items: center; gap: 10px; }
  .cb-fila{ flex: 1; }
  .cb-num{ width: 34px; height: 34px; font-size: 1rem; border-radius: 10px; }
  .cb-tit b{ font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cb-stats{ display: none; }
  .cb-acc{ margin: 0; flex-shrink: 0; }
  .indice{ flex: none; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 6px 8px; scrollbar-width: none; }
  .indice::-webkit-scrollbar{ display: none; }
  .ind-link{ flex-shrink: 0; white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; padding: 5px 10px; }
  .ind-link.sub, .ind-link.sub.visible{ display: none; }
  .ind-link.activo{ border-bottom-color: var(--c); }
}
@media (max-width: 860px){
  .cab-fila{ flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
  .buscador{ order: 3; flex-basis: 100%; max-width: none; display: none; }
  .cab-fila{ flex-wrap: wrap; }
  .buscador.abierto{ display: block; animation: aparecer .2s ease-out; }
  #btnBuscarMovil{ display: grid; }
  .herramientas{ margin-left: auto; }
  .vistas{ padding: 10px 12px; }
  .estr-fila{ grid-template-columns: 1fr; }
  .estr-cab{ display: none; }
  .tipos-nav{ grid-template-columns: 1fr; }
  .lr{ grid-template-columns: 1fr; }

}
@media (max-width: 600px){
  .marca-txt small{ display: none; }
  .cab-fila{ padding: 8px 12px; gap: 8px; }
  .marca{ flex: 1 1 0; min-width: 0; gap: 8px; }
  .marca-ico{ width: 36px; height: 36px; font-size: 1.3rem; border-radius: 11px; }
  .marca-txt{ min-width: 0; }
  .marca-txt b{ font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pestana{ padding: 5px 11px; font-size: .82rem; }
  .cb-tit small, .cb-acc button span{ display: none; }
  .sn-btn span{ font-size: .8rem; }
  .herramientas{ gap: 4px; }
  .btn-ico{ width: 36px; height: 36px; border-radius: 10px; font-size: .9rem; }
  #btnLetraMenos, #btnLetraMas{ display: none; }
  .seccion{ padding: 14px 12px; }

  .defs, .dir-grid, .grupos, .grid, .grid.g2{ grid-template-columns: 1fr; }
  .cmp{ grid-template-columns: 1fr; }
  .cmp-cab.at{ display: none; }
  .cmp-c.ag{ border-right: 0; }
  .cmp-c.at{ border-top: 0; }
  .cmp-c.ag::before{ content: '⬆️ Agravante'; display: block; font-size: .7rem; font-weight: 800; color: var(--n3); text-transform: uppercase; }
  .cmp-c.at::before{ content: '⬇️ Atenuante'; display: block; font-size: .7rem; font-weight: 800; color: var(--n1); text-transform: uppercase; }
  .cmp-cab.ag::after{ content: ' / Atenuante'; }
  .estr-a{ grid-template-columns: 1fr; }
  .estr-r{ align-items: flex-start; max-width: none; flex-direction: row; flex-wrap: wrap; }
  .tipo-hero{ flex-direction: column; align-items: flex-start; }
  .lista > li{ padding-left: 44px; }
  .paso{ padding-left: 50px; }
  .paso-num{ width: 36px; height: 36px; border-radius: 12px; }
  .paso::before{ left: 17px; top: 36px; }
  .acc-in > .acc-pad{ padding: 4px 12px 14px; }
  .acc-tg{ padding: 10px; gap: 10px; }
  .acc-tit{ font-size: .9rem; }
  .acc-ico{ width: 32px; height: 32px; font-size: 1rem; border-radius: 10px; }
  .acc-flecha{ width: 26px; height: 26px; }
  .acc-cab .btn-enlace{ width: 26px; height: 26px; }
  .acc-cab{ padding-right: 8px; }
  .escalera{ flex-direction: column; align-items: stretch; }
  .escalera{ gap: 14px; }
  .esc-paso{ text-align: left; display: flex; gap: 10px; align-items: center; margin-bottom: 0 !important; }
  .esc-paso .ep-ico{ margin: 0; }
  .esc-paso:not(:last-child)::after{ content: '↓'; right: auto; left: 22px; top: auto; bottom: -15px; transform: none; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important; }
  .cap-contenido{ scroll-behavior: auto; }
}

/* ---------- Impresión: todo expandido, sin controles ---------- */
@media print{
  html, body{ height: auto; overflow: visible; display: block; }
  .cabecera, .arriba, .toast, .fondo, .progreso, .lateral, .sec-nav, .btn-enlace, .seg-barra, .dir-barra, .ayuda-pasos{ display: none !important; }
  body{ background: #fff; color: #000; }
  .vistas{ padding: 0; max-width: none; }
  .vista{ display: none !important; height: auto; }
  .vista.activa{ display: block !important; }
  .cap-cuerpo{ display: block; height: auto; }
  .cap-contenido, .vista-scroll{ overflow: visible; height: auto; }
  .cap-in > .seccion{ display: block !important; }
  .acc-cuerpo{ grid-template-rows: 1fr !important; }
  .seg-pane{ display: block !important; }
  .seccion, .acc{ box-shadow: none; break-inside: auto; }
}

/* ==========================================================
   GALATCXIS · Menú desplegable con botón (se oculta solo)
   ========================================================== */
.btn-menu{ display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 10px; flex-shrink: 0; max-width: 260px;
  border-radius: 12px; border: 1.5px solid var(--borde); background: var(--panel); color: var(--text); cursor: pointer;
  font: inherit; font-weight: 800; font-size: .88rem; transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
.btn-menu:hover{ border-color: var(--acento); transform: translateY(-1px); }
.btn-menu .bm-ico{ font-size: 1.05rem; line-height: 1; }
.btn-menu .bm-txt{ min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-menu .bm-fl{ font-size: .7rem; color: var(--muted); transition: transform var(--t); }
.menu-abierto .btn-menu{ border-color: var(--acento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 20%, transparent); }
.menu-abierto .btn-menu .bm-fl{ transform: rotate(180deg); }
/* las pestañas pasan a ser el panel del menú */
.pestanas, .pestanas[class]{ order: 0; display: none; position: absolute; z-index: 60; top: calc(100% + 6px);
  left: max(12px, calc((100vw - 1600px) / 2 + 18px)); width: min(340px, calc(100vw - 24px)); flex: none;
  flex-direction: column; gap: 4px; padding: 8px; max-height: calc(100dvh - 96px); overflow-x: hidden; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-h); }
.menu-abierto .pestanas{ display: flex; animation: aparecer .18s ease-out; }
.pestanas .pestana{ width: 100%; justify-content: flex-start; white-space: normal; text-align: left; border-radius: 12px; padding: 9px 12px; font-size: .9rem; }
.pestanas .pestana:hover{ transform: none; background: var(--panel2); }
.pestanas .pestana[aria-selected="true"]:hover{ background: var(--c); }
@media (max-width: 600px){
  .btn-menu{ padding: 0 10px; max-width: 46vw; }
  .btn-menu .bm-fl{ display: none; }
  .pestanas, .pestanas[class]{ left: 12px; right: 12px; width: auto; }
}
@media (max-width: 380px){ .btn-menu .bm-txt{ display: none; } }

/* Inicio: acceso destacado a «Buscar situación» (reemplaza los indicadores) */
.tb-bsit{ flex-shrink: 0; display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 16px; border-radius: 16px; cursor: pointer;
  border: 1.5px dashed color-mix(in srgb, var(--c-naranja) 55%, var(--borde)); background: var(--panel); color: var(--text); font: inherit;
  box-shadow: var(--sombra); transition: transform var(--t), border-color var(--t), box-shadow var(--t); }
.tb-bsit:hover{ transform: translateY(-2px); border-style: solid; border-color: var(--c-naranja); box-shadow: var(--sombra-h); }
.tb-bsit-ic{ width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 1.35rem; flex-shrink: 0;
  background: color-mix(in srgb, var(--c-naranja) 16%, transparent); }
.tb-bsit-t{ flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.tb-bsit-t b{ font-family: var(--font-t); font-size: 1rem; }
.tb-bsit-t small{ color: var(--text2); font-size: .78rem; }
.tb-bsit .cc-ir{ color: var(--c-naranja); }

/* Pantalla grande (PC / tableta horizontal): las tarjetas del tablero llenan el alto,
   así que su texto crece con el tamaño de cada tarjeta (container queries).
   clamp(): nunca menor que el tamaño base ni exagerado; × --k respeta A−/A+ */
@media (min-width: 1101px){
  .tb-panel h2{ font-size: clamp(.92rem, calc(1.05vw * var(--k)), 1.3rem); margin-bottom: 10px; }
  .cap-card{ container-type: size; gap: clamp(12px, 4cqi, 22px); padding: 6px clamp(12px, 3cqi, 20px); }
  .cc-ico{ width: clamp(44px, 50cqh, 84px); height: clamp(44px, 50cqh, 84px); border-radius: clamp(13px, 12cqh, 20px); font-size: clamp(1.6rem, 27cqh, 3rem); }
  .cc-txt{ gap: 3px; }
  .cc-txt small{ font-size: clamp(.64rem, calc(min(8.5cqh, 2.6cqi) * var(--k)), 1rem); }
  .cc-txt b{ font-size: clamp(.9rem, calc(min(14cqh, 4.3cqi) * var(--k)), 1.7rem); line-height: 1.2; }
  .cc-ir{ font-size: clamp(1.1rem, 16cqh, 1.8rem); }
  .cap-card::after{ font-size: clamp(3.2rem, 70cqh, 7rem); bottom: -.25em; right: clamp(38px, 10cqi, 64px); }

  .sem{ container-type: size; }
  .sem-main{ column-gap: clamp(10px, 5cqi, 20px); padding: 6px clamp(12px, 6cqi, 22px); }
  .sem .tb-luz{ width: clamp(14px, 9cqh, 24px); height: clamp(14px, 9cqh, 24px); }
  .sem-tipo{ font-size: clamp(1.02rem, calc(min(12cqh, 7cqi) * var(--k)), 1.9rem); }
  .sem-n{ font-size: clamp(1.55rem, calc(min(22cqh, 13cqi) * var(--k)), 3.4rem); }
  .sem-l{ font-size: clamp(.68rem, calc(min(7cqh, 4.3cqi) * var(--k)), 1.1rem); }
  .sem-ruta{ font-size: clamp(.74rem, calc(min(7.5cqh, 4.5cqi) * var(--k)), 1.1rem); padding: clamp(4px, 2.5cqh, 9px) clamp(12px, 6cqi, 22px); }

  /* 12 accesos en 2 columnas × 6 filas: el texto se calcula sobre la rejilla */
  .tb-atajos .atajos{ container-type: size; gap: clamp(6px, 1.4cqh, 10px); }
  .atajo{ font-size: clamp(.8rem, calc(min(3.2cqh, 2.9cqi) * var(--k)), 1.3rem); gap: .7em; padding: 4px .7em; border-radius: 14px; }
  .atajo span{ width: 2.1em; height: 2.1em; font-size: 1.25em; border-radius: .6em; }
}

/* ==========================================================
   GALATCXIS · Buscar situación
   ========================================================== */
.sit{ max-width: 980px; margin: 0 auto; padding: 4px 2px 40px; display: flex; flex-direction: column; gap: 14px; }
.sit-cab{ display: flex; gap: 14px; align-items: center; padding: 14px 18px; border-radius: 18px; color: #fff; box-shadow: var(--sombra);
  background: radial-gradient(circle at 90% 10%, rgba(255,255,255,.22), transparent 42%), linear-gradient(130deg, var(--c-naranja), var(--c-violeta)); }
.sit-cab-ic{ font-size: 2rem; }
.sit-cab h1{ margin: 0; font-family: var(--font-t); font-size: 1.3rem; }
.sit-cab p{ margin: 2px 0 0; font-size: .86rem; opacity: .95; }
.sit-form{ position: relative; display: flex; gap: 8px; align-items: center; }
.sit-form > span{ position: absolute; left: 16px; top: 50%; transform: translateY(-50%); opacity: .7; }
.sit-q{ flex: 1; min-width: 0; padding: 13px 16px 13px 44px; border-radius: 999px; border: 1.5px solid var(--borde); background: var(--panel); color: var(--text);
  font: inherit; font-size: 1rem; outline: none; box-shadow: var(--sombra); transition: border-color var(--t), box-shadow var(--t); }
.sit-q:focus{ border-color: var(--acento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 22%, transparent); }
.sit-btn{ flex-shrink: 0; height: 48px; padding: 0 20px; border-radius: 999px; border: 0; cursor: pointer; color: #fff; font: inherit; font-weight: 800;
  background: linear-gradient(135deg, var(--c-violeta), var(--c-cian)); box-shadow: var(--sombra); }
.sit-btn:hover{ filter: brightness(1.08); }
.sit-ej[hidden]{ display: none; }
.sit-ej, .sit-sug{ display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sit-ej > span, .sit-sug > span{ font-size: .8rem; font-weight: 800; color: var(--muted); margin-right: 2px; }
.sit-chip{ border: 1px solid var(--borde); background: var(--panel); color: var(--text2); padding: 5px 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .82rem; font-weight: 700; transition: all var(--t); }
.sit-chip:hover{ border-color: var(--acento); color: var(--text); transform: translateY(-1px); }
.sit-res{ display: flex; flex-direction: column; gap: 12px; }
.sit-tipo, .sit-prot, .sit-item{ border-radius: 16px; background: var(--panel); border: 1px solid var(--borde); box-shadow: var(--sombra); }
.sit-tipo{ --n: var(--n2); --ns: var(--n2-s); border: 2px solid var(--n); padding: 14px 16px; background: linear-gradient(var(--ns), var(--ns)), var(--panel); }
.sit-tipo.n1, .sit-item.n1, .sit-ruta.n1{ --n: var(--n1); --ns: var(--n1-s); }
.sit-tipo.n2, .sit-item.n2, .sit-ruta.n2{ --n: var(--n2); --ns: var(--n2-s); }
.sit-tipo.n3, .sit-item.n3, .sit-ruta.n3{ --n: var(--n3); --ns: var(--n3-s); }
.sit-tipo-h{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sit-tipo-h .tb-luz{ width: 16px; height: 16px; border-radius: 50%; background: var(--n); box-shadow: 0 0 14px var(--n); animation: pulso 2.2s ease-in-out infinite; }
.sit-tipo-h small, .sit-prot-h small{ display: block; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sit-tipo-h b{ font-family: var(--font-t); font-size: 1.25rem; color: var(--n); }
.sit-ver{ margin-left: auto; font-weight: 800; font-size: .84rem; color: var(--n); text-decoration: none; }
.sit-def{ margin: 8px 0 4px; color: var(--text2); font-size: .92rem; }
.sit-otro{ margin: 4px 0; font-size: .86rem; font-weight: 700; color: var(--text2); }
.sit-prot{ padding: 12px 16px; border-left: 5px solid var(--c-cian); }
.sit-prot-h{ display: flex; align-items: center; gap: 12px; }
.sit-prot-h > span{ font-size: 1.6rem; }
.sit-prot-h b{ font-family: var(--font-t); }
.sit-h2{ margin: 6px 0 0; font-family: var(--font-t); font-size: 1.02rem; }
.sit-h2 span{ color: var(--muted); font-weight: 600; }
.sit-items{ display: grid; gap: 10px; }
.sit-item{ padding: 12px 14px; border-left: 5px solid var(--n); }
.sit-item p{ margin: 6px 0 0; line-height: 1.5; }
.sit-item .sit-extra{ font-size: .86rem; color: var(--text2); font-style: italic; }
.sit-item-h{ display: flex; align-items: center; gap: 10px; }
.sit-pill{ font-size: .72rem; font-weight: 800; padding: 2px 10px; border-radius: 999px; color: var(--n); background: var(--ns); border: 1px solid color-mix(in srgb, var(--n) 45%, transparent); white-space: nowrap; }
.sit-barra{ flex: 1; max-width: 120px; height: 6px; border-radius: 99px; background: var(--panel2); overflow: hidden; margin-left: auto; }
.sit-barra i{ display: block; height: 100%; border-radius: inherit; background: var(--n); }
.sit-det{ margin-top: 8px; }
.sit-det > summary{ cursor: pointer; font-weight: 800; font-size: .88rem; color: var(--n, var(--acento)); padding: 4px 0; list-style-position: inside; }
.sit-prot .sit-det > summary{ color: var(--c-cian); }
.sit-ruta{ margin-top: 6px; padding: 10px 12px; border-radius: 12px; background: var(--panel2); font-size: .9rem; }
.sit-ruta-h{ font-family: var(--font-t); font-weight: 800; margin-bottom: 4px; }
.sit-pasos{ margin: 6px 0; padding-left: 22px; display: grid; gap: 6px; }
.sit-pasos > li::marker{ font-weight: 800; color: var(--n, var(--acento)); }
.sit-pasos p, .sit-lista{ margin: 4px 0; }
.sit-lista{ padding-left: 18px; }
.sit-nota{ margin: 6px 0; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--n3) 10%, transparent); border: 1px solid color-mix(in srgb, var(--n3) 30%, transparent); font-size: .86rem; }
.sit-acc{ display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; }
.sit-acc a{ font-weight: 800; font-size: .84rem; text-decoration: none; }
.sit-vacio{ padding: 20px; text-align: center; color: var(--text2); background: var(--panel); border: 1px dashed var(--borde); border-radius: 16px; }
.sit-aviso{ margin: 4px 0 0; font-size: .78rem; color: var(--muted); }
.sit mark{ padding: 0 1px; }
@media (max-width: 600px){
  .sit-cab{ padding: 12px 14px; }
  .sit-cab h1{ font-size: 1.1rem; }
  .sit-cab p{ font-size: .8rem; }
  .sit-q{ font-size: 16px; padding: 11px 14px 11px 40px; }
  .sit-btn{ height: 44px; padding: 0 14px; }
  .sit-ver{ margin-left: 0; }
}
@media print{ .btn-menu, .sit-form, .sit-ej, .sit-sug{ display: none !important; } }