/* =============================================
   GanaderiaGyRoso — Theme CSS
   Color morado: #6f42c1 / hover: #5a32a3
   ============================================= */
:root {
    --morado:        #6f42c1;
    --morado-hover:  #5a32a3;
    --morado-dark:   #4a2888;
    --fondo-header:  #1a5c2a;
    --fondo-footer:  #1a5c2a;

    /* Bootstrap CSS variables — elimina el azul nativo */
    --bs-primary:           #6f42c1;
    --bs-primary-rgb:       111, 66, 193;
    --bs-link-color:        #6f42c1;
    --bs-link-hover-color:  #5a32a3;
    --bs-focus-ring-color:  rgba(111, 66, 193, .25);

    /* Inputs / focus */
    --bs-form-check-input-checked-bg-color:     #6f42c1;
    --bs-form-check-input-checked-border-color: #6f42c1;
}
/* =============================================
   BASE
   ============================================= */
body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background: #fff;
    color: #1f2933;
}

/* Reemplaza el negro de Bootstrap por verde corporativo */
.bg-dark {
    background-color: #1a5c2a !important;
}

a { color: var(--morado); }
a:hover { color: var(--morado-hover); }

main { padding: 1rem; max-width: 1100px; margin: 0 auto; }

/* =============================================
   HEADER
   ============================================= */
.site-header {
    background-color: var(--fondo-header);
    border-bottom: 3px solid var(--morado);
}

.site-brand {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--morado);
    letter-spacing: 0.5px;
}

/* NAV — botones morados con texto blanco */
.site-nav a {
    background-color: var(--morado);
    color: #fff !important;
    border: none;
    border-radius: 0.4rem;
    padding: 0.38rem 0.9rem;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none !important;
    transition: background-color 0.18s ease;
    white-space: nowrap;
}
.site-nav a:hover {
    background-color: var(--morado-hover) !important;
    color: #fff !important;
}

/* Responsive: en móvil el header se apila */
@media (max-width: 767px) {
    .site-header .container {
        flex-direction: column;
        gap: 0.75rem;
    }
    .site-nav {
        justify-content: center;
    }
}

/* =============================================
   BOTONES — Override Bootstrap global
   ============================================= */

/* btn-primary → morado sólido */
.btn-primary {
    background-color: var(--morado) !important;
    border-color:     var(--morado) !important;
    color: #fff !important;
    font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--morado-hover) !important;
    border-color:     var(--morado-hover) !important;
    color: #fff !important;
}

/* btn-outline-primary → borde y texto morado */
.btn-outline-primary {
    border-color: var(--morado) !important;
    color:        var(--morado) !important;
    font-weight: 600;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--morado) !important;
    border-color:     var(--morado) !important;
    color: #fff !important;
}

/* btn-secondary → morado oscuro */
.btn-secondary {
    background-color: var(--morado-hover) !important;
    border-color:     var(--morado-hover) !important;
    color: #fff !important;
    font-weight: 600;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: var(--morado-dark) !important;
    border-color:     var(--morado-dark) !important;
    color: #fff !important;
}

/* btn-outline-secondary */
.btn-outline-secondary {
    border-color: var(--morado-hover) !important;
    color:        var(--morado-hover) !important;
    font-weight: 600;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--morado-hover) !important;
    border-color:     var(--morado-hover) !important;
    color: #fff !important;
}

/* =============================================
   PAGINACIÓN
   ============================================= */
.page-link { color: var(--morado) !important; }
.page-link:hover {
    color: #fff !important;
    background-color: var(--morado) !important;
    border-color:     var(--morado) !important;
}
.page-item.active .page-link {
    background-color: var(--morado) !important;
    border-color:     var(--morado) !important;
    color: #fff !important;
}

/* =============================================
   FOOTER
   ============================================= */
