/* 11/11/2026 Home nueva de dionequimica.com.ar. Se carga desde index.html; para volver atras, sacar las 2 lineas de index.html. */

/* Lo que se saca: banners informativos viejos, mapa en ingles y video viejo. Los sellos (logos-footer) quedan. */
app-home > app-home-banner,
app-home > div.container:not(.logos-footer),
app-home > div.video-home { display: none !important; }

.dn { font-family: Roboto, "Helvetica Neue", Arial, sans-serif; color: #1f2933; box-sizing: border-box; }
.dn *, .dn *::before, .dn *::after { box-sizing: border-box; }
.dn-wrap { max-width: 1200px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.dn-h2 { margin: 0 0 6px; font-family: "Barlow Condensed", Roboto, sans-serif; font-weight: 700; font-size: 38px; line-height: 1.05; color: #003b62; }
.dn-sub { margin: 0 0 22px; font-size: 16px; color: #44515e; }
.dn a { text-decoration: none; }

/* Franja "por que Dione" */
.dn-trust { background: #eef4fa; border-bottom: 1px solid #d6e3f0; }
.dn-trust .dn-wrap { padding-top: 24px; padding-bottom: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.dn-trust__item { display: flex; gap: 14px; align-items: center; }
.dn-ico { width: 52px; height: 52px; flex: none; border-radius: 50%; background: #004996; display: flex; align-items: center; justify-content: center; }
.dn-trust__t { font-weight: 700; font-size: 17px; color: #003b62; }
.dn-trust__s { font-size: 14px; color: #44515e; }

/* Categorias */
.dn-cats .dn-wrap { padding-top: 48px; padding-bottom: 16px; }
.dn-cats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; }
.dn-cat { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 8px; border: 1px solid #d6e3f0; border-radius: 16px; background: #fff; color: #003b62 !important; font-weight: 500; font-size: 15px; text-align: center; transition: border-color .15s, box-shadow .15s, transform .15s; }
.dn-cat:hover { border-color: #004996; box-shadow: 0 6px 18px rgba(0, 59, 98, .12); transform: translateY(-2px); }
.dn-cat__ico { width: 64px; height: 64px; border-radius: 50%; background: #eef4fa; display: flex; align-items: center; justify-content: center; }

/* Franja comercios */
.dn-b2b { background: #003b62; color: #fff; margin-top: 32px; }
.dn-b2b__main { padding-top: 56px; padding-bottom: 56px; display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.dn-b2b__txt { flex: 1 1 420px; min-width: 0; }
.dn-tag { display: inline-block; background: #c23d39; color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.dn-b2b h2 { margin: 16px 0 12px; font-family: "Barlow Condensed", Roboto, sans-serif; font-style: italic; font-size: 52px; line-height: 1; font-weight: 700; color: #fff; }
.dn-b2b p { margin: 0 0 24px; font-size: 18px; line-height: 1.5; color: #d6e3f0; }
.dn-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.dn-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 22px; border-radius: 12px; font-weight: 700; font-size: 16px; }
.dn-btn--white { background: #fff; color: #003b62 !important; }
.dn-btn--line { border: 2px solid #fff; color: #fff !important; }
.dn-btn--blue { background: #004996; color: #fff !important; }
.dn-btn--outline { border: 2px solid #004996; color: #004996 !important; }
.dn-steps { flex: 1 1 340px; min-width: 0; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.dn-step { display: flex; gap: 16px; align-items: flex-start; background: #004996; border-radius: 16px; padding: 18px 20px; }
.dn-step__n { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #003b62; font-weight: 700; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.dn-step__t { font-weight: 700; font-size: 18px; }
.dn-step__s { font-size: 15px; color: #d6e3f0; }
.dn-stats { border-top: 1px solid #1d5683; }
.dn-stats .dn-wrap { padding-top: 24px; padding-bottom: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; text-align: center; }
.dn-stat__n { font-family: "Barlow Condensed", Roboto, sans-serif; font-size: 46px; font-weight: 700; line-height: 1; }
.dn-stat__s { font-size: 15px; color: #d6e3f0; }

/* Local de fabrica */
.dn-visit .dn-wrap { padding-top: 48px; padding-bottom: 32px; }
.dn-visit__card { border: 1px solid #d6e3f0; border-radius: 16px; padding: 28px; display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; justify-content: space-between; }
.dn-visit__info { display: flex; flex-direction: column; gap: 6px; font-size: 16px; color: #44515e; }
.dn-visit__info strong { color: #1f2933; font-size: 17px; font-weight: 500; }

/* Celular */
@media (max-width: 600px) {
  .dn-h2 { font-size: 28px; }
  .dn-sub { font-size: 15px; margin-bottom: 14px; }

  /* Por que Dione: 2x2 compacto */
  .dn-trust .dn-wrap { grid-template-columns: 1fr 1fr; gap: 14px 10px; padding-top: 16px; padding-bottom: 16px; }
  .dn-trust__item { flex-direction: column; text-align: center; gap: 6px; }
  .dn-ico { width: 40px; height: 40px; }
  .dn-ico svg { width: 20px; height: 20px; }
  .dn-trust__t { font-size: 14px; line-height: 1.2; }
  .dn-trust__s { font-size: 12px; line-height: 1.3; }

  /* Categorias: una fila que se desliza con el dedo */
  .dn-cats .dn-wrap { padding-top: 28px; padding-right: 0; }
  .dn-cats__grid { display: flex; overflow-x: auto; gap: 10px; padding: 2px 16px 10px 0; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .dn-cats__grid::-webkit-scrollbar { display: none; }
  .dn-cat { flex: 0 0 104px; scroll-snap-align: start; padding: 14px 6px; font-size: 13px; gap: 8px; border-radius: 14px; }
  .dn-cat__ico { width: 52px; height: 52px; }
  .dn-cat__ico svg { width: 26px; height: 26px; }

  /* Comercios */
  .dn-b2b { margin-top: 16px; }
  .dn-b2b__main { padding-top: 32px; padding-bottom: 32px; gap: 24px; }
  .dn-b2b h2 { font-size: 36px; margin-top: 12px; }
  .dn-b2b p { font-size: 16px; margin-bottom: 18px; }
  .dn-btns { width: 100%; }
  .dn-btn { flex: 1 1 100%; justify-content: center; }
  .dn-step { padding: 14px 16px; gap: 12px; }
  .dn-step__n { width: 34px; height: 34px; font-size: 17px; }
  .dn-step__t { font-size: 16px; }
  .dn-step__s { font-size: 14px; }
  .dn-stats .dn-wrap { grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 18px; padding-bottom: 18px; }
  .dn-stat__n { font-size: 32px; }
  .dn-stat__s { font-size: 12px; line-height: 1.25; }

  /* Mostrador de fabrica */
  .dn-visit .dn-wrap { padding-top: 28px; padding-bottom: 16px; }
  .dn-visit__card { padding: 20px; gap: 16px; }
  .dn-visit__info { font-size: 15px; }
  .dn-visit__info strong { font-size: 16px; }
  .dn-visit .dn-btns { flex-wrap: nowrap; gap: 8px; }
  .dn-visit .dn-btn { flex: 1 1 0; padding: 0 10px; font-size: 15px; text-align: center; }
}

/* ===== 11/11/2026 v3: carga sin "ruedita", tarjetas de producto nuevas, menu celular ===== */

/* Pantalla de carga de arranque (cuadraditos animados): no se muestra */
#loader-overlay { display: none !important; }
/* Ruedita en cada foto: en su lugar, fondo gris suave */
figure.image mat-spinner, app-image mat-spinner { display: none !important; }
figure.image { background: #f3f6f9; border-radius: 12px; }

/* Tarjetas de producto (listados y "mas vendidos") */
mat-card.product-card.mat-card {
  border: 1px solid #e1e8f0 !important; border-radius: 16px !important; box-shadow: none !important;
  padding: 0 !important; overflow: hidden; transition: box-shadow .15s, transform .15s, border-color .15s;
  display: flex; flex-direction: column;
}
mat-card.product-card.mat-card:hover { box-shadow: 0 8px 24px rgba(0, 59, 98, .12) !important; border-color: #c9d8e8 !important; transform: translateY(-2px); }
mat-card.product-card > a { display: block; padding: 12px 12px 0; }
mat-card.product-card figure.image { width: 100% !important; height: 190px !important; margin: 0 !important; background: #f5f8fb; }
mat-card.product-card figure.image img { width: 100% !important; height: 100% !important; object-fit: contain !important; padding: 10px; box-sizing: border-box; }
mat-card.product-card .product-card__content {
  display: flex !important; flex-direction: column; text-align: left !important; padding: 12px 16px 16px !important; gap: 4px; flex: 1;
}
mat-card.product-card .product-card__content p.mat-h3 {
  order: 1; margin: 0 !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.3; color: #1f2933;
  display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; height: auto !important; padding: 0 !important;
}
mat-card.product-card .product-card__content > div:has(> p.mat-h3) { order: 1; }
mat-card.product-card .product-card__content h4.mat-h1 { order: 2; margin: 6px 0 0 !important; font-size: 22px !important; font-weight: 700 !important; color: #003b62 !important; line-height: 1.1; }
mat-card.product-card .product-card__content h4.mat-h1 > span { font-size: 12px !important; font-weight: 400; color: #5b6b7a; padding-top: 2px !important; }
mat-card.product-card .product-card__content h4.mat-h1 > span[style*="line-through"] { display: inline !important; color: #5b6b7a !important; margin-left: 6px; }
mat-card.product-card .dtosEscalonados { display: none !important; }
mat-card.product-card .dn-esc { order: 3; margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
mat-card.product-card .dn-esc__t { font-size: 12px; font-weight: 700; color: #004996; text-transform: uppercase; letter-spacing: .04em; }
mat-card.product-card .dn-esc__r { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: #1f2933; background: #eef4fa; border-radius: 8px; padding: 5px 9px; }
mat-card.product-card .dn-esc__r b { color: #003b62; white-space: nowrap; }
mat-card.product-card app-product-add-to-cart { order: 4; margin-top: auto; padding-top: 10px; }
mat-card.product-card .product-card__add-to-favorite { position: absolute !important; top: 18px !important; right: 18px !important; background: #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
mat-card.product-card .discount-percent { order: 0; align-self: flex-start; background: #c23d39; color: #fff; font-weight: 700; font-size: 12px; padding: 3px 8px; border-radius: 999px; }

/* Celular: grilla de 2 columnas con tarjetas verticales */
@media (max-width: 600px) {
  div.products-list { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 10px; }
  div.products-list > app-product { width: auto !important; max-width: none !important; margin: 0 !important; min-width: 0; }
  mat-card#product-mobile.product-card.mat-card { margin: 0 !important; width: auto !important; height: 100%; flex-direction: column !important; align-items: stretch !important; }
  mat-card#product-mobile.product-card > a { padding: 8px 8px 0; width: auto !important; max-width: none !important; flex: none !important; display: block !important; }
  mat-card#product-mobile .product-card__content { width: auto !important; max-width: none !important; flex: 1 1 auto !important; margin: 0 !important; }
  mat-card#product-mobile figure.image { width: 100% !important; min-width: 0 !important; max-width: none !important; height: 130px !important; }
  mat-card#product-mobile app-image { width: 100% !important; }
  mat-card#product-mobile .product-card__content { padding: 8px 10px 12px !important; }
  mat-card#product-mobile .product-card__content p.mat-h3 { font-size: 13.5px !important; }
  mat-card#product-mobile .product-card__content h4.mat-h1 { font-size: 17px !important; }
  mat-card#product-mobile .product-card__content h4.mat-h1 > span { font-size: 11px !important; }
  mat-card#product-mobile .product-card__add-to-favorite { top: 12px !important; right: 12px !important; transform: scale(.8); }
  mat-card#product-mobile .dn-esc__t { font-size: 10.5px; }
  mat-card#product-mobile .dn-esc__r { font-size: 11.5px; padding: 3px 6px; gap: 4px; }
}

/* Menu de celular: textos que faltaban (Contacto, Nosotros, Blog) */
#hamburger li a .dn-lbl { margin-left: 0; }

/* ===== Registro mas simple (/user/register) ===== */
.dn-oculto { display: none !important; }
.dn-reg .user-register-img { display: none !important; }
.dn-reg .form__title h1 { font-size: 30px !important; font-weight: 700 !important; color: #003b62; margin-bottom: 4px !important; }
.dn-reg-sub { margin: 0 0 8px; color: #44515e; font-size: 15px; }
.dn-reg h2.dn-reg-h { font-size: 18px !important; font-weight: 700 !important; color: #003b62; margin: 22px 0 6px !important; padding-top: 14px; border-top: 1px solid #e1e8f0; }
.dn-reg form > h2.dn-reg-h:first-child { border-top: 0; padding-top: 0; margin-top: 4px !important; }
.dn-reg .mat-form-field { font-size: 16px; }
.dn-arca { font-size: 13px; color: #5b6b7a; margin: -6px 0 8px; min-height: 0; }
.dn-arca:empty { display: none; }
.dn-arca--ok { color: #1a7f45; font-weight: 500; }
.dn-entrega-sw { display: flex; align-items: center; gap: 8px; margin: 18px 0 2px; font-size: 15px; font-weight: 500; color: #003b62; cursor: pointer; }
.dn-entrega-sw input { width: 18px; height: 18px; accent-color: #004996; }
.dn-entrega-nota { font-size: 13px; color: #5b6b7a; margin-bottom: 8px; }
.dn-reg form:not(.dn-entrega-on) .dn-entrega { display: none !important; }
.dn-reg .form__actions button { min-height: 48px; font-size: 16px; border-radius: 12px !important; }

/* ===== Encabezado nuevo: azul Dione liso con linea roja ===== */
mat-toolbar.nav.mat-toolbar, mat-toolbar.nav-mobile.mat-toolbar {
  background: #003b62 !important; background-image: none !important;
  border-bottom: 3px solid #c23d39; box-shadow: 0 4px 14px rgba(0, 30, 60, .18) !important;
}
mat-toolbar.nav .menu-products { background: transparent !important; border-top: 1px solid rgba(255, 255, 255, .14); box-shadow: none !important; }
mat-toolbar.nav .menu-products a.nav-menu__link { color: #fff !important; opacity: .92; border-bottom: 2px solid transparent; padding-bottom: 2px; transition: opacity .15s, border-color .15s; }
mat-toolbar.nav .menu-products a.nav-menu__link:hover { opacity: 1; border-bottom-color: #fff; }
mat-toolbar.nav .form-search { background: #fff !important; border-radius: 999px !important; overflow: hidden; box-shadow: none !important; }
mat-toolbar.nav .form-search input.input { background: #fff !important; border: 0 !important; padding-left: 18px !important; font-size: 15px !important; }
mat-toolbar.nav .form-search__button { background: #c23d39 !important; color: #fff !important; border-radius: 999px !important; }
a.nav-user-button.not-logged { background: #c23d39 !important; color: #fff !important; border-radius: 999px !important; font-weight: 600; padding: 0 20px !important; }

/* ===== Pie nuevo con legales ===== */
app-footer footer.dn-pie-on > .container { display: none !important; }
.dn-pie { background: #003b62; color: #d6e3f0; font-family: Roboto, "Helvetica Neue", Arial, sans-serif; border-top: 3px solid #c23d39; }
.dn-pie a { color: #fff; text-decoration: none; }
.dn-pie a:hover { text-decoration: underline; }
.dn-pie__cols { max-width: 1200px; margin: 0 auto; padding: 40px 16px 24px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
.dn-pie h3 { margin: 0 0 12px; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.dn-pie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.dn-pie__logo { height: 44px; width: auto; display: block; margin-bottom: 12px; }
.dn-pie__txt { font-size: 14px; line-height: 1.5; margin: 0 0 14px; }
.dn-pie__redes { display: flex; gap: 10px; }
.dn-pie__redes a { width: 40px; height: 40px; border-radius: 50%; background: #004996; display: flex; align-items: center; justify-content: center; }
.dn-pie__redes a:hover { background: #c23d39; text-decoration: none; }
.dn-pie__arr { display: inline-block; margin-top: 4px; border: 1.5px solid #fff; border-radius: 8px; padding: 6px 10px; font-weight: 600; }
.dn-pie__base { border-top: 1px solid #1d5683; }
.dn-pie__base > div { max-width: 1200px; margin: 0 auto; padding: 16px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; font-size: 13px; }
.dn-pie__df img { height: 60px; width: auto; display: block; background: #fff; border-radius: 4px; }
@media (max-width: 900px) { .dn-pie__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .dn-pie__cols { grid-template-columns: 1fr 1fr; gap: 22px 16px; padding-top: 28px; }
  .dn-pie__cols > div:first-child { grid-column: 1 / -1; }
}
/* Iconos del encabezado siempre blancos (en celular se perdian sobre el azul) */
mat-toolbar.nav-mobile > mat-toolbar-row .mat-icon, mat-toolbar.nav-mobile > mat-toolbar-row > div > * > span[style], mat-toolbar.nav-mobile > mat-toolbar-row button,
mat-toolbar.nav .menu-user .mat-icon { color: #fff !important; }

/* Menu lateral del celular: fondo blanco, textos azules, logo arriba */
#hamburger, #hamburger-categories { background: #fff !important; }
#hamburger a, #hamburger span, #hamburger li, #hamburger .mat-icon,
#hamburger-categories a, #hamburger-categories li { color: #003b62 !important; }
#hamburger li a::before { color: #004996 !important; }
#hamburger .notLogged a, #hamburger .notLogged span { color: #fff !important; }
#hamburger .notLogged .mat-icon { color: #c9d8e8 !important; }
#hamburger .close-hamburger, #hamburger-categories .close-categories { background: #003b62 !important; box-shadow: none !important; border-bottom: 3px solid #c23d39; }
#hamburger .close-hamburger a, #hamburger-categories .close-categories a { color: #fff !important; outline: none !important; }
#hamburger .close-hamburger a.nav-brand-button { font-size: 0 !important; display: inline-block; width: 110px; height: 44px; background: url(/assets/img/DioneLogo.png) no-repeat left center / contain; border: 0 !important; }
#hamburger .separador { background: #e1e8f0 !important; }
#hamburger-categories li { border-bottom: 1px solid #eef2f6; }
mat-toolbar.nav-mobile .mat-toolbar-row:first-child { justify-content: space-between; }
mat-toolbar.nav-mobile img { filter: none; }

/* ===== "Los mas vendidos" nuevo ===== */
.dn-mv .dn-wrap { padding-top: 32px; padding-bottom: 16px; }
.dn-mv__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.dn-mv__card { display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 14px; border: 1px solid #e1e8f0; border-radius: 16px; background: #fff; color: #1f2933 !important; transition: box-shadow .15s, transform .15s, border-color .15s; }
.dn-mv__card:hover { box-shadow: 0 8px 24px rgba(0, 59, 98, .12); border-color: #c9d8e8; transform: translateY(-2px); }
.dn-mv__img { height: 170px; border-radius: 12px; background: #f5f8fb; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.dn-mv__img img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 10px; box-sizing: border-box; }
.dn-mv__fam { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #004996; }
.dn-mv__n { font-size: 15px; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.dn-mv__p { font-size: 21px; font-weight: 700; color: #003b62; }
.dn-mv__p span { font-size: 12px; font-weight: 400; color: #5b6b7a; }
.dn-mv__p--ver { font-size: 16px; color: #004996; }
.dn-mv__btn { margin-top: auto; align-self: stretch; text-align: center; padding: 10px 12px; border-radius: 10px; background: #c23d39; color: #fff; font-weight: 700; font-size: 14px; }
@media (max-width: 600px) {
  .dn-mv .dn-wrap { padding-right: 0; }
  .dn-mv__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding: 2px 16px 10px 0; scrollbar-width: none; }
  .dn-mv__grid::-webkit-scrollbar { display: none; }
  .dn-mv__card { flex: 0 0 62%; scroll-snap-align: start; }
  .dn-mv__img { height: 140px; }
}

/* Listado: boton "Ver mas productos" en vez de carga infinita */
.dn-vermas { display: block; width: 100%; flex: 0 0 100%; grid-column: 1 / -1; box-sizing: border-box; text-align: center; padding: 24px 16px 40px; font-family: Roboto, "Helvetica Neue", Arial, sans-serif; }
.dn-vermas button { min-height: 48px; padding: 0 32px; border: 2px solid #004996; border-radius: 12px; background: #fff; color: #004996; font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; }
.dn-vermas button:hover { background: #004996; color: #fff; }
.dn-vermas button:disabled { opacity: .6; cursor: default; }
.dn-vermas__n { margin-top: 8px; font-size: 14px; color: #5b6b7a; }

/* ===== Pagina de producto ===== */
.dn-pv .dtosEscalonados { display: none !important; }
.dn-pv aside h2.price-title { display: none !important; }
.dn-pv mat-card.mat-card { border-radius: 16px !important; box-shadow: none !important; border: 1px solid #e1e8f0; }
.dn-pv aside.aside > mat-card { position: sticky; top: 170px; }
.dn-pv h1.desktop-title { font-size: 26px !important; line-height: 1.2 !important; font-weight: 700 !important; color: #003b62 !important; }
.dn-pv p.caption.code { font-size: 13px !important; color: #5b6b7a; margin: 2px 0 !important; }
.dn-pv mat-card-content h2.mat-h1 { font-size: 20px !important; font-weight: 700 !important; color: #003b62; }
.dn-pv .buttons .fileDownload { display: none; }
.dn-ficha { margin-top: 14px; font-family: Roboto, "Helvetica Neue", Arial, sans-serif; }
.dn-ficha__precio { font-size: 34px; font-weight: 700; color: #003b62; line-height: 1.1; }
.dn-ficha__uni { font-size: 14px; color: #5b6b7a; margin-bottom: 12px; }
.dn-ficha__esc { background: #eef4fa; border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; }
.dn-ficha__esct { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #004996; margin-bottom: 6px; }
.dn-ficha__escr { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 4px 0; border-top: 1px solid #d6e3f0; }
.dn-ficha__escr:first-of-type { border-top: 0; }
.dn-ficha__escr span { flex: 1; color: #1f2933; }
.dn-ficha__escr b { color: #003b62; white-space: nowrap; }
.dn-ficha__escr em { font-style: normal; font-size: 12px; font-weight: 700; color: #fff; background: #1a7f45; border-radius: 999px; padding: 2px 7px; }
.dn-ficha__acc { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.dn-btn2 { display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 12px; font-weight: 700; font-size: 15px; text-decoration: none !important; }
.dn-btn2--rojo { background: #c23d39; color: #fff !important; }
.dn-btn2--wa { background: #fff; color: #1a7f45 !important; border: 2px solid #1a7f45; }
.dn-btn2--linea { background: #fff; color: #004996 !important; border: 2px solid #c9d8e8; }
.dn-ficha__crear { text-align: center; font-size: 13px; color: #004996 !important; }
.dn-ficha__info { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #44515e; }
.dn-ficha__info li { padding-left: 22px; position: relative; }
.dn-ficha__info li::before { content: ""; position: absolute; left: 4px; top: 4px; width: 10px; height: 6px; border-left: 2px solid #1a7f45; border-bottom: 2px solid #1a7f45; transform: rotate(-45deg); }
@media (max-width: 900px) { .dn-pv aside.aside > mat-card { position: static; } }

/* Ficha de producto: relacionados */
.dn-rel { margin-top: 8px; padding-bottom: 32px; clear: both; width: 100%; }
.dn-rel .dn-h2 { font-size: 26px; margin-bottom: 14px; }
.dn-rel .dn-mv__grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
@media (max-width: 600px) { .dn-rel .dn-mv__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding-bottom: 10px; scrollbar-width: none; } }

/* Sellos viejos del inicio (ANMAT, IRAM, Google): fuera, pedido de Eze 11/11 */
app-home > div.logos-footer { display: none !important; }

/* ===== Ingreso ===== */
.dn-login .login-img { display: none !important; }
.dn-login .form__title h1 { font-size: 30px !important; font-weight: 700 !important; color: #003b62; margin-bottom: 4px !important; }
.dn-login .form__actions { flex-direction: column !important; align-items: stretch !important; gap: 10px; }
.dn-login .form__actions button[type=submit] { width: 100%; min-height: 48px; border-radius: 12px !important; background: #c23d39 !important; color: #fff !important; font-size: 16px; font-weight: 700; }
.dn-login .form__actions a.link[href="/user/register"] { display: none; }
.dn-login .form__actions > div { text-align: center; }
.dn-login mat-error { font-size: 12px; }
.dn-login .ng-untouched mat-error, .dn-login mat-form-field.ng-untouched .mat-form-field-subscript-wrapper { visibility: hidden; }
.dn-login-nuevo { margin-top: 22px; padding-top: 18px; border-top: 1px solid #e1e8f0; display: flex; flex-direction: column; gap: 10px; text-align: center; font-family: Roboto, "Helvetica Neue", Arial, sans-serif; }
.dn-login-nuevo__t { font-weight: 700; color: #003b62; font-size: 16px; }
.dn-login-nuevo__p { margin: 4px 0 0; font-size: 14px; color: #44515e; }
.dn-login-nuevo__p a { color: #1a7f45; font-weight: 600; }

/* ===== Registro expres (con datos de ARCA) ===== */
form.dn-expres .dn-x { display: none !important; }
.dn-resumen { background: #e8f6ee; border: 1px solid #b7e1c7; border-radius: 12px; padding: 12px 14px; margin: 4px 0 14px; font-size: 14px; color: #14532d; display: flex; flex-direction: column; gap: 2px; font-family: Roboto, "Helvetica Neue", Arial, sans-serif; }
.dn-resumen b { font-size: 15px; }
.dn-resumen__ed { align-self: flex-start; margin-top: 6px; background: none; border: 0; padding: 0; color: #004996; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }

/* ===== Listado: sin panel de filtros, barra con titulo y vista Grilla / Lista ===== */
.dn-listado { flex-wrap: wrap !important; }
.dn-listado > .products-filter { display: none !important; }
.dn-listado > div.products-list { flex: 1 1 100% !important; max-width: 100% !important; width: 100% !important; }
.dn-barra { flex: 1 1 100%; width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 4px 0 16px; font-family: Roboto, "Helvetica Neue", Arial, sans-serif; }
.dn-barra__t { margin: 0 !important; font-family: "Barlow Condensed", Roboto, sans-serif; font-size: 34px !important; font-weight: 700 !important; color: #003b62; line-height: 1.1 !important; }
.dn-barra__sw { display: inline-flex; border: 1px solid #c9d8e8; border-radius: 10px; overflow: hidden; background: #fff; }
.dn-barra__sw button { border: 0; background: #fff; color: #004996; font: inherit; font-size: 14px; font-weight: 600; padding: 9px 14px; cursor: pointer; min-height: 40px; }
.dn-barra__sw button[aria-pressed="true"] { background: #004996; color: #fff; }

/* Vista lista: una fila por producto, con las escalas al costado */
div.products-list.dn-lista { display: flex !important; flex-direction: column !important; gap: 8px !important; padding: 0 !important; }
div.products-list.dn-lista > app-product { width: 100% !important; max-width: none !important; flex: none !important; margin: 0 !important; }
div.products-list.dn-lista app-product-card { display: block !important; width: 100% !important; }
@media (min-width: 992px) {
  div.products-list.dn-lista mat-card#product-desktop.product-card.mat-card { display: flex !important; }
  div.products-list.dn-lista mat-card#product-mobile.product-card.mat-card { display: none !important; }
}
@media (max-width: 991px) {
  div.products-list.dn-lista mat-card#product-mobile.product-card.mat-card { display: flex !important; }
  div.products-list.dn-lista mat-card#product-desktop.product-card.mat-card { display: none !important; }
}
div.products-list.dn-lista mat-card#product-desktop.product-card.mat-card, div.products-list.dn-lista mat-card#product-mobile.product-card.mat-card { width: auto !important; max-width: none !important; min-height: 0 !important; margin: 0 !important; flex-direction: row !important; align-items: center !important; height: auto !important; padding: 8px 12px !important; }
div.products-list.dn-lista mat-card#product-desktop.product-card.mat-card > a, div.products-list.dn-lista mat-card#product-mobile.product-card.mat-card > a { flex: 0 0 76px !important; width: 76px !important; max-width: 76px !important; padding: 0 !important; }
div.products-list.dn-lista mat-card#product-desktop.product-card.mat-card app-image, div.products-list.dn-lista mat-card#product-mobile.product-card.mat-card app-image, div.products-list.dn-lista mat-card#product-desktop.product-card.mat-card figure.image, div.products-list.dn-lista mat-card#product-mobile.product-card.mat-card figure.image { width: 76px !important; min-width: 0 !important; max-width: 76px !important; height: 76px !important; min-height: 0 !important; margin-top: 0 !important; }
div.products-list.dn-lista mat-card#product-desktop.product-card.mat-card .product-card__content, div.products-list.dn-lista mat-card#product-mobile.product-card.mat-card .product-card__content { display: grid !important; grid-template-columns: minmax(0, 1.6fr) minmax(130px, auto) minmax(0, 1.4fr); align-items: center; gap: 4px 20px; padding: 4px 48px 4px 16px !important; margin: 0 !important; text-align: left !important; width: auto !important; max-width: none !important; flex: 1 1 auto !important; }
div.products-list.dn-lista mat-card#product-desktop.product-card.mat-card .product-card__content > p.mat-h3, div.products-list.dn-lista mat-card#product-mobile.product-card.mat-card .product-card__content > p.mat-h3, div.products-list.dn-lista mat-card#product-desktop.product-card.mat-card .product-card__content > div:has(> p.mat-h3), div.products-list.dn-lista mat-card#product-mobile.product-card.mat-card .product-card__content > div:has(> p.mat-h3), div.products-list.dn-lista mat-card#product-desktop.product-card.mat-card .product-card__content p.mat-h3, div.products-list.dn-lista mat-card#product-mobile.product-card.mat-card .product-card__content p.mat-h3 { grid-column: 1; grid-row: 1; min-height: 0 !important; max-width: none !important; max-height: none !important; }
div.products-list.dn-lista mat-card#product-desktop.product-card.mat-card .product-card__content h4.mat-h1, div.products-list.dn-lista mat-card#product-mobile.product-card.mat-card .product-card__content h4.mat-h1 { grid-column: 2; grid-row: 1; margin: 0 !important; font-size: 19px !important; text-align: left !important; }
div.products-list.dn-lista mat-card#product-desktop.product-card.mat-card .dn-esc, div.products-list.dn-lista mat-card#product-mobile.product-card.mat-card .dn-esc { grid-column: 3; grid-row: 1; margin: 0 !important; flex-direction: row !important; flex-wrap: wrap; gap: 4px 6px !important; }
div.products-list.dn-lista .dn-esc__t { display: none; }
div.products-list.dn-lista .dn-esc__r { font-size: 12.5px !important; }
div.products-list.dn-lista mat-card#product-desktop.product-card.mat-card app-product-add-to-cart, div.products-list.dn-lista mat-card#product-mobile.product-card.mat-card app-product-add-to-cart { grid-column: 1 / -1; grid-row: 2; padding-top: 4px !important; }
div.products-list.dn-lista mat-card#product-desktop.product-card.mat-card .product-card__add-to-favorite, div.products-list.dn-lista mat-card#product-mobile.product-card.mat-card .product-card__add-to-favorite { top: 50% !important; right: 10px !important; left: auto !important; transform: translateY(-50%) scale(.85) !important; }
@media (max-width: 700px) {
  .dn-barra__t { font-size: 26px !important; }
  div.products-list.dn-lista mat-card#product-desktop.product-card.mat-card .product-card__content, div.products-list.dn-lista mat-card#product-mobile.product-card.mat-card .product-card__content { grid-template-columns: 1fr; padding: 2px 36px 2px 10px !important; gap: 2px; }
  div.products-list.dn-lista mat-card#product-desktop.product-card.mat-card .product-card__content > p.mat-h3, div.products-list.dn-lista mat-card#product-mobile.product-card.mat-card .product-card__content > p.mat-h3, div.products-list.dn-lista mat-card#product-desktop.product-card.mat-card .product-card__content > div:has(> p.mat-h3), div.products-list.dn-lista mat-card#product-mobile.product-card.mat-card .product-card__content > div:has(> p.mat-h3), div.products-list.dn-lista mat-card#product-desktop.product-card.mat-card .product-card__content p.mat-h3, div.products-list.dn-lista mat-card#product-mobile.product-card.mat-card .product-card__content p.mat-h3, div.products-list.dn-lista mat-card#product-desktop.product-card.mat-card .product-card__content h4.mat-h1, div.products-list.dn-lista mat-card#product-mobile.product-card.mat-card .product-card__content h4.mat-h1, div.products-list.dn-lista mat-card#product-desktop.product-card.mat-card .dn-esc, div.products-list.dn-lista mat-card#product-mobile.product-card.mat-card .dn-esc { grid-column: 1; grid-row: auto; }
  div.products-list.dn-lista mat-card#product-desktop.product-card.mat-card > a, div.products-list.dn-lista mat-card#product-mobile.product-card.mat-card > a, div.products-list.dn-lista mat-card#product-desktop.product-card.mat-card app-image, div.products-list.dn-lista mat-card#product-mobile.product-card.mat-card app-image, div.products-list.dn-lista mat-card#product-desktop.product-card.mat-card figure.image, div.products-list.dn-lista mat-card#product-mobile.product-card.mat-card figure.image { width: 64px !important; max-width: 64px !important; flex-basis: 64px !important; height: 64px !important; min-height: 0 !important; min-width: 0 !important; }
}

/* ===== Boton modo noche / dia ===== */
.dn-tema { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff !important; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; margin-right: 10px; flex: none; }
.dn-tema:hover { background: rgba(255,255,255,.12); }
mat-toolbar.nav-mobile > mat-toolbar-row > .dn-tema { margin: 0 0 0 6px; width: 36px; height: 36px; }

/* ===== Modo noche ===== */
html[data-tema="oscuro"] { color-scheme: dark; }
html[data-tema="oscuro"] body, html[data-tema="oscuro"] app-root, html[data-tema="oscuro"] app-e-commerce,
html[data-tema="oscuro"] section.section, html[data-tema="oscuro"] .mat-app-background, html[data-tema="oscuro"] .mat-drawer-container { background: #0e1621 !important; color: #e2e8f0 !important; }
html[data-tema="oscuro"] .mat-card, html[data-tema="oscuro"] mat-card,
html[data-tema="oscuro"] .dn-mv__card, html[data-tema="oscuro"] .dn-cat, html[data-tema="oscuro"] .dn-visit__card,
html[data-tema="oscuro"] .dn-ficha__esc, html[data-tema="oscuro"] .dn-barra__sw, html[data-tema="oscuro"] .dn-barra__sw button:not([aria-pressed="true"]),
html[data-tema="oscuro"] .dn-vermas button:not(:hover), html[data-tema="oscuro"] .dn-btn2--linea, html[data-tema="oscuro"] .dn-btn2--wa { background: #152131 !important; border-color: #263649 !important; color: #e2e8f0 !important; }
html[data-tema="oscuro"] .dn-trust, html[data-tema="oscuro"] .dn-esc__r, html[data-tema="oscuro"] .dn-cat__ico, html[data-tema="oscuro"] .dn-ficha__escr { background: #1b2a3d !important; border-color: #263649 !important; }
html[data-tema="oscuro"] .mat-h1, html[data-tema="oscuro"] .mat-h2, html[data-tema="oscuro"] .mat-h3, html[data-tema="oscuro"] .mat-body,
html[data-tema="oscuro"] .mat-card p, html[data-tema="oscuro"] .mat-card h1, html[data-tema="oscuro"] .mat-card h2, html[data-tema="oscuro"] .mat-card h4,
html[data-tema="oscuro"] .dn-h2, html[data-tema="oscuro"] .dn-barra__t, html[data-tema="oscuro"] .dn-trust__t, html[data-tema="oscuro"] .dn-cat,
html[data-tema="oscuro"] .dn-mv__n, html[data-tema="oscuro"] .dn-mv__p, html[data-tema="oscuro"] .dn-ficha__precio, html[data-tema="oscuro"] .dn-esc__r b,
html[data-tema="oscuro"] .dn-ficha__escr b, html[data-tema="oscuro"] .dn-ficha__escr span, html[data-tema="oscuro"] .dn-esc__r span,
html[data-tema="oscuro"] mat-card.product-card .product-card__content h4.mat-h1, html[data-tema="oscuro"] .dn-visit__info strong,
html[data-tema="oscuro"] .dn-reg .form__title h1, html[data-tema="oscuro"] .dn-login .form__title h1, html[data-tema="oscuro"] .dn-login-nuevo__t,
html[data-tema="oscuro"] .dn-reg h2.dn-reg-h, html[data-tema="oscuro"] .dn-pv h1.desktop-title, html[data-tema="oscuro"] .dn-pv mat-card-content h2.mat-h1 { color: #e8eef6 !important; }
html[data-tema="oscuro"] .dn-sub, html[data-tema="oscuro"] .dn-trust__s, html[data-tema="oscuro"] .dn-visit__info, html[data-tema="oscuro"] .dn-ficha__uni,
html[data-tema="oscuro"] .dn-reg-sub, html[data-tema="oscuro"] .dn-login-nuevo__p, html[data-tema="oscuro"] .dn-ficha__info, html[data-tema="oscuro"] .dn-vermas__n,
html[data-tema="oscuro"] mat-card.product-card .product-card__content h4.mat-h1 > span, html[data-tema="oscuro"] .dn-mv__p span, html[data-tema="oscuro"] .dn-pv p.caption.code,
html[data-tema="oscuro"] .dn-arca { color: #9fb0c3 !important; }
html[data-tema="oscuro"] .dn-esc__t, html[data-tema="oscuro"] .dn-mv__fam, html[data-tema="oscuro"] .dn-ficha__esct, html[data-tema="oscuro"] .dn-cat__ico,
html[data-tema="oscuro"] .dn-mv__p--ver, html[data-tema="oscuro"] .dn-barra__sw button:not([aria-pressed="true"]), html[data-tema="oscuro"] .dn-vermas button:not(:hover),
html[data-tema="oscuro"] .dn-btn2--linea, html[data-tema="oscuro"] .dn-ficha__crear, html[data-tema="oscuro"] .dn-resumen__ed, html[data-tema="oscuro"] .dn-visit__info a { color: #8cc2ff !important; }
html[data-tema="oscuro"] .dn-cat__ico svg { stroke: #8cc2ff; }
html[data-tema="oscuro"] .dn-btn2--wa { color: #6fd39b !important; border-color: #2f7d52 !important; }
html[data-tema="oscuro"] .dn-btn--outline { color: #8cc2ff !important; border-color: #8cc2ff !important; background: transparent; }
/* Fotos de producto: se dejan sobre fondo claro para que se vean bien */
html[data-tema="oscuro"] figure.image, html[data-tema="oscuro"] .dn-mv__img { background: #e9eef4 !important; }
/* Formularios (registro, ingreso, filtros) */
html[data-tema="oscuro"] .mat-form-field-label, html[data-tema="oscuro"] .mat-select-arrow, html[data-tema="oscuro"] .mat-hint { color: #9fb0c3 !important; }
html[data-tema="oscuro"] input.mat-input-element, html[data-tema="oscuro"] textarea, html[data-tema="oscuro"] .mat-select-value { color: #e8eef6 !important; caret-color: #e8eef6; }
html[data-tema="oscuro"] .mat-form-field-underline { background-color: #3a4d63 !important; }
html[data-tema="oscuro"] .mat-select-panel, html[data-tema="oscuro"] .mat-menu-panel { background: #152131 !important; }
html[data-tema="oscuro"] .mat-option, html[data-tema="oscuro"] .mat-menu-item { color: #e2e8f0 !important; }
html[data-tema="oscuro"] .mat-option:hover, html[data-tema="oscuro"] .mat-option.mat-active { background: #1f3147 !important; }
html[data-tema="oscuro"] .mat-checkbox-label, html[data-tema="oscuro"] .dn-entrega-sw { color: #e2e8f0 !important; }
html[data-tema="oscuro"] .dn-resumen { background: #12301f !important; border-color: #275c3c !important; color: #b9ecc9 !important; }
/* Menu lateral del celular */
html[data-tema="oscuro"] #hamburger, html[data-tema="oscuro"] #hamburger-categories { background: #101b28 !important; }
html[data-tema="oscuro"] #hamburger a, html[data-tema="oscuro"] #hamburger span:not(.notLogged span), html[data-tema="oscuro"] #hamburger li, html[data-tema="oscuro"] #hamburger .mat-icon,
html[data-tema="oscuro"] #hamburger-categories a, html[data-tema="oscuro"] #hamburger-categories li { color: #e2e8f0 !important; }
html[data-tema="oscuro"] #hamburger-categories li { border-bottom-color: #1f2d3e; }
/* Pie y franja de comercios ya son azules: un poco mas oscuros */
html[data-tema="oscuro"] .dn-pie, html[data-tema="oscuro"] .dn-b2b { background: #0a2a45 !important; }
/* Boton de modo dentro del menu lateral del celular */
#hamburger li.dn-tema-li { list-style: none; padding: 8px 0 0; }
#hamburger li.dn-tema-li::before, #hamburger li.dn-tema-li::after { display: none !important; content: none !important; }
#hamburger .dn-tema--txt { width: auto; height: 44px; border-radius: 12px; border: 1px solid #c9d8e8; padding: 0 16px; gap: 8px; color: #003b62 !important; font: inherit; font-size: 16px; margin: 0; }
html[data-tema="oscuro"] #hamburger .dn-tema--txt { border-color: #33475e; color: #e2e8f0 !important; }

/* Ficha de producto en celular: precio arriba, galeria compacta */
.dn-ficha--celu { padding: 0 16px 8px; }
.dn-ficha--celu .dn-ficha__precio { font-size: 30px; }
@media (max-width: 991px) {
  .dn-pv aside h2.price-title { display: none !important; }
  .dn-pv .slider .ng-image-slider { height: 120px !important; }
  .dn-pv h1.mobile-title { font-size: 24px !important; font-weight: 700 !important; color: #003b62 !important; line-height: 1.2 !important; margin: 8px 16px 4px !important; text-align: left !important; }
  html[data-tema="oscuro"] .dn-pv h1.mobile-title { color: #e8eef6 !important; }
  .dn-pv aside .product-favorite { margin-top: 0; }
}

/* Aviso de version de prueba */
.dn-aviso-prueba { position: fixed; left: 12px; bottom: 12px; z-index: 99999; background: #f2b705; color: #1f2933 !important; font: 700 13px Roboto, Arial, sans-serif; padding: 8px 12px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0,0,0,.25); text-decoration: none !important; }

/* Boton flotante de WhatsApp: mas chico, y se esconde donde molesta */
body > menu { transition: opacity .2s, transform .2s; }
body > menu > button.trigger { width: 52px !important; height: 52px !important; font-size: 27px !important; box-shadow: 0 4px 14px rgba(0, 0, 0, .22) !important; }
body > menu.dn-wa-oculto { opacity: 0; transform: translateY(16px); pointer-events: none; }
@media (max-width: 600px) { body > menu > button.trigger { width: 46px !important; height: 46px !important; font-size: 24px !important; } body > menu { right: 12px !important; bottom: 12px !important; } }

/* Precios por cantidad en las tarjetas de mas vendidos / relacionados */
.dn-mv__esc { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.dn-mv__esc > div { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; background: #eef4fa; border-radius: 8px; padding: 4px 8px; color: #1f2933; }
.dn-mv__esc b { color: #003b62; white-space: nowrap; }
html[data-tema="oscuro"] .dn-mv__esc > div { background: #1b2a3d !important; color: #e2e8f0 !important; }
html[data-tema="oscuro"] .dn-mv__esc b { color: #e8eef6 !important; }

/* % de descuento en cada escalon */
.dn-pct { font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: #1a7f45; border-radius: 999px; padding: 1px 6px; margin-left: auto; margin-right: 6px; align-self: center; white-space: nowrap; }
.dn-esc__r, .dn-mv__esc > div { align-items: center; }
.dn-esc__r > span:first-child, .dn-mv__esc > div > span:first-child { white-space: nowrap; }

/* Descripcion y modo de uso reacomodados */
.dn-txt p { margin: 0 0 10px; line-height: 1.6; font-size: 15px; }
.dn-txt p:last-child { margin-bottom: 0; }

/* Modo noche: titulos y tarjetas de las paginas propias de la web vieja (contacto, nosotros, usuario...) */
html[data-tema="oscuro"] .custom-card, html[data-tema="oscuro"] .example-large-box, html[data-tema="oscuro"] .form.mat-card,
html[data-tema="oscuro"] .mat-expansion-panel, html[data-tema="oscuro"] .mat-table, html[data-tema="oscuro"] .mat-dialog-container { background: #152131 !important; color: #e2e8f0 !important; }
html[data-tema="oscuro"] .mat-display-1, html[data-tema="oscuro"] .mat-display-2, html[data-tema="oscuro"] .mat-display-3,
html[data-tema="oscuro"] .mat-card-title, html[data-tema="oscuro"] .mat-card-subtitle, html[data-tema="oscuro"] .mat-headline, html[data-tema="oscuro"] .mat-title,
html[data-tema="oscuro"] app-e-commerce h1, html[data-tema="oscuro"] app-e-commerce h2, html[data-tema="oscuro"] app-e-commerce h3,
html[data-tema="oscuro"] app-e-commerce h4, html[data-tema="oscuro"] app-e-commerce h5, html[data-tema="oscuro"] .mat-cell, html[data-tema="oscuro"] .mat-header-cell { color: #e8eef6 !important; }
html[data-tema="oscuro"] .mat-card-title .mat-icon, html[data-tema="oscuro"] app-e-commerce .mat-icon.mat-primary { color: #8cc2ff !important; }
html[data-tema="oscuro"] app-e-commerce a.primary, html[data-tema="oscuro"] .custom-card a, html[data-tema="oscuro"] .mat-card a:not(.dn-btn2):not(.mat-button-base) { color: #8cc2ff !important; }

/* Logo del encabezado: siempre en su proporcion (en celular se veia estirado) */
app-nav-brand img, mat-toolbar img[alt="Logo de Dione"] { height: auto !important; object-fit: contain !important; aspect-ratio: 300 / 119; }
mat-toolbar.nav-mobile app-nav-brand img { width: 112px !important; max-height: none !important; }

/* ===== Celular: nada se desliza para el costado. Todo en grilla. ===== */
@media (max-width: 600px) {
  /* Por que Dione: 2x2 compacto, solo titulo */
  .dn-trust .dn-wrap { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px 10px !important; padding: 10px 16px !important; overflow: visible !important; }
  .dn-trust__item { flex-direction: row !important; text-align: left !important; gap: 8px !important; align-items: center; }
  .dn-trust .dn-ico { width: 28px !important; height: 28px !important; }
  .dn-trust .dn-ico svg { width: 15px !important; height: 15px !important; }
  .dn-trust__t { font-size: 12.5px !important; line-height: 1.2 !important; }
  .dn-trust__s { display: none !important; }

  /* Categorias: 4 columnas, sin deslizar */
  .dn-cats .dn-wrap { padding-right: 16px !important; }
  .dn-cats__grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; overflow: visible !important; padding: 0 !important; }
  .dn-cat { flex: none !important; padding: 10px 2px !important; font-size: 11.5px !important; line-height: 1.2; gap: 6px !important; border-radius: 12px !important; }
  .dn-cat__ico { width: 40px !important; height: 40px !important; }
  .dn-cat__ico svg { width: 21px !important; height: 21px !important; }

  /* Mas vendidos y relacionados: 2 columnas */
  .dn-mv .dn-wrap { padding-right: 16px !important; }
  .dn-mv__grid, .dn-rel .dn-mv__grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; overflow: visible !important; padding: 0 !important; }
  .dn-mv__card { flex: none !important; padding: 8px 8px 10px !important; }
  .dn-mv__img { height: 120px !important; }
  .dn-mv__n { font-size: 13.5px !important; }
  .dn-mv__p { font-size: 17px !important; }
  .dn-mv__p span { display: block; }
  .dn-mv__esc > div { font-size: 11.5px !important; padding: 3px 6px !important; flex-wrap: wrap; }
  .dn-mv__btn { padding: 8px !important; font-size: 13px !important; }
}

/* Modo noche: recuadro del ingreso y nota del registro */
html[data-tema="oscuro"] form.form, html[data-tema="oscuro"] .dn-login { background: #152131 !important; }
html[data-tema="oscuro"] .dn-entrega-nota { color: #9fb0c3 !important; }

/* Menu de categorias con nombres cortos e iconos */
a.dn-catlink { font-size: 0 !important; }
a.dn-catlink .dn-catlink__t { font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
a.dn-catlink .dn-catlink__t svg { opacity: .85; flex: none; }
mat-toolbar.nav .menu-products ul.nav-menu-desktop { gap: 0 4px !important; }
mat-toolbar.nav .menu-products a.dn-catlink { border-radius: 999px; padding: 1px 10px !important; border-bottom: 0 !important; line-height: 1.2 !important; }
mat-toolbar.nav .menu-products a.dn-catlink:hover { background: rgba(255, 255, 255, .12); }
#hamburger-categories a.dn-catlink .dn-catlink__t { font-size: 16px; gap: 10px; }

/* Contacto: botones directos en lugar del formulario */
.dn-contacto { margin-top: 8px; }
.dn-contacto__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.dn-contacto__op { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid #d6e3f0; border-radius: 14px; background: #fff; color: #1f2933 !important; text-decoration: none !important; transition: border-color .15s, box-shadow .15s; }
.dn-contacto__op:hover { border-color: #004996; box-shadow: 0 4px 14px rgba(0, 59, 98, .1); }
.dn-contacto__ico { width: 42px; height: 42px; flex: none; border-radius: 50%; background: #eef4fa; color: #004996; display: flex; align-items: center; justify-content: center; }
.dn-contacto__op--wa .dn-contacto__ico { background: #e7f6ee; color: #1a7f45; }
.dn-contacto__tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dn-contacto__tx b { font-size: 15px; color: #003b62; }
.dn-contacto__tx span { font-size: 13px; color: #5b6b7a; }
html[data-tema="oscuro"] .dn-contacto__op { background: #1b2a3d !important; border-color: #263649 !important; }
html[data-tema="oscuro"] .dn-contacto__tx b { color: #e8eef6 !important; }
html[data-tema="oscuro"] .dn-contacto__tx span { color: #9fb0c3 !important; }
html[data-tema="oscuro"] .dn-contacto__ico { background: #223349 !important; color: #8cc2ff !important; }
html[data-tema="oscuro"] .dn-contacto__op--wa .dn-contacto__ico { background: #173a28 !important; color: #6fd39b !important; }

/* Registro: primero solo CUIT, email, clave y telefono; lo de ARCA aparece despues */
.dn-reg form.dn-pre .dn-px { display: none !important; }
.dn-sincuit { display: block; background: none; border: 0; padding: 0; margin: 2px 0 10px; color: #0b5cad; text-decoration: underline; font-size: 14px; cursor: pointer; }
.dn-reg form:not(.dn-pre) .dn-sincuit { display: none; }
html[data-tema="oscuro"] .dn-sincuit { color: #8cc2ff; }

/* Modo noche: links y favoritos que no se leian */
html[data-tema="oscuro"] a.link { color: #8cc2ff !important; }
html[data-tema="oscuro"] a.product-favorite__text, html[data-tema="oscuro"] a.product-favorite__text .mat-button-wrapper { color: #ff9b94 !important; }
.dn-reg .form-field-container.first { flex-wrap: wrap !important; }
.dn-reg .form-field-container.first > .dn-arca, .dn-reg .form-field-container.first > .dn-resumen, .dn-reg .form-field-container.first > .dn-sincuit { flex: 0 0 100% !important; max-width: 100% !important; text-align: left; }
.dn-reg .dn-arca:empty { display: none; }

/* Listado: menos aire entre el titulo y los productos */
app-products-list .products-list { margin-top: 8px !important; }

/* ===== Fotos de producto con look moderno (sin cambiar las fotos) =====
   El blanco de la foto se funde con el recuadro (multiply): el producto queda "recortado" sobre un fondo suave. */
figure.image.mediumCard, .dn-mv__img { background: linear-gradient(180deg, #f8fafc 0%, #e8eef5 100%) !important; overflow: hidden; border-radius: 14px !important; }
figure.image.mediumCard img, .dn-mv__img img { mix-blend-mode: multiply; transition: transform .35s ease; }
mat-card.product-card:hover figure.image img, .dn-mv__card:hover .dn-mv__img img { transform: scale(1.06); }
html[data-tema="oscuro"] figure.image.mediumCard, html[data-tema="oscuro"] .dn-mv__img { background: linear-gradient(180deg, #eef2f7 0%, #d9e2ec 100%) !important; }

/* Corazon de favoritos: discreto, sin circulo blanco */
mat-card.product-card .product-card__add-to-favorite { background: transparent !important; box-shadow: none !important; }
mat-card.product-card .product-card__add-to-favorite, mat-card.product-card .product-card__add-to-favorite .mat-icon { color: #98a5b3 !important; transition: color .15s; }
mat-card.product-card .product-card__add-to-favorite:hover, mat-card.product-card .product-card__add-to-favorite:hover .mat-icon { color: #c8332c !important; }

/* Escalones: el primero (la compra minima habitual) bien destacado; y nada se sale de la tarjeta */
.dn-esc__r, .dn-mv__esc > div { min-width: 0; overflow: hidden; gap: 4px !important; }
.dn-esc__r b, .dn-mv__esc b { margin-left: auto; }
.dn-pct { font-size: 10.5px !important; padding: 1px 5px !important; margin: 0 4px 0 2px !important; }
.dn-mv__esc > div { font-size: 12.5px !important; padding: 4px 8px !important; }
.dn-esc__t + .dn-esc__r, .dn-esc > .dn-esc__r:first-child, .dn-mv__esc > div:first-child { background: #003b62 !important; color: #fff !important; font-weight: 600; }
.dn-esc__t + .dn-esc__r b, .dn-esc > .dn-esc__r:first-child b, .dn-mv__esc > div:first-child b,
.dn-esc__t + .dn-esc__r span, .dn-esc > .dn-esc__r:first-child span, .dn-mv__esc > div:first-child span { color: #fff !important; }
html[data-tema="oscuro"] .dn-esc__t + .dn-esc__r, html[data-tema="oscuro"] .dn-esc > .dn-esc__r:first-child, html[data-tema="oscuro"] .dn-mv__esc > div:first-child { background: #1f5f9e !important; }

/* Ficha: el codigo queda chiquito y discreto (sirve para pedir por WhatsApp); el alternativo es interno */
app-products-view p.caption.code { font-size: 12px !important; color: #8a97a6 !important; margin: 0 0 4px !important; line-height: 1.3 !important; }
app-products-view p.caption.code strong { font-weight: 400 !important; color: inherit !important; }
app-products-view p.caption.code + p.caption.code { display: none !important; }
.dn-esc__r, .dn-mv__esc > div { flex-wrap: wrap !important; overflow: visible !important; row-gap: 0 !important; padding-left: 7px !important; padding-right: 7px !important; }
.dn-pct { margin: 0 2px !important; }
/* "Llevando 5" -> "x5" cuando la tarjeta es angosta: siempre en un renglon */
.dn-esc__r, .dn-mv__esc > div { flex-wrap: nowrap !important; }
.dn-llev, .dn-x { font-style: normal; }
.dn-x { display: none; }
mat-card.product-card, .dn-mv__card { container-type: inline-size; }
@container (max-width: 270px) {
  .dn-llev { display: none; }
  .dn-x { display: inline; }
}
@media (max-width: 600px) { .dn-barra { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box; } }
@container (max-width: 200px) {
  .dn-esc__r, .dn-mv__esc > div { font-size: 11px !important; padding: 3px 5px !important; gap: 2px !important; }
  .dn-pct { font-size: 9.5px !important; padding: 0 4px !important; margin: 0 1px !important; }
}

/* Registro: mientras se completan solos los desplegables con ARCA, no se ven abrirse */
html.dn-autollenando .cdk-overlay-container { opacity: 0 !important; pointer-events: none !important; }

/* ===== Buscador: sugerencias ===== */
.dn-sug { position: fixed; z-index: 10050; background: #fff; border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 30, 60, .22); padding: 6px; max-height: 70vh; overflow-y: auto; font-family: Roboto, Arial, sans-serif; }
.dn-sug__it { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; color: #1f2933 !important; text-decoration: none !important; }
.dn-sug__it:hover, .dn-sug__it:focus { background: #eef4fa; }
.dn-sug__it img { width: 44px; height: 44px; object-fit: contain; flex: none; border-radius: 8px; background: linear-gradient(180deg, #f8fafc, #e8eef5); mix-blend-mode: multiply; }
.dn-sug__tx { display: flex; flex-direction: column; min-width: 0; }
.dn-sug__tx b { font-weight: 500; font-size: 14px; line-height: 1.25; color: #003b62; }
.dn-sug__tx small { font-size: 12px; color: #5b6b7a; margin-top: 2px; }
.dn-sug__ia { display: block; width: 100%; text-align: left; border: 0; margin-top: 4px; padding: 10px 12px; border-radius: 10px; background: #fff4e5; color: #8a4b00; font: 600 13.5px Roboto, Arial, sans-serif; cursor: pointer; }
.dn-sug__ia::before { content: "✦ "; }
.dn-sug__ia:hover { background: #ffe9cc; }
html[data-tema="oscuro"] .dn-sug { background: #152131; box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
html[data-tema="oscuro"] .dn-sug__it { color: #e2e8f0 !important; }
html[data-tema="oscuro"] .dn-sug__it:hover { background: #1f3045; }
html[data-tema="oscuro"] .dn-sug__tx b { color: #e8eef6; }
html[data-tema="oscuro"] .dn-sug__tx small { color: #9fb0c3; }
html[data-tema="oscuro"] .dn-sug__ia { background: #3a2a12; color: #ffd08a; }

/* ===== Preguntame: burbuja y panel ===== */
.dn-pq { position: fixed; right: 18px; bottom: 84px; z-index: 10040; font-family: Roboto, Arial, sans-serif; }
.dn-pq__btn { display: flex; align-items: center; gap: 8px; border: 0; cursor: pointer; padding: 11px 16px 11px 13px; border-radius: 999px; background: linear-gradient(135deg, #004996, #003b62); color: #fff; font: 600 14.5px Roboto, Arial, sans-serif; box-shadow: 0 6px 18px rgba(0, 59, 98, .35); transition: transform .15s; }
.dn-pq__btn:hover { transform: translateY(-2px); }
.dn-pq__btn svg { color: #ffd08a; }
.dn-pq__panel { display: none; position: absolute; right: 0; bottom: 56px; width: 380px; height: min(580px, calc(100vh - 160px)); background: #fff; border-radius: 18px; box-shadow: 0 18px 48px rgba(0, 30, 60, .3); overflow: hidden; flex-direction: column; }
.dn-pq--abierto .dn-pq__panel { display: flex; }
.dn-pq__cab { display: flex; align-items: center; gap: 6px; padding: 12px 12px 12px 16px; background: #003b62; color: #fff; }
.dn-pq__tit { flex: 1; display: flex; flex-direction: column; }
.dn-pq__tit b { font-size: 16px; }
.dn-pq__tit small { font-size: 12px; opacity: .8; }
.dn-pq__x { border: 0; background: rgba(255, 255, 255, .12); color: #fff; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 15px; }
.dn-pq__x:hover { background: rgba(255, 255, 255, .24); }
.dn-pq__lista { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #f5f8fb; }
.dn-pq__m { max-width: 88%; padding: 9px 12px; border-radius: 14px; font-size: 14.5px; line-height: 1.45; word-wrap: break-word; }
.dn-pq__m p { margin: 0 0 6px; } .dn-pq__m p:last-child { margin: 0; }
.dn-pq__m ul { margin: 2px 0 6px; padding-left: 18px; }
.dn-pq__m--ia { align-self: flex-start; background: #fff; color: #1f2933; border: 1px solid #e1e8f0; border-bottom-left-radius: 4px; }
.dn-pq__m--yo { align-self: flex-end; background: #004996; color: #fff; border-bottom-right-radius: 4px; white-space: pre-wrap; }
.dn-pq__esp::after { content: "…"; animation: dnpq 1s steps(3) infinite; display: inline-block; width: 1em; overflow: hidden; vertical-align: bottom; }
@keyframes dnpq { from { width: 0; } to { width: 1em; } }
.dn-pq__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dn-pq__chips button { border: 1px solid #c9d8e8; background: #fff; color: #004996; border-radius: 999px; padding: 6px 11px; font: 500 13px Roboto, Arial, sans-serif; cursor: pointer; text-align: left; }
.dn-pq__chips button:hover { background: #eef4fa; }
.dn-pq__prods { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.dn-pq__prod { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 10px; background: #eef4fa; color: #003b62 !important; text-decoration: none !important; font-size: 13px; }
.dn-pq__prod b { font-weight: 600; } .dn-pq__prod span { white-space: nowrap; color: #1a7f45; font-weight: 600; }
.dn-pq__pie { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #e1e8f0; background: #fff; margin: 0; }
.dn-pq__pie textarea { flex: 1; resize: none; border: 1px solid #c9d8e8; border-radius: 12px; padding: 9px 12px; font: 15px Roboto, Arial, sans-serif; max-height: 110px; outline: none; background: #fff; color: #1f2933; }
.dn-pq__pie textarea:focus { border-color: #004996; }
.dn-pq__env { border: 0; width: 42px; border-radius: 12px; background: #c8332c; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.dn-pq__nota { font-size: 11px; color: #6b7b8b; padding: 0 12px 8px; background: #fff; }
@media (max-width: 600px) {
  .dn-pq { right: 12px; bottom: 70px; }
  .dn-pq__btn { padding: 9px 13px 9px 11px; font-size: 13.5px; }
  .dn-pq--abierto { inset: 0; right: 0; bottom: 0; }
  .dn-pq--abierto .dn-pq__btn { display: none; }
  .dn-pq__panel { position: fixed; inset: 0; width: auto; height: auto; border-radius: 0; bottom: 0; }
  html.dn-pq-on body > menu { display: none !important; }
}
html[data-tema="oscuro"] .dn-pq__panel, html[data-tema="oscuro"] .dn-pq__pie, html[data-tema="oscuro"] .dn-pq__nota { background: #152131; }
html[data-tema="oscuro"] .dn-pq__lista { background: #0e1621; }
html[data-tema="oscuro"] .dn-pq__m--ia { background: #1b2a3d; color: #e2e8f0; border-color: #263649; }
html[data-tema="oscuro"] .dn-pq__chips button { background: #1b2a3d; color: #8cc2ff; border-color: #263649; }
html[data-tema="oscuro"] .dn-pq__prod { background: #1f3045; color: #e8eef6 !important; }
html[data-tema="oscuro"] .dn-pq__prod span { color: #6fd39b; }
html[data-tema="oscuro"] .dn-pq__pie textarea { background: #0e1621; color: #e2e8f0; border-color: #263649; }
html[data-tema="oscuro"] .dn-pq__pie { border-color: #263649; }

/* Preguntame: links como botones chicos */
.dn-pq__link { display: inline-block; margin: 2px 2px; padding: 3px 10px; border-radius: 999px; background: #004996; color: #fff !important; text-decoration: none !important; font-weight: 600; font-size: 13.5px; line-height: 1.5; }
.dn-pq__link:hover { background: #003b62; }
.dn-pq__link[href^="https://wa.me"] { background: #1a7f45; }
html[data-tema="oscuro"] .dn-pq__link { background: #1f5f9e; }

/* ===== Preguntame y WhatsApp como pestañas en el borde derecho: solo el icono; al pasar el mouse sale el nombre ===== */
.dn-pq { right: 0 !important; bottom: 156px !important; }
.dn-pq__btn { border-radius: 999px 0 0 999px !important; padding: 11px 14px 11px 13px !important; gap: 0 !important; box-shadow: -2px 3px 12px rgba(0, 59, 98, .28) !important; transform: none !important; transition: padding .2s, box-shadow .2s; }
.dn-pq__btn span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .25s ease, margin .25s ease; }
.dn-pq__btn:hover span, .dn-pq__btn:focus-visible span, .dn-pq--abierto .dn-pq__btn span { max-width: 140px; margin-left: 8px; }
.dn-pq__btn:hover { transform: none !important; padding-right: 18px !important; }
.dn-pq__panel { right: 12px !important; bottom: 58px !important; }

body > menu { right: 0 !important; bottom: 92px !important; }
body > menu > button.trigger { width: auto !important; min-width: 48px; height: 46px !important; padding: 0 12px 0 11px !important; border-radius: 999px 0 0 999px !important; display: flex !important; align-items: center; justify-content: flex-start; font-size: 24px !important; box-shadow: -2px 3px 12px rgba(0, 0, 0, .2) !important; }
body > menu > button.trigger::after { content: "WhatsApp"; font: 600 14.5px Roboto, Arial, sans-serif; max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .25s ease, margin .25s ease; }
body > menu > button.trigger:hover::after, body > menu > button.trigger:focus-visible::after { max-width: 120px; margin-left: 8px; }

@media (max-width: 600px) {
  .dn-pq { bottom: 132px !important; }
  .dn-pq__btn { padding: 9px 11px 9px 11px !important; }
  body > menu { right: 0 !important; bottom: 80px !important; }
  body > menu > button.trigger { height: 42px !important; min-width: 44px; padding: 0 10px !important; font-size: 22px !important; }
}

/* Barra del listado: orden (Más vendidos / A-Z) + vista (Grilla / Lista) */
.dn-barra__der { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
@media (max-width: 600px) {
  .dn-barra { flex-wrap: wrap; gap: 8px; }
  .dn-barra__der { width: 100%; justify-content: space-between; }
  .dn-barra__der .dn-barra__sw button { padding: 6px 10px !important; font-size: 13px !important; }
}
/* Tarjetas de producto en el chat: nombre arriba, precio abajo (no se desborda) */
.dn-pq__prod { flex-direction: column !important; gap: 2px !important; }
.dn-pq__prod span { white-space: normal !important; }
/* Preguntame: mas preguntas frecuentes, en chips compactos */
.dn-pq__chips { gap: 5px !important; }
.dn-pq__chips button { padding: 5px 10px !important; font-size: 12.5px !important; }
/* El panel no se mete debajo del encabezado */
@media (min-width: 601px) { .dn-pq__panel { height: min(560px, calc(100vh - 250px)) !important; min-height: 320px; } }