/*------------------------------------------------------------------
 PRIVILEGIO · piel de la web del participante (Club Privilegio · Ecuaquímica)

 Se carga después de style.css (fragments/resources.html) y sobrescribe la
 paleta heredada del tema BOUTIQUE (azul #67a4c8 y amarillo #fdca3f de
 Fabripuntos / Club Pichincha) con los colores del prototipo aprobado de
 Fuerza de Ventas: https://promotick.github.io/ecuaquimica/
 (copia local de referencia: prototype-ecuaquimica/css/style.css).

 Alcance: cabecera, menú, pie de página, paleta, tipografía y logo
 (ver boveda-ecuaquimica/revision/07-piel-web.md). No porta funcionalidades propias del
 prototipo ni oculta entradas del menú.

 Nota: el verde de WhatsApp vive en img/ws.png (idéntico en el prototipo) y
 el degradado verde → marino de los banners vive en las imágenes del slider
 (contenido administrable), no en CSS.
--------------------------------------------------------------------*/

/*------------------
 1. PALETA
 Única definición de colores de la piel. Cada valor cita el selector del
 prototipo (prototype-ecuaquimica/css/style.css) del que se extrajo.
 ------------------*/

:root {
    --pv-verde: #448061;           /* .mini-cart .count, .color-nr, .basket, .favorito:hover, .sty-btn span, .section-title h3:before, .tab-product .nav-tab li a:after, .msj-express, .dot.active; fin del degradado de .footer */
    --pv-verde-corazon: #008259;   /* .favorito (corazón de favoritos) */
    --pv-marron: #ab6a2e;          /* .button, input[type="submit"], .product-item.style3 .add_to_cart_button, .mini-cart .group-button .check-out, .product-details-right .button-add-cart, .tagcloud .activo, .tagcloud a:hover, .style-10 */
    --pv-dorado-oscuro: #b87d36;   /* .footer, inicio del degradado (0 %) */
    --pv-dorado: #c8a740;          /* .footer, centro del degradado (47 %) */
    --pv-marino: #222b34;          /* .section-title.style6 .sub-title:after */
    --pv-celeste: #00a8c4;         /* .scroll_top (botón volver arriba) */
    --pv-rojo: #F40000;            /* .scroll_top:hover/:focus/:active, .banner-text .button */
    --pv-gris-texto: #575a5b;      /* .main-menu > li > a (enlaces del menú); ya lo usaba .user-name */
    --pv-gris-menu-movil: #333;    /* .box-mobile-menu (panel del menú móvil) */
    --pv-blanco: #fff;
    --pv-degradado-pie: linear-gradient(210deg, var(--pv-dorado-oscuro) 0%, var(--pv-dorado) 47%, var(--pv-verde) 100%); /* .footer */
}

/*------------------
 2. CABECERA Y MENÚ (fragments/topmenu.html)
 ------------------*/

.header.style3 .logo {
    padding-top: 39px;             /* prototipo: 39px para el logo de 200px (web: 62px) */
}

.main-menu {
    display: flex;                 /* prototipo: .main-menu; en móvil sigue oculto por .header.style3 .main-menu (style.css, max-width 767px) */
    flex-wrap: wrap;
    grid-gap: 14px;
}

.main-menu > li > a {
    color: var(--pv-gris-texto);
}

.header.style3 .main-menu > li > a {
    padding: 18px 0;               /* la separación horizontal la da grid-gap */
}

li.info-pts {                      /* píldora "Tienes N puntos" */
    background-color: var(--pv-blanco);
    color: inherit;
    font-weight: 400;
}

.color-nr {                        /* número de puntos */
    color: var(--pv-verde);
    font-size: inherit;
}

.mini-cart .count {
    background-color: var(--pv-verde);
}

.mini-cart .group-button .check-out {
    border: 1px solid var(--pv-marron);
    background-color: var(--pv-blanco);
}

.mini-cart .group-button .check-out:hover {
    background-color: var(--pv-marron);
    color: var(--pv-blanco);
}

.box-mobile-menu {
    background: var(--pv-gris-menu-movil);
}

/*------------------
 3. PIE DE PÁGINA (fragments/footer.html)
 ------------------*/

.footer {
    background: var(--pv-degradado-pie) !important; /* el prototipo también lo marca !important */
    padding-top: 50px;
}

/* Pie al fondo de la ventana en páginas cortas (favoritos o carrito vacíos o con pocos productos): sin
   esto queda una franja blanca debajo del pie. Solo las vistas de layouts/layout.html tienen
   #content-block; el cuerpo de la página va en .pv-contenido, que crece y conserva su maquetación de
   bloque (los .container de Bootstrap no pasan a ser ítems flex). */
#content-block {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#content-block > .pv-contenido {
    flex: 1 0 auto;
}

