/* ============================================================
   Motorland Aragon - Colores corporativos
   Marron: #3E1F0E   Rojo: #E30613   Amarillo: #FBBA00
   ============================================================ */

:root {
    --ml-marron: #3E1F0E;
    --ml-marron-claro: #5C3A22;
    --ml-rojo: #E30613;
    --ml-rojo-oscuro: #B8050F;
    --ml-amarillo: #FBBA00;
    --ml-amarillo-claro: #FFF3CD;
    --ml-gris-fondo: #F8F9FA;
    --navbar-h: 58px;   /* actualizado por JS segun altura real */
}

body {
    background-color: #FFFFFF;
    color: #333;
}

/* ---- NAVBAR ---- */
.navbar-ml {
    background-color: var(--ml-marron) !important;
    box-shadow: 0 2px 8px rgba(62, 31, 14, 0.3);
}

.navbar-ml .navbar-brand {
    color: #fff !important;
    font-weight: 600;
}

.navbar-ml .nav-link {
    color: rgba(255,255,255,0.85) !important;
    transition: color 0.2s;
}

.navbar-ml .nav-link:hover,
.navbar-ml .nav-link.active {
    color: var(--ml-amarillo) !important;
}

.navbar-ml .nav-link.active {
    border-bottom: 2px solid var(--ml-amarillo);
}

.navbar-logo {
    height: 32px;
    margin-right: 10px;
}

/* ---- SIDEBAR MOVIL ---- */
.offcanvas-ml {
    background-color: var(--ml-marron) !important;
}

.offcanvas-ml .nav-link {
    color: rgba(255,255,255,0.85) !important;
    border-left: 3px solid transparent;
    transition: all 0.2s;
}

.offcanvas-ml .nav-link:hover {
    color: var(--ml-amarillo) !important;
    background-color: rgba(255,255,255,0.05);
    border-left-color: var(--ml-amarillo);
}

.offcanvas-ml .nav-link.activo {
    color: var(--ml-amarillo) !important;
    background-color: rgba(255,255,255,0.1);
    border-left-color: var(--ml-amarillo);
}

/* ---- CONTENIDO PRINCIPAL ---- */
main {
    padding-top: var(--navbar-h);
}

/* ---- CARDS ---- */
.card {
    border: 1px solid #E9ECEF;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.card-header {
    background-color: var(--ml-gris-fondo);
    border-bottom: 2px solid var(--ml-rojo);
}

/* Dashboard cards */
.card-dashboard {
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    border-top: 3px solid var(--ml-rojo);
}

.card-dashboard:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(62, 31, 14, 0.15);
}

/* Stat cards del dashboard */
.stat-card {
    border-left: 4px solid var(--ml-rojo);
    background: #fff;
}

.stat-card .stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ml-marron);
}

