/* ========================================
   CONTAX Portal - Theme Configuration
   ========================================
   
   Este archivo define las variables del tema visual.
   Para cambiar de estilo, solo modifica estas variables.
   
   Tema actual: Clean/Minimal
   ======================================== */

/* Alpine.js cloak - hide elements until Alpine initializes */
[x-cloak] {
    display: none !important;
}


:root {
    /* ===== COLORES DEL TEMA ===== */

    /* Primarios (pueden ser sobrescritos por branding) */
    --color-primary: #1a1a1a;
    --color-primary-hover: #333333;
    --color-primary-light: #f5f5f5;
    --color-primary-dark: #000000;

    /* Fondos */
    --bg-body: #ffffff;
    --bg-sidebar: #fafafa;
    --bg-card: #ffffff;
    --bg-card-dark: #1a1a1a;
    --bg-hover: #f5f5f5;

    /* Texto */
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --text-muted: #999999;
    --text-inverse: #ffffff;

    /* Bordes */
    --border-color: #e5e5e5;
    --border-light: #f0f0f0;

    /* ===== DIMENSIONES DEL TEMA ===== */

    /* Bordes redondeados */
    --radius-sm: 0.375rem;
    /* 6px */
    --radius-md: 0.625rem;
    /* 10px */
    --radius-lg: 1rem;
    /* 16px */
    --radius-xl: 1.5rem;
    /* 24px */
    --radius-full: 9999px;

    /* Sombras */
    --shadow-sm: none;
    --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08);

    /* Transiciones */
    --transition-fast: 150ms ease;
    --transition-normal: 200ms ease;

    /* Tipografía */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.8125rem;
    --font-size-base: 0.875rem;
    --font-size-lg: 1rem;
    --font-size-xl: 1.25rem;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;

    /* ===== COLORES DE ESTADO - PALETA PASTEL (Soft Premium) ===== */
    /* Usados en Tareas, Proyectos, Agenda, Kanban, etc. */
    /* Colores suaves que se integran con el diseño clean/minimal */

    /* Pendiente - Gris muy claro (dormido, sin acción) */
    --status-pending: #e2e8f0;
    --status-pending-text: #475569;
    --status-pending-bg: rgba(226, 232, 240, 0.5);

    /* En Progreso - Amarillo suave (actividad, atención) */
    --status-progress: #fde047;
    --status-progress-text: #854d0e;
    --status-progress-bg: rgba(253, 224, 71, 0.3);

    /* En Revisión - Azul cielo (pendiente de aprobación) */
    --status-review: #93c5fd;
    --status-review-text: #1e40af;
    --status-review-bg: rgba(147, 197, 253, 0.3);

    /* Completado - Verde menta (éxito, cierre) */
    --status-completed: #86efac;
    --status-completed-text: #166534;
    --status-completed-bg: rgba(134, 239, 172, 0.3);

    /* Vencido - Rosa coral (urgencia, problema) */
    --status-overdue: #fca5a5;
    --status-overdue-text: #991b1b;
    --status-overdue-bg: rgba(252, 165, 165, 0.3);

    /* Cancelado - Rojo coral (tarea descartada) */
    --status-cancelled: #fca5a5;
    --status-cancelled-text: #991b1b;
    --status-cancelled-bg: rgba(252, 165, 165, 0.3);

    /* Proyecto Activo - Lavanda (deadline de proyecto) */
    --status-project: #c4b5fd;
    --status-project-text: #5b21b6;
    --status-project-bg: rgba(196, 181, 253, 0.3);
}

