/* --- reset de los sstilos de los navegadores ---*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}

/* --- Fin de reset de los sstilos de los navegadores ---*/

/* Fijar modelo de caja para inputs: content-box es el comportamiento esperado
   ya que los valores de width/height en .searchfield, .campodatosusuario, etc.
   NO incluyen padding ni border. Sin esto, en algunos browsers el input se ve más chico. */
input,
textarea,
select {
    box-sizing: content-box;
}
div.cargador-inicial {
    position: fixed;
    left: 318px;
    top: 60px;
    width: calc(100% - 318px);
    height: calc(100% - 60px);
    z-index: 20;
    background: url('../images/pageloader.png') 50% 50% no-repeat #000000;
    background-size: 170px;
}
#pgloader {
    width: 300px !important;
    height: 300px !important;
}

html {
    padding: 0 0 100px;
    margin: 0;
    touch-action: manipulation;
}

.hover-brillo {
    transition: all 0.3s ease;
}
.hover-brillo:hover {
    filter: brightness(1.1) drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
}

body {
    padding: 0 0 100px;
    margin: 0;
}

footer, #barra_carrito, div.carrito_esc {
    position: relative;
    z-index: 30;
}

body.contenedor-general {
    overflow: scroll;
    overflow-x: hidden;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    margin: 0 auto;
    position: relative;
    width: 100%;
    /* height: 1100px; */
    background-image: url("../images/fondocabezalesc.jpg");
    background-attachment: fixed;
}

body.contenedor-general2 {
    overflow: scroll;
    overflow-x: hidden;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    margin: 0 auto;
    position: relative;
    width: 1023px;
    height: 1100px;
    background-color: #000000;
}

header,
nav,
section,
article {
    display: block;
    z-index: 50;
}

header {
    width: 100%;
    height: 60px;
    position: fixed;
    background-color: #000000;
    background-image: url("../images/fondocabezalesc.jpg");
    box-shadow: 0px -5px 30px #000000;
}

p.pendiente_mdq {
    font: 14px/100% Arial, Helvetica, sans-serif;
    font-weight: bold;
    line-height: 125%;
    background-color: #ECCEF5;
    color: #2F0B3A;
    border: 2px solid #4C0B5F;
    padding: 2px;
}

p.pendiente_mdq_grilla {
    font: 28px/100% Arial, Helvetica, sans-serif;
    font-weight: bold;
    line-height: 125%;
    background-color: #ECCEF5;
    color: #2F0B3A;
    border: 2px solid #4C0B5F;
    padding: 2px;
}

div.login {
    height: 480px;
    width: 320px;
    background-size: 320px 480px;
    background-image: url("../images/fondo_loginesc.jpg");
}

div.signup {
    height: 320px;
    width: 320px;
    background-size: 320px;
    background-image: url("../images/fondo_signupesc.jpg");
}

div.logout {
    height: 320px;
    width: 320px;
    background-image: url("../images/fondo_logoutesc.jpg");
    background-size: 320px;
}

div.borrar_user {
    height: 320px;
    width: 320px;
    background-image: url("../images/fondo_borrar_usuarioesc.jpg");
    background-size: 320px;
}

div.borrar_config {
    height: 320px;
    width: 320px;
    background-image: url("../images/fondo_borrar_configesc.jpg");
    background-size: 320px;
}

div.cancelar_pedido {
    height: 320px;
    width: 320px;
    background-image: url("../images/fondo_cancelar_pedidoesc.jpg");
    background-size: 320px;
}

div.enviar_pedido {
    height: 320px;
    width: 320px;
    background-size: 320px;
    background-image: url("../images/fondo_enviar_pedidoesc.jpg");
}

div.enviar_pedido_vendedor {
    height: 320px;
    width: 320px;
    background-size: 320px;
    background-image: url("../images/fondo_enviar_pedido_vendedoresc.jpg");
}

div.enviar_comentario {
    height: 320px;
    width: 320px;
    background-size: 320px;
    background-image: url("../images/fondo_enviar_comentarioesc.jpg");
}

div.enviar_dato {
    height: 320px;
    width: 320px;
    background-size: 320px;
    background-image: url("../images/fondo_modificar_datoesc.jpg");
}

div.enviar_sugerencia {
    height: 320px;
    width: 320px;
    background-size: 320px;
    background-image: url("../images/fondo_enviar_sugerenciaesc.jpg");
}

div.cargar_pedido_anterior {
    height: 320px;
    width: 320px;
    background-size: 320px;
    background-image: url("../images/cargar_pedido_anterioresc.jpg");
}

