/* ═══════════════════════════════════════════════════════════════════
   PALETA ESPAÑA — Colegio España de Puebla
   Rojo  #c60b1e  |  Oro  #f5c518  |  Azul Real  #1d4289  |  Blanco
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* ── Primario: Rojo España ── */
    --bs-primary:                  #c60b1e;
    --bs-primary-rgb:              198, 11, 30;
    --bs-primary-bg-subtle:        #fbe8eb;
    --bs-primary-border-subtle:    #f4b0b7;
    --bs-primary-text-emphasis:    #7a0711;

    /* ── Secundario: Azul Real ── */
    --bs-secondary:                #1d4289;
    --bs-secondary-rgb:            29, 66, 137;
    --bs-secondary-bg-subtle:      #e8edf7;
    --bs-secondary-border-subtle:  #a8bcdf;
    --bs-secondary-text-emphasis:  #0e2150;

    /* ── Warning: Oro España ── */
    --bs-warning:                  #e6b800;
    --bs-warning-rgb:              230, 184, 0;
    --bs-warning-bg-subtle:        #fef9e3;
    --bs-warning-border-subtle:    #f9e07a;
    --bs-warning-text-emphasis:    #6e4600;

    /* ── Info: Azul cobalto ── */
    --bs-info:                     #2563eb;
    --bs-info-rgb:                 37, 99, 235;
    --bs-info-bg-subtle:           #e8f0fd;
    --bs-info-border-subtle:       #a8c4f9;
    --bs-info-text-emphasis:       #1230a0;

    /* ── Success: Verde real ── */
    --bs-success:                  #16a34a;
    --bs-success-rgb:              22, 163, 74;
    --bs-success-bg-subtle:        #e8f7ee;
    --bs-success-border-subtle:    #94d4b0;
    --bs-success-text-emphasis:    #0b5226;

    /* ── Danger: Rojo intenso ── */
    --bs-danger:                   #b91c1c;
    --bs-danger-rgb:               185, 28, 28;
    --bs-danger-bg-subtle:         #fde8e8;
    --bs-danger-border-subtle:     #f5aaaa;
    --bs-danger-text-emphasis:     #7f1d1d;

    /* ── Colores adicionales del tema (fallback para variables usadas en el tema) ── */
    --bs-grape:   #1d4289;
    --bs-indigo:  #1d4289;
    --bs-violet:  #2563eb;
    --bs-aqua:    #0891b2;
    --bs-navy:    #1d4289;

    /* ── Links ── */
    --bs-link-color:               #c60b1e;
    --bs-link-color-rgb:           198, 11, 30;
    --bs-link-hover-color:         #8f0815;

    /* ── Topbar: mismo fondo que el contenido ── */
    --topbar-bg:                   #f7f4f1;
    --topbar-color:                #3d3d3d;

    /* ── Sidebar: blanco limpio ── */
    --sidebar-bg:                  #ffffff;
    --sidebar-color:               #3d3d3d;
    --nav-link-color:              #4a4a4a;
    --nav-link-hover-bg:           #fbe8eb;
    --nav-link-active-color:       #c60b1e;
    --nav-link-active-bg:          #fbe8eb;
    --nav-section-text-color:      #a8a8a8;

    /* ── Fondo contenido: crema cálido ── */
    --content-wrapper-bg:          #f7f4f1;
    --content-wrapper-color:       #252525;

    /* ── Footer ── */
    --footer-bg:                   #f7f4f1;
    --footer-color:                #6a6a6a;
}

