/*
 * bootstrap3-compat.css
 *
 * Capa de compatibilidad para el MARKUP LEGADO propio del sitio (escrito a mano en los
 * .aspx/.master con clases de Bootstrap 3) despues de migrar el framework a Bootstrap 5.3.x.
 *
 * DevExpress 24.2 con Web.config <bootstrap mode="Bootstrap5" /> emite markup Bootstrap 5
 * nativo (layout correcto). La seccion 6 es una CAPA DE TEMA: devuelve a ese markup las
 * metricas (34px) y la paleta de Bootstrap 3 usando las variables CSS de BS5 y los
 * selectores propios de DevExpress (.dxbs-*), sin tocar el layout de .input-group.
 *
 * Se carga SIEMPRE despues de bootstrap.min.css y antes de los CSS propios del sitio.
 * Alcance: solo clases que BS5 elimino o cambio y que el markup propio sigue usando.
 */

/* ============================================================
   1. REJILLA
   ============================================================ */

/* BS5 usa gutters de 24px (12px por columna); BS3 usaba 30px (15px por columna).
   Se conserva la medida anterior para que el espaciado de las pantallas no cambie. */
.row,
.container,
.container-fluid,
.container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
    --bs-gutter-x: 30px;
}

/* En BS3 las columnas .col-* traian position:relative (ancla para hijos con
   position:absolute). BS5 lo elimino y descoloca elementos posicionados dentro
   de columnas, p.ej. los iconos de las tarjetas del menu (MenuV.css). */
[class^="col-"], [class*=" col-"] {
    position: relative;
}

/* En BS3 las columnas .col-* FLOTABAN, por lo que se alineaban en fila aunque no
   estuvieran dentro de un .row. En BS5 son flex-items y se apilan si el padre no es
   flex; mucho markup del sitio pone columnas sueltas (p.ej. dentro de .panel-body).
   Se restaura el float SOLO fuera de .row, para no alterar las filas flex de BS5.
   Se acota a cada breakpoint porque debajo de el la columna debe ocupar el ancho total. */
@media (min-width: 576px) { :not(.row) > [class*="col-sm-"] { float: left; } }
@media (min-width: 768px) { :not(.row) > [class*="col-md-"] { float: left; } }
@media (min-width: 992px) { :not(.row) > [class*="col-lg-"] { float: left; } }
@media (min-width: 1200px) { :not(.row) > [class*="col-xl-"] { float: left; } }

/* BS5 movio el padding (gutter) de las columnas desde la clase .col-* hacia `.row > *`.
   En BS3 el padding de 15px estaba en la propia clase, asi que una columna fuera de un
   .row conservaba su separacion. Sin esto las tarjetas del menu y los campos sueltos
   quedan pegados y los elementos con position:absolute dentro de ellos se descuadran. */
:not(.row) > [class^="col-"],
:not(.row) > [class*=" col-"] {
    padding-right: 15px;
    padding-left: 15px;
}

/* Al flotar columnas fuera de .row, su contenedor debe cerrar los floats (en BS3 lo hacia
   el clearfix de .row). Cualquier padre con columnas hijas que no sea .row se auto-cierra:
   cubre <div class=""> usados como fila, columnas anidadas en columnas, .panel-body, etc. */
:not(.row):has(> [class^="col-"], > [class*=" col-"])::after {
    content: "";
    display: table;
    clear: both;
}

/* Las filas .row de BS5 son contenedores flex (BFC): si quedan junto a un float abierto se
   encogen a un costado en vez de bajar. En BS3 la fila era un bloque normal y bajaba. */
.row { clear: both; }

/* Contenedores que en BS3 llevaban clearfix y que ahora pueden alojar columnas flotadas */
.panel-body::after,
.modal-footer::after,
.tab-content::after,
.navbar-header::after {
    content: "";
    display: table;
    clear: both;
}

/* BS3 aplicaba clearfix a contenedores y filas (layout basado en floats) */
.container::after,
.container-fluid::after,
.row::after {
    content: "";
    display: table;
    clear: both;
}

/* ============================================================
   2. TIPOGRAFIA
   ============================================================ */

/* BS5 hace los encabezados responsivos (RFS) y mas grandes: h4 pasa de 18px a ~21px,
   lo que descuadra los titulos de las tarjetas del menu y las cabeceras del sitio.
   Se restauran los tamanos fijos de BS3. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }

h1, h2, h3, .h1, .h2, .h3 { margin-top: 20px; margin-bottom: 10px; }
h4, h5, h6, .h4, .h5, .h6 { margin-top: 10px; margin-bottom: 10px; }

/* BS5 deja 1rem (16px) de margen inferior en los parrafos; BS3 dejaba 10px */
p { margin: 0 0 10px; }

