/* ==========================================================================
   Arca Finance — capa visual del dashboard
   Se carga al final del <head> y esta TODA aislada bajo .wrapper,
   contenedor que solo existe en las vistas de dashboard.
   El login y el resto de paginas publicas no se ven afectados.
   ========================================================================== */

.wrapper {
    --af-bg:          #0E1525;
    --af-surface:     #161E31;
    --af-surface-2:   #1D2740;
    --af-surface-3:   #232F4D;
    --af-border:      #26314D;
    --af-border-soft: rgba(255, 255, 255, .06);

    --af-text:        #E8ECF5;
    --af-text-dim:    #A6B2C9;
    --af-text-faint:  #8C9AB5;

    --af-accent:      #2DE0A5;
    --af-accent-dim:  #1FB98A;
    --af-accent-soft: rgba(45, 224, 165, .12);

    --af-violet:      #8B7BFF;
    --af-amber:       #FFB547;
    --af-danger:      #FF6B6B;
    --af-info:        #4FA9FF;
    --af-success:     #4FD68F;

    --af-success-soft: rgba(79, 214, 143, .13);
    --af-amber-soft:   rgba(255, 181, 71, .13);
    --af-info-soft:    rgba(79, 169, 255, .13);
    --af-danger-soft:  rgba(255, 107, 107, .13);
    --af-neutral-soft: rgba(166, 178, 201, .13);

    --af-radius:      14px;
    --af-radius-sm:   10px;
    --af-shadow:      0 1px 2px rgba(0,0,0,.30), 0 8px 24px -12px rgba(0,0,0,.55);
    --af-shadow-lift: 0 2px 4px rgba(0,0,0,.30), 0 18px 40px -16px rgba(0,0,0,.65);
    --af-ease:        cubic-bezier(.4, 0, .2, 1);
}

/* Tema claro. Redefine las mismas variables, asi que todo el resto
   de la hoja lo sigue automaticamente sin duplicar una sola regla.
   Los acentos se oscurecen para mantener el contraste sobre blanco. */
html[data-af-theme="light"] .wrapper {
    --af-bg:          #F4F6FA;
    --af-surface:     #FFFFFF;
    --af-surface-2:   #F0F3F9;
    --af-surface-3:   #E4E9F2;
    --af-border:      #DCE3EC;
    --af-border-soft: rgba(15, 23, 42, .07);

    --af-text:        #16202E;
    --af-text-dim:    #4A5A72;
    --af-text-faint:  #556278;

    --af-accent:      #087355;
    --af-accent-dim:  #065C44;
    --af-accent-soft: rgba(8, 115, 85, .11);

    --af-violet:      #6152D9;
    --af-amber:       #805000;
    --af-danger:      #B32C2C;
    --af-info:        #125BB0;
    --af-success:     #0E7048;

    --af-success-soft: rgba(14, 112, 72, .11);
    --af-amber-soft:   rgba(128, 80, 0, .11);
    --af-info-soft:    rgba(18, 91, 176, .11);
    --af-danger-soft:  rgba(179, 44, 44, .11);
    --af-neutral-soft: rgba(74, 90, 114, .11);

    --af-shadow:      0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px -14px rgba(16, 24, 40, .22);
    --af-shadow-lift: 0 2px 6px rgba(16, 24, 40, .07), 0 18px 40px -18px rgba(16, 24, 40, .30);
}

/* --------------------------------------------------------------- base --- */

.wrapper {
    background: var(--af-bg);
    color: var(--af-text);
    min-height: 100vh;
}

.wrapper .main {
    background: var(--af-bg);
    color: var(--af-text);
}

.wrapper h1, .wrapper h2, .wrapper h3,
.wrapper h4, .wrapper h5, .wrapper h6 {
    color: var(--af-text);
    letter-spacing: -.015em;
    font-weight: 600;
}

.wrapper h4 { font-size: 1.55rem; }
.wrapper h6 { font-size: .95rem; letter-spacing: -.005em; }

.wrapper p { color: var(--af-text-dim); }

.wrapper .text-muted,
.wrapper .text-secondary { color: var(--af-text-faint) !important; }

.wrapper hr,
.wrapper .dropdown-divider { border-color: var(--af-border); opacity: 1; }

.wrapper a { text-decoration: none; }

