/* custom_admin.css - Diseño Elegante Colo-Colo */
/* Paleta: Negro, Blanco, Rojo #E31E24, Dorado #D4AF37, Escala de grises */

/* ===== VARIABLES ===== */
:root {
    --color-negro: #000000;
    --color-rojo: #E31E24;
    --color-dorado: #D4AF37;
    --color-blanco: #FFFFFF;
    --gris-oscuro: #1a1a1a;
    --gris-medio: #2a2a2a;
    --gris-claro: #f5f5f5;
    --gris-border: #e0e0e0;
}

/* ===== RESETEO Y BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--gris-claro);
    color: var(--gris-oscuro);
}

/* ===== HEADER PRINCIPAL ===== */
#header {
    background: linear-gradient(135deg, var(--color-negro) 0%, var(--gris-oscuro) 100%);
    border-bottom: 3px solid var(--color-rojo);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    padding: 12px 20px;
}

/* Logo en header */
#branding {
    display: flex;
    align-items: center;
    gap: 16px;
}

#branding img.logo-header {
    height: 50px;
    width: auto;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
}

#branding h1 {
    color: var(--color-blanco);
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    margin: 0;
}

#branding h1 a:link,
#branding h1 a:visited {
    color: var(--color-blanco);
}

#branding h1 a:hover {
    color: var(--color-dorado);
}

/* Sistema de Gestión Integral */
#branding h2 {
    color: var(--color-dorado);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
}

/* ===== USER TOOLS (Bienvenido, Admin, etc) ===== */
#user-tools {
    background: transparent;
    padding: 12px 20px;
}

#user-tools a {
    color: var(--color-blanco);
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

#user-tools a:hover {
    background: var(--color-rojo);
    border-color: var(--color-dorado);
    color: var(--color-blanco);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(227, 30, 36, 0.4);
}

/* ===== BOTONES DASHBOARD Y ADMIN CLÁSICO ===== */
.button,
a.button,
input[type="submit"],
input[type="button"],
.submit-row input {
    background: linear-gradient(135deg, var(--color-negro) 0%, var(--gris-oscuro) 100%);
    color: var(--color-blanco) !important;
    border: 1px solid var(--color-dorado);
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    text-decoration: none;
}

.button:hover,
a.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background: linear-gradient(135deg, var(--color-rojo) 0%, #c91920 100%);
    border-color: var(--color-dorado);
    color: var(--color-blanco) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(227, 30, 36, 0.4);
}

