/* 
   ui.css
   Componentes de Interfaz y Layout de la App
*/

:root {
    --color-bg-rgb: 255, 255, 255;
    --color-bg-soft: #f8f9fa;
    --color-text: #1d1d1f;
    --color-text-secondary: #86868b;
    --color-border: rgba(0, 0, 0, 0.08);
}

/** NAVBAR (Top App Bar) **/
.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem;
    background-color: rgba(var(--color-bg-rgb), 0.82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: none;
}

.brand {
    font-size: 1.75rem;
    /* Increased (+8px approx) */
    font-weight: 700;
    letter-spacing: -0.03em;
}

/** BOTONES **/
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: var(--radius-pill);
    transition: all var(--transition-fast);
    border: none;
    background: transparent;
}

.btn:active {
    transform: scale(0.96);
}

#profileBtn,
#logoutBtn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

#profileBtn {
    color: #34c759;
}

.btn-primary {
    background-color: var(--color-text);
    color: var(--color-bg);
}

.btn-secondary {
    background-color: var(--color-bg-secondary);
    color: var(--color-text);
}

.btn-icon {
    padding: 0.8rem;
    border-radius: 50%;
}

/** TARJETAS **/
.card {
    background-color: var(--color-bg);
    border-radius: var(--radius-md);
    padding: 1.2rem;
    box-shadow: var(--shadow-ambient);
    border: 1px solid var(--color-border);
    transition: all var(--transition-normal);
}

/** FAB **/
.fab-container {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%) translate3d(0,0,0); /* iOS Fixed Fix */
    z-index: 10000; /* Ensure it stays above everything */
    display: flex;
    gap: 8px;
    align-items: center;
    background: rgba(250, 248, 254, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 10px 14px;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-ambient);
    border: 1px solid var(--color-border);
    max-width: 96vw;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}

.fab-container::-webkit-scrollbar {
    display: none;
}

.fab {
    min-width: 50px;
    width: auto;
    padding: 0 16px;
    height: 46px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
    flex-shrink: 0;
    scroll-snap-align: center;
    box-shadow: 0 4px 12px rgba(0, 89, 181, 0.2);
}

.fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 89, 181, 0.3);
}

.fab svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

/** GRILLA DE CAJONES (Carpetas Inteligentes) **/
.drawer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    margin-top: 1rem;
    margin-bottom: 1.2rem;
}

.drawer-card {
    background-color: var(--color-bg);
    border-radius: var(--radius-md);
    padding: 1.2rem 0.8rem;
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
    text-align: center;
    box-shadow: var(--shadow-ambient);
}

.drawer-card:active {
    transform: scale(0.95);
    background-color: var(--color-bg-secondary);
}

.drawer-card .icon-container {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
}

.drawer-card .icon-container svg {
    width: 20px;
    height: 20px;
}

.drawer-card h4 {
    font-size: 0.85rem;
    font-weight: 200;
    margin: 0;
    line-height: 1.1;
}

.drawer-card span {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
}

.drawer-total {
    font-weight: 200 !important;
    color: var(--color-text) !important;
    font-size: 0.75rem !important;
    margin-top: 2px;
}

.drawer-stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

/* Colores por tipo de cajon */
.drawer-card[data-type="TICKET"] .icon-container {
    color: #34c759;
}

.drawer-card[data-type="FACTURA"] .icon-container {
    color: #007aff;
}

.drawer-card[data-type="CONTRATO"] .icon-container {
    color: #af52de;
}

.drawer-card[data-type="NOMINA"] .icon-container {
    color: #ff9500;
}

.drawer-card[data-type="IDENTIFICACION"] .icon-container {
    color: #ff3b30;
}

/* Estados de Arrastre */
.drawer-card.drag-over {
    border: 2px dashed var(--color-accent);
    background-color: rgba(0, 113, 227, 0.05);
    transform: scale(1.02);
}

.drawer-card.active {
    border: 2px solid var(--color-accent);
    background-color: rgba(0, 113, 227, 0.05);
}

.document-item.touch-active {
    background-color: var(--color-bg-secondary);
}

.document-item.dragging {
    opacity: 0.2;
}

.document-item {
    cursor: grab;
    transition: all var(--transition-fast);
}

.document-item:active {
    cursor: grabbing;
}