.site-footer {
    background-color: var(--fondo-footer);
    color: #fff;
    padding: 3rem 0 1.5rem;
    margin-top: 3rem;
}
.site-footer h5 { color: #fff; }

.site-footer .footer-links a,
.site-footer p a {
    color: rgba(255,255,255,.75);
    text-decoration: none;
    transition: color .2s;
}
.site-footer .footer-links a:hover,
.site-footer p a:hover {
    color: #fff;
}
.site-footer .d-flex a {
    color: rgba(255,255,255,.75);
    text-decoration: none;
    transition: color .2s;
}
.site-footer .d-flex a:hover { color: #fff; }

.site-footer .footer-bottom {
    border-top: 1px solid rgba(255,255,255,.12);
}

/* =============================================
   HERO BANNER
   ============================================= */
.hero-banner { max-height: 500px; }
.hero-banner img { transition: transform .5s ease; }
.hero-banner:hover img { transform: scale(1.02); }

@media (max-width: 768px) {
    .hero-banner { max-height: 300px; }
}

/* =============================================
   OVERRIDE COMPLETO — Todo el azul → morado
   Cubre: badges, alerts, links, inputs,
   progress, list-group, form-check, tabs,
   spinners, borders de focus, etc.
   ============================================= */

/* ── Links globales ── */
a                        { color: #6f42c1; }
a:hover                  { color: #5a32a3; }
a:focus-visible          { outline-color: #6f42c1; }

/* ── Badges ── */
.badge.bg-primary,
.badge.text-bg-primary   { background-color: #6f42c1 !important; color: #fff !important; }

/* ── Alerts ── */
.alert-primary {
    background-color: #ede6f9 !important;
    border-color:     #c9b1ef !important;
    color:            #4a2888 !important;
}
.alert-info {
    background-color: #ede6f9 !important;
    border-color:     #c9b1ef !important;
    color:            #4a2888 !important;
}

/* ── Form inputs — borde focus ── */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #a07dd6 !important;
    box-shadow:   0 0 0 0.2rem rgba(111, 66, 193, .2) !important;
}

/* ── Checkboxes y radios ── */
.form-check-input:checked {
    background-color: #6f42c1 !important;
    border-color:     #6f42c1 !important;
}

/* ── Progress bars ── */
.progress-bar,
.progress-bar.bg-primary { background-color: #6f42c1 !important; }

/* ── List group — item activo ── */
.list-group-item.active,
.list-group-item-action:hover {
    background-color: #6f42c1 !important;
    border-color:     #6f42c1 !important;
    color: #fff !important;
}

/* ── Tabs / Nav pills ── */
.nav-pills .nav-link.active,
.nav-tabs  .nav-link.active {
    background-color: #6f42c1 !important;
    border-color:     #6f42c1 !important;
    color: #fff !important;
}
.nav-pills .nav-link:hover,
.nav-tabs  .nav-link:hover {
    color: #6f42c1 !important;
}

/* ── Spinners ── */
.spinner-border.text-primary,
.spinner-grow.text-primary { color: #6f42c1 !important; }

/* ── Table — filas activas/hover ── */
.table-primary {
    --bs-table-bg:           #ede6f9 !important;
    --bs-table-border-color: #c9b1ef !important;
    color: #4a2888 !important;
}

/* ── Dropdowns ── */
.dropdown-item.active,
.dropdown-item:active {
    background-color: #6f42c1 !important;
    color: #fff !important;
}

/* ── Accordion ── */
.accordion-button:not(.collapsed) {
    color:            #6f42c1 !important;
    background-color: #f3edfb !important;
    box-shadow:       inset 0 -1px 0 rgba(111, 66, 193, .2) !important;
}
.accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, .2) !important;
}

/* ── Breadcrumbs ── */
.breadcrumb-item.active { color: #6f42c1 !important; }
.breadcrumb-item a      { color: #6f42c1 !important; }

/* ── Text utilities ── */
.text-primary   { color: #6f42c1 !important; }
.text-info      { color: #6f42c1 !important; }

/* ── Background utilities ── */
.bg-primary     { background-color: #6f42c1 !important; }
.bg-info        { background-color: #a07dd6 !important; }

/* ── Border utilities ── */
.border-primary { border-color: #6f42c1 !important; }

/* ── bg-verde helper ── */
.bg-verde       { background-color: #1a5c2a !important; }