/*
   VARIABLES CSS - Tracking v2.0
   Convertido desde variables.scss del frontend principal.
   Fuente de verdad para todos los estilos del microservicio.
 */

:root {
    /*
       TIPOGRAFÍA
       
      */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-size-base: 0.8125rem;   /* 13px */
    --font-size-sm: 0.75rem;       /* 12px */
    --font-size-xs: 0.6875rem;     /* 11px */
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;

    /*
       COLORES - TEMA CLARO
      */
    --light-bg-primary: #f8fafc;
    --light-bg-secondary: #ffffff;
    --light-text-primary: #1e293b;
    --light-text-secondary: #64748b;
    --light-border: #e2e8f0;
    --light-hover: #f1f5f9;
    --light-shadow: rgba(0, 0, 0, 0.05);
    --light-input-border: #e2e8f0;
    --light-input-focus: #93c5fd;
    --light-table-header: #f8fafc;
    --light-scrollbar-track: #f1f5f9;
    --light-scrollbar-thumb: #cbd5e1;
    --light-scrollbar-hover: #94a3b8;

    /*
       COLORES - TEMA OSCURO
       */
    --dark-bg-primary: #1a1a1a;
    --dark-bg-secondary: #2d2d2d;
    --dark-text-primary: #e2e8f0;
    --dark-text-secondary: #94a3b8;
    --dark-border: #404040;
    --dark-hover: #404040;
    --dark-shadow: rgba(0, 0, 0, 0.2);
    --dark-input-border: #404040;
    --dark-input-focus: #3b82f6;
    --dark-table-header: #262626;
    --dark-scrollbar-track: #262626;
    --dark-scrollbar-thumb: #404040;
    --dark-scrollbar-hover: #525252;

    /*
       SUPERFICIES DE ACENTO (header de vistas + sidebars)
       */
    --light-accent-surface: #54565c;
    --dark-accent-surface:  #d1d1d1;

    /*
       COLORES VERDES (MARCA)
       */
    --green-primary: #00a651;
    --green-dark: #008944;
    --green-darker: #007a3d;
    --green-hover: #00965a;
    --green-bg-soft: #e6f7ed;

    /*
       ESTADOS
       */
    --status-moving: #28a745;
    --status-idle: #ffc107;
    --status-parked: #6c757d;
    --status-warning: #fd7e14;
    --status-error: #dc3545;
    --status-success: #16a34a;
    --status-offline: #6c757d;

    /*
       ESPACIADO
       */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 0.75rem;
    --spacing-lg: 1rem;
    --spacing-xl: 1.25rem;
    --spacing-2xl: 1.5rem;

    /*
       BORDES
       */
    --border-radius: 0.375rem;
    --border-radius-xs: 2px;
    --border-radius-sm: 4px;
    --border-radius-md: 6px;
    --border-radius-lg: 8px;
    --border-radius-xl: 12px;
    --border-radius-2xl: 16px;
    --border-radius-full: 50px;

    /*
       SOMBRAS
       */
    --card-shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1);
    --card-shadow-dark: 0 1px 3px rgba(0, 0, 0, 0.3);
    --badge-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/*
   TEMA ACTIVO — por defecto claro
    */
body {
    --bg-primary: var(--light-bg-primary);
    --bg-secondary: var(--light-bg-secondary);
    --text-primary: var(--light-text-primary);
    --text-secondary: var(--light-text-secondary);
    --border-color: var(--light-border);
    --hover-color: var(--light-hover);
    --shadow: var(--light-shadow);
    --input-border: var(--light-input-border);
    --input-focus: var(--light-input-focus);
    --table-header: var(--light-table-header);
    --card-shadow: var(--card-shadow-light);
    --scrollbar-track: var(--light-scrollbar-track);
    --scrollbar-thumb: var(--light-scrollbar-thumb);
    --scrollbar-hover: var(--light-scrollbar-hover);
    --accent-surface:  var(--light-accent-surface);
}

body.dark-theme {
    --bg-primary: var(--dark-bg-primary);
    --bg-secondary: var(--dark-bg-secondary);
    --text-primary: var(--dark-text-primary);
    --text-secondary: var(--dark-text-secondary);
    --border-color: var(--dark-border);
    --hover-color: var(--dark-hover);
    --shadow: var(--dark-shadow);
    --input-border: var(--dark-input-border);
    --input-focus: var(--dark-input-focus);
    --table-header: var(--dark-table-header);
    --card-shadow: var(--card-shadow-dark);
    --scrollbar-track: var(--dark-scrollbar-track);
    --scrollbar-thumb: var(--dark-scrollbar-thumb);
    --scrollbar-hover: var(--dark-scrollbar-hover);
    --accent-surface:  var(--dark-accent-surface);
}