/* --------------------------------------------------------------------------
   Tema global ENA — paleta verde elegante
   Complementos: menta, crema, ámbar suave (edición), coral (peligro)
   -------------------------------------------------------------------------- */

:root {
    --ena-forest: #0b4f3f;
    --ena-primary: #147a5f;
    --ena-primary-soft: #1f8f6f;
    --ena-mint: #e8f5ef;
    --ena-mint-deep: #d4ebe0;
    --ena-cream: #f7faf8;
    --ena-ink: #132820;
    --ena-muted: #5f746b;
    --ena-line: rgba(11, 79, 63, 0.12);
    --ena-shadow: 0 12px 28px rgba(11, 79, 63, 0.08);
    --ena-radius: 1rem;
    --ena-amber: #b8892d;
    --ena-amber-soft: #f6edd8;
    --ena-sky: #2a7a8c;
    --ena-sky-soft: #e4f3f6;
}

body.ena-theme {
    color: var(--ena-ink);
    background-color: #eef5f1 !important;
}

body.ena-theme .app-main {
    background:
        radial-gradient(circle at top right, rgba(168, 230, 207, 0.18), transparent 38%),
        linear-gradient(180deg, #f4faf7 0%, #eef5f1 100%);
    min-height: 100vh;
}

body.ena-theme .app-header {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--ena-line);
}

