/* =========================================================================
   mi catálogo — sistema de diseño
   Mobile-first. Sin frameworks. Sin build. Cálido, grande y sencillo.
   ========================================================================= */

/* ------------------------------------------------------------- tokens --- */
:root {
  --primario: #c2456e;
  --primario-oscuro: #a13558;
  --primario-suave: #fdeef3;

  --fondo: #fbf7f4;
  --superficie: #ffffff;
  --superficie-2: #f5efea;
  --tinta: #2e2a28;
  --tinta-media: #5d534e;
  --tinta-suave: #8a7f79;
  --borde: #e8ded7;
  --borde-fuerte: #d6c8be;

  --exito: #2e7d5b;
  --exito-suave: #e8f5ee;
  --alerta: #b5761a;
  --alerta-suave: #fdf3e2;
  --peligro: #c0392b;
  --peligro-suave: #fdecea;
  --info: #3a6ea5;
  --info-suave: #eaf1f9;

  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;

  --radio: 14px;
  --radio-sm: 9px;
  --radio-full: 999px;
  --sombra: 0 1px 2px rgba(46, 42, 40, .06), 0 4px 14px rgba(46, 42, 40, .06);
  --sombra-alta: 0 8px 30px rgba(46, 42, 40, .13);

  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --toque: 48px;
  --ancho: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 var(--e3); line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p  { margin: 0 0 var(--e3); }
small, .chico { font-size: .84rem; }
a { color: var(--primario-oscuro); }
img { max-width: 100%; height: auto; display: block; }

.suave   { color: var(--tinta-suave); }
.media   { color: var(--tinta-media); }
.fuerte  { font-weight: 700; }
.centro  { text-align: center; }
.derecha { text-align: right; }
.mono-num { font-variant-numeric: tabular-nums; }
.nowrap  { white-space: nowrap; }
.oculto  { display: none !important; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--e4); }
.contenedor-angosto { max-width: 560px; }

.pila > * + * { margin-top: var(--e3); }
.pila-g > * + * { margin-top: var(--e5); }
.fila { display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap; }
.fila-entre { display: flex; gap: var(--e3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.crece { flex: 1 1 auto; min-width: 0; }

/* ------------------------------------------------------------ botones --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: var(--toque); padding: 12px 20px;
  font: inherit; font-weight: 600; text-decoration: none; text-align: center;
  color: var(--tinta); background: var(--superficie);
  border: 1.5px solid var(--borde-fuerte); border-radius: var(--radio-full);
  cursor: pointer; transition: transform .06s ease, background .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--superficie-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--primario); outline-offset: 2px; }
.btn[disabled], .btn.desactivado { opacity: .5; pointer-events: none; }

.btn-primario { color: #fff; background: var(--primario); border-color: var(--primario); box-shadow: var(--sombra); }
.btn-primario:hover { background: var(--primario-oscuro); border-color: var(--primario-oscuro); }
.btn-fantasma { background: transparent; border-color: transparent; color: var(--primario-oscuro); }
.btn-fantasma:hover { background: var(--primario-suave); }
.btn-peligro { color: var(--peligro); border-color: #edc9c4; background: var(--peligro-suave); }
.btn-peligro:hover { background: #fbdcd8; }
.btn-wa { color: #fff; background: #1fa855; border-color: #1fa855; }
.btn-wa:hover { background: #17904a; border-color: #17904a; }

.btn-grande { min-height: 56px; padding: 14px 26px; font-size: 1.05rem; }
.btn-chico  { min-height: 38px; padding: 6px 14px; font-size: .88rem; }
.btn-bloque { display: flex; width: 100%; }

/* ----------------------------------------------------------- tarjetas --- */
.card {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--e4);
  box-shadow: var(--sombra);
}
.card + .card { margin-top: var(--e3); }
.card-plana { box-shadow: none; }
.card-cabecera { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); margin-bottom: var(--e3); }
.card-cabecera h2, .card-cabecera h3 { margin: 0; }
.card-enlace { display: block; text-decoration: none; color: inherit; }
.card-enlace:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra-alta); }

