/**
 * RutaTurismo360 - Temas y Estilos Globales
 * 
 * Este archivo contiene todas las configuraciones de color y tema
 * para mantener consistencia en toda la aplicación.
 */

/* ============================
   TEMAS DE COLOR PREDEFINIDOS
   ============================ */

/* Tema Principal: Púrpura-Rosa (Actual) */
:root {
    --theme-name: "Purple-Pink";
    --primary-color: #667eea;
    --primary-dark: #764ba2;
    --secondary-color: #f093fb;
    --accent-color: #f5a623;
}

/* Tema Alternativo: Azul-Verdoso */
:root[data-theme="ocean"] {
    --primary-color: #0ea5e9;
    --primary-dark: #0369a1;
    --secondary-color: #06b6d4;
    --accent-color: #14b8a6;
}

/* Tema Alternativo: Verde-Naranja */
:root[data-theme="forest"] {
    --primary-color: #22c55e;
    --primary-dark: #16a34a;
    --secondary-color: #84cc16;
    --accent-color: #fb923c;
}

/* Tema Alternativo: Rojo-Carmín */
:root[data-theme="sunset"] {
    --primary-color: #ef4444;
    --primary-dark: #dc2626;
    --secondary-color: #f97316;
    --accent-color: #ec4899;
}

/* ============================
   COLORES SEMÁNTICOS GLOBALES
   ============================ */

:root {
    /* Colores Base */
    --success-color: #4caf50;
    --warning-color: #ff9800;
    --danger-color: #f44336;
    --info-color: #2196f3;

    /* Fondos */
    --background-light: #f5f7fa;
    --background-white: #ffffff;
    --background-dark: #696969;
    --background-disabled: #f0f0f0;

    /* Bordes */
    --border-color: #e0e0e0;
    --border-dark: #999;

    /* Texto */
    --text-dark: #333;
    --text-light: #999;
    --text-lighter: #ccc;
    --text-white: #ffffff;

    /* Sombras */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.3);

    /* Transiciones */
    --transition: all 0.3s ease;
    --transition-fast: all 0.15s ease;
    --transition-slow: all 0.5s ease;

    /* Espaciado */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-2xl: 32px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Dimensiones */
    --sidebar-width: 260px;
    --sidebar-width-collapsed: 80px;
    --header-height: 70px;
}

/* ============================
   ESCALAS DE COLORES
   ============================ */

/* Escala Primary */
:root {
    --primary-50: rgba(102, 126, 234, 0.05);
    --primary-100: rgba(102, 126, 234, 0.1);
    --primary-200: rgba(102, 126, 234, 0.2);
    --primary-300: rgba(102, 126, 234, 0.3);
    --primary-400: rgba(102, 126, 234, 0.4);
    --primary-500: #667eea;
    --primary-600: #764ba2;
    --primary-700: #5a3c8f;
    --primary-800: #3a2660;
    --primary-900: #1a1230;
}

/* Escala Success */
:root {
    --success-50: rgba(76, 175, 80, 0.05);
    --success-100: rgba(76, 175, 80, 0.1);
    --success-200: rgba(76, 175, 80, 0.2);
    --success-500: #4caf50;
    --success-600: #388e3c;
}

/* Escala Warning */
:root {
    --warning-50: rgba(255, 152, 0, 0.05);
    --warning-100: rgba(255, 152, 0, 0.1);
    --warning-200: rgba(255, 152, 0, 0.2);
    --warning-500: #ff9800;
    --warning-600: #f57c00;
}

/* Escala Danger */
:root {
    --danger-50: rgba(244, 67, 54, 0.05);
    --danger-100: rgba(244, 67, 54, 0.1);
    --danger-200: rgba(244, 67, 54, 0.2);
    --danger-500: #f44336;
    --danger-600: #d32f2f;
}

/* Escala Info */
:root {
    --info-50: rgba(33, 150, 243, 0.05);
    --info-100: rgba(33, 150, 243, 0.1);
    --info-200: rgba(33, 150, 243, 0.2);
    --info-500: #2196f3;
    --info-600: #1976d2;
}

/* ============================
   TIPOGRAFÍA
   ============================ */

:root {
    --font-family-base: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-family-mono: 'Courier New', Courier, monospace;

    /* Tamaños */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;

    /* Pesos */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Line Height */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
}

/* ============================
   MODO OSCURO
   ============================ */