body.ena-theme .app-sidebar {
    background:
        radial-gradient(circle at top left, rgba(31, 143, 111, 0.35), transparent 45%),
        linear-gradient(180deg, #0b4f3f 0%, #0a3f33 55%, #08352c 100%) !important;
}

/* —— Hero de página —— */
body.ena-theme .app-main .card.ena-hero,
body.ena-theme .app-main .card.ena-bonos-hero,
body.ena-theme .app-main .card.ena-dash-hero,
.ena-hero {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: var(--ena-radius);
    background:
        radial-gradient(circle at top right, rgba(168, 230, 207, 0.35), transparent 42%),
        linear-gradient(135deg, #0b4f3f 0%, #147a5f 55%, #1f8f6f 100%);
    color: #f4fbf8;
    box-shadow: var(--ena-shadow);
    margin-bottom: 1.25rem;
}

body.ena-theme .app-main .card.ena-hero.ena-hero-amber,
.ena-hero.ena-hero-amber {
    background:
        radial-gradient(circle at top right, rgba(246, 237, 216, 0.35), transparent 42%),
        linear-gradient(135deg, #0b4f3f 0%, #147a5f 48%, #9a7424 130%);
}

body.ena-theme .app-main .card.ena-hero.ena-hero-sky,
.ena-hero.ena-hero-sky {
    background:
        radial-gradient(circle at top right, rgba(228, 243, 246, 0.4), transparent 42%),
        linear-gradient(135deg, #0b4f3f 0%, #147a5f 45%, #2a7a8c 120%);
}

.ena-hero::after,
.ena-bonos-hero::after,
.ena-dash-hero::after {
    content: '';
    position: absolute;
    inset: auto -48px -70px auto;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

body.ena-theme .app-main .ena-hero > .card-body,
body.ena-theme .app-main .ena-bonos-hero > .card-body,
body.ena-theme .app-main .ena-dash-hero > .card-body,
.ena-hero .card-body,
.ena-bonos-hero .card-body,
.ena-dash-hero .card-body {
    position: relative;
    z-index: 1;
    background: transparent;
    color: inherit;
}

.ena-hero-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(1.25rem, 2vw, 1.7rem);
    letter-spacing: -0.02em;
    margin-bottom: 0.2rem;
}

.ena-hero-sub {
    color: rgba(244, 251, 248, 0.78);
    margin-bottom: 0;
    font-size: 0.92rem;
}

.ena-hero .breadcrumb {
    margin-bottom: 0.5rem;
    background: transparent;
    padding: 0;
}

.ena-hero .breadcrumb-item,
.ena-hero .breadcrumb-item a,
.ena-hero .breadcrumb-item.active {
    color: rgba(244, 251, 248, 0.78);
    text-decoration: none;
    font-size: 0.88rem;
}

.ena-hero .breadcrumb-item.active {
    color: #fff;
    font-weight: 600;
}

.ena-hero .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(244, 251, 248, 0.4);
}

.ena-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 0.84rem;
    white-space: nowrap;
}

/* —— Cards AdminLTE remapeadas —— */
body.ena-theme .app-main .card:not(.ena-hero):not(.ena-bonos-hero):not(.ena-dash-hero) {
    border-radius: var(--ena-radius);
    box-shadow: var(--ena-shadow);
    border: 1px solid var(--ena-line);
    overflow: hidden;
    background: #fff;
}

body.ena-theme .app-main .card.card-outline {
    border-top: 0;
}

body.ena-theme .app-main .card-info.card-outline,
body.ena-theme .app-main .card-primary.card-outline,
body.ena-theme .app-main .card-warning.card-outline,
body.ena-theme .app-main .card-success.card-outline {
    border: 1px solid var(--ena-line);
}

body.ena-theme .app-main .card-info > .card-header,
body.ena-theme .app-main .card-primary > .card-header,
body.ena-theme .app-main .card-success > .card-header {
    background: linear-gradient(180deg, #f4faf7 0%, #eef7f2 100%);
    border-bottom: 1px solid var(--ena-line);
    color: var(--ena-forest);
}

body.ena-theme .app-main .card-warning > .card-header {
    background: linear-gradient(180deg, #fbf7ee 0%, #f6edd8 100%);
    border-bottom: 1px solid rgba(184, 137, 45, 0.18);
    color: #7a5c18;
}

body.ena-theme .app-main .card-header h3,
body.ena-theme .app-main .card-header .card-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    margin: 0;
    color: inherit;
}

body.ena-theme .app-main .card:not(.ena-hero):not(.ena-bonos-hero):not(.ena-dash-hero) > .card-body {
    background: var(--ena-cream);
}

body.ena-theme .app-main .card-footer {
    background: #fff;
    border-top: 1px solid var(--ena-line);
}

body.ena-theme .app-main .ena-card > .card-header {
    background: linear-gradient(180deg, #f4faf7 0%, #eef7f2 100%);
    border-bottom: 1px solid var(--ena-line);
    color: var(--ena-forest);
}

/* —— Botones —— */
body.ena-theme .btn-primary,
body.ena-theme .btn-bono-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ena-primary);
    --bs-btn-border-color: var(--ena-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ena-forest);
    --bs-btn-hover-border-color: var(--ena-forest);
    --bs-btn-active-bg: #083c30;
    --bs-btn-active-border-color: #083c30;
    --bs-btn-disabled-bg: #7aa897;
    --bs-btn-disabled-border-color: #7aa897;
    font-weight: 600;
    border-radius: 0.55rem;
}

body.ena-theme .btn-secondary,
body.ena-theme .btn-bono-soft {
    --bs-btn-color: var(--ena-forest);
    --bs-btn-bg: var(--ena-mint);
    --bs-btn-border-color: var(--ena-mint-deep);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ena-primary);
    --bs-btn-hover-border-color: var(--ena-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ena-forest);
    --bs-btn-active-border-color: var(--ena-forest);
    font-weight: 600;
    border-radius: 0.55rem;
}

body.ena-theme .btn-warning {
    --bs-btn-color: #5c4510;
    --bs-btn-bg: #efd9a4;
    --bs-btn-border-color: #e2c783;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ena-amber);
    --bs-btn-hover-border-color: var(--ena-amber);
    font-weight: 600;
    border-radius: 0.55rem;
}

body.ena-theme .btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ena-sky);
    --bs-btn-border-color: var(--ena-sky);
    --bs-btn-hover-bg: #1f6271;
    --bs-btn-hover-border-color: #1f6271;
    font-weight: 600;
    border-radius: 0.55rem;
}

body.ena-theme .btn-outline-primary,
body.ena-theme .btn-outline-secondary,
body.ena-theme .btn-outline-info,
body.ena-theme .btn-bono-ghost {
    --bs-btn-color: var(--ena-forest);
    --bs-btn-border-color: rgba(11, 79, 63, 0.28);
    --bs-btn-hover-color: var(--ena-forest);
    --bs-btn-hover-bg: var(--ena-mint);
    --bs-btn-hover-border-color: var(--ena-primary);
    border-radius: 0.55rem;
    font-weight: 600;
}

body.ena-theme .btn-outline-danger {
    border-radius: 0.55rem;
}

