/* =========================================================
   8. FORMULARIOS
   ========================================================= */
.form-control,
.form-select,
select.select-chosen,
select.select-select2 {
    display: block;
    width: 100%;
    max-width: 100%;
    height: var(--ds-control-h);
    min-height: var(--ds-control-h);
    margin: 0;
    padding: 0 var(--ds-control-px);
    font-family: inherit;
    font-size: var(--ds-text-md);
    font-weight: 400;
    line-height: 1.4;
    color: var(--ds-ink-900);
    background-color: var(--ds-surface);
    border: 1px solid var(--ds-ink-400);
    border-radius: var(--ds-radius-sm);
    box-shadow: none;
    transition: border-color var(--ds-dur-fast) var(--ds-ease), box-shadow var(--ds-dur-fast) var(--ds-ease), background-color var(--ds-dur-fast) var(--ds-ease);
}

textarea.form-control {
    height: auto;
    min-height: 96px;
    padding: 10px var(--ds-control-px);
    line-height: 1.5;
    resize: vertical;
}

select.form-control,
.form-select,
select.select-chosen:not([multiple]),
select.select-select2:not([multiple]) {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 36px;
    background-image: var(--ds-chevron);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 14px;
    text-overflow: ellipsis;
}

/* Multiseleccion nativa: Chosen se desactiva en telefonos. */
select.form-control[multiple],
select.form-control[size]:not([size="1"]),
.form-select[multiple],
select.select-chosen[multiple],
select.select-select2[multiple] {
    height: auto;
    min-height: 96px;
    max-height: 168px;
    padding: 4px;
    background-image: none;
    overflow-y: auto;
}

select[multiple] option {
    padding: 6px 8px;
    border-radius: 4px;
}

.form-control::placeholder {
    color: var(--ds-ink-500);
    opacity: 1;
    font-style: normal;
}

.form-control:hover:not(:disabled):not([readonly]):not(:focus),
.form-select:hover:not(:disabled):not(:focus) {
    border-color: var(--ds-ink-500);
}

.form-control:focus,
.form-select:focus,
select.select-chosen:focus {
    color: var(--ds-ink-900);
    background-color: var(--ds-surface);
    border-color: var(--ds-ink-900);
    box-shadow: var(--ds-focus-ring);
    outline: 0;
}

.form-control:disabled,
.form-select:disabled,
fieldset:disabled .form-control,
fieldset[disabled] .form-control {
    background-color: var(--ds-ink-100);
    border-color: var(--ds-ink-300);
    color: var(--ds-ink-500);
    cursor: not-allowed;
    opacity: 1;
}

.form-control[readonly] {
    background-color: var(--ds-ink-50);
    border-color: var(--ds-ink-300);
    color: var(--ds-ink-700);
}

.form-control-sm,
.input-sm {
    height: var(--ds-control-h-sm);
    min-height: var(--ds-control-h-sm);
    font-size: var(--ds-text-sm);
}

.form-control-lg,
.input-lg,
input[type="text"].form-control.input-lg,
input[type="password"].form-control.input-lg,
input[type="email"].form-control.input-lg {
    height: var(--ds-control-h-lg);
    min-height: var(--ds-control-h-lg);
    font-size: 15px;
}

input[type="number"].form-control {
    font-variant-numeric: tabular-nums;
}

/* Archivo: boton "Elegir" secundario dentro del campo. */
input[type="file"].form-control,
input[type="file"] {
    padding-top: 0;
}

input[type="file"].form-control {
    padding: 0;
    line-height: calc(var(--ds-control-h) - 2px);
    color: var(--ds-ink-600);
    overflow: hidden;
}

input[type="file"]::file-selector-button {
    height: 100%;
    margin: 0 12px 0 0;
    padding: 0 14px;
    font: 500 13px/1 var(--ds-font);
    color: var(--ds-ink-900);
    background: var(--ds-ink-100);
    border: 0;
    border-right: 1px solid var(--ds-ink-300);
    border-radius: 0;
    cursor: pointer;
    transition: background-color var(--ds-dur-fast) var(--ds-ease);
}

