:root{
    --brand-wine:#691C32;
    --brand-gold:#BC955C;
    --brand-cream:#ECD798;
    --brand-gray-light:#D4D4D4;
    --brand-gray:#999999;
    --brand-bg:#f6f4f0;
    --brand-card:#ffffff;
    --brand-text:#333333;
    --brand-muted:#666666;
    --brand-border:#D4D4D4;
    --brand-input:#ffffff;
    --brand-shadow:0 8px 24px rgba(51,51,51,.14);
    --brand-shadow-soft:0 4px 14px rgba(51,51,51,.09);
    --brand-focus:0 0 0 3px rgba(105,28,50,.16);
    --brand-success:#2f7d46;
    --brand-warning:#a86d16;
    --brand-danger:#691C32;
    --brand-row:#fbfaf7;
}

body{
    color:var(--brand-text);
    background:
        linear-gradient(180deg, rgba(236,215,152,.14), rgba(212,212,212,.12)),
        var(--brand-bg) !important;
    transition:background .28s ease, color .28s ease;
}

.header{
    position:relative;
    overflow:hidden;
    background:var(--brand-wine) !important;
    color:white !important;
    border-bottom:6px solid var(--brand-gold);
    box-shadow:0 8px 24px rgba(51,51,51,.16);
}

.header.compact-header{
    padding-top:22px !important;
    padding-bottom:22px !important;
}

/* El escudo de marca de agua se retiró: al 18% de opacidad no se percibía
   y solo ensuciaba la barra. */

.header h1,
.header h2,
.header p{
    position:relative;
    z-index:1;
}

.header h1,
.header h2{
    letter-spacing:0;
}

.header p{
    max-width:820px;
    line-height:1.45;
}

.logo{
    display:block;
    width:min(760px, 90vw);
    height:132px;
    margin:0 auto;
    padding:10px 18px;
    box-sizing:border-box;
    color:transparent !important;
    font-size:0 !important;
    /* Imagotipo dorado sobre el vino: ya no necesita la placa blanca detrás. */
    background:
        url("../images/logo-ecatepec-dorado.png")
        center / contain
        no-repeat;
}

.compact-header .logo{
    width:min(340px, 62vw);
    height:66px;
    padding:0;
}

.login-box,
.card,
.contenedor,
.panel,
.tarjeta,
.filtros,
.acciones-limpieza,
.grafica-card{
    border-radius:8px !important;
    border:1px solid rgba(188,149,92,.18);
}

