/* ============================================================================
   SGC ACTIVA — estilos propios (fuentes, sendero del flujograma, animaciones)
   Tailwind se usa para el layout; aquí vive lo que Tailwind CDN no cubre.
   ============================================================================ */
:root{
  /* Paleta institucional ACTIVA (tomada del logo oficial):
     verde #008840, lima #A0C030 y azul #0088C0. */
  --tinta:#14231B; --bosque:#008840; --bosque-osc:#00662F; --lima:#A0C030;
  --papel:#FFFFFF; --niebla:#DCE5DC; --sol:#F4A93C; --arcilla:#8A5A2C;
  --azul:#0088C0; --azul-osc:#006E9B;
}
/* Tamaño base del portal: al subir la raíz, todo el texto en rem escala.
   16px → 18px (112.5%) para una lectura más cómoda en todo el sitio. */
html{scroll-behavior:smooth;font-size:112.5%}
body{background:var(--papel);color:var(--tinta);font-family:'Nunito Sans',system-ui,sans-serif}
.f-display{font-family:'Nunito','Nunito Sans',system-ui,sans-serif}
.f-mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.tarjeta{transition:transform .18s ease, box-shadow .18s ease}
.tarjeta:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(20,35,27,.35)}
a:focus-visible,button:focus-visible{outline:3px solid var(--lima);outline-offset:2px;border-radius:6px}

/* ===== Sendero del flujograma (elemento firma) ===== */
.sendero{position:relative;padding-left:2.6rem}
.sendero::before{content:'';position:absolute;left:1.05rem;top:.4rem;bottom:.4rem;width:4px;
  border-radius:4px;background:linear-gradient(var(--bosque),var(--lima));
  transform-origin:top;animation:crecer 1.1s ease-out both}
.nodo{position:relative;opacity:0;animation:aparecer .5s ease both;
  animation-delay:calc(var(--i)*.14s + .15s)}