div.enviar_ganancia {
    height: 320px;
    width: 320px;
    background-size: 320px;
    background-image: url("../images/fondo_gananciaesc.jpg");
}

div.descuento {
    height: 320px;
    width: 320px;
    background-size: 320px;
    background-image: url("../images/fondo_descuentoesc.jpg");
}

div.qr {
    height: 320px;
    width: 320px;
    background-size: 320px;
    background-image: url("../images/fondo_qresc.jpg");
}

div.qrapp {
    height: 320px;
    width: 320px;
    background-size: 320px;
    background-image: url("../images/fondo_qrappesc.jpg");
}

div.pedido_enviado_ok {
    height: 320px;
    width: 320px;
    background-size: 320px;
    background-image: url("../images/fondo_pedido_enviado_okesc.jpg");
}

div.pedido_enviado_ok_base {
    height: 1635px;
    width: 1023px;
    background-image: url("../images/fondo_pedido_enviado_ok_base.jpg");
}

div.loginerr {
    height: 480px;
    width: 320px;
    background-size: 320px 480px;
    background-image: url("../images/fondo_login_erresc.jpg");
}

figure.logo {
    position: relative;
    height: 50px;
    padding: 10px 10px 10px 10px;
}

div.cuadrobusqueda {
    position: relative;
    float: left;
}

div.resultadosbusqueda {
    display: block;
    position: absolute;
    top: 60px;
    left: 318px;
    z-index: 10;
    padding: 0px 0px;
    background-color: transparent;
}

div.slideshow {
    display: block;
    position: relative;
    top: 0px;
    z-index: 10;
}

.searchform {
    border: 2px solid #D2D2D2;
    border-radius: 5px;
    padding: 2px 2px;
}

.searchform input {
    font: 18px/100% Arial, Helvetica, sans-serif;
    color: #848484;
}

.searchfield {
    height: 20px;
    border: 2px solid #BCBBBB;
    border-radius: 5px;
    padding: 4px 4px 4px 4px;
}

.campodatosusuario {
    width: 280px;
    height: 14px;
    border: 2px solid #BCBBBB;
    border-radius: 3px;
    padding: 2px 2px 2px 2px;
    font: 15px/100% Arial, Helvetica, sans-serif;
}

.campodatosusuariodescuento {
    width: 118px;
    height: 27px;
    border: 2px solid #BCBBBB;
    border-radius: 3px;
    padding: 2px 2px 2px 2px;
    font: 25px/100% Arial, Helvetica, sans-serif;
    text-align: center;
}

div.producto {
    position: relative;
    float: left;
}

div.carrito_esc {
    position: relative;
    border: 2px solid #f0f0f0;
    float: right;
    border-radius: 10px;
}

section.articulos {
    position: relative;
    width: 100%;
    float: left;
    padding: 10px 10px;
}

div.fondobusqueda {
    position: relative;
    width: 998px;
    height: 1100px;
    float: left;
    padding: 10px 10px;
}

div.fondobusquedaesc {
    position: relative;
    width: 100%;
    height: 100%;
    float: left;
    padding: 10px 10px;
}

div.descripcion {
    position: relative;
    height: 140px;
    float: left;
    padding: 0px 10px;
}

div.descripcion2 {
    position: absolute;
    width: 994px;
    height: 380px;
    padding: 6px 6px;
}

p.titulo {
    font: 14px/100% Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #0431B4;
}

p.titulo2 {
    font: 40px/100% Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #0431B4;
}

p.cuerpo {
    font: 12px/100% Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #000000;
}

p.cuerpo_pedido_anterior {
    font: 16px/100% Arial, Helvetica, sans-serif;
    color: #000000;
}

p.cuerpo2 {
    font: 12px/100% Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #000000;
}

p.cuerpo3 {
    font: 11px/100% Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #000000;
    margin-top: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Contenedor flex para los badges de información */
.info-badges-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: 4px 0;
}

/* Estilos base para badges tipo item-price */
p.precio_costo_cuerpo {
    font: 14px/100% Arial, Helvetica, sans-serif;
    font-weight: 700;
    color: #FF8000;
    white-space: nowrap;
    padding: 5px 10px;
    background: #fff2e5;
    border-radius: 4px;
    border-left: 3px solid #FF8000;
    display: inline-block;
    margin: 0;
}

p.precio_costo_cuerpo_ped_pen {
    font: 14px/100% Arial, Helvetica, sans-serif;
    font-weight: 700;
    color: #4B0082;
    white-space: nowrap;
    padding: 5px 10px;
    background: #f2ebff;
    border-radius: 4px;
    border-left: 3px solid #4B0082;
    display: inline-block;
    margin: 0;
}

