:root {
  --tinta: #1a1c1b;
  --tinta-suave: #5b615e;
  --linea: #e2e5e3;
  --fondo: #fafbfa;
  --papel: #ffffff;
  --acento: #0f5c4e;
  --acento-claro: #e6f0ed;
  --alerta: #a3352b;
  --aviso: #8a5a12;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--fondo);
}
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.barra {
  display: flex; align-items: center; gap: 24px;
  padding: 14px 24px; background: var(--papel);
  border-bottom: 1px solid var(--linea);
  position: sticky; top: 0; z-index: 20;
}
.marca { font-weight: 600; letter-spacing: -0.01em; }
.barra nav { display: flex; gap: 18px; margin-left: auto; align-items: center; }

.envoltura { max-width: 1200px; margin: 0 auto; padding: 24px; }
.estrecho { max-width: 420px; margin: 8vh auto; padding: 0 24px; }

h1 { font-size: 22px; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.01em; }
h2 { font-size: 17px; font-weight: 600; margin: 28px 0 12px; }
.sutil { color: var(--tinta-suave); font-size: 13px; }

.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; padding: 20px; }

.filtros { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
input, select, textarea, button {
  font: inherit; padding: 9px 12px;
  border: 1px solid var(--linea); border-radius: 8px;
  background: var(--papel); color: var(--tinta);
}
textarea { width: 100%; resize: vertical; }
button { cursor: pointer; }
.btn { background: var(--acento); color: #fff; border-color: var(--acento); font-weight: 500; }
.btn:hover { filter: brightness(1.12); }
.btn-plano { background: var(--papel); color: var(--tinta); }

.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.producto { background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.producto img { width: 100%; height: 130px; object-fit: contain; background: var(--fondo); border-radius: 6px; }
.producto .titulo { font-size: 13px; line-height: 1.4; min-height: 36px; }
.producto .sku { font-size: 11px; color: var(--tinta-suave); letter-spacing: 0.02em; }
.precio { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.tachado { color: var(--tinta-suave); text-decoration: line-through; font-size: 13px; }
.agotado { color: var(--alerta); font-size: 12px; }
.producto form { display: flex; gap: 6px; margin-top: auto; }
.producto input[type=number] { width: 62px; }

.resumen {
  position: sticky; bottom: 0; background: var(--papel);
  border-top: 1px solid var(--linea); padding: 12px 24px;
  display: flex; gap: 24px; align-items: center; font-variant-numeric: tabular-nums;
}
.resumen .escalon { background: var(--acento-claro); color: var(--acento); padding: 3px 10px; border-radius: 20px; font-size: 13px; font-weight: 500; }
.resumen .empuje { color: var(--aviso); font-size: 13px; }

table { width: 100%; border-collapse: collapse; background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; }
th, td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--linea); font-size: 14px; }
th { font-weight: 500; color: var(--tinta-suave); font-size: 13px; background: var(--fondo); }
tr:last-child td { border-bottom: none; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.aviso { padding: 11px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 14px; }
.aviso.ok { background: var(--acento-claro); color: var(--acento); }
.aviso.error { background: #fbecea; color: var(--alerta); }

.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: 13px; margin-bottom: 5px; color: var(--tinta-suave); }
.campo input { width: 100%; }
.tarjetas-dato { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.dato { background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; padding: 16px; }
.dato .cifra { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

.banner-envio {
  background: var(--acento); color: #fff;
  padding: 12px 18px; border-radius: 10px; margin-bottom: 18px;
  font-size: 14px;
}
.banner-envio strong { font-weight: 600; }
.aviso.atencion { background: #fdf3e3; color: var(--aviso); }
.politica h2 { margin-top: 32px; }
.politica table { margin: 12px 0 4px; }
.nivel-actual { background: var(--acento-claro); }

/* Franja de margen: solo la ve el equipo, nunca el cliente */
.franja-margen {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 22px;
  padding: 9px 22px; font-size: 13px;
  color: #fff; font-variant-numeric: tabular-nums;
}
.franja-margen.bien   { background: #14614f; }
.franja-margen.atento { background: #8a5a12; }
.franja-margen.alerta { background: #8f2d24; }
.franja-margen .etiqueta {
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 20px; padding: 1px 9px; font-size: 11px;
}
.franja-margen strong { font-weight: 600; font-size: 15px; }
.franja-margen .sutil-claro { color: rgba(255,255,255,.72); margin-left: auto; }
body:has(.franja-margen) { padding-bottom: 46px; }

.dato.bien   { border-left: 3px solid #14614f; }
.dato.atento { border-left: 3px solid #8a5a12; }
.dato.alerta { border-left: 3px solid #8f2d24; }
.chip { padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 500; }
.chip.bien   { background: #e2f0ec; color: #14614f; }
.chip.atento { background: #fdf3e3; color: #8a5a12; }
.chip.alerta { background: #fbecea; color: #8f2d24; }

.boton-liga {
  padding: 9px 14px; border: 1px solid var(--linea);
  border-radius: 8px; background: var(--papel); color: var(--tinta);
}
.boton-liga:hover { text-decoration: none; border-color: var(--acento); color: var(--acento); }
.rol { font-size: 12px; padding: 2px 9px; border-radius: 20px; background: var(--acento-claro); color: var(--acento); }

.acciones-carrito { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.acciones-carrito .vaciar {
  margin-left: auto; background: none; border: none;
  color: var(--alerta); font-size: 14px; padding: 9px 4px;
}
.acciones-carrito .vaciar:hover { text-decoration: underline; }
.quitar {
  background: none; border: none; color: var(--tinta-suave);
  font-size: 19px; line-height: 1; padding: 0 6px; cursor: pointer;
}
.quitar:hover { color: var(--alerta); }

.nota-shopify {
  background: var(--papel); border: 1px solid var(--linea);
  border-left: 3px solid var(--acento); border-radius: 8px;
  padding: 14px 16px; white-space: pre-wrap;
  font-size: 14px; line-height: 1.6; max-width: 760px;
}

.solicitud {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: 10px; padding: 20px; margin-bottom: 14px;
  display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;
}
.solicitud-datos { flex: 1; min-width: 300px; }
.solicitud-acciones {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.con-pendientes {
  background: var(--aviso); color: #fff !important;
  padding: 3px 10px; border-radius: 20px; font-size: 13px;
}
.con-pendientes:hover { text-decoration: none; filter: brightness(1.1); }