/* ====================================
   COCRIANZA BRANDING - Variables CSS Globales
   Archivo: wwwroot/css/cocrianza-branding.css
   ==================================== */

:root {
    /* ====================================
       PALETA DE COLORES PRINCIPAL
       ==================================== */
    /* Melocotón claro - Fondo general / módulos */
    --cocrianza-melocoton-claro: #FFE9DC;
    --cocrianza-melocoton-claro-rgb: 255, 233, 220;
    /* Coral suave - Botones principales */
    --cocrianza-coral-suave: #FFB7A5;
    --cocrianza-coral-suave-rgb: 255, 183, 165;
    /* Verde salvia - Éxitos / confianza */
    --cocrianza-verde-salvia: #BFD8B8;
    --cocrianza-verde-salvia-rgb: 191, 216, 184;
    /* Lavanda claro - Iconos / fondos suaves */
    --cocrianza-lavanda-claro: #E6D5F7;
    --cocrianza-lavanda-claro-rgb: 230, 213, 247;
    /* Gris cálido - Texto secundario */
    --cocrianza-gris-calido: #6B6B6B;
    --cocrianza-gris-calido-rgb: 107, 107, 107;
    /* ====================================
       COLORES SECUNDARIOS
       ==================================== */
    /* Beige neutro - Alternancia de fondo */
    --cocrianza-beige-neutro: #FDF6F0;
    --cocrianza-beige-neutro-rgb: 253, 246, 240;
    /* Amarillo mostaza - Alertas suaves / energía positiva */
    --cocrianza-amarillo-mostaza: #F4C95D;
    --cocrianza-amarillo-mostaza-rgb: 244, 201, 93;
    /* Turquesa pálido - Estados activos / pestañas */
    --cocrianza-turquesa-palido: #C2ECEC;
    --cocrianza-turquesa-palido-rgb: 194, 236, 236;
    /* Rosa palo - Notificaciones importantes */
    --cocrianza-rosa-palo: #FAD4D4;
    --cocrianza-rosa-palo-rgb: 250, 212, 212;
    /* Gris perla - Bordes y divisores */
    --cocrianza-gris-perla: #E8E8E8;
    --cocrianza-gris-perla-rgb: 232, 232, 232;
    /* ====================================
       ESTADOS Y FEEDBACK
       ==================================== */
    /* Éxito */
    --cocrianza-exito-principal: #BFD8B8;
    --cocrianza-exito-secundario: #7FA274;
    --cocrianza-exito-principal-rgb: 191, 216, 184;
    --cocrianza-exito-secundario-rgb: 127, 162, 116;
    /* Alerta */
    --cocrianza-alerta-principal: #F4C95D;
    --cocrianza-alerta-secundario: #E89F3C;
    --cocrianza-alerta-principal-rgb: 244, 201, 93;
    --cocrianza-alerta-secundario-rgb: 232, 159, 60;
    /* Error */
    --cocrianza-error-principal: #FAD4D4;
    --cocrianza-error-secundario: #E57373;
    --cocrianza-error-principal-rgb: 250, 212, 212;
    --cocrianza-error-secundario-rgb: 229, 115, 115;
    /* Información */
    --cocrianza-info-principal: #C2ECEC;
    --cocrianza-info-secundario: #87C4CC;
    --cocrianza-info-principal-rgb: 194, 236, 236;
    --cocrianza-info-secundario-rgb: 135, 196, 204;
    /* ====================================
       ADAPTACIÓN POR MÓDULO - NUEVOS COLORES VIBRANTES
       ==================================== */
    /* CoKids - ACTUALIZADO con #FD962B (Naranja vibrante) */
    --cokids-primario: #FD962B; /* Naranja vibrante energético */
    --cokids-secundario: #E6D5F7; /* Lavanda claro (mantiene contraste) */
    --cokids-acento: #FFE9DC; /* Melocotón claro (armoniza) */
    --cokids-primario-rgb: 253, 150, 43;
    --cokids-secundario-rgb: 230, 213, 247;
    --cokids-acento-rgb: 255, 233, 220;
    /* Versiones de CoKids para hover/estados */
    --cokids-primario-hover: #E6862A; /* Más oscuro para hover */
    --cokids-primario-light: #FEB86B; /* Más claro para fondos */
    /* CoMascotas - ACTUALIZADO con #24AAA6 (Teal moderno) */
    --comascotas-primario: #24AAA6; /* Teal moderno confiable */
    --comascotas-secundario: #FFE9DC; /* Melocotón claro (contraste cálido) */
    --comascotas-acento: #C2ECEC; /* Turquesa pálido (armoniza) */
    --comascotas-primario-rgb: 36, 170, 166;
    --comascotas-secundario-rgb: 255, 233, 220;
    --comascotas-acento-rgb: 194, 236, 236;
    /* Versiones de CoMascotas para hover/estados */
    --comascotas-primario-hover: #1E9895; /* Más oscuro para hover */
    --comascotas-primario-light: #5BC4C1; /* Más claro para fondos */
    /* ====================================
       MODO OSCURO - ADAPTADO A NUEVOS COLORES
       ==================================== */
    /* Colores adaptados para modo oscuro */
    --cocrianza-dark-fondo: #1A1A1A;
    --cocrianza-dark-melocoton: #3D2F2A;
    --cocrianza-dark-coral: #CC8F84;
    --cocrianza-dark-verde: #4A5D47;
    --cocrianza-dark-lavanda: #574A6B;
    --cocrianza-dark-fondo-rgb: 26, 26, 26;
    --cocrianza-dark-melocoton-rgb: 61, 47, 42;
    --cocrianza-dark-coral-rgb: 204, 143, 132;
    --cocrianza-dark-verde-rgb: 74, 93, 71;
    --cocrianza-dark-lavanda-rgb: 87, 74, 107;
    /* Nuevos colores para modo oscuro */
    --cokids-dark-primario: #E6862A; /* Naranja más suave para oscuro */
    --comascotas-dark-primario: #1E9895; /* Teal más oscuro para oscuro */
    /* ====================================
       TIPOGRAFÍA
       ==================================== */
    /* Fuentes según la guía de branding */
    --cocrianza-font-titulares: 'Poppins', 'Quicksand', 'DM Sans', sans-serif;
    --cocrianza-font-cuerpo: 'Inter', 'Rubik', 'Nunito', sans-serif;
    /* Pesos tipográficos */
    --cocrianza-font-weight-regular: 400;
    --cocrianza-font-weight-medium: 500;
    --cocrianza-font-weight-semibold: 600;
    --cocrianza-font-weight-bold: 700;
    /* Tamaños de texto */
    --cocrianza-text-h1: 32px;
    --cocrianza-text-h2: 24px;
    --cocrianza-text-h3: 20px;
    --cocrianza-text-h4: 18px;
    --cocrianza-text-body: 16px;
    --cocrianza-text-small: 14px;
    --cocrianza-text-caption: 12px;
    /* Line heights */
    --cocrianza-line-height-titulos: 1.2;
    --cocrianza-line-height-texto: 1.5;
    --cocrianza-line-height-captions: 1.4;
    /* ====================================
       ESPACIADO BASADO EN 8px
       ==================================== */
    --cocrianza-space-xs: 4px; /* 0.25rem */
    --cocrianza-space-sm: 8px; /* 0.5rem */
    --cocrianza-space-md: 16px; /* 1rem */
    --cocrianza-space-lg: 24px; /* 1.5rem */
    --cocrianza-space-xl: 32px; /* 2rem */
    --cocrianza-space-2xl: 48px; /* 3rem */
    --cocrianza-space-3xl: 64px; /* 4rem */
    /* ====================================
       COMPONENTES UI
       ==================================== */
    /* Botones */
    --cocrianza-btn-border-radius: 12px;
    --cocrianza-btn-padding-normal: 12px 24px;
    --cocrianza-btn-padding-small: 8px 16px;
    --cocrianza-btn-transition: all 0.2s ease-in-out;
    /* Cards */
    --cocrianza-card-border-radius: 16px;
    --cocrianza-card-padding: 24px;
    --cocrianza-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --cocrianza-card-border: 1px solid var(--cocrianza-gris-perla);
    /* Inputs */
    --cocrianza-input-border-radius: 8px;
    --cocrianza-input-height: 44px;
    --cocrianza-input-border: 1px solid var(--cocrianza-gris-perla);
    --cocrianza-input-focus-border: 2px solid var(--cocrianza-coral-suave);
    /* Modales */
    --cocrianza-modal-border-radius: 20px;
    --cocrianza-modal-overlay: rgba(0, 0, 0, 0.4);
    /* ====================================
       ANIMACIONES Y TRANSICIONES
       ==================================== */
    --cocrianza-transition-fast: 0.15s ease;
    --cocrianza-transition-normal: 0.2s ease;
    --cocrianza-transition-slow: 0.3s ease;
    /* ====================================
       RESPONSIVE BREAKPOINTS
       ==================================== */
    --cocrianza-breakpoint-sm: 576px;
    --cocrianza-breakpoint-md: 768px;
    --cocrianza-breakpoint-lg: 1200px;
    --cocrianza-breakpoint-xl: 1400px;
}

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