/* ── Topbar: iconos y controles en oscuro ── */
.topbar { border-bottom: 3px solid #e6b800; }
.topbar .btn,
.topbar .nav-link,
.topbar a:not(.dropdown-item),
.topbar [class*="ri-"] {
    color: #4a4a4a !important;
}
.topbar .btn:hover,
.topbar .nav-link:hover,
.topbar a:not(.dropdown-item):hover {
    color: #c60b1e !important;
    background-color: rgba(198, 11, 30, 0.08) !important;
    border-radius: 0.375rem;
}
.topbar .dropdown-menu {
    border-top: 3px solid #c60b1e;
}
.topbar .dropdown-item { color: #3d3d3d !important; }
.topbar .dropdown-item:hover { background-color: #fbe8eb !important; color: #c60b1e !important; }

/* ── Sidebar: franja dorada sobre ítem activo ── */
.sidebar .nav-link.active,
.sidebar .nav-tree .nav-link.active {
    border-left: 3px solid #e6b800 !important;
    font-weight: 600;
}
.sidebar .brand-logo,
.sidebar .sidebar-brand {
    border-bottom: 2px solid #f0f0f0;
}

/* Bootstrap ya usa var(--bs-primary) para bg-primary — no sobreescribir con !important
   para no romper bg-opacity-* y otras utilidades de opacidad */

/* ── Botones: ajustar hover/focus ── */
.btn-primary {
    --bs-btn-bg:            #c60b1e;
    --bs-btn-border-color:  #c60b1e;
    --bs-btn-hover-bg:      #a50918;
    --bs-btn-hover-border-color: #a50918;
    --bs-btn-active-bg:     #8f0815;
    --bs-btn-focus-shadow-rgb: 198, 11, 30;
}
.btn-outline-primary {
    --bs-btn-color:         #c60b1e;
    --bs-btn-border-color:  #c60b1e;
    --bs-btn-hover-bg:      #c60b1e;
    --bs-btn-hover-border-color: #c60b1e;
    --bs-btn-active-bg:     #a50918;
}
.btn-secondary {
    --bs-btn-bg:            #1d4289;
    --bs-btn-border-color:  #1d4289;
    --bs-btn-hover-bg:      #163370;
    --bs-btn-hover-border-color: #163370;
    --bs-btn-focus-shadow-rgb: 29, 66, 137;
}
.btn-warning {
    --bs-btn-color:         #3d2a00;
    --bs-btn-bg:            #e6b800;
    --bs-btn-border-color:  #e6b800;
    --bs-btn-hover-bg:      #c9a000;
    --bs-btn-hover-border-color: #c9a000;
}

/* ── Alertas ── */
.alert-primary {
    background-color: #fbe8eb;
    border-color: #f4b0b7;
    color: #7a0711;
}
.alert-warning {
    background-color: #fef9e3;
    border-color: #f9e07a;
    color: #6e4600;
}

/* ── Cards: borde superior primario ── */
.card.border-left-primary { border-left: 0.25rem solid #c60b1e !important; }
.card.border-left-warning  { border-left: 0.25rem solid #e6b800 !important; }
.card.border-left-info     { border-left: 0.25rem solid #2563eb !important; }
.card.border-left-success  { border-left: 0.25rem solid #16a34a !important; }

/* ── Texto de colores ── */
.text-primary   { color: #c60b1e !important; }
.text-secondary { color: #1d4289 !important; }
/* warning text: marrón-ámbar oscuro para ser legible sobre fondos claros */
.text-warning   { color: #7a5000 !important; }

/* ── bg-warning siempre texto oscuro (amarillo → fondo claro) ── */
.bg-warning,
.bg-warning-subtle,
[class*="bg-warning"] { color: #3d2a00 !important; }

/* ── Badges warning: texto oscuro garantizado ── */
.badge.bg-warning,
.badge.text-warning,
.badge.bg-warning-subtle { color: #3d2a00 !important; }

/* ── Alertas warning ── */
.alert-warning,
.alert.bg-warning-soft,
.alert.border-warning { color: #5c3d00 !important; }

/* ── Gradientes actualizados ── */
.bg-gradient-primary {
    background: linear-gradient(135deg, #c60b1e 0%, #8f0815 100%) !important;
}
.bg-gradient-secondary {
    background: linear-gradient(135deg, #1d4289 0%, #0e2150 100%) !important;
    color: white !important;
}
.bg-gradient-warning {
    background: linear-gradient(135deg, #f5c518 0%, #e6a817 100%) !important;
    color: #3d2a00 !important;
}

/* ── text-bg-warning: Bootstrap auto-calcula texto oscuro sobre oro ── */
/* Bootstrap 5.3 determina el color de texto en text-bg-* por contraste automáticamente */

/* ── Modo oscuro: mantener coherencia ── */
[data-bs-theme="dark"] {
    /* Paleta subtle para dark mode */
    --bs-primary-bg-subtle:        rgba(198, 11, 30, 0.2);
    --bs-primary-border-subtle:    rgba(198, 11, 30, 0.4);
    --bs-primary-text-emphasis:    #f08090;
    --bs-secondary-bg-subtle:      rgba(29, 66, 137, 0.2);
    --bs-secondary-border-subtle:  rgba(29, 66, 137, 0.4);
    --bs-secondary-text-emphasis:  #8aabdf;
    --bs-warning-bg-subtle:        rgba(230, 184, 0, 0.2);
    --bs-warning-border-subtle:    rgba(230, 184, 0, 0.4);
    --bs-warning-text-emphasis:    #ffe066;
    --bs-success-bg-subtle:        rgba(22, 163, 74, 0.2);
    --bs-success-border-subtle:    rgba(22, 163, 74, 0.4);
    --bs-success-text-emphasis:    #6ee79a;
    --bs-danger-bg-subtle:         rgba(185, 28, 28, 0.2);
    --bs-danger-border-subtle:     rgba(185, 28, 28, 0.4);
    --bs-danger-text-emphasis:     #f08080;
    --bs-info-bg-subtle:           rgba(37, 99, 235, 0.2);
    --bs-info-border-subtle:       rgba(37, 99, 235, 0.4);
    --bs-info-text-emphasis:       #93bbfd;

    --topbar-bg:            #1a1a1a;
    --sidebar-bg:           #1a1a2e;
    --nav-link-color:       #d0d0d0;
    --nav-link-hover-bg:    rgba(198, 11, 30, 0.2);
    --nav-link-active-color:#ff6b7a;
    --nav-link-active-bg:   rgba(198, 11, 30, 0.25);
    --content-wrapper-bg:   #121212;
    --footer-bg:            #1a1a1a;
}

/* =============================================== */
/* FIX DATATABLES — SELECT "MOSTRAR N REGISTROS"   */
/* El tema aplica width:100% + display:block a      */
/* .form-select, lo que comprime el select inline.  */
/* =============================================== */
.dataTables_length label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    margin-bottom: 0;
}

.dataTables_length select {
    width: auto !important;
    display: inline-block !important;
    min-width: 72px !important;
    padding-right: 2.25rem !important;
}

/* Buscador inline con botones — quita el margin-bottom del label y alinea el input */
.dataTables_filter {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

.dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    margin-bottom: 0;
}

.dataTables_filter input {
    width: 200px;
}

/* =============================================== */
/* FIX PARA MENÚ DE BOTONES DE DATATABLES INVISIBLE */
/* =============================================== */
div.dt-button-collection.dropdown-menu {
    display: block;
    background-color: white !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175) !important;
    z-index: 2002 !important; /* Un valor muy alto para asegurar que esté encima de todo */
}

/* Estilo para los botones dentro del menú */
div.dt-button-collection .dt-button {
    color: #212529 !important;
    background: transparent !important;
}

/* =============================================== */
/* UTILIDADES DE GRADIENTE — Tema Astero Admin     */
/* =============================================== */
.bg-gradient-danger {
    background: linear-gradient(135deg, var(--bs-danger) 0%, #7f1d1d 100%) !important;
    color: white !important;
}

.bg-gradient-success {
    background: linear-gradient(135deg, var(--bs-success) 0%, #0b5226 100%) !important;
    color: white !important;
}

.bg-gradient-info {
    background: linear-gradient(135deg, var(--bs-info) 0%, #1230a0 100%) !important;
    color: white !important;
}

.bg-gradient-dark {
    background: linear-gradient(135deg, var(--bs-gray-800) 0%, var(--bs-dark) 100%) !important;
    color: white !important;
}

/* =============================================== */
/* UTILIDADES DE TAMAÑO PARA REMIX ICONS           */
/* =============================================== */
.ri-xs { font-size: 0.75rem; }
.ri-sm { font-size: 0.875rem; }
.ri-lg { font-size: 1.33rem; }
.ri-xl { font-size: 1.5rem; }
.ri-2x { font-size: 2rem; }
.ri-3x { font-size: 3rem; }