p.codigo_prov_cuerpo {
    font: 14px/100% Arial, Helvetica, sans-serif;
    font-weight: 700;
    color: #00BFFF;
    white-space: nowrap;
    padding: 5px 10px;
    background: #e5f6ff;
    border-radius: 4px;
    border-left: 3px solid #00BFFF;
    display: inline-block;
    margin: 0;
}

p.codigo_minimo_cuerpo {
    font: 14px/100% Arial, Helvetica, sans-serif;
    font-weight: 700;
    color: #FF0000;
    white-space: nowrap;
    padding: 5px 10px;
    background: #ffe8e8;
    border-radius: 4px;
    border-left: 3px solid #FF0000;
    display: inline-block;
    margin: 0;
}

p.precio_costo_cuerpo2 {
    font: 14px/100% Arial, Helvetica, sans-serif;
    font-weight: 700;
    color: #31B404;
    white-space: nowrap;
    padding: 5px 10px;
    background: #e8ffe8;
    border-radius: 4px;
    border-left: 3px solid #31B404;
    display: inline-block;
    margin: 0;
}

/* Estilos para badges de equivalencias */
.equivalencia-badge {
    font: 13px/1.5 Arial, Helvetica, sans-serif;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    color: #000000;
    gap: 8px;
}

.equivalencia-badge.disponible {
    background: linear-gradient(to bottom, #F4F4F4, #E0E0E0);
    border-left: 4px solid #A4A4A4;
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
}

.equivalencia-badge.no-disponible {
    background: linear-gradient(to bottom, #f8f8f8, #e6e6e6);
    border-left: 4px solid #A4A4A4;
    border-top: 1px solid #d0d0d0;
    border-right: 1px solid #d0d0d0;
    border-bottom: 1px solid #d0d0d0;
}

.equivalencia-badge a {
    text-decoration: none;
    color: inherit;
}



p.precio_costo_cuerpo3 {
    font: 28px/100% Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #00BFFF;
}

p.precio_costo_cuerpo4 {
    font: 28px/100% Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #31B404;
}

#sidebar {
    position: fixed;
    top: 0px;
    width: 310px;
    height: 100%;
    z-index: 999999 !important;
    padding: 5px 5px;
    background: #000000;
    background-image: url("../images/fonsidebar.jpg");
    background-repeat: no-repeat;
    background-size: 320px;
    box-shadow: 6px 0px 50px #000000;
}

#sidebarderecha {
    position: fixed;
    top: 0px;
    right: 0px;
    width: 300px;
    height: 100%;
    float: right;
    z-index: 999999 !important;
    padding: 5px 5px;
    background: #000000;
    box-shadow: -7px 0px 16px #000000;
}

div.contenidogeneral {
    z-index: 2;
}

div.stock_1 {
    position: absolute;
    border: 2px solid #000000;
    border-radius: 5px;
    padding: 3px 0px;
    background: #00FF00;
}

div.stock_2 {
    position: absolute;
    border: 2px solid #000000;
    border-radius: 5px;
    padding: 3px 0px;
    background: #FFFF00;
}

div.stock_3 {
    position: absolute;
    border: 2px solid #000000;
    border-radius: 5px;
    padding: 3px 0px;
    background: #FF0000;
}

div.stock_4 {
    position: absolute;
    border: 2px solid #000000;
    border-radius: 5px;
    padding: 3px 3px;
    background: #E0E6F8;
}

div.stock_5 {
    position: absolute;
    border: 2px solid #000000;
    border-radius: 5px;
    padding: 3px 3px;
    background: #FFA500;
}

div.stock_12 {
    position: absolute;
    border: 2px solid #000000;
    border-radius: 10px;
    padding: 26px 10px;
    background: #00FF00;
}

div.stock_22 {
    position: absolute;
    border: 2px solid #000000;
    border-radius: 10px;
    padding: 26px 10px;
    background: #FFFF00;
}

div.stock_32 {
    position: absolute;
    border: 2px solid #000000;
    border-radius: 10px;
    padding: 26px 10px;
    background: #FF0000;
}

div.stock_42 {
    position: absolute;
    border: 2px solid #000000;
    border-radius: 10px;
    padding: 26px 10px;
    background: #E0E6F8;
}

p.fuentestock {
    font: 20px/100% Arial, Helvetica, sans-serif;
    text-align: center;
    font-weight: bold;
    color: #000000;
}

