/* =========================================================
   5 Sentidos — Plataforma SG-SST
   Rediseño (landing + auth). Lenguaje visual: oscuro 3D.
   Tipografía titulares: Archivo · cuerpo: Plus Jakarta Sans
   ========================================================= */

*{box-sizing:border-box}
body{margin:0;background:#ECF1F6;color:#14315C;font-family:'Plus Jakarta Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:#1F63AE;color:#fff}
a{color:inherit}
input,textarea{font-family:inherit}
i.ph,i.ph-bold,i.ph-fill{display:inline-flex;line-height:1}

/* ---------- Keyframes ---------- */
@keyframes floatA{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-26px) rotate(3deg)}}
@keyframes floatB{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(30px) rotate(-4deg)}}
@keyframes floatC{0%,100%{transform:translate(0,0)}50%{transform:translate(18px,-14px)}}
@keyframes mq{to{transform:translateX(-50%)}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,168,206,.55)}70%{box-shadow:0 0 0 12px rgba(37,168,206,0)}100%{box-shadow:0 0 0 0 rgba(37,168,206,0)}}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes growbar{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
@keyframes dash{to{stroke-dashoffset:var(--off)}}
@keyframes drift{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(10px,-16px) rotate(8deg)}}
@keyframes auroraMove{0%,100%{transform:rotate(-8deg) translateX(-7%);opacity:.65}50%{transform:rotate(-4deg) translateX(9%);opacity:1}}
@keyframes gridpan{from{background-position:0 0}to{background-position:32px 32px}}
@keyframes glowpulse{0%,100%{opacity:.6;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.12)}}
@keyframes gridfloor{from{background-position:0 0}to{background-position:0 60px}}
@keyframes spin3d{0%{transform:rotateY(0deg) rotateX(14deg)}100%{transform:rotateY(360deg) rotateX(14deg)}}
@keyframes pop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes rayspin{to{transform:rotate(360deg)}}

