/* ============================================================
   COLORES
   ============================================================ */
:root {
    /* ===== COLORES BASE ===== */
    --main-color: #5FA52D !important;
    --main-color-dark: #00723F !important;
    --secondary-color: #76BC3B;
    --secondary-color-dark: #005C33;
    /*Modificando variables de botones*/
    --color-primary: var(--secondary-color);
    --color-primary-dark: var(--main-color-dark);
    --primary-blue: var(--secondary-color);
    --primary-light: #AED98C !important;
    /* ===== PALETA DERIVADA DE --main-color (NO TOCAR) =====
       Estos son valores de respaldo para navegadores viejos.
       En navegadores modernos se recalculan solos (ver bloques @supports abajo). */
    --main-color-pastel: #fceeef; /* fondo de la banda superior */
    --main-color-pastel-strong: #f9e1e3; /* fondo de las info-pill */
    --main-color-pastel-border: #f5cbcf; /* bordes suaves */
    --main-color-ink: #400c11; /* texto oscuro sobre fondos pastel */
    --main-color-ink-soft: #6b141d; /* texto secundario sobre fondos pastel */
    --text-on-main: #ffffff; /* texto sobre --main-color sólido */
    /* Texto sobre fondos con --main-color */
    --text-main: #FFFFFF;

     -login-bg-start: #ffffff;
    --login-bg-end: #c2e9fb;
    --Color: #294695;
    --color-main: var(--main-color);
    --color-light: var(--secondary-color);
    --color-dark: var(--main-color-dark);

}

/* Pasteles y textos calculados a partir de --main-color:
- pasteles = main-color mezclado con blanco  -> siempre claros
- ink      = main-color mezclado con negro   -> siempre oscuros
   Así el texto contrasta sin importar qué color pongas en --main-color. */
@supports (color: color-mix(in srgb, red 10%, white)) {
    :root {
        --main-color-pastel: color-mix(in srgb, var(--main-color) 8%, white);
        --main-color-pastel-strong: color-mix(in srgb, var(--main-color) 14%, white);
        --main-color-pastel-border: color-mix(in srgb, var(--main-color) 24%, white);
        --main-color-ink: color-mix(in srgb, var(--main-color) 30%, black);
        --main-color-ink-soft: color-mix(in srgb, var(--main-color) 50%, black);
    }
}

/* Texto blanco u oscuro automático sobre --main-color sólido
   (blanco si el color es oscuro, casi negro si es claro) */
@supports (color: oklch(from red l c h)) {
    :root {
        --text-on-main: oklch(from var(--main-color) clamp(0, (0.68 - l) * 1000, 1) 0 0);
    }
}

a {
    color: var(--main-color);
}


/* === LOGIN === */
.fondo {
    /* Usamos variaciones muy claras de tus colores mezcladas con blanco */
    background: linear-gradient(135deg, #E6F4FF 0%, var(--main-color) 100%);
}

/* El panel izquierdo: Limpio, sutil y elegante */
.left-panel {
    /* Un gradiente muy suave que va de blanco a un toque sutil de tu Lean Blue */
    background: linear-gradient(180deg, #FFFFFF 0%, #F0F7FF 100%);
}

/*Tamaño logo*/
.logo-empresa {
    width: 80%;
}

/* Tamaño letra inicio de sesión */
.form-header h2 {
    font-size: 1.2rem;
}

/* === MASTER === */
.user-avatar {
    background: linear-gradient(135deg, var(--main-color) 0%, var(--main-color-dark) 100%) !important;
}

.nav-item.active i, .nav-item.active span {
    color: var(--text-main);
}

.nav-item.active {
    background-color: var(--main-color);
    color: var(--text-main);
}

/* === TABLAS === */
/* Cambia el color del texto a la primera fila*/
.modern-table tbody tr:first-child {
    color: var(--main-color-dark);
}

.btn-primary {
    background: var(--main-color) !important;
}

.repeater-action-button:hover, .repeater-action-button:focus {
    color: var(--bs-white) !important;
    background-color: var(--main-color-dark) !important;
    border-color: var(--main-color) !important;
    filter: brightness(.88);
    transform: translateY(-2px);
    box-shadow: 0 7px 13px rgba(0, 0, 0, .2);
}