/* ==========================================
   DARK MODE INPUTS - Mejoras para modo oscuro
   ========================================== */

/* Estilos generales para inputs en modo oscuro */
.theme-dark input,
.theme-dark textarea,
.theme-dark select,
.theme-dark .form-control,
.theme-dark .form-select {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Placeholders en modo oscuro */
.theme-dark input::placeholder,
.theme-dark textarea::placeholder,
.theme-dark select::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Focus states en modo oscuro */
.theme-dark input:focus,
.theme-dark textarea:focus,
.theme-dark select:focus,
.theme-dark .form-control:focus,
.theme-dark .form-select:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.1) !important;
}

/* Labels en modo oscuro */
.theme-dark .form-custom label,
.theme-dark .form-label label {
    color: rgba(255, 255, 255, 0.7) !important;
    background-color: #0f1117 !important;
}

/* Form custom específico */
.theme-dark .form-custom {
    background-color: transparent !important;
}

.theme-dark .form-custom input,
.theme-dark .form-custom textarea,
.theme-dark .form-custom select {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.theme-dark .form-custom input:focus,
.theme-dark .form-custom textarea:focus,
.theme-dark .form-custom select:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: rgba(255, 255, 255, 1) !important;
}

/* Inputs readonly y disabled */
.theme-dark input[readonly],
.theme-dark textarea[readonly],
.theme-dark select[readonly],
.theme-dark .form-control[readonly] {
    background-color: rgba(255, 255, 255, 0.02) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.theme-dark input:disabled,
.theme-dark textarea:disabled,
.theme-dark select:disabled,
.theme-dark .form-control:disabled {
    background-color: rgba(255, 255, 255, 0.02) !important;
    color: rgba(255, 255, 255, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    opacity: 0.6;
}

/* Selects específicos */
.theme-dark select option {
    background-color: #0f1117 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.theme-dark select option:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Inputs de tipo específico */
.theme-dark input[type="date"],
.theme-dark input[type="time"],
.theme-dark input[type="datetime-local"] {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Inputs de archivo */
.theme-dark input[type="file"] {
    background-color: transparent !important;
    border: 1px dashed rgba(255, 255, 255, 0.3) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.theme-dark input[type="file"]:hover {
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Checkboxes y radio buttons */
.theme-dark .form-check-input {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.theme-dark .form-check-input:checked {
    background-color: #007bff !important;
    border-color: #007bff !important;
}

.theme-dark .form-check-label {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Switches */
.theme-dark .form-switch .form-check-input {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.theme-dark .form-switch .form-check-input:checked {
    background-color: #198754 !important;
    border-color: #198754 !important;
}

/* Range sliders */
.theme-dark input[type="range"] {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.theme-dark input[type="range"]::-webkit-slider-thumb {
    background-color: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.theme-dark input[type="range"]::-moz-range-thumb {
    background-color: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Textarea específico */
.theme-dark textarea {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.theme-dark textarea:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: rgba(255, 255, 255, 1) !important;
}

/* Input groups */
.theme-dark .input-group-text {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Validación de formularios */
.theme-dark .form-control.is-valid,
.theme-dark .form-select.is-valid {
    border-color: rgba(25, 135, 84, 0.5) !important;
    background-color: rgba(25, 135, 84, 0.1) !important;
}

.theme-dark .form-control.is-invalid,
.theme-dark .form-select.is-invalid {
    border-color: rgba(220, 53, 69, 0.5) !important;
    background-color: rgba(220, 53, 69, 0.1) !important;
}

.theme-dark .valid-feedback {
    color: rgba(25, 135, 84, 0.8) !important;
}

.theme-dark .invalid-feedback {
    color: rgba(220, 53, 69, 0.8) !important;
}

/* Autocomplete */
.theme-dark input:-webkit-autofill,
.theme-dark input:-webkit-autofill:hover,
.theme-dark input:-webkit-autofill:focus,
.theme-dark input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #0f1117 inset !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Iconos en inputs */
.theme-dark .form-custom i {
    color: rgba(255, 255, 255, 0.6) !important;
}

.theme-dark .form-custom input:focus + i,
.theme-dark .form-custom textarea:focus + i,
.theme-dark .form-custom select:focus + i {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Botones de formulario */
.theme-dark .btn-outline-secondary {
    color: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.theme-dark .btn-outline-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 1) !important;
}

/* Dropdowns en modo oscuro */
.theme-dark .dropdown-menu {
    background-color: #0f1117 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.theme-dark .dropdown-item {
    color: rgba(255, 255, 255, 0.8) !important;
}

.theme-dark .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 1) !important;
}

/* Tooltips en modo oscuro */
.theme-dark .tooltip .tooltip-inner {
    background-color: rgba(0, 0, 0, 0.9) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Popovers en modo oscuro */
.theme-dark .popover {
    background-color: #0f1117 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.theme-dark .popover-header {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.theme-dark .popover-body {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Transiciones suaves */
.theme-dark input,
.theme-dark textarea,
.theme-dark select,
.theme-dark .form-control,
.theme-dark .form-select {
    transition: all 0.3s ease !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .theme-dark .form-custom input,
    .theme-dark .form-custom textarea,
    .theme-dark .form-custom select {
        font-size: 16px !important; /* Previene zoom en iOS */
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .theme-dark input,
    .theme-dark textarea,
    .theme-dark select {
        border-width: 2px !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .theme-dark input,
    .theme-dark textarea,
    .theme-dark select {
        transition: none !important;
    }
}