/* ---------- Utilities ---------- */
.rise{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.navlink{display:inline-flex;align-items:center;gap:6px;padding:8px 11px;border-radius:999px;font-size:13.5px;font-weight:600;color:rgba(20,49,92,.62);text-decoration:none;transition:all .16s;white-space:nowrap}
.navlink i{font-size:15px;color:#1F63AE;opacity:.85}
.navlink:hover{color:#14315C;background:#fff}
.mtab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:rgba(20,49,92,.45);font-size:10.5px;font-weight:600;transition:color .16s;background:none;border:none;cursor:pointer}
.mtab i{font-size:23px}
.mtab-on{color:#1F63AE}
.svccard{position:relative;background-image:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0) 60%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 5px -2px rgba(20,49,92,.14),0 22px 44px -24px rgba(20,49,92,.5);transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s,border-color .22s}
.svccard:hover{border-color:rgba(31,99,174,.4)!important;transform:translateY(-6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 4px 10px -3px rgba(20,49,92,.18),0 40px 70px -28px rgba(20,49,92,.55)}
.elev{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 6px -2px rgba(20,49,92,.14),0 30px 60px -30px rgba(20,49,92,.5)}
.fld:focus{border-color:#1F63AE!important;outline:none;box-shadow:0 0 0 4px rgba(31,99,174,.12)}
.herozone{position:relative;z-index:1;margin:0 14px 8px;overflow:hidden;border-radius:36px}
.herobg{position:absolute;inset:0;overflow:hidden;border-radius:36px;background:linear-gradient(168deg,#0A1E3D 0%,#0D2A52 50%,#0F3A68 100%);box-shadow:0 60px 120px -55px rgba(6,18,40,.9),inset 0 1px 0 rgba(255,255,255,.08)}
.tilt{transform:perspective(1500px) rotateY(-14deg) rotateX(6deg)}
.appnav-mobile{display:none}
.mobtabs{display:none}

/* Service row hover (only on non-active rows) */
.svc-row{transition:all .18s}
.svc-row:hover{border-color:rgba(31,99,174,.35)!important}

/* Role card selectable */
.rolecard{text-align:left;cursor:pointer;background:#fff;border:1.5px solid rgba(20,49,92,.12);border-radius:15px;padding:14px;font-family:inherit;color:#14315C;transition:all .15s}
.rolecard:hover{border-color:rgba(31,99,174,.4)}
.rolecard.sel{background:rgba(31,99,174,.07);border-color:#1F63AE}
.rolecard .rolecheck{display:none}
.rolecard.sel .rolecheck{display:grid}

/* Footer social hover */
.soc:hover{background:rgba(47,182,221,.2)!important;border-color:rgba(108,205,236,.5)!important}
.dev-credit:hover{color:#6CCDEC!important}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .grid2{grid-template-columns:1fr!important;gap:36px!important}
  .split-grid{grid-template-columns:1fr!important;gap:40px!important}
  .svc-grid{grid-template-columns:1fr 1fr!important}
  .mas-grid{grid-template-columns:1fr!important}
  .ben-grid{grid-template-columns:1fr 1fr!important}
  .tilt{transform:none!important}
  .appnav-links,.appnav-cta{display:none!important}
  .appnav-mobile{display:flex!important}
  .mobtabs{display:flex!important}
  .haspad{padding-bottom:96px!important}
  .footer-cols{grid-template-columns:1fr 1fr!important}
  .contact-grid{grid-template-columns:1fr!important}
}
@media(max-width:620px){
  .svc-grid{grid-template-columns:1fr!important}
  .ben-grid{grid-template-columns:1fr!important}
  .stats-row{gap:22px!important}
  .footer-cols{grid-template-columns:1fr!important}
}

/* =========================================================
   DASHBOARD (post-login)
   ========================================================= */
.dash{display:grid;grid-template-columns:264px 1fr;min-height:100vh}
.dash-backdrop{display:none}
.dash-side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:linear-gradient(180deg,#0B2148,#0A1E3D 60%,#081832);color:#fff;padding:22px 16px;overflow:hidden}
.dash-side::before{content:"";position:absolute;top:-20%;right:-30%;width:80%;height:40%;border-radius:50%;filter:blur(70px);background:radial-gradient(circle,rgba(37,168,206,.25),transparent 65%);pointer-events:none}
.dash-logo{display:flex;align-items:center;gap:10px;padding:6px 8px 20px;position:relative;z-index:1}
.dash-nav{display:flex;flex-direction:column;gap:4px;position:relative;z-index:1;flex:1;overflow-y:auto}
.dash-nav a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;text-decoration:none;color:rgba(255,255,255,.68);font-size:14px;font-weight:600;transition:all .15s}
.dash-nav a i{font-size:19px}
.dash-nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.dash-nav a.on{background:linear-gradient(140deg,rgba(47,182,221,.9),rgba(31,99,174,.9));color:#fff;box-shadow:0 12px 26px -12px rgba(47,182,221,.6)}
.dash-user{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.1);padding-top:14px;margin-top:10px;display:flex;align-items:center;gap:11px}
.dash-avatar{width:40px;height:40px;border-radius:12px;background:linear-gradient(140deg,#2FB6DD,#1F63AE);display:grid;place-items:center;font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;color:#fff;flex:none}
.dash-main{padding:26px clamp(20px,3.4vw,44px) 60px;min-width:0;overflow-x:hidden}
.dash-topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.rolebadge{display:inline-flex;align-items:center;gap:7px;background:rgba(31,99,174,.09);border:1px solid rgba(31,99,174,.2);color:#1F63AE;font-weight:700;font-size:12px;letter-spacing:.02em;padding:6px 13px;border-radius:999px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.kpi{background:linear-gradient(180deg,#fff,rgba(255,255,255,.65));border:1px solid rgba(20,49,92,.09);border-radius:20px;padding:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 22px 44px -30px rgba(20,49,92,.5)}
.kpi .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;margin-bottom:14px}
.kpi .val{font-family:'Archivo',sans-serif;font-weight:700;font-size:30px;letter-spacing:-.02em;line-height:1}
.kpi .lbl{font-size:13px;color:rgba(20,49,92,.6);margin-top:4px}
.panel{background:linear-gradient(180deg,#fff,rgba(255,255,255,.7));border:1px solid rgba(20,49,92,.09);border-radius:22px;padding:24px;box-shadow:0 22px 44px -30px rgba(20,49,92,.5);min-width:0}
.panel canvas{max-width:100%}
.mobile-topbar{display:none}
@media(max-width:900px){
  .dash{grid-template-columns:1fr}
  .dash-side{position:fixed;left:0;top:0;width:264px;z-index:60;transform:translateX(-100%);transition:transform .25s cubic-bezier(.2,.7,.2,1)}
  .dash.open .dash-side{transform:translateX(0)}
  .dash-backdrop{display:none;position:fixed;inset:0;background:rgba(6,16,36,.5);z-index:55}
  .dash.open .dash-backdrop{display:block}
  .mobile-topbar{display:flex}
  /* KPI grids colapsan aunque tengan columnas inline (repeat(5), repeat(3)…) */
  .kpi-grid{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:560px){.kpi-grid{grid-template-columns:1fr!important}}

/* Tabla del panel */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(20,49,92,.5);padding:0 14px 12px;white-space:nowrap}
.tbl td{padding:13px 14px;border-top:1px solid rgba(20,49,92,.08);vertical-align:middle}
.tbl tbody tr:hover{background:rgba(31,99,174,.03)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:4px 11px;border-radius:999px}
.chip-on{background:rgba(31,138,91,.12);color:#1F6E48}
.chip-off{background:rgba(20,49,92,.08);color:rgba(20,49,92,.55)}
.chip-role{background:rgba(31,99,174,.1);color:#1F63AE}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;font-family:inherit;font-weight:600;font-size:14px;border-radius:12px;padding:11px 18px;text-decoration:none;transition:all .15s}
.btn-primary{background:#14315C;color:#fff}
.btn-primary:hover{background:#1F3F72}
.btn-ghost{background:#fff;border:1px solid rgba(20,49,92,.16);color:#14315C}
.btn-ghost:hover{border-color:rgba(31,99,174,.4)}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:10px}
.iconbtn{width:34px;height:34px;border-radius:9px;border:1px solid rgba(20,49,92,.14);background:#fff;display:grid;place-items:center;cursor:pointer;color:#14315C;text-decoration:none;transition:all .15s}
.iconbtn:hover{border-color:rgba(31,99,174,.4);color:#1F63AE}
.iconbtn.danger:hover{border-color:rgba(197,48,48,.45);color:#C53030}
.pf-label{font-size:13px;font-weight:600;color:rgba(20,49,92,.6);display:block;margin-bottom:7px}
.pf-input{width:100%;border:1px solid rgba(20,49,92,.14);border-radius:12px;padding:12px 14px;font-size:15px;background:#fff;transition:all .15s}
.pf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
@media(max-width:560px){.pf-row{grid-template-columns:1fr}}

/* ---- Landing · sección Plataforma (mockup dashboard animado) ---- */
@keyframes lpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes lpPulse{0%,100%{opacity:1}50%{opacity:.3}}
.lp-card{animation:lpFloat 6s ease-in-out infinite}
.lp-live{animation:lpPulse 1.4s ease-in-out infinite}
.lp-bar{transform:scaleY(0);transform-origin:50% 100%;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.lp-viz.on .lp-bar{transform:scaleY(1)}
.lp-ring{transition:stroke-dashoffset 1.2s ease .25s}
.lp-chip{transition:transform .15s,background .15s}
.lp-chip:hover{transform:translateY(-2px);background:rgba(255,255,255,.12)!important}
@media(max-width:560px){.lp-card{animation:none}}
.lp-viz.on .lp-ring{stroke-dashoffset:42}

/* ---- Landing extra: PHVA, alcance normativo, FAQ, diagnóstico ---- */
.step-card{transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s}
.step-card:hover{transform:translateY(-5px)}
.norm-card{transition:transform .16s,border-color .16s,box-shadow .16s}
.norm-card:hover{transform:translateY(-4px);border-color:rgba(31,99,174,.4)!important}
.faq-item summary{list-style:none;cursor:pointer}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item[open] .faq-ic{transform:rotate(45deg)}
.faq-ic{transition:transform .2s}
.dx-opt{transition:all .15s;cursor:pointer}
.dx-opt:hover{border-color:#1F63AE!important;background:rgba(31,99,174,.06)!important;transform:translateX(3px)}
@media(max-width:860px){.phva-grid{grid-template-columns:1fr 1fr!important}.norm-grid{grid-template-columns:1fr 1fr!important}}
@media(max-width:560px){.phva-grid{grid-template-columns:1fr!important}.norm-grid{grid-template-columns:1fr!important}}

/* ---- Fix responsive: secciones de 2 columnas con tarjeta ----
   Colapsan a 1 columna antes de que la tarjeta apriete el resto del
   contenido y lo recorte (hero, servicios, plataforma, diagnóstico…). */
.grid2>*,.split-grid>*{min-width:0}
@media(max-width:1080px){
  .grid2{grid-template-columns:1fr!important;gap:36px!important}
  .split-grid{grid-template-columns:1fr!important;gap:40px!important}
}

/* ---- Fix móvil: cards mockup (hero "Avance del sistema" + Plataforma) ---- */
@media(max-width:560px){
  .hero-avance{gap:8px!important}
  .hero-ring{width:44px!important;height:44px!important}
  .hero-avnum{font-size:22px!important}
  .hero-float{display:none!important}      /* badges flotantes: se encimaban en móvil */
}
@media(max-width:480px){
  .lp-charts{grid-template-columns:1fr!important}  /* dona y barras apiladas */
}

/* ---- Nav: colapsa a menú móvil antes (≤1180) para que el nav completo
   solo aparezca cuando realmente cabe y no se desborde a la derecha ---- */
@media(max-width:1180px){
  .appnav-links,.appnav-cta{display:none!important}
  .appnav-mobile{display:flex!important}
  .mobtabs{display:flex!important}
  .haspad{padding-bottom:96px!important}
}
/* ---- Card Plataforma: que los KPIs no se salgan a la derecha ---- */
.lp-kpis>*{min-width:0}
@media(max-width:560px){
  .lp-kpis>*{padding:9px 6px!important}
  .lp-kpis>div>div:last-child{font-size:9px!important;letter-spacing:-.2px}
}