/**
 * Contraste de iconos y controles en modo oscuro (portal admin).
 * Usa variables Metronic (--tw-gray-*, --tw-primary) que ya cambian con .dark.
 */

/* Barra lateral */
.dark #sidebar .menu-icon,
.dark #sidebar .menu-icon i {
    color: var(--tw-gray-700);
}

.dark #sidebar .menu-arrow,
.dark #sidebar .menu-arrow i {
    color: var(--tw-gray-700);
}

.dark #sidebar .menu-link:hover .menu-icon,
.dark #sidebar .menu-link:hover .menu-icon i {
    color: var(--tw-primary);
}

.dark #sidebar .menu-item.active .menu-icon,
.dark #sidebar .menu-item.active .menu-icon i {
    color: var(--tw-primary);
}

/* Colapsar sidebar */
.dark .portal-sidebar-toggle,
.dark #sidebar_toggle {
    background: #1f2430;
    color: #8ec5ff;
    border-color: rgba(142, 197, 255, 0.35);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}

.dark .portal-sidebar-toggle:hover,
.dark #sidebar_toggle:hover {
    color: #b8dcff;
    background: #273041;
    border-color: rgba(142, 197, 255, 0.5);
}

/* Header móvil y menú usuario */
.dark #header .btn-light.btn-clear i {
    color: var(--tw-gray-800);
}

.dark .topbar-user-icon {
    color: var(--tw-gray-800);
}

/* Botones solo icono en tablas (editar, etc.) */
.dark .btn.btn-icon.btn-light i {
    color: var(--tw-gray-800);
}

/* Cerrar modales y controles discretos */
.dark button.text-gray-400,
.dark a.text-gray-400 {
    color: var(--tw-gray-700);
}

.dark button.text-gray-400:hover,
.dark a.text-gray-400:hover {
    color: var(--tw-gray-900);
}

/* Paginación deshabilitada */
.dark .pagination span.text-gray-400,
.dark span.text-gray-400.bg-gray-100 {
    color: var(--tw-gray-700);
}

/* Carrusel / modales con flechas btn-light */
.dark #carruselModal .btn-light.btn-icon i {
    color: var(--tw-gray-800);
}

/* Menú desplegable del usuario */
.dark .menu-dropdown .menu-icon i {
    color: var(--tw-gray-700);
}

/* Login: mostrar/ocultar contraseña */
.dark [data-toggle-password] .btn-icon i {
    color: var(--tw-gray-700);
}

/* Iconos ki en perfiles y formularios sobre tarjetas */
.dark .card .ki-filled.text-gray-500,
.dark .card .ki-outline.text-gray-500 {
    color: var(--tw-gray-700);
}

/* ── Modales personalizados (fixed overlay) ── */
.dark .fixed.inset-0.z-50 .relative.bg-white,
.dark .fixed.inset-0.z-50 .relative.bg-light,
.dark .modal-bg .relative.bg-white,
.dark .modal-bg .relative.bg-light {
    background-color: var(--tw-coal-600) !important;
    border-color: var(--tw-gray-300) !important;
}

.dark .fixed.inset-0.z-50 .border-b,
.dark .fixed.inset-0.z-50 .border-t,
.dark .modal-bg .border-b,
.dark .modal-bg .border-t {
    border-color: var(--tw-gray-300) !important;
}

.dark .fixed.inset-0.z-50 h3.text-gray-900,
.dark .modal-bg h3.text-gray-900 {
    color: var(--tw-gray-900);
}

/* ── SweetAlert2: popup en modo oscuro ── */
.dark .swal2-container .swal2-popup {
    background-color: var(--tw-coal-600) !important;
    color: var(--tw-gray-900) !important;
    border: 1px solid var(--tw-gray-300) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45) !important;
}

.dark .swal2-container .swal2-title {
    color: var(--tw-gray-900) !important;
}

.dark .swal2-container .swal2-html-container {
    color: var(--tw-gray-800) !important;
}

.dark .swal2-container .swal2-close {
    color: var(--tw-gray-700) !important;
}

.dark .swal2-container .swal2-close:hover {
    color: var(--tw-gray-900) !important;
}

