/* ==========================================================
   PAGE LOADER — barra superior + overlay con spinner
   ========================================================== */

/* Barra delgada en el tope (siempre visible durante carga) */
.page-loader {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 3px;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
}
.page-loader.active { opacity: 1; }
.page-loader-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #004987, #0070c0, #58a6ff);
    border-radius: 0 3px 3px 0;
    animation: none;
    transition: width .25s ease;
}
.page-loader.active .page-loader-bar {
    animation: loaderBar 1.8s ease-in-out infinite;
}
@keyframes loaderBar {
    0%   { width: 0%;   margin-left: 0; }
    50%  { width: 70%;  margin-left: 0; }
    100% { width: 0%;   margin-left: 100%; }
}

/* Overlay semi-transparente con tarjeta centrada */
.page-loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0,0,0,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
    backdrop-filter: blur(1px);
}
.page-loader-overlay.active {
    opacity: 1;
    pointer-events: all;
}
.page-loader-card {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: #fff;
    border-radius: 12px;
    padding: 1rem 1.6rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    font-size: .9rem;
    color: #1e2a3b;
    font-weight: 500;
    min-width: 220px;
}
.page-loader-spinner {
    width: 22px; height: 22px;
    border: 3px solid #dce6f0;
    border-top-color: #004987;
    border-radius: 50%;
    animation: loaderSpin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes loaderSpin {
    to { transform: rotate(360deg); }
}
/* Dark mode */
[data-theme="dark"] .page-loader-card {
    background: #1c2128;
    color: #cdd9e5;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
[data-theme="dark"] .page-loader-spinner {
    border-color: #30363d;
    border-top-color: #58a6ff;
}
[data-theme="dark"] .page-loader-overlay {
    background: rgba(0,0,0,.4);
}

/* ==========================================================
   SISTEMA ELAM FAW - Estilos personalizados
   Paleta institucional:
     Primario:   #004987  (azul marino ELAM FAW)
     Oscuro:     #003366
     Acento:     #0070c0
     Fondo:      #f4f7fb
     Texto:      #1e2a3b
   ========================================================== */

:root{
    --bg:           #FFFFFF;
    --text:         #1e2a3b;
    --primary:      #004987;
    --primary-dark: #003366;
    --primary-light:#e8f0f9;
    --secondary:    #6b7a90;
    --accent:       #0070c0;
    --border:       #dce6f0;
    --light:        #f4f7fb;
    --sidebar-w:    260px;
}

*{ box-sizing:border-box; }

html, body{
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,sans-serif;
    font-size: 14px;
}

a{ color: var(--primary); text-decoration:none; }
a:hover{ color: var(--accent); }

/* Bootstrap overrides */
.btn-primary{ background: var(--primary); border-color: var(--primary); color:#fff; }
.btn-primary:hover, .btn-primary:focus{ background: var(--primary-dark); border-color: var(--primary-dark); color:#fff; }
.btn-outline-primary{ color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover{ background: var(--primary); border-color: var(--primary); color:#fff; }
.btn-outline-secondary{ color: var(--secondary); border-color: var(--secondary); }
.btn-outline-secondary:hover{ background: var(--secondary); border-color: var(--secondary); color:#fff; }
.text-primary{ color: var(--primary) !important; }
.bg-primary{ background-color: var(--primary) !important; }

.card, .table-responsive, .form-control, .form-select{
    box-shadow: none !important;
}
.card{ border:1px solid var(--border); border-radius: 8px; }
.form-control, .form-select{
    border:1px solid var(--border);
    border-radius: 6px;
}
.form-control:focus, .form-select:focus{
    border-color: var(--primary);
    box-shadow: 0 0 0 .15rem rgba(0,73,135,.15);
}

/* ==================== LAYOUT ==================== */
.layout{ display:flex; min-height:100vh; }

.sidebar{
    width: var(--sidebar-w);
    background: #003366;
    color: #c8d8ea;
    border-right: none;
    display:flex;
    flex-direction: column;
    position: fixed; top:0; bottom:0; left:0;
    transform: translateX(0);
    transition: transform .25s ease;
    z-index: 1040;
}
.sidebar-header{
    padding: 1.1rem 1.2rem;
    border-bottom: 1px solid rgba(255,255,255,.1);
    display:flex; justify-content: space-between; align-items:center;
    min-height: 64px;
}
.brand{ display:flex; align-items:center; }
.brand-logo{ height: 30px; width: auto; filter: brightness(0) invert(1); }

.sidebar-nav{
    flex:1; overflow-y:auto;
    padding: .5rem 0;
}
.sidebar-nav::-webkit-scrollbar{ width:4px; }
.sidebar-nav::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.15); border-radius:4px; }

.nav-link-main{
    display:flex; align-items:center; gap:.6rem;
    padding: .65rem 1.2rem;
    color: #c8d8ea;
    border-left: 3px solid transparent;
    font-size: .92rem;
    transition: background .15s, color .15s;
}
.nav-link-main:hover{
    color:#fff;
    background: rgba(255,255,255,.08);
    border-left-color: var(--accent);
}
.nav-group{ }
.nav-group-toggle{
    width: 100%;
    background: transparent;
    border: none;
    text-align:left;
    color:#c8d8ea;
    padding: .65rem 1.2rem;
    display:flex; align-items:center; gap:.6rem;
    font-size: .92rem;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s;
}
.nav-group-toggle:hover{
    color:#fff; background: rgba(255,255,255,.08);
    border-left-color: var(--accent);
}
.nav-group-toggle .chev{ margin-left:auto; transition: transform .2s; font-size:.75rem; }
.nav-group-toggle[aria-expanded="true"] .chev{ transform: rotate(180deg); }

.nav-group-items{
    background: rgba(0,0,0,.18);
    overflow: hidden;
    max-height: 600px;
    transition: max-height .28s ease;
}
.nav-group-items--closed{
    max-height: 0;
}
.nav-link-sub{
    display:flex; align-items:center; gap:.55rem;
    padding: .52rem 1.2rem .52rem 2.4rem;
    color:#a8bdd1; font-size:.88rem;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s;
}
.nav-link-sub:hover{
    background: rgba(255,255,255,.07); color:#fff;
    border-left-color: var(--accent);
}
.nav-link-sub.active{
    background: rgba(255,255,255,.11);
    color: #fff;
    border-left-color: var(--accent);
    font-weight: 600;
}
.nav-group-toggle.active{
    color: #fff;
    background: rgba(255,255,255,.06);
    border-left-color: var(--accent);
}

.sidebar-footer{
    padding: .9rem 1.2rem;
    border-top: 1px solid rgba(255,255,255,.1);
}
.user-info{ display:flex; gap:.6rem; align-items:center; color:#fff; padding:.4rem; border-radius:6px; }
.user-info:hover{ background: rgba(255,255,255,.08); color:#fff; }
.user-info img{ flex-shrink:0; }
.user-info .u-name{ font-weight:600; font-size:.9rem; color:#fff; line-height:1.1; }
.user-info .u-rol{ font-size:.75rem; color: #a8bdd1; }
.user-info .u-dist{
    display:inline-flex; align-items:center; gap:.3rem;
    margin-top:.35rem; font-size:.72rem; font-weight:600;
    background: rgba(255,255,255,.15); color:#fff;
    border: 1px solid rgba(255,255,255,.25);
    border-radius:20px; padding:.15rem .6rem;
    line-height:1.4; white-space:nowrap; overflow:hidden;
    text-overflow:ellipsis; max-width:160px;
}

.btn-close-sidebar{
    background: transparent; border:0; color:#fff; font-size:1.1rem;
}
.btn-outline-light{ border-color: rgba(255,255,255,.3); color:#fff; }
.btn-outline-light:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); color:#fff; }

/* ==================== MAIN ==================== */
.main-wrapper{
    flex:1;
    margin-left: var(--sidebar-w);
    min-height: 100vh;
    display:flex; flex-direction:column;
    background: var(--light);
}
.topbar{
    height: 60px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    display:flex; align-items:center;
    padding: 0 1.2rem; gap:.8rem;
    position: sticky; top:0; z-index: 1020;
    box-shadow: 0 1px 4px rgba(0,73,135,.06);
}
.btn-toggle-sidebar{
    background: transparent; border:1px solid var(--border);
    width:38px; height:38px; border-radius:6px;
    color: var(--text); font-size: 1.1rem;
    display:none;
}
.topbar-title{ font-weight: 600; color: var(--primary); font-size: 1rem; }
.topbar-user{ margin-left:auto; gap:.5rem; align-items:center; color: var(--secondary); }
.topbar-user i{ color: var(--primary); font-size: 1.3rem; }

.content{
    flex:1;
    padding: 1.5rem;
}
.footer{
    border-top:1px solid var(--border);
    padding: .8rem 1.5rem;
    color: var(--secondary);
    background: #fff;
    text-align:center;
}

/* ==================== UTILIDADES ==================== */
.page-header{
    display:flex; justify-content: space-between; align-items: center;
    margin-bottom: 1.2rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--border);
}
.page-header h1{
    font-size: 1.3rem; margin:0; color: var(--primary); font-weight: 600;
}

.table thead th{
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
    border-bottom: 2px solid var(--border);
}
.table td, .table th{ vertical-align: middle; }

.badge-rol-admin{ background: var(--primary); }
.badge-rol-user{ background: var(--secondary); }

/* ==================== AUTH ==================== */
.auth-body{
    background: radial-gradient(ellipse at 65% 40%, #004987 0%, #002855 55%, #001a3d 100%);
    min-height: 100vh;
    display:flex; align-items:center; justify-content:center;
    padding: 1.5rem;
}
.auth-card{
    width: 100%; max-width: 420px;
    background: #fff;
    border-radius: 16px;
    padding: 2.4rem 2rem 2rem;
    box-shadow: 0 24px 64px rgba(0,0,0,.38), 0 2px 8px rgba(0,73,135,.18);
}
.auth-logo{
    display:block; margin: 0 auto 1.8rem;
    height: 36px; width: auto;
}
.auth-title{
    text-align:center;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--primary);
    text-transform: uppercase;
    margin-bottom: 1.6rem;
}
.auth-divider{ border:none; border-top:1px solid var(--border); margin: 1.4rem 0 1.1rem; }

/* Inputs con ícono flotante */
.auth-input-wrap{ position:relative; margin-bottom: .9rem; }
.auth-input-wrap .auth-icon{
    position:absolute; left:13px; top:50%; transform:translateY(-50%);
    color: var(--secondary); font-size:.95rem; pointer-events:none;
    z-index:2;
}
.auth-input-wrap input.form-control{
    padding-left: 2.5rem;
    background: #f0f5fb;
    border: 1.5px solid transparent;
    border-radius: 8px;
    height: 44px;
    font-size: .93rem;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.auth-input-wrap input.form-control:focus{
    background: #fff;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0,73,135,.12);
}
.auth-input-wrap input.form-control::placeholder{ color: #a0aec0; }

/* Toggle mostrar/ocultar contraseña */
.auth-eye{
    position:absolute; right:9px; top:50%; transform:translateY(-50%);
    background: none; border: none; color: var(--secondary);
    cursor: pointer; padding: 5px 7px; border-radius: 5px; z-index:2;
    transition: color .15s;
}
.auth-eye:hover{ color: var(--primary); }

/* Checkbox recordarme */
.auth-remember{ display:flex; align-items:center; gap:.5rem; margin-bottom:1.1rem; }
.auth-remember input[type="checkbox"]{ accent-color: var(--primary); width:15px; height:15px; cursor:pointer; }
.auth-remember label{ font-size:.85rem; color: var(--secondary); margin:0; cursor:pointer; }

/* Botón submit */
.btn-auth{
    display:block; width:100%;
    background: var(--primary); color:#fff;
    border: none; border-radius: 8px;
    padding: .78rem; font-weight: 600;
    font-size: .95rem; letter-spacing: .05em;
    cursor: pointer;
    transition: background .2s, transform .1s;
}
.btn-auth:hover{ background: var(--primary-dark); color:#fff; }
.btn-auth:active{ transform: scale(.98); }

/* Links de auth */
.auth-link{
    display:block; text-align:center;
    font-size: .84rem; color: var(--secondary);
    text-decoration: none;
    transition: color .15s;
}
.auth-link:hover{ color: var(--primary); }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 991.98px){
    .sidebar{
        transform: translateX(-100%);
    }
    .sidebar.open{
        transform: translateX(0);
    }
    .main-wrapper{ margin-left:0; }
    .btn-toggle-sidebar{ display:inline-flex; align-items:center; justify-content:center; }
    .sidebar-overlay{
        position:fixed; inset:0; background: rgba(0,0,0,.45);
        z-index: 1030; display:none;
    }
    .sidebar-overlay.open{ display:block; }
}


/* ==================== DARK MODE ==================== */
/*
   Paleta inspirada en GitHub Dark / Phoenix Dark:
   Fondo base:    #0d1117  (negro azulado profundo)
   Superficie 1:  #161b22  (cards, drawer)
   Superficie 2:  #1c2128  (topbar, footer, inputs hover)
   Superficie 3:  #21262d  (hover rows, striped)
   Borde:         #30363d
   Texto primary: #e6edf3
   Texto muted:   #8b949e
   Texto dim:     #6e7681
   Acento azul:   #58a6ff
*/
[data-theme="dark"]{
    --bg:           #0d1117;
    --text:         #e6edf3;
    --primary:      #58a6ff;
    --primary-dark: #388bfd;
    --primary-light:#1c2d42;
    --secondary:    #8b949e;
    --accent:       #79c0ff;
    --border:       #30363d;
    --light:        #161b22;
}

/* --- Sidebar --- */
[data-theme="dark"] .sidebar           { background: #0a1628; }
[data-theme="dark"] .sidebar-header    { border-bottom-color: rgba(255,255,255,.07); }
[data-theme="dark"] .nav-link-main     { color: #8b949e; border-left-color: transparent; }
[data-theme="dark"] .nav-link-main:hover {
    background: rgba(88,166,255,.1);
    color: #e6edf3;
    border-left-color: #58a6ff;
}
[data-theme="dark"] .nav-group-toggle  { color: #8b949e; border-left-color: transparent; }
[data-theme="dark"] .nav-group-toggle:hover {
    background: rgba(88,166,255,.1);
    color: #e6edf3;
    border-left-color: #58a6ff;
}
[data-theme="dark"] .nav-group-items   { background: rgba(0,0,0,.3); }
[data-theme="dark"] .nav-link-sub      { color: #6e7681; border-left-color: transparent; }
[data-theme="dark"] .nav-link-sub.active {
    background: rgba(88,166,255,.12);
    color: #58a6ff;
    border-left-color: #58a6ff;
}
[data-theme="dark"] .nav-group-toggle.active {
    color: #cdd9e5;
    background: rgba(88,166,255,.07);
    border-left-color: #58a6ff;
}
[data-theme="dark"] .nav-link-sub:hover {
    background: rgba(88,166,255,.08);
    color: #e6edf3;
    border-left-color: #58a6ff;
}
[data-theme="dark"] .sidebar-footer    { border-top-color: rgba(255,255,255,.07); }
[data-theme="dark"] .user-info .u-name { color: #e6edf3; }
[data-theme="dark"] .user-info .u-rol  { color: #6e7681; }
[data-theme="dark"] .user-info:hover   { background: rgba(255,255,255,.06); }
[data-theme="dark"] .user-info .u-dist { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); color: #c9d1d9; }

/* --- Layout base --- */
[data-theme="dark"] body               { background: var(--bg); color: var(--text); }
[data-theme="dark"] .main-wrapper      { background: var(--bg); }
[data-theme="dark"] .content           { background: var(--bg); }

/* --- Topbar --- */
[data-theme="dark"] .topbar {
    background: #161b22;
    border-bottom-color: #21262d;
    box-shadow: 0 1px 0 #21262d;
}
[data-theme="dark"] .topbar-title      { color: #e6edf3; }
[data-theme="dark"] .btn-toggle-sidebar { border-color: #30363d; color: #8b949e; background: transparent; }
[data-theme="dark"] .btn-toggle-sidebar:hover { background: #21262d; color: #e6edf3; }

/* --- Footer --- */
[data-theme="dark"] .footer {
    background: #161b22;
    border-top-color: #21262d;
    color: #6e7681;
}

/* --- Cards --- */
[data-theme="dark"] .card {
    background: #161b22;
    border-color: #30363d;
    color: var(--text);
    box-shadow: 0 1px 3px rgba(0,0,0,.4) !important;
}
[data-theme="dark"] .card-header {
    background: #1c2128 !important;
    border-bottom-color: #21262d;
    color: #e6edf3;
    font-weight: 600;
}
[data-theme="dark"] .card-body         { background: #161b22; color: var(--text); }
[data-theme="dark"] .card-footer       { background: #1c2128; border-top-color: #21262d; color: #8b949e; }

/* --- Tablas --- */
[data-theme="dark"] .table {
    /* Color explícito + variables internas de Bootstrap 5 para pisar herencia */
    color:                   #e6edf3;
    --bs-table-color:        #e6edf3;
    --bs-table-striped-color:#e6edf3;
    --bs-table-hover-color:  #e6edf3;
    --bs-table-active-color: #e6edf3;
    --bs-table-bg:           transparent;
    --bs-table-striped-bg:   #0f1419;
    --bs-table-hover-bg:     #1c2128;
    --bs-table-active-bg:    #1c2128;
    --bs-table-border-color: #21262d;
}
[data-theme="dark"] .table td,
[data-theme="dark"] .table th          { color: #e6edf3; border-color: #21262d; }
[data-theme="dark"] .table thead th {
    background: #1c2128;
    color: #8b949e;
    border-bottom: 2px solid #30363d;
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}
[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background: #1c2128;
    color: var(--text);
    --bs-table-accent-bg: #1c2128;
}
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background: #0f1419;
    color: var(--text);
    --bs-table-accent-bg: #0f1419;
}

/* --- Formularios --- */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background: #0d1117;
    border-color: #30363d;
    color: #e6edf3;
    box-shadow: none !important;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background: #0d1117;
    border-color: #58a6ff;
    box-shadow: 0 0 0 3px rgba(88,166,255,.15) !important;
    color: #e6edf3;
}
[data-theme="dark"] .form-control::placeholder { color: #484f58; }
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly]    { background: #161b22; color: #6e7681; }
[data-theme="dark"] .form-label                { color: #cdd9e5; }
[data-theme="dark"] .form-text                 { color: #8b949e; }
[data-theme="dark"] .form-check-label          { color: #cdd9e5; }
[data-theme="dark"] .form-check-input          { background-color: #0d1117; border-color: #30363d; }
[data-theme="dark"] .form-check-input:checked  { background-color: #58a6ff; border-color: #58a6ff; }
[data-theme="dark"] .input-group-text {
    background: #161b22;
    border-color: #30363d;
    color: #8b949e;
}

/* --- Botones --- */
[data-theme="dark"] .btn-primary               { background: #1f6feb; border-color: #388bfd; color: #fff; }
[data-theme="dark"] .btn-primary:hover         { background: #388bfd; border-color: #58a6ff; color: #fff; }
[data-theme="dark"] .btn-outline-primary       { color: #58a6ff; border-color: #388bfd; }
[data-theme="dark"] .btn-outline-primary:hover { background: rgba(56,139,253,.15); color: #79c0ff; border-color: #58a6ff; }
[data-theme="dark"] .btn-outline-secondary     { color: #8b949e; border-color: #30363d; }
[data-theme="dark"] .btn-outline-secondary:hover { background: #21262d; color: #cdd9e5; border-color: #8b949e; }
[data-theme="dark"] .btn-outline-danger        { color: #f85149; border-color: #da3633; }
[data-theme="dark"] .btn-outline-danger:hover  { background: rgba(248,81,73,.15); color: #ff7b72; border-color: #f85149; }
[data-theme="dark"] .btn-outline-light         { border-color: rgba(255,255,255,.2); color: #cdd9e5; }
[data-theme="dark"] .btn-outline-light:hover   { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.35); }

/* --- Badges --- */
[data-theme="dark"] .badge.bg-success  { background: #1a4731 !important; color: #3fb950; border: 1px solid #238636; }
[data-theme="dark"] .badge.bg-secondary{ background: #21262d !important; color: #8b949e;  border: 1px solid #30363d; }
[data-theme="dark"] .badge.bg-danger   { background: #3d1f1f !important; color: #f85149;  border: 1px solid #da3633; }
[data-theme="dark"] .badge.bg-warning  { background: #2d2008 !important; color: #d29922;  border: 1px solid #9e6a03; }
[data-theme="dark"] .badge-rol-admin   { background: #1a3a5c !important; color: #79c0ff;  border: 1px solid #388bfd; }
[data-theme="dark"] .badge-rol-user    { background: #21262d !important; color: #8b949e; }

/* --- Textos, enlaces, bordes --- */
[data-theme="dark"] .text-muted        { color: #8b949e !important; }
[data-theme="dark"] .text-primary      { color: #58a6ff !important; }
[data-theme="dark"] a                  { color: #58a6ff; }
[data-theme="dark"] a:hover            { color: #79c0ff; }
[data-theme="dark"] .page-header       { border-color: #21262d; }
[data-theme="dark"] .page-header h1    { color: #e6edf3; }
[data-theme="dark"] hr                 { border-color: #21262d; opacity: 1; }
[data-theme="dark"] code               { background: #1c2128; color: #79c0ff; border: 1px solid #30363d; }
[data-theme="dark"] .border,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-top        { border-color: #30363d !important; }

/* --- Modales --- */
[data-theme="dark"] .modal-content     { background: #161b22; color: var(--text); border-color: #30363d; }
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer      { background: #1c2128; border-color: #21262d; }
[data-theme="dark"] .btn-close         { filter: invert(1) grayscale(1) brightness(2); }

/* --- Dropdowns --- */
[data-theme="dark"] .dropdown-menu     { background: #1c2128; border-color: #30363d; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
[data-theme="dark"] .dropdown-item     { color: #cdd9e5; }
[data-theme="dark"] .dropdown-item:hover { background: #21262d; color: #e6edf3; }
[data-theme="dark"] .dropdown-divider  { border-color: #21262d; }

/* --- Alerts --- */
[data-theme="dark"] .alert-info        { background: #1c2d42; border-color: #1f6feb; color: #79c0ff; }
[data-theme="dark"] .alert-success     { background: #1a4731; border-color: #238636; color: #3fb950; }
[data-theme="dark"] .alert-danger      { background: #3d1f1f; border-color: #da3633; color: #ff7b72; }
[data-theme="dark"] .alert-warning     { background: #2d2008; border-color: #9e6a03; color: #d29922; }

/* --- Misc --- */
[data-theme="dark"] .bg-white          { background: #161b22 !important; }
[data-theme="dark"] .bg-light          { background: #1c2128 !important; }

/* ==================== BOTÓN TEMA SOL / LUNA ==================== */
.theme-icon-btn {
    background: none;
    border: none;
    width: 34px; height: 34px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 1.05rem;
    color: #6b7a90;
    transition: background .15s, color .15s;
    flex-shrink: 0;
    padding: 0;
}
.theme-icon-btn:hover                  { background: var(--primary-light); color: var(--primary); }

/* En modo claro: sol visible, luna oculta */
#themeIconSun                          { display: block; color: #f59e0b; }
#themeIconMoon                         { display: none; }

/* En modo oscuro: luna visible, sol oculto */
[data-theme="dark"] .theme-icon-btn    { color: #8b949e; }
[data-theme="dark"] .theme-icon-btn:hover { background: #21262d; }
[data-theme="dark"] #themeIconSun      { display: none; }
[data-theme="dark"] #themeIconMoon     { display: block; color: #79c0ff; }

/* ==================== DATATABLE ==================== */
.dt-toolbar {
    margin-bottom: .75rem;
}
.dt-toolbar-top {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-bottom: .5rem;
}
.dt-toolbar-bot {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    justify-content: space-between;
}

/* Búsqueda */
.dt-search-wrap {
    position: relative;
    flex: 1 1 180px;
    max-width: 280px;
}
.dt-search-icon {
    position: absolute;
    left: .65rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--secondary);
    pointer-events: none;
    font-size: .85rem;
}
.dt-search {
    width: 100%;
    padding: .35rem .75rem .35rem 2rem;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: .85rem;
    background: var(--surface);
    color: var(--text);
    transition: border-color .15s, box-shadow .15s;
}
.dt-search:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0,73,135,.15);
}

/* Filtros */
.dt-filters-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.dt-filter-select {
    padding: .35rem .65rem;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: .82rem;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: border-color .15s;
}
.dt-filter-select:focus {
    outline: none;
    border-color: var(--primary);
}

/* Contador */
.dt-counter {
    font-size: .8rem;
    color: var(--secondary);
}

/* Filas por página */
.dt-pagesize-wrap {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    color: var(--secondary);
}
.dt-pagesize-select {
    padding: .25rem .4rem;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: .82rem;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}
.dt-pagesize-select:focus { outline: none; border-color: var(--primary); }

/* Paginador */
.dt-pagination {
    display: flex;
    align-items: center;
    gap: .2rem;
}
.dt-page-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 .4rem;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font-size: .82rem;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    display: inline-flex; align-items: center; justify-content: center;
}
.dt-page-btn:hover:not(:disabled) {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}
.dt-page-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 600;
}
.dt-page-btn:disabled {
    opacity: .4;
    cursor: default;
}
.dt-page-ellipsis {
    font-size: .82rem;
    color: var(--secondary);
    padding: 0 .15rem;
}

/* Sort icon */
.dt-sort-icon { display: inline-block; }


/* ==========================================================
   BADGES DE VEHÍCULO — colores por grupo (refacciones)
   14 familias de color, 3 variantes dentro de grupos grandes.
   Aplicados vía clase dinámica en RefaccionesController::listar()
   ========================================================== */

/* — Azul (grupo 01) */
.veh-blue-1  { background:#dbeafe; color:#1d4ed8; border:1px solid #bfdbfe; }
.veh-blue-2  { background:#bfdbfe; color:#1e40af; border:1px solid #93c5fd; }
.veh-blue-3  { background:#93c5fd; color:#1e3a8a; border:1px solid #60a5fa; }

/* — Verde (grupo 02) */
.veh-green-1 { background:#dcfce7; color:#15803d; border:1px solid #bbf7d0; }
.veh-green-2 { background:#bbf7d0; color:#166534; border:1px solid #86efac; }
.veh-green-3 { background:#86efac; color:#14532d; border:1px solid #4ade80; }

/* — Naranja (grupo 03) */
.veh-orange-1{ background:#ffedd5; color:#c2410c; border:1px solid #fed7aa; }
.veh-orange-2{ background:#fed7aa; color:#9a3412; border:1px solid #fdba74; }
.veh-orange-3{ background:#fdba74; color:#7c2d12; border:1px solid #fb923c; }

/* — Rojo (grupo 04) */
.veh-red-1   { background:#fee2e2; color:#dc2626; border:1px solid #fecaca; }
.veh-red-2   { background:#fecaca; color:#b91c1c; border:1px solid #fca5a5; }
.veh-red-3   { background:#fca5a5; color:#991b1b; border:1px solid #f87171; }

/* — Morado (grupo 05) */
.veh-purple-1{ background:#ede9fe; color:#7c3aed; border:1px solid #ddd6fe; }
.veh-purple-2{ background:#ddd6fe; color:#6d28d9; border:1px solid #c4b5fd; }
.veh-purple-3{ background:#c4b5fd; color:#5b21b6; border:1px solid #a78bfa; }

/* — Gris (grupo 06) */
.veh-gray-1  { background:#f1f5f9; color:#475569; border:1px solid #e2e8f0; }

/* — Cian (grupo 07) */
.veh-cyan-1  { background:#cffafe; color:#0e7490; border:1px solid #a5f3fc; }
.veh-cyan-2  { background:#a5f3fc; color:#0c6270; border:1px solid #67e8f9; }
.veh-cyan-3  { background:#67e8f9; color:#0a5460; border:1px solid #22d3ee; }

/* — Amarillo (grupo 08) */
.veh-yellow-1{ background:#fef9c3; color:#a16207; border:1px solid #fef08a; }
.veh-yellow-2{ background:#fef08a; color:#854d0e; border:1px solid #fde047; }

/* — Lima (grupo 09) */
.veh-lime-1  { background:#ecfccb; color:#4d7c0f; border:1px solid #d9f99d; }

/* — Índigo (grupo 10) */
.veh-indigo-1{ background:#e0e7ff; color:#4338ca; border:1px solid #c7d2fe; }

/* — Rosa (grupo 11) */
.veh-pink-1  { background:#fce7f3; color:#be185d; border:1px solid #fbcfe8; }

/* — Tierra (grupo 12) */
.veh-brown-1 { background:#fef3c7; color:#92400e; border:1px solid #fde68a; }

/* — Aguamarina (grupo 13) */
.veh-teal-1  { background:#ccfbf1; color:#0f766e; border:1px solid #99f6e4; }

/* — Oliva (grupo 14) */
.veh-olive-1 { background:#ecfccb; color:#3f6212; border:1px solid #bef264; }

/* ── Dark mode ─────────────────────────────────────────── */
[data-theme="dark"] .veh-blue-1   { background:#1e3a5f; color:#93c5fd; border-color:#1d4ed8; }
[data-theme="dark"] .veh-blue-2   { background:#1e3a8a; color:#bfdbfe; border-color:#2563eb; }
[data-theme="dark"] .veh-blue-3   { background:#172554; color:#dbeafe; border-color:#1d4ed8; }

[data-theme="dark"] .veh-green-1  { background:#052e16; color:#86efac; border-color:#15803d; }
[data-theme="dark"] .veh-green-2  { background:#14532d; color:#bbf7d0; border-color:#16a34a; }
[data-theme="dark"] .veh-green-3  { background:#166534; color:#dcfce7; border-color:#22c55e; }

[data-theme="dark"] .veh-orange-1 { background:#431407; color:#fdba74; border-color:#c2410c; }
[data-theme="dark"] .veh-orange-2 { background:#7c2d12; color:#fed7aa; border-color:#ea580c; }
[data-theme="dark"] .veh-orange-3 { background:#9a3412; color:#ffedd5; border-color:#f97316; }

[data-theme="dark"] .veh-red-1    { background:#450a0a; color:#fca5a5; border-color:#dc2626; }
[data-theme="dark"] .veh-red-2    { background:#7f1d1d; color:#fecaca; border-color:#ef4444; }
[data-theme="dark"] .veh-red-3    { background:#991b1b; color:#fee2e2; border-color:#f87171; }

[data-theme="dark"] .veh-purple-1 { background:#2e1065; color:#c4b5fd; border-color:#7c3aed; }
[data-theme="dark"] .veh-purple-2 { background:#4c1d95; color:#ddd6fe; border-color:#8b5cf6; }
[data-theme="dark"] .veh-purple-3 { background:#5b21b6; color:#ede9fe; border-color:#a78bfa; }

[data-theme="dark"] .veh-gray-1   { background:#1e2530; color:#94a3b8; border-color:#334155; }

[data-theme="dark"] .veh-cyan-1   { background:#083344; color:#67e8f9; border-color:#0e7490; }
[data-theme="dark"] .veh-cyan-2   { background:#164e63; color:#a5f3fc; border-color:#0891b2; }
[data-theme="dark"] .veh-cyan-3   { background:#155e75; color:#cffafe; border-color:#06b6d4; }

[data-theme="dark"] .veh-yellow-1 { background:#422006; color:#fde047; border-color:#a16207; }
[data-theme="dark"] .veh-yellow-2 { background:#713f12; color:#fef08a; border-color:#ca8a04; }

[data-theme="dark"] .veh-lime-1   { background:#1a2e05; color:#d9f99d; border-color:#4d7c0f; }

[data-theme="dark"] .veh-indigo-1 { background:#1e1b4b; color:#c7d2fe; border-color:#4338ca; }

[data-theme="dark"] .veh-pink-1   { background:#500724; color:#fbcfe8; border-color:#be185d; }

[data-theme="dark"] .veh-brown-1  { background:#451a03; color:#fde68a; border-color:#92400e; }

[data-theme="dark"] .veh-teal-1   { background:#042f2e; color:#99f6e4; border-color:#0f766e; }

[data-theme="dark"] .veh-olive-1  { background:#1a2e05; color:#bef264; border-color:#3f6212; }

/* --- Dark mode overrides --- */
[data-theme="dark"] .dt-search,
[data-theme="dark"] .dt-filter-select,
[data-theme="dark"] .dt-pagesize-select {
    background: #1c2128;
    color: #cdd9e5;
    border-color: #30363d;
}
[data-theme="dark"] .dt-search:focus,
[data-theme="dark"] .dt-filter-select:focus,
[data-theme="dark"] .dt-pagesize-select:focus {
    border-color: #58a6ff;
    box-shadow: 0 0 0 3px rgba(88,166,255,.15);
}
[data-theme="dark"] .dt-page-btn {
    background: #1c2128;
    color: #cdd9e5;
    border-color: #30363d;
}
[data-theme="dark"] .dt-page-btn:hover:not(:disabled) {
    background: #21262d;
    border-color: #58a6ff;
    color: #58a6ff;
}
[data-theme="dark"] .dt-page-btn.active {
    background: #1f6feb;
    border-color: #1f6feb;
    color: #fff;
}
[data-theme="dark"] .dt-counter,
[data-theme="dark"] .dt-pagesize-wrap,
[data-theme="dark"] .dt-page-ellipsis { color: #8b949e; }

/* ── Botón limpiar filtros (datatable global) ─────────── */
.dt-clear-btn {
    display: none;
    align-items: center;
    gap: .3rem;
    background: transparent;
    border: 1px solid #dc3545;
    color: #dc3545;
    border-radius: 6px;
    padding: .28rem .7rem;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
    line-height: 1.4;
}
.dt-clear-btn.visible { display: inline-flex; }
.dt-clear-btn:hover   { background: #dc3545; color: #fff; }
[data-theme="dark"] .dt-clear-btn               { border-color: #f87171; color: #f87171; }
[data-theme="dark"] .dt-clear-btn:hover         { background: #f87171; color: #111; }

/* ── Idparte con espacios al inicio/final ── */
mark.idparte-space {
    background: #fff3cd;
    color: #856404;
    border-radius: 2px;
    padding: 0 1px;
    font-size: .8em;
    letter-spacing: 1px;
}
[data-theme="dark"] mark.idparte-space {
    background: #5a4a00;
    color: #ffd85e;
}
.idparte-spaces {
    outline: 1px dashed #ffc107;
    outline-offset: 2px;
    border-radius: 2px;
}