:root {
    /* ========================================
       PALETA PRINCIPAL - Basada en #8b0180 (Magenta)
       ======================================== */
    
    /* Color Principal y Variantes */
    --primary-color: #8b0180;           /* Magenta principal para elementos destacados */
    --primary-dark: #6a0162;            /* Magenta oscuro para hover y énfasis */
    --primary-darker: #520149;          /* Magenta muy oscuro para estados activos */
    --primary-light: #a82199;           /* Magenta claro para estados hover sutiles */
    --primary-lighter: #c44ab5;         /* Magenta más claro para badges y acentos */
    --primary-lightest: #f3d4ef;        /* Magenta muy claro para fondos sutiles */
    
    /* Color Secundario - Complementario cálido */
    --secondary-color: #b0348a;         /* Rosa-magenta suave para elementos secundarios */
    --secondary-dark: #8f2a70;          /* Rosa-magenta oscuro */
    --secondary-light: #d45fa8;         /* Rosa-magenta claro */
    --secondary-lightest: #fce4f3;      /* Rosa muy claro para fondos */
    
    /* Color Terciario - Neutro con tinte magenta */
    --tertiary-color: #f5e8f3;          /* Gris rosáceo claro para fondos sutiles */
    --tertiary-color-light: #faf4f9;    /* Gris rosáceo muy claro */
    --tertiary-color-dark: #e8d4e4;     /* Gris rosáceo medio */
    
    /* ========================================
       COLORES DE TEXTO
       ======================================== */
    --text-color: #2d1f2b;              /* Gris oscuro con tinte púrpura para texto principal */
    --text-dark: #333333;               /* Texto oscuro estándar */
    --text-darker: #343a40;             /* Texto muy oscuro */
    --text-darkest: #212529;            /* Texto más oscuro */
    --text-gray: #333;                  /* Texto gris */
    --text-gray-light: #555;            /* Texto gris claro */
    --text-gray-dark: #666;             /* Texto gris medio */
    --footer-gray: #666;                /* Texto de footer */
    
    /* ========================================
       FONDOS
       ======================================== */
    --background-body: #f9f9f9;         /* Fondo del cuerpo */
    --white: #ffffff;                   /* Blanco puro */
    --light-gray: #f8f9fa;              /* Gris muy claro para fondos */
    --lightest-gray: #f0f0f0;           /* Gris clarísimo */
    --gray-light: #eee;                 /* Gris claro para encabezados de tabla */
    --footer-light: #f5f5f5;            /* Fondo de footer */
    
    /* ========================================
       COLORES DE ESTADO (Bootstrap-compatible)
       ======================================== */
    --info-color: #17a2b8;              /* Azul info */
    --success-color: #28a745;           /* Verde éxito */
    --danger-color: #dc3545;            /* Rojo peligro */
    --warning-color: #ffc107;           /* Amarillo advertencia */
    
    /* ========================================
       GRISES Y NEUTROS
       ======================================== */
    --gray-secondary: #6c757d;          /* Gris Bootstrap secundario */
    --gray-dark: #495057;               /* Gris oscuro */
    --disabled-gray: #ccc;              /* Gris para elementos deshabilitados */
    --black: #000;                      /* Negro puro */
    
    /* ========================================
       BORDES
       ======================================== */
    --border-color: #dee2e6;            /* Borde estándar */
    --border-light: #ddd;               /* Borde claro */
    --border-footer: #e0e0e0;           /* Borde de footer */
    --border-primary: #8b0180;          /* Borde con color principal */
    --border-primary-light: #d4a5cf;    /* Borde magenta claro */
    --border-primary-lighter: #e8cce4;  /* Borde magenta muy claro */
    --border-primary-dark: #6a0162;     /* Borde magenta oscuro */
    
    /* ========================================
       COLORES ESPECÍFICOS DE MÓDULOS
       ======================================== */
    --consulta-color: #6EC1E4;          /* Azul para tarjetas de consulta */
    --esterilizacion-color: #E57373;    /* Rojo para tarjetas de esterilización */
    
    /* ========================================
       SOMBRAS
       ======================================== */
    --shadow-lightest: rgba(0, 0, 0, 0.05);   /* Sombra muy sutil */
    --shadow-lighter: rgba(0, 0, 0, 0.08);    /* Sombra sutil */
    --shadow-light: rgba(0, 0, 0, 0.1);       /* Sombra ligera */
    --shadow-medium: rgba(0, 0, 0, 0.15);     /* Sombra media */
    --shadow-dark: rgba(0, 0, 0, 0.125);      /* Sombra oscura */
    --shadow-card: rgba(0, 0, 0, 0.1);        /* Sombra para tarjetas */
    --shadow-primary: rgba(139, 1, 128, 0.3); /* Sombra con tinte magenta */
    --shadow-primary-light: rgba(139, 1, 128, 0.15); /* Sombra magenta sutil */
    
    /* ========================================
       ESTADOS HOVER - Color Principal
       ======================================== */
    --hover-primary-dark: #6a0162;      /* Hover oscuro del primario */
    --hover-primary-darker: #520149;    /* Hover más oscuro del primario */
    --hover-primary-light: #a82199;     /* Hover claro del primario */
    
    /* ========================================
       ESTADOS HOVER - Colores de Estado
       ======================================== */
    --hover-gray-dark: #5a6268;         /* Hover gris oscuro */
    --hover-gray-darker: #545b62;       /* Hover gris más oscuro */
    --hover-info-dark: #138496;         /* Hover info oscuro */
    --hover-info-darker: #117a8b;       /* Hover info más oscuro */
    --hover-success-dark: #218838;      /* Hover éxito oscuro */
    --hover-success-darker: #1e7e34;    /* Hover éxito más oscuro */
    --hover-danger-dark: #b02a37;       /* Hover peligro oscuro */
    --hover-danger-darker: #c82333;     /* Hover peligro más oscuro */
    --hover-danger-darkest: #bd2130;    /* Hover peligro muy oscuro */
    
    /* ========================================
       ESTADOS FOCUS
       ======================================== */
    --focus-primary: rgba(139, 1, 128, 0.5);      /* Borde focus primario */
    --focus-primary-shadow: rgba(139, 1, 128, 0.25); /* Sombra focus primario */
    --focus-primary-light: rgba(139, 1, 128, 0.3);   /* Sombra focus ligera */
    
    /* ========================================
       ALERTAS
       ======================================== */
    --alert-warning-bg: #fff3cd;        /* Fondo alerta advertencia */
    --alert-warning-border: #ffeeba;    /* Borde alerta advertencia */
    --alert-warning-text: #856404;      /* Texto alerta advertencia */
    --alert-info-bg: #fce4f3;           /* Fondo alerta info con tinte magenta */
    --alert-info-border: #d4a5cf;       /* Borde alerta info */
    
    /* ========================================
       TRANSPARENCIAS
       ======================================== */
    --white-transparent-light: rgba(255, 255, 255, 0.1);   /* Blanco transparente ligero */
    --white-transparent-medium: rgba(255, 255, 255, 0.15); /* Blanco transparente medio */
    --white-transparent-heavy: rgba(255, 255, 255, 0.5);   /* Blanco transparente fuerte */
    --primary-transparent-light: rgba(139, 1, 128, 0.1);   /* Primario transparente ligero */
    --primary-transparent-medium: rgba(139, 1, 128, 0.2);  /* Primario transparente medio */
    
    /* ========================================
       GRADIENTES
       ======================================== */
    --gradient-primary-secondary: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    --gradient-hover-primary: linear-gradient(90deg, var(--primary-dark), var(--primary-color));
    --gradient-tertiary-white: linear-gradient(135deg, var(--tertiary-color) 0%, var(--white) 100%);
    --gradient-primary-light: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    --gradient-primary-vertical: linear-gradient(180deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    
    /* ========================================
       ELEMENTOS ESPECÍFICOS (Compatibilidad)
       ======================================== */
    --info-value-color: #333333;        /* Color de valor en info */
    --badge-adopcion-border: 1px solid var(--primary-color); /* Borde de badge adopción */
    
    /* ========================================
       VARIABLES LEGACY (Para compatibilidad)
       ======================================== */
    --border-purple: var(--primary-color);
    --border-purple-light: var(--border-primary-light);
    --border-purple-lighter: var(--border-primary-lighter);
    --border-purple-lighter-dark: var(--tertiary-color-dark);
}

/* ========================================
   UTILIDADES GLOBALES
   ======================================== */

/* Reset básico */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Body base */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--background-body);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* Links globales */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* Selección de texto con color temático */
::selection {
    background-color: var(--primary-lightest);
    color: var(--primary-dark);
}

