/* ============================================================
   COMPONENTS — VELOX
   Piezas reutilizables: botones, cards, campos, tablas, badges.
   REGLA: ningun color literal aqui. Todo sale de theme.css.
   Si un bloque visual aparece dos veces, vive en este archivo.
   ============================================================ */

/* ---------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  font-family: var(--fuente);
  background: var(--bg);
  color: var(--texto);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  /* Guarda de ultimo recurso: el contenido ancho scrollea dentro de su propio
     contenedor (.tabla-scroll), nunca arrastrando la pagina entera. */
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------------------------------------------------------- layout */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--esp-4);
}

.pila { display: flex; flex-direction: column; gap: var(--esp-4); }
.fila { display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; }
.fila--entre { justify-content: space-between; }
.fila--fin { justify-content: flex-end; }
.crece { flex: 1; }

.rejilla {
  display: grid;
  gap: var(--esp-4);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.seccion { padding-block: var(--esp-7); }

/* ---------------------------------------------------------- tipografia */
.titulo-xl { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.025em; }
.titulo-lg { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
.titulo-md { font-size: 1.08rem; font-weight: 600; line-height: 1.3; }
.titulo-sm { font-size: 0.93rem; font-weight: 600; }

.entrada { font-size: 1.02rem; color: var(--texto-suave); max-width: var(--ancho-texto); }
.tenue { color: var(--texto-suave); font-size: 0.88rem; }
.micro { color: var(--texto-tenue); font-size: 0.79rem; }
.mono { font-family: var(--fuente-mono); font-size: 0.85em; }
.centrado { text-align: center; }

.superior {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--marca);
}

/* ---------------------------------------------------------- botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--radio-sm);
  background: var(--surface-2);
  color: var(--texto);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background var(--trans), border-color var(--trans), transform var(--trans);
  white-space: nowrap;
}
.btn:hover { background: var(--surface-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

/* Sobre el verde lima el texto va negro: con blanco no hay contraste. */
.btn--primario {
  background: var(--marca);
  color: var(--marca-texto);
  border-color: var(--marca);
  font-weight: 700;
}
.btn--primario:hover {
  background: var(--marca-2);
  border-color: var(--marca-2);
  box-shadow: 0 0 18px var(--marca-brillo);
}

.btn--fantasma { background: transparent; border-color: var(--border-fuerte); }
.btn--fantasma:hover { background: var(--surface); border-color: var(--marca); color: var(--marca); }

.btn--peligro { background: transparent; border-color: var(--peligro); color: var(--peligro); }
.btn--peligro:hover { background: color-mix(in srgb, var(--peligro) 14%, transparent); }

.btn--bloque { width: 100%; }
.btn--sm { padding: 6px 12px; font-size: 0.81rem; }
.btn--lg { padding: 14px 28px; font-size: 1rem; }

/* ---------------------------------------------------------- tarjetas */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  padding: var(--esp-5);
}
.card--hover { transition: border-color var(--trans), transform var(--trans), box-shadow var(--trans); }
.card--hover:hover {
  border-color: var(--marca);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgb(0 0 0 / 45%);
}
.card--plana { padding: var(--esp-4); background: var(--bg-soft); }

