/* ==========================================================================
   Custom Forms CSS
   Inputs, selects, labels, checkbox y ajustes Select2 compartidos.
   ========================================================================== */

:root {
    --form-control-bg: #ffffff;
    --form-control-border: #cfd8e3;
    --form-control-border-hover: #b7c4d0;
    --form-control-text: #1f2933;
    --form-control-muted: #607080;
    --form-control-placeholder: #8392a0;
    --form-control-disabled-bg: #edf1f4;
    --form-control-disabled-text: #73808c;
    --form-focus-bg: #e8f0f2;
    --form-focus-border: #245a66;
    --form-focus-ring: rgba(36, 90, 102, 0.16);
}

.form-control,
.form-select {
    min-height: 38px;
    padding: 0.48rem 0.72rem;
    border: 1px solid var(--form-control-border);
    border-radius: 7px;
    background-color: var(--form-control-bg);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08);
    color: var(--form-control-text);
    font-family: var(--font-ui);
    font-size: 12.75px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.35;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

select.form-control,
.form-select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238a98a6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 6 5 5 5-5'/%3e%3c/svg%3e");
    background-position: right 0.68rem center;
    background-repeat: no-repeat;
    background-size: 10px 10px;
}

.form-control-sm,
.form-select-sm {
    min-height: 32px;
    padding: 0.34rem 0.58rem;
    font-size: 12px;
}

.form-control-lg,
.form-select-lg,
input.form-control-lg {
    min-height: 38px;
    padding: 0.46rem 0.68rem;
    font-size: 12.75px;
}

select.form-control-sm,
.form-select-sm {
    padding-right: 1.75rem;
    background-position: right 0.58rem center;
}

select.form-control-lg,
.form-select-lg {
    padding-right: 2rem;
    background-position: right 0.68rem center;
}

select.form-control[multiple],
select.form-control[size],
.form-select[multiple],
.form-select[size] {
    padding-right: 0.72rem;
    background-image: none;
}

textarea.form-control {
    min-height: 84px;
    line-height: 1.45;
    resize: vertical;
}

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) {
    border-color: var(--form-control-border-hover);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.1);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--form-focus-border);
    background-color: var(--form-focus-bg);
    box-shadow: 0 0 0 3px var(--form-focus-ring);
    color: #111827;
}

.form-control::placeholder {
    color: var(--form-control-placeholder);
    font-weight: 400;
    opacity: 1;
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--form-control-disabled-bg);
    box-shadow: none;
    color: var(--form-control-disabled-text);
    cursor: not-allowed;
    opacity: 1;
}

.form-label,
.col-form-label,
.form-check .form-check-label {
    color: #52616f;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1.25;
}

.form-label,
.col-form-label {
    margin-bottom: 6px;
}

.tooltip {
    font-family: var(--font-ui);
    font-size: 12px;
}

.input-group-text {
    min-height: 38px;
    border-color: var(--form-control-border);
    color: #245a66;
    background-color: #e8f0f2;
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 700;
}

.input-group .form-control,
.input-group .form-select {
    box-shadow: none;
}

