/*
 * Tema Natillera sobre Bootstrap 5: verde, lima y amarillo.
 * Se carga para todas las vistas desde layouts/partials/bs5_css.blade.php.
 *
 * Regla de contraste: el verde 700/900 lleva texto blanco; el lima y el amarillo
 * llevan siempre texto oscuro (--nati-tinta). No poner texto blanco sobre lima/amarillo.
 */
:root {
    --nati-verde-900: #1E4620;
    --nati-verde-800: #265F1B;
    --nati-verde-700: #2F7D16;
    --nati-verde-600: #3C8D0D;
    --nati-lima-500:  #8FC801;
    --nati-lima-300:  #C5E86C;
    --nati-lima-100:  #EEF8D2;
    --nati-amarillo:  #F6D21B;
    --nati-amarillo-100: #FDF6CC;
    --nati-tinta:     #1F2A14;
    --nati-crema:     #FAFCF2;
    --nati-borde:     #DCE8C4;
    --nati-sombra:    0 1px 2px rgba(30, 70, 32, .06), 0 4px 14px rgba(30, 70, 32, .08);

    --bs-body-font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-color: var(--nati-tinta);
    --bs-body-bg: var(--nati-crema);
    --bs-border-color: var(--nati-borde);
    --bs-border-radius: .5rem;
    --bs-border-radius-lg: .75rem;
    --bs-border-radius-sm: .375rem;

    --bs-primary: #2F7D16;           --bs-primary-rgb: 47, 125, 22;
    --bs-success: #2F7D16;           --bs-success-rgb: 47, 125, 22;
    --bs-warning: #F6D21B;           --bs-warning-rgb: 246, 210, 27;
    --bs-link-color: #2F7D16;        --bs-link-color-rgb: 47, 125, 22;
    --bs-link-hover-color: #1E4620;  --bs-link-hover-color-rgb: 30, 70, 32;
    --bs-focus-ring-color: rgba(143, 200, 1, .45);
    --bs-primary-bg-subtle: #EEF8D2; --bs-primary-border-subtle: #C5E86C; --bs-primary-text-emphasis: #1E4620;
    --bs-success-bg-subtle: #EEF8D2; --bs-success-border-subtle: #C5E86C; --bs-success-text-emphasis: #1E4620;
    --bs-warning-bg-subtle: #FDF6CC; --bs-warning-border-subtle: #F3E27A; --bs-warning-text-emphasis: #5C4A00;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--nati-verde-900); font-weight: 700; }
::selection { background: var(--nati-lima-300); color: var(--nati-tinta); }

/* ---------- Franja con el nombre del sitio (layouts/partials/banner) ---------- */
.nati-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: .75rem 1rem;
    background:
        radial-gradient(circle at 15% 20%, rgba(246, 210, 27, .35), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(30, 70, 32, .25), transparent 45%),
        linear-gradient(135deg, var(--nati-lima-500), #74A800);
    overflow: hidden;
}
.nati-banner-titulo {
    font-family: "Lobster", "Brush Script MT", cursive;
    font-size: clamp(2.2rem, 7vw, 4.25rem);
    line-height: 1.1;
    color: var(--nati-amarillo);
    letter-spacing: .5px;
    white-space: nowrap;
    text-shadow:
        0 2px 0 var(--nati-verde-900),
        2px 3px 0 var(--nati-verde-900),
        3px 6px 12px rgba(0, 0, 0, .3);
    transition: transform .2s;
}
.nati-banner-titulo:hover { color: #FFE14D; text-decoration: none; transform: scale(1.02); }
.nati-banner-www { font-size: .55em; opacity: .9; margin-right: .05em; }
.nati-banner-dominio { color: #fff; }

/* ---------- Botones ---------- */
.btn { font-weight: 600; border-radius: var(--bs-border-radius); transition: background-color .15s, box-shadow .15s, transform .05s; }
.btn:active { transform: translateY(1px); }
.btn-primary, .btn-success {
    --bs-btn-color: #fff; --bs-btn-bg: var(--nati-verde-700); --bs-btn-border-color: var(--nati-verde-700);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--nati-verde-800); --bs-btn-hover-border-color: var(--nati-verde-800);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--nati-verde-900); --bs-btn-active-border-color: var(--nati-verde-900);
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--nati-verde-600); --bs-btn-disabled-border-color: var(--nati-verde-600);
    --bs-btn-focus-shadow-rgb: 143, 200, 1;
}
.btn-warning {
    --bs-btn-color: var(--nati-tinta); --bs-btn-bg: var(--nati-amarillo); --bs-btn-border-color: var(--nati-amarillo);
    --bs-btn-hover-color: var(--nati-tinta); --bs-btn-hover-bg: #E9C30A; --bs-btn-hover-border-color: #E9C30A;
    --bs-btn-active-color: var(--nati-tinta); --bs-btn-active-bg: #DDB800; --bs-btn-active-border-color: #DDB800;
    --bs-btn-focus-shadow-rgb: 246, 210, 27;
}
.btn-info {
    --bs-btn-color: var(--nati-tinta); --bs-btn-bg: var(--nati-lima-300); --bs-btn-border-color: var(--nati-lima-300);
    --bs-btn-hover-color: var(--nati-tinta); --bs-btn-hover-bg: var(--nati-lima-500); --bs-btn-hover-border-color: var(--nati-lima-500);
    --bs-btn-active-color: var(--nati-tinta); --bs-btn-active-bg: var(--nati-lima-500); --bs-btn-active-border-color: var(--nati-lima-500);
    --bs-btn-focus-shadow-rgb: 143, 200, 1;
}
.btn-outline-primary, .btn-outline-success {
    --bs-btn-color: var(--nati-verde-700); --bs-btn-border-color: var(--nati-verde-700);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--nati-verde-700); --bs-btn-hover-border-color: var(--nati-verde-700);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--nati-verde-800); --bs-btn-active-border-color: var(--nati-verde-800);
    --bs-btn-focus-shadow-rgb: 143, 200, 1;
}
.btn-outline-warning {
    --bs-btn-color: #6B5600; --bs-btn-border-color: #E0BE0E;
    --bs-btn-hover-color: var(--nati-tinta); --bs-btn-hover-bg: var(--nati-amarillo); --bs-btn-hover-border-color: var(--nati-amarillo);
    --bs-btn-active-color: var(--nati-tinta); --bs-btn-active-bg: #E9C30A; --bs-btn-active-border-color: #E9C30A;
}
.btn-link { --bs-btn-color: var(--nati-verde-700); --bs-btn-hover-color: var(--nati-verde-900); }