.footer ul li a,
.footer .our-service ul li a:hover,
.footer .contact-info .phone {
    color: var(--pv-blanco);
}

.footer .footer-bottom {           /* el prototipo retira la franja amarilla (#fdca3f) */
    background: transparent;
    color: inherit;
    font-weight: 400;
    padding-top: 0;
}

.scroll_top {
    background-color: var(--pv-celeste);
}

.scroll_top:hover,
.scroll_top:focus,
.scroll_top:active {
    background-color: var(--pv-rojo);
}

/*------------------
 4. BOTONES Y ACENTOS DE LA PALETA (transversales)
 Recolores del azul #67a4c8 y del amarillo #fdca3f que hace el prototipo.
 No se recolorea el módulo Mundial (#qatar), heredado (L-01).
 ------------------*/

.button,
input[type="submit"] {
    padding: 9px 25px;
    background-color: var(--pv-marron);
    border-radius: 5px;
}

.button:hover,
input[type="submit"]:hover {
    background-color: var(--pv-marron); /* el prototipo ya no cambia a gris al pasar el cursor */
    color: var(--pv-blanco);
}

.product-item.style3 .add_to_cart_button {
    border: 1px solid var(--pv-marron);
    background-color: var(--pv-marron);
    color: var(--pv-blanco);
}

.product-item.style3 .add_to_cart_button:hover {
    border-color: var(--pv-marron);
    background-color: var(--pv-blanco);
    color: #333;
}

.product-details-right .button-add-cart,
.style-10 {
    background: var(--pv-marron);
}

.tagcloud .activo,                 /* active catalog subcategory (web: blue #67a4c8) */
.tagcloud a:hover {
    background-color: var(--pv-marron);
}

.favorito {
    border: 0;
    border-radius: 50%;
    margin-left: 5px;
    color: var(--pv-verde-corazon);
}

.favorito:hover {
    background: var(--pv-verde);
}

.basket,
.msj-express {
    background-color: var(--pv-verde);
}

.element-icon.style2 {
    border-color: var(--pv-verde);
    border-radius: 5px;
}

.sty-btn span {
    border-color: var(--pv-verde);
    color: var(--pv-verde);
}

.sty-btn input[type="checkbox"]:checked + span {
    background-color: var(--pv-verde);
}

.section-title h3:before,
.tab-details-product .box-tabs li a:after,
.tab-product .nav-tab li a:after {
    background-color: var(--pv-verde);
}

.section-title.style6 .sub-title:after {
    background-color: var(--pv-marino);
}

.banner-text .button {
    background-color: var(--pv-rojo);
}

@media (max-width: 767px) {
    .tab-product .nav-tab li a:after {
        display: none;
    }

    .tab-product .nav-tab li:hover a,
    .tab-product .nav-tab li.active a {
        color: var(--pv-blanco);
        font-weight: 600;
        background: var(--pv-verde);
        border-radius: 5px;
        padding: 5px 15px;
    }
}

/*------------------
 5. TIPOGRAFÍA
 La familia base (Montserrat, style.css body) es la misma del prototipo.
 El prototipo solo retira la fuente Roboto de las migas de pan y las
 mayúsculas de los títulos de widget (el pie conserva las suyas).
 ------------------*/

.breadcrumbs {
    font-family: inherit;
}

.widget .widget-title {
    text-transform: none;
}

/*------------------
 6. VISTA DE INICIO (views/inicio.html)
 Pestañas Destacados / Más vistos / Novedades con el tamaño del prototipo
 (los colores del subrayado y de la píldora móvil están en la sección 4).
 ------------------*/

.tab-product .nav-tab li {
    margin-bottom: 20px;           /* prototipo: 20px (web: 15px) */
}

.tab-product .nav-tab li a {
    font-size: 14px;               /* prototipo: 14px (web: 16px) */
}

.tab-product .nav-tab .active a {
    font-weight: 400;              /* el prototipo retira la negrita de la pestaña activa; en móvil la píldora vuelve a 600 */
}

@media (max-width: 767px) {
    .tab-product .nav-tab li {
        padding: 0;
    }
}

/* Home banner slider (.home-slider): arrows and dots always visible, like the mockup carousel
   (index.html .prev / .next and .dots-container). The dots are Owl's pagination, enabled for this
   slider only in js/views/inicio.js. The rewards catalog banner (views/categorias.html, mockup
   productos.html) uses the same slider. Product carousels and the Info / Social sliders do not change. */
.home-slider.owl-carousel.nav-center-center .owl-prev,
.home-slider.owl-carousel.nav-center-center .owl-next {
    top: 42%;                      /* mockup: .prev, .next */
    opacity: 1;                    /* nav-center-center shows them only on hover */
    filter: alpha(opacity=100);
    visibility: inherit;
    background-color: transparent; /* mockup: .prev, .next */
}