/* Contenido HTML embebido (pases de caja, beneficiarios, etc.) */
.swal2-popup .portal-swal-lead {
    font-size: 0.875rem;
    line-height: 1.625;
    margin-bottom: 0.75rem;
    text-align: left;
    color: #4b5563;
}

.dark .swal2-popup .portal-swal-lead {
    color: var(--tw-gray-700) !important;
}

.swal2-popup .portal-swal-dl {
    text-align: left;
    font-size: 0.875rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
}

.dark .swal2-popup .portal-swal-dl {
    border-color: var(--tw-gray-300) !important;
}

.swal2-popup .portal-swal-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
}

.swal2-popup .portal-swal-row + .portal-swal-row {
    border-top: 1px solid #f3f4f6;
}

.dark .swal2-popup .portal-swal-row + .portal-swal-row {
    border-top-color: var(--tw-gray-300) !important;
}

.swal2-popup .portal-swal-dt {
    color: #6b7280;
    flex-shrink: 0;
}

.dark .swal2-popup .portal-swal-dt {
    color: var(--tw-gray-600) !important;
}

.swal2-popup .portal-swal-dd {
    font-weight: 500;
    color: #111827;
    text-align: right;
}

.dark .swal2-popup .portal-swal-dd {
    color: var(--tw-gray-900) !important;
}

.swal2-popup .portal-swal-muted {
    font-size: 0.875rem;
    text-align: left;
    color: #6b7280;
}

.dark .swal2-popup .portal-swal-muted {
    color: var(--tw-gray-600) !important;
}

.swal2-popup .portal-swal-text {
    text-align: left;
    color: #111827;
}

.dark .swal2-popup .portal-swal-text {
    color: var(--tw-gray-900) !important;
}

.swal2-popup .portal-swal-strong {
    font-weight: 600;
    color: inherit;
}

.swal2-popup .portal-swal-label {
    display: block;
    width: 100%;
    text-align: left;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

.dark .swal2-popup .portal-swal-label {
    color: var(--tw-gray-800) !important;
}

.swal2-popup .portal-swal-field {
    margin-bottom: 0.75rem;
}

.swal2-popup .portal-swal-warn {
    font-size: 0.875rem;
    text-align: left;
    color: #d97706;
}

.dark .swal2-popup .portal-swal-warn {
    color: #fbbf24 !important;
}

.swal2-popup .portal-swal-hint {
    font-size: 0.75rem;
    text-align: left;
    color: #9ca3af;
}

.dark .swal2-popup .portal-swal-hint {
    color: var(--tw-gray-600) !important;
}

.swal2-popup .portal-swal-code {
    font-family: ui-monospace, monospace;
    font-size: 0.875em;
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    background-color: #f3f4f6;
    color: #111827;
}

.dark .swal2-popup .portal-swal-code {
    background-color: var(--tw-coal-500);
    color: var(--tw-gray-900) !important;
}

/* SweetAlert2: clases Tailwind legacy en HTML embebido */
.dark .swal2-popup .swal2-html-container .text-gray-400,
.dark .swal2-popup .swal2-html-container .text-gray-500 {
    color: var(--tw-gray-600) !important;
}

.dark .swal2-popup .swal2-html-container .text-gray-600 {
    color: var(--tw-gray-700) !important;
}

.dark .swal2-popup .swal2-html-container .text-gray-900,
.dark .swal2-popup .swal2-html-container strong {
    color: var(--tw-gray-900) !important;
}

.dark .swal2-popup .swal2-html-container dl.border-gray-200 {
    border-color: var(--tw-gray-300) !important;
}

.dark .swal2-popup .swal2-html-container .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--tw-gray-300) !important;
}

.dark .swal2-popup .swal2-html-container dt.text-gray-500 {
    color: var(--tw-gray-600) !important;
}

.dark .swal2-popup .swal2-html-container dd.text-gray-900 {
    color: var(--tw-gray-900) !important;
}

.dark .swal2-popup .swal2-html-container code {
    color: var(--tw-gray-900);
    background-color: var(--tw-coal-500);
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
}

.dark .swal2-popup .swal2-html-container .label-form {
    color: var(--tw-gray-800);
}

.dark .swal2-popup .swal2-title,
.dark .swal2-popup .swal2-html-container {
    color: var(--tw-gray-900);
}