@media (prefers-color-scheme: dark) {
    :root {
        --cocrianza-melocoton-claro: var(--cocrianza-dark-melocoton);
        --cocrianza-coral-suave: var(--cocrianza-dark-coral);
        --cocrianza-verde-salvia: var(--cocrianza-dark-verde);
        --cocrianza-lavanda-claro: var(--cocrianza-dark-lavanda);
        --cocrianza-beige-neutro: var(--cocrianza-dark-fondo);
        --cokids-primario: var(--cokids-dark-primario);
        --comascotas-primario: var(--comascotas-dark-primario);
    }
}

/* Clase para forzar modo oscuro */
.cocrianza-dark-mode {
    --cocrianza-melocoton-claro: var(--cocrianza-dark-melocoton);
    --cocrianza-coral-suave: var(--cocrianza-dark-coral);
    --cocrianza-verde-salvia: var(--cocrianza-dark-verde);
    --cocrianza-lavanda-claro: var(--cocrianza-dark-lavanda);
    --cocrianza-beige-neutro: var(--cocrianza-dark-fondo);
    --cokids-primario: var(--cokids-dark-primario);
    --comascotas-primario: var(--comascotas-dark-primario);
}

/* ====================================
   CLASES UTILITARIAS RÁPIDAS
   ==================================== */

