/* Customizations of Bootstrap 5 (lib/bootstrap) kept outside the library file. */

/* Institutional primary color */
:root {
    --bs-primary: #0072B1;
    --bs-primary-rgb: 0, 114, 177;
    --bs-link-color: #0072B1;
    --bs-link-color-rgb: 0, 114, 177;
    --bs-link-hover-color: #005a8c;
    --bs-link-hover-color-rgb: 0, 90, 140;
    --bs-link-decoration: none;
}
a, a:hover, a:focus, a:active { text-decoration: none !important; }
.btn-primary {
    --bs-btn-bg: #0072B1;
    --bs-btn-border-color: #0072B1;
    --bs-btn-hover-bg: #005f94;
    --bs-btn-hover-border-color: #005a8c;
    --bs-btn-focus-shadow-rgb: 38, 135, 189;
    --bs-btn-active-bg: #005a8c;
    --bs-btn-active-border-color: #005383;
    --bs-btn-disabled-bg: #0072B1;
    --bs-btn-disabled-border-color: #0072B1;
}
.btn-outline-primary {
    --bs-btn-color: #0072B1;
    --bs-btn-border-color: #0072B1;
    --bs-btn-hover-bg: #0072B1;
    --bs-btn-hover-border-color: #0072B1;
    --bs-btn-active-bg: #0072B1;
    --bs-btn-active-border-color: #0072B1;
    --bs-btn-disabled-color: #0072B1;
    --bs-btn-disabled-border-color: #0072B1;
}
.btn-link { --bs-btn-color: #0072B1; --bs-btn-hover-color: #005a8c; }
.nav-pills { --bs-nav-pills-link-active-bg: #0072B1; }
.pagination {
    --bs-pagination-color: #0072B1;
    --bs-pagination-active-bg: #0072B1;
    --bs-pagination-active-border-color: #0072B1;
}
.list-group { --bs-list-group-active-bg: #0072B1; --bs-list-group-active-border-color: #0072B1; }
.list-group-item { padding: .25rem 1.25rem; background-color: rgb(248, 248, 248); border: 0; }
.dropdown-menu { --bs-dropdown-link-active-color: #2b2d2f; --bs-dropdown-link-active-bg: #e6e5e5; }
.dropdown-item.active { font-weight: 600; }
.color-def { color: white; background-color: #0072B1 !important; }
.modal-title { color: white; }
body { color: inherit; }

/* Layout and form conventions of the Clean UI template (Bootstrap 4) */
.row, .container, .container-fluid { --bs-gutter-x: 1.875rem; }
label { display: inline-block; margin-bottom: .5rem; }
.form-group { margin-bottom: 1rem; }
select.form-control:not([multiple]):not([size]) {
    padding-right: 2.25rem;
    appearance: none;
    background-image: var(--bs-form-select-bg-img, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23878ea0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"));
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
}
/* Diseño estándar de los modales (igual en el layout admin y en el de usuario) */
.modal-dialog { display: flex; align-items: center; min-height: calc(100% - var(--bs-modal-margin) * 2); }
/* hay modales con un <form> (u otro contenedor) entre .modal-dialog y .modal-content: debe ocupar todo el ancho */
.modal-dialog > * { width: 100%; }
.modal-content { border: 0; border-radius: 4px; overflow: hidden; box-shadow: 0 5px 20px rgba(0, 0, 0, .25); }
/* Encabezado: título (h4.modal-title) a la izquierda y X a la derecha, siempre blanca sobre el fondo del tema */
.modal-header { align-items: center; padding: 14px 20px; border-radius: 4px 4px 0 0; }
.modal-header .modal-title {
    margin: 0;
    min-width: 0;
    padding-right: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff !important;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.5;
}
.modal-header .btn-close {
    order: 1;
    flex-shrink: 0;
    margin: 0 0 0 auto;
    padding: .5rem;
    opacity: .85;
    filter: invert(1) grayscale(100%) brightness(200%);
}
.modal-header .btn-close:hover, .modal-header .btn-close:focus { opacity: 1; }
.modal-body { padding: 20px; }
.modal-footer { padding: 12px 20px; background-color: #f7f7f9; border-top: 1px solid #e5e5e5; border-radius: 0 0 4px 4px; }
.modal-footer .btn { margin: 2px 0 2px 8px !important; }
@media (max-width: 767px) {
    .modal-body { padding: 15px; }
    .modal-footer { padding: 10px 15px; }
}
.checkbox, .radio { position: relative; display: block; margin-bottom: .75rem; }
.checkbox label, .radio label { padding-left: 1.25rem; margin-bottom: 0; font-weight: 400; cursor: pointer; }
.checkbox label input:only-child, .radio label input:only-child { position: static; }
.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] {
    position: absolute;
    margin-top: .25rem;
    margin-left: -1.25rem;
}
/* Estándar de casillas y radios: mismo tamaño y color institucional (--color2 del tema) en todo el sistema.
   Los switch (role=switch) conservan el estilo de Bootstrap. */
input[type=checkbox]:not([role=switch]),
input[type=radio] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    vertical-align: -.2rem;
    background-color: var(--bs-body-bg, #fff);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    border: 2px solid #98a2b3;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
input[type=checkbox]:not([role=switch]) { border-radius: .3rem; }
input[type=radio] { border-radius: 50%; }
input[type=checkbox]:not([role=switch]):hover:not(:disabled),
input[type=radio]:hover:not(:disabled) { border-color: var(--color2, #0072B1); }
input[type=checkbox]:not([role=switch]):focus-visible,
input[type=radio]:focus-visible {
    outline: 0;
    border-color: var(--color2, #0072B1);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}
input[type=checkbox]:not([role=switch]):checked,
input[type=checkbox]:not([role=switch]):indeterminate,
input[type=radio]:checked {
    background-color: var(--color2, #0072B1);
    border-color: var(--color2, #0072B1);
}
input[type=checkbox]:not([role=switch]):checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
input[type=checkbox]:not([role=switch]):indeterminate {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}
input[type=radio]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
input[type=checkbox]:not([role=switch]):disabled,
input[type=radio]:disabled { opacity: .55; cursor: not-allowed; }
.checkbox + .checkbox, .radio + .radio { margin-top: -.25rem; }
.checkbox-inline, .radio-inline {
    position: relative;
    display: inline-block;
    padding-left: 1.25rem;
    margin-bottom: 0;
    font-weight: 400;
    vertical-align: middle;
    cursor: pointer;
}
.checkbox-inline + .checkbox-inline, .radio-inline + .radio-inline { margin-top: 0; margin-left: .75rem; }
/* Error state used by html5-form-validation (errorClass: 'has-danger') */
.has-danger .form-control { border-color: #d9534f; }
.has-danger .form-label, .has-danger .form-control-feedback { color: #d9534f; }
/* Icon on the left of modal titles */
.modal-title > i:first-child { margin-right: .5rem; }
/* Bootstrap 4 grid behaviour the template markup relies on:
   rows without direct columns are plain blocks, and columns placed outside a row float as before. */
.row:not(:has(> :is(.col, .col-auto, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
    [class*="col-sm-"], [class*="col-md-"], [class*="col-lg-"], [class*="col-xl-"], [class*="col-xxl-"]))) {
    display: block;
}
.row:not(:has(> :is(.col, .col-auto, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
    [class*="col-sm-"], [class*="col-md-"], [class*="col-lg-"], [class*="col-xl-"], [class*="col-xxl-"])))::after {
    content: "";
    display: table;
    clear: both;
}
.row:not(:has(> :is(.col, .col-auto, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
    [class*="col-sm-"], [class*="col-md-"], [class*="col-lg-"], [class*="col-xl-"], [class*="col-xxl-"]))) > * {
    width: auto;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    margin-top: 0;
}
:not(.row) > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
    [class*="col-sm-"], [class*="col-md-"], [class*="col-lg-"], [class*="col-xl-"], [class*="col-xxl-"]):not(.row, th, td, tr) {
    position: relative;
    min-height: 1px;
    padding-left: .9375rem;
    padding-right: .9375rem;
}
/* like Bootstrap 3/4, a column only floats from its breakpoint; below it is a full width block
   (Bootstrap 5 gives col-lg-* no width under 992px, so a floated one would shrink to its content) */
:not(.row) > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12):not(.row, th, td, tr) { float: left; }
@media (min-width: 576px) { :not(.row) > [class*="col-sm-"]:not(.row, th, td, tr) { float: left; } }
@media (min-width: 768px) { :not(.row) > [class*="col-md-"]:not(.row, th, td, tr) { float: left; } }
@media (min-width: 992px) { :not(.row) > [class*="col-lg-"]:not(.row, th, td, tr) { float: left; } }
@media (min-width: 1200px) { :not(.row) > [class*="col-xl-"]:not(.row, th, td, tr) { float: left; } }
@media (min-width: 1400px) { :not(.row) > [class*="col-xxl-"]:not(.row, th, td, tr) { float: left; } }
/* DataTables "processing" indicator: same white box in every table */
div.dt-container div.dt-processing {
    background-color: #fff;
    color: #212529;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .15);
}
/* DataTables inside .table-responsive: its CSS zeroes the row margins but only removes the column padding
   when the class attribute starts with "col-" ([class^=col-]); DataTables 2 renders "dt-layout-cell col-12...",
   so the padding remained as side margins */
div.table-responsive > div.dt-container > div.row > div[class*="col-"]:first-child { padding-left: 0; }
div.table-responsive > div.dt-container > div.row > div[class*="col-"]:last-child { padding-right: 0; }
/* Button standard: .btn-primary (main action), .btn-secondary (other actions), .btn-table (table options).
   Colors come from the institution theme; these are the fallbacks and the table button shape. */
.btn-table {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 .5rem;
    font-size: .875rem;
    line-height: 1;
    border-radius: .25rem;
    color: var(--bs-primary);
    background-color: transparent;
    border: 1px solid var(--bs-primary);
}
.btn-table:hover, .btn-table:focus { color: #fff; background-color: var(--bs-primary); }
.btn-table i { font-size: .9rem; }
.btn-table + .btn-table, .btn-table + span > .btn-table, span + .btn-table { margin-left: .25rem; }
/* Bootstrap 5 aligns table cells to the top; center them so text lines up with the .btn-table buttons */
.table > :not(caption) > * > * { vertical-align: middle; }
/* Neutral focus ring for the three button types (Bootstrap's default ring is blue) */
.btn-primary, .btn-secondary, .btn-table { --bs-btn-focus-shadow-rgb: 108, 117, 125; }
/* Summernote (bs5) toolbar and popovers: undo the template/theme .btn and .btn-sm styles */
.note-editor .note-toolbar,
.note-popover .popover-content {
    background-color: #f8f9fa;
}
.note-editor .note-toolbar .note-btn,
.note-popover .note-btn {
    color: #212529;
    background-color: #fff;
    border-color: #ced4da;
    padding: .25rem .5rem;
    margin: 0 !important;
    font-size: .875rem;
    line-height: 1.5;
}
.note-editor .note-toolbar .note-btn:hover,
.note-editor .note-toolbar .note-btn:focus,
.note-editor .note-toolbar .note-btn.active,
.note-popover .note-btn:hover,
.note-popover .note-btn:focus,
.note-popover .note-btn.active {
    color: #212529;
    background-color: #e9ecef;
    border-color: #adb5bd;
}
.note-editor .note-toolbar .note-btn-group {
    margin-top: .25rem;
    margin-right: .25rem;
}
/* Shaded hover/focus for the main button types: visible even with very dark institution colors */
.btn-primary:hover, .btn-primary:focus, .btn-secondary:hover, .btn-secondary:focus {
    box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .35);
}

/* Loader de carga (esqueleto): el brillo usa el color de la institución (--color2) y los bloques "masker"
   tapan con el fondo de la tarjeta (--surface-bg), de modo que solo se ven las líneas. Sin gris propio. */
body .background-masker { background: var(--surface-bg, #fff); }
@supports (background: color-mix(in srgb, red, blue)) {
    body .animated-background {
        background: linear-gradient(to right,
            color-mix(in srgb, var(--color2, #30bce1) 12%, var(--surface-bg, #fff)) 8%,
            color-mix(in srgb, var(--color2, #30bce1) 45%, var(--surface-bg, #fff)) 18%,
            color-mix(in srgb, var(--color2, #30bce1) 12%, var(--surface-bg, #fff)) 33%);
        background-size: 800px 104px;
    }
}

/* Loader de puntos (svg-icon "loading-text", pintado con el color 2 de la institución): tamaño por defecto */
.loader-dots { width: 40px; height: 40px; }