/* Global SST · Identidad AM Soluciones Integrales
   Paleta del logo: azul AM y amarillo casco. El amarillo es SEÑAL (lo activo, el foco, lo importante);
   el verde y el rojo se reservan para "cumple" y "falla". */
:root{
  --am-noche:#0B2257; --am:#153E90; --am-claro:#2C5BC4; --am-cielo:#E8EEFA; --am-y:#F2B705; --am-y-suave:#FFF4CC;
  --bg:#F4F6FB; --surface:#FFFFFF; --surface2:#F7F9FD; --ink:#13213F; --muted:#5B6782; --line:#DCE2EF;
  --rail:#0B2257; --rail-ink:#E6ECF9; --rail-muted:#93A6CF;
  --blue:#153E90; --blue-soft:#E8EEFA; --yellow:#D9A100; --yellow-soft:#FFF4CC;
  --r:10px; --r-sm:7px;
  --sombra:0 1px 2px rgba(19,33,63,.06),0 4px 14px rgba(19,33,63,.05);
  --sombra-alta:0 18px 50px rgba(11,34,87,.22);
  --ease:cubic-bezier(.22,.8,.24,1); --ease-rebote:cubic-bezier(.34,1.45,.5,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --am:#7EA2F2; --am-claro:#A9C1F7; --am-cielo:#18264A; --am-y:#F5C232; --am-y-suave:#3A3112;
  --bg:#0A1122; --surface:#111B31; --surface2:#16213B; --ink:#E7ECF7; --muted:#9FABC6; --line:#25324F;
  --rail:#070E1E; --rail-ink:#E6ECF9; --rail-muted:#7F92BD; --blue:#7EA2F2; --blue-soft:#18264A; --yellow:#F5C232; --yellow-soft:#3A3112;
  --sombra:0 1px 2px rgba(0,0,0,.3); --sombra-alta:0 18px 50px rgba(0,0,0,.55)}}
:root[data-theme="dark"]{
  --am:#7EA2F2; --am-claro:#A9C1F7; --am-cielo:#18264A; --am-y:#F5C232; --am-y-suave:#3A3112;
  --bg:#0A1122; --surface:#111B31; --surface2:#16213B; --ink:#E7ECF7; --muted:#9FABC6; --line:#25324F;
  --rail:#070E1E; --rail-ink:#E6ECF9; --rail-muted:#7F92BD; --blue:#7EA2F2; --blue-soft:#18264A; --yellow:#F5C232; --yellow-soft:#3A3112;
  --sombra:0 1px 2px rgba(0,0,0,.3); --sombra-alta:0 18px 50px rgba(0,0,0,.55)}

body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--am-y);color:#13213F}
:focus-visible{outline:2px solid var(--am-y);outline-offset:2px;border-radius:4px}