input[type="file"]:not(.form-control)::file-selector-button {
    height: auto;
    padding: 8px 14px;
    border: 1px solid var(--ds-ink-300);
    border-radius: var(--ds-radius-sm);
}

input[type="file"]:hover::file-selector-button {
    background: var(--ds-ink-150);
}

/* Etiquetas: arriba del campo, 13 px/600. */
label,
.form-label,
.control-label,
.col-form-label {
    font-size: var(--ds-text-sm);
    font-weight: 600;
    line-height: 1.35;
    color: var(--ds-ink-700);
    letter-spacing: 0;
    text-transform: none;
}

.form-label,
.control-label,
.form-group > label:not(.btn):not(.checkbox-inline):not(.radio-inline):not(:has(> input)),
.form-group-modern > label {
    display: block;
    margin-bottom: 6px;
}

label .text-danger,
label .required,
.control-label .text-danger,
.form-label .text-danger {
    color: var(--ds-link) !important;
    font-weight: 600;
    margin-left: 2px;
}

/* Etiquetas que envuelven una casilla: texto normal junto a la casilla. */
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]),
.checkbox-inline,
.radio-inline,
.form-check-label,
.csscheckbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    margin: 0;
    font-size: var(--ds-text-md);
    font-weight: 400;
    color: var(--ds-ink-900);
    cursor: pointer;
}

input[type="checkbox"]:not(.btn-check):not(.form-check-input),
input[type="radio"]:not(.btn-check):not(.form-check-input) {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--ds-accent);
    vertical-align: middle;
    flex: 0 0 auto;
    cursor: pointer;
}

.form-check-input {
    width: 16px;
    height: 16px;
    margin-top: 0.2em;
    border: 1px solid var(--ds-ink-400);
    border-radius: 4px;
    background-color: var(--ds-surface);
    cursor: pointer;
}

.form-check-input[type="radio"] {
    border-radius: 50%;
}

.form-check-input:checked {
    background-color: var(--ds-accent);
    border-color: var(--ds-accent);
}

.form-check-input:focus {
    border-color: var(--ds-ink-900);
    box-shadow: var(--ds-focus-ring);
}

.form-switch .form-check-input {
    width: 36px;
    height: 20px;
    margin-top: 0;
    border-radius: 999px;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding-left: 0;
}

.form-check .form-check-input {
    float: none;
    margin-left: 0;
}

/* Grupos y espaciado */
.form-group,
.form-group-modern {
    margin-bottom: var(--ds-space-4);
}

fieldset legend {
    font-size: var(--ds-text-lg);
    font-weight: 600;
    color: var(--ds-ink-900);
    padding: 8px 0 8px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--ds-ink-150);
}

/* Formularios horizontales: etiqueta arriba, el campo conserva su ancho de columna. */
.form-horizontal .form-group {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 0 0 var(--ds-space-4);
}

.form-horizontal .form-group > .control-label,
.form-horizontal .form-group > label[class*="col-"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin: 0 0 6px;
    padding: 0;
    text-align: left;
}

.form-horizontal .form-group > [class*="col-"]:not(.control-label):not(label) {
    padding-left: 0;
    padding-right: 0;
}

.form-horizontal [class*="col-md-offset-"],
.form-horizontal [class*="col-sm-offset-"],
.form-horizontal [class*="col-lg-offset-"],
.form-horizontal [class*="offset-md-"],
.form-horizontal [class*="offset-sm-"] {
    margin-left: 0;
}