input[type="number"],
input.digits,
.digits,
.money,
.numeric,
.amount {
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

.form-check-input {
    width: 1rem;
    height: 1rem;
    margin-top: 0.16rem;
    border-color: var(--form-control-border);
}

.form-check-input:focus {
    border-color: var(--form-focus-border);
    box-shadow: 0 0 0 3px var(--form-focus-ring);
}

.form-check-input:checked {
    background-color: #176b5c;
    border-color: #176b5c;
}

.selection .select2-selection,
.select2-container {
    font-family: var(--font-ui);
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 38px;
    border: 1px solid var(--form-control-border);
    border-radius: 7px;
    background-color: var(--form-control-bg);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.select2-container--default .select2-selection--single {
    position: relative;
    display: block;
    height: 38px !important;
    padding: 0 !important;
    border-color: var(--form-control-border) !important;
    border-radius: 7px !important;
}

.select2-container--default:not(.select2-container--disabled) .select2-selection--single:hover,
.select2-container--default:not(.select2-container--disabled) .select2-selection--multiple:hover {
    border-color: var(--form-control-border-hover);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 36px;
    padding: 0.46rem 2.15rem 0.46rem 0.68rem;
    overflow: hidden;
    color: var(--form-control-text);
    font-size: 12.75px;
    font-weight: 500;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--form-control-placeholder);
    font-weight: 400;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0 !important;
    right: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 100%;
    min-height: 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    position: static;
    margin: 0;
    border-color: var(--form-control-placeholder) transparent transparent transparent;
}

.select2-container .select2-selection--multiple {
    min-height: 40px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: 6px;
    border-color: #bdd5d3;
    border-radius: 6px;
    background-color: #e8f0f2;
    color: #1f2933;
    font-size: 12px;
    font-weight: 600;
}

.select2-dropdown {
    overflow: hidden;
    border-color: var(--form-control-border);
    border-radius: 7px;
    box-shadow: 0 12px 24px rgba(31, 41, 55, 0.12);
    font-family: var(--font-ui);
}

.select2-results__option {
    padding: 8px 12px;
    color: var(--form-control-text);
    font-size: 12.75px;
    font-weight: 500;
    line-height: 1.25;
}

.select2-search--dropdown .select2-search__field {
    min-height: 36px;
    border-color: var(--form-control-border) !important;
    border-radius: 6px;
    color: var(--form-control-text);
    font-family: var(--font-ui);
    font-size: 12.75px;
}

.modal .form-label,
.modal .col-form-label,
.modal .form-check .form-check-label {
    color: #475569;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1.25;
}

.modal .form-label,
.modal .col-form-label {
    margin-bottom: 5px;
}

.modal .form-group:has(:is(input, select, textarea)[required]) > .form-label::after,
.modal .form-group:has(:is(input, select, textarea)[required]) > label::after,
.modal .modal-body [class*="col-"]:has(> :is(input, select, textarea)[required]) > .form-label::after,
.modal .modal-body [class*="col-"]:has(> :is(input, select, textarea)[required]) > label::after {
    content: " *";
    color: #dc3545;
    font-weight: 800;
}

.modal .form-group {
    margin-bottom: 12px;
}

.modal .form-control,
.modal .form-select {
    min-height: 36px;
    padding: 0.42rem 0.64rem;
    border: 1px solid var(--form-control-border);
    border-radius: 7px;
    background-color: var(--form-control-bg);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08);
    color: var(--form-control-text);
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.35;
}

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

.modal .form-control-sm,
.modal .form-select-sm,
.modal .form-control-lg,
.modal .form-select-lg,
.modal input.form-control-lg,
.modal select.form-control-lg {
    min-height: 36px;
    padding: 0.42rem 0.64rem;
    font-size: 12.5px;
}

.modal select.form-control,
.modal .form-select {
    padding-right: 2rem;
    background-position: right 0.64rem center;
    background-size: 10px 10px;
}

.modal textarea.form-control {
    min-height: 74px;
    line-height: 1.42;
}

.modal .input-group-text {
    min-height: 36px;
    padding: 0.42rem 0.64rem;
    font-size: 12px;
}

.modal .select2-container {
    width: 100% !important;
    font-family: var(--font-ui);
}

.modal .select2-container--default .select2-selection--single {
    display: block;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border: 1px solid var(--form-control-border) !important;
    border-radius: 7px !important;
    background-color: var(--form-control-bg);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08);
}

.modal .select2-container--default .select2-selection--single .select2-selection__rendered {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 34px;
    padding: 0.42rem 2.05rem 0.42rem 0.64rem;
    overflow: hidden;
    color: var(--form-control-text);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0 !important;
    right: 0 !important;
    width: 30px;
    height: 100%;
}

.modal .select2-container--default .select2-selection--multiple {
    display: block;
    box-sizing: border-box;
    min-height: 36px !important;
    padding: 2px 6px !important;
    border: 1px solid var(--form-control-border) !important;
    border-radius: 7px !important;
    background-color: var(--form-control-bg);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08);
}

.modal .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 30px;
    margin: 0;
    padding: 0;
}

.modal .select2-container--default .select2-selection--multiple .select2-selection__rendered li {
    margin-bottom: 0;
}

.modal .select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 2px 0 !important;
    padding: 2px 6px !important;
    border-color: #bdd5d3 !important;
    border-radius: 6px;
    background-color: #e8f0f2 !important;
    color: #1f2933;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
}

.modal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    margin-right: 5px;
    color: #176b5c !important;
    font-weight: 700;
}

.modal .select2-container--default .select2-selection--multiple .select2-search--inline {
    margin: 0;
    line-height: 1;
}

.modal .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    height: 26px;
    min-height: 26px;
    margin: 0;
    padding: 0;
    color: var(--form-control-text);
    font-family: var(--font-ui);
    font-size: 12.5px;
}

.modal .alert {
    padding: 12px 14px;
    border-radius: 8px;
    font-family: var(--font-ui);
    font-size: 12.75px;
    line-height: 1.45;
}