/* Acciones de Fila */
.btn-delete {
    color: #ff3b30;
    padding: 0.4rem;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s;
}

.document-item:hover .btn-delete {
    opacity: 1;
}

@media (max-width: 768px) {
    .btn-delete {
        opacity: 1;
    }
}

.document-item.removing {
    transform: translateX(100%);
    opacity: 0;
}

/** SECCIONES **/
.container {
    padding-bottom: 8rem;
}

/** UTILIDADES **/
.mt-1 {
    margin-top: 0.5rem;
}

.mt-2 {
    margin-top: 1rem;
}

.mb-1 {
    margin-bottom: 0.5rem;
}

.flex {
    display: flex;
}

.justify-between {
    justify-content: space-between;
}

.align-center {
    align-items: center;
}

.gap-1 {
    gap: 0.5rem;
}

/* ─── ENERGY INDICATOR CARD ─── */

.energy-card {
    background: transparent;
    padding: 0.5rem 0;
    border: none;
}

.energy-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.energy-icon {
    width: 24px;
    height: 24px;
    background: transparent;
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.energy-info {
    flex: 1;
}

.energy-label {
    font-weight: 200;
    font-size: 0.75rem;
    color: var(--color-text);
}

.energy-detail {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    margin-top: 1px;
}

.energy-pct {
    font-size: 0.75rem;
    font-weight: 200;
    color: var(--color-text);
    letter-spacing: -0.01em;
}

.energy-bar-bg {
    height: 2px;
    background: var(--color-bg-secondary);
    overflow: hidden;
}

.energy-bar-fill {
    height: 100%;
    background: #ccc;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── CHART TRIGGER BUTTON ─── */

.chart-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 0;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    font-weight: 200;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
    border: none;
}

.chart-trigger:hover {
    background: rgba(0, 122, 255, 0.08);
    color: #007aff;
    border-color: rgba(0, 122, 255, 0.15);
}

.chart-trigger:active {
    transform: scale(0.97);
}

.chart-trigger svg {
    color: #007aff;
    flex-shrink: 0;
}

/* ─── MODAL VISOR DE DOCUMENTOS (Apple-style) ─── */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001; /* Superior a otros modales que tengan 9999 o menos */
    background: rgba(0, 0, 0, 0.0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    display: flex;
    align-items: flex-start; /* Centrado fluido de arriba a abajo */
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto; /* Scroll vertical nativo a nivel overlay */
    -webkit-overflow-scrolling: touch; /* Scroll suave iOS */
    padding: 20px 10px; /* Separación vertical en móviles */
    box-sizing: border-box;
}

.modal-overlay.open {
    opacity: 1 !important;
    visibility: visible !important;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Forzar estado visible del contenido cuando el padre está abierto */
.modal-overlay.open .modal-content {
    transform: scale(1) translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
}

#docViewer {
    z-index: 20000;
}

#docViewer .modal-content {
    width: 92vw;
    max-width: 1200px;
    height: 92vh;
    padding: 20px;
    margin: auto;
    justify-content: flex-start;
    align-items: stretch;
    overflow-y: hidden; /* Internos como pdfContainer manejarán el scroll */
}

@media (max-width: 768px) {
    #docViewer .modal-content {
        width: 100vw !important;
        height: 100% !important; /* Usar 100% para evitar saltos de Safari */
        max-height: 100vh !important;
        border-radius: 0;
        padding: 10px;
        padding-top: calc(60px + env(safe-area-inset-top)); /* Más espacio para evitar notch/status bar */
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }
}

.modal-content {
    position: relative;
    width: 50vw;
    margin: auto; /* Centrado vertical/horizontal dentro del overlay flexible */
    border-radius: var(--radius-md);
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transform: scale(0.85) translateY(30px);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 24px;
    padding-bottom: 24px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .modal-content {
        width: 92vw; /* Unificado */
        padding: 20px;
        border-radius: var(--radius-md);
        padding-top: calc(20px + env(safe-area-inset-top));
        padding-bottom: calc(30px + env(safe-area-inset-bottom));
    }
}

/* ─── FORMULARIOS PREMIUM ─── */

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
    font-weight: 200;
}