/* Etiqueta y campo en columnas anidadas (rpersonal): apilados a ancho completo. */
label.form-label[class*="col-"],
label.form-label[class*="col-"] + [class*="col-"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Varios campos en linea (nombres, licencias): fila flexible con separacion uniforme. */
[class*="col-"]:has(> .form-control[style*="inline-block"] ~ .form-control[style*="inline-block"]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

[class*="col-"]:has(> .form-control[style*="inline-block"] ~ .form-control[style*="inline-block"]) > .form-control[style*="width: 140px"],
[class*="col-"]:has(> .form-control[style*="inline-block"] ~ .form-control[style*="inline-block"]) > .form-control[style*="width: 100px"] {
    flex: 1 1 0;
    min-width: 120px;
    width: auto !important;
}

.form-control[style*="inline-block"] {
    margin: 0;
    vertical-align: middle;
}

.form-bordered .form-group {
    border-bottom: 0;
    padding: 0;
}

.form-actions,
.form-group.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: var(--ds-space-6);
    margin-bottom: 0;
    padding: var(--ds-space-4) 0 0;
    border-top: 1px solid var(--ds-ink-150);
    background: transparent;
}

.form-actions > [class*="col-"],
.form-horizontal .form-actions > [class*="col-"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0;
    text-align: left;
}

/* Barras de filtros legacy (cpersonal, reportes, carnets, inactivos, perfiles):
   los controles van en divs inline-block dentro de una .row; se ordenan en
   una fila flexible. Los !important vencen estilos en linea del HTML. */
form > .row:has(> div[style*="inline-block"]) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 8px;
}