.home-slider.owl-carousel.nav-center-center .owl-prev {
    left: 10px;                    /* mockup: .prev */
}

.home-slider.owl-carousel.nav-center-center .owl-next {
    right: 10px;                   /* mockup: .next */
}

.home-slider.owl-carousel.nav-style4 .owl-prev:hover,
.home-slider.owl-carousel.nav-style4 .owl-next:hover {
    background-color: transparent;
}

.home-slider.owl-carousel .owl-pagination {
    padding-top: 10px;             /* mockup: .dots-container */
    text-align: center;
}

.home-slider.owl-carousel .owl-page {
    display: inline-block;
}

.home-slider.owl-carousel .owl-page span {
    display: block;
    width: 10px;                   /* mockup: .dot */
    height: 10px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    transition: background-color 0.3s;
}

.home-slider.owl-carousel .owl-page.active span {
    background-color: var(--pv-verde); /* mockup: .dot.active */
}

/*------------------
 7. VISTAS DE ACCESO (login, recupera, cambiar-clave, registro, actualizar-datos, encuesta, errores)
 El prototipo (login.html, recuperar.html, actualizar.html, encuesta.html) usa el mismo
 cuerpo .fondo y la tarjeta .newsletter.style2, alineada a la derecha (col-md-offset-8).
 ------------------*/

.fondo {
    background-image: url("../img/bg-login-privilegio.png"); /* prototipo: images/bg-login.png; style.css apunta a ../images/, carpeta que la web no tiene (404) */
    background-position: center;
}

@media (max-width: 850px) {
    .fondo {
        height: auto;              /* el prototipo anula el alto fijo de 730px y la imagen móvil bg-login-respons.png (inexistente) */
        background-position: center;
        background-image: url("../img/bg-login-privilegio.png");
    }
}

