/*
  Danzclub — Rediseño "solo estilo" del RESTO del frontend (sección 12 del
  plan de mejoras), a pedido explícito del usuario ("por ahora solo el
  estilo base, cambialo a todo de una vez"). Cubre las páginas que quedaban
  sin migrar tras el home/header/footer: carrito, checkout, categoría,
  ficha de producto (títulos sueltos fuera de las secciones ya cubiertas),
  búsqueda, tags, comparar, blog, FAQ, página de éxito de compra, 404,
  vendor (tienda pública), y todas las páginas de "Mi cuenta" (login,
  registro, dashboard, perfil, pedidos, deseos, favoritos, recuperar
  contraseña). Mismo criterio de siempre: SOLO tipografía y color puntual
  de botones, nunca ancho/layout ni HTML/JS.

  Se carga después de redesign-global.css (y por lo tanto después de
  all.css/style3.css/style2.css/redesign-home.css), para poder pisarlos
  sin necesitar !important salvo en .mybtn1 (ver más abajo, mismo motivo
  que el fix de #hero_video: hay una regla dinámica de styles.php que
  compite en especificidad).
*/

/* ------------------------------------------------------------------------
   Títulos sueltos (encabezados genéricos del theme viejo, reutilizados en
   decenas de páginas sin una clase BEM propia: resumen del carrito,
   secciones del checkout, ficha de producto, modales de Bootstrap, título
   de "Mi cuenta"/dashboard/pedidos/favoritos/login, 404, comparar, tienda
   de vendedor, etc.). Todas pasan a Poppins.
------------------------------------------------------------------------ */
.title,
.heading,
.widget__title,
.p-c-title,
.post-title,
.product-image-title,
.com-heading,
.contact-section-title,
.accordion__items--title,
.product__details--info__title,
.user-title,
.sub-title,
.product-header-title,
.modal-title {
  font-family: var(--dz-font-heading);
}

/* ------------------------------------------------------------------------
   Texto de cuerpo emparejado con los títulos de arriba (descripciones del
   comparador de productos y de los acordeones de producto/ubicaciones).
------------------------------------------------------------------------ */
.pro-desc,
.accordion__items--body__desc {
  font-family: var(--dz-font-body);
}

/* ------------------------------------------------------------------------
   Botones
------------------------------------------------------------------------ */

/* .primary__btn ya sale lavanda de fondo por la coincidencia de siempre
   (var(--secondary-color) = --dz-primary). Antes el hover lavanda solo se
   aplicaba dentro de Información Central (.section--nargin); ahora que se
   migra el resto del sitio, se extiende a TODOS los usos (filtro de
   categoría, botón de "Contacto Mayorista", "Agregar al carrito"/"Comprar
   ahora" de la ficha de producto, etc.) — la regla de .section--nargin en
   redesign-home.css queda vigente pero redundante, no genera conflicto. */
.primary__btn:hover {
  background: var(--dz-primary-hover);
}

/* Pestañas "Iniciar sesión"/"Registrarse" del modal de login/registro
   (presente en TODAS las páginas vía layouts/front.blade.php, y también
   embebido en el checkout y en la página standalone /login). Reportado
   por el usuario con capturas: la pestaña activa se veía negra y la
   inactiva turquesa, sin relación con la paleta nueva.

   Causa, encontrada con la misma técnica de inspección en vivo del fix de
   #hero_video (enumerar en document.styleSheets qué reglas matchean el
   elemento): NINGUNO de los colores viene de all.css (que trae naranja de
   base / azul marino en :active, ya desactualizados) -- ambos colores
   reales (negro y turquesa) los pone `styles.php`, que regenera
   `.comment-log-reg-tabmenu .nav-tabs .nav-link` / `.nav-link.active`
   dinámicamente según colores configurados en el admin, y gana por cargar
   al final del <head> con la misma especificidad que all.css. Iba a pasar
   lo mismo que con .mybtn1 (ver abajo): cualquier override de acá sin
   !important también perdería contra el admin en cuanto configure otro
   color ahí. Se agrega con !important para blindarlo igual. */
.comment-log-reg-tabmenu .nav-tabs .nav-link {
  background: var(--dz-bg-soft) !important;
  color: var(--dz-text) !important;
  font-family: var(--dz-font-heading);
}
.comment-log-reg-tabmenu .nav-tabs .nav-link.active {
  background: var(--dz-primary) !important;
  color: var(--dz-surface) !important;
}

