/**
 * Themes.css - Sistema de colores y variables
 * Mitiga CRM Agentes
 */

:root {
    /* Colores primarios de Mitiga - Azul corporativo */
    --color-primary: #3067e4;
    --color-primary-light: #5085f5;
    --color-primary-dark: #1f4ec4;
    --color-primary-contrast: #ffffff;

    /* Colores secundarios - Gris Mitiga */
    --color-secondary: #394150;
    --color-secondary-light: #525967;
    --color-secondary-dark: #262b36;
    --color-secondary-contrast: #ffffff;

    /* Colores de estado */
    --color-success: #4caf50;
    --color-success-light: #81c784;
    --color-success-dark: #388e3c;
    
    --color-warning: #ff9800;
    --color-warning-light: #ffb74d;
    --color-warning-dark: #f57c00;
    
    --color-error: #f44336;
    --color-error-light: #e57373;
    --color-error-dark: #d32f2f;
    
    --color-info: #2196f3;
    --color-info-light: #64b5f6;
    --color-info-dark: #1976d2;

    /* Grises y neutros - Paleta Mitiga */
    --color-background: #f9fafb;
    --color-surface: #ffffff;
    --color-surface-hover: #f3f4f6;
    --color-border: #e5e7eb;
    --color-divider: #e5e7eb;
    
    --color-text-primary: #394150;
    --color-text-secondary: #6b7280;
    --color-text-disabled: #9ca3af;
    --color-text-hint: #9ca3af;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --shadow-md: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    --shadow-lg: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    --shadow-xl: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

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

    /* Bordes */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-round: 50%;

    /* Tipografía */
    --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    --font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */
    --font-size-4xl: 2.25rem;   /* 36px */

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Transiciones */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;

    /* Z-index layers */
    --z-toast: 9000;
    --z-modal: 8000;
    --z-modal-backdrop: 7999;
    --z-drawer: 8500;
    --z-drawer-backdrop: 8499;
    --z-dropdown: 7000;
    --z-fixed-header: 6000;
    --z-sticky: 5000;
    --z-fab: 4000;
    --z-base: 1;

    /* Tamaños de header y footer móvil */
    --header-height: 56px;
    --footer-height: 60px;
    --fab-size: 56px;

    /* Offline banner */
    --offline-banner-height: 40px;
}

/* ============================================================================
   Tema Oscuro
   ============================================================================ */
html.theme-dark,
html.theme-dark :root {
    --color-background: #121212;
    --color-surface: #1e1e1e;
    --color-surface-hover: #2c2c2c;
    --color-border: #333333;
    --color-divider: #333333;
    
    --color-text-primary: #ffffff;
    --color-text-secondary: #b0b0b0;
    --color-text-disabled: #666666;
    --color-text-hint: #888888;
    
    /* Ajustar colores de badges para tema oscuro */
    --badge-bg-opacity: 0.2;
}

/* Tema claro (explícito) */
html.theme-light,
html.theme-light :root {
    --color-background: #f9fafb;
    --color-surface: #ffffff;
    --color-surface-hover: #f3f4f6;
    --color-border: #e5e7eb;
    --color-divider: #e5e7eb;
    
    --color-text-primary: #394150;
    --color-text-secondary: #6b7280;
    --color-text-disabled: #9ca3af;
    --color-text-hint: #9ca3af;
    
    --badge-bg-opacity: 1;
}

/* Detección automática del sistema (fallback) */
@media (prefers-color-scheme: dark) {
    html:not(.theme-light):not(.theme-dark) {
        --color-background: #121212;
        --color-surface: #1e1e1e;
        --color-surface-hover: #2c2c2c;
        --color-border: #333333;
        --color-divider: #333333;
        
        --color-text-primary: #ffffff;
        --color-text-secondary: #b0b0b0;
        --color-text-disabled: #666666;
        --color-text-hint: #888888;
    }
}

/* ============================================================================
   Utilidades de color
   ============================================================================ */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }
.text-info { color: var(--color-info); }
.text-muted { color: var(--color-text-secondary); }

.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-success { background-color: var(--color-success); }
.bg-warning { background-color: var(--color-warning); }
.bg-error { background-color: var(--color-error); }
.bg-info { background-color: var(--color-info); }
.bg-surface { background-color: var(--color-surface); }

/* ============================================================================
   Badges de tipo de actividad
   ============================================================================ */
.badge-actividad {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-actividad-ll { /* Llamada */
    background-color: #e3f2fd;
    color: #1565c0;
}

.badge-actividad-re { /* Reunión */
    background-color: #f3e5f5;
    color: #6a1b9a;
}

.badge-actividad-em { /* Email */
    background-color: #fff3e0;
    color: #e65100;
}

.badge-actividad-vi { /* Visita */
    background-color: #e8f5e9;
    color: #2e7d32;
}

/* ============================================================================
   Badges de estado
   ============================================================================ */
.badge-estado {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.badge-estado-pendiente {
    background-color: #fff8e1;
    color: #f57f17;
}

.badge-estado-completada {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.badge-estado-cancelada {
    background-color: #ffebee;
    color: #c62828;
}

/* ============================================================================
   Badges de notificaciones
   ============================================================================ */
.badge-notif {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.badge-notif-info { background-color: #e3f2fd; color: #1565c0; }
.badge-notif-warning { background-color: #fff8e1; color: #f57f17; }
.badge-notif-success { background-color: #e8f5e9; color: #2e7d32; }
.badge-notif-error { background-color: #ffebee; color: #c62828; }

/* ============================================================================
   Toggle de tema
   ============================================================================ */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-base);
    user-select: none;
}

.theme-toggle:hover {
    background-color: var(--color-surface-hover);
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.theme-toggle:active {
    transform: translateY(0);
    box-shadow: none;
}

.theme-toggle .theme-icon {
    font-size: var(--font-size-lg);
    line-height: 1;
}

.theme-toggle .theme-text {
    font-size: var(--font-size-sm);
}

/* Ajustes de badges para tema oscuro */
html.theme-dark .badge-actividad-ll {
    background-color: rgba(21, 101, 192, 0.2);
    color: #64b5f6;
}

html.theme-dark .badge-actividad-re {
    background-color: rgba(106, 27, 154, 0.2);
    color: #ba68c8;
}

html.theme-dark .badge-actividad-em {
    background-color: rgba(230, 81, 0, 0.2);
    color: #ffb74d;
}

html.theme-dark .badge-actividad-vi {
    background-color: rgba(46, 125, 50, 0.2);
    color: #81c784;
}

html.theme-dark .badge-estado-pendiente {
    background-color: rgba(245, 127, 23, 0.2);
    color: #ffb74d;
}

html.theme-dark .badge-estado-completada {
    background-color: rgba(46, 125, 50, 0.2);
    color: #81c784;
}

html.theme-dark .badge-estado-cancelada {
    background-color: rgba(198, 40, 40, 0.2);
    color: #e57373;
}

html.theme-dark .badge-notif-info {
    background-color: rgba(21, 101, 192, 0.2);
    color: #64b5f6;
}

html.theme-dark .badge-notif-warning {
    background-color: rgba(245, 127, 23, 0.2);
    color: #ffb74d;
}

html.theme-dark .badge-notif-success {
    background-color: rgba(46, 125, 50, 0.2);
    color: #81c784;
}

html.theme-dark .badge-notif-error {
    background-color: rgba(198, 40, 40, 0.2);
    color: #e57373;
}