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

.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, #D35400, #F2A900, #FFC857);
    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%; }
}

.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: #2C2A28;
    font-weight: 500;
    min-width: 220px;
}
.page-loader-spinner {
    width: 22px; height: 22px;
    border: 3px solid #E0D8CE;
    border-top-color: #D35400;
    border-radius: 50%;
    animation: loaderSpin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes loaderSpin {
    to { transform: rotate(360deg); }
}
[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: #FF8C42;
}
[data-theme="dark"] .page-loader-overlay {
    background: rgba(0,0,0,.4);
}

/* ==========================================================
   SISTEMA CONSTRUCTORA - Estilos personalizados
   Paleta institucional:
     Primario:   #D35400  (naranja de obra)
     Oscuro:     #A04000
     Acento:     #F2A900  (amarillo casco de seguridad)
     Fondo:      #F7F3EE
     Texto:      #2C2A28  (carbón)
   ========================================================== */

:root{
    --bg:           #FFFFFF;
    --text:         #2C2A28;
    --primary:      #D35400;
    --primary-dark: #A04000;
    --primary-light:#FBEEE6;
    --secondary:    #5D6D7E;
    --accent:       #F2A900;
    --border:       #E5DED3;
    --light:        #F7F3EE;
    --surface:      #FFFFFF;
    --sidebar-w:      260px;
    --sidebar-w-rail: 64px;
}

*{ 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(--primary-dark); }

/* 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(211,84,0,.15);
}

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

.sidebar{
    width: var(--sidebar-w);
    background: #26241F;
    color: #d8d1c6;
    border-right: none;
    display:flex;
    flex-direction: column;
    position: fixed; top:0; bottom:0; left:0;
    transform: translateX(0);
    transition: transform .25s ease, width .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; }
.brand-logo-rail{ display:none; }

.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: #d8d1c6;
    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:#d8d1c6;
    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:#F2A900; font-size:.88rem;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s;
}
.nav-link-sub:hover{
    background: rgba(255,255,255,.07); color:#ffd670;
    border-left-color: #F2A900;
}
.nav-link-sub.active{
    background: rgba(242,169,0,.18);
    color: #ffe4a3;
    border-left-color: #F2A900;
    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: #b8ada0; }
.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);
    transition: margin-left .25s ease;
    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(211,84,0,.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:inline-flex; align-items:center; justify-content:center;
}
.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 60% 28%, #ff9a52 0%, #d3600f 32%, #7a3b12 62%, #1c130c 100%);
    min-height: 100vh;
    display:flex; align-items:center; justify-content:center;
    padding: 1.5rem;
    overflow: hidden;
    position: relative;
}
.auth-card{
    position: relative;
    z-index: 10;
    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(211,84,0,.18);
}
.auth-logo{
    display:block; margin: 0 auto 1.8rem;
    height: 34px; 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: #f7f1ea;
    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(211,84,0,.12);
}
.auth-input-wrap input.form-control::placeholder{ color: #a89f92; }

/* 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: all .25s ease;
}
.btn-auth:hover{
    background: var(--primary-dark);
    color:#fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}
.btn-auth:active{
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* 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; }
}

/* ==================== SIDEBAR RAIL (colapsado desktop) ==================== */
@media (min-width: 992px) {
    [data-sidebar="rail"] .sidebar          { width: var(--sidebar-w-rail); }
    [data-sidebar="rail"] .main-wrapper     { margin-left: var(--sidebar-w-rail); }

    [data-sidebar="rail"] .sidebar-header   { justify-content: center; padding: 1.1rem .5rem; }
    [data-sidebar="rail"] .brand-logo       { display: none; }
    [data-sidebar="rail"] .brand-logo-rail  { display: block; height: 34px; width: auto; }

    [data-sidebar="rail"] .nav-link-main span,
    [data-sidebar="rail"] .nav-group-toggle span,
    [data-sidebar="rail"] .nav-link-sub span,
    [data-sidebar="rail"] .chev             { display: none; }

    [data-sidebar="rail"] .nav-link-main,
    [data-sidebar="rail"] .nav-group-toggle { justify-content: center; padding: .7rem 0; }
    [data-sidebar="rail"] .nav-link-sub     { justify-content: center; padding: .55rem 0; }

    [data-sidebar="rail"] .nav-link-main i,
    [data-sidebar="rail"] .nav-group-toggle i:first-child,
    [data-sidebar="rail"] .nav-link-sub i   { font-size: 1.15rem; margin: 0; }

    [data-sidebar="rail"] .sidebar-footer .user-info > div                        { display: none !important; }
    [data-sidebar="rail"] .sidebar-footer .d-flex.gap-1                           { display: flex !important; justify-content: center; gap: 4px; }
    [data-sidebar="rail"] .sidebar-footer .d-flex.gap-1 .btn                      { flex: 0 0 26px !important; width: 26px !important; height: 26px !important; padding: 0 !important; font-size: 0 !important; display: flex !important; align-items: center; justify-content: center; }
    [data-sidebar="rail"] .sidebar-footer .d-flex.gap-1 .btn i                    { font-size: .85rem !important; }
    [data-sidebar="rail"] .sidebar-footer .user-info    { justify-content: center; padding: .4rem 0; }
    [data-sidebar="rail"] .sidebar-footer               { padding: .7rem .5rem; }

    .sidebar-icon-collapsed                       { display: none; }
    [data-sidebar="rail"] .sidebar-icon-expanded  { display: none; }
    [data-sidebar="rail"] .sidebar-icon-collapsed { display: inline-block; }
}


/* ==================== DARK MODE ==================== */
[data-theme="dark"]{
    --bg:           #16140F;
    --text:         #EDE7DE;
    --primary:      #FF8C42;
    --primary-dark: #E8590C;
    --primary-light:#3A2A1D;
    --secondary:    #A8A196;
    --accent:       #FFC857;
    --border:       #35322B;
    --light:        #1E1B15;
    --surface:      #201D18;
}

/* --- Sidebar --- */
[data-theme="dark"] .sidebar           { background: #17140f; }
[data-theme="dark"] .sidebar-header    { border-bottom-color: rgba(255,255,255,.07); }
[data-theme="dark"] .nav-link-main     { color: #A8A196; border-left-color: transparent; }
[data-theme="dark"] .nav-link-main:hover {
    background: rgba(255,140,66,.1);
    color: #EDE7DE;
    border-left-color: #FF8C42;
}
[data-theme="dark"] .nav-group-toggle  { color: #A8A196; border-left-color: transparent; }
[data-theme="dark"] .nav-group-toggle:hover {
    background: rgba(255,140,66,.1);
    color: #EDE7DE;
    border-left-color: #FF8C42;
}
[data-theme="dark"] .nav-group-items   { background: rgba(0,0,0,.3); }
[data-theme="dark"] .nav-link-sub      { color: #FFC857; border-left-color: transparent; }
[data-theme="dark"] .nav-link-sub.active {
    background: rgba(255,200,87,.15);
    color: #ffe4a3;
    border-left-color: #FFC857;
}
[data-theme="dark"] .nav-group-toggle.active {
    color: #f1ece3;
    background: rgba(255,140,66,.07);
    border-left-color: #FF8C42;
}
[data-theme="dark"] .nav-link-sub:hover {
    background: rgba(255,200,87,.1);
    color: #ffe4a3;
    border-left-color: #FFC857;
}
[data-theme="dark"] .sidebar-footer    { border-top-color: rgba(255,255,255,.07); }
[data-theme="dark"] .user-info .u-name { color: #EDE7DE; }
[data-theme="dark"] .user-info .u-rol  { color: #8a8377; }
[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: #dcd6cb; }

/* --- 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: #1c1913;
    border-bottom-color: #2c2820;
    box-shadow: 0 1px 0 #2c2820;
}
[data-theme="dark"] .topbar-title      { color: #EDE7DE; }
[data-theme="dark"] .btn-toggle-sidebar { border-color: #35322B; color: #A8A196; background: transparent; }
[data-theme="dark"] .btn-toggle-sidebar:hover { background: #2c2820; color: #EDE7DE; }

/* --- Footer --- */
[data-theme="dark"] .footer {
    background: #1c1913;
    border-top-color: #2c2820;
    color: #8a8377;
}

/* --- Cards --- */
[data-theme="dark"] .card {
    background: #1c1913;
    border-color: #35322B;
    color: var(--text);
    box-shadow: 0 1px 3px rgba(0,0,0,.4) !important;
}
[data-theme="dark"] .card-header {
    background: #201d18 !important;
    border-bottom-color: #2c2820;
    color: #EDE7DE;
    font-weight: 600;
}
[data-theme="dark"] .card-body         { background: #1c1913; color: var(--text); }
[data-theme="dark"] .card-footer       { background: #201d18; border-top-color: #2c2820; color: #A8A196; }

/* --- Tablas --- */
[data-theme="dark"] .table {
    color:                   #EDE7DE;
    --bs-table-color:        #EDE7DE;
    --bs-table-striped-color:#EDE7DE;
    --bs-table-hover-color:  #EDE7DE;
    --bs-table-active-color: #EDE7DE;
    --bs-table-bg:           transparent;
    --bs-table-striped-bg:   #17140f;
    --bs-table-hover-bg:     #201d18;
    --bs-table-active-bg:    #201d18;
    --bs-table-border-color: #2c2820;
}
[data-theme="dark"] .table td,
[data-theme="dark"] .table th          { color: #EDE7DE; border-color: #2c2820; }
[data-theme="dark"] .table thead th {
    background: #201d18;
    color: #A8A196;
    border-bottom: 2px solid #35322B;
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}
[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background: #201d18;
    color: var(--text);
    --bs-table-accent-bg: #201d18;
}
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background: #17140f;
    color: var(--text);
    --bs-table-accent-bg: #17140f;
}

/* --- Formularios --- */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background: #16140F;
    border-color: #35322B;
    color: #EDE7DE;
    box-shadow: none !important;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background: #16140F;
    border-color: #FF8C42;
    box-shadow: 0 0 0 3px rgba(255,140,66,.15) !important;
    color: #EDE7DE;
}
[data-theme="dark"] .form-control::placeholder { color: #6b6558; }
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly]    { background: #1c1913; color: #8a8377; }
[data-theme="dark"] .form-label                { color: #dcd6cb; }
[data-theme="dark"] .form-text                 { color: #A8A196; }
[data-theme="dark"] .form-check-label          { color: #dcd6cb; }
[data-theme="dark"] .form-check-input          { background-color: #16140F; border-color: #35322B; }
[data-theme="dark"] .form-check-input:checked  { background-color: #FF8C42; border-color: #FF8C42; }
[data-theme="dark"] .input-group-text {
    background: #1c1913;
    border-color: #35322B;
    color: #A8A196;
}

/* --- Botones --- */
[data-theme="dark"] .btn-primary               { background: #E8590C; border-color: #FF8C42; color: #fff; }
[data-theme="dark"] .btn-primary:hover         { background: #FF8C42; border-color: #FFC857; color: #fff; }
[data-theme="dark"] .btn-outline-primary       { color: #FF8C42; border-color: #E8590C; }
[data-theme="dark"] .btn-outline-primary:hover { background: rgba(232,89,12,.15); color: #FFC857; border-color: #FF8C42; }
[data-theme="dark"] .btn-outline-secondary     { color: #A8A196; border-color: #35322B; }
[data-theme="dark"] .btn-outline-secondary:hover { background: #2c2820; color: #dcd6cb; border-color: #A8A196; }
[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: #dcd6cb; }
[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: #2c2820 !important; color: #A8A196;  border: 1px solid #35322B; }
[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: #FFC857 !important;  border: 1px solid #9e6a03; }
[data-theme="dark"] .badge.bg-primary  { background: #3a2410 !important; color: #FF8C42 !important;  border: 1px solid #E8590C; }
[data-theme="dark"] .badge.bg-info     { background: #0d3b45 !important; color: #56d4dd !important;  border: 1px solid #0e7490; }
[data-theme="dark"] .badge.bg-warning.text-dark,
[data-theme="dark"] .badge.bg-info.text-dark   { color: inherit !important; }
[data-theme="dark"] .badge-rol-admin   { background: #3a2410 !important; color: #FF8C42;  border: 1px solid #E8590C; }
[data-theme="dark"] .badge-rol-user    { background: #2c2820 !important; color: #A8A196; }

/* --- Textos, enlaces, bordes --- */
[data-theme="dark"] .text-muted        { color: #A8A196 !important; }
[data-theme="dark"] .text-primary      { color: #FF8C42 !important; }
[data-theme="dark"] a                  { color: #FF8C42; }
[data-theme="dark"] a:hover            { color: #FFC857; }
[data-theme="dark"] .page-header       { border-color: #2c2820; }
[data-theme="dark"] .page-header h1    { color: #EDE7DE; }
[data-theme="dark"] hr                 { border-color: #2c2820; opacity: 1; }
[data-theme="dark"] code               { background: #201d18; color: #FFC857; border: 1px solid #35322B; }
[data-theme="dark"] .border,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-top        { border-color: #35322B !important; }

/* --- Modales --- */
[data-theme="dark"] .modal-content     { background: #1c1913; color: var(--text); border-color: #35322B; }
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer      { background: #201d18; border-color: #2c2820; }
[data-theme="dark"] .btn-close         { filter: invert(1) grayscale(1) brightness(2); }

/* --- Dropdowns --- */
[data-theme="dark"] .dropdown-menu     { background: #201d18; border-color: #35322B; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
[data-theme="dark"] .dropdown-item     { color: #dcd6cb; }
[data-theme="dark"] .dropdown-item:hover { background: #2c2820; color: #EDE7DE; }
[data-theme="dark"] .dropdown-divider  { border-color: #2c2820; }

/* --- 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: #FFC857; }

/* --- Misc --- */
[data-theme="dark"] .bg-white          { background: #1c1913 !important; }
[data-theme="dark"] .bg-light          { background: #201d18 !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: #5D6D7E;
    transition: background .15s, color .15s;
    flex-shrink: 0;
    padding: 0;
}
.theme-icon-btn:hover                  { background: var(--primary-light); color: var(--primary); }

#themeIconSun                          { display: block; color: #f59e0b; }
#themeIconMoon                         { display: none; }

[data-theme="dark"] .theme-icon-btn    { color: #A8A196; }
[data-theme="dark"] .theme-icon-btn:hover { background: #2c2820; }
[data-theme="dark"] #themeIconSun      { display: none; }
[data-theme="dark"] #themeIconMoon     { display: block; color: #FFC857; }

/* ==================== 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;
}

.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 var(--border);
    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(211,84,0,.15);
}

.dt-filters-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.dt-filter-select {
    padding: .35rem .65rem;
    border: 1px solid var(--border);
    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);
}

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

.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 var(--border);
    border-radius: 6px;
    font-size: .82rem;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}
.dt-pagesize-select:focus { outline: none; border-color: var(--primary); }

.dt-pagination {
    display: flex;
    align-items: center;
    gap: .2rem;
}
.dt-page-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 .4rem;
    border: 1px solid var(--border);
    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;
}

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

[data-theme="dark"] .dt-search,
[data-theme="dark"] .dt-filter-select,
[data-theme="dark"] .dt-pagesize-select {
    background: #201d18;
    color: #dcd6cb;
    border-color: #35322B;
}
[data-theme="dark"] .dt-search:focus,
[data-theme="dark"] .dt-filter-select:focus,
[data-theme="dark"] .dt-pagesize-select:focus {
    border-color: #FF8C42;
    box-shadow: 0 0 0 3px rgba(255,140,66,.15);
}
[data-theme="dark"] .dt-page-btn {
    background: #201d18;
    color: #dcd6cb;
    border-color: #35322B;
}
[data-theme="dark"] .dt-page-btn:hover:not(:disabled) {
    background: #2c2820;
    border-color: #FF8C42;
    color: #FF8C42;
}
[data-theme="dark"] .dt-page-btn.active {
    background: #E8590C;
    border-color: #E8590C;
    color: #fff;
}
[data-theme="dark"] .dt-counter,
[data-theme="dark"] .dt-pagesize-wrap,
[data-theme="dark"] .dt-page-ellipsis { color: #A8A196; }

/* 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; }

/* ==========================================================
   ESCENA DE FONDO — Login: obra en construcción al atardecer
   Casas, planta de concreto, planta de asfalto, grúa y camiones.
   ========================================================== */

.auth-scenery {
    position: fixed;
    top: 0;
    bottom: 82px;
    left: 0;
    width: 100%;
    z-index: 0;
    pointer-events: none;
}
.auth-scenery i {
    position: absolute;
    color: #ffffff;
    line-height: 1;
}
.auth-sun {
    position: absolute;
    top: 8%; left: 62%;
    width: 90px; height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff6df 0%, #ffd77a 45%, rgba(255,183,3,0) 72%);
    box-shadow: 0 0 90px 30px rgba(255,183,3,.35);
}

/* ── Carretera y camiones ── */
.auth-road {
    position: fixed;
    bottom: 80px;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 220, 180, 0.35);
    box-shadow: 0 0 12px rgba(255, 200, 140, 0.4);
    z-index: 1;
    pointer-events: none;
}
.auth-truck-container {
    position: fixed;
    bottom: 76px;
    left: -120px;
    z-index: 2;
    width: max-content;
    display: flex;
    align-items: flex-end;
    pointer-events: none;
    animation: driveTruck 25s linear infinite;
}
.auth-truck-icon {
    font-size: 3.6rem;
    color: rgba(44, 36, 28, 0.55);
    line-height: 1;
    filter: drop-shadow(0 0 8px rgba(242,169,0,0.5));
}
.auth-truck-container::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 92%;
    width: 120px;
    height: 22px;
    background: linear-gradient(90deg, rgba(255, 230, 180, 0.4), transparent);
    clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%);
    pointer-events: none;
}
@keyframes driveTruck {
    0%   { transform: translateX(-150px); }
    100% { transform: translateX(calc(100vw + 300px)); }
}

/* ── Planta de concreto (silos + torre) ── */
.plant {
    position: fixed;
    bottom: 82px;
    z-index: 1;
    pointer-events: none;
}
.plant-concrete {
    left: 3%;
    width: 190px;
    height: 210px;
}
.pc-silo {
    position: absolute;
    bottom: 0;
    width: 34px;
    border-radius: 8px 8px 3px 3px;
    background: linear-gradient(180deg, #8b95a1 0%, #5f6873 100%);
    box-shadow: inset -4px 0 8px rgba(0,0,0,.25);
}
.pc-silo-1 { left: 0;   height: 130px; }
.pc-silo-2 { left: 42px; height: 165px; }
.pc-silo-3 { left: 84px; height: 140px; }
.pc-cap {
    position: absolute;
    top: -10px; left: -3px;
    width: 40px; height: 14px;
    border-radius: 50% 50% 0 0;
    background: #4a525c;
}
.pc-tower {
    position: absolute;
    left: 118px; bottom: 0;
    width: 26px; height: 108px;
    background: repeating-linear-gradient(
        180deg, #6b7480 0 6px, #575f69 6px 12px
    );
    clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}
.pc-conveyor {
    position: absolute;
    left: 34px; bottom: 96px;
    width: 96px; height: 8px;
    background: #4a525c;
    transform: rotate(-14deg);
    transform-origin: left bottom;
    border-radius: 4px;
}
.pc-legs {
    position: absolute;
    left: 108px; bottom: 0;
    width: 46px; height: 18px;
    background: repeating-linear-gradient(
        90deg, transparent 0 8px, #3d434b 8px 10px
    );
    opacity: .6;
}

/* ── Grúa de obra (mástil + pluma con leve oscilación) ── */
.crane {
    position: fixed;
    left: 20%;
    bottom: 82px;
    width: 10px;
    height: 260px;
    z-index: 1;
    pointer-events: none;
    transform-origin: bottom center;
    animation: craneSway 7s ease-in-out infinite;
}
.crane-mast {
    position: absolute;
    left: 50%; bottom: 0;
    width: 6px; height: 100%;
    margin-left: -3px;
    background: repeating-linear-gradient(
        180deg, #3a3530 0 10px, #55504a 10px 20px
    );
    border-radius: 2px;
}
.crane-boom {
    position: absolute;
    top: 6px; left: 50%;
    width: 140px; height: 5px;
    background: #3a3530;
    border-radius: 2px;
    transform-origin: left center;
}
.crane-counter {
    position: absolute;
    top: 6px; left: calc(50% - 34px);
    width: 30px; height: 12px;
    background: #2C2A28;
    border-radius: 2px;
}
.crane-hook {
    position: absolute;
    right: 6px; top: 5px;
    width: 2px; height: 46px;
    background: #55504a;
}
.crane-hook::after {
    content: '';
    position: absolute;
    bottom: -6px; left: -3px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #F2A900;
}
@keyframes craneSway {
    0%, 100% { transform: rotate(-1deg); }
    50%      { transform: rotate(1deg); }
}

/* ── Planta de asfalto (tambor + tanque + chimenea con vapor) ── */
.plant-asphalt {
    right: 3%;
    width: 190px;
    height: 190px;
}
.pa-drum {
    position: absolute;
    left: 0; bottom: 26px;
    width: 130px; height: 34px;
    background: linear-gradient(180deg, #3a3d42 0%, #24262a 100%);
    border-radius: 17px;
    transform: rotate(-6deg);
    box-shadow: 0 6px 10px rgba(0,0,0,.3);
}
.pa-drum-band {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: repeating-linear-gradient(
        100deg, transparent 0 14px, rgba(255,255,255,.08) 14px 17px
    );
}
.pa-tank {
    position: absolute;
    left: 138px; bottom: 0;
    width: 40px; height: 96px;
    background: linear-gradient(180deg, #4a4d52 0%, #2c2e32 100%);
    border-radius: 6px 6px 3px 3px;
}
.pa-legs {
    position: absolute;
    left: 6px; bottom: 0;
    width: 118px; height: 26px;
    background: repeating-linear-gradient(
        90deg, transparent 0 10px, #24262a 10px 13px
    );
    opacity: .7;
}
.pa-stack {
    position: absolute;
    left: 158px; bottom: 90px;
    width: 12px; height: 70px;
    background: #24262a;
    border-radius: 3px 3px 0 0;
}
.pa-smoke {
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 16px; height: 16px;
    margin-left: -8px;
    border-radius: 50%;
    background: rgba(230, 230, 225, 0.35);
    animation: smokeRise 6s ease-in infinite;
    opacity: 0;
}
.pa-smoke-1 { animation-delay: 0s; }
.pa-smoke-2 { animation-delay: 2s; }
.pa-smoke-3 { animation-delay: 4s; }
@keyframes smokeRise {
    0%   { transform: translateY(0) scale(.6);   opacity: 0; }
    15%  { opacity: .5; }
    100% { transform: translateY(-90px) scale(1.8); opacity: 0; }
}

@media (max-width: 767.98px) {
    .plant, .crane { display: none; }
}