/* BS5 pinta los <hr> con opacity .25 y borde currentColor; BS3 usaba un borde solido */
hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
    opacity: 1;
}

/* Enlaces con el comportamiento de BS3 (BS5 los subraya por defecto) */
a { text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

/* ============================================================
   3. NAVBAR PROPIO DEL SITIO (#navbar en Site.master, SiteLite.master y WGNRDINA)
   ------------------------------------------------------------
   BS5 convirtio .navbar y su contenedor en flex con justify-content:space-between,
   pero este navbar se maqueta con floats (common.css: .nav-button, .logo, .pull-right).
   Se acota a #navbar para no afectar navbars que renderice DevExpress.
   ============================================================ */

#navbar.navbar {
    /* OJO: no fijar aqui `position`. Este selector tiene mas especificidad que
       .navbar-fixed-top y le anularia el position:fixed, dejando el navbar en el flujo
       y un hueco vacio arriba. El posicionamiento lo define .navbar-fixed-top. */
    display: block;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
}

#navbar > .container,
#navbar > .container-fluid {
    display: block;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
}

#navbar::after,
#navbar > .container::after,
#navbar > .container-fluid::after,
#navbar .nav::after {
    content: "";
    display: table;
    clear: both;
}

/* .navbar-fixed-top no existe en BS5 (se renombro a .fixed-top) */
.navbar-fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    border-width: 0 0 1px;
}

/* En BS5 .nav es flex; el navbar del sitio espera el comportamiento de bloque de BS3 */
#navbar .nav {
    display: block;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}

#navbar .nav > li { position: relative; display: block; }
#navbar .nav-pills > li { float: left; }

/* .nav-stacked no existe en BS5 (lo usa el menu lateral heredado) */
.nav-stacked > li { float: none; width: 100%; }

/* ============================================================
   4. UTILIDADES BS3 ELIMINADAS EN BS5
   ============================================================ */

.pull-right { float: right !important; }
.pull-left { float: left !important; }
.center-block { display: block; margin-right: auto; margin-left: auto; }
.hidden { display: none !important; }
.img-responsive { display: block; max-width: 100%; height: auto; }

@media (max-width: 767px) {
    .hidden-xs { display: none !important; }
}

/* Estados legados de JS (BS3 usaba .in, BS5 usa .show) */
.fade.in { opacity: 1; }
.collapse.in { display: block; }

/* ============================================================
   5. COMPONENTES BS3 QUE BS5 ELIMINO
   (los usa el markup propio: WWMBARDB, WWMSCABR, WEOBENCO, WEOVENTA, modales, SideBar)
   ============================================================ */