form > .row:has(> div[style*="inline-block"]) > * {
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

form > .row:has(> div[style*="inline-block"]) > [class*="col-"] {
    flex: 0 0 100%;
    width: 100%;
}

form > .row > div[style*="inline-block"] {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

form > .row > div[style*="inline-block"] > .form-control,
form > .row > div[style*="inline-block"] > select,
form > .row > [id^="more_option"]:not(button) > .form-control,
form > .row > [id^="more_option"]:not(button) > select {
    width: 220px;
    max-width: 100%;
    margin: 0;
    position: static !important;
}

form > .row > div[style*="inline-block"] > .chosen-container,
form > .row > [id^="more_option"]:not(button) > .chosen-container {
    width: 220px !important;
}

form > .row > [id^="more_option"]:not(button) {
    flex: 0 0 100%;
    width: 100%;
    padding: 12px !important;
    background: var(--ds-ink-50) !important;
    border: 1px solid var(--ds-ink-150);
    border-radius: 8px !important;
}

form > .row > [id^="more_option"]:not(button) > * {
    margin: 0 8px 8px 0;
    vertical-align: middle;
}

form > .row:has(> div[style*="inline-block"]) > div[style*="position: relative"] {
    flex: 0 0 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

form > .row:has(> div[style*="inline-block"]) > div[style*="position: relative"] > .btn {
    width: auto !important;
}

/* Acento rojo en linea del buscador de filtros: se ve como error. */
.form-control[style*="border-bottom"] {
    border-bottom-width: 1px !important;
    border-bottom-color: var(--ds-ink-400) !important;
}

/* Texto de ayuda existente y errores junto al campo. */
.form-text,
.help-block {
    display: block;
    margin-top: 6px;
    margin-bottom: 0;
    font-size: 12.5px;
    font-style: normal;
    font-weight: 400;
    color: var(--ds-ink-500);
}

.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.has-error .form-control,
.has-error .form-select,
.form-control[aria-invalid="true"],
.form-control.error,
.form-control:user-invalid,
.form-select:user-invalid {
    border-color: var(--ds-danger-fill);
    background-color: var(--ds-surface);
}

input.form-control.is-invalid,
.was-validated input.form-control:invalid,
textarea.form-control.is-invalid {
    background-image: none;
    padding-right: var(--ds-control-px);
}

.form-control.is-invalid:focus,
.has-error .form-control:focus,
.form-control[aria-invalid="true"]:focus,
.form-control:user-invalid:focus {
    border-color: var(--ds-danger-fill);
    box-shadow: var(--ds-error-ring);
}

.has-success .form-control,
.has-warning .form-control,
.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: var(--ds-ink-400);
    background-image: none;
}

.has-error .control-label,
.has-error .form-label,
.has-error label {
    color: var(--ds-ink-700);
}

.invalid-feedback,
.has-error .help-block,
.form-group-modern .form-control.is-invalid + .validation-message,
label.error,
span.error,
.field-error {
    align-items: flex-start;
    margin-top: 6px;
    font-size: var(--ds-text-sm);
    font-weight: 500;
    font-style: normal;
    line-height: 1.4;
    color: var(--ds-danger);
}

.invalid-feedback::before,
.has-error .help-block::before,
.form-group-modern .form-control.is-invalid + .validation-message::before,
label.error::before,
span.error::before,
.field-error::before {
    content: "\f06a";
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 12px;
    line-height: 1.5;
    flex: 0 0 auto;
    margin-right: 6px;
}

.has-error .help-block,
label.error,
span.error,
.field-error,
.is-invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-feedback {
    display: flex;
}

.invalid-feedback:empty,
.has-error .help-block:empty,
.validation-message:empty,
label.error:empty,
span.error:empty,
.field-error:empty {
    display: none;
}

/* index.php marca sus contenedores de error con .d-block (!important). */
.invalid-feedback:empty::before,
.invalid-feedback[hidden]::before {
    content: none;
}

.has-success .help-block,
.has-success .control-label,
.has-warning .help-block,
.has-warning .control-label {
    color: var(--ds-ink-600);
}

/* Grupos de entrada */
.input-group {
    margin: 0;
    flex-wrap: nowrap;
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > .btn {
    height: var(--ds-control-h);
    min-height: var(--ds-control-h);
}

.input-group-text,
.input-group-addon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 0 12px;
    font-size: var(--ds-text-md);
    font-weight: 400;
    line-height: 1;
    color: var(--ds-ink-600);
    background-color: var(--ds-ink-100);
    border: 1px solid var(--ds-ink-400);
    border-radius: var(--ds-radius-sm);
    white-space: nowrap;
}

.input-group > .input-group-addon:not(:first-child),
.input-group > .input-group-text:not(:first-child) {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group > .input-group-addon:not(:last-child),
.input-group > .input-group-text:not(:last-child) {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group:focus-within > .input-group-text,
.input-group:focus-within > .input-group-addon {
    border-color: var(--ds-ink-900);
}

.input-group > .form-control:focus {
    z-index: 3;
}

/* Filter bars of the personnel lists (inc/filtros_personal_campos.php). */
.sistah-filtros-mas {
    margin-top: var(--ds-space-4, 16px);
    padding-top: var(--ds-space-3, 12px);
    border-top: 1px solid var(--ds-ink-150, #E8EAEE);
}
.sistah-filtros-mas > summary {
    cursor: pointer;
    width: fit-content;
    font-size: var(--ds-text-sm, 13px);
    font-weight: 600;
    color: var(--ds-ink-700, #3A404A);
}
.sistah-filtros-mas[open] > summary {
    margin-bottom: var(--ds-space-3, 12px);
}
.sistah-filtros-rango .slider.slider-horizontal {
    width: 100% !important;
    max-width: 420px;
}
.sistah-casillas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    gap: 6px 16px;
}

/* Profile photo framing (inc/perfil/modal_foto.php, js/perfil-foto.js) */
.perfil-foto-lienzo {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    border-radius: var(--bs-border-radius-lg, .5rem);
    background: var(--bs-tertiary-bg, #f1f3f5);
    cursor: grab;
    touch-action: none;
}
.perfil-foto-lienzo:active { cursor: grabbing; }
.perfil-foto-lienzo:focus-visible { outline: 3px solid var(--bs-primary, #b8141b); outline-offset: 2px; }