/* Colores de texto */
.text-cocrianza-coral {
    color: var(--cocrianza-coral-suave) !important;
}

.text-cocrianza-verde {
    color: var(--cocrianza-verde-salvia) !important;
}

.text-cocrianza-lavanda {
    color: var(--cocrianza-lavanda-claro) !important;
}

.text-cocrianza-gris {
    color: var(--cocrianza-gris-calido) !important;
}

/* Fondos */
.bg-cocrianza-melocoton {
    background-color: var(--cocrianza-melocoton-claro) !important;
}

.bg-cocrianza-coral {
    background-color: var(--cocrianza-coral-suave) !important;
}

.bg-cocrianza-verde {
    background-color: var(--cocrianza-verde-salvia) !important;
}

.bg-cocrianza-beige {
    background-color: var(--cocrianza-beige-neutro) !important;
}

/* Bordes */
.border-cocrianza-coral {
    border-color: var(--cocrianza-coral-suave) !important;
}

.border-cocrianza-verde {
    border-color: var(--cocrianza-verde-salvia) !important;
}

.border-cocrianza-perla {
    border-color: var(--cocrianza-gris-perla) !important;
}

/* Estados */
.btn-cocrianza-primary {
    background-color: var(--cocrianza-coral-suave);
    border-color: var(--cocrianza-coral-suave);
    color: white;
}

    .btn-cocrianza-primary:hover {
        background-color: var(--cocrianza-coral-suave);
        border-color: var(--cocrianza-coral-suave);
        filter: brightness(0.9);
        transform: translateY(-1px);
    }

.btn-cocrianza-secondary {
    background-color: var(--cocrianza-verde-salvia);
    border-color: var(--cocrianza-verde-salvia);
    color: white;
}

    .btn-cocrianza-secondary:hover {
        background-color: var(--cocrianza-verde-salvia);
        border-color: var(--cocrianza-verde-salvia);
        filter: brightness(0.9);
        transform: translateY(-1px);
    }

/* Alert personalizados */
.alert-cocrianza-success {
    background-color: rgba(var(--cocrianza-verde-salvia-rgb), 0.1);
    border-color: var(--cocrianza-verde-salvia);
    color: var(--cocrianza-verde-salvia);
}

.alert-cocrianza-warning {
    background-color: rgba(var(--cocrianza-amarillo-mostaza-rgb), 0.1);
    border-color: var(--cocrianza-amarillo-mostaza);
    color: var(--cocrianza-amarillo-mostaza);
}

.alert-cocrianza-danger {
    background-color: rgba(var(--cocrianza-rosa-palo-rgb), 0.1);
    border-color: var(--cocrianza-rosa-palo);
    color: var(--cocrianza-error-secundario);
}

.alert-cocrianza-info {
    background-color: rgba(var(--cocrianza-turquesa-palido-rgb), 0.1);
    border-color: var(--cocrianza-turquesa-palido);
    color: var(--cocrianza-info-secundario);
}

/* Colores de texto adicionales */
.text-cocrianza-amarillo-mostaza {
    color: var(--cocrianza-amarillo-mostaza) !important;
}

.text-cocrianza-turquesa-palido {
    color: var(--cocrianza-turquesa-palido) !important;
}

.text-cocrianza-rosa-palo {
    color: var(--cocrianza-rosa-palo) !important;
}

.text-cocrianza-gris-perla {
    color: var(--cocrianza-gris-perla) !important;
}

/* Fondos adicionales */
.bg-cocrianza-turquesa-palido {
    background-color: var(--cocrianza-turquesa-palido) !important;
}