/* ---------- Menú lateral ---------- */
.app{background:linear-gradient(90deg,var(--rail) 248px,transparent 248px)}
.rail{background:
  radial-gradient(120% 60% at 0% 0%,rgba(44,91,196,.35),transparent 60%),
  linear-gradient(180deg,#0E2A6B 0%,var(--rail) 45%);
  position:sticky;scrollbar-width:thin;scrollbar-color:#ffffff22 transparent}
.brand{border-bottom:1px solid #ffffff14}
.brand b{letter-spacing:.01em}
.brand small{text-transform:none;letter-spacing:0;font-size:12px}
.brand-mark{background:#fff url(mascota.webp) 50% 18%/165% no-repeat;border:2px solid var(--am-y);width:42px;height:42px;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.brand-mark svg{display:none}
.brand:hover .brand-mark{animation:amSaluda .9s var(--ease)}
.navgroup h6{text-transform:none;letter-spacing:0;font-size:12px;font-weight:600}
.navgroup h6 i{border-radius:5px}
.navgroup{position:relative}
.navgroup a{border-radius:var(--r-sm);transition:background .18s var(--ease),color .18s,transform .18s var(--ease);position:relative}
.navgroup a:hover{background:#ffffff12;transform:translateX(2px)}
.navgroup a.on{background:linear-gradient(90deg,rgba(242,183,5,.16),rgba(255,255,255,.06));box-shadow:none;color:#fff;font-weight:600}
.navgroup a .ct.alert{color:#13213F;background:var(--am-y)}
/* Indicador amarillo que se desliza hasta la opción activa */
.am-ind{position:absolute;left:12px;width:3px;border-radius:3px;background:var(--am-y);box-shadow:0 0 12px rgba(242,183,5,.6);
  transition:top .32s var(--ease),height .32s var(--ease),opacity .2s;pointer-events:none;z-index:2}
.rail{position:sticky}
.empsw select{border-radius:var(--r-sm)}

/* ---------- Encabezado de cada página: la línea de casco se dibuja bajo el título ---------- */
.top h1{letter-spacing:.005em;position:relative;padding-bottom:10px}
.top h1::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:56px;border-radius:4px;background:var(--am-y);transform-origin:left}
.am-entra .top h1::after{animation:amLinea .6s .12s var(--ease) both}
.eyebrow{color:var(--am);text-transform:none;letter-spacing:0;font-size:13px}

/* ---------- Transición entre páginas (solo al cambiar de sección) ---------- */
.am-entra main>*:not(.am-firma){animation:amSube .42s var(--ease) both}
.am-entra main>*:nth-child(2){animation-delay:.04s}.am-entra main>*:nth-child(3){animation-delay:.08s}
.am-entra main>*:nth-child(4){animation-delay:.12s}.am-entra main>*:nth-child(n+5){animation-delay:.16s}

/* ---------- Botones ---------- */
.btn{border-radius:var(--r-sm);transition:background .16s,border-color .16s,box-shadow .2s var(--ease),transform .12s var(--ease),color .16s}
.btn:hover{border-color:var(--am);color:var(--am)}
.btn:active{transform:scale(.97)}
.btn.pri{background:var(--am);border-color:var(--am);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.15) inset,0 2px 6px rgba(21,62,144,.25)}
.btn.pri:hover{background:var(--am-claro);border-color:var(--am-claro);color:#fff;filter:none;box-shadow:0 6px 18px rgba(21,62,144,.32);transform:translateY(-1px)}
.btn.pri:active{transform:translateY(0) scale(.97)}
:root[data-theme="dark"] .btn.pri{color:#0A1122}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.pri{color:#0A1122}}
.btn.ghost:hover{background:var(--am-cielo);border-color:transparent}

/* ---------- Indicadores (KPI) y paneles ---------- */
.kpi{border-radius:var(--r);box-shadow:var(--sombra);transition:box-shadow .2s var(--ease),transform .2s var(--ease),border-color .2s;position:relative;overflow:hidden}
.kpi:hover{box-shadow:0 10px 26px rgba(19,33,63,.10);transform:translateY(-2px)}
.kpi .l{text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;color:var(--muted)}
.kpi .v{color:var(--ink)}
.kpi.crit,.kpi.warn,.kpi.ok{border-top-width:1px}
.kpi.crit::before,.kpi.warn::before,.kpi.ok::before{content:"";position:absolute;inset:0 auto 0 0;width:4px}
.kpi.crit::before{background:var(--red)}.kpi.warn::before{background:var(--am-y)}.kpi.ok::before{background:var(--green)}
.panel{border-radius:var(--r);box-shadow:var(--sombra)}
.panel h3{letter-spacing:.005em}
.empcard.cur{box-shadow:inset 0 3px 0 var(--am-y),var(--sombra)}
.empcard.add:hover,.reccard:hover{border-color:var(--am)}
.qtype input:checked+span{background:var(--am);border-color:var(--am)}
.cday.today{box-shadow:inset 0 0 0 2px var(--am)}
.msg.u{background:var(--am)}
.tabs button{transition:color .16s;border-bottom-width:3px}
.tabs button:hover{color:var(--ink)}
.tabs button.on{border-bottom-color:var(--am-y)}
.pill{border-radius:999px;padding:2px 9px}
.chip{border-radius:999px}

/* ---------- Tablas ---------- */
.tablewrap{border-radius:var(--r);box-shadow:var(--sombra)}
th{text-transform:none;letter-spacing:0;font-size:12.5px;background:var(--surface2);color:var(--muted)}
tbody tr{transition:background .14s}
tbody tr:hover{background:var(--am-cielo)}
th.curm{box-shadow:inset 0 -3px 0 var(--am-y)}

/* ---------- Ventanas y avisos ---------- */
.ov{backdrop-filter:blur(6px) saturate(1.1);-webkit-backdrop-filter:blur(6px);animation:amFundido .2s var(--ease) both}
.modal{border-radius:14px;box-shadow:var(--sombra-alta);animation:amAbre .28s var(--ease) both;border-color:var(--line)}
.modal header{position:relative}
.modal header::after{content:"";position:absolute;left:18px;bottom:-1px;width:44px;height:3px;border-radius:3px;background:var(--am-y)}
.toast{border-radius:10px;background:#13213F;color:#fff;box-shadow:var(--sombra-alta);padding:11px 16px 11px 14px;border-left:4px solid var(--am-y);animation:amToast .38s var(--ease-rebote) both}
.banner{border-radius:var(--r)}
input,select,textarea{transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--am)!important;box-shadow:0 0 0 3px rgba(21,62,144,.14)}

/* ---------- Firma de AM al final del menú ---------- */
.am-firma{margin:18px 6px 8px;padding-top:14px;border-top:1px solid #ffffff1f;text-align:center}
.am-firma img{width:118px;opacity:.95;transition:opacity .2s}
.am-firma img:hover{opacity:1}
.am-firma small{display:block;color:var(--rail-muted);font-size:11.5px;margin-top:6px;line-height:1.5}
.am-firma a{color:var(--rail-muted)}

/* ---------- Panel del propietario ---------- */
.am-prop{display:flex;align-items:center;gap:20px;color:#fff;border-radius:14px;padding:18px 22px;margin-bottom:18px;overflow:hidden;position:relative;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 14px,transparent 14px 28px),
    radial-gradient(90% 140% at 100% 0%,rgba(44,91,196,.9),transparent 60%),
    linear-gradient(120deg,#0B2257,#153E90);
  box-shadow:var(--sombra-alta)}
.am-prop::after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--am-y);transform-origin:left;animation:amLinea .8s .2s var(--ease) both}
.am-prop img.logo{height:54px;flex:none}
.am-prop img.buho{height:104px;margin:-12px 0 -22px auto;flex:none;animation:amFlota 3.6s ease-in-out infinite;filter:drop-shadow(0 10px 10px rgba(0,0,0,.3))}
.am-prop b{display:block;font-family:var(--f-display);font-size:22px;letter-spacing:.01em}
.am-prop span{opacity:.85;font-size:13.5px}

/* ---------- Mascota en pantallas vacías ---------- */
.am-vacio{display:flex;align-items:center;justify-content:center;gap:16px;color:var(--muted);font-size:14px;padding:6px 0;text-align:left}
.am-vacio img{width:68px;animation:amFlota 3.6s ease-in-out infinite}

/* ---------- Animaciones ---------- */
@keyframes amSube{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes amLinea{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes amFundido{from{opacity:0}to{opacity:1}}
@keyframes amAbre{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@keyframes amToast{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes amSaluda{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(10deg)}}
@keyframes amFlota{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(2deg)}}
@keyframes amBrillo{from{background-position:-200% 0}to{background-position:200% 0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media (max-width:560px){.am-prop img.buho{display:none}.am-prop img.logo{height:42px}.am-ind{display:none}}