.wrapper a:not(.btn):not(.sidebar-link):not(.dropdown-item):not(.page-link) {
    color: var(--af-accent);
    transition: color .18s var(--af-ease);
}
.wrapper a:not(.btn):not(.sidebar-link):not(.dropdown-item):not(.page-link):hover {
    color: #6BF0C4;
}

/* Utilidades claras de Bootstrap que romperian el contraste en oscuro.
   Las tipo tarjeta van a --af-surface para que los campos (--af-surface-2)
   se distingan encima; .bg-light se usa como panel embutido, va un paso mas. */
.wrapper .bg-body-tertiary,
.wrapper .bg-white {
    background-color: var(--af-surface) !important;
    color: var(--af-text);
}

.wrapper .bg-light {
    background-color: var(--af-surface-2) !important;
    color: var(--af-text);
}

/* -------------------------------------------------------------- cards --- */

.wrapper .card {
    background: var(--af-surface);
    border: 1px solid var(--af-border);
    border-radius: var(--af-radius);
    box-shadow: var(--af-shadow);
    color: var(--af-text);
    transition: transform .22s var(--af-ease),
                box-shadow .22s var(--af-ease),
                border-color .22s var(--af-ease);
}

.wrapper .card.rounded-4 { border-radius: var(--af-radius); }

.wrapper .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--af-shadow-lift);
    border-color: var(--af-surface-3);
}

.wrapper .card-body { padding: 1.4rem 1.5rem; }

.wrapper .card-header,
.wrapper .card-footer {
    background: transparent;
    border-color: var(--af-border);
    color: var(--af-text);
}

/* Tarjetas de metrica de la fila superior: barra de acento al ras */
.wrapper .row-cols-xl-4 > .col > .card {
    position: relative;
    overflow: hidden;
}

.wrapper .row-cols-xl-4 > .col > .card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--af-accent);
    opacity: 0;
    transition: opacity .22s var(--af-ease);
}

.wrapper .row-cols-xl-4 > .col > .card:hover::before { opacity: 1; }

.wrapper .row-cols-xl-4 .card-body p {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--af-text-faint);
    margin-bottom: .35rem !important;
}

.wrapper .row-cols-xl-4 .card-body h4 {
    font-size: 1.85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.03em;
}

/* --------------------------------------------------- iconos de widget --- */

.wrapper .widget-icon,
.wrapper .widgets-icons-2 {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--af-radius-sm);
    flex: 0 0 auto;
    transition: transform .22s var(--af-ease);
}

.wrapper .card:hover .widget-icon,
.wrapper .card:hover .widgets-icons-2 { transform: scale(1.06); }

/* Relleno solido -> tinte suave con icono a color. Menos ruido, mas actual. */
.wrapper .widget-icon.bg-primary,
.wrapper .widgets-icons-2.bg-primary {
    background: var(--af-accent-soft) !important;
    color: var(--af-accent) !important;
}
.wrapper .widget-icon.bg-success,
.wrapper .widgets-icons-2.bg-success {
    background: var(--af-success-soft) !important;
    color: var(--af-success) !important;
}
.wrapper .widget-icon.bg-orange,
.wrapper .widgets-icons-2.bg-orange {
    background: var(--af-amber-soft) !important;
    color: var(--af-amber) !important;
}
.wrapper .widget-icon.bg-info,
.wrapper .widgets-icons-2.bg-info {
    background: var(--af-info-soft) !important;
    color: var(--af-info) !important;
}
.wrapper .widget-icon.bg-danger,
.wrapper .widgets-icons-2.bg-danger {
    background: var(--af-danger-soft) !important;
    color: var(--af-danger) !important;
}
.wrapper .widget-icon.bg-secondary,
.wrapper .widgets-icons-2.bg-secondary {
    background: var(--af-neutral-soft) !important;
    color: var(--af-text-dim) !important;
}

/* ------------------------------------------------------------- tablas --- */

.wrapper .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--af-text);
    color: var(--af-text);
    border-color: var(--af-border);
    margin-bottom: 0;
}

.wrapper .table > thead > tr > th {
    background: transparent;
    color: var(--af-text-faint);
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    border-bottom: 1px solid var(--af-border);
    padding: .85rem .9rem;
    white-space: nowrap;
}

