/* ============================================
   ONIX Theme - Manual de Marca RGD
   Sistema de variables CSS corporativas
   ============================================ */

:root {
    /* Colores corporativos - Manual de Marca RGD */
    --onix-primary: #005A70;        /* Pantone 120-16 U - Teal oscuro */
    --onix-primary-dark: #004355;   /* Hover del primario */
    --onix-primary-light: #006d87;  /* Variante clara */
    --onix-secondary: #2E89AB;      /* Pantone 7704 U - Azul medio */
    --onix-secondary-dark: #236d89; /* Hover del secundario */
    --onix-secondary-light: #3a9bbd;/* Variante clara */
    --onix-white: #FFFFFF;
    --onix-gray-light: #F8F9FA;
    --onix-gray: #6c757d;
    --onix-gray-dark: #212529;
    --onix-border: #dee2e6;

    /* Gradiente corporativo */
    --onix-gradient: linear-gradient(135deg, #005A70 0%, #2E89AB 100%);
    --onix-gradient-hover: linear-gradient(135deg, #004355 0%, #236d89 100%);

    /* Sobrescribir variables de style.css */
    --primary-color: #005A70;
    --secondary-color: #2E89AB;

    /* Focus y sombras */
    --onix-focus-shadow: 0 0 0 0.2rem rgba(46, 137, 171, 0.25);
    --onix-card-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ============================================
   Tipografía Global — Lato en TODOS los elementos
   (Excluye Font Awesome y otros icon fonts)
   ============================================ */
body,
html,
*:not(i):not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not([class*="fa-"]) {
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Restaurar Font Awesome */
i.fas, i.far, i.fab, i.fa,
i.fa-solid, i.fa-regular, i.fa-brands,
.fas, .far, .fab, .fa,
.fa-solid, .fa-regular, .fa-brands {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands' !important;
}

.fab, .fa-brands {
    font-family: 'Font Awesome 6 Brands' !important;
}

/* Títulos - Lato Bold */
h1, h2, h3,
.h1, .h2, .h3 {
    font-weight: 700 !important;
}

/* Subtítulos y labels - Lato Regular */
h4, h5, h6,
.h4, .h5, .h6,
label, .form-label,
.nav-link, .dropdown-item,
.btn, .badge,
th, dt, strong, b,
.font-weight-bold,
.fw-bold {
    font-weight: 400 !important;
}

/* Texto general - Lato Regular (300 era ilegible en móvil) */
p, span, td, dd, li, a,
input, select, textarea, option,
.form-control, .form-select,
.form-text, .text-muted,
.dropdown-header,
.breadcrumb-item,
.card-text, .card-body,
.alert, .list-group-item,
.table, .modal-body,
small, .small {
    font-weight: 400 !important;
}

/* ============================================
   Bootstrap Overrides - Botones
   ============================================ */
.btn-primary {
    background-color: var(--onix-primary) !important;
    border-color: var(--onix-primary) !important;
    color: var(--onix-white) !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--onix-primary-dark) !important;
    border-color: var(--onix-primary-dark) !important;
    box-shadow: 0 4px 12px rgba(0, 90, 112, 0.3) !important;
}

.btn-outline-primary {
    color: var(--onix-primary) !important;
    border-color: var(--onix-primary) !important;
}

.btn-outline-primary:hover, .btn-outline-primary:active {
    background-color: var(--onix-primary) !important;
    border-color: var(--onix-primary) !important;
    color: var(--onix-white) !important;
}

.btn-outline-secondary {
    color: var(--onix-secondary) !important;
    border-color: var(--onix-secondary) !important;
}

.btn-outline-secondary:hover, .btn-outline-secondary:active {
    background-color: var(--onix-secondary) !important;
    border-color: var(--onix-secondary) !important;
    color: var(--onix-white) !important;
}

/* ============================================
   Bootstrap Overrides - Enlaces
   ============================================ */
a {
    color: var(--onix-secondary);
}

a:hover {
    color: var(--onix-primary);
}

.text-primary {
    color: var(--onix-primary) !important;
}

.bg-primary {
    background-color: var(--onix-primary) !important;
}

/* ============================================
   Bootstrap Overrides - Formularios
   ============================================ */
.form-control:focus, .form-select:focus {
    border-color: var(--onix-secondary) !important;
    box-shadow: var(--onix-focus-shadow) !important;
}

/* ============================================
   Cards — Todos los card-header estandarizados
   ============================================ */
.card {
    box-shadow: var(--onix-card-shadow);
}

.card-header {
    background-color: var(--onix-primary) !important;
    color: var(--onix-white) !important;
}

/* Forzar todos los bg-* en card-header al color corporativo */
.card-header.bg-primary,
.card-header.bg-info,
.card-header.bg-success,
.card-header.bg-secondary,
.card-header.bg-dark,
.card-header.bg-warning,
.card-header.bg-light {
    background-color: var(--onix-primary) !important;
    color: var(--onix-white) !important;
}

/* Card-headers con inline styles — override genérico */
.card-header[style] {
    background-color: var(--onix-primary) !important;
    color: var(--onix-white) !important;
}

/* Excepción: card-header de peligro/eliminación mantiene rojo */
.card-header.bg-danger {
    background-color: #dc3545 !important;
    color: var(--onix-white) !important;
}

/* Texto dentro de card-headers */
.card-header a, .card-header .btn-link {
    color: var(--onix-white) !important;
}

.card-header .text-dark,
.card-header .text-primary,
.card-header .dropdown-header {
    color: var(--onix-white) !important;
}

.card-header h5, .card-header h6,
.card-header .mb-0, .card-header span {
    color: var(--onix-white) !important;
}

/* ============================================
   Tablas
   ============================================ */
.table thead th {
    background-color: var(--onix-primary) !important;
    color: var(--onix-white) !important;
    border-color: var(--onix-primary-dark) !important;
    font-weight: 700;
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: var(--onix-gray-light);
}

.table > tbody > tr:hover > td {
    background-color: rgba(46, 137, 171, 0.08);
}

/* ============================================
   Dashboard Cards — Fondo blanco, datos con color
   ============================================ */
.dashboard-card,
.dashboard-card.bg-primary,
.dashboard-card.bg-success,
.dashboard-card.bg-info,
.dashboard-card.bg-warning,
.dashboard-card.bg-danger,
.dashboard-card.bg-secondary {
    background: var(--onix-white) !important;
    color: var(--onix-gray-dark) !important;
    border: 1px solid var(--onix-border) !important;
    border-radius: 0.75rem !important;
    box-shadow: var(--onix-card-shadow) !important;
    border-left: 4px solid var(--onix-primary) !important;
}

.dashboard-card .card-body {
    color: var(--onix-gray-dark) !important;
}

/* Números/datos grandes con color corporativo */
.dashboard-card h3,
.dashboard-card .display-4,
.dashboard-card .display-5,
.dashboard-card .h2,
.dashboard-card .h3,
.dashboard-card .fw-bold {
    color: var(--onix-primary) !important;
}

/* Iconos grandes en las tarjetas */
.dashboard-card .fas,
.dashboard-card .far,
.dashboard-card .fa {
    color: var(--onix-secondary) !important;
    opacity: 0.7;
}

/* Textos descriptivos */
.dashboard-card p,
.dashboard-card .text-white,
.dashboard-card small,
.dashboard-card .text-uppercase {
    color: var(--onix-gray) !important;
    opacity: 1 !important;
}

/* Stats card (projects.css) */
.stats-card {
    background: var(--onix-white) !important;
    color: var(--onix-gray-dark) !important;
    border: 1px solid var(--onix-border) !important;
    border-left: 4px solid var(--onix-primary) !important;
    box-shadow: var(--onix-card-shadow) !important;
}

.stats-card h3 {
    color: var(--onix-primary) !important;
}

.stats-card p {
    color: var(--onix-gray) !important;
    opacity: 1 !important;
}

/* Stat-card (inline en dashboards) */
.stat-card {
    background: var(--onix-white) !important;
    border: 1px solid var(--onix-border) !important;
    border-left: 4px solid var(--onix-secondary) !important;
    box-shadow: var(--onix-card-shadow) !important;
}

/* Stat cards con inline style gradient — override */
div[style*="linear-gradient"].stat-card,
div[style*="linear-gradient"].stats-card,
div[style*="background"].stat-card {
    background: var(--onix-white) !important;
    color: var(--onix-gray-dark) !important;
    border-left: 4px solid var(--onix-primary) !important;
}

div[style*="linear-gradient"].stat-card h2,
div[style*="linear-gradient"].stat-card h3,
div[style*="linear-gradient"].stat-card .display-4,
div[style*="linear-gradient"].stats-card h3 {
    color: var(--onix-primary) !important;
}

div[style*="linear-gradient"].stat-card p,
div[style*="linear-gradient"].stat-card small,
div[style*="linear-gradient"].stats-card p {
    color: var(--onix-gray) !important;
}

/* ============================================
   Paginación
   ============================================ */
.page-link {
    color: var(--onix-primary);
}

.page-link:hover {
    color: var(--onix-primary-dark);
    background-color: rgba(0, 90, 112, 0.08);
}

.page-item.active .page-link {
    background-color: var(--onix-primary) !important;
    border-color: var(--onix-primary) !important;
}

/* ============================================
   Tabs
   ============================================ */
.nav-tabs .nav-link.active {
    color: var(--onix-primary) !important;
    border-bottom-color: var(--onix-primary) !important;
    font-weight: 700;
}

.nav-tabs .nav-link:hover {
    color: var(--onix-secondary);
}

.nav-pills .nav-link.active {
    background-color: var(--onix-primary) !important;
}

/* ============================================
   Badges
   ============================================ */
.badge.bg-primary {
    background-color: var(--onix-primary) !important;
}

.badge.bg-info {
    background-color: var(--onix-secondary) !important;
}

/* ============================================
   Breadcrumbs
   ============================================ */
.breadcrumb-item a {
    color: var(--onix-secondary);
}

.breadcrumb-item.active {
    color: var(--onix-primary);
}

/* ============================================
   Progress Bars
   ============================================ */
.progress-bar {
    background-color: var(--onix-primary);
}

.progress-bar-project {
    background: linear-gradient(90deg, var(--onix-primary), var(--onix-secondary)) !important;
}

/* ============================================
   Modals
   ============================================ */
.modal-header {
    background-color: var(--onix-primary);
    color: var(--onix-white);
}

.modal-header .btn-close {
    filter: brightness(0) invert(1);
}

/* ============================================
   Dropdown hover accent
   ============================================ */
.dropdown-item:hover, .dropdown-item:focus {
    border-left: 3px solid var(--onix-primary);
    padding-left: calc(1rem - 3px);
}

/* ============================================
   Select2 Overrides
   ============================================ */
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--onix-secondary);
    box-shadow: var(--onix-focus-shadow);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--onix-primary) !important;
}

