/**
 * HOJA DE ESTILOS ADMINISTRATIVA (BACKEND)
 * Panel de Control - Chronos Racing Team
 * 
 * Este archivo gestiona la apariencia de toda la interfaz de administración (/admin).
 * Comparte tokens de diseño con public.css para mantener coherencia de marca,
 * pero añade componentes específicos para gestión de datos (tablas complejas, logs, KPIs).
 */

:root {
    /* =========================================================================
       DEFINICIÓN DE VARIABLES (TOKENS DE DISEÑO)
       ========================================================================= */

    /* --- Paleta Principal de la Marca (Compartida) --- */
    /* Color rojo principal */
    --color-marca-primario: #FF0000;
    /* Color rojo oscuro para estados activos/hover */
    --color-marca-primario-oscuro: #cc0000;

    /* --- Variables Tema Claro (Light Mode) --- */
    /* Texto principal oscuro */
    --tema-claro-texto-principal: #212529;
    /* Fondo general claro */
    --tema-claro-fondo-principal: #f8f9fa;
    /* Fondo blanco para tarjetas y paneles */
    --tema-claro-fondo-superficie: #ffffff;
    /* Fondo gris suave para hovers */
    --tema-claro-fondo-hover: #e9ecef;
    /* Color de bordes estándar */
    --tema-claro-borde-normal: #dee2e6;

    /* --- Variables Tema Oscuro (Dark Mode) --- */
    /* Texto principal claro */
    --tema-oscuro-texto-principal: #f8f9fa;
    /* Texto secundario (gris claro) */
    --tema-oscuro-texto-secundario: #e9ecef;
    /* Fondo general oscuro (casi negro) */
    --tema-oscuro-fondo-principal: #121212;
    /* Fondo para superficies en modo oscuro */
    --tema-oscuro-fondo-superficie: #1e1e1e;
    /* Fondo para hovers en modo oscuro */
    --tema-oscuro-fondo-hover: #2d2d2d;
    /* Bordes en modo oscuro */
    --tema-oscuro-borde-normal: #444;

    /* --- Espaciado Base --- */
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;

    /* --- Variables de Aplicación (Referencias dinámicas) --- */
    /* Por defecto se cargan los valores del tema claro */
    --color-texto: var(--tema-claro-texto-principal);
    --color-fondo: var(--tema-claro-fondo-principal);
    --color-superficie: var(--tema-claro-fondo-superficie);
    --color-borde: var(--tema-claro-borde-normal);
    --color-hover: var(--tema-claro-fondo-hover);

    /* --- Variables para Componentes Específicos (Tablas Administrativas) --- */
    /* Fondo del encabezado de tabla */
    --tabla-fondo-encabezado: var(--tema-claro-texto-principal);
    /* Color del texto del encabezado */
    --tabla-texto-encabezado: var(--tema-claro-fondo-superficie);
    /* Fondo al pasar el mouse sobre fila */
    --tabla-fondo-fila-hover: #f0f2f5;
    /* Fondo al seleccionar fila */
    --tabla-fondo-fila-click: #f0f2f5;
    /* Hover sobre fila seleccionada */
    --tabla-fondo-fila-click-hover: #dfe3e7;
    /* Color base de texto para Bootstrap */
    --bs-body-color-rgb: 33, 37, 41;

    /* --- Variables Específicas del Layout Admin --- */
    /* Ancho de la barra lateral de navegación */
    --admin-sidebar-width: 250px;
    /* Altura de la barra superior */
    --admin-header-height: 60px;
}

/* =========================================================================
   CONFIGURACIÓN DE MODO OSCURO (OVERRIDE)
   ========================================================================= */
html[data-theme="dark"] {
    /* Reasignación de variables base a la paleta oscura */
    --color-texto: var(--tema-oscuro-texto-principal);
    --color-fondo: var(--tema-oscuro-fondo-principal);
    --color-superficie: var(--tema-oscuro-fondo-superficie);
    --color-borde: var(--tema-oscuro-borde-normal);
    --color-hover: var(--tema-oscuro-fondo-hover);

    /* Reasignación de variables de componentes */
    --tabla-fondo-encabezado: var(--tema-oscuro-texto-principal);
    --tabla-texto-encabezado: var(--tema-oscuro-fondo-principal);
    --tabla-fondo-fila-hover: #2f2f2f;
    --tabla-fondo-fila-click: #2c3034;
    --tabla-fondo-fila-click-hover: #3e444a;
    --bs-body-color-rgb: 248, 249, 250;
}

