/*
 * Compatibilidad Bootstrap 3 -> 4 para el landing.
 * La plantilla del landing se hizo sobre BS3; el sitio ahora carga solo BS4 (/user/css/bootstrap.min.css).
 * Aquí van únicamente las clases/reglas de BS3 que las vistas y la plantilla siguen usando.
 * Se carga ANTES de bootstrap.min.css para que col-sm/md/lg de BS4 sigan ganando sobre col-xs-*.
 */

/* BS3 fijaba 1rem = 10px; todo el CSS de BS4 (rem) y la plantilla se ajustaron con esa base */
html {
    font-size: 10px;
}

/* Base de BS3 (normalize) que BS4 no redefine */
button, input, optgroup, select, textarea {
    color: inherit;
}
input[type="checkbox"], input[type="radio"] {
    margin: 4px 0 0;
    line-height: normal;
}

/* Clearfix de BS3: contiene floats y evita colapso de márgenes en estos contenedores */
.clearfix:before, .clearfix:after,
.container:before, .container:after,
.container-fluid:before, .container-fluid:after,
.row:before, .row:after,
.form-horizontal .form-group:before, .form-horizontal .form-group:after,
.btn-toolbar:before, .btn-toolbar:after,
.nav:before, .nav:after,
.navbar:before, .navbar:after,
.navbar-header:before, .navbar-header:after,
.navbar-collapse:before, .navbar-collapse:after,
.panel-body:before, .panel-body:after,
.modal-header:before, .modal-header:after,
.modal-footer:before, .modal-footer:after {
    display: table;
    content: " ";
}
.clearfix:after, .container:after, .container-fluid:after, .row:after,
.form-horizontal .form-group:after, .btn-toolbar:after, .nav:after, .navbar:after,
.navbar-header:after, .navbar-collapse:after, .panel-body:after,
.modal-header:after, .modal-footer:after {
    clear: both;
}
[class*="col-xs-"], [class*="col-sm-"], [class*="col-md-"], [class*="col-lg-"] {
    min-height: 1px;
}

/* Grid: col-xs-* (en BS4 son col-*) */
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}
.col-xs-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-xs-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-xs-3 { flex: 0 0 25%; max-width: 25%; }
.col-xs-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-xs-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-xs-6 { flex: 0 0 50%; max-width: 50%; }
.col-xs-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-xs-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-xs-9 { flex: 0 0 75%; max-width: 75%; }
.col-xs-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-xs-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-xs-12 { flex: 0 0 100%; max-width: 100%; }

/* BS3 flotaba las columnas; la plantilla tiene col-* fuera de .row (ficha de producto) que dependen de eso */
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    float: left;
}
@media (min-width: 768px) {
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
    .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { float: left; }
}
@media (min-width: 992px) {
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
    .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: left; }
}
@media (min-width: 1200px) {
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
    .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { float: left; }
}

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

/* hidden-* / visible-* con los breakpoints de BS3 (768 / 992 / 1200) */
.visible-xs, .visible-sm, .visible-md, .visible-lg { display: none !important; }
@media (max-width: 767px) {
    .visible-xs { display: block !important; }
    .hidden-xs { display: none !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm { display: block !important; }
    .hidden-sm { display: none !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md { display: block !important; }
    .hidden-md { display: none !important; }
}
@media (min-width: 1200px) {
    .visible-lg { display: block !important; }
    .hidden-lg { display: none !important; }
}

/* Panels (acordeón de Mis pedidos / share; la plantilla los estiliza en .accordion-faq) */
.panel { margin-bottom: 20px; background-color: #fff; border: 1px solid transparent; border-radius: 4px; }
.panel-body { padding: 15px; }
.panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; }
.panel-group { margin-bottom: 20px; }
.panel-group .panel { margin-bottom: 0; }
.panel-group .panel + .panel { margin-top: 5px; }