/* =====================================================================
   Tema visual — paleta institucional
   Principales:  verde PANTONE 7479 C (#00CE7C) · morado PANTONE 2745 C
                 (#280071) · blanco
   Secundarios:  #ADDC91 #9BE3BF #84BD00 #FFA38B #FF8674 #890C58
                 #FECB8B #FFB549 #C16C18
   Las variantes -dark / -soft / -tint son tonos derivados de los
   principales, necesarios para contraste de texto y fondos suaves.
   ===================================================================== */
:root {
    /* Principales */
    --fc-purple:       #280071;   /* PANTONE 2745 C */
    --fc-purple-dark:  #1b0049;
    --fc-purple-soft:  #43119c;
    --fc-purple-tint:  #f1edf9;
    --fc-green:        #00ce7c;   /* PANTONE 7479 C */
    --fc-green-dark:   #00a866;   /* verde legible sobre blanco */
    --fc-green-deep:   #007a49;   /* verde para texto pequeño */
    --fc-green-tint:   #e6fbf1;

    /* Secundarios */
    --fc-sage:         #addc91;
    --fc-mint:         #9be3bf;
    --fc-lime:         #84bd00;
    --fc-peach:        #ffa38b;
    --fc-coral:        #ff8674;
    --fc-wine:         #890c58;
    --fc-sand:         #fecb8b;
    --fc-amber:        #ffb549;
    --fc-terra:        #c16c18;

    /* Neutros */
    --fc-gray-bg:      #f6f5fa;
    --fc-gray-border:  #e3e0ee;
    --fc-text:         #221833;
    --fc-muted:        #6e6880;

    /* Bootstrap: los utilitarios semánticos toman los tonos de la marca */
    --bs-primary:      #280071;
    --bs-primary-rgb:  40, 0, 113;
    --bs-success:      #00a866;
    --bs-success-rgb:  0, 168, 102;
    --bs-danger:       #890c58;
    --bs-danger-rgb:   137, 12, 88;
    --bs-warning:      #ffb549;
    --bs-warning-rgb:  255, 181, 73;
    --bs-link-color:            #43119c;
    --bs-link-hover-color:      #280071;
    --bs-link-color-rgb:        67, 17, 156;
    --bs-link-hover-color-rgb:  40, 0, 113;
}

