/* ===========================================================
   MasterCadena — tema personalizado daisyUI
   Colores / fuentes / botones tomados del brand_brief.json
   Primary #004687 | Accent #ff671f | Button #003087
   Fuentes: Roboto / Roboto Condensed | Botones radius 0, sin uppercase
   =========================================================== */

:root{
  --brand-primary:#004687;
  --brand-secondary:#ff671f;
  --brand-accent:#ff671f;
  --brand-button:#003087;
  --brand-button-text:#ffffff;
  --brand-bg:#ffffff;
  --brand-surface:#f7f7f7;
  --brand-text:#5d5d5d;
  --brand-muted:#5d5d5d;
  --brand-border:#e6e6e6;
  --brand-success:#20bf6b;
  --brand-promo-bg:#004687;
  --brand-promo-text:#ffffff;
  --brand-header-bg:#004687;
  --brand-footer-bg:#ffffff;
  --brand-price:#ff671f;
  --radius-btn:0px;
}

/* Reserva siempre el hueco de la barra de scroll vertical (Windows/Linux la
   descuentan del ancho disponible; macOS con scrollbar-gutter se ignora sin
   efecto). Sin esto, cualquier contenido que cambie la ALTURA de la página
   (p.ej. las pestañas Descripción/Especificaciones/Valoraciones de la ficha de
   producto, cada una con distinta cantidad de contenido) hace aparecer o
   desaparecer la barra de scroll, y todo el contenido centrado (max-w-* mx-auto)
   se ensancha o encoge esos ~15-17px — el "salto" de ancho que se veía al
   cambiar de pestaña. Con el hueco siempre reservado, el ancho disponible es
   constante tenga la página scroll o no. */
html{ scrollbar-gutter:stable; overflow-y:scroll; }

/* Los contenedores de página (max-w-* mx-auto: #product-info, #checkout-cart,
   #account-account, etc.) son hijos directos de .drawer-content, que es un
   flex-column (ver header.twig: "drawer-content flex flex-col"). Por la spec
   de Flexbox, un hijo flex con márgenes "auto" en el eje transversal (mx-auto)
   IGNORA el stretch por defecto y se dimensiona por su propio CONTENIDO en vez
   de estirarse al ancho del contenedor. Resultado: si el contenido visible
   cambia de "forma" (p.ej. las pestañas de producto — la tabla de
   Especificaciones es más estrecha que la galería+descripción) todo el bloque
   de página se encoge o ensancha, arrastrando galería/columna derecha con él.
   Forzamos width:100% para que el hijo se estire de verdad y su ancho dependa
   solo del viewport (capado por su propio max-w-*), nunca del contenido. */
.drawer-content > [class*="mx-auto"]{ width:100%; }

[data-theme="mastercadena"]{
  color-scheme:light;
  --p:42% 0.115 252;
  --pc:100% 0 0;
  --s:70% 0.19 42;
  --sc:100% 0 0;
  --a:70% 0.19 42;
  --ac:100% 0 0;
  --n:37% 0.13 266;
  --nc:100% 0 0;
  --b1:100% 0 0;
  --b2:97% 0 0;
  --b3:91% 0 0;
  --bc:47% 0 0;
  --su:70% 0.16 156;
  --suc:100% 0 0;
  --in:42% 0.115 252;
  --wa:80% 0.16 80;
  --er:58% 0.22 27;
  --rounded-box:0.25rem;
  --rounded-btn:0px;
  --rounded-badge:0px;
  --animation-btn:.25s;
  --border-btn:1px;
  --tab-radius:0px;
}

html,body{
  font-family:"Roboto",sans-serif;
  color:var(--brand-text);
  background:var(--brand-bg);
}
h1,h2,h3,h4,h5,h6,.font-head{
  font-family:"Roboto Condensed",sans-serif;
}