.nodo .marca{position:absolute;left:-2.6rem;top:.35rem;width:2.1rem;height:2.1rem;
  display:flex;align-items:center;justify-content:center;border-radius:9999px;
  background:#fff;border:3px solid var(--bosque);font-weight:700;z-index:1}
.nodo.decision .marca{border-radius:6px;transform:rotate(45deg);border-color:var(--sol)}
.nodo.decision .marca span{transform:rotate(-45deg)}
.nodo.extremo .marca{background:var(--bosque);border-color:var(--bosque);color:#fff}
.nodo.fin .marca{background:var(--tinta);border-color:var(--tinta)}
@keyframes aparecer{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes crecer{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){
  .sendero::before,.nodo{animation:none;opacity:1;transform:none}
}
@media print{ header,footer,.no-print{display:none} body{background:#fff} }

/* ===== Mapa de procesos (diagrama clicable) ===== */
.mapa-marco{background:#fff;border:3px solid var(--tinta);border-radius:1.25rem;
  padding:.9rem;box-shadow:6px 6px 0 rgba(20,35,27,.15)}
.mapa-centro{display:flex;gap:.6rem;margin-top:.5rem}
.franja-mapa{border-radius:.9rem;padding:.6rem .7rem;border:2px solid transparent}
.franja-titulo{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.65rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.4rem;opacity:.85}
.franja-nodos{display:grid;gap:.45rem;grid-template-columns:repeat(auto-fit,minmax(11.5rem,1fr))}
.f-estrategicos{background:rgba(0,136,64,.08);border-color:var(--bosque)}
.f-misionales{background:rgba(160,192,48,.26);border-color:var(--tinta)}
.f-apoyo{background:rgba(220,229,220,.45);border-color:#9db3a2}
.f-evaluacion{background:rgba(0,136,192,.10);border-color:var(--azul)}
.nodo-proceso{display:flex;align-items:center;gap:.5rem;width:100%;
  background:#fff;border:2px solid var(--niebla);border-radius:.7rem;
  padding:.5rem .65rem;font-size:.8rem;font-weight:600;color:var(--tinta);
  cursor:pointer;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.nodo-proceso:hover{transform:translateY(-2px);border-color:var(--bosque);
  box-shadow:0 8px 18px -10px rgba(20,35,27,.4)}
.flecha-lateral{display:flex;align-items:center;justify-content:center;flex:0 0 2.4rem;
  border-radius:.6rem;padding:.9rem .3rem;text-align:center}
.flecha-lateral span{writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.62rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase}
.flecha-entrada{background:var(--bosque);color:#fff;
  clip-path:polygon(0 0,100% 6%,100% 94%,0 100%)}
.flecha-salida{background:var(--lima);color:var(--tinta);
  clip-path:polygon(0 6%,100% 0,100% 100%,0 94%)}
.banda-mipg{display:block;width:100%;margin-top:.6rem;background:var(--tinta);
  color:#F7F8F4;border-radius:.8rem;padding:.6rem .9rem;font-size:.8rem;font-weight:700;
  text-align:center;cursor:pointer;transition:background .15s ease}
.banda-mipg:hover{background:var(--bosque-osc)}
@media (max-width:640px){
  .mapa-centro{flex-direction:column}
  .flecha-lateral{flex:none;padding:.35rem .6rem}
  .flecha-lateral span{writing-mode:horizontal-tb;transform:none}
  .flecha-entrada{clip-path:polygon(0 0,94% 0,100% 50%,94% 100%,0 100%);order:-1}
  .flecha-salida{clip-path:polygon(0 0,94% 0,100% 50%,94% 100%,0 100%)}
}
@media print{
  .mapa-marco{box-shadow:none}
  .nodo-proceso:hover{transform:none}
}

/* ===== Juego de inducción (Pasaporte ACTIVA) ===== */
/* Al volver del juego (#/nuevo-en-activa), la tarjeta de inducción saluda con un pulso. */
.resaltar-induccion{border-color:var(--bosque)!important;animation:pulso-induccion 1.2s ease-out 3}
@keyframes pulso-induccion{
  0%{box-shadow:0 0 0 0 rgba(0,136,64,.45)}
  70%{box-shadow:0 0 0 14px rgba(0,136,64,0)}
  100%{box-shadow:0 0 0 0 rgba(0,136,64,0)}
}
@media (prefers-reduced-motion:reduce){ .resaltar-induccion{animation:none} }
.sacudir{animation:sacudir .35s ease}
@keyframes sacudir{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.menguar{width:100%;animation-name:menguar;animation-timing-function:linear;animation-fill-mode:forwards}
@keyframes menguar{from{width:100%}to{width:0}}
@media (prefers-reduced-motion:reduce){ .sacudir{animation:none} }

/* ===== Tablas anchas: pista de desplazamiento horizontal en móvil ===== */
.tabla-scroll{position:relative}
.tabla-hint{display:none}
/* sombra al borde derecho + micro-etiqueta: solo donde la tabla suele exceder la pantalla.
   El bloque va DESPUÉS de la regla base para que gane en orden de fuente (los @media no suman especificidad). */
@media (max-width:768px){
  .tabla-scroll::after{content:'';position:absolute;top:2px;right:2px;bottom:2px;width:2.1rem;
    border-radius:0 1rem 1rem 0;pointer-events:none;
    background:linear-gradient(to left,rgba(20,35,27,.18),rgba(20,35,27,0))}
  .tabla-scroll>.tabla-scroll-vp{scrollbar-width:thin;scrollbar-color:var(--bosque) transparent}
  .tabla-scroll>.tabla-scroll-vp::-webkit-scrollbar{height:6px}
  .tabla-scroll>.tabla-scroll-vp::-webkit-scrollbar-thumb{background:var(--bosque);border-radius:6px}
  .tabla-hint{display:block;font-size:.7rem;color:var(--bosque);font-weight:600;margin-top:.35rem;text-align:right}
}