/* ============================================
   Projects Module Overrides
   ============================================ */
.project-card {
    border-left-color: var(--onix-primary) !important;
}

.table-projects {
    border-left-color: var(--onix-primary) !important;
}

.timeline-item::before {
    background: var(--onix-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 90, 112, 0.15) !important;
}

.gantt-bar {
    background: linear-gradient(90deg, var(--onix-primary), var(--onix-secondary)) !important;
}

/* ============================================
   Card-header-custom (dashboards con gradiente púrpura inline)
   ============================================ */
.card-header-custom {
    background: var(--onix-gradient) !important;
    color: var(--onix-white) !important;
}

/* ============================================
   Footer
   ============================================ */
footer {
    background-color: var(--onix-primary) !important;
    border-top: none !important;
}

footer .text-center {
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ============================================
   RESPONSIVE — Móvil y Tablet
   ============================================ */

/* Tamaños base legibles */
html {
    font-size: 15px;
}

/* ---- Tablet (768px) ---- */
@media (max-width: 991.98px) {
    /* Navbar más compacta */
    .navbar-brand img {
        height: 30px !important;
    }

    /* Contenedor principal sin margen lateral */
    main.container {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Tablas con scroll horizontal */
    .table-responsive,
    .card-body > .table,
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Dashboard cards en 2 columnas */
    .dashboard-card {
        margin-bottom: 0.75rem !important;
    }
}

/* ---- Móvil (576px y menos) ---- */
@media (max-width: 575.98px) {
    /* Fuente base más grande para legibilidad en móvil */
    html {
        font-size: 14px;
    }

    body {
        line-height: 1.5;
    }

    /* Navbar */
    .navbar {
        padding: 0.5rem !important;
    }

    .navbar-brand img {
        height: 28px !important;
    }

    /* Menú colapsado: items más grandes para touch */
    .navbar-nav .nav-link {
        padding: 0.75rem 1rem !important;
        font-size: 0.95rem;
    }

    .navbar-nav .dropdown-item {
        padding: 0.65rem 1rem !important;
        font-size: 0.95rem;
    }


    /* Contenedor sin padding extra */
    main.container {
        padding-left: 8px;
        padding-right: 8px;
        margin-top: 1rem !important;
    }

    /* Títulos de página más pequeños */
    h1, .h1 { font-size: 1.5rem !important; }
    h2, .h2 { font-size: 1.3rem !important; }
    h3, .h3 { font-size: 1.15rem !important; }
    h4, .h4 { font-size: 1.05rem !important; }

    /* Cards apiladas con margen reducido */
    .card {
        margin-bottom: 0.75rem;
    }

    .card-header {
        padding: 0.6rem 0.8rem !important;
        font-size: 0.9rem;
    }

    .card-body {
        padding: 0.8rem !important;
    }

    /* Dashboard cards: una columna completa */
    .dashboard-card {
        margin-bottom: 0.5rem !important;
        padding: 1rem !important;
    }

    .dashboard-card h3,
    .stats-card h3 {
        font-size: 1.5rem !important;
    }

    /* Botones táctiles: mínimo 44px para dedos */
    .btn {
        min-height: 44px;
        padding: 0.5rem 1rem !important;
        font-size: 0.9rem;
    }

    .btn-sm {
        min-height: 36px;
        padding: 0.35rem 0.75rem !important;
        font-size: 0.8rem;
    }

    /* Grupo de botones en columna */
    .btn-group,
    .d-flex.justify-content-between {
        flex-direction: column;
        gap: 0.5rem;
    }

    .btn-group .btn {
        margin-right: 0;
        width: 100%;
    }

    /* Formularios: campos en columna */
    .row .col-md-6,
    .row .col-md-4,
    .row .col-md-3 {
        margin-bottom: 0.5rem;
    }

    .form-control,
    .form-select {
        font-size: 16px !important; /* Evita zoom en iOS */
        min-height: 44px;
    }

    /* Tablas: fuente legible */
    .table {
        font-size: 0.875rem;
    }

    .table th,
    .table td {
        padding: 0.5rem 0.4rem !important;
        white-space: nowrap;
    }

    /* Badges más legibles */
    .badge {
        font-size: 0.75rem !important;
        padding: 0.3rem 0.5rem;
    }

    /* Modales que no se desborden */
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100vw - 1rem) !important;
    }

    .modal-body {
        padding: 1rem !important;
        max-height: 70vh;
        overflow-y: auto;
    }

    /* Paginación más compacta */
    .page-link {
        padding: 0.4rem 0.65rem;
        font-size: 0.85rem;
    }

    /* Footer */
    footer {
        font-size: 0.8rem;
        margin-top: 2rem !important;
    }

    footer .text-center {
        padding: 0.75rem !important;
    }

    /* Alertas */
    .alert {
        font-size: 0.9rem;
        padding: 0.75rem;
    }

    /* Filtros: más compactos */
    .filter-panel {
        padding: 12px !important;
    }

    /* Progress bars legibles */
    .progress {
        height: 20px !important;
        font-size: 0.75rem;
    }
}

/* ---- Móvil pequeño (320px - 375px) ---- */
@media (max-width: 375px) {
    html {
        font-size: 13.5px;
    }

    .navbar-brand img {
        height: 24px !important;
    }

    h1, .h1 { font-size: 1.3rem !important; }
    h2, .h2 { font-size: 1.15rem !important; }

    .table {
        font-size: 0.85rem;
    }

    .btn {
        font-size: 0.85rem;
    }
}