/* Tarjeta de producto: imagen + cuerpo + precio al pie. */
.producto { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.producto__medio {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--surface-2), var(--bg-soft));
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--border);
}
.producto__medio img { width: 100%; height: 100%; object-fit: cover; }
.producto__cuerpo { padding: var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-2); flex: 1; }
.producto__titulo { font-size: 0.93rem; font-weight: 600; line-height: 1.35; }
.producto__pie {
  margin-top: auto;
  padding-top: var(--esp-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
}
.precio { font-size: 1.1rem; font-weight: 700; color: var(--marca); }
.precio__unidad { font-size: 0.72rem; color: var(--texto-tenue); font-weight: 500; }
.precio--tachado { text-decoration: line-through; color: var(--texto-tenue); font-size: 0.85rem; font-weight: 500; }

/* ---------------------------------------------------------- badges y chips */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--radio-full);
  font-size: 0.71rem;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--texto-suave);
  border: 1px solid var(--border);
}
.badge--exito { background: color-mix(in srgb, var(--exito) 14%, transparent); color: var(--exito); border-color: color-mix(in srgb, var(--exito) 30%, transparent); }
.badge--alerta { background: color-mix(in srgb, var(--alerta) 14%, transparent); color: var(--alerta); border-color: color-mix(in srgb, var(--alerta) 30%, transparent); }
.badge--peligro { background: color-mix(in srgb, var(--peligro) 14%, transparent); color: var(--peligro); border-color: color-mix(in srgb, var(--peligro) 30%, transparent); }
.badge--info { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.badge--marca { background: var(--marca-suave); color: var(--marca); border-color: var(--marca-brillo); }

/* El color lo pone data-plataforma via --chip-color. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radio-full);
  background: color-mix(in srgb, var(--chip-color, var(--marca)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--chip-color, var(--marca)) 32%, transparent);
  color: var(--chip-color, var(--marca));
  font-size: 0.81rem;
  font-weight: 600;
  transition: background var(--trans);
}
.chip:hover { background: color-mix(in srgb, var(--chip-color, var(--marca)) 22%, transparent); }
.chip[data-plataforma="tiktok"] { --chip-color: var(--p-tiktok); }
.chip[data-plataforma="instagram"] { --chip-color: var(--p-instagram); }
.chip[data-plataforma="facebook"] { --chip-color: var(--p-facebook); }
.chip[data-plataforma="youtube"] { --chip-color: var(--p-youtube); }
.chip[data-plataforma="netflix"] { --chip-color: var(--p-netflix); }
.chip[data-plataforma="spotify"] { --chip-color: var(--p-spotify); }
.chip[data-plataforma="freefire"] { --chip-color: var(--p-freefire); }
.chip[data-plataforma="robux"] { --chip-color: var(--p-robux); }

/* ---------------------------------------------------------- formularios */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo__etiqueta { font-size: 0.83rem; font-weight: 600; color: var(--texto-suave); }
.campo__ayuda { font-size: 0.76rem; color: var(--texto-tenue); }

.entrada-txt {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radio-sm);
  transition: border-color var(--trans), box-shadow var(--trans);
}
.entrada-txt:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px var(--marca-suave);
}
.entrada-txt::placeholder { color: var(--texto-tenue); }
textarea.entrada-txt { min-height: 110px; resize: vertical; }
select.entrada-txt { cursor: pointer; }

.check { display: flex; align-items: center; gap: var(--esp-2); cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--marca); cursor: pointer; flex-shrink: 0; }

/* ---------------------------------------------------------- avisos */
.aviso {
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio-sm);
  border-left: 3px solid var(--info);
  background: color-mix(in srgb, var(--info) 10%, transparent);
  font-size: 0.89rem;
}
.aviso--exito { border-color: var(--exito); background: color-mix(in srgb, var(--exito) 10%, transparent); }
.aviso--error { border-color: var(--peligro); background: color-mix(in srgb, var(--peligro) 10%, transparent); }
.aviso--alerta { border-color: var(--alerta); background: color-mix(in srgb, var(--alerta) 10%, transparent); }

/* ---------------------------------------------------------- tablas */
.tabla-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radio); }
.tabla { width: 100%; border-collapse: collapse; font-size: 0.87rem; min-width: 560px; }
.tabla th, .tabla td { padding: 11px var(--esp-4); text-align: left; border-bottom: 1px solid var(--border); }
.tabla th {
  background: var(--bg-soft);
  font-weight: 600;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-tenue);
  white-space: nowrap;
}
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr:hover { background: var(--bg-soft); }
.tabla .num { text-align: right; font-family: var(--fuente-mono); white-space: nowrap; }

/* ---------------------------------------------------------- header */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--alto-header);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.header__interior { display: flex; align-items: center; gap: var(--esp-5); width: 100%; }

