/**
 * panel-theme.css — Identidad Visual Corporativa
 * AdminLTE 4.1.0 + Bootstrap 5.3.8
 * REPARACIONES PC | reparacionesguala.com
 * 
 * Carga DESPUÉS de adminlte.min.css.
 * Reutiliza variables de design-tokens.css.
 * NO duplicar hex codes — mapear variables.
 */

/* =============================================
   1. MAPEO DE TOKENS → VARIABLES BOOTSTRAP / ADMINLTE 4
   ============================================= */
:root,
[data-bs-theme="light"] {
    /* Bootstrap 5.3 — paleta semántica */
    --bs-primary:           var(--color-primary);
    --bs-primary-rgb:       8, 31, 58;
    --bs-secondary:         var(--color-gray);
    --bs-secondary-rgb:     85, 85, 85;
    --bs-success:           var(--color-success);
    --bs-danger:            var(--color-danger);
    --bs-warning:           var(--color-warning);
    --bs-info:              var(--color-info);
    --bs-body-font-family:  var(--font-body);
    --bs-border-radius:     6px;
    --bs-link-color:        var(--color-primary);
    --bs-link-hover-color:  var(--color-accent);

    /* AdminLTE 4 — shell del panel */
    --lte-sidebar-width:        260px;
    --lte-sidebar-bg:           var(--color-primary);
    --lte-sidebar-color:        var(--color-white);
    --lte-sidebar-hover-bg:     var(--color-primary-light);
    --lte-sidebar-active-bg:    var(--color-accent);
    --lte-sidebar-active-color: var(--color-white);
    --lte-sidebar-submenu-bg:   var(--color-primary-dark);
    --lte-navbar-bg:            var(--color-white);
    --lte-navbar-color:         var(--color-primary);
    --lte-brand-bg:             var(--color-primary);
}

/* =============================================
   2. MODO OSCURO — via data-bs-theme (AdminLTE 4)
   ============================================= */
[data-bs-theme="dark"] {
    --bs-body-bg:       #0b1626;
    --bs-body-color:    #e8ecf2;
    --lte-navbar-bg:    #0e1c30;
    --color-surface:    #101f34;
    --color-border:     #1e3350;
    
    /* Variables de color explícitas para dark mode — Fix para var(--color-white) */
    --color-white:      #FFFFFF;
    --color-primary:    #081F3A;
    --color-primary-dark: #04101f;
    --color-primary-light: #0e3260;
    --color-accent:     #F57C00;
    --color-accent-light: #FF9800;
    --color-gray:       #555555;
}

[data-bs-theme="dark"] .card-header {
    background-color: var(--color-primary-dark);
    color: var(--color-white) !important;
}

[data-bs-theme="dark"] .card-header .card-title,
[data-bs-theme="dark"] .card-header i {
    color: var(--color-white) !important;
    opacity: 1;
}

/* Opción A: tarjetas como "fichas claras sobre fondo oscuro" */
[data-bs-theme="dark"] .card-body {
    background-color: var(--color-surface);
    color: #1a1a1a;
}

/* =============================================
   3. NAVBAR SUPERIOR (.app-header)
   ============================================= */
.app-header {
    border-bottom: 1px solid var(--color-border);
}

.app-header .nav-link {
    color: var(--color-primary);
    transition: color 0.2s ease;
}

.app-header .nav-link:hover {
    color: var(--color-accent);
}

[data-bs-theme="dark"] .app-header {
    border-bottom-color: var(--color-primary-light);
}

[data-bs-theme="dark"] .app-header .nav-link {
    color: var(--color-white);
}

[data-bs-theme="dark"] .app-header .nav-link:hover {
    color: var(--color-accent-light);
}

/* =============================================
   4. SIDEBAR
   ============================================= */
.app-sidebar {
    background-color: var(--color-primary) !important;
}

.app-sidebar .brand-link {
    background-color: var(--color-primary-dark);
    border-bottom: 1px solid rgba(245, 124, 0, 0.3);
    padding: 0.9rem 1rem;
}

.app-sidebar .brand-image {
    max-height: 34px;
    width: auto;
    opacity: 1;
}

.app-sidebar .brand-text {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--color-white);
}

.app-sidebar .nav-sidebar .nav-link {
    color: rgba(255, 255, 255, 0.85);
    transition: all 0.2s ease;
}

.app-sidebar .nav-sidebar .nav-link.active {
    background-color: var(--color-accent) !important;
    color: var(--color-white) !important;
    font-weight: 600;
}

.app-sidebar .nav-sidebar .nav-link:hover {
    background-color: var(--color-primary-light);
    color: var(--color-white);
}

.app-sidebar .nav-icon {
    color: var(--color-accent-light);
}

.app-sidebar .nav-header {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.app-sidebar .user-panel {
    border-bottom: 1px solid rgba(245, 124, 0, 0.2);
}

.app-sidebar .user-panel .info a {
    color: var(--color-white);
}

/* =============================================
   5. LOGIN
   ============================================= */
.login-page {
    background-color: var(--color-bg-light);
}

.login-box .card {
    border-top: 4px solid var(--color-accent);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(8, 31, 58, 0.12);
}

.login-logo,
.login-logo a {
    font-family: var(--font-heading);
    color: var(--color-primary);
}

/* El CTA de login es naranja — es una acción, no un elemento de marca */
.login-box .btn-warning,
.login-card-body .btn-warning {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-white) !important;
}