::-moz-selection {
    background-color: var(--primary-lightest);
    color: var(--primary-dark);
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--tertiary-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-light);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* ========================================
   CLASES DE UTILIDAD - COLORES DE FONDO
   ======================================== */
.bg-primary {
    background-color: var(--primary-color) !important;
}

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

.bg-primary-lightest {
    background-color: var(--primary-lightest) !important;
}

.bg-secondary {
    background-color: var(--secondary-color) !important;
}

.bg-tertiary {
    background-color: var(--tertiary-color) !important;
}

/* ========================================
   CLASES DE UTILIDAD - COLORES DE TEXTO
   ======================================== */
.text-primary {
    color: var(--primary-color) !important;
}

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

.text-secondary {
    color: var(--secondary-color) !important;
}

/* ========================================
   CLASES DE UTILIDAD - BORDES
   ======================================== */
.border-primary {
    border-color: var(--primary-color) !important;
}

.border-primary-light {
    border-color: var(--border-primary-light) !important;
}

/* ========================================
   BOTONES GLOBALES
   ======================================== */
.btn-primary-custom {
    background: var(--gradient-primary-secondary);
    color: var(--white);
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px var(--shadow-primary-light);
}

.btn-primary-custom:hover {
    background: var(--gradient-hover-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow-primary);
}