/* Dark Mode - Activado mediante data-theme="dark" */
:root[data-theme="dark"] {
    /* Colores principales - mantener el gradiente purple-pink */
    --primary-color: #7c92ff;
    --primary-dark: #9163d1;
    --secondary-color: #f5aaff;
    --accent-color: #ffb84d;

    /* Fondos oscuros */
    --background-light: #323232;
    --background-white: #f1f1f1;
    --background-dark: #404040;
    --background-disabled: #3a3a42;

    /* Bordes */
    --border-color: #404048;
    --border-dark: #505058;

    /* Texto */
    --text-dark: #ffffff;
    --text-light: #b8b8c8;
    --text-lighter: #808090;
    --text-white: #ffffff;

    /* Sombras para modo oscuro */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);

    /* Escalas ajustadas para dark mode */
    --primary-50: rgba(124, 146, 255, 0.08);
    --primary-100: rgba(124, 146, 255, 0.15);
    --primary-200: rgba(124, 146, 255, 0.25);
    --primary-300: rgba(124, 146, 255, 0.35);
    --primary-400: rgba(124, 146, 255, 0.45);
    --primary-500: #7c92ff;
    --primary-600: #9163d1;
    --primary-700: #7552b8;
    --primary-800: #5a4190;
    --primary-900: #3f2e68;

    /* Colores semánticos ajustados */
    --success-color: #5ddb60;
    --success-50: rgba(93, 219, 96, 0.08);
    --success-100: rgba(93, 219, 96, 0.15);
    --success-200: rgba(93, 219, 96, 0.25);

    --warning-color: #ffb040;
    --warning-50: rgba(255, 176, 64, 0.08);
    --warning-100: rgba(255, 176, 64, 0.15);
    --warning-200: rgba(255, 176, 64, 0.25);

    --danger-color: #ff5555;
    --danger-50: rgba(255, 85, 85, 0.08);
    --danger-100: rgba(255, 85, 85, 0.15);
    --danger-200: rgba(255, 85, 85, 0.25);

    --info-color: #4dabf7;
    --info-50: rgba(77, 171, 247, 0.08);
    --info-100: rgba(77, 171, 247, 0.15);
    --info-200: rgba(77, 171, 247, 0.25);
}
  :root[data-theme="dark"] h1,
  :root[data-theme="dark"] h2,
  :root[data-theme="dark"] h3,
  :root[data-theme="dark"] h4,
  :root[data-theme="dark"] h5,
  :root[data-theme="dark"] h6 {
    color: var(--text-white) !important;
  }
  /* Dark Mode para gradientes del sidebar */
  :root[data-theme="dark"] .app-sidebar {
    background: linear-gradient(135deg, #2a2550 0%, #4a3570 100%);
  }

/* Dark Mode para el login */
:root[data-theme="dark"] .login-container {
    background: linear-gradient(135deg, #2a2550 0%, #4a3570 100%);
}

/* Dark Mode - Cards y elementos elevados */
  :root[data-theme="dark"] .card,
  :root[data-theme="dark"] .rz-card,
  :root[data-theme="dark"] .rz-panel {
    background: var(--background-dark);
    border-color: var(--border-color);
  }

/* Dark Mode - Inputs */
  :root[data-theme="dark"] input,
  :root[data-theme="dark"] textarea,
  :root[data-theme="dark"] select {
    /*  background: var(--background-white);
    color: rgb(46, 46, 46, 0.75);
    border-color: var(--border-color);*/
    background-color: #696969 !important;
    color: rgb(46, 46, 46, 0.75) !important;
    border-color: var(--border-color) !important;
  }

    :root[data-theme="dark"] input::placeholder,
    :root[data-theme="dark"] textarea::placeholder,
    :root[data-theme="dark"] select::placeholder {
      color: var(--text-dark);
      border-color: var(--border-color);
    }

  :root[data-theme="dark"] .rz-selectbar .rz-button,
  :root[data-theme="dark"] .header-subtitle {
    color: var(--text-dark) !important;
  }

/* ============================
   DARK MODE - RADZEN DROPDOWNS
   ============================ */

/* Paneles desplegables de Radzen (DropDowns, ListBox, DatePicker, etc.) */
:root[data-theme="dark"] .rz-dropdown-panel,
:root[data-theme="dark"] .rz-listbox,
:root[data-theme="dark"] .rz-multiselect-panel,
:root[data-theme="dark"] .rz-datepicker-panel,
:root[data-theme="dark"] .rz-menu-popup,
:root[data-theme="dark"] .rz-contextmenu-popup {
    background-color: var(--background-dark) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Items de listas dentro de dropdowns */
:root[data-theme="dark"] .rz-dropdown-item,
:root[data-theme="dark"] .rz-listbox-item,
:root[data-theme="dark"] .rz-multiselect-item,
:root[data-theme="dark"] .rz-menu-item,
:root[data-theme="dark"] .rz-contextmenu-item {
    color: var(--text-dark) !important;
    background-color: transparent !important;
}

/* Items en hover */
:root[data-theme="dark"] .rz-dropdown-item:hover,
:root[data-theme="dark"] .rz-listbox-item:hover,
:root[data-theme="dark"] .rz-multiselect-item:hover,
:root[data-theme="dark"] .rz-menu-item:hover,
:root[data-theme="dark"] .rz-contextmenu-item:hover {
    background-color: var(--primary-100) !important;
    color: var(--text-dark) !important;
}

/* Items seleccionados */
:root[data-theme="dark"] .rz-dropdown-item.rz-state-highlight,
:root[data-theme="dark"] .rz-listbox-item.rz-state-highlight,
:root[data-theme="dark"] .rz-multiselect-item.rz-state-highlight {
    background-color: var(--primary-200) !important;
    color: var(--text-dark) !important;
}

/* Filtros de búsqueda en dropdowns */
:root[data-theme="dark"] .rz-dropdown-filter-container input,
:root[data-theme="dark"] .rz-listbox-filter-container input,
:root[data-theme="dark"] .rz-multiselect-filter-container input {
    background-color: var(--background-white) !important;
    color: rgb(46, 46, 46, 0.75) !important;
    border-color: var(--border-color) !important;
}

/* Iconos dentro de dropdowns */
:root[data-theme="dark"] .rz-dropdown-item .rz-icon,
:root[data-theme="dark"] .rz-listbox-item .rz-icon,
:root[data-theme="dark"] .rz-multiselect-item .rz-icon {
    color: var(--text-light) !important;
}

/* Headers de grupos en dropdowns */
:root[data-theme="dark"] .rz-dropdown-group,
:root[data-theme="dark"] .rz-listbox-group,
:root[data-theme="dark"] .rz-multiselect-group {
    background-color: var(--background-light) !important;
    color: var(--text-light) !important;
    border-color: var(--border-color) !important;
}

/* Mensajes de "No hay elementos" */
:root[data-theme="dark"] .rz-dropdown-empty-message,
:root[data-theme="dark"] .rz-listbox-empty-message,
:root[data-theme="dark"] .rz-multiselect-empty-message {
    color: var(--text-light) !important;
}

/* ============================
   DARK MODE - RADZEN INPUTS Y FORMULARIOS
   ============================ */

/* Inputs de Radzen (TextBox, NumericBox, etc.) */
:root[data-theme="dark"] .rz-textbox,
:root[data-theme="dark"] .rz-inputtext,
:root[data-theme="dark"] .rz-textarea,
:root[data-theme="dark"] .rz-numeric,
:root[data-theme="dark"] .rz-dropdown,
:root[data-theme="dark"] .rz-multiselect {
    background-color: #696969 !important;
    color: #d5d5d5 !important;
    border-color: var(--border-color) !important;
}

/* Input cuando está enfocado */
:root[data-theme="dark"] .rz-textbox:focus,
:root[data-theme="dark"] .rz-inputtext:focus,
:root[data-theme="dark"] .rz-textarea:focus,
:root[data-theme="dark"] .rz-numeric:focus,
:root[data-theme="dark"] .rz-dropdown:focus,
:root[data-theme="dark"] .rz-multiselect:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem var(--primary-100) !important;
}

/* Labels de formulario */
:root[data-theme="dark"] .rz-label,
:root[data-theme="dark"] .rz-form-label {
    color: var(--text-dark) !important;
}

/* ============================
   DARK MODE - RADZEN DATEPICKER
   ============================ */

/* Panel del DatePicker */
:root[data-theme="dark"] .rz-datepicker-calendar {
    background-color: var(--background-dark) !important;
    border-color: var(--border-color) !important;
}

/* Días del calendario */
:root[data-theme="dark"] .rz-calendar-day,
:root[data-theme="dark"] .rz-datepicker-day {
    color: var(--text-dark) !important;
}

/* Día en hover */
:root[data-theme="dark"] .rz-calendar-day:hover,
:root[data-theme="dark"] .rz-datepicker-day:hover {
    background-color: var(--primary-100) !important;
}

/* Día seleccionado */
:root[data-theme="dark"] .rz-calendar-day.rz-state-active,
:root[data-theme="dark"] .rz-datepicker-day.rz-state-active {
    background-color: var(--primary-color) !important;
    color: var(--text-white) !important;
}

/* Día actual (hoy) */
:root[data-theme="dark"] .rz-calendar-day.rz-state-current,
:root[data-theme="dark"] .rz-datepicker-day.rz-state-current {
    border-color: var(--primary-color) !important;
}

/* Header del calendario (mes/año) */
:root[data-theme="dark"] .rz-calendar-header,
:root[data-theme="dark"] .rz-datepicker-header {
    background-color: var(--background-dark) !important;
    color: var(--text-dark) !important;
    border-color: var(--border-color) !important;
}

/* Botones del header (prev/next) */
:root[data-theme="dark"] .rz-calendar-prev,
:root[data-theme="dark"] .rz-calendar-next,
:root[data-theme="dark"] .rz-datepicker-prev,
:root[data-theme="dark"] .rz-datepicker-next {
    color: var(--text-dark) !important;
}

/* ============================
   DARK MODE - RADZEN TABLES
   ============================ */

/* Celdas de tabla */
:root[data-theme="dark"] .rz-datatable .rz-datatable-data tr td {
    color: var(--text-dark) !important;
}

/* Filas en hover */
:root[data-theme="dark"] .rz-datatable .rz-datatable-data tr:hover {
    background-color: var(--primary-50) !important;
}

/* ============================
   DARK MODE - RADZEN DIALOGS
   ============================ */

/* Overlay / backdrop oscuro */
:root[data-theme="dark"] .rz-overlay {
    background-color: rgba(0, 0, 0, 0.65) !important;
}

/* Contenedor principal del dialog */
:root[data-theme="dark"] .rz-dialog,
:root[data-theme="dark"] .rz-confirm-dialog {
    background-color: var(--background-dark) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6) !important;
    color: var(--text-dark) !important;
}

/* Barra de título */
:root[data-theme="dark"] .rz-dialog-titlebar,
:root[data-theme="dark"] .rz-dialog-header {
    background-color: var(--background-dark) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-dark) !important;
}

