/*
 * DocumentosOnline - Custom Theme Variables
 * Paleta de colores corporativa para servicios documentales
 *
 * Paleta Definida:
 * - Primario (Confianza): Azul Corporativo #004E9A
 * - Acento (Accion): Verde Exito #19B563
 * - Guino Odoo: Rosa/Purpura #985184
 * - Texto Principal: Gris Oscuro #212529
 * - Fondos Claros: #F8F9FA
 */

:root {
    /* ===========================================
       COLORES PRINCIPALES
       =========================================== */

    /* Azul Corporativo - Color Principal (Confianza y Estabilidad) */
    --do-primary: #004E9A;
    --do-primary-dark: #003B73;
    --do-primary-light: #1a6fc4;

    /* Gris Secundario - Estructura y Legibilidad */
    --do-secondary: #6C757D;
    --do-secondary-dark: #5a6268;
    --do-secondary-light: #8a9299;

    /* Info - Azul mas claro para informacion */
    --do-info: #0077CC;
    --do-info-dark: #041018;
    --do-info-light: #338dd6;

    /* Verde Exito - Acento para acciones y validaciones */
    --do-success: #19B563;
    --do-success-dark: #02341a;
    --do-success-light: #2ed47a;

    /* Advertencia - Amarillo */
    --do-warning: #f7c32e;
    --do-warning-dark: #3a2f06;
    --do-warning-light: #fce066;

    /* Peligro/Error - Rojo */
    --do-danger: #dc3545;
    --do-danger-dark: #440303;
    --do-danger-light: #e4606d;

    /* ===========================================
       COLORES ESPECIALES
       =========================================== */

    /* Rosa/Purpura Odoo - Uso moderado */
    --do-odoo: #985184;
    --do-odoo-dark: #7a4169;
    --do-odoo-light: #b06a9c;

    /* ===========================================
       ESCALA DE GRISES
       =========================================== */

    /* Texto Principal */
    --do-dark: #212529;
    --do-dark-light: #6C757D;

    /* Fondos y Bordes */
    --do-white: #ffffff;
    --do-gray-100: #F8F9FA;      /* Fondos de secciones */
    --do-gray-200: #e9ecef;
    --do-gray-300: #DEE2E6;      /* Lineas divisorias y bordes */

    /* ===========================================
       GRADIENTES
       =========================================== */

    /* Gradiente Primario - Azul Corporativo */
    --do-gradient-primary-start: #004E9A;
    --do-gradient-primary-end: #003B73; 

    /* Gradiente Info - Azul mas claro */
    --do-gradient-info-start: #004E9A;
    --do-gradient-info-end: #0077CC;

    /* Gradiente Success - Verde */
    --do-gradient-success-start: #148f4e;
    --do-gradient-success-end: #19B563;

    /* Gradiente Dark - Para headers y navbars */
    --do-gradient-dark-start: #1a1d2e;
    --do-gradient-dark-end: #2d3148;

    /* Gradiente Odoo - Uso especial */
    --do-gradient-odoo-start: #7a4169;
    --do-gradient-odoo-end: #985184;

    /* ===========================================
       COMPONENTES
       =========================================== */

    /* Sidebar */
    --do-sidebar-bg: var(--do-white);
    --do-sidebar-text: var(--do-dark);
    --do-sidebar-active-bg: var(--do-gray-100);

    /* Cards */
    --do-card-bg: var(--do-white);
    --do-card-border: var(--do-gray-200);
    --do-card-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.05);

    /* Tipografia */
    --do-font-family: 'Open Sans', sans-serif;
    --do-font-size-base: 0.875rem;  /* 14px */
    --do-font-size-sm: 0.75rem;     /* 12px */
    --do-font-size-xs: 0.625rem;    /* 10px */
    --do-font-size-lg: 1rem;        /* 16px */
    --do-font-size-xl: 1.25rem;     /* 20px */
}

/* ===========================================
   SOBRESCRITURA DE GRADIENTES SOFT UI
   =========================================== */