/* ==========================================================================
   ESTILOS GLOBALES BASE
   ========================================================================== */
body {
    background-color: var(--color-fondo);
    color: var(--color-texto);
    font-family: 'Roboto', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Mixin opcional para forzar body oscuro si es necesario específicamente */
html[data-theme="dark"] body {
    background-color: var(--tema-oscuro-fondo-principal);
    color: var(--tema-oscuro-texto-principal);
}

/* ==========================================================================
   COMPONENTES ADMINISTRATIVOS GENÉRICOS
   ========================================================================== */

/* --- Tarjetas (Cards) --- */
.card {
    /* Fondo de superficie (blanco/gris oscuro) */
    background-color: var(--tema-claro-fondo-superficie);
    /* Borde sutil */
    border: 1px solid var(--tema-claro-borde-normal);
    /* Sombra ligera para elevación */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Ajuste de cards en modo oscuro */
html[data-theme="dark"] .card {
    background-color: var(--tema-oscuro-fondo-superficie);
    border-color: var(--tema-oscuro-borde-normal);
}

/* --- Tablas Administrativas --- */
.table-responsive {
    /* Permite scroll horizontal si la tabla es muy ancha */
    overflow-x: auto;
}

.table-fixed-cols {
    /* Fuerza anchos de columna fijos para evitar saltos de layout */
    table-layout: fixed;
    width: 100%;
}

/* --- Utilidades de Ancho de Columna (Helpers) --- */
/* Se usan para reemplazar estilos inline style="width: X%" */
.col-w-5 {
    width: 5%;
}

.col-w-10 {
    width: 10%;
}

.col-w-15 {
    width: 15%;
}

.col-w-20 {
    width: 20%;
}

.col-w-25 {
    width: 25%;
}

.col-w-30 {
    width: 30%;
}

.col-w-35 {
    width: 35%;
}

.col-w-40 {
    width: 40%;
}

.col-w-50 {
    width: 50%;
}

/* --- Visualizador de Logs con Scroll --- */
.scrollable-logs {
    /* Altura máxima antes de activar scroll */
    max-height: 500px;
    overflow-y: auto;
    /* Fondo gris claro por defecto para logs */
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 4px;
    border: 1px solid var(--tema-claro-borde-normal);
}

/* Visualizador de Logs en Modo Oscuro */
html[data-theme="dark"] .scrollable-logs {
    background: #2d2d2d;
    border-color: var(--tema-oscuro-borde-normal);
}

/* --- Badges de Estado --- */
.badge-status {
    padding: 0.5em 0.75em;
    border-radius: 50rem;
    /* Pill shape */
    font-weight: 500;
}

/* --- Estilos de Impresión --- */
@media print {

    /* Ocultar elementos marcados como no imprimibles */
    .no-print {
        display: none !important;
    }

    /* Mostrar elementos exclusivos de impresión */
    .print-only {
        display: block !important;
    }

    /* Limpiar estilos de tarjeta para ahorrar tinta */
    .card {
        border: none !important;
        box-shadow: none !important;
    }
}

/* ==========================================================================
   ESTILOS DEL DASHBOARD (MIGRADOS)
   ========================================================================== */

/* --- Banner de Bienvenida --- */
.welcome-banner {
    /* Gradiente oscuro elegante */
    background: linear-gradient(135deg, #1e1e1e 0%, #343a40 100%);
    color: white;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

html[data-theme="dark"] .welcome-banner {
    /* Ajuste de gradiente para modo oscuro */
    background: linear-gradient(135deg, #121212 0%, #1e1e1e 100%);
    border: 1px solid #333;
}

/* --- Tarjetas de KPI (Indicadores Clave) --- */
.kpi-card {
    background: var(--tema-claro-fondo-superficie);
    border: 1px solid var(--tema-claro-borde-normal);
    border-radius: 10px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: transform 0.2s;
    /* Animación de hover */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

html[data-theme="dark"] .kpi-card {
    background: var(--tema-oscuro-fondo-superficie);
    border-color: var(--tema-oscuro-borde-normal);
}

.kpi-card:hover {
    /* Efecto de elevación al pasar el mouse */
    transform: translateY(-3px);
}

.kpi-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-right: 1rem;
}

.kpi-value {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.2rem;
}

.kpi-label {
    font-size: 0.85rem;
    color: #6c757d;
    font-weight: 500;
    text-transform: uppercase;
}

/* --- Tarjetas de Acción Principal (Accesos Directos) --- */
.action-card {
    background: var(--tema-claro-fondo-superficie);
    border: none;
    border-radius: 12px;
    overflow: hidden;
    /* Para contener la barra lateral de color */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 100%;
    text-decoration: none;
    /* Eliminar subrayado de enlace */
    color: var(--tema-claro-texto-principal);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    position: relative;
    display: flex;
    flex-direction: column;
}

html[data-theme="dark"] .action-card {
    background: var(--tema-oscuro-fondo-superficie);
    color: var(--tema-oscuro-texto-principal);
}

.action-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    color: inherit;
}

/* Barra lateral de color en la tarjeta */
.action-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    /* Ancho inicial delgado */
    height: 100%;
    background-color: var(--card-color);
    /* Color dinámico definido inline en HTML */
    transition: width 0.3s ease;
}

.action-card:hover::before {
    width: 8px;
    /* Se ensancha al hacer hover */
}

/* Contenedor del icono superior */
.action-icon-wrapper {
    padding: 1.5rem;
    background-color: var(--tema-claro-fondo-hover);
    text-align: center;
    font-size: 2.5rem;
    color: var(--card-color);
    transition: background-color 0.3s;
}

html[data-theme="dark"] .action-icon-wrapper {
    background-color: #2c3034;
}

.action-card:hover .action-icon-wrapper {
    filter: brightness(0.95);
    /* Oscurece ligeramente */
}

.action-body {
    padding: 1.5rem;
    flex-grow: 1;
    /* Ocupa el espacio restante */
}

.action-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.action-desc {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 0;
}

.action-footer {
    padding: 0 1.5rem 1.5rem;
}

/* --- Encabezados de Sección --- */
.section-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    margin-top: 2rem;
    border-bottom: 1px solid var(--tema-claro-borde-normal);
    padding-bottom: 0.5rem;
}

html[data-theme="dark"] .section-header {
    border-color: var(--tema-oscuro-borde-normal);
}

.section-title {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #adb5bd;
    margin: 0;
}

/* --- Alerta de Estado IA --- */
.ia-status-alert {
    background-color: #fff3cd;
    border-left: 5px solid #ffc107;
    /* Borde amarillo de advertencia */
    color: #856404;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: slideIn 0.5s ease-out;
}

html[data-theme="dark"] .ia-status-alert {
    background-color: #2c2715;
    border-color: #ffc107;
    color: #ffe69c;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   CORRECCIONES DE VISIBILIDAD (MODO OSCURO)
   Sincronizado desde public.css para asegurar legibilidad
   ========================================================================== */

html[data-theme='dark'] .card-body,
html[data-theme='dark'] .accordion-button:not(.collapsed) {
    /* Forzar texto blanco en cuerpos de tarjeta y acordeones activos */
    color: #ffffff !important;
}

html[data-theme='dark'] .text-muted {
    /* Aclarar texto "muted" que por defecto es muy oscuro en fondos negros */
    color: #c8c9ca !important;
}

/* Forzar color de encabezados en modo oscuro */
html[data-theme='dark'] h1,
html[data-theme='dark'] h2,
html[data-theme='dark'] h3,
html[data-theme='dark'] h4,
html[data-theme='dark'] h5,
html[data-theme='dark'] h6 {
    color: var(--tema-oscuro-texto-principal);
}