/*
 * bs5-compat.css
 * Cambio 026 - Capa de compatibilidad Bootstrap 4 → 5
 *
 * Reimplementa clases eliminadas de BS4 para mantener
 * paridad visual total sin modificar las vistas .cshtml.
 * Cargar DESPUÉS de bootstrap.css
 */

/* =====================================================
   label: BS4 _reboot daba display:inline-block + margin
   BS5 lo eliminó; restaurar para paridad visual
   ===================================================== */
label {
    display: inline-block;
    margin-bottom: .5rem;
}

/* =====================================================
   checkbox/radio borders: BS5 usa bordes muy tenues,
   BS4 usaba #adb5bd. Restaurar para paridad visual
   ===================================================== */
.form-check-input {
    border-color: #adb5bd;
}

input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
}


/* =====================================================
   table .columnYear: BS5 establece color en celdas via
   .table > :not(caption) > * > * con mayor especificidad,
   sobreescribe color:white del calendario OP
   ===================================================== */
.columnYear {
    color: white !important;
}

/* =====================================================
   btn-group-toggle: eliminado en BS5
   BS4 ocultaba los radio/checkbox inputs dentro de labels
   para crear botones toggle. Restaurar comportamiento.
   ===================================================== */
.btn-group-toggle > .btn input[type="radio"],
.btn-group-toggle > .btn input[type="checkbox"],
.btn-group-toggle > .btn-group > .btn input[type="radio"],
.btn-group-toggle > .btn-group > .btn input[type="checkbox"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

select.form-control,
select.form-control-sm,
select.form-control-lg {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
}

/* =====================================================
   hr: BS5 cambia opacity:0.25 y usa color:inherit +
   border-top con CSS variable. Restaurar estilo BS4:
   borde explícito gris, opacidad 1, ancho completo.
   ===================================================== */
hr {
    opacity: 1;
    color: inherit;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.row > hr {
    flex: 0 0 100%;
}

.row > p:empty {
    display: none;
}

/* =====================================================
   buttons inside .row: BS5 .row > * aplica width:100%
   a TODOS los hijos directos. En BS4 solo afectaba a .col.
   Restaurar ancho natural para botones sin wrapper .col-*
   ===================================================== */
.row > button,
.row > .btn {
    width: auto;
    flex: 0 0 auto;
}

/* =====================================================
   links: BS5 subraya todos los <a> por defecto.
   BS4 no lo hacía; solo subrayaba en :hover
   ===================================================== */
a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* =====================================================
   pagination-sm: BS4 tenía .pagination-sm .page-link con
   padding compacto (0.25rem 0.5rem) que sobreescribía el
   padding custom. BS5 eliminó esa regla (usa CSS vars),
   así que el padding custom (0.5rem 0.75rem) ahora gana
   y los números quedan con demasiado espacio.
   ===================================================== */
.pagination-sm .page-link {
    padding: 0.25rem 0.5rem;
}

/* =====================================================
   .container dentro del area de contenido: BS5 agrega
   breakpoint xxl (1320px) que centra el container en
   monitores anchos. Como el area de contenido ya está
   limitada por el sidebar, el container debe llenar el
   100% del espacio disponible.
   ===================================================== */
.page-body .container {
    max-width: 100%;
}

/* =====================================================
   form-group: eliminado en BS5
   BS4 proveía margin-bottom: 1rem
   ===================================================== */
.form-group {
    margin-bottom: 1rem;
}

/* =====================================================
   form-inline: eliminado en BS5
   Reimplementación fiel del comportamiento BS4
   ===================================================== */
.form-inline {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

.form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

.form-inline .form-control-plaintext {
    display: inline-block;
}

.form-inline .input-group,
.form-inline .custom-select {
    width: auto;
}

.form-inline .form-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding-left: 0;
}

.form-inline .form-check-input {
    position: relative;
    flex-shrink: 0;
    margin-top: 0;
    margin-right: 0.25rem;
    margin-left: 0;
}

.form-inline .form-group {
    display: flex;
    flex: 0 0 auto;
    flex-flow: row wrap;
    align-items: center;
    margin-bottom: 0;
}

.form-inline label {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}

/* =====================================================
   input-group: BS5 usa flex-wrap:wrap por defecto.
   Restaurar nowrap para que los controles no se vayan
   abajo. Los spans de validación dentro de input-group
   se sacan del flujo flex con position:absolute.
   ===================================================== */
.input-group {
    flex-wrap: nowrap;
}

.input-group > [data-valmsg-for] {
    position: absolute;
}

/* =====================================================
   input-group-append / input-group-prepend: eliminados en BS5
   BS5 aplana el input-group (hijos directos del input-group)
   ===================================================== */
/* =====================================================
   input-group-text: BS5 cambió el fondo de #e9ecef a
   #f8f9fa (casi blanco). Restaurar el gris plomo de BS4
   ===================================================== */
.input-group-text {
    background-color: #e9ecef;
}

.input-group-append,
.input-group-prepend {
    display: flex;
}

.input-group-prepend {
    margin-right: -1px;
}

.input-group-append {
    margin-left: -1px;
}

.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text {
    border-radius: 0;
}

.input-group > .input-group-prepend:first-child > .btn,
.input-group > .input-group-prepend:first-child > .input-group-text {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

.input-group > .input-group-append:last-child > .btn,
.input-group > .input-group-append:last-child > .input-group-text {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

/* =====================================================
   input-group-sm/lg + prepend/append: BS5 solo aplica
   tamaño sm/lg a hijos directos de .input-group-sm/lg.
   Como .input-group-text está dentro de .input-group-prepend
   (no es hijo directo), no recibe el tamaño. Restaurar.
   ===================================================== */
.input-group-sm > .input-group-prepend > .input-group-text,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-append > .btn {
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
}

.input-group-lg > .input-group-prepend > .input-group-text,
.input-group-lg > .input-group-append > .input-group-text,
.input-group-lg > .input-group-prepend > .btn,
.input-group-lg > .input-group-append > .btn {
    padding: .5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
}

/* =====================================================
   input-group-sm > .btn: BS5 agrega border-radius:0.25rem
   a botones directos dentro de input-group-sm.
   BS4 solo afectaba botones dentro de prepend/append.
   Restaurar el border-radius pill del custom button.css
   ===================================================== */
.input-group-sm > .btn {
    border-radius: 0.9rem;
}

/* =====================================================
   datepicker dentro de input-group: el input tiene w-40px-fixed
   que es demasiado estrecho para mostrar la fecha completa.
   Dejar que crezca con flex dentro del contenedor.
   ===================================================== */
.input-group .datepicker.w-40px-fixed {
    width: auto !important;
    max-width: none !important;
    flex: 1 1 auto;
}

/* =====================================================
   custom-file: eliminado en BS5
   BS5 usa <input class="form-control" type="file"> directamente
   ===================================================== */
.custom-file {
    position: relative;
    display: inline-block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    margin-bottom: 0;
}

.custom-file-input {
    position: relative;
    z-index: 2;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    margin: 0;
    overflow: hidden;
    opacity: 0;
}

.custom-file-input:focus ~ .custom-file-label {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.custom-file-label {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    overflow: hidden;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.custom-file-label::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    height: calc(1.5em + 0.75rem);
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
    color: #495057;
    content: "Seleccionar";
    background-color: #e9ecef;
    border-left: inherit;
    border-radius: 0 0.25rem 0.25rem 0;
}

/* =====================================================
   custom-select: eliminado en BS5 (reemplazado por form-select)
   ===================================================== */
.custom-select {
    display: inline-block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 1.75rem 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    vertical-align: middle;
    background: #fff url("data:image/svg+xml,%3csvg xmlns='https://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    appearance: none;
}

.custom-select:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.custom-select-sm {
    height: calc(1.5em + 0.5rem + 2px);
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.5rem;
    font-size: 0.875rem;
}

.custom-select-lg {
    height: calc(1.5em + 1rem + 2px);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    font-size: 1.25rem;
}

/* =====================================================
   custom-control / custom-checkbox / custom-radio:
   eliminados en BS5 (reemplazados por form-check)
   ===================================================== */
.custom-control {
    position: relative;
    z-index: 1;
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5rem;
    print-color-adjust: exact;
}

.custom-control-input {
    position: absolute;
    left: 0;
    z-index: -1;
    width: 1rem;
    height: 1.25rem;
    opacity: 0;
}

.custom-control-label {
    position: relative;
    margin-bottom: 0;
    vertical-align: top;
}

/* =====================================================
   form-row: eliminado en BS5 (reemplazado por row + gutter utilities)
   ===================================================== */
.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}

.form-row > .col,
.form-row > [class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
}

/* =====================================================
   Spacing utilities BS4 (left/right → start/end)
   Estas aliases permiten que las clases BS4 sigan funcionando
   ===================================================== */
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 0.25rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }

.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }

.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }
.ml-auto { margin-left: auto !important; }

.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }
.mr-auto { margin-right: auto !important; }

