/* DIRECTIA PRO — sistema visual
   Extraído del sitio en producción (directiapro.netlify.app) el 7 sep 2026.
   Este archivo replica el bloque <style> original y añade solo lo necesario
   para las páginas nuevas. La paleta y la tipografía NO se modifican.

   SISTEMA DE COLOR (original, textual del sitio):
   Cuerpo / body:    text-slate-700 (#334155)  |  muted: text-slate-500 (#64748b)
   Títulos:          text-navy-900 (#061530)   |  secundarios: text-navy-800 (#0a1f4e)
   Acento azul:      text-navy-500 (#1d4ed8)   — SOLO en etiquetas y títulos/encabezados
   Secciones claras: bg-navy-50 (#eef4ff)
   Fills oscuros:    bg-navy-900 / bg-navy-950
*/

* { box-sizing: border-box; }

body { font-family: 'Plus Jakarta Sans', sans-serif; background: #ffffff; color: #334155; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #eef4ff; }
::-webkit-scrollbar-thumb { background: #a8c0fc; border-radius: 3px; }

input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; }
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; height: 14px; width: 14px; border-radius: 50%;
    background: #1d4ed8; cursor: pointer; margin-top: -5px; transition: transform 0.1s;
}
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); }
input[type=range]::-webkit-slider-runnable-track {
    width: 100%; height: 3px; cursor: pointer; background: #d4e2ff; border-radius: 2px;
}

.rule-accent { border-left: 3px solid #1d4ed8; }
details summary::-webkit-details-marker { display: none; }

.nav-link { position: relative; }
.nav-link::after {
    content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px;
    background: #1d4ed8; transition: width 0.2s ease;
}
.nav-link:hover::after { width: 100%; }

.card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(6,21,48,0.10); }

/* ---- Texturas sutiles de sección ---- */
.tex-dots {
    background-image: radial-gradient(circle, rgba(29,78,216,0.09) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
}
.tex-grid {
    background-image:
        linear-gradient(rgba(29,78,216,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(29,78,216,0.05) 1px, transparent 1px);
    background-size: 52px 52px;
}
.tex-diag {
    background-image: repeating-linear-gradient(
        -52deg,
        transparent, transparent 20px,
        rgba(29,78,216,0.055) 20px, rgba(29,78,216,0.055) 21px
    );
}
.tex-dark {
    background-image: radial-gradient(circle, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 26px 26px;
}

.chart-wrap { position: relative; width: 100%; }
.chart-wrap canvas { display: block; }

/* ---- Añadidos para las páginas nuevas (mismo lenguaje visual) ---- */

/* Marcador de contenido pendiente. Se elimina antes de producción. */
.ph {
    background: rgba(29,78,216,.10);
    border-bottom: 2px dotted #1d4ed8;
    padding: 0 .2em;
}
.nota-pendiente {
    border-left: 3px solid #1d4ed8;
    background: #eef4ff;
    padding: 14px 18px;
    font-size: .82rem;
    line-height: 1.55;
    color: #475569;
}
.nota-pendiente strong { color: #0a1f4e; }

/* Menú desplegable de Soluciones */
.menu-sol { position: relative; }
.menu-sol .panel {
    position: absolute; top: calc(100% + 18px); left: -20px; width: 330px;
    background: #fff; border: 1px solid #d4e2ff;
    box-shadow: 0 18px 44px rgba(6,21,48,.11); padding: 6px;
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: .16s;
}
.menu-sol:hover .panel, .menu-sol:focus-within .panel {
    opacity: 1; visibility: visible; transform: none;
}
.menu-sol .panel a { display: block; padding: 12px 14px; transition: background .12s; }
.menu-sol .panel a:hover { background: #eef4ff; }