/* Reutiliza el diseño base */
@import url("/css/boton-registro-colaborador.css");

/* ------------------- */
/* Ajustes para Datos del Colaborador */
/* ------------------- */

/* Fondo y colores unificados en modo oscuro */
[data-theme="dark"] .form-container {
    background: #111827; /* gris oscuro consistente */
    border-color: #1f2937;
    color: #e5e7eb;
}

[data-theme="dark"] .form-label {
    color: #d1d5db;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: #1f2937; /* fondo inputs */
    color: #f9fafb; /* texto blanco */
    border: 1px solid #374151; /* borde gris */
}

    [data-theme="dark"] .form-control:focus,
    [data-theme="dark"] .form-select:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.3);
    }

/* Checkbox y radios */
[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"] {
    accent-color: var(--primary-color);
}

/* Select colaborador */
.form-field select {
    padding: 0.6rem 0.85rem;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
}

/* Mensaje debajo del select */
.helper-text {
    font-size: 0.85rem;
    color: var(--secondary-color);
    margin-top: 0.25rem;
}

/* Botón registrar */
[data-theme="dark"] .btn-primary {
    background-color: var(--primary-color);
    color: #fff;
}

[data-theme="dark"] .btn-primary:hover {
        background-color: var(--primary-color-dark);
 }


/* --- FIX modo oscuro para inputs readonly / disabled / autofill --- */
body:not(.light) .form-control,
body:not(.light) .form-select {
    background-color: var(--input-bg);
    color: var(--text-color-primary);
    border-color: var(--input-border);
}

    /* Campos solo-lectura y deshabilitados: que luzcan igual que los activos */
    body:not(.light) .form-control[readonly],
    body:not(.light) .form-select[readonly],
    body:not(.light) .form-control:read-only,
    body:not(.light) .form-select:read-only,
    body:not(.light) .form-control:disabled,
    body:not(.light) .form-select:disabled {
        background-color: var(--input-bg) !important;
        color: var(--text-color-primary) !important;
        border-color: var(--input-border) !important;
        opacity: 1; /* evita atenuado */
        -webkit-text-fill-color: var(--text-color-primary); /* Safari/Chrome */
    }

    /* Placeholders visibles en oscuro */
    body:not(.light) .form-control::placeholder,
    body:not(.light) .form-select::placeholder {
        color: var(--placeholder);
        opacity: 1;
    }

/* Autofill (Chrome) para que no ponga fondo amarillo en oscuro */
body:not(.light) input.form-control:-webkit-autofill,
body:not(.light) input.form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset;
    -webkit-text-fill-color: var(--text-color-primary);
    caret-color: var(--text-color-primary);
}

/* Indicador del datepicker visible en oscuro */
body:not(.light) input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(.85);
}