.login-box,
.card,
.contenedor,
.panel,
.tarjeta,
.filtros,
.acciones-limpieza,
.grafica-card,
table{
    box-shadow:var(--brand-shadow) !important;
    background:var(--brand-card) !important;
    color:var(--brand-text) !important;
    transition:background .28s ease, color .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.login-box{
    border:1px solid rgba(188,149,92,.24);
    border-top:6px solid var(--brand-gold);
}

.login-box h2{
    margin-bottom:10px !important;
}

.form-field{
    position:relative;
    margin-bottom:18px;
}

.form-field i{
    position:absolute;
    left:15px;
    top:50%;
    transform:translateY(-50%);
    color:var(--brand-gold);
    pointer-events:none;
}

.form-field input{
    margin-bottom:0 !important;
    padding-left:44px !important;
}

.field-label{
    display:block;
    margin:0 0 8px;
    color:var(--brand-wine) !important;
    font-size:14px;
    font-weight:700;
}

h1,
h2,
h3,
.titulo,
.tarjeta strong{
    color:var(--brand-wine) !important;
}

.header h1,
.header h2,
.header h3,
.header .titulo,
.header p{
    color:white !important;
}

a,
.dato b{
    color:var(--brand-wine);
}

p,
label,
small,
span,
li{
    color:inherit;
}

button,
.btn,
.menu a,
.logout a{
    background:var(--brand-gold) !important;
    color:white !important;
    border-radius:8px !important;
}

button,
.btn{
    border:0;
    min-height:42px;
    padding:11px 16px;
    font-weight:700;
    text-decoration:none;
    cursor:pointer;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.btn-primary{
    background:var(--brand-gold) !important;
    color:white !important;
}

.btn-secondary{
    background:white !important;
    color:var(--brand-wine) !important;
    border:1px solid rgba(105,28,50,.28) !important;
}

.btn-danger{
    background:var(--brand-danger) !important;
    color:white !important;
}

.btn-block{
    width:100%;
}

.btn i,
.menu a i,
.logout a i,
button i{
    margin-right:8px;
}

button:hover,
.btn:hover,
.menu a:hover,
.logout a:hover{
    background:var(--brand-wine) !important;
}

.btn-danger,
.btn-cerrar,
.bad{
    background:var(--brand-wine) !important;
    color:white !important;
}

.btn-limpiar{ background:#999 !important; }
.btn-verde{ background:#2f7d46 !important; }
.btn-rosa{ background:#a32045 !important; }
.btn-rojo{ background:#a33 !important; }
.btn-vino{ background:#691C32 !important; }
.btn-icono-oro,
.btn-icono-rojo{
    padding:4px 8px !important;
    font-size:11px !important;
    min-height:auto !important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.btn-icono-oro{ background:#c59b57 !important; }
.btn-icono-rojo{ background:#a33 !important; }

.btn-mini{
    padding:6px 14px !important;
    font-size:13px !important;
    min-height:auto !important;
}

.input-mini{
    width:auto !important;
    margin:0 !important;
    padding:4px 6px !important;
    font-size:12px !important;
}

.caja-info{
    background:rgba(188,149,92,.1);
    padding:14px;
    border-radius:8px;
}

.aviso-ok,
.aviso-warn{
    padding:12px 16px;
    border-radius:8px;
    margin-bottom:16px;
}

.aviso-ok{
    background:#eaf7ee;
    border:1px solid #c3e6cb;
}

.aviso-warn{
    background:#fff3cd;
    border:1px solid #ffeeba;
}

input:focus,
select:focus,
textarea:focus{
    border-color:var(--brand-wine) !important;
    box-shadow:var(--brand-focus) !important;
    outline:none;
}

input,
select,
textarea{
    background:var(--brand-input) !important;
    color:var(--brand-text) !important;
    border-color:var(--brand-border) !important;
}

input::placeholder,
textarea::placeholder{
    color:var(--brand-muted);
}

th,
.nav{
    background:var(--brand-wine) !important;
    color:white !important;
}

table{
    border-collapse:separate !important;
    border-spacing:0 !important;
    overflow:hidden;
}

th{
    font-size:13px;
    letter-spacing:.02em;
}

tbody tr:nth-child(even){
    background:var(--brand-row);
}

tbody tr:hover{
    background:rgba(236,215,152,.2);
}

td,
tr,
.dato,
.login-stat,
.resumen-card,
.alerta,
.document-card{
    background-color:transparent;
    color:var(--brand-text) !important;
}

td,
.dato{
    border-color:var(--brand-border) !important;
}

.dataTables_wrapper{
    color:var(--brand-text) !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate{
    color:var(--brand-text) !important;
    margin:10px 0;
}

.dataTables_wrapper input,
.dataTables_wrapper select{
    border-radius:8px;
    padding:8px 10px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button{
    border-radius:8px !important;
    color:var(--brand-wine) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
    background:var(--brand-gold) !important;
    border-color:var(--brand-gold) !important;
    color:white !important;
}

img,
video,
.foto{
    border-color:var(--brand-gold) !important;
}

.mensaje{
    background:rgba(236,215,152,.55) !important;
    color:var(--brand-wine) !important;
}

.section-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:0 0 16px;
}

.section-title h2,
.section-title h3{
    margin:0;
}

.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    padding:5px 10px;
    border-radius:8px;
    border:1px solid rgba(188,149,92,.34);
    background:rgba(236,215,152,.24);
    color:var(--brand-wine);
    font-size:12px;
    font-weight:700;
}

.badge-ok{
    border-color:rgba(47,125,70,.32);
    background:rgba(47,125,70,.08);
    color:var(--brand-success);
}

.badge-muted{
    border-color:rgba(153,153,153,.28);
    background:rgba(153,153,153,.1);
    color:var(--brand-muted);
}

.badge-danger,
.badge-bloqueado,
.badge-rechazado{
    border-color:rgba(105,28,50,.34);
    background:rgba(105,28,50,.08);
    color:var(--brand-danger);
}

.badge-warning,
.badge-pendiente{
    border-color:rgba(168,109,22,.34);
    background:rgba(168,109,22,.1);
    color:var(--brand-warning);
}

.badge-admin{
    border-color:rgba(105,28,50,.36);
    background:rgba(105,28,50,.1);
    color:var(--brand-wine);
}

.badge-usuario{
    border-color:rgba(47,125,70,.32);
    background:rgba(47,125,70,.08);
    color:var(--brand-success);
}

.badge-operador,
.badge-supervisor{
    border-color:rgba(188,149,92,.42);
    background:rgba(236,215,152,.24);
    color:var(--brand-warning);
}

.app-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.professional-summary{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:16px;
    margin:20px 0;
}

.professional-summary .summary-card{
    padding:18px;
    border-radius:8px;
    border-left:5px solid var(--brand-gold);
    background:white;
    box-shadow:var(--brand-shadow-soft);
}

.professional-summary strong{
    display:block;
    margin-top:6px;
    color:var(--brand-wine);
    font-size:28px;
}

.table-shell{
    width:100%;
    overflow-x:auto;
    border:1px solid rgba(212,212,212,.8);
    border-radius:8px;
    box-shadow:var(--brand-shadow-soft);
}

.table-shell table,
.tabla-card table{
    margin:0;
    box-shadow:none !important;
}

.role-nav{
    z-index:40;
}

.role-nav-inner{
    min-height:58px;
    display:flex;
    align-items:stretch;
    justify-content:flex-start;
    gap:16px;
}

.role-nav strong{
    display:flex;
    flex-direction:column;
    gap:3px;
    color:var(--brand-wine);
}

.role-nav strong small{
    color:var(--brand-muted);
    font-size:12px;
    font-weight:700;
}

.role-nav-links{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.role-nav a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:38px;
    padding:8px 11px;
    border:1px solid rgba(188,149,92,.26);
    border-radius:8px;
    background:rgba(236,215,152,.22);
    color:var(--brand-wine);
    font-size:14px;
    font-weight:700;
    text-decoration:none;
}

.role-nav a:hover{
    background:var(--brand-wine);
    color:white;
}

.role-sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:232px;
    height:100vh;
    overflow-y:auto;
    background:rgba(255,255,255,.97);
    border-right:1px solid rgba(188,149,92,.28);
    box-shadow:var(--brand-shadow-soft);
}

.role-sidebar .role-nav-inner{
    width:auto;
    min-height:100%;
    margin:0;
    padding:20px 14px;
    box-sizing:border-box;
    flex-direction:column;
}

.role-sidebar .role-nav-links{
    flex-direction:column;
    gap:8px;
    min-height:0;
    flex:1;
}

.role-sidebar a{
    width:100%;
    justify-content:flex-start;
    box-sizing:border-box;
}

.role-sidebar a.is-active{
    background:var(--brand-wine);
    border-color:var(--brand-wine);
    color:white;
    box-shadow:0 8px 18px rgba(105,28,50,.18);
}

.role-sidebar a.is-logout{
    margin-top:auto;
    background:rgba(105,28,50,.08);
    border-color:rgba(105,28,50,.18);
}

.sidebar-toggle{
    position:absolute;
    top:14px;
    right:-16px;
    z-index:50;
    width:32px;
    height:32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--brand-wine);
    color:white;
    border:2px solid var(--brand-gold);
    border-radius:50%;
    cursor:pointer;
    font-size:14px;
    box-shadow:0 4px 12px rgba(51,51,51,.25);
    transition:transform .2s ease, right .25s ease;
}
.sidebar-toggle:hover{
    transform:scale(1.12);
    background:var(--brand-gold);
    color:var(--brand-wine);
}
.role-sidebar.collapsed{
    width:64px;
}
.role-sidebar.collapsed .sidebar-toggle{
    right:auto;
    left:14px;
    transform:rotate(180deg);
}
.role-sidebar.collapsed .sidebar-toggle:hover{
    transform:rotate(180deg) scale(1.12);
}
.role-sidebar.collapsed strong{
    align-items:center;
}
.role-sidebar.collapsed strong small,
.role-sidebar.collapsed .role-nav-links a span{
    display:none;
}
.role-sidebar.collapsed .role-nav-links a{
    justify-content:center;
    padding:10px;
    font-size:0;
    width:44px;
    min-height:44px;
    margin:0 auto;
}
.role-sidebar.collapsed .role-nav-links a i{
    margin:0;
    font-size:18px;
}
.role-sidebar.collapsed .role-nav-links a.is-logout{
    font-size:0;
}
.has-role-sidebar body{
    padding-left:232px;
    transition:padding-left .25s ease;
}
.has-role-sidebar.sidebar-collapsed body{
    padding-left:64px;
}

.app-footer-version{
    width:min(1200px, calc(100% - 40px));
    margin:28px auto;
    color:var(--brand-muted);
    font-size:13px;
    text-align:center;
}

.document-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:16px;
    margin:18px 0 24px;
}

.document-card{
    padding:18px;
    border:1px solid rgba(188,149,92,.28);
    border-radius:8px;
    background:white;
    box-shadow:var(--brand-shadow-soft);
    animation:brandRise .45s ease both;
}

.document-card-icon{
    width:46px;
    height:46px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:rgba(105,28,50,.08);
    color:var(--brand-wine);
    font-size:24px;
    margin-bottom:12px;
}

.document-card h3{
    margin:0 0 8px;
    overflow-wrap:anywhere;
}

.document-card p{
    margin:6px 0;
    color:var(--brand-muted);
}

.document-card-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:14px;
}

.document-grid .pdf{
    grid-column:1 / -1;
}

.empty-state{
    display:grid;
    place-items:center;
    gap:10px;
    padding:34px 22px;
    border:1px dashed rgba(188,149,92,.55);
    border-radius:8px;
    background:rgba(255,255,255,.82);
    color:var(--brand-muted);
    text-align:center;
    box-shadow:var(--brand-shadow-soft);
}

.empty-state i{
    width:52px;
    height:52px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:rgba(105,28,50,.08);
    color:var(--brand-wine);
    font-size:24px;
}

.empty-state h2,
.empty-state h3,
.empty-state p{
    margin:0;
}

.empty-state p{
    max-width:520px;
    color:var(--brand-muted);
    line-height:1.45;
}

.estado-vacio{
    text-align:center;
    padding:28px 20px;
    color:#999;
    font-size:14px;
    line-height:1.5;
    background:rgba(255,255,255,.6);
    border:1px dashed rgba(188,149,92,.4);
    border-radius:8px;
}

td.estado-vacio{
    border:none;
}

.form-intro{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:10px;
    margin:0 0 18px;
}

.form-intro span{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    border:1px solid rgba(188,149,92,.28);
    border-radius:8px;
    background:rgba(236,215,152,.16);
    color:var(--brand-wine);
    font-weight:700;
}

.form-section{
    padding:16px;
    margin:0 0 16px;
    border:1px solid rgba(188,149,92,.24);
    border-radius:8px;
    background:rgba(255,255,255,.82);
}

.form-section-title{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 14px;
    color:var(--brand-wine);
    font-weight:800;
}

.btn-icon{
    width:42px;
    min-width:42px;
    padding:0 !important;
}

.is-loading{
    position:relative;
    pointer-events:none;
    opacity:.82;
}

.is-loading::after{
    content:"";
    width:16px;
    height:16px;
    margin-left:8px;
    border:2px solid rgba(255,255,255,.65);
    border-top-color:white;
    border-radius:999px;
    animation:spin .8s linear infinite;
}

.ui-ready .tarjeta,
.ui-ready .summary-card,
.ui-ready .document-card{
    will-change:transform;
}

@keyframes spin{
    to{ transform:rotate(360deg); }
}

.status-chip,
.estado-card,
.paso{
    position:relative;
}

.estado-card.ok,
.paso.ok,
.status-ok{
    border-color:rgba(47,125,70,.34) !important;
    background:rgba(47,125,70,.08) !important;
    color:var(--brand-success) !important;
}

.estado-card.error,
.paso.error,
.status-error{
    border-color:rgba(105,28,50,.34) !important;
    background:rgba(105,28,50,.08) !important;
    color:var(--brand-wine) !important;
}

.estado-card.cargando,
.paso.cargando,
.status-loading{
    border-color:rgba(188,149,92,.38) !important;
    background:rgba(236,215,152,.22) !important;
    color:var(--brand-warning) !important;
}

.tarjeta,
.card,
.contenedor,
.panel,
.filtros,
.acciones-limpieza,
.grafica-card,
.login-box,
table{
    animation:brandRise .45s ease both;
}

.btn,
button,
.menu a,
.acciones a{
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.btn:hover,
button:hover,
.menu a:hover,
.acciones a:hover{
    transform:translateY(-2px);
}

@keyframes brandRise{
    from{
        opacity:0;
        transform:translateY(12px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.back-button-global{
    position:fixed;
    left:18px;
    bottom:18px;
    z-index:50;
    width:auto !important;
    min-width:116px;
    margin:0 !important;
    padding:12px 16px !important;
    border:0 !important;
    border-radius:8px !important;
    background:var(--brand-wine) !important;
    color:white !important;
    font-weight:bold;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(51,51,51,.25);
}

.breadcrumbs{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px;
    padding:10px 32px 0;
    font-size:13px;
    background:var(--brand-wine);
    color:rgba(255,255,255,.7);
}
.breadcrumbs a{
    color:rgba(255,255,255,.85);
    text-decoration:none;
}
.breadcrumbs a:hover{
    color:white;
    text-decoration:underline;
}
.breadcrumbs span{
    color:rgba(255,255,255,.5);
}
.breadcrumb-sep{
    color:rgba(255,255,255,.35);
}

.has-role-sidebar .back-button-global,
.back-button-global.back-button-with-sidebar{
    left:auto;
    right:18px;
}

.back-button-global:hover{
    background:var(--brand-gold) !important;
}

@media(max-width:700px){
    .header::after{
        width:180px;
        height:58px;
        right:12px;
        opacity:.12;
    }

    .logo{
        height:92px;
        padding:8px 10px;
    }

    .compact-header .logo{
        height:56px;
    }

    .back-button-global{
        left:12px;
        bottom:12px;
        min-width:104px;
        padding:11px 14px !important;
    }

    .section-title{
        align-items:flex-start;
        flex-direction:column;
    }

    .role-sidebar{
        position:static;
        width:auto;
        border-right:0;
        border-bottom:1px solid rgba(188,149,92,.28);
    }

    .role-nav-inner{
        width:calc(100% - 24px);
        align-items:stretch;
        flex-direction:column;
        padding:10px 0;
    }

    .role-nav-links,
    .role-nav a{
        width:100%;
    }

    .role-nav a{
        justify-content:center;
    }

    .has-role-sidebar body{
        padding-left:0;
    }

    .has-role-sidebar .back-button-global,
    .back-button-global.back-button-with-sidebar{
        left:auto;
        right:12px;
    }

    .app-actions,
    .app-actions .btn,
    .app-actions button{
        width:100%;
    }

}

@media print{
    .role-sidebar,
    .admin-topnav,
    .breadcrumbs,
    .header,
    .app-footer-version,
    .back-button-global,
    .sidebar-toggle,
    .paginacion,
    .periodo-selector{
        display:none !important;
    }

    body,
    .has-role-sidebar body{
        padding:0 !important;
        margin:0 !important;
        background:white !important;
        color:#000 !important;
    }

    button,
    .btn,
    .btn-mini,
    .btn-icono-oro,
    .btn-icono-rojo,
    form,
    .alerta-link,
    .mini-link,
    .mensaje{
        display:none !important;
    }

    .resumen,
    .criticos,
    .graficas{
        display:block !important;
    }

    .container,
    .panel,
    .panel-principal,
    .panel-lateral,
    .card,
    .resumen-card,
    .table-shell,
    .tabla-scroll,
    .grafica-card,
    .resumen-card{
        box-shadow:none !important;
        border:1px solid #ddd !important;
        overflow:visible !important;
    }

    table{
        width:100% !important;
        border-collapse:collapse !important;
        min-width:0 !important;
    }

    th,
    td{
        border:1px solid #ccc !important;
        color:#000 !important;
    }

    a{
        color:#000 !important;
        text-decoration:none !important;
    }
}

@media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
    }
}