p.fuentestock2 {
    font: 55px/100% Arial, Helvetica, sans-serif;
    text-align: center;
    font-weight: bold;
    color: #000000;
}

div.codigo {
    position: absolute;
    border-radius: 5px;
    padding: 1px 1px;
    background: #FFFFFF;
}

div.codigo2 {
    position: absolute;
    border: 2px solid #D2D2D2;
    border-radius: 10px;
    padding: 23px 10px;
    background: #FFFFFF;
}

div.codigo_prov {
    position: absolute;
    border: 2px solid #D2D2D2;
    border-radius: 10px;
    padding: 23px 10px;
    background: #FFFFFF;
}


div.datosrubro {
    position: absolute;
    top: 337px;
    width: 100%;
    height: 40px;
}

p.fuentesrubrofiltrado {
    font: 32px/100% Arial, Helvetica, sans-serif;
    text-align: center;
    font-weight: bold;
    color: #FFFFFF;
}

p.fuentessidebarclientes {
    font: 30px/100% Arial, Helvetica, sans-serif;
    text-align: right;
    font-weight: bold;
    color: #FFFFFF;
}

p.fuentessidebarclientes_titulo_amarillo {
    font: 16px/100% Arial, Helvetica, sans-serif;
    text-align: center;
    font-weight: bold;
    color: #FFBF00;
}

p.fuentessidebarclientes_titulo_blanco {
    font: 16px/100% Arial, Helvetica, sans-serif;
    text-align: center;
    font-weight: bold;
    color: #FFFFFF;
}

p.fuentessidebarclientes_titulo_amarillo_2 {
    font: 15px/100% Arial, Helvetica, sans-serif;
    text-align: right;
    font-weight: bold;
    color: #FFBF00;
}

p.fuentessidebarclientes_titulo_blanco_2 {
    font: 15px/100% Arial, Helvetica, sans-serif;
    text-align: right;
    font-weight: bold;
    color: #FFFFFF;
}

p.fuentescodigo {
    font: 25px/100% Arial, Helvetica, sans-serif; /* Reducido 15% */
    text-align: center;
    font-weight: bold;
    color: #000000;
}

p.fuentescodigo2 {
    font: 60px/100% Arial, Helvetica, sans-serif;
    text-align: center;
    font-weight: bold;
    color: #000000;
}

p.fuentes_prov {
    font: 60px/100% Arial, Helvetica, sans-serif;
    text-align: center;
    font-weight: bold;
    color: #00BFFF;
}


div.precio {
    position: absolute;
    border-radius: 5px;
    background: #FFFFFF;
}

p.fuente_quitar_carrito {
    padding: 0px 0px;
    font: 23px/100% Arial, Helvetica, sans-serif;
    text-align: center;
    font-weight: bold;
    color: #000000;
}

p.fuente_cantidad_carrito {
    padding: 0px 0px;
    font: 23px/100% Arial, Helvetica, sans-serif;
    text-align: center;
    font-weight: bold;
}

p.fuente_agregar_carrito {
    padding: 0px 0px;
    font: 23px/100% Arial, Helvetica, sans-serif;
    text-align: center;
    font-weight: bold;
    color: #000000;
}

p.fuente_quitar_carrito2 {
    padding: 0px 0px;
    font: 70px/100% Arial, Helvetica, sans-serif;
    text-align: center;
    font-weight: bold;
    color: #000000;
}

p.fuente_cantidad_carrito2 {
    padding: 0px 0px;
    font: 70px/100% Arial, Helvetica, sans-serif;
    text-align: center;
    font-weight: bold;
}

p.fuente_agregar_carrito2 {
    padding: 0px 0px;
    font: 70px/100% Arial, Helvetica, sans-serif;
    text-align: center;
    font-weight: bold;
    color: #000000;
}

div.bloque_carrito {
    position: absolute;
    display: block;
    top: 52px;
    left: 8px;
    width: 268px;
    height: 33px;
    border: 2px solid #D2D2D2;
    border-radius: 5px;
    padding: 5px 5px;
    background: transparent;
}

div.bloque_carrito3 {
    position: absolute;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    top: 58px;
    left: 8px;
    width: 172px;
    height: 37px;
    /* Igual que el semáforo para simetría */
    border: 2px solid #D2D2D2;
    border-radius: 5px;
    padding: 0 5px;
    background: #FFFFFF;
    box-sizing: border-box;
    z-index: 5;
}