/* Botón Dashboard destacado */
a.button[href*="dashboard"] {
    background: linear-gradient(135deg, var(--color-rojo) 0%, #c91920 100%);
    border: 2px solid var(--color-dorado);
    box-shadow: 0 4px 15px rgba(227, 30, 36, 0.5);
}

/* ===== BOTONES EN TABLAS (más compactos) ===== */
#result_list .button,
#result_list a.button,
table .button,
table a.button {
    padding: 5px 12px;
    font-size: 11px;
    letter-spacing: 0.5px;
}

/* ===== NAVEGACIÓN LATERAL (MENÚ) ===== */
#content-main {
    background: var(--color-blanco);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Módulos del menú */
.module {
    background: var(--color-blanco);
    border: 1px solid var(--gris-border);
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.module:hover {
    border-color: var(--color-rojo);
    box-shadow: 0 4px 16px rgba(227, 30, 36, 0.15);
}

/* Títulos de sección (GESTIÓN DE ALUMNOS, PAGOS, etc) */
.module h2,
.module caption,
caption {
    background: linear-gradient(135deg, var(--color-negro) 0%, var(--gris-oscuro) 100%);
    color: var(--color-blanco) !important;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 14px 20px;
    border-bottom: 2px solid var(--color-rojo);
}

/* Asegurar que texto en fondos oscuros sea blanco */
.module h2 a,
.module caption a,
caption a {
    color: var(--color-blanco) !important;
}

.module h2 a:hover,
.module caption a:hover,
caption a:hover {
    color: var(--color-dorado) !important;
}

/* Items del menú */
.module table,
.module ul {
    background: var(--color-blanco);
}

.module th {
    background: var(--gris-claro);
    color: var(--gris-oscuro);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 12px;
    border-bottom: 2px solid var(--gris-border);
}

.module td {
    border-bottom: 1px solid var(--gris-border);
    padding: 12px;
}

.module tr:hover td {
    background: var(--gris-claro);
}

/* Enlaces en el menú */
.module a {
    color: var(--gris-oscuro);
    font-weight: 500;
    transition: all 0.2s ease;
}

.module a:hover {
    color: var(--color-rojo);
    padding-left: 8px;
}

/* Botones Añadir (verde eliminado) */
.addlink,
a.addlink {
    background: var(--color-negro);
    color: var(--color-blanco) !important;
    padding: 10px 20px;
    border-radius: 6px;
    border: 1px solid var(--color-dorado);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.addlink:hover,
a.addlink:hover {
    background: var(--color-rojo);
    color: var(--color-blanco) !important;
    border-color: var(--color-dorado);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(227, 30, 36, 0.3);
}

/* ===== TABLAS ===== */
#result_list {
    border: 1px solid var(--gris-border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

#result_list thead th {
    background: linear-gradient(135deg, var(--color-negro) 0%, var(--gris-oscuro) 100%);
    color: var(--color-blanco) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 14px;
    border-bottom: 2px solid var(--color-rojo);
}

#result_list thead th a,
#result_list thead th a:link,
#result_list thead th a:visited {
    color: var(--color-blanco) !important;
}

#result_list thead th a:hover {
    color: var(--color-dorado) !important;
}

/* ===== FORZAR TEXTO BLANCO EN FONDOS OSCUROS ===== */
#result_list thead th,
#result_list thead th *,
.module h2,
.module h2 *,
.module caption,
.module caption *,
caption,
caption *,
#changelist-filter h2,
#changelist-filter h2 * {
    color: var(--color-blanco) !important;
}

#result_list tbody tr {
    transition: all 0.2s ease;
}

#result_list tbody tr:nth-child(even) {
    background: #fafafa;
}

#result_list tbody tr:hover {
    background: var(--gris-claro);
    border-left: 3px solid var(--color-rojo);
}

#result_list tbody td {
    padding: 12px;
    border-bottom: 1px solid var(--gris-border);
}

/* Enlaces en tablas */
#result_list a {
    color: var(--gris-oscuro);
    font-weight: 500;
}

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

/* Botones en celdas de tabla - asegurar texto blanco */
#result_list td .button,
#result_list td a.button {
    color: var(--color-blanco) !important;
}

/* ===== BREADCRUMBS ===== */
.breadcrumbs {
    background: var(--gris-claro);
    border-bottom: 1px solid var(--gris-border);
    padding: 12px 20px;
    font-size: 13px;
}

.breadcrumbs a {
    color: var(--gris-oscuro);
    font-weight: 500;
}

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

/* ===== FILTROS LATERALES ===== */
#changelist-filter {
    background: var(--color-blanco);
    border: 1px solid var(--gris-border);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

#changelist-filter h2 {
    background: linear-gradient(135deg, var(--color-negro) 0%, var(--gris-oscuro) 100%);
    color: var(--color-blanco) !important;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid var(--color-rojo);
}

#changelist-filter h3 {
    color: var(--gris-oscuro);
    font-weight: 600;
    padding: 10px 16px;
    background: var(--gris-claro);
    border-bottom: 1px solid var(--gris-border);
}

#changelist-filter a {
    color: var(--gris-oscuro);
    padding: 8px 16px;
    display: block;
    transition: all 0.2s ease;
}

#changelist-filter a:hover {
    background: var(--gris-claro);
    color: var(--color-rojo);
    padding-left: 24px;
}

#changelist-filter a.selected {
    background: var(--color-negro);
    color: var(--color-blanco);
    border-left: 3px solid var(--color-rojo);
}

/* ===== MENSAJES ===== */
.messagelist {
    list-style: none;
    margin: 0 0 20px 0;
}

