/* ============================================================
   stl.css — Sistema STL SAS  v1.1
   Paleta empresarial: blanco + azul corporativo suave
   ============================================================ */

:root {
  --azul-oscuro:   #1e3a5f;
  --azul-medio:    #2563a8;
  --azul-claro:    #4a90d9;
  --azul-marino:   #1a2a40;
  --azul-sidebar:  #1e3a5f;
  --azul-sidebar2: #162d4a;
  --blanco:        #ffffff;
  --gris-fondo:    #f4f7fb;
  --gris-borde:    #dde3ee;
  --gris-texto:    #6b7a99;
  --gris-icono:    #a0aec0;
  --gris-claro:    #f8fafd;
  --verde:         #1a9e50;
  --verde-bg:      #e6f7ee;
  --amarillo:      #d4870a;
  --amarillo-bg:   #fff8e6;
  --rojo:          #c0392b;
  --rojo-bg:       #fdecea;
  --gris-sem:      #8a98b0;
  --sidebar-w:     245px;
  --header-h:      58px;
  --radius:        10px;
  --shadow-card:   0 2px 12px rgba(30,58,95,0.08);
  --shadow-sm:     0 1px 4px rgba(0,0,0,0.06);
  --transition:    .18s ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;scroll-behavior:smooth}
body{font-family:'Barlow','Segoe UI',Arial,sans-serif;background:var(--gris-fondo);color:var(--azul-marino);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--azul-medio);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}