/* .mybtn1: quedaban 4 usos sin migrar dentro del alcance de hoy (fuera del
   panel de administrador y del sistema de vendedores, que siguen fuera de
   alcance): el botón de "Rastrear pedido" del modal en layouts/front.blade.php
   (presente en todas las páginas), la página 404, los botones "Guardar y
   continuar" del checkout, y "Rastrear pedido" de user/order-track.blade.php.
   Se recolorean acá a la paleta nueva, igual que ya se hizo en #hero_video.

   Se repite el mismo !important en background/border-color que en
   #hero_video, por la misma razón documentada ahí: existe una regla
   dinámica en styles.php (`.mybtn1 { background: $color }`, generada según
   el color general configurado en el admin) que se carga al final del
   <head> con la misma especificidad que la base de .mybtn1 en all.css, y
   sin !important terminaría ganando por orden de carga. Con !important acá
   se garantiza el lavanda sin depender de qué color tenga configurado el
   admin. No se toca styles.php ni all.css. */
.mybtn1 {
  background: var(--dz-primary) !important;
  border-color: var(--dz-primary) !important;
  color: var(--dz-surface) !important;
}
.mybtn1:hover {
  background: var(--dz-primary-hover) !important;
  border-color: var(--dz-primary-hover) !important;
  color: var(--dz-surface) !important;
}

/* ------------------------------------------------------------------------
   Segunda pasada de auditoría ("ahora revisa en toda las paginas y haz
   bien el cambio"): tras el bug de las pestañas de login, se revisó TODO
   el sitio página por página inyectando un script en vivo (findLive(), ver
   nota del plan) que compara cada selector de styles.php contra el DOM
   real de cada página, no solo un grep de clases. Esto encontró más botones
   y elementos que seguían saliendo en negro (u otro color) por la misma
   causa de siempre: styles.php compite en especificidad con all.css y gana
   por cargar al final del <head>. Todos llevan !important por el mismo
   motivo que .mybtn1 arriba. No se toca styles.php ni all.css.
------------------------------------------------------------------------ */

/* "Realizar pedido" del carrito (/carts/). styles.php:
   .order-box .order-btn { background: $color } */
.cartpage .right-area .order-box .order-btn,
.order-box .order-btn {
  background: var(--dz-primary) !important;
  border-color: var(--dz-primary) !important;
  color: var(--dz-surface) !important;
}

/* Paso activo del stepper del checkout ("1 Dirección", etc). styles.php:
   .checkout-area .checkout-process li a.active { background: $color }
   Reportado por el usuario con captura: la punta de la flecha (triángulo
   de ::before, con border-left de color) se veía de otro color distinto a
   la caja -- esta regla de aquí solo corregía el "background" de la caja,
   nunca tocó el ::before, así que la punta seguía tomando el $color de
   styles.php sin !important de por medio (gana por orden de carga sobre
   el #ff5500 de theme-custom.css). Se agrega el override del ::before
   (y el de :hover, mismo mecanismo) para que la flecha quede de un solo
   color sólido. */
.checkout-area .checkout-process li a.active {
  background: var(--dz-primary) !important;
  border-color: var(--dz-primary) !important;
  color: var(--dz-surface) !important;
}
.checkout-area .checkout-process li a.active::before,
.checkout-area .checkout-process li a:hover::before {
  border-left-color: var(--dz-primary) !important;
}
.checkout-area .checkout-process li a:hover {
  background: var(--dz-primary) !important;
  color: var(--dz-surface) !important;
}

/* Relleno del radio seleccionado (método de envío/empaque del checkout, y
   variantes de producto -- mismo componente, misma causa). styles.php:
   .radio-design .checkmark::after { background: $color }
   .custom-control-input:checked~.custom-control-label::before { background: $color }
   Este último no se pudo verificar visualmente porque ningún producto del
   sitio de prueba tiene variantes de talla/color configuradas todavía,
   pero el mecanismo es idéntico al de .radio-design (confirmado en vivo en
   el checkout), así que se corrige preventivamente. */
.radio-design .checkmark::after,
.custom-control-input:checked ~ .custom-control-label::before {
  background: var(--dz-primary) !important;
  border-color: var(--dz-primary) !important;
}

/* Botón "enviar" de los formularios de login/registro/recuperar contraseña
   (comparte plantilla en /user/login, /user/forgot y el modal embebido en
   todas las páginas). styles.php:
   .login-area .submit-btn { background: $color } */
.login-area .submit-btn,
.login-signup .login-area .submit-btn {
  background: var(--dz-primary) !important;
  border-color: var(--dz-primary) !important;
  color: var(--dz-surface) !important;
}