/* Paneles / acordeon (BS5 los reemplazo por cards) */
.panel { margin-bottom: 20px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 1px 1px rgba(0,0,0,.05); }
.panel-default { border-color: #ddd; }
.panel-heading { padding: 10px 15px; background-color: #f5f5f5; border-bottom: 1px solid #ddd; border-radius: 3px 3px 0 0; }
.panel-title { margin: 0; font-size: 16px; }
.panel-title > a { color: inherit; text-decoration: none; display: block; }
.panel-body { padding: 15px; }
.panel-group .panel { margin-bottom: 0; }
.panel-group .panel + .panel { margin-top: 5px; }

/* Alerts. En BS3 .alert-info/.alert-success/... pintaban fondo, borde y color por si solas;
   en BS5 solo definen variables y el fondo lo aplica .alert, asi que un div con class='alert-info'
   (WEOVENTA/WEOBENCO: tarjeta de la encomienda) queda sin color. Se restaura la paleta BS3 y se
   hace autosuficiente la variante cuando no va acompanada de .alert. */
.alert { padding: 15px; margin-bottom: 20px; border-radius: 4px; }

.alert-success:not(.alert),
.alert-info:not(.alert),
.alert-warning:not(.alert),
.alert-danger:not(.alert) {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-success { background-color: #dff0d8; border-color: #d6e9c6; color: #3c763d; --bs-alert-bg:#dff0d8; --bs-alert-border-color:#d6e9c6; --bs-alert-color:#3c763d; --bs-alert-link-color:#2b542c; }
.alert-info    { background-color: #d9edf7; border-color: #bce8f1; color: #31708f; --bs-alert-bg:#d9edf7; --bs-alert-border-color:#bce8f1; --bs-alert-color:#31708f; --bs-alert-link-color:#245269; }
.alert-warning { background-color: #fcf8e3; border-color: #faebcc; color: #8a6d3b; --bs-alert-bg:#fcf8e3; --bs-alert-border-color:#faebcc; --bs-alert-color:#8a6d3b; --bs-alert-link-color:#66512c; }
.alert-danger  { background-color: #f2dede; border-color: #ebccd1; color: #a94442; --bs-alert-bg:#f2dede; --bs-alert-border-color:#ebccd1; --bs-alert-color:#a94442; --bs-alert-link-color:#843534; }

/* BS3: los encabezados dentro de un alert heredan su color */
.alert h4, .alert-info h4, .alert-success h4, .alert-warning h4, .alert-danger h4 { margin-top: 0; color: inherit; }

/* .btn-default desaparecio en BS5 (se usa en WEOBENCO y WEOVENTA) */
.btn-default { color: #333; background-color: #fff; border: 1px solid #ccc; }
.btn-default:hover, .btn-default:focus, .btn-default:active { color: #333; background-color: #e6e6e6; border-color: #adadad; }

/* .btn-block desaparecio en BS5 */
.btn-block { display: block; width: 100%; }

/* .modal-dialog insertado por Master.js (NormalizarModalesBS5) en los modales con markup BS3.
   En BS3 el .modal-content llenaba el .modal (la pagina dimensiona el .modal con estilos inline);
   se anula el max-width:500px y los margenes que BS5 da al dialog. */
.modal .modal-dialog-legacy {
    width: 100%;
    max-width: none;
    margin: 0;
    pointer-events: auto;
}

/* Geometria del .modal en BS3: top/right/bottom/left:0 SIN width/height fijos. BS5 pone
   width/height:100% y omite right/bottom, con lo que los estilos inline de las paginas
   (top:50% + translate(-50%), width:50%, margin:auto) recortan o descentran la caja. */
.modal:has(> .modal-dialog-legacy) {
    right: 0;
    bottom: 0;
    height: auto;
}

/* Header/footer/body de los modales legacy con el modelo de caja de BS3 (bloque, no flex):
   el footer de BS5 es flex con justify-content:flex-end y encoge/alinea a la derecha lo que
   contenga (p.ej. la tabla de detalle de WEOMOVPQ); el header de BS3 usaba .close flotado. */
.modal-dialog-legacy .modal-header {
    display: block;
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
}
.modal-dialog-legacy .modal-header::after { content: ""; display: table; clear: both; }
.modal-dialog-legacy .modal-title { margin: 0; line-height: 1.42857143; }
.modal-dialog-legacy .modal-body { position: relative; padding: 15px; }
.modal-dialog-legacy .modal-footer {
    display: block;
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
}
.modal-dialog-legacy .modal-footer > * { margin: 0; }
.modal-dialog-legacy .modal-footer .table-responsive,
.modal-dialog-legacy .modal-footer .table { width: 100%; text-align: left; }

/* Boton de cierre de los modales propios (BS5 lo renombro a .btn-close) */
.close { float: right; padding: 0; margin-left: auto; font-size: 21px; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; background: transparent; border: 0; opacity: .4; cursor: pointer; }
.close:hover, .close:focus { opacity: .7; }

/* Labels BS3 (BS5 los reemplazo por badges) */
.label { display: inline; padding: .2em .6em .3em; font-size: 75%; font-weight: 700; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25em; }
.label-default { background-color: #777; }
.label-primary { background-color: #337ab7; }
.label-success { background-color: #5cb85c; }
.label-info { background-color: #5bc0de; }
.label-warning { background-color: #f0ad4e; }
.label-danger { background-color: #d9534f; }

.caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px dashed; border-right: 4px solid transparent; border-left: 4px solid transparent; }

/* Glyphicons: BS5 no incluye iconos; solo se repone el que usa SideBar.ascx */
.glyphicon { position: relative; display: inline-block; font-style: normal; font-weight: 400; line-height: 1; }
.glyphicon-refresh:before { content: "\21BB"; }

/* ============================================================
   6. CAPA DE TEMA: METRICAS Y PALETA DE BS3 SOBRE EL MARKUP BS5
   (afecta a los editores/botones DevExpress y a los .btn del markup propio)
   ============================================================ */

/* Controles de formulario: BS5 = 38px (padding .375rem, font 1rem); BS3 = 34px */
.form-control,
.form-select {
    min-height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
}
textarea.form-control { height: auto; min-height: 0; }
.form-control-lg, .form-select-lg { min-height: 46px; padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px; }
.form-control-sm, .form-select-sm { min-height: 30px; padding: 5px 10px;  font-size: 12px; line-height: 1.5;       border-radius: 3px; }
/* BS5 dejo de pintar gris los campos de solo lectura */
.form-control[readonly] { background-color: #eee; opacity: 1; }

/* Etiquetas: BS5 usa .col-form-label con padding vertical de ~7px en los editores DX,
   lo que baja las etiquetas y los campos respecto a los ASPx clasicos. BS3 (caption Top)
   era un label plano con margin-bottom 5px y negrita. */
label { margin-bottom: 5px; font-weight: 700; }
.dxbs-textbox .col-form-label,
.dxbs-memo .col-form-label,
.dxbs-button-edit .col-form-label,
.dxbs-spin-edit .col-form-label,
.dxbs-dropdown-edit .col-form-label,
.dxbs-combobox .col-form-label,
.dxbs-date-edit .col-form-label {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 5px;
    line-height: 1.42857143;
}

/* Botones: metricas BS3 (los -lg/-sm se ajustan para que casen con los inputs) */
.btn {
    --bs-btn-padding-y: 6px;
    --bs-btn-padding-x: 12px;
    --bs-btn-font-size: 14px;
    --bs-btn-line-height: 1.42857143;
    --bs-btn-border-radius: 4px;
}
.btn-lg { --bs-btn-padding-y: 10px; --bs-btn-padding-x: 16px; --bs-btn-font-size: 18px; --bs-btn-line-height: 1.3333333; --bs-btn-border-radius: 6px; }
.btn-sm { --bs-btn-padding-y: 5px;  --bs-btn-padding-x: 10px; --bs-btn-font-size: 12px; --bs-btn-line-height: 1.5;       --bs-btn-border-radius: 3px; }

/* Paleta BS3 (btn-dark no existia en BS3: se conserva el de BS5) */
.btn-primary { --bs-btn-bg:#337ab7; --bs-btn-border-color:#2e6da4; --bs-btn-hover-bg:#286090; --bs-btn-hover-border-color:#204d74; --bs-btn-active-bg:#204d74; --bs-btn-active-border-color:#122b40; --bs-btn-focus-shadow-rgb:82,140,196; }
.btn-success { --bs-btn-bg:#5cb85c; --bs-btn-border-color:#4cae4c; --bs-btn-hover-bg:#449d44; --bs-btn-hover-border-color:#398439; --bs-btn-active-bg:#398439; --bs-btn-active-border-color:#255625; --bs-btn-focus-shadow-rgb:116,195,116; }
.btn-info    { --bs-btn-color:#fff; --bs-btn-bg:#5bc0de; --bs-btn-border-color:#46b8da; --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#31b0d5; --bs-btn-hover-border-color:#269abc; --bs-btn-active-color:#fff; --bs-btn-active-bg:#269abc; --bs-btn-active-border-color:#1b6d85; --bs-btn-focus-shadow-rgb:116,201,228; }
.btn-warning { --bs-btn-color:#fff; --bs-btn-bg:#f0ad4e; --bs-btn-border-color:#eea236; --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#ec971f; --bs-btn-hover-border-color:#d58512; --bs-btn-active-color:#fff; --bs-btn-active-bg:#d58512; --bs-btn-active-border-color:#985f0d; --bs-btn-focus-shadow-rgb:242,185,105; }
.btn-danger  { --bs-btn-bg:#d9534f; --bs-btn-border-color:#d43f3a; --bs-btn-hover-bg:#c9302c; --bs-btn-hover-border-color:#ac2925; --bs-btn-active-bg:#ac2925; --bs-btn-active-border-color:#761c19; --bs-btn-focus-shadow-rgb:223,109,105; }

/* Botones internos de los editores DX (desplegable del combo, spin +/-): en BS3 eran
   btn-default claros; en BS5 DX los pinta btn-secondary gris oscuro. */
.dxbs-edit-btn.btn,
.dxbs-edit-btn.btn-secondary,
.dxbs-edit-btn.btn-outline-secondary {
    --bs-btn-color:#333; --bs-btn-bg:#fff; --bs-btn-border-color:#ccc;
    --bs-btn-hover-color:#333; --bs-btn-hover-bg:#e6e6e6; --bs-btn-hover-border-color:#adadad;
    --bs-btn-active-color:#333; --bs-btn-active-bg:#e6e6e6; --bs-btn-active-border-color:#adadad;
}