/* Sistema de diseño base de INSPECTA — tomado directamente del mockup
   visual documentado en el proyecto (05-inspecta-mockup-visual.html).
   Cualquier pantalla nueva debe usar estas mismas variables y clases,
   nunca colores o tipografías inventadas sobre la marcha. */

:root{
  --primary:#1B3E6F;
  --primary2:#245293;
  --primary3:#2D65B8;
  --accent:#0EA5E9;
  --accent2:#38BDF8;
  --white:#FFFFFF;
  --off-white:#F4F7FC;
  --border:#DDE4EF;
  --text:#1A2540;
  --text2:#4A5568;
  --text3:#8896AA;
  --green:#0D7A4E;
  --green-bg:#EBF8F2;
  --green-border:#A3D9BE;
  --yellow:#92600A;
  --yellow-bg:#FEF8EE;
  --yellow-border:#F6D28A;
  --red:#B91C1C;
  --red-bg:#FEF2F2;
  --red-border:#FECACA;
  --orange:#C2410C;
  --shadow:0 1px 3px rgba(27,62,111,0.08), 0 4px 16px rgba(27,62,111,0.06);
  --shadow-lg:0 4px 12px rgba(27,62,111,0.12), 0 16px 40px rgba(27,62,111,0.1);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--off-white);color:var(--text);min-height:100vh;overflow-x:hidden;}
.screen{display:none;min-height:100vh;}
.screen.active{display:flex;flex-direction:column;}

/* SPLASH */
#s-splash{background:var(--primary);align-items:center;justify-content:center;}
.splash-logo{text-align:center;animation:splashIn 0.6s ease;}
@keyframes splashIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}
.splash-wordmark{font-size:2.4rem;font-weight:800;color:white;letter-spacing:-0.02em;margin-bottom:4px;}
.splash-wordmark span{color:var(--accent2);}
.splash-tagline{font-size:0.85rem;color:rgba(255,255,255,0.5);letter-spacing:0.12em;text-transform:uppercase;}
.splash-bar{width:48px;height:3px;background:rgba(255,255,255,0.15);border-radius:100px;margin:2rem auto 0;overflow:hidden;}
.splash-fill{height:100%;background:var(--accent2);border-radius:100px;animation:load 1.4s ease forwards;}
@keyframes load{from{width:0}to{width:100%}}

/* LOGIN */
#s-login{background:var(--primary);align-items:center;justify-content:center;padding:1.5rem;position:relative;overflow:hidden;}
#s-login::before{content:'';position:absolute;width:600px;height:600px;border-radius:50%;background:rgba(255,255,255,0.03);top:-200px;right:-200px;}
#s-login::after{content:'';position:absolute;width:400px;height:400px;border-radius:50%;background:rgba(14,165,233,0.06);bottom:-150px;left:-150px;}
.login-wrap{width:100%;max-width:360px;position:relative;z-index:1;}
.login-logo{text-align:center;margin-bottom:2rem;}
.wordmark{font-size:2rem;font-weight:800;color:white;letter-spacing:-0.02em;}
.wordmark span{color:var(--accent2);}
.tagline{font-size:0.72rem;color:rgba(255,255,255,0.4);letter-spacing:0.14em;text-transform:uppercase;margin-top:4px;}
.login-card{background:white;border-radius:20px;padding:2rem;box-shadow:var(--shadow-lg);}
.login-card-title{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:0.3rem;}
.login-card-sub{font-size:0.82rem;color:var(--text3);margin-bottom:1.5rem;}
.form-group{margin-bottom:0.9rem;}
.form-lbl{font-size:0.72rem;color:var(--text3);margin-bottom:0.35rem;display:block;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;}
.form-inp{width:100%;background:var(--off-white);border:1px solid var(--border);border-radius:10px;padding:0.65rem 0.9rem;color:var(--text);font-size:0.88rem;font-family:'Plus Jakarta Sans',sans-serif;outline:none;transition:border-color 0.2s;}
.form-inp:focus{border-color:var(--primary3);background:white;}
.btn-main{width:100%;padding:0.85rem;background:var(--primary);border:none;border-radius:12px;color:white;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:0.95rem;cursor:pointer;transition:all 0.2s;margin-top:0.5rem;}
.btn-main:hover{background:var(--primary2);}
.btn-main:disabled{background:var(--border);color:var(--text3);cursor:not-allowed;}
.login-error{margin-top:0.9rem;background:var(--red-bg);border:1px solid var(--red-border);border-radius:10px;padding:0.7rem 0.9rem;font-size:0.8rem;color:var(--red);display:none;}
.login-error.show{display:block;}
.login-ok{margin-top:0.9rem;background:var(--green-bg);border:1px solid var(--green-border);border-radius:10px;padding:0.7rem 0.9rem;font-size:0.8rem;color:var(--green);display:none;}
.login-ok.show{display:block;}
.login-olvide-wrap{text-align:center;margin-top:1rem;}
.login-olvide{font-size:0.8rem;color:var(--primary3);text-decoration:none;font-weight:600;}
.login-olvide:hover{text-decoration:underline;}

/* Pantalla de éxito temporal (mientras no existen los paneles por rol) */
#s-ok{background:var(--off-white);align-items:center;justify-content:center;padding:1.5rem;}
.ok-card{background:white;border-radius:20px;padding:2rem;box-shadow:var(--shadow-lg);text-align:center;max-width:360px;}
.ok-ico{width:64px;height:64px;border-radius:50%;background:var(--green-bg);border:2px solid var(--green-border);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;}
.ok-title{font-size:1.1rem;font-weight:800;color:var(--text);margin-bottom:0.3rem;}
.ok-sub{font-size:0.84rem;color:var(--text3);margin-bottom:1.2rem;}
.pass-wrap{position:relative;}
.pass-wrap .form-inp{padding-right:5rem;}
.pass-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--primary3);font-size:0.78rem;font-weight:600;cursor:pointer;padding:0.45rem 0.6rem;font-family:'Plus Jakarta Sans',sans-serif;}
.pass-toggle:hover{text-decoration:underline;}

/* ── MARCA INSPECTA SST ──
   Escudo + "INSPECTA SST" en todos los lugares donde va la marca de la
   plataforma (splash, login, topbars, barras laterales y páginas legales).
   El escudo es /brand/escudo-oscuro.svg (versión para fondo azul). */
.splash-wordmark,.wordmark,.tb-logo,.sidebar-brand,.mobile-bar-brand,.legal-marca{display:inline-flex;align-items:center;white-space:nowrap;}
.marca-escudo{height:1.3em;width:auto;margin-right:0.4em;flex-shrink:0;}
.splash-wordmark .marca-escudo,.wordmark .marca-escudo{height:1.25em;}
.splash-wordmark span,.wordmark span,.tb-logo span,.sidebar-brand span,.mobile-bar-brand span,.legal-marca span{margin-left:0.28em;}
/* Si la empresa subió su logo (barra lateral del Admin), se muestra el suyo
   y se oculta el escudo de la plataforma para no poner dos íconos seguidos. */
.tb-logo-img[src] + .marca-escudo{display:none;}