.marca {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
}
.marca__punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--marca);
  box-shadow: 0 0 14px var(--marca);
  flex-shrink: 0;
}

.nav { display: flex; align-items: center; gap: var(--esp-4); }
.nav__enlace { font-size: 0.89rem; color: var(--texto-suave); transition: color var(--trans); }
.nav__enlace:hover, .nav__enlace.activo { color: var(--marca); }

.carrito-btn { position: relative; }
.carrito-btn__contador {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding-inline: 5px;
  border-radius: var(--radio-full);
  background: var(--marca);
  color: var(--marca-texto);
  font-size: 0.67rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* Saldo en la barra: el dato que el usuario mira mas veces al dia. */
.saldo-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radio-full);
  background: var(--marca-suave);
  border: 1px solid var(--marca-brillo);
  color: var(--marca);
  font-weight: 700;
  font-size: 0.87rem;
  font-family: var(--fuente-mono);
}

/* ---------------------------------------------------------- panel lateral */
.disposicion-panel {
  display: grid;
  grid-template-columns: var(--ancho-lateral) 1fr;
  gap: var(--esp-5);
  align-items: start;
}

/* Los hijos de un grid traen `min-width: auto`, asi que no se encogen por
   debajo de su contenido y una tabla ancha empuja toda la pagina hacia los
   lados. Con `min-width: 0` el contenido se queda dentro de su columna y solo
   scrollea la tabla, dentro de su propio contenedor. */
.disposicion-panel > * { min-width: 0; }

.lateral {
  position: sticky;
  top: calc(var(--alto-header) + var(--esp-4));
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  padding: var(--esp-3);
}

.lateral__enlace {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: 9px var(--esp-3);
  border-radius: var(--radio-sm);
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--texto-suave);
  transition: background var(--trans), color var(--trans);
}
.lateral__enlace:hover { background: var(--surface-2); color: var(--texto); }

/* Activo: fondo verde con texto negro, igual que el boton primario. */
.lateral__enlace.activo {
  background: var(--marca);
  color: var(--marca-texto);
  font-weight: 600;
}

.lateral__titulo {
  padding: var(--esp-3) var(--esp-3) 5px;
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--texto-tenue);
  font-weight: 700;
}

/* ---------------------------------------------------------- estadisticas */
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat__valor { font-size: 1.7rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.stat__etiqueta { font-size: 0.79rem; color: var(--texto-suave); }
.stat--marca .stat__valor { color: var(--marca); }

/* ---------------------------------------------------------- utilidades */
.vacio { padding: var(--esp-7) var(--esp-4); text-align: center; color: var(--texto-suave); }
.separador { height: 1px; background: var(--border); border: none; }
.oculto { display: none !important; }

.paginacion { display: flex; gap: var(--esp-2); justify-content: center; align-items: center; padding-block: var(--esp-5); }

/* Fondo con halo verde para la portada. */
.halo {
  position: relative;
  isolation: isolate;
}
.halo::before {
  content: "";
  position: absolute;
  inset: -20% 0 auto;
  height: 420px;
  z-index: -1;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, var(--marca-suave), transparent 70%);
  pointer-events: none;
}

/* ---------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .disposicion-panel { grid-template-columns: 1fr; }

  /* El menu pasa a fila horizontal y scrollea DENTRO de si mismo. Sin el
     `min-width: 0` los enlaces lo estiran y es la pagina entera la que
     scrollea de lado. */
  .lateral {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    min-width: 0;
    padding: var(--esp-2);
    scrollbar-width: thin;
  }
  .lateral__titulo { display: none; }
  .lateral__enlace { white-space: nowrap; flex-shrink: 0; }
  /* El boton de cerrar sesion rompe la fila horizontal del menu movil. */
  .lateral form { display: none; }
}

@media (max-width: 640px) {
  .nav { gap: var(--esp-3); }
  .nav__enlace--opcional { display: none; }
  .seccion { padding-block: var(--esp-5); }
  .rejilla { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}