.wrapper .table > tbody > tr > td,
.wrapper .table > tbody > tr > th {
    background: transparent;
    color: var(--af-text);
    border-bottom: 1px solid var(--af-border-soft);
    padding: .85rem .9rem;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

.wrapper .table > tbody > tr > th { font-weight: 600; }

.wrapper .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: transparent;
    background-color: rgba(255, 255, 255, .018);
    color: var(--af-text);
}

.wrapper .table > tbody > tr {
    transition: background-color .16s var(--af-ease);
}

.wrapper .table > tbody > tr:hover > * {
    background-color: var(--af-surface-2) !important;
    color: var(--af-text);
}

.wrapper .table > tbody > tr:last-child > td,
.wrapper .table > tbody > tr:last-child > th { border-bottom: 0; }

/* ------------------------------------------------------------ botones --- */

.wrapper .btn {
    border-radius: var(--af-radius-sm);
    font-weight: 500;
    letter-spacing: .01em;
    padding: .55rem 1.1rem;
    transition: transform .16s var(--af-ease),
                box-shadow .16s var(--af-ease),
                background-color .16s var(--af-ease),
                border-color .16s var(--af-ease),
                color .16s var(--af-ease);
}

.wrapper .btn:active { transform: translateY(1px); }

.wrapper .btn-primary {
    background: var(--af-accent);
    border-color: var(--af-accent);
    color: #06231A;
}
.wrapper .btn-primary:hover,
.wrapper .btn-primary:focus {
    background: #52E9B8;
    border-color: #52E9B8;
    color: #06231A;
    box-shadow: 0 6px 20px -8px rgba(45, 224, 165, .8);
}

/* En claro el acento es verde profundo: el texto encima pasa a blanco. */
html[data-af-theme="light"] .wrapper .btn-primary {
    color: #FFFFFF;
}
html[data-af-theme="light"] .wrapper .btn-primary:hover,
html[data-af-theme="light"] .wrapper .btn-primary:focus {
    background: var(--af-accent-dim);
    border-color: var(--af-accent-dim);
    color: #FFFFFF;
    box-shadow: 0 6px 20px -8px rgba(8, 115, 85, .55);
}
html[data-af-theme="light"] .wrapper .btn-success,
html[data-af-theme="light"] .wrapper .btn-danger,
html[data-af-theme="light"] .wrapper .btn-warning {
    color: #FFFFFF;
}
html[data-af-theme="light"] .wrapper .btn-success { background: var(--af-success); border-color: var(--af-success); }
html[data-af-theme="light"] .wrapper .btn-danger  { background: var(--af-danger);  border-color: var(--af-danger); }
html[data-af-theme="light"] .wrapper .btn-warning { background: var(--af-amber);   border-color: var(--af-amber); }

.wrapper .btn-outline-primary {
    color: var(--af-accent);
    border-color: rgba(45, 224, 165, .4);
    background: transparent;
}

html[data-af-theme="light"] .wrapper .btn-outline-primary {
    border-color: rgba(8, 115, 85, .45);
}
.wrapper .btn-outline-primary:hover,
.wrapper .btn-outline-primary:focus {
    background: var(--af-accent-soft);
    border-color: var(--af-accent);
    color: var(--af-accent);
}

.wrapper .btn-secondary,
.wrapper .btn-light {
    background: var(--af-surface-2);
    border-color: var(--af-border);
    color: var(--af-text);
}
.wrapper .btn-secondary:hover,
.wrapper .btn-light:hover {
    background: var(--af-surface-3);
    border-color: var(--af-surface-3);
    color: var(--af-text);
}