.btn-primary-custom:active {
    transform: translateY(0);
}

.btn-primary-custom:disabled {
    background: var(--disabled-gray);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-outline-primary-custom {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-outline-primary-custom:hover {
    background: var(--primary-color);
    color: var(--white);
}

/* ========================================
   TARJETAS GLOBALES
   ======================================== */
.card-custom {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 4px 6px var(--shadow-light);
    border: 1px solid var(--border-primary-lighter);
    overflow: hidden;
    transition: all 0.3s ease;
}

.card-custom:hover {
    box-shadow: 0 8px 16px var(--shadow-medium);
    transform: translateY(-2px);
}

.card-header-custom {
    background: var(--gradient-primary-secondary);
    color: var(--white);
    padding: 15px 20px;
    font-weight: 600;
}

.card-body-custom {
    padding: 20px;
}

/* ========================================
   FORMULARIOS GLOBALES
   ======================================== */
.form-control-custom {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 15px;
    transition: all 0.3s ease;
    width: 100%;
}

.form-control-custom:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--focus-primary-light);
}

.form-label-custom {
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 5px;
    display: block;
}

/* ========================================
   BADGES GLOBALES
   ======================================== */
.badge-primary-custom {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 500;
}

.badge-outline-primary {
    background-color: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 500;
}

/* ========================================
   ALERTAS PERSONALIZADAS
   ======================================== */
.alert-primary-custom {
    background-color: var(--primary-lightest);
    border: 1px solid var(--border-primary-light);
    color: var(--primary-dark);
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 15px;
}

/* ========================================
   TABLAS GLOBALES
   ======================================== */
.table-custom {
    width: 100%;
    border-collapse: collapse;
}

.table-custom th {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
}

.table-custom td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color);
}

.table-custom tr:hover {
    background-color: var(--primary-lightest);
}

/* ========================================
   ANIMACIONES GLOBALES
   ======================================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .hide-desktop {
        display: none !important;
    }
}