.rejilla { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.rejilla-2 { display: grid; gap: var(--e3); grid-template-columns: 1fr; }
.rejilla-3 { display: grid; gap: var(--e3); grid-template-columns: 1fr; }

/* ---------------------------------------------------------- distintivos - */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 11px; border-radius: var(--radio-full);
  font-size: .78rem; font-weight: 700; line-height: 1.6;
  background: var(--superficie-2); color: var(--tinta-media);
  border: 1px solid var(--borde);
}
.badge-ok      { background: var(--exito-suave);  color: var(--exito);   border-color: #c8e6d6; }
.badge-alerta  { background: var(--alerta-suave); color: var(--alerta);  border-color: #f0dcb8; }
.badge-peligro { background: var(--peligro-suave);color: var(--peligro); border-color: #f0cbc6; }
.badge-info    { background: var(--info-suave);   color: var(--info);    border-color: #cbdcee; }
.badge-primario{ background: var(--primario-suave);color: var(--primario-oscuro); border-color: #f3ccd9; }
.punto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }

/* ------------------------------------------------------------- barras --- */
.barra {
  height: 10px; border-radius: var(--radio-full);
  background: var(--superficie-2); overflow: hidden;
  border: 1px solid var(--borde);
}
.barra > span { display: block; height: 100%; background: var(--primario); border-radius: var(--radio-full); transition: width .3s ease; }
.barra-ok > span      { background: var(--exito); }
.barra-alerta > span  { background: var(--alerta); }
.barra-peligro > span { background: var(--peligro); }
.barra-etiqueta { display: flex; justify-content: space-between; font-size: .8rem; color: var(--tinta-suave); margin-bottom: var(--e1); }

/* ------------------------------------------------------- formularios ---- */
.campo { margin-bottom: var(--e4); }
.campo label, .etiqueta { display: block; font-weight: 600; margin-bottom: 6px; font-size: .93rem; }
.campo .ayuda { display: block; color: var(--tinta-suave); font-size: .84rem; margin-top: 5px; }

input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=search], input[type=url], input[type=date],
select, textarea {
  width: 100%; min-height: var(--toque);
  padding: 12px 14px; font: inherit; color: var(--tinta);
  background: var(--superficie); border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--radio-sm); appearance: none;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primario);
  box-shadow: 0 0 0 3px var(--primario-suave);
}
input[aria-invalid="true"], .campo-error input, .campo-error select {
  border-color: var(--peligro); box-shadow: 0 0 0 3px var(--peligro-suave);
}
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta-media) 50%),
                    linear-gradient(135deg, var(--tinta-media) 50%, transparent 50%);
  background-position: calc(100% - 20px) 51%, calc(100% - 14px) 51%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  padding-right: 40px;
}
.check { display: flex; gap: var(--e3); align-items: flex-start; padding: var(--e3) 0; cursor: pointer; }
.check input[type=checkbox], .check input[type=radio] { width: 22px; height: 22px; min-height: 0; margin: 0; accent-color: var(--primario); flex: 0 0 auto; }
fieldset { border: 0; margin: 0; padding: 0; }

/* pasos +/- para cantidades */
.cantidad { display: inline-flex; align-items: center; border: 1.5px solid var(--borde-fuerte); border-radius: var(--radio-full); overflow: hidden; background: var(--superficie); }
.cantidad button {
  width: 46px; height: 46px; border: 0; background: transparent;
  font-size: 1.35rem; line-height: 1; color: var(--tinta); cursor: pointer;
}
.cantidad button:hover { background: var(--superficie-2); }
.cantidad input { width: 56px; min-height: 46px; text-align: center; border: 0; border-radius: 0; font-weight: 700; }
.cantidad input:focus { box-shadow: none; }
/* Sin flechitas nativas del type=number: ya tenemos − y +, y a 56px las
   flechas de Chrome tapan el número ("15" se veía cortado). */