.login-box .btn-warning:hover,
.login-card-body .btn-warning:hover {
    background-color: var(--color-accent-light) !important;
    border-color: var(--color-accent-light) !important;
    box-shadow: 0 4px 12px rgba(245, 124, 0, 0.3);
}

/* =============================================
   6. CLASES UTILITARIAS DE MARCA (.bg-brand-*)
   Para KPI cards — NO usar bg-info/success/warning/danger en widgets
   ============================================= */
.bg-brand-primary {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}

.bg-brand-accent {
    background-color: var(--color-accent) !important;
    color: var(--color-white) !important;
}

.bg-brand-neutral {
    background-color: var(--color-gray) !important;
    color: var(--color-white) !important;
}

.bg-brand-info {
    background-color: var(--color-info) !important;
    color: var(--color-white) !important;
}

/* =============================================
   7. WIDGETS KPI (small-box / info-box)
   ============================================= */
.small-box {
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(8, 31, 58, 0.08);
}

.info-box-icon {
    border-radius: 50%;
}

/* =============================================
   8. CARDS
   ============================================= */
.card {
    border-color: var(--color-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.card .card-header {
    background-color: var(--color-bg-light);
    border-bottom: 1px solid var(--color-border);
}

.card .card-header .card-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
}

.card .card-footer {
    background-color: var(--color-bg-light);
    border-top: 1px solid var(--color-border);
}

/* =============================================
   9. TABLAS DE FACTURACIÓN
   ============================================= */
.table thead th {
    font-family: var(--font-subtitle);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-white);
    background-color: var(--color-primary);
    border-bottom: 2px solid var(--color-accent);
}

.table tbody td {
    font-family: var(--font-body);
    font-size: 0.9rem;
    vertical-align: middle;
    color: var(--color-gray);
}

.table-hover tbody tr:hover {
    background-color: rgba(245, 124, 0, 0.04);
}

[data-bs-theme="dark"] .table thead th {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
}

/* DataTables — paginación con marca */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--color-border);
    border-radius: 4px;
}

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

.dataTables_wrapper .paginate_button:hover {
    background: var(--color-accent) !important;
    color: var(--color-white) !important;
    border-color: var(--color-accent) !important;
}

/* =============================================
   10. BADGES DE ESTADO DE FACTURA (semánticos)
   NO usar el naranja de marca para estados del sistema
   ============================================= */
.badge-pagada {
    background-color: var(--color-success);
    color: var(--color-white);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}

.badge-pendiente {
    background-color: var(--color-warning);
    color: #1a1a1a;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}

.badge-vencida {
    background-color: var(--color-danger);
    color: var(--color-white);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}

/* =============================================
   11. BOTONES DEL PANEL
   ============================================= */
.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background-color: var(--color-primary-light);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 0.2rem rgba(8, 31, 58, 0.25);
}

.btn-cta {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
    font-family: var(--font-body);
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-cta:hover {
    background-color: var(--color-accent-light);
    border-color: var(--color-accent-dark);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(245, 124, 0, 0.3);
}

/* =============================================
   12. FORMULARIOS
   ============================================= */
.form-control:focus,
.form-select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 0.2rem rgba(245, 124, 0, 0.15);
}

label {
    font-family: var(--font-subtitle);
    font-weight: 600;
    color: var(--color-primary);
}

/* =============================================
   13. MODALES
   ============================================= */
.modal-header {
    background-color: var(--color-primary);
    border-bottom-color: var(--color-primary-light);
}

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

.modal-title {
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: 700;
}

/* =============================================
   14. BREADCRUMB
   ============================================= */
.breadcrumb {
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
}

.breadcrumb a {
    color: var(--color-primary);
}

.breadcrumb a:hover {
    color: var(--color-accent);
}

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

[data-bs-theme="dark"] .breadcrumb {
    background-color: #0e1c30;
    border-color: var(--color-border);
}

/* =============================================
   15. PAGINACIÓN
   ============================================= */
.pagination .page-link {
    color: var(--color-primary);
    border-color: var(--color-border);
}

.pagination .page-link:hover {
    background-color: rgba(245, 124, 0, 0.04);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.pagination .page-item.active .page-link {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* =============================================
   16. ICONOGRAFÍA CIRCULAR
   ============================================= */
.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--color-accent);
    color: var(--color-accent);
}

.icon-circle.filled {
    background-color: var(--color-accent);
    color: var(--color-white);
    border: none;
}

/* =============================================
   17. FOOTER
   ============================================= */
.app-footer {
    background-color: var(--color-white);
    border-top: 1px solid var(--color-border);
    color: var(--color-gray);
    font-size: 0.9rem;
}

[data-bs-theme="dark"] .app-footer {
    background-color: #0e1c30;
    border-top-color: var(--color-border);
    color: rgba(255, 255, 255, 0.7);
}

/* =============================================
   18. TABS
   ============================================= */
.nav-tabs .nav-link.active {
    border-bottom: 2px solid var(--color-accent);
    color: var(--color-primary);
    font-weight: 600;
}

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

/* =============================================
   19. TIPOGRAFÍA
   ============================================= */
body {
    font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.card-title, 
.modal-title {
    font-family: var(--font-heading);
}

/* =============================================
   20. FIXES PARA TRANSICIONES SUAVES TEMA
   ============================================= */
* {
    transition-property: background-color, border-color, color;
    transition-timing-function: ease;
    transition-duration: 0.2s;
}

button, a, input[type="submit"], input[type="reset"] {
    transition-property: background-color, border-color, box-shadow;
    transition-duration: 0.3s;
}