/* ===== DARK MODE ===== */
.dark {
    --bg-body: #0f0f0f;
    --bg-sidebar: #161616;
    --bg-card: #1e1e1e;
    --bg-card-dark: #ffffff;
    --bg-hover: #282828;

    --text-primary: #ffffff;
    --text-secondary: #b8b8b8;
    --text-muted: #808080;
    --text-inverse: #000000;

    --border-color: #333333;
    --border-light: #252525;

    /* Invertir colores primarios */
    --color-primary: #ffffff;
    --color-primary-hover: #e5e5e5;
    --color-primary-light: #2e2e2e;
    --color-primary-dark: #ffffff;

    /* ===== COLORES DE ESTADO PARA DARK MODE ===== */
    /* Colores con mejor contraste para fondos oscuros */
    
    /* Pendiente - Gris claro con texto visible */
    --status-pending: #94a3b8;
    --status-pending-text: #e2e8f0;
    --status-pending-bg: rgba(148, 163, 184, 0.25);

    /* En Progreso - Amarillo vibrante */
    --status-progress: #fde047;
    --status-progress-text: #fef9c3;
    --status-progress-bg: rgba(253, 224, 71, 0.2);

    /* En Revisión - Azul brillante */
    --status-review: #60a5fa;
    --status-review-text: #dbeafe;
    --status-review-bg: rgba(96, 165, 250, 0.2);

    /* Completado - Verde brillante */
    --status-completed: #4ade80;
    --status-completed-text: #dcfce7;
    --status-completed-bg: rgba(74, 222, 128, 0.2);

    /* Vencido/Cerrado - Rojo coral */
    --status-overdue: #f87171;
    --status-overdue-text: #fecaca;
    --status-overdue-bg: rgba(248, 113, 113, 0.2);

    /* Cancelado */
    --status-cancelled: #f87171;
    --status-cancelled-text: #fecaca;
    --status-cancelled-bg: rgba(248, 113, 113, 0.2);

    /* Proyecto Activo - Lavanda */
    --status-project: #a78bfa;
    --status-project-text: #ede9fe;
    --status-project-bg: rgba(167, 139, 250, 0.2);
}

/* ========================================
   TEMAS ALTERNATIVOS (comentados)
   Descomenta uno para cambiar el look
   ======================================== */

/* 
=== TEMA: Glassmorphism ===
:root {
    --radius-xl: 2rem;
    --shadow-md: 0 8px 32px rgba(31, 38, 135, 0.07);
    --bg-card: rgba(255, 255, 255, 0.7);
    --border-color: rgba(255, 255, 255, 0.3);
}
*/

/*
=== TEMA: Rounded/Soft ===
:root {
    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
}
*/

/*
=== TEMA: Sharp/Corporate ===
:root {
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.1);
}
*/

/* ========================================
   SOBRESCRIBIR GRISES AZULADOS DE TAILWIND
   Unifica todos los colores a --bg-card
   ======================================== */

/* En modo dark, sobrescribir los grises azulados de Tailwind */
.dark .bg-gray-800,
.dark [class*="dark:bg-gray-800"] {
    background-color: var(--bg-card) !important;
}

.dark .bg-gray-700,
.dark [class*="dark:bg-gray-700"] {
    background-color: var(--bg-card) !important;
}

.dark .bg-gray-900,
.dark [class*="dark:bg-gray-900"] {
    background-color: var(--bg-body) !important;
}

.dark .bg-gray-600,
.dark [class*="dark:bg-gray-600"] {
    background-color: var(--bg-hover) !important;
}

/* Bordes consistentes */
.dark .border-gray-700,
.dark [class*="dark:border-gray-700"] {
    border-color: var(--border-color) !important;
}

.dark .border-gray-600,
.dark [class*="dark:border-gray-600"] {
    border-color: var(--border-color) !important;
}

/* Fondos de hover consistentes */
.dark [class*="dark:hover:bg-gray-700"]:hover,
.dark [class*="hover:bg-gray-700"]:hover {
    background-color: var(--bg-hover) !important;
}

.dark [class*="dark:hover:bg-gray-600"]:hover {
    background-color: var(--bg-hover) !important;
}

/* Textos con mejor contraste */
.dark .text-gray-400,
.dark [class*="dark:text-gray-400"] {
    color: var(--text-secondary) !important;
}

.dark .text-gray-300,
.dark [class*="dark:text-gray-300"] {
    color: var(--text-secondary) !important;
}

.dark .text-gray-200,
.dark [class*="dark:text-gray-200"] {
    color: var(--text-primary) !important;
}