body.ena-theme .ena-hero .btn-bono-ghost,
body.ena-theme .ena-hero .btn-outline-secondary {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, 0.35);
    --bs-btn-hover-color: var(--ena-forest);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
}

/* —— Formularios —— */
body.ena-theme .app-main .form-label {
    color: var(--ena-forest);
    font-weight: 600;
    font-size: 0.88rem;
}

body.ena-theme .app-main .form-control,
body.ena-theme .app-main .form-select {
    border-color: rgba(11, 79, 63, 0.18);
    border-radius: 0.55rem;
}

body.ena-theme .app-main .form-control:focus,
body.ena-theme .app-main .form-select:focus {
    border-color: var(--ena-primary);
    box-shadow: 0 0 0 0.2rem rgba(20, 122, 95, 0.18);
}

body.ena-theme .app-main .form-check-input:checked {
    background-color: var(--ena-primary);
    border-color: var(--ena-primary);
}

body.ena-theme .app-main .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(20, 122, 95, 0.18);
}

/* —— Tablas —— */
body.ena-theme .app-main .table thead th,
body.ena-theme .app-main table.dataTable thead th {
    background: linear-gradient(180deg, #eaf6f0 0%, #dff0e7 100%) !important;
    color: var(--ena-forest);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    font-weight: 700;
    border-color: var(--ena-line) !important;
}

body.ena-theme .app-main .table tbody td {
    border-color: rgba(11, 79, 63, 0.08);
    vertical-align: middle;
}

body.ena-theme .app-main .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: rgba(232, 245, 239, 0.35);
}

body.ena-theme .app-main .table tbody tr:hover > * {
    background: rgba(232, 245, 239, 0.65) !important;
}

body.ena-theme .app-main .table-light,
body.ena-theme .app-main .table tfoot th {
    --bs-table-bg: var(--ena-mint);
    color: var(--ena-forest);
}