.wrapper .btn-success { background: #34C98A; border-color: #34C98A; color: #052318; }
.wrapper .btn-danger  { background: #F2585B; border-color: #F2585B; color: #2A0708; }
.wrapper .btn-warning { background: var(--af-amber); border-color: var(--af-amber); color: #2A1B04; }

.wrapper .btn:focus-visible {
    outline: 2px solid var(--af-accent);
    outline-offset: 2px;
    box-shadow: none;
}

/* ------------------------------------------------------------ badges ---- */

.wrapper .badge {
    font-weight: 500;
    letter-spacing: .02em;
    padding: .4em .75em;
    border-radius: 999px;
}

.wrapper .badge.bg-primary   { background: var(--af-accent-soft) !important;  color: var(--af-accent) !important; }
.wrapper .badge.bg-success   { background: var(--af-success-soft) !important; color: var(--af-success) !important; }
.wrapper .badge.bg-warning   { background: var(--af-amber-soft) !important;   color: var(--af-amber) !important; }
.wrapper .badge.bg-danger    { background: var(--af-danger-soft) !important;  color: var(--af-danger) !important; }
.wrapper .badge.bg-info      { background: var(--af-info-soft) !important;    color: var(--af-info) !important; }
.wrapper .badge.bg-secondary { background: var(--af-neutral-soft) !important; color: var(--af-text-dim) !important; }

/* -------------------------------------------------------- list groups --- */

.wrapper .list-group-item {
    background: transparent;
    border-color: var(--af-border-soft);
    color: var(--af-text);
    padding: .8rem 1.5rem;
    transition: background-color .16s var(--af-ease);
}

.wrapper .list-group-item:hover { background: var(--af-surface-2); }

.wrapper .list-group-item .float-end {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ---------------------------------------------------------- dropdowns --- */

.wrapper .dropdown-menu {
    background: var(--af-surface-2);
    border: 1px solid var(--af-border);
    border-radius: var(--af-radius-sm);
    box-shadow: var(--af-shadow-lift);
    padding: .35rem;
}

.wrapper .dropdown-item {
    color: var(--af-text-dim);
    border-radius: 8px;
    padding: .5rem .75rem;
    transition: background-color .14s var(--af-ease), color .14s var(--af-ease);
}

.wrapper .dropdown-item:hover,
.wrapper .dropdown-item:focus {
    background: var(--af-surface-3);
    color: var(--af-text);
}

.wrapper .dropdown-toggle-nocaret {
    color: var(--af-text-faint);
    border-radius: 8px;
    transition: color .16s var(--af-ease), background-color .16s var(--af-ease);
}
.wrapper .dropdown-toggle-nocaret:hover {
    color: var(--af-text);
    background: var(--af-surface-2);
}

/* ----------------------------------------------------------- formularios */

.wrapper .form-control,
.wrapper .form-select {
    background: var(--af-surface-2);
    border: 1px solid var(--af-border);
    border-radius: var(--af-radius-sm);
    color: var(--af-text);
    padding: .6rem .85rem;
    transition: border-color .16s var(--af-ease), box-shadow .16s var(--af-ease);
}

.wrapper .form-control::placeholder { color: var(--af-text-faint); }

/* ---------------------------------------------- etiquetas flotantes --- */

/* En .form-floating la etiqueta HACE de placeholder, por eso Bootstrap
   deja el placeholder real transparente. La regla generica de arriba lo
   volvia visible y el texto se veia duplicado y desplazado. */
.wrapper .form-floating > .form-control::placeholder,
.wrapper .form-floating > .form-control-plaintext::placeholder {
    color: transparent;
}

.wrapper .form-floating > label {
    color: var(--af-text-faint);
    font-weight: 400;
}

.wrapper .form-floating > .form-control:focus ~ label,
.wrapper .form-floating > .form-select:focus ~ label {
    color: var(--af-accent);
}

/* El recuadro que Bootstrap dibuja detras de la etiqueta encogida usa
   --bs-body-bg (blanco): sobre fondo oscuro salia como pastilla blanca. */
.wrapper .form-floating > .form-control:focus ~ label::after,
.wrapper .form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.wrapper .form-floating > .form-control-plaintext ~ label::after,
.wrapper .form-floating > .form-select ~ label::after {
    background-color: var(--af-surface-2);
    border-radius: 6px;
}

.wrapper .form-floating > .form-control:disabled ~ label::after,
.wrapper .form-floating > :disabled ~ label::after {
    background-color: var(--af-surface-3);
}

/* ------------------------------------------- boton de envio del form --- */

/* app.css lo deja en blanco fijo con hover verde marca. */
.wrapper .submit-btn-area button {
    background: var(--af-accent);
    color: #06231A;
    box-shadow: none;
    transition: background-color .18s var(--af-ease),
                color .18s var(--af-ease),
                box-shadow .18s var(--af-ease),
                transform .16s var(--af-ease);
}

.wrapper .submit-btn-area button:hover:not(:disabled) {
    background: #52E9B8;
    color: #06231A;
    box-shadow: 0 6px 20px -8px rgba(45, 224, 165, .75);
    transform: translateY(-1px);
}

.wrapper .submit-btn-area button:disabled {
    background: var(--af-surface-3);
    color: var(--af-text-faint);
    cursor: not-allowed;
}

html[data-af-theme="light"] .wrapper .submit-btn-area button { color: #FFFFFF; }
html[data-af-theme="light"] .wrapper .submit-btn-area button:hover:not(:disabled) {
    background: var(--af-accent-dim);
    color: #FFFFFF;
    box-shadow: 0 6px 20px -8px rgba(8, 115, 85, .55);
}

.wrapper .form-control:focus,
.wrapper .form-select:focus {
    background: var(--af-surface-2);
    border-color: var(--af-accent);
    color: var(--af-text);
    box-shadow: 0 0 0 3px var(--af-accent-soft);
}

.wrapper .form-label { color: var(--af-text-dim); font-size: .88rem; margin-bottom: .4rem; }

.wrapper .form-check-input {
    background-color: var(--af-surface-3);
    border-color: var(--af-border);
}
.wrapper .form-check-input:checked {
    background-color: var(--af-accent);
    border-color: var(--af-accent);
}
.wrapper .form-check-input:focus {
    border-color: var(--af-accent);
    box-shadow: 0 0 0 3px var(--af-accent-soft);
}

/* ------------------------------------------------------------- modales --- */

.wrapper .modal-content {
    background: var(--af-surface);
    border: 1px solid var(--af-border);
    border-radius: 16px;
    color: var(--af-text);
}

.wrapper .modal-header,
.wrapper .modal-footer { border-color: var(--af-border); }

/* ---------------------------------------------------------- breadcrumb --- */

.wrapper .breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 1rem;
    font-size: .88rem;
}

.wrapper .breadcrumb-item,
.wrapper .breadcrumb-item.active { color: var(--af-text-faint); }

.wrapper .breadcrumb-item + .breadcrumb-item::before { color: var(--af-text-faint); }

/* ------------------------------------------------------------- sidebar --- */

.wrapper #sidebar {
    background: #0B111F;
    border-right: 1px solid var(--af-border);
}

.wrapper .sidebar-logo a {
    color: var(--af-text);
    font-weight: 600;
    letter-spacing: -.01em;
}

.wrapper .sidebar-link {
    /* UPDATE - Luis Rengel: el sidebar es oscuro siempre -> letras e iconos SIEMPRE en blanco */
    color: #FFFFFF !important;
    border-radius: var(--af-radius-sm);
    margin: 2px .5rem;
    position: relative;
    transition: background-color .18s var(--af-ease),
                color .18s var(--af-ease),
                padding-left .18s var(--af-ease);
}
.wrapper .sidebar-link i,
.wrapper .sidebar-dropdown .sidebar-link,
.wrapper .sidebar-dropdown .sidebar-link i {
    color: #FFFFFF !important;
}

.wrapper .sidebar-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    height: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--af-accent);
    transform: translateY(-50%);
    transition: height .2s var(--af-ease);
}

.wrapper .sidebar-link:hover {
    background: var(--af-surface-2);
    color: #FFFFFF;
}

.wrapper .sidebar-link:hover::before,
.wrapper .sidebar-item.active > .sidebar-link::before { height: 60%; }

.wrapper .sidebar-item.active > .sidebar-link {
    background: var(--af-accent-soft);
    color: var(--af-accent);
}

.wrapper .sidebar-link .prefix {
    transition: transform .18s var(--af-ease);
}
.wrapper .sidebar-link:hover .prefix { transform: translateX(2px); }

.wrapper .toggle-btn {
    color: var(--af-text-dim);
    background: transparent;
    border: 0;
    border-radius: 8px;
    transition: color .16s var(--af-ease), background-color .16s var(--af-ease);
}
.wrapper .toggle-btn:hover { color: var(--af-text); background: var(--af-surface-2); }

/* ------------------------------------------------------------ scrollbar --- */

.wrapper *::-webkit-scrollbar { width: 10px; height: 10px; }
.wrapper *::-webkit-scrollbar-track { background: transparent; }
.wrapper *::-webkit-scrollbar-thumb {
    background: var(--af-surface-3);
    border-radius: 999px;
    border: 2px solid var(--af-bg);
}
.wrapper *::-webkit-scrollbar-thumb:hover { background: #2E3D63; }

/* ---------------------------------------------------------- DataTables --- */

.wrapper .dataTables_wrapper .dataTables_length,
.wrapper .dataTables_wrapper .dataTables_filter,
.wrapper .dataTables_wrapper .dataTables_info,
.wrapper .dataTables_wrapper .dataTables_paginate { color: var(--af-text-dim); }

.wrapper .dataTables_wrapper input,
.wrapper .dataTables_wrapper select {
    background: var(--af-surface-2);
    border: 1px solid var(--af-border);
    border-radius: 8px;
    color: var(--af-text);
    padding: .35rem .6rem;
}

/* El color base tiene que ir declarado: DataTables trae un #333 por defecto
   que sobre fondo oscuro deja los botones practicamente invisibles. */
.wrapper .dataTables_wrapper .dataTables_paginate .paginate_button,
.wrapper .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.wrapper .dataTables_wrapper .dataTables_paginate a,
.wrapper .dataTables_wrapper .dataTables_paginate span {
    color: var(--af-text) !important;
    border: 0;
    border-radius: 8px;
    background: transparent;
    transition: background-color .16s var(--af-ease), color .16s var(--af-ease);
}

.wrapper .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.wrapper .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--af-text-faint) !important;
    background: transparent !important;
    cursor: default;
}
.wrapper .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--af-surface-2) !important;
    color: var(--af-text) !important;
}
.wrapper .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--af-accent-soft) !important;
    color: var(--af-accent) !important;
}