.messagelist li {
    padding: 14px 20px;
    border-radius: 6px;
    margin-bottom: 10px;
    border-left: 4px solid;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.messagelist .success {
    background: #f5f5f5;
    border-left-color: var(--color-dorado);
    color: var(--gris-oscuro);
}

.messagelist .warning {
    background: #fff8e1;
    border-left-color: var(--color-dorado);
    color: var(--gris-oscuro);
}

.messagelist .error {
    background: #ffebee;
    border-left-color: var(--color-rojo);
    color: var(--gris-oscuro);
}

/* ===== FORMULARIOS ===== */
.form-row {
    border-bottom: 1px solid var(--gris-border);
    padding: 16px 0;
}

.form-row label {
    color: var(--gris-oscuro);
    font-weight: 600;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
select,
textarea {
    border: 1px solid var(--gris-border);
    border-radius: 4px;
    padding: 10px;
    transition: all 0.3s ease;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
    border-color: var(--color-rojo);
    box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.1);
    outline: none;
}

/* ===== PAGINACIÓN ===== */
.paginator {
    color: var(--gris-oscuro);
    padding: 16px;
}

.paginator a {
    background: var(--color-blanco);
    border: 1px solid var(--gris-border);
    color: var(--gris-oscuro);
    padding: 8px 14px;
    border-radius: 4px;
    margin: 0 4px;
    transition: all 0.2s ease;
}

.paginator a:hover {
    background: var(--color-negro);
    color: var(--color-blanco);
    border-color: var(--color-rojo);
}

.paginator .this-page {
    background: var(--color-rojo);
    color: var(--color-blanco);
    padding: 8px 14px;
    border-radius: 4px;
    font-weight: 600;
}

/* ===== BADGES Y ETIQUETAS ===== */
.badge {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-activo {
    background: var(--gris-oscuro);
    color: var(--color-blanco);
    border: 1px solid var(--color-dorado);
}

.badge-pendiente {
    background: var(--gris-claro);
    color: var(--gris-oscuro);
    border: 1px solid var(--gris-border);
}

.badge-pagado {
    background: var(--color-negro);
    color: var(--color-dorado);
    border: 1px solid var(--color-dorado);
}

.badge-vencido {
    background: var(--color-rojo);
    color: var(--color-blanco);
}

/* ===== ACCIONES (Checkboxes) ===== */
.action-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid var(--gris-border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-checkbox:checked {
    background: var(--color-rojo);
    border-color: var(--color-rojo);
}

/* ===== TOOLTIPS Y AYUDA ===== */
.help {
    color: #888;
    font-size: 12px;
    font-style: italic;
}

/* ===== DASHBOARD ESPECÍFICO ===== */
.dashboard .module {
    background: var(--color-blanco);
    border: 1px solid var(--gris-border);
    border-left: 4px solid var(--color-rojo);
}

.dashboard .module:hover {
    border-left-color: var(--color-dorado);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .button,
    a.button {
        padding: 6px 12px;
        font-size: 11px;
    }
    
    .module h2 {
        font-size: 12px;
        padding: 12px 16px;
    }
}

/* ===== ANIMACIONES ===== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.module {
    animation: fadeIn 0.3s ease-out;
}

/* ===== SCROLLBAR PERSONALIZADO ===== */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--gris-claro);
}

::-webkit-scrollbar-thumb {
    background: var(--gris-medio);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-rojo);
}

/* ===== DETALLES FINALES ===== */
.object-tools {
    float: right;
}

.object-tools li {
    display: inline-block;
    margin-left: 10px;
}

/* Efecto de profundidad en cards */
.card-elegante {
    background: var(--color-blanco);
    border: 1px solid var(--gris-border);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.card-elegante:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: var(--color-rojo);
}

/* Acentos dorados sutiles */
.acento-dorado {
    color: var(--color-dorado);
    font-weight: 600;
}

.linea-dorada {
    height: 2px;
    background: linear-gradient(90deg, var(--color-dorado) 0%, transparent 100%);
    margin: 20px 0;
}

/* ===== CORRECCIÓN ADICIONAL: TEXTO EN BOTONES ===== */
/* Asegurar que TODOS los botones tengan texto blanco */
.button,
.button *,
a.button,
a.button *,
input[type="submit"],
input[type="button"],
.submit-row input,
#result_list .button,
#result_list a.button,
table .button,
table a.button {
    color: var(--color-blanco) !important;
}