/* —— Badges —— */
body.ena-theme .badge.text-bg-primary,
body.ena-theme .badge.text-bg-success,
body.ena-theme .badge.text-bg-info,
body.ena-theme .badge-bono {
    background: linear-gradient(135deg, #147a5f, #1f8f6f) !important;
    color: #fff !important;
    border-radius: 999px;
    font-weight: 600;
}

body.ena-theme .badge.text-bg-secondary,
body.ena-theme .badge-bono-muted {
    background: var(--ena-mint-deep) !important;
    color: var(--ena-forest) !important;
    border-radius: 999px;
    font-weight: 600;
}

body.ena-theme .badge.text-bg-warning {
    background: var(--ena-amber-soft) !important;
    color: #7a5c18 !important;
    border-radius: 999px;
}

/* —— Alertas / breadcrumbs fuera del hero —— */
body.ena-theme .app-main .alert-success {
    background: var(--ena-mint);
    border-color: var(--ena-mint-deep);
    color: var(--ena-forest);
}

body.ena-theme .app-main > .container-fluid > .row > .breadcrumb,
body.ena-theme .app-main .breadcrumb:not(.ena-hero .breadcrumb) {
    background: transparent;
}

body.ena-theme .app-main .breadcrumb:not(.ena-hero .breadcrumb) .breadcrumb-item,
body.ena-theme .app-main .breadcrumb:not(.ena-hero .breadcrumb) .breadcrumb-item a {
    color: var(--ena-muted);
    text-decoration: none;
}

body.ena-theme .app-main .breadcrumb:not(.ena-hero .breadcrumb) .breadcrumb-item.active {
    color: var(--ena-forest);
    font-weight: 600;
}

body.ena-theme .pagination .page-link {
    color: var(--ena-primary);
    border-color: var(--ena-line);
}

body.ena-theme .pagination .page-item.active .page-link {
    background-color: var(--ena-primary);
    border-color: var(--ena-primary);
    color: #fff;
}

/* —— Filas de filtro: tipografías/hints no desalinean controles en escritorio —— */
body.ena-theme .ena-filter-row > [class*="col-"] > .form-label {
    margin-bottom: 0.35rem;
    min-height: 1.5rem;
    display: flex;
    align-items: center;
}

body.ena-theme .ena-filter-row .form-text,
body.ena-theme .ena-filter-row > [class*="col-"] > small.text-muted {
    margin-top: 0.35rem;
    margin-bottom: 0;
    line-height: 1.25;
}

body.ena-theme .ena-filter-row .ts-wrapper.form-select,
body.ena-theme .ena-filter-row .ts-wrapper.single .ts-control {
    min-height: calc(1.5em + 0.75rem + 2px);
}

body.ena-theme .ena-filter-row .ts-wrapper.single .ts-control {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

/* —— Stats / filtros —— */
.ena-stat {
    border: 1px solid var(--ena-line);
    border-radius: 0.85rem;
    background: #fff;
    padding: 0.9rem 1rem;
    height: 100%;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ena-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(11, 79, 63, 0.1);
}

.ena-stat .label {
    color: var(--ena-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.ena-stat .value {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--ena-forest);
}

.ena-filters {
    border: 1px solid var(--ena-line);
    border-radius: 0.85rem;
    background: linear-gradient(180deg, #ffffff 0%, var(--ena-mint) 100%);
    padding: 1rem 1.1rem;
}

.ena-empty {
    text-align: center;
    color: var(--ena-muted);
    padding: 2rem 1rem;
}

.ena-empty i {
    display: block;
    font-size: 1.75rem;
    color: var(--ena-primary);
    opacity: 0.55;
    margin-bottom: 0.45rem;
}

/* —— Compatibilidad módulo Bonos (misma paleta) —— */
.ena-bonos {
    --bono-forest: var(--ena-forest);
    --bono-primary: var(--ena-primary);
    --bono-primary-soft: var(--ena-primary-soft);
    --bono-mint: var(--ena-mint);
    --bono-mint-deep: var(--ena-mint-deep);
    --bono-cream: var(--ena-cream);
    --bono-ink: var(--ena-ink);
    --bono-muted: var(--ena-muted);
    --bono-line: var(--ena-line);
    --bono-shadow: var(--ena-shadow);
    --bono-radius: var(--ena-radius);
}

body.ena-theme .app-main .ena-bonos .card.ena-bonos-hero,
.ena-bonos .ena-bonos-hero {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: var(--ena-radius);
    background:
        radial-gradient(circle at top right, rgba(168, 230, 207, 0.35), transparent 42%),
        linear-gradient(135deg, #0b4f3f 0%, #147a5f 55%, #1f8f6f 100%);
    color: #f4fbf8;
    box-shadow: var(--ena-shadow);
    margin-bottom: 1.25rem;
}

body.ena-theme .app-main .ena-bonos .ena-bonos-hero > .card-body,
.ena-bonos .ena-bonos-hero .card-body {
    background: transparent;
    color: inherit;
}

.ena-bonos .ena-bonos-card {
    border: 1px solid var(--ena-line);
    border-radius: var(--ena-radius);
    box-shadow: var(--ena-shadow);
    background: #fff;
    overflow: hidden;
}

.ena-bonos .ena-bonos-card > .card-header {
    background: linear-gradient(180deg, #f4faf7 0%, #eef7f2 100%);
    border-bottom: 1px solid var(--ena-line);
}

.ena-bonos .ena-bonos-card > .card-header h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ena-forest);
    margin: 0;
}

.ena-bonos .ena-bonos-card > .card-body {
    background: var(--ena-cream);
}

.ena-bonos .ena-bonos-filters {
    border: 1px solid var(--ena-line);
    border-radius: 0.85rem;
    background: linear-gradient(180deg, #ffffff 0%, var(--ena-mint) 100%);
    padding: 1rem 1.1rem;
}

.ena-bonos .fila-deducciones-bono td {
    background: var(--ena-mint) !important;
}

/* User menu header */
body.ena-theme .user-header.text-bg-primary {
    background: linear-gradient(135deg, #0b4f3f, #147a5f) !important;
}

/* Tabs (maestro, etc.) */
body.ena-theme .app-main .nav-tabs {
    border-bottom-color: var(--ena-line);
}

body.ena-theme .app-main .nav-tabs .nav-link {
    color: var(--ena-muted);
    font-weight: 600;
    border-radius: 0.55rem 0.55rem 0 0;
}

body.ena-theme .app-main .nav-tabs .nav-link:hover {
    color: var(--ena-forest);
    border-color: transparent;
}

body.ena-theme .app-main .nav-tabs .nav-link.active {
    color: var(--ena-forest);
    background: var(--ena-cream);
    border-color: var(--ena-line);
    border-bottom-color: var(--ena-cream);
}