/* ---------------------------------------------------- barra superior --- */

.wrapper .main > .nav.justify-content-end {
    background: var(--af-surface);
    border-bottom: 1px solid var(--af-border);
    border-radius: 0;
    box-shadow: none !important;
    align-items: center;
    gap: .25rem;
}

.wrapper .main > .nav .nav-link {
    color: var(--af-text-dim);
    border-radius: var(--af-radius-sm);
    padding: .5rem .85rem;
    transition: background-color .16s var(--af-ease), color .16s var(--af-ease);
}
.wrapper .main > .nav .nav-link:hover { background: var(--af-surface-2); color: var(--af-text); }

/* ---------------------------------------------- boton de cambio de tema --- */

.af-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 38px;
    height: 38px;
    border: 1px solid var(--af-border);
    border-radius: var(--af-radius-sm);
    background: var(--af-surface-2);
    /* UPDATE - Luis Rengel: icono en color de texto (negro en claro, claro en oscuro), no verde. */
    color: var(--af-text);
    cursor: pointer;
    font-size: 15px;
    transition: background-color .18s var(--af-ease),
                color .18s var(--af-ease),
                border-color .18s var(--af-ease),
                transform .18s var(--af-ease);
}

.af-theme-toggle:hover {
    background: var(--af-accent-soft);
    border-color: var(--af-border);
    color: var(--af-text);
    transform: translateY(-1px);
}