div.bloque_carrito2 {
    position: absolute;
    display: block;
    top: 1066px;
    left: 10px;
    width: 574px;
    height: 76px;
    border: 2px solid #D2D2D2;
    border-radius: 10px;
    padding: 10px 10px;
    background: #FFFFFF;
}

div.quitar_carrito_3 {
    position: absolute;
    display: block;
    top: 5px;
    left: 53px;
    width: 55px;
    height: 23px;
    border: 2px solid #D2D2D2;
    border-radius: 5px;
    padding: 3px 3px;
    background: #F2F2F2;
}

div.agregar_carrito_3 {
    position: absolute;
    display: block;
    top: 5px;
    left: 206px;
    width: 55px;
    height: 23px;
    border: 2px solid #D2D2D2;
    border-radius: 5px;
    padding: 3px 3px;
    background: #F2F2F2;
}

div.cantidad_carrito_3 {
    position: absolute;
    display: block;
    top: 5px;
    left: 124px;
    width: 66px;
    height: 23px;
    border: 2px solid #D2D2D2;
    border-radius: 5px;
    padding: 3px 3px;
    background: #FFFFFF;
}

div.quitar_carrito {
    position: static !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 27px !important;
    border: 2px solid #555555;
    border-radius: 4px;
    background: linear-gradient(to bottom, #666666, #444444);
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

div.quitar_carrito p.fuente_quitar_carrito,
div.agregar_carrito p.fuente_agregar_carrito {
    color: #FFFFFF !important;
}

div.quitar_carrito:hover, 
div.agregar_carrito:hover {
    border-color: #d32f2f !important;
    background: linear-gradient(to bottom, #8b0000, #5a0000) !important;
}

div.quitar_carrito_2:hover,
div.agregar_carrito_2:hover,
div.quitar_carrito_3:hover,
div.agregar_carrito_3:hover {
    border-color: #d32f2f !important;
    background: linear-gradient(to bottom, #8b0000, #5a0000) !important;
}

div.agregar_carrito {
    position: static !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 27px !important;
    border: 2px solid #555555;
    border-radius: 4px;
    background: linear-gradient(to bottom, #666666, #444444);
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

div.cantidad_carrito {
    position: static !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 35px !important;
    height: 27px !important;
    border: 2px solid #D2D2D2;
    border-radius: 4px;
    background: #FFFFFF;
    box-sizing: border-box;
}

div.quitar_carrito_2 {
    position: absolute;
    display: block;
    top: 5px;
    left: 100px;
    width: 100px;
    height: 72px;
    border: 2px solid #D2D2D2;
    border-radius: 10px;
    padding: 5px 10px;
    background: #F2F2F2;
}

div.agregar_carrito_2 {
    position: absolute;
    display: block;
    top: 5px;
    left: 458px;
    width: 100px;
    height: 72px;
    border: 2px solid #D2D2D2;
    border-radius: 10px;
    padding: 5px 10px;
    background: #F2F2F2;
}

div.cantidad_carrito_2 {
    position: absolute;
    display: block;
    top: 5px;
    left: 245px;
    width: 170px;
    height: 72px;
    border: 2px solid #D2D2D2;
    border-radius: 10px;
    padding: 5px 10px;
    background: #FFFFFF;
}

p.fuentesprecio {
    font: 25px/100% Arial, Helvetica, sans-serif;
    text-align: center;
    font-weight: bold;
    color: #000000;
}

p.fuentesprecio2 {
    font: 62px/100% Arial, Helvetica, sans-serif;
    text-align: center;
    font-weight: bold;
    color: #000000;
}

#barra_carrito {
    z-index: 90;
    position: fixed;
    bottom: 0;
    float: left;
    width: 318px;
    padding: 0px 0px;
    background: #848484;
}

#barra_footer {
    z-index: 90;
    position: relative;
    width: 100%;
    padding: 10px 10px;
    background: #848484;
}

footer {
    z-index: 90;
    position: fixed;
    bottom: 0;
    width: 100%;
    float: left;
    background-color: #000000;
    box-shadow: 0px -3px 12px rgba(0, 0, 0, 0.4);
}

img.marcaflotante {
    position: absolute;
    background: #FFFFFF;
}

img.cerrar {
    position: absolute;
    border: 2px solid #FFFFFF;
    background: #FFFFFF;
}

.slider {
    width: 100%;
    height: 500px;

}

.slick-slide {
    margin: 0px 0px;
}

.slick-prev:before,
.slick-next:before {
    color: black;
}


.slick-slide {
    transition: all ease-in-out .3s;
    opacity: 1;
}

.slick-active {
    opacity: 1;
}

.slick-current {
    opacity: 1;
}