/* Tienda pública. Los colores y la tipografía vienen de los ajustes (variables inyectadas en el layout). */
:root {
    --color-primario: #444444;
    --color-secundario: #222222;
    --color-acento: #666666;
    --color-crema: #f7f7f7;
    --color-fondo: #ffffff;
    --color-texto: #161616;
    --color-texto-2: #3d3d3d;
    --color-texto-3: #595959;
    --fuente: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fuente); color: var(--color-texto-2); background: var(--color-fondo); line-height: 1.5; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-secundario); }
h1, h2, h3 { color: var(--color-secundario); line-height: 1.2; margin: 0 0 .5em; }
ul { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--color-secundario); outline-offset: 2px; }

.contenedor { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.solo-escritorio { display: none; }
.saltar { position: absolute; left: -999px; top: 0; background: #fff; color: #000; padding: 8px 12px; z-index: 100; }
.saltar:focus { left: 8px; }

/* Botones */
button { font: inherit; }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 10px 20px; border: 2px solid var(--color-primario); border-radius: 8px; background: var(--color-primario); color: #fff; font-size: 1rem; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; }
.boton:hover:not(:disabled) { background: var(--color-secundario); border-color: var(--color-secundario); }
.boton:disabled { opacity: .55; cursor: not-allowed; }
.boton--secundario { width: auto; background: transparent; color: var(--color-primario); }
.boton--secundario:hover:not(:disabled) { background: var(--color-primario); border-color: var(--color-primario); color: #fff; }

/* Barra superior */
.aviso-catalogo { margin: 0; padding: 6px 12px; text-align: center; font-size: .8125rem; background: var(--color-fondo); color: var(--color-secundario); border-bottom: 1px solid rgba(0, 0, 0, .08); }
.barra-superior { background: var(--color-primario); color: #fff; font-weight: 700; font-size: .8125rem; }
.barra-superior__fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 36px; }
.barra-superior__texto { margin: 0; }
.barra-superior__enlaces { display: flex; gap: 16px; align-items: center; flex-shrink: 0; }
.barra-superior a { color: #fff; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.barra-superior a:hover { text-decoration: underline; }
.barra-superior a[aria-disabled="true"] { cursor: default; }
.barra-superior :focus-visible { outline-color: #fff; }

/* Cabecera */
.cabecera { background: var(--color-crema); }
.cabecera__fila { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: 1 1 auto; min-width: 0; }
.marca__logo { height: 56px; width: auto; }
.marca__textos { display: flex; flex-direction: column; min-width: 0; }
.marca__nombre { font-weight: 800; font-size: 1.125rem; color: var(--color-secundario); }
.marca__bajada { font-size: .75rem; color: var(--color-texto-3); }
.cabecera__acciones { display: flex; align-items: center; gap: 14px; }
.whatsapp, .carrito { display: inline-flex; align-items: center; gap: 6px; color: var(--color-secundario); text-decoration: none; font-weight: 700; }
.carrito__contador { background: var(--color-primario); color: #fff; border-radius: 999px; min-width: 20px; height: 20px; padding: 0 5px; font-size: .75rem; display: inline-flex; align-items: center; justify-content: center; }
.buscador { order: 5; flex: 1 1 100%; display: flex; }
.buscador input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--color-acento); border-right: 0; border-radius: 8px 0 0 8px; font: inherit; background: #fff; }
.buscador button { padding: 10px 16px; border: 0; border-radius: 0 8px 8px 0; background: var(--color-primario); color: #fff; font-weight: 700; cursor: pointer; }
.hamburguesa { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--color-acento); border-radius: 8px; background: #fff; cursor: pointer; }
.hamburguesa span { display: block; height: 2px; background: var(--color-secundario); }

/* Navegación (celular: oculta hasta abrir) */
.nav { background: var(--color-primario); display: none; }
.nav.abierto { display: block; }
.nav__lista { display: flex; flex-direction: column; }
.nav a, .nav button { display: block; width: 100%; padding: 12px 4px; color: #fff; background: none; border: 0; text-align: left; text-decoration: none; font: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; cursor: pointer; }
.nav a:hover, .nav button:hover { text-decoration: underline; }
.nav :focus-visible { outline-color: #fff; }
.mega { display: none; background: var(--color-crema); }
.mega.abierto { display: block; }
.mega ul { padding: 4px 12px 8px; }
.mega a { color: var(--color-secundario); font-weight: 600; text-transform: none; letter-spacing: 0; padding: 8px 4px; }
.mega :focus-visible { outline-color: var(--color-secundario); }

/* Secciones */
.seccion { padding-top: 24px; padding-bottom: 32px; }
.seccion__titulo { font-size: 1.5rem; }
.seccion__pie { text-align: center; margin-top: 24px; }
.seccion__cantidad, .migas, .vacio { color: var(--color-texto-3); }
.migas { font-size: .875rem; margin: 0 0 8px; }
.portada { background: var(--color-primario); color: #fff; padding: 48px 0; text-align: center; }
.portada h1 { color: #fff; font-size: 1.75rem; margin-bottom: .25em; }
.portada p { margin: 0; font-size: 1.0625rem; }

/* Slider */
.slider { position: relative; display: grid; background: var(--color-crema); overflow: hidden; }
.slider__slide { grid-area: 1 / 1; position: relative; visibility: hidden; text-align: center; }
.slider__marco { display: inline-block; position: relative; max-width: 100%; vertical-align: top; }
.slider__marco a { display: block; }
.slider__slide.activo, .slider__slide.saliendo { visibility: visible; }
.slider__slide.activo { z-index: 1; }
/* Efectos (data-efecto): la transición solo corre en el slide que entra y en el que sale. */
.slider[data-efecto="fundido"] .slider__slide { opacity: 0; }
.slider[data-efecto="fundido"] .slider__slide.activo { opacity: 1; }
.slider[data-efecto="fundido"] .slider__slide.activo,
.slider[data-efecto="fundido"] .slider__slide.saliendo { transition: opacity .6s ease; }
.slider[data-efecto="deslizar"] .slider__slide { transform: translateX(100%); }
.slider[data-efecto="deslizar"] .slider__slide.activo { transform: none; }
.slider[data-efecto="deslizar"] .slider__slide.saliendo { transform: translateX(-100%); }
.slider[data-efecto="deslizar"] .slider__slide.activo,
.slider[data-efecto="deslizar"] .slider__slide.saliendo { transition: transform .6s ease; }
.slider[data-efecto="zoom"] .slider__slide { opacity: 0; transform: scale(1.12); }
.slider[data-efecto="zoom"] .slider__slide.activo { opacity: 1; transform: none; }
.slider[data-efecto="zoom"] .slider__slide.activo,
.slider[data-efecto="zoom"] .slider__slide.saliendo { transition: opacity .7s ease, transform .7s ease; }
.slider__slide picture { display: block; }
.slider__slide img { display: block; width: auto; max-width: 100%; height: auto; max-height: 70vh; }
@media (min-width: 768px) { .slider__slide img { max-height: 520px; } }
.slider__texto { text-align: left; position: absolute; left: 16px; bottom: 16px; max-width: 80%; background: rgba(255, 255, 255, .88); padding: 10px 14px; border-radius: 8px; }
.slider__texto h2 { font-size: 1.125rem; margin: 0; }
.slider__texto p { margin: .25em 0 0; font-size: .875rem; }
.slider__boton { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .85); color: var(--color-secundario); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.slider__boton--prev { left: 8px; }
.slider__boton--next { right: 8px; }

/* Promociones: franja a todo el ancho con la mitad del alto del banner (4 por slide, menos en pantallas chicas) */
.promos { --por-slide: 1; position: relative; background: var(--color-crema); }
.promos__vista { overflow-x: auto; }
.js .promos__vista { overflow: hidden; }
.promos__pista { display: flex; margin: 0; padding: 0; list-style: none; transition: transform .6s ease; }
.promo { position: relative; flex: 0 0 calc(100% / var(--por-slide)); aspect-ratio: 8 / 5; max-height: 260px; overflow: hidden; }
.promo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.promo__texto { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 12px; color: #fff; text-align: left; background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); }
.promo__texto h3 { margin: 0; font-size: 1.0625rem; line-height: 1.2; }
.promo__texto p { margin: .2em 0 0; font-size: .875rem; line-height: 1.3; }
@media (min-width: 600px) { .promos { --por-slide: 2; } }
@media (min-width: 1024px) { .promos { --por-slide: 4; } }
@media (prefers-reduced-motion: reduce) { .promos__pista { transition: none; } }

/* Grillas */
.grilla, .rubros-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rubro-tarjeta { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px; background: var(--color-crema); border: 1px solid transparent; border-radius: 10px; text-decoration: none; }
.rubro-tarjeta:hover { border-color: var(--color-primario); }
.rubro-tarjeta__nombre { font-weight: 800; color: var(--color-secundario); }
.rubro-tarjeta__cantidad { font-size: .875rem; color: var(--color-texto-3); }

/* Tarjeta de artículo */
.tarjeta { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(0, 0, 0, .1); border-radius: 10px; overflow: hidden; }
.tarjeta__imagen { display: block; aspect-ratio: 1 / 1; background: var(--color-crema); }
.tarjeta__imagen img { width: 100%; height: 100%; object-fit: cover; }
.placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 2.5rem; font-weight: 800; color: var(--color-primario); background: var(--color-crema); }
.tarjeta__cuerpo { display: flex; flex-direction: column; flex: 1; gap: 4px; padding: 10px; }
.tarjeta__codigo { margin: 0; font-size: .75rem; color: var(--color-texto-3); }
.tarjeta__titulo { margin: 0; font-size: .9375rem; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; }
.tarjeta__titulo a { color: var(--color-secundario); text-decoration: none; }
.tarjeta__titulo a:hover { text-decoration: underline; }
.tarjeta__contenido { margin: 0; font-size: .8125rem; color: var(--color-texto-3); }
.tarjeta__precio { margin: auto 0 6px; font-size: 1.125rem; font-weight: 800; color: var(--color-secundario); padding-top: 6px; }
.tarjeta__cantidad { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: .875rem; }
.tarjeta__cantidad input { width: 80px; min-height: 40px; padding: 6px; text-align: center; border: 1px solid rgba(0, 0, 0, .2); border-radius: 8px; font: inherit; }
.tarjeta .boton { min-height: 40px; font-size: .875rem; margin-top: auto; }
.tarjeta__precio + .boton { margin-top: 0; }

/* Ficha */
.ficha { display: grid; gap: 20px; }
.ficha__imagen { aspect-ratio: 1 / 1; background: var(--color-crema); border-radius: 10px; overflow: hidden; }
.ficha__imagen img { width: 100%; height: 100%; object-fit: contain; }
.ficha__datos h1 { font-size: 1.5rem; }
.ficha__precio { font-size: 1.75rem; font-weight: 800; color: var(--color-secundario); margin: .25em 0 0; }
.ficha__nota { margin: 0 0 1em; font-size: .8125rem; color: var(--color-texto-3); }
.ficha .boton { max-width: 320px; }

/* Páginas simples */
.texto { max-width: 800px; }
.datos { display: grid; grid-template-columns: 1fr; gap: 2px 16px; }
.datos dt { font-weight: 800; color: var(--color-secundario); margin-top: 12px; }
.datos dd { margin: 0; }

/* Paginación */
.paginacion { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 24px; }
.paginacion__item { min-width: 40px; padding: 8px 12px; border: 1px solid var(--color-acento); border-radius: 8px; text-align: center; text-decoration: none; color: var(--color-secundario); background: #fff; }
a.paginacion__item:hover { background: var(--color-crema); }
.paginacion__item--actual { background: var(--color-primario); border-color: var(--color-primario); color: #fff; font-weight: 700; }
.paginacion__item[aria-disabled="true"] { opacity: .45; }

/* Pie */
.pie { margin-top: 24px; }
.pie__beneficios { background: var(--color-primario); color: #fff; }
.pie__beneficios-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 20px; padding-bottom: 20px; }
.pie__beneficios-lista li { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-weight: 700; font-size: .875rem; }
.pie__columnas { background: var(--color-crema); padding: 28px 0; }
.pie__grilla { display: grid; grid-template-columns: 1fr; gap: 24px; }
.pie h2 { font-size: 1rem; }
.pie p, .pie li { margin: 0 0 .4em; font-size: .9375rem; }
.pie__final { background: var(--color-primario); color: #fff; text-align: center; font-size: .8125rem; padding: 12px 0; }
.pie__final p { margin: 0; }

/* Tablet */
@media (min-width: 600px) {
    .grilla, .rubros-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .pie__beneficios-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pie__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ficha { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* Desde 768px: menú horizontal y buscador en la fila principal */
@media (min-width: 768px) {
    .solo-escritorio { display: inline; }
    .hamburguesa { display: none; }
    .buscador { order: 0; flex: 1 1 320px; max-width: 520px; }
    .marca { flex: 0 1 auto; }
    .cabecera__fila { flex-wrap: nowrap; gap: 24px; }
    .cabecera__acciones { margin-left: auto; }
    .nav { display: block; position: relative; }
    .nav__lista { flex-direction: row; justify-content: center; }
    .nav a, .nav button { width: auto; padding: 14px 18px; }
    .mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; max-height: 60vh; overflow-y: auto; box-shadow: 0 8px 20px rgba(0, 0, 0, .15); }
    .mega ul { columns: 3; column-gap: 24px; padding: 16px 20px; max-width: 1280px; margin: 0 auto; }
    .mega li { break-inside: avoid; }
}

@media (min-width: 1024px) {
    .grilla, .rubros-grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pie__grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .mega ul { columns: 4; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

[hidden] { display: none !important; }
.pie__beneficio-texto { font-weight: 400; font-size: .8125rem; }

/* Textos largos en Markdown (nosotros, acerca de) */
.pagina-texto p { margin: 0 0 .8em; }
.pagina-texto ul { list-style: disc; padding-left: 1.25em; margin: 0 0 .8em; }
.pagina-texto li { margin-bottom: .25em; }
.pagina-texto strong { font-weight: 800; color: var(--color-secundario); }
.pagina-texto > :last-child { margin-bottom: 0; }

/* Páginas con imagen (Nosotros, Contacto): imagen arriba en celular, 40% / 60% desde 768px */
.pagina-con-imagen { display: grid; gap: 24px; }
.pagina-imagen { margin: 0; }
.pagina-imagen img { width: 100%; height: auto; border-radius: 12px; }
@media (min-width: 768px) {
    .pagina-con-imagen { grid-template-columns: 2fr 3fr; gap: 32px; align-items: start; }
}

/* Cuenta de clientes */
.barra-superior form { margin: 0; }
.barra-superior__usuario { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-superior__salir { background: none; border: 0; padding: 0; color: #fff; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.precio-lista { display: block; font-size: .8125rem; font-weight: 400; color: var(--color-texto-3); }

/* Componentes de formulario */
.tarjeta-form { max-width: 440px; margin: 0 auto; padding: 20px; background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0, 0, 0, .08); }
.tarjeta-form--ancha { max-width: none; margin: 0; }
.tarjeta-form h1, .tarjeta-form h2 { margin-bottom: .25em; }
.tarjeta-form__subtitulo { margin: 0 0 20px; font-size: .875rem; color: var(--color-texto-3); }
.tarjeta-form__pie { margin: 20px 0 0; font-size: .9375rem; }
.tarjeta-form .boton { margin-top: 20px; }
.tarjeta-form .boton--secundario { margin-top: 0; }
@media (min-width: 600px) { .tarjeta-form { padding: 32px; } }

.campo label { display: block; font-weight: 600; margin-bottom: 6px; }
.campo + .campo { margin-top: 16px; }
.campo :where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="color"], [type="hidden"], [type="range"]), select, textarea) {
    width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid rgba(0, 0, 0, .2); border-radius: 8px;
    font: inherit; font-size: 1rem; background: #fff; color: inherit; }
.campo :where(input, select, textarea):focus { border-color: var(--color-primario); outline: 3px solid color-mix(in srgb, var(--color-primario) 30%, transparent); outline-offset: 0; }
.campo :where([aria-invalid="true"]) { border-color: #b42318; }
.campo__error { margin: 6px 0 0; color: #b42318; font-size: .875rem; }
.campo__password { position: relative; }
.campo__password :where(input) { padding-right: 96px; }
.campo__ver { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); min-height: 36px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--color-secundario); font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; }
.campo__ver:hover { background: rgba(0, 0, 0, .06); }

.checkbox { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-weight: 400; cursor: pointer; }
.checkbox input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--color-primario); }

.alerta { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; margin-bottom: 16px; border-radius: 8px; border-left: 4px solid; font-size: .9375rem; }
.alerta svg { flex: none; margin-top: 2px; }
.alerta__texto > :first-child { margin-top: 0; }
.alerta__texto > :last-child { margin-bottom: 0; }
.alerta ul { list-style: disc; padding-left: 1.2em; margin: 0; }
.alerta a { color: inherit; font-weight: 700; }
.alerta--error { background: #fdecec; border-color: #b42318; color: #7a1b12; }
.alerta--ok { background: #e8f6ec; border-color: #1a7f37; color: #14532d; }

/* Ingreso: formulario + panel informativo */
.acceso { display: grid; gap: 24px; max-width: 440px; margin: 24px auto; }
.acceso-info { padding: 24px 20px; border-radius: 12px; background: var(--color-crema); }
.acceso-info h2 { font-size: 1.25rem; }
.acceso-info .boton { width: 100%; margin-top: 16px; }
@media (min-width: 900px) {
    .acceso { grid-template-columns: 440px 1fr; max-width: 960px; gap: 32px; margin: 48px auto; align-items: start; }
    .acceso-info { padding: 32px; }
}

/* Mi cuenta */
.cuenta-grilla { display: grid; gap: 24px; align-items: start; }
@media (min-width: 768px) {
    .cuenta-grilla { grid-template-columns: 3fr 2fr; gap: 32px; }
    .datos { grid-template-columns: max-content 1fr; }
    .datos dt { margin-top: 0; }
}

/* Mi pedido */
.js .solo-sin-js { display: none; }
.solo-con-js { display: none; }
.js .solo-con-js { display: inline-flex; }
.carrito { position: relative; text-decoration: none; }
.toasts { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: 520px; padding: 12px 16px; border-radius: 10px; color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); animation: toast-entrada .2s ease-out; }
.toast--ok { background: #166534; }
.toast--error { background: #b42318; }
.toast a { color: #fff; font-weight: 700; white-space: nowrap; }
.toast__cerrar { border: 0; background: none; color: #fff; font-size: 1.25rem; line-height: 1; cursor: pointer; }
@keyframes toast-entrada { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.ficha__agregar { max-width: 320px; margin: 16px 0; }
.ficha__agregar .campo { margin-bottom: 12px; }
.ficha__agregar input[type="number"] { max-width: 120px; }

.carrito-tabla { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, .08); }
.carrito-tabla th, .carrito-tabla td { padding: 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.carrito-tabla thead th { background: var(--color-crema); font-size: .875rem; color: var(--color-secundario); }
.carrito-tabla .num { text-align: right; white-space: nowrap; }
.carrito-fila__articulo { display: flex; gap: 12px; align-items: center; }
.carrito-fila__foto { flex: none; display: block; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; background: var(--color-crema); }
.carrito-fila__foto img { width: 100%; height: 100%; object-fit: cover; }
.carrito-fila__foto .placeholder { font-size: 1.25rem; }
.carrito-fila__nombre { color: var(--color-secundario); font-weight: 700; text-decoration: none; }
.carrito-fila__nombre:hover { text-decoration: underline; }
.carrito-fila__subtotal { font-weight: 800; color: var(--color-secundario); }
.quitar { border: 0; background: none; padding: 8px; color: #b42318; font: inherit; font-size: .875rem; text-decoration: underline; cursor: pointer; }
.cantidad { display: inline-flex; align-items: center; gap: 4px; }
.cantidad input { width: 64px; min-height: 40px; padding: 6px; text-align: center; border: 1px solid rgba(0, 0, 0, .2); border-radius: 8px; font: inherit; }
.cantidad__boton, .cantidad__actualizar { align-items: center; justify-content: center; min-width: 40px; min-height: 40px; border: 1px solid rgba(0, 0, 0, .2); border-radius: 8px; background: #fff; color: var(--color-secundario); font: inherit; font-size: 1.25rem; font-weight: 700; cursor: pointer; }
.cantidad__actualizar { font-size: .875rem; padding: 0 10px; }
.cantidad__boton:disabled { opacity: .4; cursor: not-allowed; }

.carrito-envio { margin-top: 24px; }
.carrito-resumen { position: sticky; bottom: 0; z-index: 30; margin-top: 16px; padding: 12px 16px; background: #fff; border-top: 3px solid var(--color-primario); box-shadow: 0 -4px 16px rgba(0, 0, 0, .1); border-radius: 12px 12px 0 0; }
.carrito-resumen__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.carrito-resumen .boton { width: auto; min-width: 200px; flex: 1 1 200px; }
.carrito-total { margin: 0; font-size: 1.125rem; }
.carrito-total strong { font-size: 1.5rem; color: var(--color-secundario); }
.carrito-total__nota { font-size: .75rem; color: var(--color-texto-3); }
.carrito-minimo { margin: 0 0 8px; font-size: .9375rem; }
.carrito-minimo--falta { color: #b42318; }
.carrito-minimo--ok { color: #166534; }
.carrito-vacio { text-align: center; }

.estado { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .875rem; font-weight: 700; background: var(--color-crema); color: var(--color-secundario); }
.estado--anulado { background: #fdecec; color: #b42318; }
.estado--importado { background: #e8f6ec; color: #166534; }
.pedidos-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.pedidos-acciones .boton { min-height: 40px; padding: 6px 14px; font-size: .875rem; }
.pedidos-acciones form { margin: 0; }
.pedido-detalle { margin-top: 16px; }
.pedido-detalle tfoot th, .pedido-detalle tfoot td { border-bottom: 0; }
.pedido-detalle__total th, .pedido-detalle__total td { font-size: 1.125rem; font-weight: 800; color: var(--color-secundario); }
.pedido-repetir { margin-top: 16px; max-width: 320px; }

/* Debajo de 768px la tabla se convierte en tarjetas apiladas */
@media (max-width: 767px) {
    .carrito-tabla, .carrito-tabla tbody, .carrito-tabla tfoot { display: block; background: none; box-shadow: none; }
    .carrito-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .carrito-tabla tr { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; margin-bottom: 12px; padding: 12px; background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0, 0, 0, .08); }
    .carrito-tabla th, .carrito-tabla td { display: block; padding: 0; border: 0; }
    .carrito-tabla .carrito-fila__articulo { grid-column: 1 / -1; }
    .carrito-tabla td[data-etiqueta]:not(.carrito-fila__cantidad)::before { content: attr(data-etiqueta) ': '; font-weight: 600; color: var(--color-texto-3); font-size: .8125rem; }
    .carrito-tabla .num { text-align: left; }
    .carrito-tabla .carrito-fila__subtotal { text-align: right; font-size: 1.125rem; }
    .carrito-fila__quitar { justify-self: end; }
    .carrito-tabla tfoot tr { grid-template-columns: 1fr auto; }
    .carrito-tabla tfoot th { text-align: left; }
    .pedidos-tabla .pedidos-acciones { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
    .toasts { left: auto; right: 24px; align-items: flex-end; }
    .carrito-resumen { border-radius: 12px; border-top-width: 1px; border-left: 4px solid var(--color-primario); }
}

.precio-etiqueta { display: block; font-size: .6875rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--color-texto-3); }