/* SIDEBAR */
.sidebar{width:var(--sidebar-w);background:linear-gradient(180deg,var(--azul-sidebar) 0%,var(--azul-sidebar2) 100%);height:100vh;position:fixed;left:0;top:0;display:flex;flex-direction:column;z-index:100;transition:transform var(--transition);overflow-y:auto;overflow-x:hidden;border-right:1px solid rgba(255,255,255,0.06)}
.sidebar::-webkit-scrollbar{width:4px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2);border-radius:4px}
.sidebar::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.35)}
.sidebar-logo{padding:1.1rem 1rem .9rem;border-bottom:1px solid rgba(255,255,255,0.09);display:flex;align-items:center;gap:.7rem}
.sidebar-logo img{width:40px;height:40px;border-radius:8px;object-fit:contain;background:#fff;padding:3px}
.sidebar-logo-text{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.95rem;color:#fff;line-height:1.2}
.sidebar-logo-text small{display:block;font-size:.62rem;color:rgba(255,255,255,.5);font-weight:400;font-family:'Barlow',sans-serif}
.sidebar-user{padding:.75rem 1rem;border-bottom:1px solid rgba(255,255,255,0.07);font-size:.77rem;color:rgba(255,255,255,.55)}
.sidebar-user strong{display:block;color:#fff;font-size:.86rem;font-weight:600}
.badge-rol{display:inline-block;background:rgba(74,144,217,0.35);color:rgba(255,255,255,.9);font-size:.62rem;padding:.12rem .45rem;border-radius:20px;margin-top:.2rem;font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.nav-group{padding:.4rem 0}
.nav-group-label{padding:.55rem 1rem .25rem;font-size:.62rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.3)}
.nav-item{display:flex;align-items:center;gap:.6rem;padding:.55rem 1rem;color:rgba(255,255,255,.7);font-size:.85rem;font-weight:500;cursor:pointer;transition:background var(--transition),color var(--transition);text-decoration:none;position:relative;white-space:nowrap}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.nav-item.active{background:rgba(74,144,217,0.22);color:#fff;border-right:3px solid var(--azul-claro)}
.nav-icon{width:17px;height:17px;opacity:.75;flex-shrink:0}
.nav-item.active .nav-icon{opacity:1}
.sidebar-bottom{margin-top:auto;padding:.65rem;border-top:1px solid rgba(255,255,255,.07)}
.btn-logout{display:flex;align-items:center;gap:.45rem;width:100%;padding:.55rem .75rem;background:rgba(192,57,43,.12);color:#ff9a8e;border:1px solid rgba(192,57,43,.2);border-radius:8px;font-size:.8rem;font-weight:600;cursor:pointer;transition:background var(--transition)}
.btn-logout:hover{background:rgba(192,57,43,.25)}

/* LAYOUT */
.main-content{margin-left:var(--sidebar-w);flex:1;min-height:100vh;display:flex;flex-direction:column}
.top-header{height:var(--header-h);background:#fff;border-bottom:1px solid var(--gris-borde);display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;position:sticky;top:0;z-index:90;box-shadow:var(--shadow-sm)}
.header-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.15rem;color:var(--azul-oscuro)}
.header-actions{display:flex;align-items:center;gap:.6rem}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:.3rem;color:var(--azul-oscuro)}

/* BOTONES HEADER: ATRÁS y SALIR */
.btn-back{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .8rem;background:#f1f5fb;border:1px solid var(--gris-borde);border-radius:7px;font-size:.78rem;font-weight:600;color:var(--azul-oscuro);cursor:pointer;text-decoration:none;transition:background var(--transition)}
.btn-back:hover{background:#e4ecf7;text-decoration:none}
.btn-exit{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .8rem;background:#fdecea;border:1px solid #f5c6c2;border-radius:7px;font-size:.78rem;font-weight:600;color:#c0392b;cursor:pointer;text-decoration:none;transition:background var(--transition)}
.btn-exit:hover{background:#fcd9d6;text-decoration:none}

/* PAGE */
.page-content{padding:1.4rem;flex:1}
.page-header{margin-bottom:1.4rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem}
.page-title{font-family:'Barlow Condensed',sans-serif;font-size:1.5rem;font-weight:700;color:var(--azul-oscuro)}
.page-subtitle{font-size:.82rem;color:var(--gris-texto);margin-top:.1rem}
.page-actions{display:flex;gap:.5rem;flex-wrap:wrap}

/* CARDS */
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-card);padding:1.2rem 1.4rem;margin-bottom:1.2rem;border:1px solid var(--gris-borde)}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.9rem;padding-bottom:.7rem;border-bottom:2px solid var(--gris-fondo)}
.card-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.05rem;color:var(--azul-oscuro);display:flex;align-items:center;gap:.45rem}

/* KPI */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.9rem;margin-bottom:1.2rem}
.kpi-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-card);padding:1rem 1.2rem;border:1px solid var(--gris-borde);border-top:3px solid var(--azul-medio)}
.kpi-card.verde{border-top-color:var(--verde)}
.kpi-card.amarillo{border-top-color:var(--amarillo)}
.kpi-card.rojo{border-top-color:var(--rojo)}
.kpi-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--gris-texto);margin-bottom:.3rem}
.kpi-value{font-family:'Barlow Condensed',sans-serif;font-size:1.9rem;font-weight:800;color:var(--azul-oscuro);line-height:1}
.kpi-sub{font-size:.7rem;color:var(--gris-texto);margin-top:.2rem}

