/* ==========================================================
   Bootstrap 3 → Bootstrap 5 compatibility layer
   Agrega clases B3 que el tema usa, sin tocar los templates.
   Solo requiere cambiar data-toggle → data-bs-toggle en HTML
   (eso CSS no puede resolverlo).
   ========================================================== */

/* ----------------------------------------------------------
   GRID — col-xs-* (las más usadas en el tema: 1,2,3,4,6,8,9,10,11,12)
   Se apoyan en el .row flex de Bootstrap 5
   ---------------------------------------------------------- */
.col-xs-1  { flex: 0 0 auto; width: 8.33333333%;  max-width: 8.33333333%; }
.col-xs-2  { flex: 0 0 auto; width: 16.66666667%; max-width: 16.66666667%; }
.col-xs-3  { flex: 0 0 auto; width: 25%;          max-width: 25%; }
.col-xs-4  { flex: 0 0 auto; width: 33.33333333%; max-width: 33.33333333%; }
.col-xs-5  { flex: 0 0 auto; width: 41.66666667%; max-width: 41.66666667%; }
.col-xs-6  { flex: 0 0 auto; width: 50%;          max-width: 50%; }
.col-xs-7  { flex: 0 0 auto; width: 58.33333333%; max-width: 58.33333333%; }
.col-xs-8  { flex: 0 0 auto; width: 66.66666667%; max-width: 66.66666667%; }
.col-xs-9  { flex: 0 0 auto; width: 75%;          max-width: 75%; }
.col-xs-10 { flex: 0 0 auto; width: 83.33333333%; max-width: 83.33333333%; }
.col-xs-11 { flex: 0 0 auto; width: 91.66666667%; max-width: 91.66666667%; }
.col-xs-12 { flex: 0 0 auto; width: 100%;         max-width: 100%; }

/* Offsets usados en el tema */
@media (min-width: 576px) {
  .col-sm-offset-1 { margin-left: 8.33333333%; }
  .col-sm-offset-3 { margin-left: 25%; }
}
@media (min-width: 768px) {
  .col-md-offset-2 { margin-left: 16.66666667%; }
  .col-md-offset-4 { margin-left: 33.33333333%; }
  .col-md-offset-7 { margin-left: 58.33333333%; }
}

/* ----------------------------------------------------------
   VISIBILIDAD — hidden-* / visible-*
   ---------------------------------------------------------- */

/* hidden-xs: oculto en xs, visible desde sm */
.hidden-xs { display: none !important; }
@media (min-width: 768px) {
  .hidden-xs { display: block !important; }
}

/* hidden-sm: visible en xs y md+, oculto en sm */
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm { display: none !important; }
}

/* hidden-md: oculto en md */
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md { display: none !important; }
}

/* hidden-lg: oculto en lg+ */
@media (min-width: 1200px) {
  .hidden-lg { display: none !important; }
}

/* visible-xs: visible solo en xs */
.visible-xs { display: none !important; }
@media (max-width: 767px) {
  .visible-xs { display: block !important; }
}

/* visible-sm: visible solo en sm */
.visible-sm { display: none !important; }
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm { display: block !important; }
}

/* visible-md: visible solo en md */
.visible-md { display: none !important; }
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md { display: block !important; }
}

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

/* ----------------------------------------------------------
   FORMULARIOS — validación B3
   ---------------------------------------------------------- */
