/* Tienda en linea. Misma paleta que el sistema de la papeleria, pensada para el
   celular primero: la mayoria de compradores llega desde WhatsApp. */
:root {
  --rosa: #FF6B9D;
  --rosa-fuerte: #C91D56;
  --rosa-osc: #A81447;
  --turquesa: #4ECDC4;
  --turquesa-fuerte: #157570;
  --amarillo: #FFEE7C;
  --oscuro: #2C3E50;
  --crema: #F8F1E9;

  --fondo: var(--crema);
  --panel: #ffffff;
  --borde: #e5dacb;
  --texto: var(--oscuro);
  --suave: #5f6d7c;
  --peligro: #b3261e;
  --tinte-rosa: #ffe8f0;
  --tinte-turquesa: #dff6f4;
  --tinte-amarillo: #fff8cf;
  --tinte-rojo: #fbe3e0;
  --sombra: 0 1px 3px rgba(44, 62, 80, .12);
  --sombra-alta: 0 10px 30px rgba(44, 62, 80, .18);
  --radio: 14px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  padding-bottom: 84px;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
.oculto { display: none !important; }
.suave { color: var(--suave); }
h1, h2, h3 { line-height: 1.2; margin: 0; }

/* --- Cabecera --- */
.cabecera {
  position: sticky; top: 0; z-index: 20;
  background: var(--panel);
  border-bottom: 3px solid var(--amarillo);
  box-shadow: var(--sombra);
}
.cabecera-in {
  max-width: 1120px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.marca {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  color: var(--oscuro); text-decoration: none; font-weight: 800; font-size: 1.15rem;
}
.marca img { height: 40px; width: auto; border-radius: 8px; }
#marcaNombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-carrito {
  position: relative; flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  border: 0; background: var(--tinte-rosa); color: var(--rosa-fuerte);
  display: grid; place-items: center;
}
.btn-carrito svg { width: 24px; height: 24px; }
.burbuja {
  position: absolute; top: -2px; right: -2px;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--rosa-fuerte); color: #fff; font-size: .78rem; font-weight: 700;
  display: grid; place-items: center; border: 2px solid var(--panel);
}

.principal { max-width: 1120px; margin: 0 auto; padding: 16px; }
.cargando { text-align: center; color: var(--suave); padding: 60px 0; }

/* --- Portada --- */
.portada {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(135deg, #fff 0%, #fff7fa 54%, #e9fbf9 100%);
  border-radius: 20px; box-shadow: var(--sombra); border: 1px solid rgba(255,107,157,.16);
  padding: 20px; margin-bottom: 18px;
}
.portada::before, .portada::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; opacity: .65;
}
.portada::before { width: 190px; height: 190px; background: var(--amarillo); right: -74px; top: -98px; }
/* Pegado a la esquina: antes asomaba por debajo del boton de WhatsApp y parecia
   un error de dibujo, no un adorno. */
