/* ============================================================
   SISTEMA DIOGO — tienda/tienda.css
   Reusa los tokens de diseño de la web (fonts.css/index.css de
   diogo.cl). Si los nombres de variable difieren del real,
   ajustar aquí una vez confirmado.
   ============================================================ */

body { font-family: 'Raleway', 'Arial', sans-serif; margin: 0; background: #fff; color: #1a1a2e; }
.oculto { display: none !important; }

/* Barra de migas de pan — vive bajo el header real compartido (web/inc/header.php) */
.tienda-migas-bar { background: #f5f6f8; border-bottom: 1px solid #e0e3e8; padding: 0.7rem 1.5rem; }
.tienda-migas { max-width: 1100px; margin: 0 auto; font-size: 0.85rem; color: #5a5a72; }
.tienda-migas a { color: var(--azul-drogo, #0a1f44); text-decoration: none; font-weight: 600; }
.tienda-migas a:hover { text-decoration: underline; }

.volver-link { display: inline-flex; align-items: center; gap: 0.3rem; margin: 1.2rem 0 0.4rem; color: var(--azul-drogo, #0a1f44); text-decoration: none; font-weight: 700; font-size: 0.9rem; }
.volver-link:hover { text-decoration: underline; }

/* Carrito */
.carrito-lista { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.carrito-item { display: flex; align-items: center; gap: 1rem; background: #fff; border-radius: 0.6rem; box-shadow: 0 2px 12px rgba(0,0,0,0.06); padding: 0.8rem; }
.carrito-item-img { width: 70px; height: 70px; flex-shrink: 0; }
.carrito-item-img img, .carrito-item-img .sin-imagen-placeholder { width: 70px; height: 70px; object-fit: cover; border-radius: 0.4rem; }
.carrito-item-info { flex: 1; min-width: 0; }
.carrito-item-info h3 { font-size: 0.95rem; margin: 0 0 0.2rem; }
.carrito-item-precio { color: var(--naranja, #ff6b00); font-weight: 700; }
.carrito-item-cantidad { display: inline-flex; align-items: center; border: 1.5px solid #e0e3e8; border-radius: 0.4rem; overflow: hidden; }
.carrito-item-cantidad button { border: none; background: #f5f6f8; width: 32px; height: 32px; font-size: 1rem; cursor: pointer; }
.carrito-item-cantidad span { width: 32px; text-align: center; font-weight: 700; display: inline-block; }
.carrito-item-quitar { border: none; background: none; color: #8a8d99; font-size: 1.1rem; cursor: pointer; padding: 0.3rem 0.5rem; }
.carrito-item-quitar:hover { color: #c0392b; }

.carrito-resumen { max-width: 360px; margin-left: auto; margin-top: 1.5rem; border-top: 1px solid #e0e3e8; padding-top: 1rem; }
.carrito-resumen-linea { display: flex; justify-content: space-between; padding: 0.3rem 0; color: #5a5a72; }
.carrito-flete-gratis { color: #1a7f37; font-weight: 800; }
.carrito-resumen-total { font-weight: 800; font-size: 1.2rem; color: #1a1a2e; border-top: 1px solid #e0e3e8; margin-top: 0.4rem; padding-top: 0.6rem; }

.carrito-form { max-width: 480px; margin-left: auto; }
.carrito-form label { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 0.9rem; }
.carrito-form input[type="text"], .carrito-form input[type="tel"], .carrito-form input[type="email"], .carrito-form select, .carrito-form textarea {
  display: block; width: 100%; margin-top: 0.3rem; padding: 0.7rem; border: 1.5px solid #e0e3e8; border-radius: 0.4rem; font: inherit; box-sizing: border-box;
}
.carrito-form textarea { resize: vertical; }
.carrito-entrega-opciones { display: flex; gap: 1.2rem; margin-bottom: 1rem; }
.carrito-radio { display: flex; align-items: center; gap: 0.4rem; font-weight: 500; }
.carrito-armado { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; font-size: 0.9rem; margin: -0.4rem 0 1rem; }
.carrito-armado input { width: auto; margin: 0; }
.carrito-armado-no-disp { font-size: 0.82rem; color: #8a5a00; background: #fff4e5; border: 1px solid #ffcc80; border-radius: 0.4rem; padding: 0.6rem 0.7rem; margin: -0.4rem 0 1rem; }
.carrito-armado-no-disp a { color: #8a5a00; font-weight: 700; }

.ticket-pedido { text-align: left; background: #fff; border: 1px solid #e0e3e8; border-radius: 0.6rem; padding: 1.3rem 1.5rem; margin-top: 1.5rem; }
.ticket-titulo { font-weight: 800; font-size: 1.05rem; margin-bottom: 0.8rem; }
.ticket-tabla { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.ticket-tabla td { padding: 0.4rem 0; border-bottom: 1px solid #f0f1f3; }
.ticket-detalle-linea { font-size: 0.78rem; color: #8a8d99; }
.ticket-tabla .text-right { text-align: right; }
.ticket-total td { font-weight: 800; font-size: 1.05rem; border-bottom: none; padding-top: 0.6rem; }
.ticket-entrega { margin-top: 0.8rem; font-size: 0.85rem; color: #5a5a72; }
.ticket-nota { margin-top: 0.4rem; font-size: 0.85rem; color: #5a5a72; font-style: italic; }
.ticket-aviso { font-size: 0.78rem; color: #8a8d99; margin-top: 0.8rem; }

.ticket-acciones { margin-top: 1.2rem; display: flex; flex-direction: column; gap: 0.8rem; align-items: center; }
.ticket-enviar { display: flex; gap: 0.6rem; width: 100%; max-width: 400px; }
.ticket-enviar input { flex: 1; padding: 0.7rem 0.9rem; border: 1.5px solid #e0e3e8; border-radius: 0.4rem; font: inherit; }
.ticket-enviar-msg { font-size: 0.85rem; }
.ticket-enviar-msg.ticket-ok { color: #1a7f37; }
.ticket-enviar-msg.ticket-err { color: #c0392b; }

@media print {
  .tienda-topbar, .top-bar-info, .header-main, .tienda-migas-bar, .footer-new, .hero-ws-float,
  .volver-link, .ticket-acciones, .cat-menu { display: none !important; }
  body { background: #fff; }
}
.carrito-nota { font-size: 0.8rem; color: #8a8d99; margin: -0.5rem 0 1rem; }
.carrito-aviso-stock { background: #fff4e5; border: 1px solid #ffcc80; color: #8a5a00; font-size: 0.85rem; border-radius: 0.4rem; padding: 0.7rem; margin: 0.6rem 0 1rem; }
.tel-con-prefijo { display: flex; align-items: stretch; margin-top: 0.3rem; }
.tel-con-prefijo .tel-prefijo { display: flex; align-items: center; padding: 0 0.7rem; border: 1.5px solid #e0e3e8; border-right: none; border-radius: 0.4rem 0 0 0.4rem; background: #f5f6f8; color: #5a5a72; font-weight: 700; }
.tel-con-prefijo input { margin-top: 0 !important; border-radius: 0 0.4rem 0.4rem 0 !important; }

/* Escritorio: dos columnas — carrito a la izquierda, resumen+pago fijos a la derecha */
@media (min-width: 900px) {
  #carrito-contenido { display: grid; grid-template-columns: 1fr 400px; gap: 0 3rem; align-items: start; }
  #carrito-lista { grid-column: 1; grid-row: 1 / span 2; }
  .carrito-resumen { grid-column: 2; grid-row: 1; max-width: none; margin-left: 0; margin-top: 0; }
  .carrito-form { grid-column: 2; grid-row: 2; max-width: none; margin-left: 0; }
}

.tienda-contenedor { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem 3rem; }

.producto-vacio { text-align: center; padding: 3rem 1rem; color: #8a8d99; }
.sin-imagen-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; min-height: 160px; aspect-ratio: 1/1; background: #f0f0f0; color: #b0b3bd; font-size: 0.8rem; border-radius: 0.6rem; }

.producto-detalle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; }
@media (max-width: 800px) { .producto-detalle { grid-template-columns: 1fr; } }

.producto-galeria img#prod-img-principal { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 0.6rem; background: #f5f6f8; }
.prod-miniaturas { display: flex; gap: 0.5rem; margin-top: 0.7rem; flex-wrap: wrap; }
.prod-mini { width: 64px; height: 64px; object-fit: cover; border-radius: 0.4rem; cursor: pointer; border: 2px solid transparent; opacity: 0.7; }
.prod-mini.activa, .prod-mini:hover { opacity: 1; border-color: var(--naranja, #ff6b00); }

.producto-info h1 { font-size: 1.7rem; margin: 0 0 0.3rem; }
.prod-categoria { color: #8a8d99; font-size: 0.9rem; margin-bottom: 0.8rem; }
.prod-codigo { color: #8a8d99; font-size: 0.8rem; margin: -0.5rem 0 0.8rem; }
.prod-precio-row { display: flex; align-items: baseline; gap: 0.8rem; margin-bottom: 1rem; }
.prod-precio { font-size: 1.9rem; font-weight: 800; color: var(--naranja, #ff6b00); }
.prod-precio-ant { font-size: 1.1rem; color: #8a8d99; text-decoration: line-through; }
.prod-descripcion { line-height: 1.6; color: #5a5a72; margin-bottom: 1.4rem; white-space: pre-line; }

.prod-cantidad { margin-bottom: 1.2rem; }
.prod-cantidad label { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 0.4rem; }
.prod-cantidad-selector { display: inline-flex; align-items: center; border: 1.5px solid #e0e3e8; border-radius: 0.4rem; overflow: hidden; }
.prod-cantidad-selector button { border: none; background: #f5f6f8; width: 38px; height: 38px; font-size: 1.1rem; cursor: pointer; }
.prod-cantidad-selector span { width: 46px; text-align: center; font-weight: 700; }

.btn-primario { display: inline-block; background: var(--naranja, #ff6b00); color: #fff; border: none; padding: 0.9rem 1.6rem; border-radius: 0.5rem; font-weight: 700; font-size: 1rem; cursor: pointer; text-decoration: none; text-align: center; transition: background .2s; }
.btn-primario:hover { background: var(--naranja-hover, #e65c00); }
.btn-full { width: 100%; }
.prod-nota { margin-top: 1rem; font-size: 0.85rem; color: #8a8d99; }

/* Grilla de categoría — mismas clases que index_new.php (.ofertas-grid/.oferta-card) para consistencia visual */
.ofertas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.oferta-card { position: relative; display: block; border-radius: 0.6rem; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 4px 20px rgba(0,0,0,0.06); background: #fff; transition: transform .15s; }
.oferta-card:hover { transform: translateY(-3px); }
.oferta-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.oferta-badge { position: absolute; top: 0.6rem; left: 0.6rem; background: var(--naranja, #ff6b00); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 1rem; z-index: 1; }
.oferta-info { padding: 0.8rem 1rem 1rem; }
.oferta-info h3 { font-size: 0.95rem; margin: 0 0 0.4rem; }
.oferta-codigo { display: block; font-size: 0.75rem; color: #8a8d99; margin: -0.2rem 0 0.4rem; }

.cat-filtros { display: flex; gap: 0.8rem; margin: 1rem 0; flex-wrap: wrap; }
.cat-filtros input[type="text"] { flex: 1; min-width: 220px; padding: 0.7rem 0.9rem; border: 1.5px solid #e0e3e8; border-radius: 0.4rem; font: inherit; }
.cat-filtros select { padding: 0.7rem 0.9rem; border: 1.5px solid #e0e3e8; border-radius: 0.4rem; font: inherit; background: #fff; }
.precio-row { display: flex; align-items: baseline; gap: 0.5rem; }
.precio { font-weight: 800; color: var(--naranja, #ff6b00); }
.precio-ant { font-size: 0.82rem; color: #8a8d99; text-decoration: line-through; }

/* Agotado */
.badge-agotado { display: inline-block; background: #8a8d99; color: #fff; font-size: 0.65rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 1rem; vertical-align: middle; }
.badge-agotado-card { background: #8a8d99 !important; left: auto; right: 0.6rem; }
.producto-agotado img { opacity: 0.55; filter: grayscale(40%); }
.text-agotado { color: #c0392b; font-weight: 600; }
.badge-solo-despacho { display: inline-block; background: #eaf7ee; color: #1a7f37; font-size: 0.65rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 1rem; margin-left: 0.4rem; vertical-align: middle; }

/* Retiro en tienda */
.retiro-tienda-tit { font-weight: 700; font-size: 0.9rem; margin: 1.2rem 0 0.5rem; }
.retiro-tienda-tabla { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.retiro-tienda-tabla td { padding: 0.4rem 0; border-bottom: 1px solid #e0e3e8; }
.retiro-tienda-tabla td.text-right { text-align: right; }