/* Texto del título */
:root[data-theme="dark"] .rz-dialog-titlebar span,
:root[data-theme="dark"] .rz-dialog-titlebar-text,
:root[data-theme="dark"] .rz-dialog-title {
    color: var(--text-dark) !important;
}

/* Botón de cierre */
:root[data-theme="dark"] .rz-dialog-titlebar-close,
:root[data-theme="dark"] .rz-dialog-close-button {
    color: var(--text-light) !important;
}

:root[data-theme="dark"] .rz-dialog-titlebar-close:hover,
:root[data-theme="dark"] .rz-dialog-close-button:hover {
    background-color: var(--primary-100) !important;
    color: var(--text-dark) !important;
}

/* Área de contenido */
:root[data-theme="dark"] .rz-dialog-content {
    background-color: var(--background-dark) !important;
    color: var(--text-dark) !important;
}

/* Pie del dialog */
:root[data-theme="dark"] .rz-dialog-footer {
    background-color: var(--background-dark) !important;
    border-top: 1px solid var(--border-color) !important;
}

/* Texto del mensaje (confirm y genérico) */
:root[data-theme="dark"] .rz-dialog-content p,
:root[data-theme="dark"] .rz-confirm-dialog p {
    color: var(--text-dark) !important;
}

/* RadzenAlert dentro de dialog */
:root[data-theme="dark"] .rz-dialog .rz-alert,
:root[data-theme="dark"] .rz-dialog-content .rz-alert {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-color: var(--border-color) !important;
}