.cantidad input::-webkit-outer-spin-button,
.cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cantidad input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* ------------------------------------------------------------- avisos --- */
.aviso {
  display: flex; gap: var(--e3); align-items: flex-start;
  padding: var(--e3) var(--e4); border-radius: var(--radio);
  border: 1px solid var(--borde); background: var(--superficie-2);
  margin-bottom: var(--e4);
}
.aviso-ok      { background: var(--exito-suave);  border-color: #c8e6d6; color: #1e5b41; }
.aviso-alerta  { background: var(--alerta-suave); border-color: #f0dcb8; color: #7d5210; }
.aviso-peligro { background: var(--peligro-suave);border-color: #f0cbc6; color: #93291e; }
.aviso-info    { background: var(--info-suave);   border-color: #cbdcee; color: #2a527b; }
.aviso p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- tablas --- */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tabla { width: 100%; border-collapse: collapse; background: var(--superficie); }
table.tabla th, table.tabla td { padding: var(--e3); text-align: left; border-bottom: 1px solid var(--borde); }
table.tabla th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-suave); font-weight: 700; }
table.tabla tbody tr:last-child td { border-bottom: 0; }

/* En móvil cada fila se vuelve tarjeta. Requiere data-col en cada <td>. */
@media (max-width: 719px) {
  table.tabla, table.tabla tbody, table.tabla tr, table.tabla td { display: block; width: 100%; }
  table.tabla thead { display: none; }
  table.tabla tr {
    background: var(--superficie); border: 1px solid var(--borde);
    border-radius: var(--radio); margin-bottom: var(--e3); padding: var(--e2) var(--e3);
    box-shadow: var(--sombra);
  }
  table.tabla td { border-bottom: 1px dashed var(--borde); display: flex; justify-content: space-between; gap: var(--e3); padding: 10px 0; text-align: right; }
  table.tabla td:last-child { border-bottom: 0; }
  table.tabla td::before {
    content: attr(data-col); font-weight: 700; font-size: .82rem;
    color: var(--tinta-suave); text-align: left; flex: 0 0 auto;
  }
  table.tabla td[data-col=""]::before { content: ""; }
}

/* ------------------------------------------------- estados vacíos (CSS) - */
.vacio { text-align: center; padding: var(--e7) var(--e4); color: var(--tinta-media); }
.vacio h3 { margin-bottom: var(--e2); }
.vacio p { max-width: 42ch; margin-left: auto; margin-right: auto; }
.dibujo {
  width: 116px; height: 92px; margin: 0 auto var(--e4);
  position: relative; border-radius: var(--radio);
  background: var(--superficie-2); border: 2px dashed var(--borde-fuerte);
}
.dibujo::before {
  content: ""; position: absolute; left: 18px; right: 18px; top: 26px; height: 10px;
  border-radius: var(--radio-full); background: var(--borde-fuerte);
}
.dibujo::after {
  content: ""; position: absolute; left: 18px; width: 46px; top: 48px; height: 10px;
  border-radius: var(--radio-full); background: var(--borde);
}
.dibujo-caja { background: var(--primario-suave); border-color: #eec3d2; }
.dibujo-caja::before, .dibujo-caja::after { background: #eec3d2; }

/* -------------------------------------------------- catálogo (público) -- */
.cab-tienda {
  background: var(--superficie); border-bottom: 1px solid var(--borde);
  padding: var(--e4) 0; position: sticky; top: 0; z-index: 30;
}
.cab-tienda .marca { display: flex; align-items: center; gap: var(--e3); }
.cab-tienda h1 { font-size: 1.15rem; margin: 0; }
.logo-tienda {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  background: var(--primario-suave); flex: 0 0 auto;
}
.logo-letra {
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--primario); color: #fff; font-weight: 700; font-size: 1.15rem;
}

.grid-prod { display: grid; gap: var(--e3); grid-template-columns: repeat(2, 1fr); }
.prod {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); overflow: hidden; display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
}
.prod:hover { box-shadow: var(--sombra-alta); }
.prod .foto { aspect-ratio: 1/1; width: 100%; object-fit: cover; background: var(--superficie-2); }
.prod .sinfoto { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; background: var(--superficie-2); color: var(--tinta-suave); font-size: .8rem; }
.prod .cuerpo { padding: var(--e3); display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; }
.prod .nombre { font-weight: 600; font-size: .95rem; line-height: 1.3; }
.prod .marca-p { font-size: .78rem; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .03em; }
.precio { font-size: 1.1rem; font-weight: 800; color: var(--primario-oscuro); font-variant-numeric: tabular-nums; }
.precio-tachado { text-decoration: line-through; color: var(--tinta-suave); font-weight: 500; font-size: .9rem; }

.barra-inferior {
  position: sticky; bottom: 0; z-index: 40;
  background: var(--superficie); border-top: 1px solid var(--borde);
  padding: var(--e3) 0; box-shadow: 0 -4px 16px rgba(46, 42, 40, .08);
}
.pie-legal {
  padding: var(--e6) 0 var(--e7);
  color: var(--tinta-suave); font-size: .84rem; text-align: center;
  border-top: 1px solid var(--borde); margin-top: var(--e6);
}
.pie-legal a { color: var(--tinta-media); }

.chips { display: flex; gap: var(--e2); overflow-x: auto; padding-bottom: var(--e2); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; padding: 8px 16px; border-radius: var(--radio-full);
  border: 1.5px solid var(--borde-fuerte); background: var(--superficie);
  text-decoration: none; color: var(--tinta-media); font-size: .88rem; font-weight: 600;
  min-height: 40px; display: inline-flex; align-items: center;
}
.chip.activo { background: var(--primario); border-color: var(--primario); color: #fff; }

/* ---------------------------------------------------------- panel ------- */
.panel { min-height: 100vh; }
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--e3);
  background: var(--superficie); border-bottom: 1px solid var(--borde);
  padding: var(--e2) var(--e4); min-height: 60px;
}
.topbar .titulo { font-weight: 700; font-size: 1.05rem; }
.hamburguesa {
  width: 46px; height: 46px; border-radius: var(--radio-sm);
  border: 1.5px solid var(--borde-fuerte); background: var(--superficie);
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  align-items: center; cursor: pointer; flex: 0 0 auto;
}
.hamburguesa span { display: block; width: 20px; height: 2px; background: var(--tinta); border-radius: 2px; }

#menu-panel { display: none; }
.nav-lateral {
  position: fixed; inset: 0 auto 0 0; width: 264px; z-index: 60;
  background: var(--superficie); border-right: 1px solid var(--borde);
  padding: var(--e4) var(--e3); overflow-y: auto;
  transform: translateX(-100%); transition: transform .22s ease;
}
#menu-panel:checked ~ .nav-lateral { transform: translateX(0); }
#menu-panel:checked ~ .velo { opacity: 1; pointer-events: auto; }
.velo {
  position: fixed; inset: 0; z-index: 55; background: rgba(46, 42, 40, .38);
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.nav-lateral .logo { font-weight: 800; font-size: 1.1rem; padding: 0 var(--e3) var(--e4); color: var(--primario-oscuro); }
.nav-lateral a {
  display: flex; align-items: center; gap: var(--e3);
  padding: 13px var(--e3); border-radius: var(--radio-sm);
  color: var(--tinta-media); text-decoration: none; font-weight: 600; min-height: var(--toque);
}
.nav-lateral a:hover { background: var(--superficie-2); color: var(--tinta); }
.nav-lateral a.activo { background: var(--primario-suave); color: var(--primario-oscuro); }
.nav-lateral .separador { height: 1px; background: var(--borde); margin: var(--e3) var(--e3); }
.nav-icono { width: 22px; text-align: center; flex: 0 0 auto; font-size: 1.05rem; }

.panel-cuerpo { padding: var(--e4) 0 var(--e8); }
.panel-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e3); margin-bottom: var(--e4); flex-wrap: wrap; }