.form-control {
    width: 100%;
    max-width: 100%;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.75rem;
    box-sizing: border-box;
    /* Crucial para evitar desbordamientos */
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus {
    outline: none;
    border-color: #007aff;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
}

.form-title {
    margin: 20px 0 12px;
    font-size: 0.75rem;
    color: var(--color-text);
    font-weight: 600;
}


@media (prefers-color-scheme: dark) {
    .modal-content {
        background: rgba(30, 30, 30, 0.95);
    }
}

.modal-overlay.open .modal-content {
    transform: scale(1) translateY(0);
}

.modal-content .btn-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10002; /* Siempre por encima de todo el contenido del modal */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    color: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 768px) {
    .modal-content .btn-close {
        top: calc(20px + env(safe-area-inset-top)); /* Bajado un poco más */
    }
}

.modal-content .btn-close:hover {
    background: rgba(0, 0, 0, 0.7);
}

#viewerImg {
    max-width: 100%;
    max-height: 80vh;
    border-radius: var(--radius-md);
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Indicador: sin imagen */
.no-image-msg {
    padding: 3rem 2rem;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
}

/* Fila de documento clicable */
.document-item {
    cursor: pointer;
    transition: all var(--transition-fast);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
}

.document-item:hover {
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-md);
}

.document-item.dragging {
    opacity: 0.2;
}

/* ─── DUAL COLUMN LAYOUT ─── */
.dual-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .dual-columns {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.column {
    display: flex;
    flex-direction: column;
    min-height: 100px;
}

.column-title {
    font-size: 0.75rem;
    font-weight: 200;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 8px;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--color-border);
}

.income-header {
    color: #8e8e93;
    border-color: var(--color-border);
}

.expense-header {
    color: #8e8e93;
    border-color: var(--color-border);
}

.document-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.loading-state {
    padding: 1rem;
    text-align: center;
    color: #8e8e93;
    font-size: 0.75rem;
}

/* Hover adjustments for items in columns */
.column .document-item {
    padding: 10px 8px;
    border-radius: var(--radius-md);
    margin: 0 -8px;
}

.column .document-item:hover {
    background-color: var(--color-bg-secondary);
}

/* ─── FORECAST CHART MOBILE FIX ─── */
.chart-container-forecast {
    position: relative;
    width: 100%;
}

@media (min-width: 768px) {
    .chart-container-forecast {
        height: 320px;
    }
}

@media (max-width: 767px) {
    .chart-container-forecast {
        height: 250px;
        padding: 0 !important;
    }
}

/* ─── USER DROPDOWN MENU ─── */
.user-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    width: 200px;
    background: rgba(var(--color-bg-rgb), 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin-top: 10px;
    padding: 8px;
    display: none;
    flex-direction: column;
    z-index: 1000;
    border: 1px solid var(--color-border);
    transform-origin: top right;
    animation: menuFadeIn 0.2s ease-out;
}

.user-dropdown-menu.open {
    display: flex;
}

@keyframes menuFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.menu-item {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 200;
    cursor: pointer;
    transition: background 0.2s;
    color: #8e8e93;
}

.menu-item:hover {
    background: var(--color-bg-secondary);
}

.menu-divider {
    height: 1px;
    background: #8e8e93;
    margin: 6px 0;
}

@media (prefers-color-scheme: dark) {
    .user-dropdown-menu {
        background: rgba(30, 30, 30, 0.95);
    }
}

/* ─── ONBOARDING SECTORIAL ─── */
.industry-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.industry-card {
    background: var(--color-bg-secondary);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.industry-card:hover {
    border-color: #007aff;
    background: rgba(0, 122, 255, 0.05);
    transform: translateY(-4px);
}

.industry-card.selected {
    border-color: #007aff;
    background: rgba(0, 122, 255, 0.1);
    box-shadow: 0 0 0 1px #007aff;
}

.industry-icon {
    font-size: 28px;
    margin-bottom: 5px;
}

.industry-name {
    font-size: 0.75rem;
    font-weight: 200;
    color: #8e8e93;
}

@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr !important;
    }
    
    .project-filter-row {
        padding: 5px 10px;
    }
    
    .btn-manage-projects, .btn-add-project {
        width: 36px;
        height: 36px;
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .industry-grid {
        grid-template-columns: 1fr;
    }
    
    .project-capsules-container {
        padding: 5px 0;
    }
    
    .capsule {
        padding: 6px 14px;
        font-size: 0.75rem;
    }
    /* Esto afectará al contenedor de los iconos en el header */
    header.navbar > div:last-child {
        gap: 15px !important; /* Cambia 10px por 5px o menos para agruparlos más */
        /* font-size: 5px; */
    }
}