.bg-gradient-primary {
    background-image: linear-gradient(310deg, var(--do-gradient-primary-start), var(--do-gradient-primary-end)) !important;
}

.bg-gradient-info {
    background-image: linear-gradient(310deg, var(--do-gradient-info-start), var(--do-gradient-info-end)) !important;
}

.bg-gradient-success {
    background-image: linear-gradient(310deg, var(--do-gradient-success-start), var(--do-gradient-success-end)) !important;
}

.bg-gradient-dark {
    background-image: linear-gradient(310deg, var(--do-gradient-dark-start), var(--do-gradient-dark-end)) !important;
}

/* Nuevo gradiente Odoo para uso especial */
.bg-gradient-odoo {
    background-image: linear-gradient(310deg, var(--do-gradient-odoo-start), var(--do-gradient-odoo-end)) !important;
}

/* ===========================================
   COLORES DE TEXTO
   =========================================== */

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

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

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

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

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

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

/* Color especial Odoo */
.text-odoo {
    color: var(--do-odoo) !important;
}

/* Texto con gradiente */
.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient.text-primary,
.text-info.text-gradient {
    background-image: linear-gradient(310deg, var(--do-primary), var(--do-info)) !important;
}

/* ===========================================
   BOTONES
   =========================================== */

.btn-primary,
.btn.bg-gradient-primary {
    background-color: var(--do-primary);
    border-color: var(--do-primary);
}

.btn-primary:hover,
.btn.bg-gradient-primary:hover {
    background-color: var(--do-primary-dark);
    border-color: var(--do-primary-dark);
}

.btn-info,
.btn.bg-gradient-info {
    background-color: var(--do-info);
    border-color: var(--do-info);
}

.btn-success,
.btn.bg-gradient-success {
    background-color: var(--do-success);
    border-color: var(--do-success);
}

.btn-success:hover,
.btn.bg-gradient-success:hover {
    background-color: var(--do-success-dark);
    border-color: var(--do-success-dark);
}

/* Boton especial Odoo */
.btn-odoo,
.btn.bg-gradient-odoo {
    background-image: linear-gradient(310deg, var(--do-gradient-odoo-start), var(--do-gradient-odoo-end));
    color: white;
}

.btn-odoo:hover,
.btn.bg-gradient-odoo:hover {
    background-image: linear-gradient(310deg, #643656, var(--do-odoo-dark));
    color: white;
}

/* Boton outline */
.btn-outline-primary {
    color: var(--do-primary);
    border-color: var(--do-primary);
}

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

/* ===========================================
   BADGES
   =========================================== */

.badge.bg-gradient-primary {
    background-image: linear-gradient(310deg, var(--do-gradient-primary-start), var(--do-gradient-primary-end)) !important;
}

.badge.bg-gradient-success {
    background-image: linear-gradient(310deg, var(--do-gradient-success-start), var(--do-gradient-success-end)) !important;
}

.badge.bg-gradient-info {
    background-image: linear-gradient(310deg, var(--do-gradient-info-start), var(--do-gradient-info-end)) !important;
}

/* Badge especial Odoo - para indicar conexion con Odoo */
.badge.bg-gradient-odoo {
    background-image: linear-gradient(310deg, var(--do-gradient-odoo-start), var(--do-gradient-odoo-end)) !important;
}

/* ===========================================
   SIDEBAR
   =========================================== */

.sidenav {
    background: var(--do-sidebar-bg);
}

.sidenav .nav-link {
    color: var(--do-sidebar-text);
}

.sidenav .nav-link.active {
    background: var(--do-sidebar-active-bg);
}

.sidenav .nav-link.active .icon {
    background-image: linear-gradient(310deg, var(--do-gradient-primary-start), var(--do-gradient-primary-end)) !important;
}

/* FIX: Change icon color to white when nav-link is active for better contrast */
.sidenav .nav-link.active .icon i {
    color: white !important;
}

/* ===========================================
   CARDS
   =========================================== */

.card {
    background: var(--do-card-bg);
    box-shadow: var(--do-card-shadow);
}

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

/* ===========================================
   ALERTAS
   =========================================== */

.alert-primary {
    background-color: rgba(0, 78, 154, 0.1);
    color: var(--do-primary-dark);
    border-color: rgba(0, 78, 154, 0.2);
}

.alert-success {
    background-color: rgba(25, 181, 99, 0.1);
    color: var(--do-success-dark);
    border-color: rgba(25, 181, 99, 0.2);
}

.alert-info {
    background-color: rgba(0, 119, 204, 0.1);
    color: var(--do-info-dark);
    border-color: rgba(0, 119, 204, 0.2);
}

/* ===========================================
   FORMULARIOS
   =========================================== */

.form-control:focus {
    border-color: var(--do-primary);
    box-shadow: 0 0 0 2px rgba(0, 78, 154, 0.25);
}

.form-check-input:checked {
    background-color: var(--do-primary);
    border-color: var(--do-primary);
}

/* Switch con color primario */
.form-switch .form-check-input:checked {
    background-color: var(--do-success);
    border-color: var(--do-success);
}

/* ===========================================
   SPINNER / LOADING
   =========================================== */

.spinner-border.text-primary {
    color: var(--do-primary) !important;
}

/* ===========================================
   TIPOGRAFIA
   =========================================== */

body {
    font-family: var(--do-font-family);
    font-size: var(--do-font-size-base);
    color: var(--do-dark);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--do-dark);
}