/* Detección automática del sistema (fallback) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --background-light: #0f0f1a;
    --background-white: #1a1a2e;
    --border-color: #2d2d42;
    --text-dark: #e4e4e9;
    --text-light: #a0a0b8;
  }
}

/* ============================
   ACCESIBILIDAD
   ============================ */

/* Focus States */
:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================
   UTILITIES GLOBALES
   ============================ */

.text-muted {
    color: var(--text-light);
}

.text-primary {
    color: var(--primary-color);
}

.text-success {
    color: var(--success-color);
}

.text-danger {
    color: var(--danger-color);
}

.bg-light {
    background-color: var(--background-light);
}

.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.rounded {
    border-radius: var(--radius-lg);
}

.rounded-sm {
    border-radius: var(--radius-sm);
}

.rounded-full {
    border-radius: var(--radius-full);
}

/* Spacing Utilities */
.m-0 { margin: 0; }
.m-1 { margin: var(--spacing-sm); }
.m-2 { margin: var(--spacing-md); }
.m-3 { margin: var(--spacing-lg); }
.m-4 { margin: var(--spacing-xl); }

.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-sm); }
.p-2 { padding: var(--spacing-md); }
.p-3 { padding: var(--spacing-lg); }
.p-4 { padding: var(--spacing-xl); }

/* Display Utilities */
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

/* Flex Utilities */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-center { justify-content: center; align-items: center; }
.flex-between { justify-content: space-between; align-items: center; }
.flex-1 { flex: 1; }

/* Visibility */
.hidden { display: none !important; }
.invisible { visibility: hidden; }
.visible { visibility: visible; }