/*
 * Bootstrap 3 → 5 compatibility shim
 * Restaura las utilities más usadas de BS3 sobre BS5
 * para minimizar cambios en el markup heredado.
 * Fase 4 — aeNuevo.
 */

/* ---- imágenes ---- */
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ---- floats / alineación ---- */
.pull-left  { float: left  !important; }
.pull-right { float: right !important; }

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.text-left    { text-align: left    !important; }
.text-right   { text-align: right   !important; }
.text-justify { text-align: justify !important; }

/* ---- grid col-xs → col ---- */
.col-xs-1  { flex: 0 0 auto; width:  8.33333333%; }
.col-xs-2  { flex: 0 0 auto; width: 16.66666667%; }
.col-xs-3  { flex: 0 0 auto; width: 25%; }
.col-xs-4  { flex: 0 0 auto; width: 33.33333333%; }
.col-xs-5  { flex: 0 0 auto; width: 41.66666667%; }
.col-xs-6  { flex: 0 0 auto; width: 50%; }
.col-xs-7  { flex: 0 0 auto; width: 58.33333333%; }
.col-xs-8  { flex: 0 0 auto; width: 66.66666667%; }
.col-xs-9  { flex: 0 0 auto; width: 75%; }
.col-xs-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-xs-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-xs-12 { flex: 0 0 auto; width: 100%; }

.col-xs-offset-0  { margin-left: 0; }
.col-xs-offset-1  { margin-left:  8.33333333%; }
.col-xs-offset-2  { margin-left: 16.66666667%; }
.col-xs-offset-3  { margin-left: 25%; }
.col-xs-offset-4  { margin-left: 33.33333333%; }
.col-xs-offset-5  { margin-left: 41.66666667%; }
.col-xs-offset-6  { margin-left: 50%; }
.col-xs-offset-7  { margin-left: 58.33333333%; }
.col-xs-offset-8  { margin-left: 66.66666667%; }
.col-xs-offset-9  { margin-left: 75%; }
.col-xs-offset-10 { margin-left: 83.33333333%; }
.col-xs-offset-11 { margin-left: 91.66666667%; }

/* ---- offsets md/sm/lg (sintaxis BS3 col-*-offset-N) ---- */
@media (min-width: 576px) {
    .col-sm-offset-0  { margin-left: 0; }
    .col-sm-offset-1  { margin-left:  8.33333333%; }
    .col-sm-offset-2  { margin-left: 16.66666667%; }
    .col-sm-offset-3  { margin-left: 25%; }
    .col-sm-offset-4  { margin-left: 33.33333333%; }
    .col-sm-offset-5  { margin-left: 41.66666667%; }
    .col-sm-offset-6  { margin-left: 50%; }
    .col-sm-offset-7  { margin-left: 58.33333333%; }
    .col-sm-offset-8  { margin-left: 66.66666667%; }
    .col-sm-offset-9  { margin-left: 75%; }
    .col-sm-offset-10 { margin-left: 83.33333333%; }
    .col-sm-offset-11 { margin-left: 91.66666667%; }
}

@media (min-width: 768px) {
    .col-md-offset-0  { margin-left: 0; }
    .col-md-offset-1  { margin-left:  8.33333333%; }
    .col-md-offset-2  { margin-left: 16.66666667%; }
    .col-md-offset-3  { margin-left: 25%; }
    .col-md-offset-4  { margin-left: 33.33333333%; }
    .col-md-offset-5  { margin-left: 41.66666667%; }
    .col-md-offset-6  { margin-left: 50%; }
    .col-md-offset-7  { margin-left: 58.33333333%; }
    .col-md-offset-8  { margin-left: 66.66666667%; }
    .col-md-offset-9  { margin-left: 75%; }
    .col-md-offset-10 { margin-left: 83.33333333%; }
    .col-md-offset-11 { margin-left: 91.66666667%; }
}

@media (min-width: 992px) {
    .col-lg-offset-0  { margin-left: 0; }
    .col-lg-offset-1  { margin-left:  8.33333333%; }
    .col-lg-offset-2  { margin-left: 16.66666667%; }
    .col-lg-offset-3  { margin-left: 25%; }
    .col-lg-offset-4  { margin-left: 33.33333333%; }
    .col-lg-offset-5  { margin-left: 41.66666667%; }
    .col-lg-offset-6  { margin-left: 50%; }
    .col-lg-offset-7  { margin-left: 58.33333333%; }
    .col-lg-offset-8  { margin-left: 66.66666667%; }
    .col-lg-offset-9  { margin-left: 75%; }
    .col-lg-offset-10 { margin-left: 83.33333333%; }
    .col-lg-offset-11 { margin-left: 91.66666667%; }
}

/* ---- visibility helpers BS3 ---- */
/* xs  < 576px */
.hidden-xs { display: initial; }
.visible-xs { display: none !important; }
@media (max-width: 575.98px) {
    .hidden-xs  { display: none !important; }
    .visible-xs { display: block !important; }
}

.hidden-sm { display: initial; }
.visible-sm { display: none !important; }
@media (min-width: 576px) and (max-width: 767.98px) {
    .hidden-sm  { display: none !important; }
    .visible-sm { display: block !important; }
}