.text-muted {
    color: var(--do-dark-light) !important;
}

/* Tamanos de texto utilitarios */
.text-xs { font-size: var(--do-font-size-xs) !important; }
.text-sm { font-size: var(--do-font-size-sm) !important; }
.text-base { font-size: var(--do-font-size-base) !important; }
.text-lg { font-size: var(--do-font-size-lg) !important; }
.text-xl { font-size: var(--do-font-size-xl) !important; }

/* ===========================================
   UTILIDADES ADICIONALES
   =========================================== */

/* Links */
a {
    color: var(--do-primary);
}

a:hover {
    color: var(--do-primary-dark);
}

/* Bordes */
.border-primary {
    border-color: var(--do-primary) !important;
}

.border-success {
    border-color: var(--do-success) !important;
}

/* Fondos */
.bg-primary {
    background-color: var(--do-primary) !important;
}

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

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

/* ===========================================
   ICON SHAPES
   =========================================== */

.icon-shape {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-shape.icon-sm {
    width: 32px;
    height: 32px;
}

.icon-shape.icon-lg {
    width: 64px;
    height: 64px;
}

/* ===========================================
   CLASES ESPECIALES PARA ODOO ECOSYSTEM
   Usar con moderacion - solo para iconos que
   representen conexion directa con Odoo
   =========================================== */

.odoo-accent {
    color: var(--do-odoo);
}

.odoo-accent-bg {
    background-color: var(--do-odoo);
    color: white;
}

/* Icono con estilo Odoo */
.icon-shape.bg-odoo {
    background-image: linear-gradient(310deg, var(--do-gradient-odoo-start), var(--do-gradient-odoo-end));
}

/* Para texto que mencione "Odoo" directamente */
.text-odoo-highlight {
    color: var(--do-odoo);
    font-weight: 600;
}

/* ===========================================
   AJUSTES ESPECIFICOS DE PAGINAS
   =========================================== */

/* Hero section en login/register */
.page-header .bg-gradient-info {
    background-image: linear-gradient(310deg, var(--do-primary), var(--do-primary-dark)) !important;
}

.mask.bg-gradient-info {
    background-image: linear-gradient(310deg, var(--do-primary), var(--do-primary-dark)) !important;
}

/* Card header con gradiente horizontal */
.card-header-gradient {
    background: linear-gradient(to right, var(--do-primary), var(--do-primary-dark));
    color: white;
}

/* Seleccion de tarjetas */
.card-selectable:hover {
    border-color: var(--do-primary);
    cursor: pointer;
}

.card-selectable.selected {
    border-color: var(--do-primary);
    background-color: rgba(0, 78, 154, 0.05);
}