/* ==========================================================================
   tienda.css -- carro, checkout y pago de detallesdepia.cl
   S54 2026-08-26 NOVA
   Archivo APARTE de style.css a proposito: si hubiera que revertir la tienda,
   basta con no cargarlo. No se toco ni una linea del CSS original del sitio.
   Usa las mismas variables: --color-primary #2c2c2c, --color-accent #c9a961.
   ========================================================================== */

.tienda-wrap { max-width: 1100px; margin: 2rem auto 4rem; padding: 0 1.5rem; }
.tienda-wrap.tienda-estrecha { max-width: 720px; }
.tienda-titulo { font-size: 2rem; color: var(--color-primary); margin-bottom: .25rem; }
.tienda-paso { color: #777; font-size: .9rem; margin-bottom: 1.5rem; }

.tienda-preview-bar {
    background: #7b341e; color: #fff; text-align: center;
    padding: .5rem 1rem; font-size: .85rem; font-weight: 600; letter-spacing: .03em;
}
.tienda-preview-bar a { color: #ffd9c2; }

.tienda-msg {
    padding: .9rem 1.1rem; border-radius: 8px; margin-bottom: 1.25rem;
    font-size: .95rem; line-height: 1.5;
}
.tienda-msg.ok  { background: #e7f6ec; color: #1c5133; border: 1px solid #b7e0c5; }
.tienda-msg.err { background: #fdecec; color: #8c2b2b; border: 1px solid #f2c2c2; }
.tienda-msg ul  { margin: .5rem 0 0 1.2rem; }

.tienda-vacio { text-align: center; padding: 3rem 1rem; color: #666; }
.tienda-vacio p { margin-bottom: 1.5rem; }

/* --- botones --- */
.btn-tienda {
    display: inline-block; background: var(--color-accent); color: #fff;
    border: none; padding: .8rem 1.5rem; border-radius: 8px;
    font-family: inherit; font-size: .95rem; font-weight: 600;
    text-decoration: none; cursor: pointer; transition: background .25s ease;
}
.btn-tienda:hover  { background: #b3924c; }
.btn-tienda.grande { padding: 1rem 2rem; font-size: 1rem; }
.btn-tienda.wa     { background: #25d366; }
.btn-tienda.wa:hover { background: #1fb455; }
.btn-tienda.plano  { background: #ece9e2; color: var(--color-primary); }
.btn-tienda.plano:hover { background: #ddd8cd; }

/* --- carro en la cabecera --- */
.nav-carro { position: relative; }
.carro-badge {
    display: inline-block; min-width: 1.25rem; padding: 0 .35rem;
    background: var(--color-accent); color: #fff; border-radius: 999px;
    font-size: .72rem; line-height: 1.25rem; text-align: center; margin-left: .2rem;
}

/* --- lista del carro --- */
.carro-lista { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.carro-fila {
    display: grid; grid-template-columns: 88px 1fr auto auto;
    gap: 1rem; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid #eee;
}
.carro-fila:last-child { border-bottom: none; }
.carro-foto img { width: 88px; height: 88px; object-fit: cover; border-radius: 8px; display: block; }
.carro-datos h3 { font-size: 1rem; font-weight: 600; color: var(--color-primary); margin: .15rem 0; }
.carro-cat { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-accent); }
.carro-unica { font-size: .75rem; color: #888; }
.carro-precio { font-weight: 700; color: var(--color-primary); white-space: nowrap; }
.carro-quitar button {
    background: none; border: 1px solid #ddd; color: #8c2b2b;
    padding: .4rem .8rem; border-radius: 6px; cursor: pointer; font-family: inherit; font-size: .82rem;
}
.carro-quitar button:hover { background: #fdecec; border-color: #f2c2c2; }

/* --- resumen de plata --- */
.carro-resumen, .checkout-resumen {
    background: #fff; border-radius: 12px; padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,.05); margin-top: 1.5rem;
}
.checkout-resumen h3 { font-size: 1.05rem; margin-bottom: 1rem; color: var(--color-primary); }
.carro-resumen .linea, .checkout-resumen .linea {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .45rem 0; font-size: .93rem; color: #444;
}
.carro-resumen .linea.total, .checkout-resumen .linea.total {
    border-top: 2px solid #eee; margin-top: .5rem; padding-top: .75rem;
    font-size: 1.15rem; font-weight: 700; color: var(--color-primary);
}
.carro-nota { font-size: .8rem; color: #888; margin-top: .75rem; line-height: 1.5; }

.carro-acciones { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1.5rem; }
.carro-acciones form { margin: 0; }

/* --- checkout --- */
.checkout-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: start; }
.checkout-resumen.suelto { margin-top: 2rem; }
.checkout-form { background: #fff; border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.checkout-form label { display: block; margin-bottom: 1rem; font-size: .85rem; font-weight: 600; color: #444; }
.checkout-form input, .checkout-form textarea {
    width: 100%; margin-top: .35rem; padding: .7rem .85rem;
    border: 1.5px solid #e2e2e2; border-radius: 8px;
    font-family: inherit; font-size: .95rem; font-weight: 400; color: #222;
}
.checkout-form input:focus, .checkout-form textarea:focus { outline: none; border-color: var(--color-accent); }
.checkout-form small { display: block; margin-top: .3rem; font-weight: 400; color: #999; font-size: .75rem; }
.checkout-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.pago-caja { background: #fff; border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 10px rgba(0,0,0,.05); }

/* --- resultado --- */
.resultado { background: #fff; border-radius: 12px; padding: 2rem; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.resultado h2 { font-size: 1.8rem; margin-bottom: .5rem; }
.resultado p { color: #555; line-height: 1.6; margin-bottom: .5rem; }
.resultado p.grande { font-size: 1.15rem; font-weight: 600; color: var(--color-primary); }
.resultado.ok     { border-top: 5px solid #25d366; }
.resultado.espera { border-top: 5px solid var(--color-accent); }
.resultado.mal    { border-top: 5px solid #d64545; }

/* --- boton de agregar al carro dentro de la ficha de producto --- */
.form-agregar { margin-top: .5rem; }
.btn-carro {
    width: 100%; background: var(--color-primary); color: #fff; border: none;
    padding: .75rem 1rem; border-radius: 8px; font-family: inherit;
    font-size: .9rem; font-weight: 600; cursor: pointer; transition: background .25s ease;
}
.btn-carro:hover { background: #444; }
.btn-carro.puesto { background: #ece9e2; color: var(--color-primary); cursor: default; }

/* --- boton flotante de WhatsApp Business --- */
.wa-flotante {
    position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 90;
    display: inline-flex; align-items: center; gap: .5rem;
    background: #25d366; color: #fff; text-decoration: none;
    padding: .7rem 1.1rem; border-radius: 999px; font-size: .9rem; font-weight: 600;
    box-shadow: 0 6px 20px rgba(37,211,102,.35);
    transition: transform .2s ease, background .2s ease;
}
.wa-flotante:hover { background: #1fb455; transform: translateY(-2px); }
.wa-flotante svg { display: block; }

@media (max-width: 860px) {
    .checkout-grid { grid-template-columns: 1fr; }
    .carro-fila { grid-template-columns: 64px 1fr auto; row-gap: .5rem; }
    .carro-foto img { width: 64px; height: 64px; }
    .carro-quitar { grid-column: 3; justify-self: end; }
    .carro-acciones .btn-tienda, .carro-acciones form, .carro-acciones button { width: 100%; text-align: center; }
    .checkout-2col { grid-template-columns: 1fr; }
    .wa-flotante span { display: none; }
    .wa-flotante { padding: .85rem; }
}