/* Insignia de fecha y botón "Leer más" del listado de blog. styles.php:
   .blogpagearea .blog-box .blog-images .img .date { background: $color }
   .blogpagearea .blog-box .details .read-more-btn { background: $color } */
.blogpagearea .blog-box .blog-images .img .date,
.blogpagearea .blog-box .details .read-more-btn {
  background: var(--dz-primary) !important;
  color: var(--dz-surface) !important;
}

/* Encabezados del acordeón de preguntas frecuentes (/faq). styles.php:
   .ui-accordion .ui-accordion-header { background: $color } */
.ui-accordion .ui-accordion-header {
  background: var(--dz-primary) !important;
  color: var(--dz-surface) !important;
}

/* Modal "Contactar al vendedor" (ficha de producto y tienda pública).
   styles.php:
   .message-modal .modal .modal-dialog .modal-header { background: $color }
   .message-modal .modal .contact-form .submit-btn { background: $color } */
.message-modal .modal .modal-dialog .modal-header {
  background: var(--dz-primary) !important;
  color: var(--dz-surface) !important;
}
.message-modal .modal .contact-form .submit-btn {
  background: var(--dz-primary) !important;
  border-color: var(--dz-primary) !important;
  color: var(--dz-surface) !important;
}

/* Nota: .login-area .header-area .title / .form-input i / .social-area
   .title (color de texto/íconos, no de fondo) y .product-details-page
   .product-price .price también salen de styles.php en negro puro, pero no
   se tocan: el negro es visualmente indistinguible de --dz-text (#18181B),
   así que no hay una inconsistencia real que corregir ahí.

   Nota: .login-btn (prompt de "inicia sesión para comentar" en
   includes/comment-replies.blade.php) se investigó y esa vista NO está
   incluida desde ninguna página del frontend actual (no hay ningún
   @include('includes.comment-replies') en todo resources/views) -- es
   código muerto, no un bug real, así que no se corrige. */

/* ------------------------------------------------------------------------
   Breadcrumb ("Inicio » Sección"), a pedido del usuario ("puedes mejorar
   el breadcrumbs"). Markup idéntico en las ~18+ vistas que lo usan
   (`.breadcrumb-area .pages`, ver front/faq.blade.php, category.blade.php,
   product.blade.php, checkout.blade.php, etc.), así que un solo bloque acá
   lo mejora en todo el sitio a la vez.

   Cambios:
   - Fondo gris plano (#f5f5f5, hardcodeado en all.css) -> --dz-bg-soft, el
     mismo tono neutro que ya usa el resto del rediseño.
   - Tipografía -> Inter (var(--dz-font-body)), consistente con el resto
     del texto de navegación/secundario del sitio.
   - Enlaces en --dz-text-muted por defecto (antes heredaban el negro del
     body vía `a { color: inherit }`) para que se lean como navegación
     secundaria, no como texto de contenido.
   - El separador (ícono ::after de IcoFont) hereda el color del link, así
     que queda automáticamente en el mismo tono muted.

   Bug encontrado de paso, mismo patrón de siempre: `styles.php` define
   `.breadcrumb-area .pages li a:hover { color: $color }` DOS VECES (líneas
   ~186 y ~457), compitiendo con el hover naranja (`#ff5500`) de all.css y
   ganando por cargar al final del <head> -- en este sitio de prueba
   quedaba en negro ($color actual del admin), no en el color esperado.
   Se corrige a --dz-primary-hover con !important, mismo criterio que el
   resto de los overrides de esta hoja. */
.breadcrumb-area {
  background: var(--dz-bg-soft);
}
.breadcrumb-area .pages li a {
  font-family: var(--dz-font-body);
  color: var(--dz-text-muted);
}
.breadcrumb-area .pages li a:hover {
  color: var(--dz-primary-hover) !important;
}
.breadcrumb-area .pages li:last-child a {
  color: var(--dz-text);
  font-weight: 500;
}