.has-error .form-control         { border-color: #a94442; box-shadow: inset 0 1px 1px rgba(0,0,0,.075); }
.has-error .control-label,
.has-error .help-block,
.has-error .radio,
.has-error .checkbox            { color: #a94442; }
.help-block                      { display: block; margin-top: 5px; margin-bottom: 10px; color: #737373; font-size: 12px; }

/* ----------------------------------------------------------
   WELL (componente removido en B5)
   ---------------------------------------------------------- */
.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}
.well-sm { padding: 9px; border-radius: 3px; }
.well-lg { padding: 24px; border-radius: 6px; }

/* ----------------------------------------------------------
   PANELS (removidos en B5, reemplazados por .card)
   ---------------------------------------------------------- */
.panel         { margin-bottom: 20px; background-color: #fff; border: 1px solid transparent; border-radius: 4px; box-shadow: 0 1px 1px rgba(0,0,0,.05); }
.panel-body    { padding: 15px; }
.panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-radius: 3px 3px 0 0; }
.panel-footer  { padding: 10px 15px; background-color: #f5f5f5; border-top: 1px solid #ddd; border-radius: 0 0 3px 3px; }
.panel-title   { margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit; }
.panel-group   { margin-bottom: 20px; }
.panel-group .panel { margin-bottom: 0; border-radius: 4px; }
.panel-group .panel + .panel { margin-top: 5px; }
.panel-default > .panel-heading { color: #333; background-color: #f5f5f5; border-color: #ddd; }
.panel-info    > .panel-heading { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; }
.panel-info    { border-color: #bce8f1; }
.panel-collapse { border: 0; }

/* ----------------------------------------------------------
   NAVBAR B3 — estructura y estilos sin romper B5
   ---------------------------------------------------------- */

/* Hace que la navbar-collapse sea visible en desktop sin navbar-expand-* */
@media (min-width: 768px) {
  .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
    align-items: center;
  }
  .navbar-collapse.collapse {
    display: flex !important;
  }
}

/* navbar-header: wrapper brand + toggler en mobile */
.navbar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
@media (min-width: 768px) {
  .navbar-header {
    width: auto;
    float: left;
  }
}

/* navbar-default → colores base (override con var del tema) */
.navbar-default {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}
.navbar-default .navbar-nav > li > a {
  color: #777;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .show > a,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .show > a:focus,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .show > a:hover {
  color: #555;
  background-color: #e7e7e7;
}

/* navbar-right → alinea a la derecha */
@media (min-width: 768px) {
  .navbar-right { margin-left: auto; }
}

/* navbar-toggle / navbar-toggler — mantiene ambas clases */
.navbar-toggle,
.navbar-toggler {
  padding: 9px 10px;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}
.navbar-toggle .icon-bar,
.navbar-toggler .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background-color: #888;
}
.navbar-toggle .icon-bar + .icon-bar,
.navbar-toggler .icon-bar + .icon-bar {
  margin-top: 4px;
}
@media (min-width: 768px) {
  .navbar-toggle,
  .navbar-toggler {
    display: none;
  }
}

/* .open → equivalente a .show de B5 para dropdowns */
.open > .dropdown-menu { display: block; }
.open > a { outline: 0; }

/* ----------------------------------------------------------
   FORMULARIOS B3 — form-group, input-group, form-control
   ---------------------------------------------------------- */
.form-group { margin-bottom: 15px; }
.form-control {
  display: block; width: 100%; height: 34px; padding: 6px 12px;
  font-size: 14px; line-height: 1.42857143; color: #555;
  background-color: #fff; background-image: none;
  border: 1px solid #ccc; border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
  border-color: #66afe9; outline: 0;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}
.form-inline .form-control { display: inline-block; width: auto; vertical-align: middle; }

.input-group { position: relative; display: flex; align-items: stretch; width: 100%; }
.input-group .form-control { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group-addon, .input-group-btn {
  display: flex; align-items: center; padding: 6px 12px;
  font-size: 14px; font-weight: 400; line-height: 1; color: #555;
  text-align: center; white-space: nowrap;
  background-color: #eee; border: 1px solid #ccc; border-radius: 4px;
}
.input-group-addon:first-child, .input-group-btn:first-child > .btn { border-right: 0; border-radius: 4px 0 0 4px; }
.input-group-addon:last-child,  .input-group-btn:last-child  > .btn { border-left:  0; border-radius: 0 4px 4px 0; }
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn { height: 46px; padding: 10px 16px; font-size: 18px; border-radius: 6px; }

/* ----------------------------------------------------------
   BOTONES B3 — btn-xs, btn-sm, btn-lg, btn-group
   ---------------------------------------------------------- */
.btn-xs { padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px; }
.btn-sm { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; }
.btn-lg { padding: 10px 16px; font-size: 18px; line-height: 1.33333; border-radius: 6px; }
.btn-group { position: relative; display: inline-flex; vertical-align: middle; }
.btn-group > .btn { position: relative; flex: 1 1 auto; }
.btn-group > .btn:not(:first-child) { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.btn-group > .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-block { display: block; width: 100%; }
.btn-block + .btn-block { margin-top: 5px; }

/* ----------------------------------------------------------
   ALERTS B3 — alert-*, alert-dismissible, close
   ---------------------------------------------------------- */
.alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; }
.alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; }
.alert-info    { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; }
.alert-warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; }
.alert-danger  { color: #a94442; background-color: #f2dede; border-color: #ebccd1; }
.alert-dismissible { padding-right: 35px; }
.alert-dismissible .close { position: relative; top: -2px; right: -21px; color: inherit; }
.close {
  float: right; font-size: 21px; font-weight: 700; line-height: 1;
  color: #000; text-shadow: 0 1px 0 #fff; opacity: .2;
  background: transparent; border: 0; cursor: pointer; padding: 0;
}
.close:hover, .close:focus { color: #000; text-decoration: none; opacity: .5; }
.alert .close { margin-top: -2px; }

/* ----------------------------------------------------------
   RADIO / CHECKBOX INLINE B3
   ---------------------------------------------------------- */
.radio-inline, .checkbox-inline {
  position: relative; display: inline-block;
  padding-left: 20px; margin-bottom: 0;
  font-weight: 400; vertical-align: middle; cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline { margin-top: 0; margin-left: 10px; }
.radio, .checkbox { position: relative; display: block; margin-top: 10px; margin-bottom: 10px; }
.radio label, .checkbox label { min-height: 20px; padding-left: 20px; margin-bottom: 0; font-weight: 400; cursor: pointer; }
.radio input[type="radio"],
.checkbox input[type="checkbox"] { position: absolute; margin-left: -20px; }

/* ----------------------------------------------------------
   TABLE B3 — table-condensed, table-bordered, table-striped
   ---------------------------------------------------------- */
.table-condensed > thead > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > th,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > th,
.table-condensed > tfoot > tr > td { padding: 5px; }

/* ----------------------------------------------------------
   TABS B3 — nav-tabs, tab-content, tab-pane
   Bootstrap 5 mantiene estas clases pero agrega 'show' con 'active'
   ---------------------------------------------------------- */
.nav-tabs { border-bottom: 1px solid #ddd; }
.nav-tabs > li { margin-bottom: -1px; }
.nav-tabs > li > a {
  margin-right: 2px; line-height: 1.42857143;
  border: 1px solid transparent; border-radius: 4px 4px 0 0;
  display: block; padding: 10px 15px; text-decoration: none; color: #337ab7;
}
.nav-tabs > li > a:hover { border-color: #eee #eee #ddd; background-color: #eee; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  color: #555; background-color: #fff; cursor: default;
  border: 1px solid #ddd; border-bottom-color: transparent;
}
.tab-content > .tab-pane { display: none; }
.tab-content > .active,
.tab-content > .tab-pane.active.show { display: block; }
/* B3 usa 'in' + 'active', B5 usa 'show' + 'active' — cubrimos ambos */
.tab-content > .tab-pane.active.in { display: block; }

/* ----------------------------------------------------------
   MODAL B3 — ajustes para que funcione con Bootstrap 5
   Bootstrap 5 mantiene estas clases; solo necesitan data-bs-*
   ---------------------------------------------------------- */
.modal-backdrop.in { opacity: .5; }
.fade.in { opacity: 1; }
/* B3 .in equivale a B5 .show para modales */
.modal.in { display: block; }

/* ----------------------------------------------------------
   COLLAPSE B3 — .in = abierto (B5 usa .show)
   ---------------------------------------------------------- */
.collapse.in { display: block; }
.collapsing { height: 0; overflow: hidden; transition: height .35s ease; }

/* ----------------------------------------------------------
   NAVBAR COLLAPSE — visible en desktop sin navbar-expand-*
   ---------------------------------------------------------- */
.navbar { display: flex; align-items: center; flex-wrap: wrap; padding: 0 15px; }
@media (min-width: 768px) {
  .navbar-collapse.in,
  .navbar-collapse      { display: flex !important; flex-grow: 1; align-items: center; }
}

/* ----------------------------------------------------------
   DROPDOWN — .open equivale a .show en B5
   ---------------------------------------------------------- */
.dropdown.open .dropdown-menu,
.dropdown.show .dropdown-menu { display: block; }

/* ----------------------------------------------------------
   MISCELÁNEOS
   ---------------------------------------------------------- */
.text-muted    { color: #777 !important; }
.small, small  { font-size: 85%; }
.thumbnail     { display: block; padding: 4px; margin-bottom: 20px; line-height: 1.42857143; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; }
.breadcrumb    { padding: 8px 15px; margin-bottom: 20px; list-style: none; background-color: #f5f5f5; border-radius: 4px; }
.breadcrumb > li + li::before { padding: 0 5px; color: #ccc; content: "/\00a0"; }
.breadcrumb > .active { color: #777; }
.sr-only       { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.clearfix::after { display: block; content: ""; clear: both; }