/* =========================================================
   PERSONALIZACIÓN DE FORMULARIOS EN DJANGO UNFOLD
   Inputs, selects, textareas, fechas, horas y numéricos
   ========================================================= */


/* =========================================================
   1. ESTILO GENERAL DE CONTROLES
   ========================================================= */

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="search"],
input[type="month"],
input[type="week"],
select,
textarea {
    border: 1px solid #9ca3af !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    min-height: 38px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}


/* =========================================================
   2. EFECTO AL ENFOCAR EL CAMPO
   ========================================================= */

input:focus,
select:focus,
textarea:focus {
    border-color: #2563eb !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.20) !important;
}


/* =========================================================
   3. CAMPOS DESHABILITADOS Y SOLO LECTURA
   ========================================================= */

input:disabled,
select:disabled,
textarea:disabled {
    background-color: #f3f4f6 !important;
    color: #6b7280 !important;
    cursor: not-allowed !important;
}

input[readonly],
textarea[readonly] {
    background-color: #f9fafb !important;
    border-color: #d1d5db !important;
}


/* =========================================================
   4. LABELS Y TEXTOS DE AYUDA
   ========================================================= */

label {
    font-weight: 500 !important;
    color: #374151 !important;
}

.help,
.helptext {
    color: #6b7280 !important;
    font-size: 13px !important;
}


/* =========================================================
   5. CAMPOS DE TEXTO NORMALES MÁS LARGOS
   Excluye fechas, horas y numéricos
   ========================================================= */

.form-row input[type="text"]:not(.vDateField):not(.vTimeField):not(.vDateTimeField):not(.vIntegerField):not(.vBigIntegerField):not(.vPositiveIntegerField):not(.vPositiveSmallIntegerField):not(.vSmallIntegerField):not(.vDecimalField),
.form-row input[type="email"],
.form-row input[type="password"],
.form-row input[type="url"],
.form-row input[type="search"],
.form-row select,
.form-row textarea,
.form-row .select2-container,
.form-row .select2-selection {
    width: 100% !important;
    max-width: 760px !important;
}


/* Campos clásicos largos del admin */

input.vTextField,
input.vURLField,
input.vEmailField {
    width: 100% !important;
    max-width: 760px !important;
}


/* =========================================================
   6. CAMPOS NUMÉRICOS COMPACTOS
   vIntegerField también queda pequeño
   ========================================================= */

input.vIntegerField,
input.vBigIntegerField,
input.vPositiveIntegerField,
input.vPositiveSmallIntegerField,
input.vSmallIntegerField,
input.vDecimalField,
input[type="number"],
.form-row input.vIntegerField,
.form-row input.vBigIntegerField,
.form-row input.vPositiveIntegerField,
.form-row input.vPositiveSmallIntegerField,
.form-row input.vSmallIntegerField,
.form-row input.vDecimalField,
.form-row input[type="number"],
.aligned input.vIntegerField,
.aligned input.vBigIntegerField,
.aligned input.vPositiveIntegerField,
.aligned input.vPositiveSmallIntegerField,
.aligned input.vSmallIntegerField,
.aligned input.vDecimalField,
.aligned input[type="number"] {
    width: 130px !important;
    max-width: 130px !important;
    min-width: 130px !important;
}


/* Numéricos muy usados en filtros o tablas inline */

.inline-group input.vIntegerField,
.inline-group input.vBigIntegerField,
.inline-group input.vPositiveIntegerField,
.inline-group input.vPositiveSmallIntegerField,
.inline-group input.vSmallIntegerField,
.inline-group input.vDecimalField,
.inline-group input[type="number"] {
    width: 110px !important;
    max-width: 110px !important;
    min-width: 110px !important;
}


/* =========================================================
   7. TEXTAREA MÁS AMPLIO
   ========================================================= */

textarea {
    width: 100% !important;
    max-width: 900px !important;
    min-height: 120px !important;
}


/* =========================================================
   8. SELECT NORMAL Y SELECT MÚLTIPLE
   ========================================================= */

select {
    width: 100% !important;
    max-width: 760px !important;
}

select[multiple] {
    width: 100% !important;
    max-width: 900px !important;
    min-height: 160px !important;
}


/* =========================================================
   9. AUTOCOMPLETE / SELECT2
   ========================================================= */

.select2-container {
    width: 100% !important;
    max-width: 760px !important;
}

.select2-selection {
    border: 1px solid #9ca3af !important;
    border-radius: 8px !important;
    min-height: 38px !important;
}


/* =========================================================
   10. CAMPOS DE FECHA Y HORA DE DJANGO ADMIN
   Django normalmente los genera como:
   input type="text" class="vDateField"
   input type="text" class="vTimeField"
   ========================================================= */

/* Fecha */

input.vDateField,
input[type="text"].vDateField,
.form-row input.vDateField,
.form-row input[type="text"].vDateField,
.aligned input.vDateField,
.aligned input[type="text"].vDateField {
    width: 150px !important;
    max-width: 150px !important;
    min-width: 150px !important;
}

/* Hora */

input.vTimeField,
input[type="text"].vTimeField,
.form-row input.vTimeField,
.form-row input[type="text"].vTimeField,
.aligned input.vTimeField,
.aligned input[type="text"].vTimeField {
    width: 120px !important;
    max-width: 120px !important;
    min-width: 120px !important;
}

/* Fecha y hora juntos */

input.vDateTimeField,
input[type="text"].vDateTimeField,
.form-row input.vDateTimeField,
.form-row input[type="text"].vDateTimeField,
.aligned input.vDateTimeField,
.aligned input[type="text"].vDateTimeField {
    width: 220px !important;
    max-width: 220px !important;
    min-width: 220px !important;
}


/* =========================================================
   11. CAMPOS HTML5 DE FECHA Y HORA
   Por si algún formulario usa type=date, type=time, etc.
   ========================================================= */

input[type="date"],
.form-row input[type="date"],
.aligned input[type="date"] {
    width: 150px !important;
    max-width: 150px !important;
    min-width: 150px !important;
}

input[type="time"],
.form-row input[type="time"],
.aligned input[type="time"] {
    width: 120px !important;
    max-width: 120px !important;
    min-width: 120px !important;
}

input[type="datetime-local"],
.form-row input[type="datetime-local"],
.aligned input[type="datetime-local"] {
    width: 220px !important;
    max-width: 220px !important;
    min-width: 220px !important;
}

input[type="month"],
input[type="week"] {
    width: 180px !important;
    max-width: 180px !important;
    min-width: 180px !important;
}


/* =========================================================
   12. CAMPOS DENTRO DE INLINES
   ========================================================= */

.inline-group input:not(.vDateField):not(.vTimeField):not(.vDateTimeField):not(.vIntegerField):not(.vBigIntegerField):not(.vPositiveIntegerField):not(.vPositiveSmallIntegerField):not(.vSmallIntegerField):not(.vDecimalField),
.inline-group select,
.inline-group textarea {
    width: 100% !important;
    max-width: 640px !important;
}

/* Fechas y horas dentro de inlines */

.inline-group input.vDateField,
.inline-group input[type="text"].vDateField,
.inline-group input[type="date"] {
    width: 145px !important;
    max-width: 145px !important;
    min-width: 145px !important;
}

.inline-group input.vTimeField,
.inline-group input[type="text"].vTimeField,
.inline-group input[type="time"] {
    width: 115px !important;
    max-width: 115px !important;
    min-width: 115px !important;
}

.inline-group input.vDateTimeField,
.inline-group input[type="text"].vDateTimeField,
.inline-group input[type="datetime-local"] {
    width: 210px !important;
    max-width: 210px !important;
    min-width: 210px !important;
}


/* =========================================================
   13. AJUSTE DE ÍCONOS DE CALENDARIO Y RELOJ
   ========================================================= */

.datetimeshortcuts {
    margin-left: 8px !important;
    white-space: nowrap !important;
}

.datetimeshortcuts a {
    color: #2563eb !important;
    font-size: 13px !important;
    text-decoration: none !important;
}

.datetimeshortcuts a:hover {
    text-decoration: underline !important;
}


/* =========================================================
   14. RESPONSIVE
   En pantallas pequeñas, los controles se adaptan mejor
   ========================================================= */

@media (max-width: 768px) {
    .form-row input[type="text"]:not(.vDateField):not(.vTimeField):not(.vDateTimeField):not(.vIntegerField):not(.vBigIntegerField):not(.vPositiveIntegerField):not(.vPositiveSmallIntegerField):not(.vSmallIntegerField):not(.vDecimalField),
    .form-row input[type="email"],
    .form-row input[type="password"],
    .form-row input[type="url"],
    .form-row input[type="search"],
    .form-row select,
    .form-row textarea,
    .select2-container {
        max-width: 100% !important;
    }

    input.vDateField,
    input[type="text"].vDateField,
    input[type="date"] {
        width: 145px !important;
        max-width: 145px !important;
        min-width: 145px !important;
    }

    input.vTimeField,
    input[type="text"].vTimeField,
    input[type="time"] {
        width: 115px !important;
        max-width: 115px !important;
        min-width: 115px !important;
    }

    input.vIntegerField,
    input.vBigIntegerField,
    input.vPositiveIntegerField,
    input.vPositiveSmallIntegerField,
    input.vSmallIntegerField,
    input.vDecimalField,
    input[type="number"] {
        width: 120px !important;
        max-width: 120px !important;
        min-width: 120px !important;
    }
}