.metricas { display: grid; gap: var(--e3); grid-template-columns: repeat(2, 1fr); }
.metrica { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e4); }
.metrica .valor { font-size: 1.5rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.metrica .rotulo { font-size: .82rem; color: var(--tinta-suave); font-weight: 600; }

/* ---------------------------------------------------------- landing ----- */
.landing-nav {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  padding: var(--e4) 0;
}
.landing-nav .logo { font-weight: 800; font-size: 1.2rem; color: var(--primario-oscuro); text-decoration: none; }
.hero { padding: var(--e6) 0 var(--e7); text-align: center; }
.hero h1 { font-size: 2rem; letter-spacing: -.02em; }
.hero p.entrada { font-size: 1.1rem; color: var(--tinta-media); max-width: 48ch; margin: 0 auto var(--e5); }
.seccion { padding: var(--e6) 0; }
.seccion-suave { background: var(--superficie); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.precio-grande { font-size: 2.2rem; font-weight: 800; color: var(--primario-oscuro); font-variant-numeric: tabular-nums; }
.lista-check { list-style: none; padding: 0; margin: 0; }
.lista-check li { padding: 9px 0 9px 30px; position: relative; }
.lista-check li::before {
  content: "✓"; position: absolute; left: 0; top: 9px;
  color: var(--exito); font-weight: 800;
}

/* --------------------------------------------------------- escritorio --- */
@media (min-width: 720px) {
  h1 { font-size: 1.9rem; }
  .rejilla-2 { grid-template-columns: 1fr 1fr; }
  .rejilla-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-prod { grid-template-columns: repeat(3, 1fr); gap: var(--e4); }
  .metricas { grid-template-columns: repeat(4, 1fr); }
  .hero h1 { font-size: 2.6rem; }
}

@media (min-width: 1024px) {
  .grid-prod { grid-template-columns: repeat(4, 1fr); }
  .hamburguesa { display: none; }
  .velo { display: none; }
  .nav-lateral { transform: none; box-shadow: none; }
  .panel { padding-left: 264px; }
  .topbar { padding-left: var(--e5); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .nav-lateral, .topbar, .barra-inferior, .btn, .velo { display: none !important; }
  body { background: #fff; }
  .panel { padding-left: 0; }
}