.af-theme-toggle:active { transform: translateY(0); }

/* UPDATE - Luis Rengel: icono y nombre de usuario del header en color de TEXTO
   (negro en modo claro, blanco en modo oscuro), nunca verde. */
.nav .nav-item.dropdown > .nav-link,
.nav .nav-item.dropdown > .nav-link:hover,
.nav .nav-item.dropdown > .nav-link:focus,
.nav .nav-item.dropdown > .nav-link i {
    color: var(--af-text) !important;
}

.af-theme-toggle:focus-visible {
    outline: 2px solid var(--af-accent);
    outline-offset: 2px;
}

/* Se muestra el icono que representa el tema al que se va a cambiar */
.af-theme-toggle .af-icon-sun  { display: none; }
.af-theme-toggle .af-icon-moon { display: inline; }
html[data-af-theme="light"] .af-theme-toggle .af-icon-sun  { display: inline; }
html[data-af-theme="light"] .af-theme-toggle .af-icon-moon { display: none; }

/* ------------------------------------------------------------- footer --- */

.wrapper .footer,
.wrapper .footerCustomDashboard {
    background: var(--af-surface) !important;
    border-top: 1px solid var(--af-border);
    color: var(--af-text-dim);
}

.wrapper .footer .text-body-secondary,
.wrapper .text-body-secondary {
    color: var(--af-text-faint) !important;
}

.wrapper .footer a { color: var(--af-text-dim); }

/* --------------------------------------------------------- accesibilidad --- */

.wrapper :focus-visible {
    outline: 2px solid var(--af-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .wrapper *,
    .wrapper *::before,
    .wrapper *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
    .wrapper .card:hover { transform: none; }
}