/* ─── CÁPSULAS DE PROYECTO ─── */
.project-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 5px 15px;
}

.project-capsules-container {
    display: flex;
    flex: 1;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    scrollbar-width: none; /* Firefox */
}

.project-capsules-container::-webkit-scrollbar {
    display: none;
}

.capsule-wrapper {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.capsule-delete {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    background: #ff3b30;
    color: white;
    border-radius: 50%;
    border: 2px solid var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}

.capsule-wrapper:hover .capsule-delete {
    opacity: 1;
    transform: scale(1);
}

.capsule {
    display: inline-block;
    padding: 8px 18px;
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    font-size: 0.75rem;
    font-weight: 200;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.capsule.active {
    background: #8e8e93;
    color: white;
    border-color: #8e8e93;
}

.pulse {
    animation: pulse-animation 1s ease-out;
}

@keyframes pulse-animation {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.project-tag {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(0, 122, 255, 0.1);
    color: #007aff;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 200;
    margin-top: 4px;
}

.btn-add-project {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    color: #8e8e93;
    font-size: 20px;
    cursor: pointer;
    margin-left: 8px;
}

.btn-add-project:active {
    transform: scale(0.9);
    background-color: var(--color-bg-secondary);
}
/* --- MEJORAS DE UX: GESTOR DE PROYECTOS --- */
.btn-manage-projects {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    color: #8e8e93;
    cursor: pointer;
    margin-left: 8px;
    transition: all 0.2s;
    vertical-align: middle;
}

.btn-manage-projects:hover {
    color: #8e8e93;
    background-color: var(--color-bg);
    border-color: var(--color-text);
    transform: rotate(45deg);
}

.btn-manage-projects:active {
    transform: scale(0.9) rotate(45deg);
}

.capsule-delete {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    background: #ff3b30;
    color: white;
    border-radius: 50%;
    border: 2px solid var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 200;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    opacity: 0;
    transform: scale(0.7);
    transition: all 0.2s ease;
    z-index: 10;
}

.capsule-wrapper:hover .capsule-delete {
    opacity: 1;
    transform: scale(1);
}

/* Unificar altura de iconos en la cabecera */
.navbar .ceo-direct-line, 
.navbar .btn-icon {
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important; /* Quitamos el padding para que no crezcan de más */
    display: flex !important;
    align-items: center;
    justify-content: center;
}



/* ─── MODO OSCURO: campos de formulario SIEMPRE legibles ──────────────────
   Corrige el bug reportado en el modal CAI con prefers-color-scheme: dark:
   inputs con texto invisible y campos de autofill del navegador en blanco.
   Reglas explícitas (sin variables) e !important: defensa contra cualquier
   override inline o de cascada. */
@media (prefers-color-scheme: dark) {
    .form-control,
    input[type="text"], input[type="number"], input[type="email"],
    input[type="password"], input[type="tel"], input[type="url"],
    input[type="date"], input[type="search"],
    textarea, select {
        background-color: #252D35 !important;
        color: #FAFAFA !important;
        border-color: #3A4550 !important;
        caret-color: #FAFAFA;
    }

    .form-control::placeholder,
    input::placeholder,
    textarea::placeholder {
        color: rgba(255, 255, 255, 0.45) !important;
    }

    select option {
        background-color: #252D35;
        color: #FAFAFA;
    }

    /* Autofill del navegador (Chrome/Safari fuerzan fondo blanco) */
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus {
        -webkit-text-fill-color: #FAFAFA !important;
        -webkit-box-shadow: 0 0 0 1000px #252D35 inset !important;
        box-shadow: 0 0 0 1000px #252D35 inset !important;
        caret-color: #FAFAFA;
        transition: background-color 9999s ease-in-out 0s;
    }

    .form-group label {
        color: #BBBBBB;
    }

    .modal-content h3,
    .modal-content h4,
    .modal-content .form-title {
        color: #FAFAFA !important;
    }
}