.modal .alert-heading {
    font-size: 14px;
    font-weight: 750;
    line-height: 1.3;
}

/* Feedback de foco azuloso en todos los controles editables */
.page-body input.form-control:focus,
.page-body input.form-control.is-app-focused,
.page-body textarea.form-control:focus,
.page-body textarea.form-control.is-app-focused,
.page-body select.form-control:focus,
.page-body select.form-control.is-app-focused,
.page-body .form-select:focus,
.page-body .form-select.is-app-focused,
.modal input.form-control:focus,
.modal input.form-control.is-app-focused,
.modal textarea.form-control:focus,
.modal textarea.form-control.is-app-focused,
.modal select.form-control:focus,
.modal select.form-control.is-app-focused,
.modal .form-select:focus,
.modal .form-select.is-app-focused,
input.form-control:focus,
input.form-control.is-app-focused,
textarea.form-control:focus,
textarea.form-control.is-app-focused,
select.form-control:focus,
select.form-control.is-app-focused {
    background-color: var(--form-focus-bg) !important;
    border-color: var(--form-focus-border) !important;
    box-shadow: 0 0 0 3px var(--form-focus-ring) !important;
    color: #111827;
}

.page-body input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]):focus,
.page-body input.is-app-focused:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]),
.page-body textarea:focus,
.page-body textarea.is-app-focused,
.page-body select:focus,
.page-body select.is-app-focused,
.modal input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]):focus,
.modal input.is-app-focused:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]),
.modal textarea:focus,
.modal textarea.is-app-focused,
.modal select:focus,
.modal select.is-app-focused {
    background-color: var(--form-focus-bg);
    border-color: var(--form-focus-border);
    box-shadow: 0 0 0 3px var(--form-focus-ring);
}

.select2-container--default:not(.select2-container--disabled).select2-container--focus .select2-selection,
.select2-container--default:not(.select2-container--disabled).select2-container--open .select2-selection,
.select2-container--default:not(.select2-container--disabled):focus-within .select2-selection,
.select2-container--default:not(.select2-container--disabled) .selection:focus-within .select2-selection,
.select2-container--default:not(.select2-container--disabled) .select2-selection:focus,
.select2-container--default:not(.select2-container--disabled).is-app-focused .select2-selection,
.select2-container--default:not(.select2-container--disabled) .select2-selection.is-app-focused,
.select2-container--default:not(.select2-container--disabled) .select2-selection[aria-expanded="true"] {
    background-color: var(--form-focus-bg) !important;
    border-color: var(--form-focus-border) !important;
    box-shadow: 0 0 0 3px var(--form-focus-ring) !important;
}

.select2-container--default.select2-container--disabled .select2-selection {
    background-color: var(--form-control-disabled-bg);
    box-shadow: none;
    cursor: not-allowed;
}

/* ==========================================================================
   Desktop accounting controls
   ========================================================================== */

body:not(.dark-only) .form-control,
body:not(.dark-only) .form-select,
body:not(.dark-only) .input-group-text,
body:not(.dark-only) .select2-container--default .select2-selection--single,
body:not(.dark-only) .select2-container--default .select2-selection--multiple {
    border-color: var(--form-control-border);
    border-radius: 6px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78), 0 1px 1px rgba(31, 41, 51, .05);
}

body:not(.dark-only) .form-control:hover:not(:disabled):not([readonly]),
body:not(.dark-only) .form-select:hover:not(:disabled),
body:not(.dark-only) .select2-container--default:not(.select2-container--disabled) .select2-selection--single:hover,
body:not(.dark-only) .select2-container--default:not(.select2-container--disabled) .select2-selection--multiple:hover {
    border-color: #aebdc9;
}

body:not(.dark-only) .form-control:focus,
body:not(.dark-only) .form-select:focus,
body:not(.dark-only) .select2-container--default:not(.select2-container--disabled).select2-container--focus .select2-selection,
body:not(.dark-only) .select2-container--default:not(.select2-container--disabled).select2-container--open .select2-selection,
body:not(.dark-only) .select2-container--default:not(.select2-container--disabled):focus-within .select2-selection {
    background-color: #edf4f5 !important;
    border-color: #245a66 !important;
    box-shadow: 0 0 0 2px rgba(36, 90, 102, .14), inset 0 1px 0 rgba(255, 255, 255, .72) !important;
}

body:not(.dark-only) .input-group-text {
    background: linear-gradient(180deg, #f8fafb 0%, #e8f0f2 100%);
    color: #245a66;
}