/* =====================================================
   Text/Float alignment BS4 (left/right → start/end)
   ===================================================== */
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.float-left { float: left !important; }
.float-right { float: right !important; }

/* =====================================================
   font-weight utilities renombradas en BS5
   ===================================================== */
.font-weight-bold { font-weight: 700 !important; }
.font-weight-bolder { font-weight: bolder !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-light { font-weight: 300 !important; }
.font-weight-lighter { font-weight: lighter !important; }
.font-italic { font-style: italic !important; }

/* =====================================================
   badge-* renombrado a bg-* en BS5
   ===================================================== */
.badge-primary { background-color: #007bff !important; }
.badge-secondary { background-color: #6c757d !important; }
.badge-success { background-color: #28a745 !important; }
.badge-danger { background-color: #dc3545 !important; }
.badge-warning { background-color: #ffc107 !important; color: #212529 !important; }
.badge-info { background-color: #17a2b8 !important; }
.badge-light { background-color: #f8f9fa !important; color: #212529 !important; }
.badge-dark { background-color: #343a40 !important; }

/* =====================================================
   Otros utilitarios BS4 eliminados/renombrados
   ===================================================== */
.text-monospace { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; }
.rounded-left { border-top-left-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; }
.rounded-right { border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; }
.border-left { border-left: 1px solid #dee2e6 !important; }
.border-right { border-right: 1px solid #dee2e6 !important; }
.no-gutters { margin-right: 0; margin-left: 0; }
.no-gutters > .col, .no-gutters > [class*="col-"] { padding-right: 0; padding-left: 0; }

/* =====================================================
   media object: eliminado en BS5
   ===================================================== */
.media {
    display: flex;
    align-items: flex-start;
}

.media-body {
    flex: 1;
}

/* =====================================================
   Responsive spacing BS4 (breakpoints)
   Solo los más comunes usados en el proyecto
   ===================================================== */
@media (min-width: 576px) {
    .pl-sm-0 { padding-left: 0 !important; }
    .pr-sm-0 { padding-right: 0 !important; }
    .ml-sm-auto { margin-left: auto !important; }
    .mr-sm-auto { margin-right: auto !important; }
    .text-sm-left { text-align: left !important; }
    .text-sm-right { text-align: right !important; }
}

@media (min-width: 768px) {
    .pl-md-0 { padding-left: 0 !important; }
    .pl-md-2 { padding-left: 0.5rem !important; }
    .pl-md-3 { padding-left: 1rem !important; }
    .pl-md-4 { padding-left: 1.5rem !important; }
    .pr-md-0 { padding-right: 0 !important; }
    .pr-md-2 { padding-right: 0.5rem !important; }
    .pr-md-3 { padding-right: 1rem !important; }
    .pr-md-4 { padding-right: 1.5rem !important; }
    .ml-md-auto { margin-left: auto !important; }
    .mr-md-0 { margin-right: 0 !important; }
    .text-md-left { text-align: left !important; }
    .text-md-right { text-align: right !important; }
    .float-md-left { float: left !important; }
    .float-md-right { float: right !important; }
}

@media (min-width: 992px) {
    .pl-lg-0 { padding-left: 0 !important; }
    .pr-lg-0 { padding-right: 0 !important; }
    .ml-lg-auto { margin-left: auto !important; }
    .text-lg-left { text-align: left !important; }
    .text-lg-right { text-align: right !important; }
    .float-lg-left { float: left !important; }
    .float-lg-right { float: right !important; }
}

@media (min-width: 1200px) {
    .pl-xl-0 { padding-left: 0 !important; }
    .pr-xl-0 { padding-right: 0 !important; }
    .ml-xl-auto { margin-left: auto !important; }
    .text-xl-left { text-align: left !important; }
    .text-xl-right { text-align: right !important; }
}

/* =====================================================
   close button: BS5 cambia la estructura
   BS4: <button class="close" data-dismiss="modal">&times;</button>
   BS5: <button class="btn-close" data-bs-dismiss="modal"></button>
   Mantener compatibilidad con la clase .close de BS4
   ===================================================== */
.comunicado-container {
    position: relative;
}
button.close {
    float: right;
    padding: 0;
    background-color: transparent;
    border: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: 0.5;
    appearance: none;
}

button.close:hover {
    color: #000;
    text-decoration: none;
    opacity: 0.75;
}

.modal-header > button.close,
.modal-header > .close {
    float: right;
}

/* =====================================================
   PDF tickets (#imprimir-pdf de _LayoutPdf.cshtml):
   - BS5 usa CSS vars en .border que pueden no resolver
     en renderizadores PDF antiguos (wkhtmltopdf/WebKit).
   - Normalizar font-family a Arial para paridad con
     el ticket Afiliado que lo define inline.
   - Neutralizar box-shadow inset de BS5 en tablas PDF.
   ===================================================== */
#imprimir-pdf {
    font-family: Arial, sans-serif;
}

#imprimir-pdf table {
    font-family: Arial, sans-serif;
}

#imprimir-pdf h3 {
    font-size: 1.6rem;
    text-align: center;
    padding-right: 50px;
}

#imprimir-pdf h4,
#imprimir-pdf h5 {
    font-size: 1.3rem;
    text-align: center;
    padding-right: 50px;
}

#imprimir-pdf > .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

#imprimir-pdf > .container > .container {
    width: auto;
    max-width: 100%;
}

#imprimir-pdf .border {
    border: 1px solid #212121 !important;
}

#imprimir-pdf .table > :not(caption) > * > * {
    box-shadow: none;
}

/* BS5 reboot pone border-width:0 en td/th, matando tablas con border="1" HTML */
table[border]:not([border="0"]) td,
table[border]:not([border="0"]) th {
    border-width: 1px;
    border-style: solid;
}

/* font-size solo para tickets (contenedor .container.border), no comprobantes */
#imprimir-pdf > .container > .container.border {
    font-size: 14px;
}