.login-center {                    /* prototipo: .login-center */
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.newsletter.style2 {
    padding: 30px;                 /* prototipo: 30px (web: 40px 30px) */
}

select[class="normal"],
option[class="normal"],
input[type="date"],
input[type="text"],
input[type="email"],
textarea,
input[type="password"],
input[type="tel"] {
    border-radius: 5px;            /* prototipo: misma lista de selectores de style.css con esquinas de 5px */
}

/*------------------
 8. INFO PRIVILEGIO Y SOCIAL PRIVILEGIO (views/modulo-informativo.html)
 Enlace de la playlist (prototipo: .spotify en mecanica.html y social.html) y
 video de YouTube adaptable: 16:9 con el ancho de la columna, hasta el alto de
 500px del iframe del prototipo.
 ------------------*/

.spotify {                         /* prototipo: .spotify */
    color: var(--pv-verde);
    text-decoration: underline;
    font-weight: 600;
}

.modulo-informativo-seccion {
    margin-bottom: 10px;
}

.modulo-informativo-imagen {
    margin: 0 auto 20px;
}

.modulo-informativo-video {
    position: relative;
    max-width: 889px;              /* 500px de alto a 16:9 */
    margin: 0 auto;
}

.modulo-informativo-video:before {
    content: "";
    display: block;
    padding-top: 56.25%;           /* 16:9 */
}

.modulo-informativo-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/*------------------
 9. MIS METAS (views/mi-metas.html, fragments-mi-meta :: misMetasAvance)
 Barra de avance en HTML/CSS en lugar del gráfico de amCharts del prototipo
 (meta.html): escala de 0 a 100 % con una marca cada 10 %, las cinco franjas
 verdes del prototipo (#00875763 ... #008757) y el avance en negro, con el
 ancho limitado a 100 %.
 ------------------*/

.mis-metas-intro-titulo {          /* prototipo: título del texto introductorio */
    font-weight: 600;
    color: #448061;
}

.mis-metas-intro-encabezado,
.mis-metas-submeta-titulo,
.mis-metas-meta-texto {
    font-weight: 600;
}

.mis-metas-intro-titulo,
.mis-metas-intro-parrafo,
.mis-metas-marca .panel-title {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mis-metas-selectores select {     /* prototipo: style="width: 100%;height: 40px" */
    width: 100%;
    height: 40px;
    margin-bottom: 15px;
}

.mis-metas-barra {
    position: relative;
    margin: 10px 15px 0;
}

.mis-metas-barra-pista {
    position: relative;
    height: 40px;
    background: linear-gradient(to right,
        rgba(0, 135, 87, 0.39) 0%, rgba(0, 135, 87, 0.39) 20%,
        rgba(0, 135, 87, 0.48) 20%, rgba(0, 135, 87, 0.48) 40%,
        rgba(0, 135, 87, 0.58) 40%, rgba(0, 135, 87, 0.58) 60%,
        rgba(0, 135, 87, 0.76) 60%, rgba(0, 135, 87, 0.76) 80%,
        #008757 80%, #008757 100%);
}

.mis-metas-barra-avance {          /* prototipo: columna negra al 25 % del alto */
    position: absolute;
    top: 37.5%;
    left: 0;
    height: 25%;
    max-width: 100%;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.mis-metas-barra-marca {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    margin-left: -1px;
    background: rgba(255, 255, 255, 0.6);
}

.mis-metas-barra-marca:first-of-type {
    margin-left: 0;
}

.mis-metas-barra-escala {
    position: relative;
    height: 20px;
    font-size: 11px;
}

.mis-metas-barra-escala span {
    position: absolute;
    top: 3px;
    transform: translateX(-50%);
    white-space: nowrap;
}

.mis-metas-porcentaje {
    margin-top: 10px;
    font-weight: 600;
}

@media (max-width: 480px) {
    .mis-metas-barra-escala span:nth-child(even) {   /* teléfono: rótulos cada 20 %, marcas cada 10 % */
        display: none;
    }
}

/*------------------
 10. CATÁLOGO PREMIOS (views/categorias.html)
 Mockup: productos.html. The active subcategory is in section 4 and the
 banner slider in section 6 (.home-slider).
 ------------------*/

/* Order select: the web builds it with select2 (js/views/productos.js); the
   mockup uses chosen (css/chosen.css: .chosen-container-single .chosen-single)
   with the 40px height of the <select> */
.catalogo .select2-container--default .select2-selection--single {
    height: 40px;
    border: 1px solid #e8e8e8;     /* mockup: .chosen-single */
    border-radius: 5px;
    background-color: var(--pv-blanco);
}

.catalogo .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 41px 0 15px;        /* mockup: 15px padding and 26px margin for the arrow */
    line-height: 38px;
    color: #555;                   /* mockup: color inherited by .chosen-container */
}

.catalogo .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 15px;                   /* mockup: .chosen-single div */
    width: auto;
    height: 38px;
    line-height: 38px;
}

.catalogo .select2-container--default .select2-selection--single .select2-selection__arrow b {
    position: static;              /* select2 draws a border triangle */
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    border: 0;
}

.catalogo .select2-container--default .select2-selection--single .select2-selection__arrow b:before {
    font-family: 'FontAwesome';    /* mockup: .chosen-single div b:before */
    content: "\f107";
}

/* Product labels (Oferta, Nuevo, free label) with the mockup size (web: 65px
   circle and 15px pills cut on one side). Scoped to the catalog page: the home
   cards and the product detail use the same classes and keep their look. */
.catalogo .oferta {
    width: 55px;                   /* mockup: .oferta */
    height: 55px;
    padding-top: 19px;
    font-size: 13px;
}

.catalogo .nuevo,
.catalogo .otro {
    border-radius: 20px;           /* mockup: .nuevo, .otro */
    padding: 5px 15px;
    font-size: 13px;
}

/*------------------
 11. ACELERADORES (views/acelerador.html)
 El modal de detalle sigue los modales de Fabripuntos (#modalUI de
 fragments/footer.html): la imagen se centra y su alto se limita para que el
 botón "Cerrar" entre en la ventana sin desplazarse.
 ------------------*/

.pv-acelerador-imagen {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 45vh;
    margin: 0 auto;
}

/*------------------
 12. VISTA MÓVIL (hasta 767px)
 Coherencia de lo heredado en un celular, como la maqueta a 390px: nada se sale
 del marco ni desplaza la página hacia el costado. Escritorio no cambia.
 ------------------*/

@media (max-width: 767px) {
    /* Popup de bienvenida del inicio: mide 600px y se salía de la pantalla */
    .white-popup {
        width: auto;
        max-width: calc(100vw - 20px);
    }

    .white-popup img {
        max-width: 100%;
        height: auto;
    }

    /* Carruseles de productos del inicio: la .row con margen negativo sin columna
       dejaba las tarjetas pegadas a los bordes (maqueta: 15px a cada lado) */
    .product-slider > .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* Sus botones de Owl no tienen estilo y se veían como textos "prev" / "next";
       en la maqueta no hay controles y el carrusel se desliza con el dedo */
    .product-slider .owl-buttons {
        display: none;
    }

    /* Sliders de Info y Social Privilegio: las flechas solo aparecían al pasar el
       mouse y la de la derecha quedaba 30px fuera del slider (la página se desplazaba
       al costado). Igual que el slider del inicio (sección 6): visibles y adentro */
    .owl-carousel.nav-style4.nav-center-center .owl-prev,
    .owl-carousel.nav-style4.nav-center-center .owl-next {
        opacity: 1;
        filter: alpha(opacity=100);
        visibility: inherit;
        background-color: transparent;
    }

    .owl-carousel.nav-style4.nav-center-center .owl-prev {
        left: 10px;
    }

    .owl-carousel.nav-style4.nav-center-center .owl-next {
        right: 10px;
    }
}