/* ------------------------------------------------------------------------
   Bug real: texto/icono invisibles en hover de ".primary__btn" (ej. los
   botones "Anadir al carrito" y "Comprar" de la ficha de producto) --
   a pedido del usuario, que mando una captura mostrando los botones.

   Causa: ".primary__btn:hover" (en base.css) pone el texto en blanco, pero
   ese boton es un <li> que envuelve un <a> que ocupa todo el espacio
   clickeable -- al pasar el mouse por encima, el navegador tambien activa
   el estado :hover del propio <a>, y ahi entra a jugar una regla GLOBAL
   de base.css pensada para links de texto comunes del sitio:
   "a:hover { color: var(--secondary-color) !important; }" (la lavanda).
   Por tener !important, le gana al blanco de ".primary__btn:hover" en
   cuanto el cursor esta sobre el <a> (que es casi siempre, al ser un boton
   grande) -- el resultado es texto/icono lavanda sobre el fondo
   lavanda-hover del boton (--dz-primary-hover, mas oscuro), practicamente
   invisible. Pasa en TODOS los usos de ".primary__btn" en el sitio, no
   solo en la ficha de producto (se reprodujo primero en "Comprar", que al
   ser un boton ancho de 100% de ancho es mas facil que el cursor quede
   sobre el <a>; en botones mas chicos como "Anadir al carrito" tambien
   pasa, solo que es menos facil de notar porque el cursor puede quedar
   sobre el padding del <li> sin tocar el <a>).

   Fix: se blinda el <a> (y su icono, que hereda el color) con !important
   para que gane sobre la regla global de base.css.

   Actualizacion (reportado por el usuario con otra captura, "en el cart
   tambien pasa lo mismo"): el mismo bug aparece en el boton "Finalizar
   Compra" del minicart (resources/views/load/cart.blade.php) -- ahi la
   clase ".primary__btn" esta puesta directo sobre el <a>
   (<a class="primary__btn minicart__button--link">), no sobre un <li>
   que lo envuelve. El selector ".primary__btn a:hover" de arriba no
   alcanza a cubrir ese caso porque no hay un <a> descendiente, es el
   propio elemento. Se agrega "a.primary__btn:hover" para blindar
   tambien ese caso. */
.primary__btn a:hover,
.primary__btn a:hover i,
a.primary__btn:hover {
  color: var(--white-color) !important;
}

/* ------------------------------------------------------------------------
   Checkbox personalizado "Aceptas nuestros Politicas de privacidad" del
   minicart, y los dos checkboxes del Paso 1 del checkout ("Deseas crear
   una cuenta?" / "Enviar a una direccion diferente?") -- reportado por el
   usuario con captura (se veian negros, no lavanda).

   Primer intento (ya descartado): pensé que era falta de "accent-color"
   en el checkbox nativo. Era incorrecto -- investigando en vivo (DOM) se
   vio que el <input type="checkbox"> real tiene "display:none" (se oculta
   a proposito) y lo que se ve en pantalla es el pseudo-elemento
   "label:before" (el check ✔), vía esta regla ya existente en
   theme-custom.css:
     input[type=checkbox] + label:before { ... }
     input[type=checkbox]:checked + label:before { background-color: #ff5500; ... }
   O sea que "accent-color" en el input oculto no tiene ningun efecto
   visual -- por eso no cambiaba nada.

   Causa real: el mismo problema de siempre con styles.php (ver nota de
   "Segunda pasada de auditoría" mas arriba) -- trae su PROPIA regla para
   el mismo selector exacto:
     input[type=checkbox]:checked + label:before {
       background-color: <?php echo $color; ?>;
       border-color: <?php echo $color; ?>;
     }
   $color es el color configurado en Ajustes generales (admin), nunca
   migrado a la paleta nueva -- y como styles.php carga al final del
   <head>, gana por orden de carga sobre el #ff5500 de theme-custom.css.
   Se corrige aqui con el mismo selector + !important, igual que el resto
   de este archivo. */
input[type=checkbox]:checked + label:before {
  background-color: var(--dz-primary, #9594D2) !important;
  border-color: var(--dz-primary, #9594D2) !important;
}

/* ------------------------------------------------------------------------
   Select "nice-select" (plugin jQuery usado en varios <select> del sitio,
   ej. recojo en tienda del checkout) con texto largo que se sale de su
   caja -- reportado por el usuario con captura (la dirección completa de
   la tienda se desbordaba fuera del borde del campo).

   Causa: el plugin reemplaza el <select> original por un <div
   class="nice-select form-control nice">, copiando la clase
   "form-control" (que en Bootstrap da width:100%), pero vendor.css trae su
   propia regla ".nice-select { width: auto; ... white-space: nowrap; }"
   que, por orden de carga, gana sobre el width:100% de "form-control" --
   la caja termina midiendo lo que mide el texto, no lo que mide su
   columna. Se corrige igual que el resto de este archivo: mismo selector,
   forzando el ancho a 100% de su contenedor y recortando el texto que no
   entre con puntos suspensivos en vez de desbordarlo. */
.nice-select.form-control {
  width: 100% !important;
  max-width: 100% !important;
}
.nice-select .current {
  display: inline-block;
  max-width: calc(100% - 15px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}