.hidden-md { display: initial; }
.visible-md { display: none !important; }
@media (min-width: 768px) and (max-width: 991.98px) {
    .hidden-md  { display: none !important; }
    .visible-md { display: block !important; }
}

.hidden-lg { display: initial; }
.visible-lg { display: none !important; }
@media (min-width: 992px) {
    .hidden-lg  { display: none !important; }
    .visible-lg { display: block !important; }
}

/* ---- formularios ---- */
.form-group { margin-bottom: 1rem; }
.help-block { display: block; margin-top: 0.25rem; color: #6c757d; font-size: 0.875em; }

/* ---- botones: .btn-default a tono BS5 secondary con look BS3 ---- */
.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.btn-default:hover,
.btn-default:focus {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

/* ---- embed-responsive → BS5 ratio ---- */
.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
}
.embed-responsive::before {
    display: block;
    content: "";
}
.embed-responsive-16by9::before { padding-top: 56.25%; }
.embed-responsive-4by3::before  { padding-top: 75%; }
.embed-responsive-1by1::before  { padding-top: 100%; }
.embed-responsive-21by9::before { padding-top: 42.857143%; }
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---- .media (BS3 legacy con table-cell, igual que BS3 original) ----
   Se mantiene table-cell (no flex) para compatibilidad con reglas ya
   existentes en custom.css que usan display:table-cell en los children. */
.media       { margin-top: 15px; overflow: hidden; zoom: 1; }
.media:first-child { margin-top: 0; }
.media,
.media-body  { overflow: hidden; zoom: 1; }
.media-body,
.media-left,
.media-right {
    display: table-cell;
    vertical-align: top;
}
.media-body  { width: 10000px; }
.media-left  { padding-right: 10px; }
.media-right { padding-left: 10px; }
.media-heading { margin-top: 0; margin-bottom: 5px; }
.media-object { display: block; max-width: 100%; }

/* ---- badges BS3 .label (legacy) ---- */
.label {
    display: inline-block;
    padding: .25em .4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
    background-color: #6c757d;
}
.label-primary { background-color: #0d6efd; }
.label-success { background-color: #198754; }
.label-info    { background-color: #0dcaf0; }
.label-warning { background-color: #ffc107; color: #000; }
.label-danger  { background-color: #dc3545; }

/* ---- wells / panels legacy (visibles como card) ---- */
.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: .25rem;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}

.panel        { margin-bottom: 20px; background-color: #fff; border: 1px solid transparent; border-radius: .25rem; 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-top-left-radius: calc(.25rem - 1px); border-top-right-radius: calc(.25rem - 1px); }
.panel-title  { margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit; }
.panel-footer { padding: 10px 15px; background-color: #f5f5f5; border-top: 1px solid #ddd; border-bottom-right-radius: calc(.25rem - 1px); border-bottom-left-radius: calc(.25rem - 1px); }
.panel-default                { border-color: #ddd; }
.panel-default > .panel-heading { color: #333; background-color: #f5f5f5; border-color: #ddd; }

/* ---- thumbnail BS3 ---- */
.thumbnail {
    display: block;
    padding: 4px;
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: .25rem;
    transition: border .2s ease-in-out;
}
.thumbnail > img,
.thumbnail a > img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

/* ---- carrusel BS3 compat: .item como alias de .carousel-item ---- */
.carousel-inner > .item {
    position: relative;
    display: none;
    float: left;
    width: 100%;
    margin-right: -100%;
    backface-visibility: hidden;
    transition: transform .6s ease-in-out;
}
.carousel-inner > .item.active,
.carousel-inner > .item.next,
.carousel-inner > .item.prev {
    display: block;
}

/* ---- navbar BS3 legacy colors (mantener negro del sitio) ---- */
.navbar-inverse {
    background-color: #000 !important;
    border-color: #000;
}
.navbar-inverse .navbar-nav .nav-link { color: #fff; }
.navbar-inverse .navbar-nav .nav-link:hover,
.navbar-inverse .navbar-nav .nav-link:focus { color: #e6e6e6; }
.navbar-inverse .navbar-toggler {
    border-color: rgba(255,255,255,.3);
}

/* ítem activo del menú (hereda de custom.css con .current_page_item) */

/* ---- BS3 .caret (desaparecido en BS5) ---- */
.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;
}

/* BS3 permite <a> clickable sin href en dropdowns; BS5 no.
   Aseguramos cursor pointer para no romper el hover. */
.dropdown-menu > li > a,
.dropdown-menu a[onclick] { cursor: pointer; }

/* BS5 remueve .dropdown-toggle::after cuando usamos nuestra caret interna;
   la ocultamos para que no salga doble flecha. */
.dropdown-toggle::after { display: none; }

/* BS3 legacy: navbar-nav navbar-left / navbar-form navbar-left usaban floats.
   Restauramos el comportamiento horizontal básico. */
.cartelera-semanal,
.nav.navbar-nav.navbar-left,
.form.navbar-form.navbar-left {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}