.stat-card .stat-label {
    font-size: 0.85rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-card.amarillo { border-left-color: var(--ml-amarillo); }
.stat-card.rojo { border-left-color: var(--ml-rojo); }
.stat-card.marron { border-left-color: var(--ml-marron); }
.stat-card.verde { border-left-color: #28a745; }

/* ---- TABLAS ---- */
.table th {
    white-space: nowrap;
    font-size: 0.875rem;
    color: var(--ml-marron);
    border-bottom-color: var(--ml-rojo);
}

.table-hover tbody tr:hover {
    background-color: rgba(251, 186, 0, 0.06);
}

/* ---- BOTONES CORPORATIVOS ---- */
.btn-ml {
    background-color: var(--ml-rojo);
    border-color: var(--ml-rojo);
    color: #fff;
}

.btn-ml:hover {
    background-color: var(--ml-rojo-oscuro);
    border-color: var(--ml-rojo-oscuro);
    color: #fff;
}

.btn-ml-outline {
    border-color: var(--ml-rojo);
    color: var(--ml-rojo);
}

.btn-ml-outline:hover {
    background-color: var(--ml-rojo);
    color: #fff;
}

/* ---- BADGES DE ESTADO ---- */
.badge-pendiente { background-color: var(--ml-amarillo); color: #000; }
.badge-emitida { background-color: #17a2b8; }
.badge-asignada { background-color: #007bff; }
.badge-comenzada { background-color: #fd7e14; }
.badge-archivada { background-color: #6c757d; }
.badge-no-conforme { background-color: var(--ml-rojo); }

/* ---- BADGES DE URGENCIA ---- */
.badge-urgente { background-color: var(--ml-rojo); }
.badge-2dias { background-color: #fd7e14; }
.badge-1semana { background-color: var(--ml-amarillo); color: #000; }
.badge-no-urgente { background-color: #28a745; }

/* ---- LOGIN ---- */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ml-marron) 0%, var(--ml-marron-claro) 100%);
}

.login-card {
    border-top: 4px solid var(--ml-rojo);
}

.login-logo {
    max-width: 200px;
    margin-bottom: 1rem;
}

/* ---- FORMULARIOS ---- */
.required-field::after {
    content: " *";
    color: var(--ml-rojo);
}

.form-control:focus, .form-select:focus {
    border-color: var(--ml-amarillo);
    box-shadow: 0 0 0 0.2rem rgba(251, 186, 0, 0.25);
}

/* ---- DATATABLES ---- */
.dataTables_wrapper .dataTables_filter input {
    border-radius: 0.375rem;
    border-color: #dee2e6;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--ml-amarillo);
    box-shadow: 0 0 0 0.2rem rgba(251, 186, 0, 0.25);
}

/* ---- BUSCADOR DATATABLES: ocultar nativo cuando hay buscador propio ---- */
body.has-dt-custom-search .dataTables_filter { display: none !important; }

/* ---- FILTROS STICKY ---- */
.filter-sticky {
    position: sticky;
    top: var(--navbar-h);   /* sigue la altura real de la navbar */
    z-index: 1019;          /* justo por debajo de la navbar (1030) */
    background-color: #fff;
}

/* ---- TITULOS DE PAGINA ---- */
h3 i, h4 i, h5 i {
    color: var(--ml-rojo);
}

/* ---- LINKS ---- */
a {
    color: var(--ml-marron);
}

a:hover {
    color: var(--ml-rojo);
}

/* ---- RESPONSIVE MOVIL ---- */
@media (max-width: 768px) {
    .table td, .table th {
        font-size: 0.8rem;
        padding: 0.4rem;
    }

    main {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .stat-card .stat-number {
        font-size: 1.4rem;
    }
}

/* ---- IMPRESION ---- */
@media print {
    .navbar-ml, .offcanvas, .btn, .no-print, .filter-sticky { display: none !important; }
    body { background: #fff; }
    .card { border: 1px solid #ccc; box-shadow: none; }
    .card-header { border-bottom: 1px solid #ccc; }
    main { padding-top: 0; margin-top: 0; }
    .print-logo { display: block !important; max-width: 160px; margin-bottom: 0.4rem; }
    .print-only { display: block !important; }
    .col-no-print { display: none !important; }
    .table-responsive { overflow: visible !important; }
    .d-none.d-md-table-cell,
    .d-none.d-lg-table-cell,
    .d-none.d-xl-table-cell { display: table-cell !important; }
    table { font-size: 0.8rem; }
}

@page { margin: 1.5cm; }

.print-logo { display: none; }
.print-only { display: none; }

/* ---- CABECERA DE IMPRESION ---- */
.print-title {
    color: var(--ml-marron);
    border-bottom: 2px solid var(--ml-rojo);
    padding-bottom: 0.3rem;
    margin-bottom: 0.4rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.print-filtros {
    background: #fafafa;
    border-left: 3px solid var(--ml-amarillo);
    padding: 0.2rem 0.6rem;
    font-size: 0.82rem;
    margin-bottom: 0.3rem;
    color: #555;
}