.bg-cocrianza-lavanda {
    background-color: var(--cocrianza-lavanda-claro) !important;
}

.bg-cocrianza-amarillo-mostaza {
    background-color: var(--cocrianza-amarillo-mostaza) !important;
}

.bg-cocrianza-rosa-palo {
    background-color: var(--cocrianza-rosa-palo) !important;
}

.bg-cocrianza-gris-perla {
    background-color: var(--cocrianza-gris-perla) !important;
}

.bg-cocrianza-gris-calido {
    background-color: var(--cocrianza-gris-calido) !important;
}

/* Bordes adicionales */
.border-cocrianza-amarillo-mostaza {
    border-color: var(--cocrianza-amarillo-mostaza) !important;
}

.border-cocrianza-turquesa-palido {
    border-color: var(--cocrianza-turquesa-palido) !important;
}

.border-cocrianza-lavanda {
    border-color: var(--cocrianza-lavanda-claro) !important;
}

.border-cocrianza-rosa-palo {
    border-color: var(--cocrianza-rosa-palo) !important;
}

.border-cocrianza-gris-calido {
    border-color: var(--cocrianza-gris-calido) !important;
}

/* Botones adicionales */
.btn-outline-cocrianza-primary {
    background-color: transparent;
    border-color: var(--cocrianza-coral-suave);
    color: var(--cocrianza-coral-suave);
}

    .btn-outline-cocrianza-primary:hover {
        background-color: var(--cocrianza-coral-suave);
        border-color: var(--cocrianza-coral-suave);
        color: white;
        transform: translateY(-1px);
    }

.btn-outline-cocrianza-secondary {
    background-color: transparent;
    border-color: var(--cocrianza-verde-salvia);
    color: var(--cocrianza-verde-salvia);
}

    .btn-outline-cocrianza-secondary:hover {
        background-color: var(--cocrianza-verde-salvia);
        border-color: var(--cocrianza-verde-salvia);
        color: white;
        transform: translateY(-1px);
    }

/* ====================================
   UTILIDADES PARA MÓDULOS ESPECÍFICOS - NUEVOS COLORES
   ==================================== */

/* CoKids - Naranja vibrante */
.bg-cokids-primario {
    background-color: var(--cokids-primario) !important;
}

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

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

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

.border-cokids-primario {
    border-color: var(--cokids-primario) !important;
}

/* Botones específicos CoKids */
.btn-cokids-primary {
    background-color: var(--cokids-primario);
    border-color: var(--cokids-primario);
    color: white;
    transition: var(--cocrianza-btn-transition);
}

    .btn-cokids-primary:hover {
        background-color: var(--cokids-primario-hover);
        border-color: var(--cokids-primario-hover);
        color: white;
        transform: translateY(-1px);
    }

.btn-outline-cokids {
    background-color: transparent;
    border-color: var(--cokids-primario);
    color: var(--cokids-primario);
}

    .btn-outline-cokids:hover {
        background-color: var(--cokids-primario);
        border-color: var(--cokids-primario);
        color: white;
    }

/* CoMascotas - Teal moderno */
.bg-comascotas-primario {
    background-color: var(--comascotas-primario) !important;
}

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

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

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

.border-comascotas-primario {
    border-color: var(--comascotas-primario) !important;
}

/* Botones específicos CoMascotas */
.btn-comascotas-primary {
    background-color: var(--comascotas-primario);
    border-color: var(--comascotas-primario);
    color: white;
    transition: var(--cocrianza-btn-transition);
}

    .btn-comascotas-primary:hover {
        background-color: var(--comascotas-primario-hover);
        border-color: var(--comascotas-primario-hover);
        color: white;
        transform: translateY(-1px);
    }

.btn-outline-comascotas {
    background-color: transparent;
    border-color: var(--comascotas-primario);
    color: var(--comascotas-primario);
}

    .btn-outline-comascotas:hover {
        background-color: var(--comascotas-primario);
        border-color: var(--comascotas-primario);
        color: white;
    }

/* Estados de feedback */
.bg-cocrianza-exito {
    background-color: var(--cocrianza-exito-principal) !important;
}

.bg-cocrianza-alerta {
    background-color: var(--cocrianza-alerta-principal) !important;
}

.bg-cocrianza-error {
    background-color: var(--cocrianza-error-principal) !important;
}

.bg-cocrianza-info {
    background-color: var(--cocrianza-info-principal) !important;
}

.text-cocrianza-exito {
    color: var(--cocrianza-exito-secundario) !important;
}

.text-cocrianza-alerta {
    color: var(--cocrianza-alerta-secundario) !important;
}

.text-cocrianza-error {
    color: var(--cocrianza-error-secundario) !important;
}

.text-cocrianza-info {
    color: var(--cocrianza-info-secundario) !important;
}