.portada::after { width: 116px; height: 116px; background: var(--turquesa); right: -46px; bottom: -64px; opacity: .5; }
.portada-in { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.portada-copy { max-width: 660px; }
.portada-marca { display: flex; gap: 12px; align-items: center; margin-bottom: 4px; }
.portada-logo {
  display: grid; place-items: center; width: 52px; height: 52px; flex: none;
  border-radius: 16px; background: #fff; box-shadow: 0 5px 16px rgba(44,62,80,.12); overflow: hidden;
  color: var(--rosa-osc); font-size: 1.35rem; font-weight: 900;
}
.portada-logo img { width: 100%; height: 100%; object-fit: contain; }
.portada-eyebrow { color: var(--rosa-osc); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.portada h1 { font-size: clamp(1.35rem, 4vw, 1.8rem); }
.portada p { margin: 5px 0 0; max-width: 570px; }
.portada-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.beneficio {
  display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.82);
  border: 1px solid rgba(44,62,80,.08); border-radius: 999px; padding: 7px 10px;
  font-size: .83rem; font-weight: 700; color: var(--oscuro);
}
.entregas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip-info {
  font-size: .85rem; padding: 4px 10px; border-radius: 999px;
  background: var(--tinte-turquesa); color: var(--turquesa-fuerte); font-weight: 600;
}
.btn-wa {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 999px; text-decoration: none; font-weight: 700;
  background: #1f8a4c; color: #fff; white-space: nowrap;
}
.btn-wa svg { width: 18px; height: 18px; }
.mis-pedidos {
  background: var(--tinte-amarillo); border: 1px solid #efe0a0; border-radius: var(--radio);
  padding: 10px 14px; margin-bottom: 16px; font-size: .95rem;
}
.mis-pedidos a { color: var(--rosa-osc); font-weight: 700; margin-right: 10px; }

/* --- Buscador y categorias --- */
.buscar {
  width: 100%; padding: 13px 14px; border: 1px solid var(--borde); border-radius: 12px;
  background: var(--panel); font-size: 1rem;
  box-shadow: var(--sombra);
}
.buscar:focus, .campo:focus { outline: 3px solid var(--tinte-rosa); border-color: var(--rosa); }
.categorias {
  display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 4px; margin: 0 -16px; padding-left: 16px; padding-right: 16px;
  scrollbar-width: none;
}
.categorias::-webkit-scrollbar { display: none; }
.cat {
  flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--borde);
  background: var(--panel); font-weight: 600; font-size: .92rem;
}
.cat.activa { background: var(--oscuro); border-color: var(--oscuro); color: #fff; }

/* --- Productos --- */
.rejilla {
  display: grid; gap: 12px; margin-top: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) { .rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.producto {
  background: var(--panel); border-radius: var(--radio); box-shadow: var(--sombra);
  overflow: hidden; display: flex; flex-direction: column; border: 1px solid transparent;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
/* Solo donde hay mouse: en el celular la tarjeta se quedaba levantada despues
   de tocarla, como si estuviera seleccionada. */
@media (hover: hover) {
  .producto:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); border-color: rgba(255,107,157,.24); }
}
.foto {
  aspect-ratio: 1 / .78; background: #fbf7f1; display: grid; place-items: center; position: relative;
}
.foto img { width: 100%; height: 100%; object-fit: contain; }
/* Sin foto: la inicial del producto (para que dos de la misma categoria no se
   vean iguales) y, en la esquina, el dibujo de la categoria. */
.foto-vacia {
  width: 74px; height: 74px; border-radius: 24px;
  background: #fff; color: currentColor; box-shadow: 0 8px 16px rgba(44,62,80,.10);
  display: grid; place-items: center; font-size: 2rem; font-weight: 800;
}
.foto-icono { position: absolute; right: 10px; bottom: 10px; width: 22px; height: 22px; opacity: .55; }
.foto-icono svg { width: 100%; height: 100%; }
.foto.foto-escolar { background: linear-gradient(135deg, #fff7d4, #ffe9b8); color: #9a6600; }
.foto.foto-oficina { background: linear-gradient(135deg, #e4f7f5, #c8f0ec); color: var(--turquesa-fuerte); }
.foto.foto-papeleria { background: linear-gradient(135deg, #ffe9f1, #ffd6e4); color: var(--rosa-osc); }
.foto.foto-arte { background: linear-gradient(135deg, #eee6ff, #ddd1ff); color: #6542a1; }
.foto.foto-otros { background: linear-gradient(135deg, #f4eee5, #e9dfd1); color: var(--oscuro); }
.categoria-producto { color: var(--suave); font-size: .72rem; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.sello-agotado {
  position: absolute; top: 8px; left: 8px;
  background: var(--oscuro); color: #fff; font-size: .75rem; font-weight: 700;
  padding: 3px 8px; border-radius: 6px;
}
.producto-info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
/* Tres lineas en el celular: en papeleria el final del nombre es lo que
   distingue ("100 hojas", "x12"), y ahi es donde se recortaba. */
.producto-nombre {
  font-size: .95rem; font-weight: 750; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 640px) { .producto-nombre { -webkit-line-clamp: 2; line-clamp: 2; } }
.producto-desc { font-size: .83rem; color: var(--suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.producto-precio { font-size: 1.1rem; font-weight: 800; color: var(--rosa-osc); margin-top: auto; }
.producto select {
  width: 100%; padding: 7px 8px; border: 1px solid var(--borde); border-radius: 8px;
  background: var(--panel); font-size: .88rem;
}
.btn {
  border: 0; border-radius: 10px; padding: 10px 14px; font-weight: 700;
  background: var(--tinte-rosa); color: var(--rosa-osc);
}
.btn:focus-visible, .btn-cuenta:focus-visible, .btn-carrito:focus-visible, .cat:focus-visible, .cerrar:focus-visible { outline: 3px solid var(--rosa); outline-offset: 3px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primario { background: var(--rosa-fuerte); color: #fff; }
@media (hover: hover) { .btn-primario:hover:not(:disabled) { background: var(--rosa-osc); } }
.btn-ancho { width: 100%; }
.btn-grande { padding: 14px 16px; font-size: 1.05rem; }
.btn-texto { background: none; color: var(--rosa-osc); padding: 6px; text-decoration: underline; }

.cantidad {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; background: var(--panel);
}
.cantidad button {
  border: 0; background: var(--tinte-rosa); color: var(--rosa-osc);
  width: 40px; height: 40px; font-size: 1.25rem; font-weight: 800;
}
.cantidad button:disabled { opacity: .4; }
.cantidad span { font-weight: 800; min-width: 32px; text-align: center; }

.vacio { text-align: center; color: var(--suave); padding: 40px 12px; }

/* --- Barra del carrito (celular) --- */
.barra-carrito {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 25; border: 0; border-radius: 14px; box-shadow: var(--sombra-alta);
  background: var(--rosa-fuerte); color: #fff; padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 1rem;
  max-width: 560px; margin: 0 auto;
}
.barra-ir { font-weight: 700; }

/* --- Hoja lateral (carrito, datos) --- */
.velo { position: fixed; inset: 0; background: rgba(44, 62, 80, .45); z-index: 40; }
.hoja {
  position: fixed; z-index: 50; background: var(--fondo);
  right: 0; top: 0; bottom: 0; width: min(460px, 100%);
  display: flex; flex-direction: column; box-shadow: var(--sombra-alta);
}
.hoja-cab {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: var(--panel); border-bottom: 1px solid var(--borde);
}
.cerrar {
  border: 0; background: var(--tinte-rosa); color: var(--rosa-osc);
  width: 38px; height: 38px; border-radius: 50%; font-size: 1.5rem; line-height: 1;
}
.hoja-cuerpo { flex: 1; overflow-y: auto; padding: 16px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

.linea {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center;
  background: var(--panel); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px;
}
.linea-nombre { font-weight: 700; font-size: .95rem; }
.linea-detalle { font-size: .83rem; color: var(--suave); }
.linea-total { font-weight: 800; text-align: right; }
.linea .cantidad { width: 132px; }
.quitar { border: 0; background: none; color: var(--peligro); font-size: .85rem; text-decoration: underline; padding: 4px; }

.resumen { background: var(--panel); border-radius: 12px; padding: 12px 14px; margin: 12px 0; }
.resumen div { display: flex; justify-content: space-between; padding: 3px 0; }
.resumen .total { font-size: 1.2rem; font-weight: 800; border-top: 1px solid var(--borde); margin-top: 6px; padding-top: 8px; }

/* --- Formulario --- */
fieldset { border: 0; padding: 0; margin: 0 0 16px; }
legend { font-weight: 800; margin-bottom: 8px; font-size: 1rem; }
label.campo-et { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 10px; }
.campo {
  display: block; width: 100%; margin-top: 4px;
  padding: 11px 12px; border: 1px solid var(--borde); border-radius: 10px; background: var(--panel);
  font-size: 1rem;
}
textarea.campo { resize: vertical; min-height: 64px; }
.opciones { display: grid; gap: 8px; }
.opcion {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--panel); border: 2px solid var(--borde); border-radius: 12px; padding: 12px;
}
.opcion:has(input:checked) { border-color: var(--rosa-fuerte); background: #fff7fa; }
.opcion input { margin-top: 3px; accent-color: var(--rosa-fuerte); width: 18px; height: 18px; flex: none; }
.opcion strong { display: block; }
.opcion small { color: var(--suave); }
.check { display: flex; gap: 10px; align-items: center; font-weight: 600; margin: 4px 0 12px; }
.check input { width: 18px; height: 18px; accent-color: var(--rosa-fuerte); }
.dos { display: grid; grid-template-columns: 120px 1fr; gap: 8px; }
.error-form {
  background: var(--tinte-rojo); color: var(--peligro); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 12px; font-weight: 600;
}

/* --- Seguimiento del pedido --- */
.seguimiento { max-width: 620px; margin: 0 auto; }
.tarjeta { background: var(--panel); border-radius: var(--radio); box-shadow: var(--sombra); padding: 18px; margin-bottom: 14px; }
.estado-grande { display: flex; gap: 14px; align-items: center; }
.icono-estado {
  flex: none; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.6rem;
  background: var(--tinte-amarillo);
}
.icono-estado.ok { background: var(--tinte-turquesa); }
.icono-estado.mal { background: var(--tinte-rojo); }
.pasos { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.pasos li { display: flex; gap: 10px; align-items: center; color: var(--suave); }
.pasos li::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--borde); flex: none;
}
.pasos li.hecho { color: var(--texto); }
.pasos li.hecho::before { background: var(--turquesa-fuerte); border-color: var(--turquesa-fuerte); }
.pasos li.actual { color: var(--texto); font-weight: 700; }
.pasos li.actual::before { border-color: var(--rosa-fuerte); background: var(--tinte-rosa); }
.aviso-pago { background: var(--tinte-amarillo); border-radius: 12px; padding: 12px; margin-top: 12px; }

/* --- Avisos flotantes --- */
.avisos { position: fixed; top: 76px; left: 0; right: 0; z-index: 60; display: grid; justify-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.aviso {
  background: var(--oscuro); color: #fff; padding: 10px 16px; border-radius: 10px;
  box-shadow: var(--sombra-alta); font-weight: 600; max-width: 520px;
}
.aviso.mal { background: var(--peligro); }

.pie { text-align: center; color: var(--suave); font-size: .85rem; padding: 24px 16px 8px; }
.pie a { color: inherit; }

@media (min-width: 900px) {
  body { padding-bottom: 24px; }
  .barra-carrito { display: none !important; }
  .portada { padding: 26px 28px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hoja { animation: entrar .18s ease-out; }
  @keyframes entrar { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* --- Clientes con cuenta (mayoristas) --- */
.cabecera-der { display: flex; align-items: center; gap: 8px; flex: none; }
.btn-cuenta {
  border: 1px solid var(--borde); background: var(--panel); color: var(--oscuro);
  border-radius: 999px; padding: 9px 14px; font-weight: 700; font-size: .9rem;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.btn-cuenta.dentro { background: var(--tinte-turquesa); border-color: transparent; color: var(--turquesa-fuerte); }
.banda-cuenta {
  background: var(--tinte-turquesa); color: var(--turquesa-fuerte); border-radius: var(--radio);
  padding: 12px 14px; margin-bottom: 16px; font-weight: 600;
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
}
.banda-cuenta strong { color: var(--oscuro); }
.banda-cuenta.alerta { background: var(--tinte-rojo); color: var(--peligro); }
.precio-antes { text-decoration: line-through; color: var(--suave); font-weight: 600; font-size: .85rem; margin-right: 6px; }
.minimo {
  background: var(--tinte-amarillo); border-radius: 12px; padding: 10px 12px; margin: 8px 0; font-size: .92rem;
}
.minimo .barra { height: 8px; border-radius: 4px; background: #efe3b0; margin-top: 6px; overflow: hidden; }
.minimo .barra span { display: block; height: 100%; background: var(--turquesa-fuerte); }
.ficha { background: var(--panel); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; font-size: .95rem; }
.ficha div { padding: 2px 0; }
.tabla-cuenta { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla-cuenta td { padding: 7px 4px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla-cuenta td:last-child { text-align: right; white-space: nowrap; }
.chip-rojo { background: var(--tinte-rojo); color: var(--peligro); }
@media (max-width: 380px) { .btn-cuenta { max-width: 110px; padding: 8px 10px; } }
@media (max-width: 460px) {
  .portada { padding: 16px; }
  .portada-acciones { width: 100%; }
  .portada-acciones .btn-wa { flex: 1; justify-content: center; }
  .beneficio { font-size: .78rem; }
}