/* TABLAS */
.table-responsive{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.84rem}
thead th{background:var(--azul-oscuro);color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.3px;font-size:.8rem;padding:.6rem .85rem;text-align:left;white-space:nowrap}
thead.thead-soft th{background:var(--gris-fondo);color:var(--azul-oscuro);border-bottom:2px solid var(--azul-medio)}
tbody tr{border-bottom:1px solid var(--gris-borde)}
tbody tr:hover{background:#f7faff}
tbody td{padding:.58rem .85rem;vertical-align:middle}

/* SEMÁFORO — por DÍAS de inventario
   Bajo < 3 días (rojo) | Medio 3-9 días (amarillo) | Óptimo ≥ 10 días (verde) */
.semaforo{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;font-size:.78rem;padding:.22rem .6rem;border-radius:20px}
.semaforo::before{content:'●';font-size:.58rem}
.semaforo-verde   {background:var(--verde-bg);   color:var(--verde)}
.semaforo-amarillo{background:var(--amarillo-bg);color:var(--amarillo)}
.semaforo-rojo    {background:var(--rojo-bg);    color:var(--rojo)}
.semaforo-gris    {background:#f0f2f5;           color:var(--gris-sem)}

/* FORMULARIOS */
.form-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.9rem;margin-bottom:.9rem}
.form-field{display:flex;flex-direction:column;gap:.3rem}
.form-field label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--azul-oscuro)}
.form-field input,.form-field select,.form-field textarea{padding:.55rem .85rem;border:1.5px solid var(--gris-borde);border-radius:8px;font-size:.88rem;font-family:'Barlow',sans-serif;color:var(--azul-marino);background:#fff;transition:border-color var(--transition)}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--azul-medio);box-shadow:0 0 0 3px rgba(37,99,168,.1)}
.form-field textarea{resize:vertical;min-height:75px}
.form-field.full{grid-column:1/-1}

/* BOTONES */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1.05rem;border-radius:8px;font-size:.83rem;font-weight:600;font-family:'Barlow',sans-serif;cursor:pointer;border:none;transition:all var(--transition);text-decoration:none}
.btn:hover{transform:translateY(-1px);text-decoration:none}
.btn-primary{background:var(--azul-medio);color:#fff;box-shadow:0 2px 8px rgba(37,99,168,.22)}
.btn-primary:hover{background:var(--azul-oscuro)}
.btn-success{background:var(--verde);color:#fff}
.btn-success:hover{background:#158040}
.btn-danger{background:var(--rojo);color:#fff}
.btn-danger:hover{background:#a93226}
.btn-warning{background:var(--amarillo);color:#fff}
.btn-warning:hover{background:#b87009}
.btn-secondary{background:#fff;color:var(--azul-oscuro);border:1.5px solid var(--gris-borde)}
.btn-secondary:hover{background:var(--gris-fondo)}
.btn-outline{background:transparent;color:var(--azul-medio);border:1.5px solid var(--azul-medio)}
.btn-outline:hover{background:#eef4fb}
.btn-sm{padding:.3rem .7rem;font-size:.76rem}
.btn-lg{padding:.7rem 1.4rem;font-size:.95rem}

/* BADGES */
.badge{display:inline-block;padding:.18rem .55rem;border-radius:20px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.badge-blue{background:#dbeafe;color:#1e40af}
.badge-green{background:#dcfce7;color:#166534}
.badge-yellow{background:#fef9c3;color:#854d0e}
.badge-red{background:#fee2e2;color:#991b1b}
.badge-gray{background:#f1f5f9;color:#475569}
.badge-orange{background:#ffedd5;color:#9a3412}

/* ALERTAS */
.alert{padding:.8rem 1rem;border-radius:8px;font-size:.86rem;margin-bottom:1rem;display:flex;align-items:flex-start;gap:.55rem}
.alert-success{background:#e8f8ee;color:#186b37;border:1px solid #a8d9b8}
.alert-error  {background:#fdecea;color:#921b1b;border:1px solid #f0b8b3}
.alert-warning{background:#fff8e6;color:#8a5700;border:1px solid #f5d899}
.alert-info   {background:#eaf3fb;color:#1a4d7a;border:1px solid #aed1f0}

/* MODAL */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal{background:#fff;border-radius:var(--radius);box-shadow:0 20px 60px rgba(0,0,0,.2);width:100%;max-width:580px;max-height:90vh;overflow-y:auto;animation:modalIn .22s ease}
@keyframes modalIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.modal-header{padding:1rem 1.4rem;border-bottom:2px solid var(--gris-fondo);display:flex;align-items:center;justify-content:space-between}
.modal-header h3{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.15rem;color:var(--azul-oscuro)}
.modal-close{background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--gris-texto);line-height:1;padding:.2rem .4rem;border-radius:4px}
.modal-close:hover{background:var(--gris-fondo)}
.modal-body{padding:1.4rem}
.modal-footer{padding:.9rem 1.4rem;border-top:1px solid var(--gris-borde);display:flex;justify-content:flex-end;gap:.65rem}

/* FILTROS */
.filters-bar{display:flex;flex-wrap:wrap;gap:.7rem;align-items:flex-end;margin-bottom:1rem;padding:.9rem 1.1rem;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid var(--gris-borde)}
.filters-bar .form-field{margin:0;min-width:140px}

/* PROGRESS */
.progress-wrap{background:var(--gris-borde);border-radius:20px;height:7px;overflow:hidden}
.progress-bar{height:100%;border-radius:20px;background:var(--azul-medio);transition:width .4s ease}
.progress-bar.verde{background:var(--verde)}
.progress-bar.amarillo{background:var(--amarillo)}
.progress-bar.rojo{background:var(--rojo)}

/* TABS */
.tabs{display:flex;border-bottom:2px solid var(--gris-borde);margin-bottom:1.1rem}
.tab-btn{padding:.55rem 1.1rem;border:none;background:none;font-family:'Barlow',sans-serif;font-size:.85rem;font-weight:600;color:var(--gris-texto);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color var(--transition),border-color var(--transition)}
.tab-btn.active{color:var(--azul-oscuro);border-bottom-color:var(--azul-medio)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* TOAST */
#toast-container{position:fixed;bottom:1.4rem;right:1.4rem;z-index:999;display:flex;flex-direction:column;gap:.45rem}
.toast{padding:.75rem 1.1rem;border-radius:8px;font-size:.85rem;font-weight:600;box-shadow:0 4px 20px rgba(0,0,0,.12);display:flex;align-items:center;gap:.55rem;animation:toastIn .22s ease;min-width:250px}
@keyframes toastIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:translateX(0)}}
.toast-success{background:var(--verde);color:#fff}
.toast-error  {background:var(--rojo);color:#fff}
.toast-info   {background:var(--azul-medio);color:#fff}

/* EMPTY STATE */
.empty-state{text-align:center;padding:2.5rem 1rem;color:var(--gris-texto)}
.empty-state svg{margin-bottom:.8rem;opacity:.35}
.empty-state h3{font-size:1rem;margin-bottom:.4rem;color:var(--azul-oscuro)}

/* SIDEBAR OVERLAY */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:99}
.sidebar-overlay.open{display:block}

/* RESPONSIVE */
@media(max-width:768px){
  .sidebar{transform:translateX(-100%);width:255px}
  .sidebar.open{transform:translateX(0);box-shadow:4px 0 30px rgba(0,0,0,.2)}
  .main-content{margin-left:0}
  .hamburger{display:flex}
  .kpi-grid{grid-template-columns:1fr 1fr}
  .form-row{grid-template-columns:1fr}
  .page-header{flex-direction:column;align-items:flex-start}
  table{font-size:.76rem}
  thead th,tbody td{padding:.45rem .55rem}
  .modal{margin:1rem;max-width:calc(100% - 2rem)}
}
@media(max-width:480px){
  .kpi-grid{grid-template-columns:1fr}
  .page-content{padding:.9rem}
  .card{padding:.9rem}
}

/* UTILIDADES */
.text-center{text-align:center}.text-right{text-align:right}.text-sm{font-size:.78rem}
.text-muted{color:var(--gris-texto)}.font-bold{font-weight:700}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}
.flex-between{display:flex;justify-content:space-between;align-items:center}
.gap-1{gap:.5rem}.hidden{display:none!important}

/* LOGIN PAGE */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f4f7fb 0%,#e8eef7 100%);padding:1rem}
.login-card{background:#fff;border-radius:14px;box-shadow:0 8px 40px rgba(30,58,95,.12);padding:2.5rem 2.2rem;width:100%;max-width:400px;border:1px solid var(--gris-borde)}
.login-logo{text-align:center;margin-bottom:1.8rem}
.login-logo img{height:60px;object-fit:contain;margin-bottom:.8rem;display:block;margin-left:auto;margin-right:auto}
.login-logo h1{font-family:'Barlow Condensed',sans-serif;font-size:1.5rem;font-weight:800;color:var(--azul-oscuro)}
.login-logo p{font-size:.78rem;color:var(--gris-texto);margin-top:.2rem}