/* Iconos de ordenamiento en headers */
#result_list thead th .text span,
#result_list thead th a span {
    color: var(--color-blanco) !important;
}

/* ===== CORRECCIÓN SELECTORES IMPORT/EXPORT ===== */
/* Selector de formato en exportación */
#id_format,
select[name="format"],
select[name="file_format"],
.import-export select,
form#export-form select,
form select[name="format"] {
    color: #000 !important;
    background-color: #fff !important;
    min-width: 200px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    height: auto !important;
    border: 1px solid var(--gris-border) !important;
    border-radius: 4px !important;
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    appearance: menulist !important;
}

/* Opciones dentro del selector */
#id_format option,
select[name="format"] option,
select[name="file_format"] option {
    color: #000 !important;
    background-color: #fff !important;
    padding: 8px !important;
}

/* Selector cuando tiene foco */
#id_format:focus,
select[name="format"]:focus {
    border-color: var(--color-rojo) !important;
    box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.1) !important;
    outline: none !important;
}

/* Contenedor del formulario de exportación */
form#export-form,
.export-form {
    padding: 20px;
}

form#export-form label,
.export-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--gris-oscuro);
}

/* Corregir TODOS los selects en el admin */
#content select,
#content-main select,
.form-row select,
fieldset select {
    color: #000 !important;
    background-color: #fff !important;
    min-width: 150px;
    padding: 8px 10px;
    border: 1px solid var(--gris-border);
    border-radius: 4px;
    font-size: 14px;
}

/* Select2 si está instalado */
.select2-container--default .select2-selection--single {
    min-height: 38px !important;
    border: 1px solid var(--gris-border) !important;
    border-radius: 4px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #000 !important;
    line-height: 36px !important;
    padding-left: 10px !important;
}

.select2-dropdown {
    border: 1px solid var(--gris-border) !important;
}

.select2-results__option {
    color: #000 !important;
    padding: 8px 10px !important;
}

.select2-results__option--highlighted {
    background-color: var(--color-rojo) !important;
    color: #fff !important;
}

/* ===== CORRECCIÓN INPUTS EN FORMULARIOS ===== */
/* Fondo oscuro para inputs en el admin */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="tel"],
input[type="url"],
select,
textarea,
.vTextField,
.vDateField,
.vTimeField,
.vURLField,
.vIntegerField,
.vBigIntegerField,
.vPositiveIntegerField,
.vPositiveSmallIntegerField {
    background-color: #1a1a1a !important;
    color: #fff !important;
    border: 1px solid #3a3a3a !important;
}

/* Placeholder en inputs */
input::placeholder,
textarea::placeholder {
    color: #888 !important;
}

/* Inputs deshabilitados o readonly */
input[readonly],
input[disabled],
select[disabled],
textarea[readonly],
textarea[disabled] {
    background-color: #2a2a2a !important;
    color: #999 !important;
}

/* Select options */
select option {
    background-color: #1a1a1a !important;
    color: #fff !important;
}

/* Focus en inputs */
input:focus,
select:focus,
textarea:focus {
    border-color: #E31E24 !important;
    box-shadow: 0 0 0 2px rgba(227, 30, 36, 0.2) !important;
    outline: none !important;
}

/* ===== AJUSTE DE COLUMNAS EN LISTA DE ALUMNOS ===== */
/* Columna código más angosta */
.model-student #result_list th.column-code,
.model-student #result_list td.column-code {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
}

/* Columna contrato - botones en una línea */
.model-student #result_list th.column-botones_contrato,
.model-student #result_list td.column-botones_contrato {
    white-space: nowrap !important;
    width: auto !important;
}

/* ===== FIX SELECTS EN TEMA OSCURO ===== */
select,
.filtros-container select,
#changelist-filter select,
form select {
    background-color: white !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
}

select option {
    background-color: white !important;
    color: #333 !important;
}

/* ===== FIX ALTURA DE SELECTS ===== */
select,
.filtros-container select,
#changelist-filter select,
form select {
    height: auto !important;
    min-height: 38px !important;
    padding: 8px 12px !important;
    line-height: 1.4 !important;
    font-size: 14px !important;
    vertical-align: middle !important;
}