/* Badges con fondo de marca */
.text-bg-primary, .text-bg-success { color: #fff !important; background-color: var(--nati-verde-700) !important; }
.text-bg-warning { color: var(--nati-tinta) !important; background-color: var(--nati-amarillo) !important; }
.text-bg-info { color: var(--nati-tinta) !important; background-color: var(--nati-lima-300) !important; }
.bg-success, .bg-primary { background-color: var(--nati-verde-700) !important; }
.bg-warning { background-color: var(--nati-amarillo) !important; }
.text-success, .text-primary { color: var(--nati-verde-700) !important; }
.badge { font-weight: 700; border-radius: 999px; padding: .35em .7em; }

/* ---------- Formularios ---------- */
.form-control, .form-select { border-color: #CFDDB4; }
.form-control:focus, .form-select:focus {
    border-color: var(--nati-lima-500);
    box-shadow: 0 0 0 .2rem rgba(143, 200, 1, .3);
}
.form-check-input:checked { background-color: var(--nati-verde-700); border-color: var(--nati-verde-700); }
.form-check-input:focus { border-color: var(--nati-lima-500); box-shadow: 0 0 0 .2rem rgba(143, 200, 1, .3); }
.form-range::-webkit-slider-thumb { background-color: var(--nati-verde-700); }
.form-range::-moz-range-thumb { background-color: var(--nati-verde-700); }
.input-group-text { background-color: var(--nati-lima-100); border-color: #CFDDB4; color: var(--nati-verde-900); }

/* ---------- Tarjetas ---------- */
.card {
    border: 1px solid var(--nati-borde);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--nati-sombra);
    overflow: hidden;
}
.card-header {
    background: linear-gradient(90deg, var(--nati-lima-100), #fff);
    border-bottom: 3px solid var(--nati-lima-500);
    color: var(--nati-verde-900);
    font-weight: 700;
}
.card-footer { background-color: var(--nati-lima-100); border-top-color: var(--nati-borde); }

/* ---------- Tablas ---------- */
.table { --bs-table-hover-bg: rgba(143, 200, 1, .12); --bs-table-striped-bg: rgba(143, 200, 1, .07); }
.table > thead > tr > th, .table > thead > tr > td {
    background-color: var(--nati-lima-100);
    color: var(--nati-verde-900);
    border-bottom: 2px solid var(--nati-lima-500);
    font-weight: 700;
}
.table > thead.table-dark > tr > th, .table > thead.table-dark > tr > td, .table-dark > thead > tr > th {
    background-color: var(--nati-verde-900);
    color: #fff;
    border-color: var(--nati-verde-800);
}
.table > thead.table-light > tr > th, .table > thead.table-light > tr > td { background-color: var(--nati-lima-100); }
.table-success { --bs-table-bg: var(--nati-lima-100); --bs-table-color: var(--nati-tinta); }
.table-warning { --bs-table-bg: var(--nati-amarillo-100); --bs-table-color: var(--nati-tinta); }

/* ---------- Navegacion ---------- */
/* Barras oscuras (bg-dark): verde bosque con acento lima */
.navbar.bg-dark {
    background: linear-gradient(90deg, var(--nati-verde-900), var(--nati-verde-800)) !important;
    border-bottom: 3px solid var(--nati-lima-500);
}
.navbar-dark .navbar-nav .nav-link, .navbar.bg-dark .nav-link, .navbar.bg-dark .dropdown-toggle { color: rgba(255, 255, 255, .85); }
.navbar-dark .navbar-nav .nav-link:hover, .navbar.bg-dark .nav-link:hover, .navbar.bg-dark .dropdown-toggle:hover { color: var(--nati-lima-300); }
.navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .active > .nav-link { color: var(--nati-amarillo); }
.navbar.bg-dark .navbar-brand { color: var(--nati-lima-300); font-weight: 800; }

/* Barra principal lima (menu de lideres) */
.nati-navbar-lima {
    background: linear-gradient(90deg, var(--nati-lima-500), var(--nati-lima-300)) !important;
    box-shadow: 0 2px 8px rgba(30, 70, 32, .15);
}
.nati-navbar-lima .navbar-brand { color: var(--nati-verde-900); font-weight: 800; }
.nati-navbar-lima .nav-link { color: var(--nati-tinta) !important; font-weight: 600; border-radius: .375rem; }
.nati-navbar-lima .nav-link:hover, .nati-navbar-lima .show > .nav-link { background-color: rgba(255, 255, 255, .45); }

/* Barra de las paginas publicas / socios */
.navbar-laravel {
    background-color: #fff;
    border-bottom: 3px solid var(--nati-lima-500);
    box-shadow: 0 2px 8px rgba(30, 70, 32, .08);
}
.navbar-laravel .nav-link { color: var(--nati-verde-900); font-weight: 600; }
.navbar-laravel .nav-link:hover { color: var(--nati-verde-700); }
.navbar-laravel .nav-link.active, .navbar-laravel .active > .nav-link {
    color: var(--nati-verde-900);
    box-shadow: inset 0 -3px 0 var(--nati-amarillo);
}

/* Menus desplegables */
.dropdown-menu {
    border: 1px solid var(--nati-borde);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--nati-sombra);
    --bs-dropdown-link-hover-bg: var(--nati-lima-100);
    --bs-dropdown-link-hover-color: var(--nati-verde-900);
    --bs-dropdown-link-active-bg: var(--nati-verde-700);
    --bs-dropdown-link-active-color: #fff;
}

/* Pestanas, pildoras, paginacion, lista */
.nav-tabs { border-bottom-color: var(--nati-borde); }
.nav-tabs .nav-link { color: var(--nati-verde-700); }
.nav-tabs .nav-link.active { color: var(--nati-verde-900); font-weight: 700; border-color: var(--nati-borde) var(--nati-borde) #fff; box-shadow: inset 0 3px 0 var(--nati-lima-500); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--nati-verde-700); }
.nav-pills .nav-link { color: var(--nati-verde-700); }
.pagination {
    --bs-pagination-color: var(--nati-verde-700);
    --bs-pagination-hover-color: var(--nati-verde-900);
    --bs-pagination-hover-bg: var(--nati-lima-100);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(143, 200, 1, .3);
    --bs-pagination-active-bg: var(--nati-verde-700);
    --bs-pagination-active-border-color: var(--nati-verde-700);
}
.list-group { --bs-list-group-active-bg: var(--nati-verde-700); --bs-list-group-active-border-color: var(--nati-verde-700); --bs-list-group-action-hover-bg: var(--nati-lima-100); }

/* ---------- Avisos y modales ---------- */
.alert { border-radius: var(--bs-border-radius); border-left-width: 5px; }
.alert-success { background-color: var(--nati-lima-100); border-color: var(--nati-lima-500); color: var(--nati-verde-900); }
.alert-warning { background-color: var(--nati-amarillo-100); border-color: var(--nati-amarillo); color: #5C4A00; }
.alert-info { background-color: #F3FAE3; border-color: var(--nati-lima-300); color: var(--nati-verde-900); }

.modal-content { border: 0; border-radius: var(--bs-border-radius-lg); box-shadow: 0 10px 40px rgba(30, 70, 32, .25); overflow: hidden; }
.modal-header {
    background: linear-gradient(90deg, var(--nati-lima-500), var(--nati-lima-300));
    color: var(--nati-tinta);
    border-bottom: 0;
}
.modal-header .modal-title { color: var(--nati-verde-900); font-weight: 800; }
.modal-footer { background-color: var(--nati-lima-100); border-top-color: var(--nati-borde); }

.progress { --bs-progress-bar-bg: var(--nati-verde-700); background-color: var(--nati-lima-100); }
.spinner-border, .spinner-grow { color: var(--nati-verde-700); }

/* DataTables (integracion bootstrap5) */
div.dataTables_wrapper div.dataTables_filter input, div.dataTables_wrapper div.dataTables_length select { border-color: #CFDDB4; }
.page-item.active .page-link { background-color: var(--nati-verde-700); border-color: var(--nati-verde-700); }

/* Barra de desplazamiento sutil */
* { scrollbar-color: var(--nati-lima-300) transparent; }