/* ============================================
   SUITE EDUCATION - FORM WHITE INPUTS
   Override global para inputs con fondo blanco
   Aplica a todos los formularios neumórficos
   ============================================ */

/*
 * Este archivo sobrescribe los estilos de inputs en contextos neumórficos
 * para que tengan fondo blanco y mejor contraste visual.
 * Incluir este archivo después de los estilos base neumórficos.
 */

/* ==================== INPUTS EN CONTEXTO NEUMÓRFICO ==================== */

/* Selectores genéricos para inputs en cards neumórficas */
.neu-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]),
.neu-card textarea,
.neu-card-inset input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]),
.neu-card-inset textarea,
.form-card-neu input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]),
.form-card-neu textarea,
.compact-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]),
.compact-card textarea {
    background-color: #ffffff !important;
    border: 1px solid #d1d9e6 !important;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.05) !important;
    color: #2d3748;
}

/* Selects en cards - usar background-color para no sobrescribir background-image de la flecha */
.neu-card select,
.neu-card-inset select,
.form-card-neu select,
.compact-card select {
    background-color: #ffffff !important;
    border: 1px solid #d1d9e6 !important;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.05) !important;
    color: #2d3748;
    /* Flecha del dropdown */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1rem !important;
    padding-right: 2.5rem !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    cursor: pointer;
}

/* Estado hover */
.neu-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):hover,
.neu-card textarea:hover,
.neu-card select:hover,
.neu-card-inset input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):hover,
.neu-card-inset textarea:hover,
.neu-card-inset select:hover,
.form-card-neu input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):hover,
.form-card-neu textarea:hover,
.form-card-neu select:hover,
.compact-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):hover,
.compact-card textarea:hover,
.compact-card select:hover {
    border-color: #a3b1c6 !important;
}

/* Estado focus */
.neu-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):focus,
.neu-card textarea:focus,
.neu-card select:focus,
.neu-card-inset input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):focus,
.neu-card-inset textarea:focus,
.neu-card-inset select:focus,
.form-card-neu input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):focus,
.form-card-neu textarea:focus,
.form-card-neu select:focus,
.compact-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):focus,
.compact-card textarea:focus,
.compact-card select:focus {
    outline: none !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

/* ==================== CLASES ESPECÍFICAS ==================== */

/* Clases neu-input, curso-form-input, etc. */
.neu-input,
.curso-form-input,
.curso-form-select,
.curso-form-textarea {
    background: #ffffff !important;
    border: 1px solid #d1d9e6 !important;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.neu-input:focus,
.curso-form-input:focus,
.curso-form-select:focus,
.curso-form-textarea:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15) !important;
}

/* ==================== CONTEXTOS CON FONDO GRIS/NEUMÓRFICO ==================== */

/* Cuando el contenedor tiene fondo neumórfico - INPUTS Y TEXTAREAS */
[style*="background: #e0e5ec"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]),
[style*="background: #e0e5ec"] textarea,
[style*="background:#e0e5ec"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]),
[style*="background:#e0e5ec"] textarea,
[style*="background: var(--neu-surface)"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]),
[style*="background: var(--neu-surface)"] textarea {
    background-color: #ffffff !important;
    border: 1px solid #d1d9e6 !important;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* Cuando el contenedor tiene fondo neumórfico - SELECTS con flecha */
[style*="background: #e0e5ec"] select,
[style*="background:#e0e5ec"] select,
[style*="background: var(--neu-surface)"] select {
    background-color: #ffffff !important;
    border: 1px solid #d1d9e6 !important;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.05) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1rem !important;
    padding-right: 2.5rem !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

/* ==================== SELECTORES COMUNES DE FORMULARIOS ==================== */

/* Formularios con estilos inline de inset shadow */
input[style*="inset 3px 3px 6px"],
textarea[style*="inset 3px 3px 6px"],
select[style*="inset 3px 3px 6px"],
input[style*="inset 2px 2px 4px"],
textarea[style*="inset 2px 2px 4px"],
select[style*="inset 2px 2px 4px"] {
    background: #ffffff !important;
    border: 1px solid #d1d9e6 !important;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* ==================== SELECT MÚLTIPLE ==================== */

select[multiple] {
    background-image: none !important;
}

/* ==================== DISABLED/READONLY ==================== */

.neu-card input:disabled,
.neu-card textarea:disabled,
.neu-card select:disabled,
.form-card-neu input:disabled,
.form-card-neu textarea:disabled,
.form-card-neu select:disabled {
    background: #f3f4f6 !important;
    color: #9ca3af !important;
    cursor: not-allowed;
}

.neu-card input:read-only,
.neu-card textarea:read-only,
.form-card-neu input:read-only,
.form-card-neu textarea:read-only {
    background: #f9fafb !important;
}