/* Botones */
.btn{ text-transform:none; border-radius:var(--radius-btn); font-weight:700; }
.btn-buy{
  background:var(--brand-button);
  color:var(--brand-button-text);
  border:1px solid var(--brand-button);
}
.btn-buy:hover{ background:#00256b; border-color:#00256b; color:#fff; }
.btn-cta{
  background:var(--brand-button);
  color:var(--brand-button-text);
  border:none;
  border-radius:0;
}
.btn-cta:hover{ background:#00256b; color:#fff; }

/* Quantity stepper next to "Añadir al carrito" — sized to match .btn-lg's own
   height (64px) so the two controls read as one unified row, not a tall button
   next to a short bare input. */
.mc-qty-stepper{
  height:64px;
  box-sizing:border-box;
  border:1px solid #ccc;
  border-radius:var(--radius-btn, 4px);
  overflow:hidden;
}
.mc-qty-btn{
  width:44px; height:100%;
  border:none; background:#f5f5f5; color:#333;
  font-size:1.25rem; font-weight:700; line-height:1;
  cursor:pointer;
}
.mc-qty-btn:hover{ background:#e0e0e0; }
.mc-qty-input{
  width:56px; height:100%;
  box-sizing:border-box;
  border:none; border-left:1px solid #ccc; border-right:1px solid #ccc;
  font-size:1rem; font-weight:600;
}

/* Chrome de marca */
.promo-bar{ background:var(--brand-promo-bg); color:var(--brand-promo-text); }
.site-header{ background:var(--brand-header-bg); color:#fff; }
.site-header a{ color:#fff; }
.utility-bar{ background:var(--brand-primary); color:#cfe0f2; font-size:.8rem; }
.utility-bar a{ color:#cfe0f2; }
.utility-bar a:hover{ color:#fff; }
/* Keep the 3 links on one row on mobile instead of each one's text wrapping
   onto 2 lines: force nowrap + shrink font/gap; allow horizontal scroll as a
   safety net only if a screen is ever too narrow to fit them at all. */
.utility-bar .container-x{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
.utility-bar .container-x::-webkit-scrollbar{ display:none; }
.utility-bar a{ white-space:nowrap; flex-shrink:0; }
@media(max-width:480px){
  .utility-bar{ font-size:.68rem; }
  .utility-bar .container-x{ gap:.6rem; }
}
.nav-bar{ background:var(--brand-surface); border-bottom:1px solid var(--brand-border); }
.nav-bar a{ color:#333; font-family:"Roboto Condensed",sans-serif; font-weight:700; }
.nav-bar a:hover{ color:var(--brand-primary); }

.price{ color:var(--brand-price); font-weight:700; font-family:"Roboto Condensed",sans-serif; }
.price-old{ color:#9a9a9a; text-decoration:line-through; font-weight:400; }

.site-footer{ background:var(--brand-footer-bg); color:var(--brand-text); border-top:1px solid var(--brand-border); }
.footer-bottom{ background:#fff; border-top:1px solid var(--brand-border); }

.section-title{
  font-family:"Roboto Condensed",sans-serif;
  font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  color:#333; text-align:center;
}
.brand-link{ color:var(--brand-primary); }
.brand-link:hover{ color:var(--brand-secondary); }

/* Tarjeta de producto */
.product-card{
  background:#fff; border:1px solid var(--brand-border);
  display:flex; flex-direction:column; height:100%;
}
.product-card .pc-img{
  aspect-ratio:1/1; object-fit:contain; padding:1rem; background:#fff;
}
.product-card .pc-name{
  font-size:.82rem; line-height:1.25;
  height:3.75em; overflow:hidden;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  color:#333;
}
/* Nombre de producto como enlace en tablas (carrito, mini-carrito, favoritos,
   detalle de pedido): mismo gris oscuro que las tarjetas de producto (.pc-name)
   en vez del azul subrayado por defecto del navegador/bootstrap.css, con
   subrayado + color de marca solo al pasar el ratón para que siga siendo
   reconocible como enlace. */
.product-name-link{ color:#333; text-decoration:none!important; }
.product-name-link:hover{ color:var(--brand-primary); text-decoration:underline!important; }
/* CARD-02: рейтинг — фиксированная зона 20px */
.product-card .pc-rating{
  height:20px; min-height:20px; display:flex; align-items:center; gap:2px;
  font-size:11px; color:#f0a500; margin-top:.25rem;
}
/* CARD-03: кнопка вишлиста */
.product-card .pc-wishlist{
  position:absolute; top:.4rem; right:.4rem;
  background:rgba(255,255,255,.85); border:1px solid #ddd; border-radius:50%;
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  font-size:13px; color:#555; cursor:pointer; transition:color .15s;
  z-index:2;
}
.product-card .pc-wishlist:hover{ color:#dc3545; }
@media (min-width:1024px){
  .product-card .pc-wishlist{ opacity:0; transition:opacity .15s, color .15s; }
  .product-card:hover .pc-wishlist{ opacity:1; }
}
/* CARD-04: бейдж скидки */
.badge-offer{
  background:var(--brand-accent); color:#fff; border-radius:50%;
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  font-size:.6rem; font-weight:700; text-align:center; line-height:1.05; text-transform:uppercase;
  position:absolute; top:.4rem; left:.4rem; z-index:2;
}

/* Sidebar categorías */
.cat-aside{ border:1px solid var(--brand-border); background:#fff; }
.cat-aside .cat-head{ font-family:"Roboto Condensed",sans-serif; font-weight:700; color:#333; border-bottom:1px solid var(--brand-border); }
.cat-aside li a{ color:var(--brand-text); display:block; padding:.375rem 1rem; font-size:.875rem; transition:color .15s; }
.cat-aside li a:hover{ color:var(--brand-primary); }
.cat-aside li.active a{ color:var(--brand-primary); font-weight:700; }

/* Chips */
.chip{ border:1px solid var(--brand-border); background:#fff; }

/* Footer */
.footer-link{ color:var(--brand-text); }
.footer-link:hover{ color:var(--brand-primary); }
.footer-col-title{ font-family:"Roboto Condensed",sans-serif; font-weight:700; color:#333; text-transform:uppercase; }

/* Breadcrumb */
.breadcrumbs a{ color:var(--brand-primary); }

/* Utilidades */
.container-x{ max-width:1280px; margin-inline:auto; padding-inline:1rem; }
.link-reset{ text-decoration:none; }
a{ text-decoration:none; }

/* OC4 default overrides */
#product-list .product-thumb{ border:1px solid var(--brand-border); }
.btn-primary{ background:var(--brand-button)!important; border-color:var(--brand-button)!important; border-radius:0!important; }
.btn-primary:hover{ background:#00256b!important; border-color:#00256b!important; }

/* Powered by OpenCart — ocultar */
footer #powered{ display:none!important; }

/* T07: ocultar badge de carrito cuando muestra 0 */
.indicator-item.badge:empty,
.indicator .badge[data-count="0"]{ display:none; }
/* Ocultar badge 0 via JS (fallback) se aplica en header */

/* T10: Paginación horizontal en móvil */
ul.pagination{ display:flex; flex-wrap:wrap; gap:.25rem; list-style:none; padding:0; margin:0; }
ul.pagination li a, ul.pagination li span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2rem; height:2rem; padding:0 .4rem;
  border:1px solid var(--brand-border); font-size:.85rem; color:var(--brand-text);
}
ul.pagination li.active a, ul.pagination li a:hover{ background:var(--brand-button); color:#fff; border-color:var(--brand-button); }

/* T05: precio sin salto de línea en tarjetas y mini-carrito */
.price{ white-space:nowrap; }
.product-card .price{ white-space:nowrap; }

/* link-orange (compat con template por defecto) */
.link-orange{ color:var(--brand-secondary); }
.link-orange:hover{ color:var(--brand-primary); }

/* T11: mejora visual de zona de contenido en páginas de cuenta/carrito/login */
#content{ background:#fff; padding:1.5rem; min-height:200px; }

/* Cart toast — compact fixed bottom-right */
#alert .alert,
#alert .alert-success,
#alert .alert-danger {
  display: block !important; /* daisyUI's own .alert component is display:grid — that
    squeezes any <a> inside the toast (e.g. the wishlist "Inicia sesión"/"regístrate"
    links) into a near-zero-width auto grid column, rendering the text one letter
    per line. Force plain block flow so inline text/links wrap normally. */
  position: fixed !important;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 99999;
  max-width: min(380px, calc(100vw - 2rem));
  width: auto;
  box-sizing: border-box;
  padding: .8rem 2.4rem .8rem 1.25rem;
  border-radius: 8px;
  background: #1a7f3c;
  color: #fff;
  border: none;
  box-shadow: 0 4px 18px rgba(0,0,0,.18);
  font-size: .875rem;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  animation: mc-toast-in .25s ease;
}
#alert .alert-danger { background: #b3261e; }
#alert .alert a {
  display: inline !important;
  width: auto !important;
  color: #fff !important;
  font-weight: 700;
  text-decoration: underline;
}
#alert .alert button {
  position: absolute !important;
  top: 50% !important;
  right: .7rem !important;
  transform: translateY(-50%);
  line-height: 1;
}
@keyframes mc-toast-in {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
@media (max-width: 600px) {
  #alert .alert,
  #alert .alert-success,
  #alert .alert-danger {
    bottom: .75rem;
    right: .75rem;
    left: .75rem;
    max-width: none;
  }
}

/* Cart remove (✕) button — Bootstrap's .table-bordered td + daisyUI's plain .btn
   base rule both fight the Tailwind bg-[#dc3545]/text-white utilities and can leave
   the button transparent-on-transparent (invisible red X). Pin the fill explicitly. */
#shopping-cart .mc-remove-btn{
  background:#dc3545 !important; color:#fff !important; border:0 !important;
}
#shopping-cart .mc-remove-btn:hover{ background:#c82333 !important; }

/* Sub-Total / Total rows — Bootstrap's .table-bordered gives every <td> a boxed
   1px border, which is fine for the product grid above but reads as a stray
   rectangle around just these two summary values (desktop; mobile already uses
   its own border-top divider below). Drop the per-cell box, keep one shared
   horizontal rule across the row instead. */
#shopping-cart tfoot td{ border:none !important; }
#shopping-cart tfoot tr{ border-top:1px solid #dee2e6; }

/* Cart mobile card layout — no horizontal scroll on <640px */
@media (max-width:639px) {
  /* Let table scroll be contained; remove body overflow */
  #shopping-cart .overflow-x-auto { overflow:visible; }
  /* Flatten table structure */
  #shopping-cart table,
  #shopping-cart tbody,
  #shopping-cart tfoot { display:block; width:100%; }
  #shopping-cart thead { display:none; }
  /* Bootstrap's .table-bordered puts a 1px border on every <td> — with the grid
     layout below those per-cell borders no longer trace a real grid and just show
     up as disconnected line fragments. Strip them; the only separator we want is
     the card's own border-bottom on <tr>. */
  #shopping-cart table, #shopping-cart td, #shopping-cart th{ border:none !important; }
  /* Product row → card: image | name (row 1), qty-left / price-right (row 2),
     delete icon pinned to the top-right corner of the whole card. */
  #shopping-cart tbody tr {
    display:grid;
    grid-template-columns:60px 1fr auto;
    grid-template-rows:auto auto;
    column-gap:.6rem;
    row-gap:.4rem;
    padding:.75rem .9rem;
    border-bottom:1px solid #e6e6e6;
    width:100%;
    position:relative; /* containing block for the absolutely-positioned delete icon */
  }
  /* Imagen — col 1, spans both content rows */
  #shopping-cart tbody td:nth-child(1){ grid-column:1; grid-row:1/span 2; padding:0; }
  #shopping-cart tbody td:nth-child(1) .img-thumbnail{ max-width:56px; height:auto; padding:.2rem; }
  /* Nombre del producto — row 1, spans the qty+price columns; leave room on the
     right so the title never runs under the delete icon */
  #shopping-cart tbody td:nth-child(2){ grid-column:2 / span 2; grid-row:1; padding:0 1.9rem 0 0; font-size:.8rem; }
  /* Modelo / Precio unitario — not shown in the compact card (line total covers it) */
  #shopping-cart tbody td:nth-child(3),
  #shopping-cart tbody td:nth-child(5){ display:none !important; }
  /* Cantidad (+/−) — row 2, left */
  #shopping-cart tbody td:nth-child(4){ grid-column:2; grid-row:2; padding:0; align-self:center; }
  /* Total línea — row 2, right */
  #shopping-cart tbody td:nth-child(6){ grid-column:3; grid-row:2; padding:0; align-self:center; text-align:right !important; font-weight:700; font-size:.9rem; white-space:nowrap; }
  /* Delete icon — pinned to the card's top-right corner instead of sitting inline
     after the +/− controls */
  #shopping-cart tbody tr .mc-remove-btn{
    position:absolute; top:.75rem; right:.9rem;
    margin:0 !important;
  }
  /* Sub-Total / Total rows — same left/right inset as the product cards above,
     so the values don't sit flush against the container edge. */
  #shopping-cart tfoot tr{ display:flex; justify-content:space-between; align-items:center; padding:.5rem .9rem; border-top:1px solid #e6e6e6; }
  #shopping-cart tfoot td{ display:block !important; padding:0; }
}

/* Checkout order-review table ("Tramitar pedido") — the price column had no
   width/wrap rule, so "522 €" could break between the number and the € symbol
   once the product-name column ate the remaining space on narrow screens. */
#checkout-confirm table td:last-child{
  white-space:nowrap;
  width:1%; /* shrink-to-fit: takes only what the price needs, name column gets the rest */
}
@media (max-width:639px){
  #checkout-confirm table td{ padding:.5rem .4rem; font-size:.85rem; }
}

/* ======================================================================
   Cart & Checkout two-column layout (products/form left, summary right).
   These layout classes originally lived only in the inactive computronic
   theme stylesheet, so on the live mastercadena theme they had no effect
   and both pages fell back to a single stacked column. Defined here.
   ====================================================================== */
.checkout-title{ font-size:1.6rem; font-weight:800; color:var(--brand-primary); margin:.25rem 0 1.25rem; }
.checkout-card{ background:#fff; border:1px solid #e6e6e6; border-radius:8px; padding:1.25rem; margin-bottom:1.25rem; }
.checkout-card legend{ font-size:1.05rem; font-weight:700; color:var(--brand-primary); border-bottom:1px solid #e6e6e6; padding-bottom:.5rem; margin-bottom:1rem; width:100%; }
.cart-next-title{ font-size:1.15rem; font-weight:700; color:var(--brand-primary); margin:1.25rem 0 .25rem; }
.cart-next-text{ color:#6c757d; font-size:.9rem; margin-bottom:.75rem; }

/* Shared 2-column grid used by both the cart and the checkout page. */
.cart-layout,
.checkout-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; align-items:start; }
@media (min-width:1024px){
  .cart-layout,
  .checkout-grid{ grid-template-columns:minmax(0,1fr) 22rem; }
  .cart-aside,
  .checkout-aside{ position:sticky; top:1.5rem; }
}
.cart-main,
.checkout-main{ min-width:0; }
.checkout-summary{ padding-top:.25rem; }
.checkout-summary .table{ margin-bottom:.75rem; }

/* Order-summary card (right column of the cart) */
.cart-summary-card{ background:#fff; border:1px solid #e6e6e6; border-radius:8px; padding:1.25rem; }
.cart-summary-card h2{ font-size:1.1rem; font-weight:800; color:var(--brand-primary); margin:0 0 1rem; }
#cart-summary{ margin-bottom:1rem; }
#cart-summary .cart-total-row{ display:flex; justify-content:space-between; align-items:baseline; padding:.4rem 0; font-size:.95rem; }
#cart-summary .cart-total-row + .cart-total-row{ border-top:1px solid #f0f0f0; }
#cart-summary .cart-total-row.is-grand{ border-top:2px solid #e6e6e6; margin-top:.25rem; padding-top:.6rem; font-size:1.15rem; font-weight:800; color:var(--brand-primary); }
#cart-summary .cart-total-row .val{ white-space:nowrap; font-weight:700; }

.cart-summary-card .cart-actions{ display:flex; flex-direction:column; gap:.6rem; margin-top:0; }
.cart-summary-card .cart-actions .btn{ width:100%; }

/* Payment/trust icons in the summary */
.cart-pay-icons{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem; padding-top:1rem; border-top:1px solid #f0f0f0; }
.cart-pay-icons .pay{ display:inline-flex; align-items:center; gap:.3rem; border:1px solid #e0e0e0; border-radius:4px; padding:.25rem .5rem; font-size:1.15rem; color:#5d5d5d; background:#fff; }
.cart-pay-icons .pay small{ font-size:.7rem; font-weight:600; }

/* Coupon / voucher / shipping-estimate accordion inside the summary column */
.cart-summary-card #accordion{ margin-top:1rem; }

/* Hide the in-table totals (tfoot) — they are mirrored into #cart-summary in
   the right column so we don't show them twice. Kept in the DOM (display:none,
   not removed) so the summary mirror + module AJAX can still read them. */
#shopping-cart table tfoot{ display:none !important; }

/* Static info pages (Aviso Legal, Condiciones generales, Política de privacidad...):
   description HTML is plain h1/h2/h3/p with no utility classes, but Tailwind's
   preflight reset zeroes out font-size/weight on headings — without this they
   render as flat, same-size body text with no visual hierarchy at all. */
.content-prose h1{ font-size:1.6rem; font-weight:800; color:var(--brand-primary); margin:0 0 1rem; }
.content-prose h2{ font-size:1.2rem; font-weight:700; color:var(--brand-primary); margin:1.75rem 0 .6rem; }
.content-prose h3{ font-size:1.05rem; font-weight:700; color:#333e48; margin:1.25rem 0 .5rem; }
.content-prose p{ margin:0 0 .9rem; line-height:1.6; }
.content-prose h1:first-child,
.content-prose h2:first-child{ margin-top:0; }