﻿/* === Variables de marca === */
:root {
    --brand-green: #AECC10; /* Verde principal */
    --brand-green-dark: #8FAA0D; /* Verde más oscuro para hover */
    --brand-black: #000000;
    /* Sobrescritura Bootstrap */
    --bs-primary: var(--brand-green);
    --bs-link-color: var(--brand-green);
    --bs-link-hover-color: color-mix(in srgb, var(--brand-green) 80%, black 20%);
    --bs-border-color: color-mix(in srgb, var(--brand-green) 20%, #dee2e6 80%);
    --bs-focus-ring-color: color-mix(in srgb, var(--brand-green) 25%, transparent);
    --bs-btn-bg: var(--brand-green);
    --bs-btn-border-color: var(--brand-green);
    --bs-btn-hover-bg: var(--brand-green-dark);
    --bs-btn-hover-border-color: var(--brand-green-dark);
}

/* === Utilidades === */
.text-brand {
    color: var(--brand-green) !important;
}

.text-brand-dark {
    color: var(--brand-black) !important;
}

.bg-brand {
    background-color: var(--brand-green) !important;
    color: #000 !important;
}

.border-brand {
    border-color: var(--brand-green) !important;
}

/* ===== Gradiente (verde → negro) ===== */
.bg-brand-gradient {
    background: linear-gradient( 90deg, var(--brand-green) 0%, color-mix(in srgb, var(--brand-green) 65%, black 35%) 45%, color-mix(in srgb, var(--brand-green) 45%, black 55%) 70%, var(--brand-black) 100% ) !important;
    color: #fff !important;
}

/* ===== Navbar ===== */
.bg-dark {
    background-color: var(--brand-black) !important;
}

.navbar.bg-dark.gradient {
    background: linear-gradient( 90deg, var(--brand-black) 0%, color-mix(in srgb, var(--brand-green) 30%, black 70%) 50%, var(--brand-green) 100% ) !important;
}

.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-brand {
    color: #fff !important;
}

.navbar {
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

/* ===== Botones ===== */
.btn-primary {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--brand-green);
    --bs-btn-border-color: var(--brand-green);
    --bs-btn-hover-bg: var(--brand-green-dark);
    --bs-btn-hover-border-color: var(--brand-green-dark);
    --bs-btn-focus-shadow-rgb: 174,204,16; /* rgb de #AECC10 */
}

/* btn-success → verde corporativo */
.btn-success {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--brand-green);
    --bs-btn-border-color: var(--brand-green);
    --bs-btn-hover-bg: var(--brand-green-dark);
    --bs-btn-hover-border-color: var(--brand-green-dark);
    --bs-btn-focus-shadow-rgb: 174,204,16;
}

/* ===== Formularios ===== */
.form-control {
    border-color: color-mix(in srgb, var(--brand-green) 20%, #dee2e6 80%);
}

    .form-control:focus,
    .form-select:focus {
        border-color: var(--brand-green);
        box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand-green) 25%, transparent);
    }

/* Enlaces */
a.text-brand:hover {
    text-decoration: underline;
}

/* Cards */
.card.border-brand {
    border-width: 2px;
}