body {
    background-color: var(--fc-gray-bg);
    color: var(--fc-text);
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Navbar ---------- */
.navbar-fenalco {
    background: linear-gradient(90deg, var(--fc-purple-dark) 0%, var(--fc-purple) 60%);
    border-bottom: 3px solid var(--fc-green);
    box-shadow: 0 2px 8px rgba(27, 0, 73, .22);
}
.navbar-fenalco .navbar-brand {
    color: #fff;
    font-weight: 700;
    letter-spacing: .2px;
}
.navbar-fenalco .navbar-brand .brand-accent { color: var(--fc-mint); }
.navbar-fenalco .nav-link {
    color: rgba(255, 255, 255, .82);
    font-weight: 500;
    border-radius: 6px;
    padding-inline: .85rem;
}
.navbar-fenalco .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .10); }
.navbar-fenalco .nav-link.active { color: #fff; box-shadow: inset 0 -3px 0 var(--fc-green); }
.navbar-fenalco .dropdown-menu { border: none; box-shadow: 0 8px 24px rgba(27, 0, 73, .20); }

/* ---------- Botones ---------- */
.btn-fenalco {
    background-color: var(--fc-purple);
    border-color: var(--fc-purple);
    color: #fff;
}
.btn-fenalco:hover, .btn-fenalco:focus {
    background-color: var(--fc-purple-dark);
    border-color: var(--fc-purple-dark);
    color: #fff;
}
/* Verde institucional: lleva texto morado porque el blanco no contrasta */
.btn-accent {
    background-color: var(--fc-green);
    border-color: var(--fc-green);
    color: var(--fc-purple);
    font-weight: 600;
}
.btn-accent:hover, .btn-accent:focus {
    background-color: var(--fc-green-dark);
    border-color: var(--fc-green-dark);
    color: #fff;
}
.btn-outline-fenalco {
    color: var(--fc-purple);
    border-color: var(--fc-purple);
}
.btn-outline-fenalco:hover { background: var(--fc-purple); color: #fff; }
.btn:focus-visible { box-shadow: 0 0 0 .25rem rgba(40, 0, 113, .25); }

/* ---------- Texto / utilidades ---------- */
.text-fenalco     { color: var(--fc-purple) !important; }
.text-accent      { color: var(--fc-green) !important; }      /* sobre fondo oscuro */
.text-accent-dark { color: var(--fc-green-dark) !important; } /* sobre fondo claro */
.text-wine        { color: var(--fc-wine) !important; }
.bg-fenalco       { background-color: var(--fc-purple) !important; color: #fff; }
.bg-fenalco-tint  { background-color: var(--fc-purple-tint) !important; }

/* ---------- Formularios ---------- */
.form-control:focus, .form-select:focus {
    border-color: var(--fc-purple-soft);
    box-shadow: 0 0 0 .2rem rgba(40, 0, 113, .12);
}
.form-check-input:checked {
    background-color: var(--fc-purple);
    border-color: var(--fc-purple);
}
.form-check-input:focus { border-color: var(--fc-purple-soft); box-shadow: 0 0 0 .2rem rgba(40, 0, 113, .12); }

/* ---------- Tarjetas / secciones ---------- */
.card { border: 1px solid var(--fc-gray-border); border-radius: 10px; }
.card-fenalco > .card-header {
    background: var(--fc-purple);
    color: #fff;
    font-weight: 600;
    border-radius: 10px 10px 0 0;
}
.card-header-soft {
    background: var(--fc-purple-tint);
    color: var(--fc-purple);
    border-bottom-color: var(--fc-gray-border);
}
.section-title {
    color: var(--fc-purple);
    font-weight: 700;
    border-left: 4px solid var(--fc-green);
    padding-left: .6rem;
    margin: 1.2rem 0 .6rem;
}
.badge-soft {
    background: var(--fc-purple-tint);
    color: var(--fc-purple);
    border: 1px solid var(--fc-gray-border);
    font-weight: 600;
}

/* ---------- Avisos ---------- */
.alert-success {
    --bs-alert-bg: var(--fc-green-tint);
    --bs-alert-border-color: var(--fc-mint);
    --bs-alert-color: #00623a;
}
.alert-info {
    --bs-alert-bg: var(--fc-purple-tint);
    --bs-alert-border-color: #c9bce8;
    --bs-alert-color: var(--fc-purple);
}
.alert-danger {
    --bs-alert-bg: #fff0ec;
    --bs-alert-border-color: var(--fc-peach);
    --bs-alert-color: var(--fc-wine);
}

/* ---------- Auth ---------- */
.auth-wrap { max-width: 460px; margin: 3rem auto; }
.auth-card { border-top: 4px solid var(--fc-green); }

/* ---------- Calculadora ---------- */
.accordion-button:not(.collapsed) {
    background-color: var(--fc-purple-tint);
    color: var(--fc-purple);
    box-shadow: inset 0 -1px 0 var(--fc-gray-border);
}
.accordion-button:focus { box-shadow: none; }
.var-input { max-width: 140px; }
.var-col { min-width: 110px; }
@media (max-width: 767.98px) {
    .var-col { min-width: 120px; }
    .var-col .form-control-sm { font-size: .9rem; padding: .35rem .5rem; }
}
.input-help { font-size: .78rem; color: var(--fc-muted); margin-top: .2rem; }

/* Ficha de campo escalar */
.field-tile {
    background: #fff;
    border: 1px solid var(--fc-gray-border);
    border-left: 3px solid var(--fc-purple-soft);
    border-radius: 0 8px 8px 0;
    padding: .5rem .7rem .45rem;
    height: 100%;
    transition: border-left-color .15s, box-shadow .15s;
}
.field-tile:has(.form-control:focus),
.field-tile:has(.input-group .form-control:focus) {
    border-left-color: var(--fc-green);
    box-shadow: 0 2px 10px rgba(40, 0, 113, .10);
}
.field-tile .form-label {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--fc-muted);
    margin-bottom: .28rem;
    line-height: 1.2;
}
.field-tile .form-control,
.field-tile .input-group .form-control {
    font-weight: 600;
    color: var(--fc-purple);
    font-size: .92rem;
    border-color: var(--fc-gray-border);
}
.field-tile .input-group-text {
    background: var(--fc-gray-bg);
    border-color: var(--fc-gray-border);
    color: var(--fc-muted);
    font-size: .82rem;
}

/* Panel de resultados pegajoso */
.results-panel { position: sticky; top: 1rem; }
.results-panel .metric {
    display: flex; justify-content: space-between;
    padding: .35rem 0; border-bottom: 1px dashed var(--fc-gray-border);
}
.results-panel .metric .val { font-weight: 700; color: var(--fc-purple); }
.result-variety-card { border-top: 3px solid var(--fc-green); }
/* Estado del margen: color + texto, nunca color solo */
.badge-margin-good { background: var(--fc-green-deep); color: #fff; }
.badge-margin-mid  { background: var(--fc-amber); color: var(--fc-purple); }
.badge-margin-bad  { background: var(--fc-wine); color: #fff; }

/* Etiqueta "ingrese su valor" estilo Excel (verde) */
.input-entrada { background-color: var(--fc-green-tint); }
.input-entrada:focus { background-color: #fff; }

/* ---------- Footer ---------- */
.footer-fenalco {
    background: var(--fc-purple-dark);
    color: rgba(255, 255, 255, .78);
    padding: 1.5rem 0;
    margin-top: 3rem;
    font-size: .9rem;
    border-top: 3px solid var(--fc-green);
}
.footer-fenalco a { color: #fff; text-decoration: none; }

/* ---------- Tablas ---------- */
.table-fenalco thead th { background: var(--fc-purple); color: #fff; }
.table-compact td, .table-compact th { padding: .4rem .5rem; }

/* KPI cards */
.kpi-card { border-radius: 10px; border-top: 3px solid var(--fc-green); }
.kpi-card .kpi-value { font-size: 1.6rem; font-weight: 700; color: var(--fc-purple); }
.kpi-card .kpi-label { color: var(--fc-muted); font-size: .85rem; }