/**
 * =========================================================================
 * KONEXIA DESIGN SYSTEM - GLOBAL LIGHT THEME VARIABLES
 * =========================================================================
 * Estándar visual exclusivo en modo claro para el Portal de Profesionales.
 */

:root {
    /* Identidad y Paleta Base del Logotipo de Konexia */
    --primary-color: #1E7BF2;
    --primary-hover: #1A6CD5;
    --accent-color: #22C7C9;
    --color-primary: #1E7BF2;
    --color-primary-rgb: 30, 123, 242;
    --color-secondary: #22C7C9;
    --color-secondary-rgb: 34, 199, 201;

    /* Colores Semánticos */
    --color-success: #10B981;
    --color-success-rgb: 16, 185, 129;
    --color-warning: #F59E0B;
    --color-warning-rgb: 245, 158, 11;
    --color-danger: #EF4444;
    --color-danger-rgb: 239, 68, 68;
    --color-info: #3B82F6;
    --color-info-rgb: 59, 130, 246;

    /* Jerarquía Visual - Fondos y Superficies Claras */
    --background-page: #F8FAFC;
    --background-surface: #FFFFFF;
    --background-card: #FFFFFF;
    --background-secondary: #F1F5F9;
    --bg-level-1: #F8FAFC;
    --bg-level-2: #FFFFFF;
    --bg-level-3: #FFFFFF;
    --bg-level-3-elevated: #F1F5F9;

    /* Tipografía y Contraste */
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-muted: #94A3B8;
    
    /* Bordes y Separadores */
    --border-color: #E2E8F0;
    --border-color-hover: #CBD5E1;
    
    /* Estructura de Navegación */
    --sidebar-bg: #FFFFFF;
    --sidebar-text: #475569;
    --sidebar-hover: #F1F5F9;
    --sidebar-active-bg: #1E7BF2;
    --sidebar-active-text: #FFFFFF;

    --header-bg: #FFFFFF;
    --footer-bg: #FFFFFF;

    /* Sombras y Efectos */
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    
    --hover-overlay: rgba(30, 123, 242, 0.05);
    --focus-ring: rgba(30, 123, 242, 0.25);
}

body {
    background-color: var(--background-page) !important;
    color: var(--text-primary) !important;
}

/* Tarjetas (Cards) */
.card {
    background-color: var(--background-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
    color: var(--text-primary) !important;
    border-radius: 12px;
}
.card-header, .card-footer {
    background-color: transparent !important;
    border-color: var(--border-color) !important;
}

/* Cabeceras, Navbars y Sidebars */
.app-header, .navbar {
    background-color: var(--header-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}
.app-footer {
    background-color: var(--footer-bg) !important;
    border-top: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
}
.app-sidebar {
    background-color: var(--sidebar-bg) !important;
    border-right: 1px solid var(--border-color) !important;
}
.app-sidebar .sidebar-brand {
    background-color: var(--sidebar-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
}
.app-sidebar .nav-link {
    color: var(--sidebar-text) !important;
}
.app-sidebar .nav-link:hover {
    background-color: var(--sidebar-hover) !important;
    color: var(--primary-color) !important;
}
.app-sidebar .nav-link.active {
    background-color: var(--sidebar-active-bg) !important;
    color: var(--sidebar-active-text) !important;
    box-shadow: 0 4px 10px rgba(30, 123, 242, 0.25) !important;
}

/* Formularios e Inputs */
.form-control, .form-select, .form-check-input {
    background-color: var(--background-surface) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.25rem var(--focus-ring) !important;
    outline: none !important;
}
.form-control:disabled, .form-select:disabled {
    background-color: var(--background-secondary) !important;
    color: var(--text-muted) !important;
    opacity: 0.7;
}

/* Botones Personalizados */
.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #FFFFFF !important;
}
.btn-primary:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}
.btn-secondary {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: #FFFFFF !important;
}
.btn-secondary:hover {
    background-color: #1EAFB1 !important;
    border-color: #1EAFB1 !important;
}

/* Tablas */
.table {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
.table th {
    background-color: var(--background-page) !important;
    color: var(--text-secondary) !important;
    border-bottom: 2px solid var(--border-color) !important;
    font-weight: 600;
}
.table td {
    background-color: var(--background-surface) !important;
    border-bottom: 1px solid var(--border-color) !important;
}
.table-hover tbody tr:hover td {
    background-color: var(--hover-overlay) !important;
}

/* DataTables */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
    background: var(--background-surface) !important;
    border-radius: 6px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--primary-color) !important;
    color: #FFFFFF !important;
    border-color: var(--primary-color) !important;
}

/* Modales */
.modal-content {
    background-color: var(--background-surface) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-lg) !important;
    color: var(--text-primary) !important;
}
.modal-header, .modal-footer {
    border-color: var(--border-color) !important;
}

/* FullCalendar */
.fc {
    --fc-border-color: var(--border-color) !important;
    --fc-daygrid-event-dot-color: var(--primary-color) !important;
    color: var(--text-primary) !important;
}
.fc-theme-standard td, .fc-theme-standard th {
    border-color: var(--border-color) !important;
}
.fc .fc-col-header-cell {
    background-color: var(--background-page) !important;
    color: var(--text-secondary) !important;
}
.fc .fc-day-today {
    background-color: var(--hover-overlay) !important;
}
.fc-event {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #FFFFFF !important;
}
.fc-event:hover {
    background-color: var(--primary-hover) !important;
    cursor: pointer;
}