/* Panel de administración. Paleta "SaaS General": azul de confianza sobre grises fríos. */
:root {
  --fondo: #f8fafc;
  --superficie: #ffffff;
  --superficie-suave: #f1f5f9;
  --texto: #0f172a;
  --texto-suave: #475569;
  --texto-tenue: #64748b;
  --borde: #e2e8f0;
  --borde-fuerte: #cbd5e1;
  --primario: #2563eb;
  --primario-hover: #1d4ed8;
  --primario-suave: #eff6ff;
  --ok: #15803d;
  --ok-fondo: #f0fdf4;
  --ok-borde: #bbf7d0;
  --error: #b91c1c;
  --error-fondo: #fef2f2;
  --error-borde: #fecaca;
  --foco: 0 0 0 3px rgb(37 99 235 / .35);
  --radio-chico: 8px;
  --radio: 12px;
  --sombra: 0 1px 2px rgb(15 23 42 / .04), 0 1px 3px rgb(15 23 42 / .06);
  --sombra-alta: 0 4px 12px rgb(15 23 42 / .08);
  --transicion: 150ms ease;
  --ancho-lateral: 248px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.55 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primario); }
h1, h2, h3 { line-height: 1.25; margin: 0; letter-spacing: -.015em; }
h1 { font-size: 1.6rem; font-weight: 700; }
h2 { font-size: 1.05rem; font-weight: 600; }
h3 { font-size: .95rem; font-weight: 600; }
p { margin: 0; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .85rem; }

:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--radio-chico); }

.icono { flex-shrink: 0; }
.texto-suave { color: var(--texto-suave); }
.ayuda { color: var(--texto-tenue); font-size: .85rem; font-weight: 400; display: inline-flex; gap: .35rem; align-items: center; }
.opcional { color: var(--texto-tenue); font-weight: 400; }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.saltar { position: absolute; left: 1rem; top: -3rem; z-index: 10; padding: .5rem 1rem; background: var(--superficie); border-radius: var(--radio-chico); }
.saltar:focus { top: 1rem; }

/* ---------- Estructura: menú lateral + contenido ---------- */

/* minmax(0, 1fr): sin esto la columna toma el ancho mínimo de su contenido (una tabla ancha) y la página se desborda. */
.app { display: grid; grid-template-columns: var(--ancho-lateral) minmax(0, 1fr); min-height: 100vh; }

.lateral {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.25rem 1rem;
  background: var(--superficie);
  border-right: 1px solid var(--borde);
}
.lateral-marca { display: flex; gap: .75rem; align-items: center; padding: 0 .5rem; }
.lateral-logo {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--primario);
  color: #fff;
  flex-shrink: 0;
}
.lateral-textos { display: grid; min-width: 0; }
.lateral-tienda { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral-sub { font-size: .78rem; color: var(--texto-tenue); }

.lateral-menu { display: grid; gap: .15rem; }
.lateral-menu a {
  display: flex; gap: .7rem; align-items: center;
  min-height: 42px;
  padding: 0 .75rem;
  border-radius: var(--radio-chico);
  color: var(--texto-suave);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--transicion), color var(--transicion);
}
.lateral-menu a:hover { background: var(--superficie-suave); color: var(--texto); }
.lateral-menu a.activo { background: var(--primario-suave); color: var(--primario); font-weight: 600; }

.lateral-pie { margin-top: auto; display: grid; gap: .5rem; }

.contenido { padding: 2rem clamp(1rem, 4vw, 3rem) 4rem; max-width: 1080px; width: 100%; margin: 0 auto; }
.contenido-solo { margin: 0 auto; min-height: 100vh; display: grid; align-content: center; justify-items: center; }

@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral {
    position: sticky;
    z-index: 5;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    padding: .75rem 1rem;
    border-right: 0;
    border-bottom: 1px solid var(--borde);
  }
  .lateral-sub { display: none; }
  .lateral-pie { margin: 0 0 0 auto; display: flex; }
  .lateral-pie .boton { width: auto; }
  .lateral-menu { order: 3; width: 100%; display: flex; overflow-x: auto; scrollbar-width: none; gap: .25rem; }
  .lateral-menu a { flex: 1; justify-content: center; gap: .4rem; padding: 0 .5rem; white-space: nowrap; font-size: .9rem; }
  .contenido { padding-top: 1.5rem; }
}
@media (max-width: 480px) {
  .lateral-pie .boton { font-size: 0; gap: 0; padding: 0; width: 40px; justify-content: center; }
  .lateral-pie .boton .icono { width: 18px; height: 18px; }
}

/* ---------- Encabezado de página ---------- */

.encabezado { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.encabezado > div:not(.acciones) { display: grid; gap: .35rem; }
.encabezado .texto-suave { display: inline-flex; gap: .4rem; align-items: center; }

/* ---------- Botones ---------- */

.boton {
  display: inline-flex; gap: .5rem; align-items: center; justify-content: center;
  min-height: 40px;
  padding: 0 1rem;
  border: 1px solid transparent;
  border-radius: var(--radio-chico);
  background: var(--primario);
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}
.boton:hover { background: var(--primario-hover); }
.boton:active { transform: translateY(1px); }
.boton-secundario { background: var(--superficie); color: var(--texto); border-color: var(--borde-fuerte); }
.boton-secundario:hover { background: var(--superficie-suave); }
.boton-fantasma { background: transparent; color: var(--texto-suave); }
.boton-fantasma:hover { background: var(--superficie-suave); color: var(--texto); }
.boton-chico { min-height: 34px; padding: 0 .75rem; font-size: .875rem; }
.boton-grande { min-height: 46px; padding: 0 1.4rem; font-size: 1rem; }
.boton-bloque { width: 100%; }
.boton:disabled { opacity: .45; cursor: not-allowed; }

.boton-icono {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  color: var(--texto-suave);
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.boton-icono:hover:not(:disabled) { background: var(--superficie-suave); color: var(--texto); }
.boton-icono:disabled { opacity: .35; cursor: not-allowed; }
.boton-icono-peligro:hover:not(:disabled) { background: var(--error-fondo); color: var(--error); border-color: var(--error-borde); }

.acciones { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }

/* ---------- Tarjetas, avisos, estados vacíos ---------- */

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.5rem;
}
.tarjeta-error { border-color: var(--error-borde); display: grid; gap: 1.25rem; }
.tarjeta-titulo { display: flex; gap: .9rem; align-items: flex-start; }
.tarjeta-titulo > div { display: grid; gap: .25rem; }
.tarjeta-titulo-icono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--error-fondo); color: var(--error); flex-shrink: 0; }

.aviso {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .8rem 1rem;
  border: 1px solid;
  border-radius: var(--radio-chico);
  margin-bottom: 1.5rem;
  font-weight: 500;
}
.aviso .icono { margin-top: .1rem; }
.aviso-ok { background: var(--ok-fondo); color: var(--ok); border-color: var(--ok-borde); }
.aviso-error { background: var(--error-fondo); color: var(--error); border-color: var(--error-borde); }

.estado-vacio { display: grid; justify-items: center; gap: .6rem; text-align: center; padding: 3rem 1.5rem; max-width: 520px; margin: 2rem auto; }
.estado-vacio .boton { margin-top: .75rem; }
.estado-vacio-icono { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--primario-suave); color: var(--primario); margin-bottom: .25rem; }
.estado-vacio-chico { display: flex; gap: .6rem; align-items: center; color: var(--texto-tenue); padding: 1rem; border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-chico); }

/* ---------- Formularios ---------- */

.formulario { display: grid; gap: 1.1rem; }
.campo { display: grid; gap: .4rem; align-content: start; min-width: 0; }
.campo > label, .etiqueta { font-weight: 600; font-size: .9rem; }
.campo-ancho { grid-column: 1 / -1; }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], select {
  width: 100%;
  min-height: 42px;
  padding: 0 .8rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
input::placeholder { color: #94a3b8; }
input:hover, select:hover { border-color: #94a3b8; }
input:focus-visible, select:focus-visible { border-color: var(--primario); box-shadow: var(--foco); border-radius: var(--radio-chico); }
[aria-invalid="true"] { border-color: var(--error) !important; }
.error-campo { color: var(--error); font-size: .85rem; font-weight: 500; }

.casilla { display: inline-flex; gap: .5rem; align-items: center; font-size: .9rem; cursor: pointer; min-height: 34px; }
.casilla input { width: 16px; height: 16px; accent-color: var(--primario); }

.campo-con-sufijo { display: flex; align-items: stretch; }
.campo-con-sufijo input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.sufijo {
  display: grid; place-items: center;
  padding: 0 .8rem;
  border: 1px solid var(--borde-fuerte);
  border-left: 0;
  border-radius: 0 var(--radio-chico) var(--radio-chico) 0;
  background: var(--superficie-suave);
  color: var(--texto-suave);
  font-size: .9rem;
}

.selector-color { display: flex; gap: .75rem; align-items: center; }
.selector-color input {
  width: 48px; height: 42px;
  padding: 3px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  cursor: pointer;
}
.selector-color code { color: var(--texto-suave); text-transform: uppercase; }

.selector-imagen { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
/* La imagen ocupa la caja y se achica adentro (object-fit), sea del tamaño que sea.
   Con max-height en un hijo de grid la fila crecía al alto de la imagen y el logo se salía de la caja. */
.selector-imagen-vista {
  display: grid; place-items: center;
  flex-shrink: 0;
  width: 180px; height: 80px;
  padding: .5rem;
  overflow: hidden;
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio-chico);
  background: repeating-conic-gradient(#f1f5f9 0% 25%, #fff 0% 50%) 50% / 14px 14px;
  color: var(--texto-tenue);
}
.selector-imagen-vista img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.selector-imagen-acciones { display: grid; gap: .25rem; justify-items: start; }
.selector-imagen-acciones label.boton { cursor: pointer; }
.selector-imagen-acciones label.boton:focus-within { box-shadow: var(--foco); }

.zona-archivo {
  position: relative;
  display: grid; justify-items: center; gap: .35rem;
  padding: 1.5rem 1rem;
  border: 2px dashed var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--superficie-suave);
  color: var(--texto-suave);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion);
}
.zona-archivo:hover, .zona-archivo:focus-within { border-color: var(--primario); background: var(--primario-suave); }
.zona-archivo:focus-within { box-shadow: var(--foco); }
.zona-archivo.con-archivo { border-style: solid; border-color: var(--primario); color: var(--primario); }
.zona-archivo-texto { font-weight: 600; color: var(--texto); word-break: break-all; }
.zona-archivo-chica { padding: 1rem; }
.zona-archivo img { max-width: 100%; max-height: 90px; border-radius: 6px; object-fit: cover; }

/* ---------- Tablas ---------- */

/* position: relative para que también recorte los textos .visualmente-oculto (absolutos) de los encabezados;
   si no, quedan afuera del recorte y estiran la página en el celular. */
.tabla-contenedor { position: relative; overflow-x: auto; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-tenue); font-weight: 600; background: var(--superficie-suave); }
.tabla tbody tr { transition: background var(--transicion); }
.tabla tbody tr:hover { background: #f8fafc; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .numero { text-align: right; font-variant-numeric: tabular-nums; }
.celda-producto { display: flex; gap: .75rem; align-items: center; font-weight: 500; }
.celda-envolver { white-space: normal !important; }
.celda-fila { font-weight: 600; font-variant-numeric: tabular-nums; }
.precio-celda { font-variant-numeric: tabular-nums; }
.miniatura {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--radio-chico);
  background: var(--superficie-suave);
  color: var(--texto-tenue);
  font-weight: 700;
  flex-shrink: 0;
}
.sin-stock { color: var(--error); font-weight: 600; }

.pastilla { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem; border-radius: 99px; font-size: .8rem; font-weight: 600; background: var(--superficie-suave); color: var(--texto-suave); }
.pastilla::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pastilla-ok { background: var(--ok-fondo); color: var(--ok); }

/* ---------- Login ---------- */

.ingreso { width: min(400px, 100%); display: grid; gap: .5rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; box-shadow: var(--sombra-alta); padding: 2.25rem 2rem; }
.ingreso h1 { font-size: 1.4rem; }
.ingreso .formulario { margin-top: 1.25rem; }
.ingreso .aviso { margin: 1rem 0 0; }
.ingreso-icono { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--primario); color: #fff; margin-bottom: .75rem; }

/* ---------- Carga masiva ---------- */

.pasos { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.paso { display: flex; gap: 1.1rem; align-items: flex-start; }
.paso-numero {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--primario-suave);
  color: var(--primario);
  font-weight: 700;
  flex-shrink: 0;
}
.paso-cuerpo { display: grid; gap: .6rem; justify-items: start; flex: 1; min-width: 0; }
.paso-cuerpo .formulario { width: 100%; }

.resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.dato { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.1rem 1.25rem; display: grid; gap: .2rem; }
.dato strong { font-size: 2rem; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; }
.dato span { color: var(--texto-suave); font-size: .9rem; }
.dato-destacado strong { color: var(--primario); }
.resumen + .ayuda { margin-bottom: 1.5rem; }

/* ---------- Diseño: secciones de ajustes ---------- */

.ajustes { display: grid; gap: 0; }
.ajuste {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 1.5rem 2.5rem;
  padding: 2rem 0;
  border-top: 1px solid var(--borde);
}
.ajustes .ajuste:first-of-type { border-top: 0; padding-top: .5rem; }
.ajuste-intro { display: grid; gap: .4rem; align-content: start; }
.ajuste-intro .texto-suave { font-size: .9rem; }
.ajuste-campos { display: grid; gap: 1.4rem; }
.ajuste-campos-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; }
@media (max-width: 860px) {
  .ajuste { grid-template-columns: 1fr; gap: 1rem; padding: 1.5rem 0; }
}

.vista-previa { border: 1px solid var(--borde); border-radius: var(--radio-chico); overflow: hidden; --muestra: #1a1a1a; --muestra-texto: #fff; }
.vista-previa-titulo { display: block; padding: .4rem .75rem; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-tenue); background: var(--superficie-suave); border-bottom: 1px solid var(--borde); }
.vista-previa-franja { padding: .45rem .75rem; background: var(--muestra); color: var(--muestra-texto); font-size: .8rem; font-weight: 600; text-align: center; transition: background var(--transicion), color var(--transicion); }
.vista-previa-cabecera { display: flex; align-items: center; min-height: 64px; padding: .75rem 1rem; border-bottom: 1px solid var(--borde); background: #fff; }
.vista-previa-logo { display: block; height: 40px; width: auto; max-width: 180px; object-fit: contain; object-position: left center; }
.vista-previa-nombre { font-weight: 700; font-size: 1.1rem; }
.vista-previa-cuerpo { padding: 1rem; display: flex; justify-content: center; }
.vista-previa-boton { padding: .55rem 1.1rem; border-radius: var(--radio-chico); background: var(--muestra); color: var(--muestra-texto); font-weight: 600; font-size: .9rem; transition: background var(--transicion), color var(--transicion); }

.barra-guardar {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex; gap: 1rem; align-items: center; justify-content: flex-end;
  margin: 0 calc(-1 * clamp(1rem, 4vw, 3rem));
  padding: .9rem clamp(1rem, 4vw, 3rem);
  background: rgb(248 250 252 / .92);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--borde);
}
.barra-guardar [data-sin-guardar] { color: #b45309; font-weight: 500; }

#banners { border-top: 1px solid var(--borde); margin-top: 1rem; }
.lista-banners { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.banner { display: flex; gap: .9rem; align-items: center; padding: .6rem .75rem .6rem .6rem; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie); flex-wrap: wrap; }
.banner-numero { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--superficie-suave); color: var(--texto-suave); font-size: .8rem; font-weight: 700; }
.banner img { width: 128px; height: 52px; object-fit: cover; border-radius: 6px; background: var(--superficie-suave); }
.banner-datos { display: grid; gap: .1rem; flex: 1; min-width: 150px; }
.banner-datos strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.banner-acciones { display: flex; gap: .35rem; }
.agregar-banner { display: grid; gap: 1.1rem; padding-top: 1.4rem; border-top: 1px solid var(--borde); }

/* ---------- Componentes compartidos de las pantallas de gestión ---------- */

.volver { display: inline-flex; gap: .3rem; align-items: center; margin-bottom: .75rem; color: var(--texto-suave); font-size: .9rem; font-weight: 500; text-decoration: none; }
.volver:hover { color: var(--primario); }
.enlace-chico { font-size: .85rem; font-weight: 600; text-decoration: none; }
.enlace-chico:hover { text-decoration: underline; }

.pastilla-ambar { background: #fffbeb; color: #b45309; }
.pastilla-ambar::before { display: none; }
.encabezado .pastilla { margin-right: .35rem; }

textarea {
  width: 100%;
  padding: .65rem .8rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  line-height: 1.5;
  resize: vertical;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
textarea:hover { border-color: #94a3b8; }
textarea:focus-visible { border-color: var(--primario); box-shadow: var(--foco); }
input[type="search"] { font: inherit; }

.boton-peligro { background: var(--error); }
.boton-peligro:hover { background: #991b1b; }
.boton-peligro-suave { background: var(--superficie); color: var(--error); border-color: var(--error-borde); }
.boton-peligro-suave:hover { background: var(--error-fondo); }
.boton-icono-chico { width: 34px; height: 34px; }
.boton-icono-activo { color: #d97706; border-color: #fde68a; background: #fffbeb; }
.boton-icono-activo .icono { fill: currentColor; }

.confirmar summary { list-style: none; width: fit-content; }
.confirmar summary::-webkit-details-marker { display: none; }
.confirmar[open] summary { display: none; }
.confirmar-cuerpo { display: grid; gap: .6rem; justify-items: start; padding: .9rem 1rem; border: 1px solid var(--error-borde); border-radius: var(--radio-chico); background: var(--error-fondo); font-size: .9rem; }

/* Interruptor (checkbox con forma de switch) */
.interruptor { display: flex; gap: .8rem; align-items: flex-start; cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor-pista { position: relative; flex-shrink: 0; width: 40px; height: 24px; margin-top: .1rem; border-radius: 99px; background: var(--borde-fuerte); transition: background var(--transicion); }
.interruptor-pista::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .2); transition: transform var(--transicion); }
.interruptor input:checked + .interruptor-pista { background: var(--primario); }
.interruptor input:checked + .interruptor-pista::after { transform: translateX(16px); }
.interruptor input:focus-visible + .interruptor-pista { box-shadow: var(--foco); }
.interruptor-texto { display: grid; gap: .1rem; }

/* ---------- Inicio ---------- */

.enlace-tienda { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.25rem; margin-bottom: 1.25rem; background: linear-gradient(120deg, var(--primario-suave), var(--superficie) 70%); }
.enlace-tienda > div { display: grid; gap: .15rem; min-width: 0; }
.enlace-tienda-url { font-weight: 600; font-size: 1.05rem; text-decoration: none; overflow-wrap: anywhere; }
.enlace-tienda-url:hover { text-decoration: underline; }

.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.numero-tarjeta {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .9rem; align-items: center;
  padding: 1.1rem 1.2rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  color: var(--texto);
  text-decoration: none;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
a.numero-tarjeta:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra-alta); }
.numero-tarjeta strong { font-size: 1.6rem; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; }
.numero-tarjeta > span:last-child { grid-column: 2; color: var(--texto-suave); font-size: .88rem; }
.numero-icono { grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--superficie-suave); color: var(--texto-suave); }
.numero-icono-azul { background: var(--primario-suave); color: var(--primario); }
.numero-icono-rojo { background: var(--error-fondo); color: var(--error); }
.numero-icono-verde { background: var(--ok-fondo); color: var(--ok); }
.numero-alerta { border-color: var(--error-borde); }

.inicio-columnas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.25rem; align-items: start; }
@media (max-width: 960px) { .inicio-columnas { grid-template-columns: minmax(0, 1fr); } }

.pasos-tienda { display: grid; gap: 1rem; }
.pasos-tienda-encabezado { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.pasos-tienda-encabezado > div { display: grid; gap: .2rem; }
.progreso-numero { font-size: 1.4rem; font-weight: 700; color: var(--primario); font-variant-numeric: tabular-nums; }
.progreso { height: 8px; border-radius: 99px; background: var(--superficie-suave); overflow: hidden; }
.progreso span { display: block; height: 100%; border-radius: inherit; background: var(--primario); transition: width 400ms ease; }
.lista-pasos { list-style: none; margin: 0; padding: 0; display: grid; }
.paso-tienda { display: flex; gap: .85rem; align-items: center; padding: .85rem 0; border-top: 1px solid var(--borde); }
.paso-tienda:first-child { border-top: 0; }
.paso-marca { display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--borde-fuerte); color: #fff; }
.paso-tienda.hecho .paso-marca { background: var(--ok); border-color: var(--ok); }
.paso-textos { display: grid; gap: .1rem; flex: 1; min-width: 0; }
.paso-tienda.hecho .paso-textos strong { color: var(--texto-tenue); text-decoration: line-through; text-decoration-color: var(--borde-fuerte); font-weight: 500; }

.alertas { display: grid; gap: .75rem; align-content: start; }
.alertas-titulo { display: flex; gap: .45rem; align-items: center; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-tenue); margin-top: .5rem; }
.alertas-titulo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.alertas-titulo-rojo::before { background: var(--error); }
.alertas-titulo-ambar::before { background: #d97706; }
.lista-alertas { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.lista-alertas a { display: flex; justify-content: space-between; align-items: center; gap: .75rem; min-height: 42px; padding: .4rem .6rem; margin: 0 -.6rem; border-radius: var(--radio-chico); color: var(--texto); text-decoration: none; }
.lista-alertas a:hover { background: var(--superficie-suave); }

/* ---------- Listado de productos ---------- */

.barra-herramientas { display: flex; justify-content: space-between; align-items: center; gap: .75rem 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pestanias { display: flex; gap: .25rem; padding: .25rem; background: var(--superficie-suave); border-radius: 10px; overflow-x: auto; scrollbar-width: none; max-width: 100%; min-width: 0; }
.pestanias a { display: inline-flex; gap: .4rem; align-items: center; min-height: 36px; padding: 0 .75rem; border-radius: 7px; color: var(--texto-suave); font-weight: 500; font-size: .9rem; text-decoration: none; white-space: nowrap; }
.pestanias a:hover { color: var(--texto); }
.pestanias a.activa { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); font-weight: 600; }
.pestania-cuenta { padding: 0 .4rem; border-radius: 99px; background: rgb(15 23 42 / .06); font-size: .75rem; font-variant-numeric: tabular-nums; }
.buscador { position: relative; flex: 1; max-width: 340px; min-width: 220px; }
.buscador .icono { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--texto-tenue); pointer-events: none; }
.buscador input {
  width: 100%; min-height: 42px; padding: 0 .8rem 0 2.4rem;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico); background: var(--superficie); color: var(--texto);
}
.buscador input:focus-visible { border-color: var(--primario); box-shadow: var(--foco); }

.tabla-productos td { vertical-align: middle; }
.tabla-productos .celda-producto { color: var(--texto); text-decoration: none; }
.tabla-productos .celda-producto:hover .celda-producto-nombre { color: var(--primario); }
.celda-producto-textos { display: grid; gap: .05rem; min-width: 0; }
.celda-producto-nombre { display: inline-flex; gap: .3rem; align-items: center; font-weight: 600; }
img.miniatura { object-fit: cover; padding: 0; }
.destacado-marca { color: #d97706; display: inline-flex; }
.destacado-marca .icono { fill: currentColor; }
.celda-nota { display: block; font-size: .75rem; }
.acciones-fila { display: flex; gap: .35rem; justify-content: flex-end; }
.pie-tabla { display: block; margin-top: .75rem; }

/* ---------- Editor de producto ---------- */

.editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  grid-template-areas: "principal lateral" "fotos lateral";
  gap: 1.25rem;
  align-items: start;
}
/* minmax(0, 1fr) en las grillas internas: si no, la tabla de variantes las ensancha y la página se desborda en el celular. */
.editor-principal { grid-area: principal; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; min-width: 0; }
.editor-lateral { grid-area: lateral; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; position: sticky; top: 1.5rem; min-width: 0; }
.editor-fotos { grid-area: fotos; }
@media (max-width: 1000px) {
  .editor { grid-template-columns: minmax(0, 1fr); grid-template-areas: "principal" "lateral" "fotos"; }
  .editor-lateral { position: static; }
}
.editor .barra-guardar { margin: 0; border-radius: var(--radio); border: 1px solid var(--borde); }

.seccion-editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; align-content: start; min-width: 0; }
.seccion-editor-titulo { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.seccion-editor-titulo > div { display: grid; gap: .25rem; }
.campo-mitad { max-width: 50%; }
@media (max-width: 640px) { .campo-mitad { max-width: none; } }
fieldset.campo { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.campo legend { padding: 0; margin-bottom: .4rem; }

.atributos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
@media (max-width: 640px) { .atributos { grid-template-columns: minmax(0, 1fr); } }

.generador { border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-chico); background: var(--superficie-suave); }
.generador summary { display: flex; gap: .5rem; align-items: center; min-height: 44px; padding: 0 1rem; cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--primario); list-style: none; }
.generador summary::-webkit-details-marker { display: none; }
.generador-cuerpo { display: grid; gap: .9rem; padding: 0 1rem 1rem; }
.generador-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; }

.tabla-variantes-contenedor { box-shadow: none; }
.tabla-variantes th, .tabla-variantes td { padding: .4rem .25rem; }
.tabla-variantes th:first-child, .tabla-variantes td:first-child { padding-left: .6rem; }
.tabla-variantes th:last-child, .tabla-variantes td:last-child { padding-right: .5rem; width: 1%; }
.tabla-variantes th { font-size: .7rem; }
.tabla-variantes input { width: 100%; min-height: 38px; padding: 0 .5rem; font-size: .88rem; min-width: 58px; }
.tabla-variantes .entrada-sku { min-width: 104px; }
.tabla-variantes .entrada-precio { min-width: 78px; }
.tabla-variantes .entrada-stock { min-width: 52px; }
.fila-con-error input { border-color: var(--error-borde); }
.fila-errores td { padding: .35rem .75rem .6rem !important; color: var(--error); font-size: .85rem; font-weight: 500; white-space: normal !important; background: var(--error-fondo); }
.fila-errores .icono { vertical-align: -3px; }
.tabla-variantes tbody tr:hover { background: transparent; }
.acciones-variantes { justify-content: space-between; }
.aplicar-todas { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.aplicar-todas input { width: 110px; min-height: 34px; font-size: .875rem; }
.aplicar-todas select { width: auto; min-height: 34px; font-size: .875rem; }

.lista-categorias { display: grid; gap: .1rem; max-height: 320px; overflow-y: auto; }
.lista-categorias .casilla { padding-left: calc(var(--nivel) * 1.25rem); }

.zona-peligro { border-color: var(--error-borde); }
.zona-peligro h2 { color: var(--error); }

.grilla-fotos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .9rem; }
.foto-item { position: relative; display: grid; gap: .4rem; }
.foto-item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radio-chico); border: 1px solid var(--borde); background: var(--superficie-suave); }
.foto-principal img { border: 2px solid var(--primario); }
.foto-etiqueta { position: absolute; top: .5rem; left: .5rem; padding: .1rem .5rem; border-radius: 6px; background: var(--primario); color: #fff; font-size: .72rem; font-weight: 700; }
.foto-acciones { display: flex; gap: .25rem; justify-content: center; }
.subir-fotos { display: grid; gap: .75rem; }

/* ---------- Categorías ---------- */

.categorias-columnas { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .categorias-columnas { grid-template-columns: minmax(0, 1fr); } }
.arbol-categorias { list-style: none; margin: 0; padding: 0; display: grid; }
.categoria-item { padding-left: calc(var(--nivel) * 1.5rem); border-top: 1px solid var(--borde); }
.categoria-item:first-child { border-top: 0; }
.categoria-fila { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .55rem 0; }
.categoria-nombre { display: inline-flex; gap: .5rem; align-items: center; font-weight: 600; flex: 1; min-width: 0; }
.categoria-nombre .icono { color: var(--texto-tenue); }
.categoria-editar { display: contents; }
.categoria-editar summary { list-style: none; }
.categoria-editar summary::-webkit-details-marker { display: none; }
.categoria-editar[open] summary { background: var(--primario-suave); color: var(--primario); border-color: var(--primario); }
.categoria-panel { flex-basis: 100%; display: grid; gap: .9rem; padding: 1rem; margin-bottom: .5rem; border-radius: var(--radio-chico); background: var(--superficie-suave); }

/* ---------- Cuenta ---------- */

.dato-fijo { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; padding: .55rem .55rem .55rem .9rem; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie-suave); }
.dato-fijo a { flex: 1; min-width: 0; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.ajuste + .ajuste { border-top: 1px solid var(--borde); }

/* Menú del celular con 8 secciones: ícono arriba y texto corto abajo para que entren todas. */
.texto-corto { display: none; }
@media (max-width: 860px) {
  .lateral-menu { gap: 0; }
  .lateral-menu a { flex-direction: column; gap: .15rem; min-height: 52px; padding: .3rem .1rem; font-size: .7rem; min-width: 0; }
}
/* En el celular no entran las 8 secciones: cada una con su ancho y el menú se desliza de costado. */
@media (max-width: 560px) {
  .lateral-menu a { flex: 0 0 auto; padding: .3rem .55rem; }
}
@media (max-width: 480px) {
  .lateral-menu .texto-largo { display: none; }
  .lateral-menu .texto-corto { display: inline; }
}

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

/* ---------- Menú: contador de pedidos nuevos ---------- */

.menu-contador { margin-left: auto; min-width: 20px; padding: 0 .4rem; border-radius: 99px; background: var(--primario); color: #fff; font-size: .72rem; font-weight: 700; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .lateral-menu a { position: relative; }
  .menu-contador { position: absolute; top: 2px; left: calc(50% + 4px); min-width: 18px; padding: 0 .3rem; line-height: 18px; font-size: .65rem; }
}

.aviso-info { background: var(--primario-suave); color: #1e40af; border-color: #bfdbfe; margin-bottom: 1.5rem; }
.aviso-info a { color: inherit; font-weight: 600; }
a.aviso-pedidos { text-decoration: none; }
a.aviso-pedidos:hover { border-color: var(--primario); }
.ajustes + .ajuste, .ajuste + .ajustes { border-top: 1px solid var(--borde); }

/* Estados de pedidos */
.pastilla-nuevo { background: var(--primario-suave); color: var(--primario); }
.pastilla-pagado { background: var(--ok-fondo); color: var(--ok); }
.pastilla-enviado { background: #f5f3ff; color: #6d28d9; }
.pastilla-entregado { background: var(--superficie-suave); color: var(--texto-suave); }
.pastilla-cancelado { background: var(--error-fondo); color: var(--error); }
.encabezado h1 .pastilla { vertical-align: middle; margin-left: .35rem; font-size: .8rem; }
button.pastilla-boton { border: 0; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
button.pastilla-boton:hover { filter: brightness(.96); box-shadow: inset 0 0 0 1px currentColor; }
button.pastilla-boton:focus-visible { outline: none; box-shadow: var(--foco); }

/* ---------- Pedidos ---------- */

.celda-pedido { font-weight: 700; font-variant-numeric: tabular-nums; text-decoration: none; }
.celda-pedido:hover { text-decoration: underline; }
.tabla-pedidos td { vertical-align: top; }
.tabla-pedidos td .celda-fila { display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }

.siguiente-paso { grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-color: #bfdbfe; background: linear-gradient(var(--primario-suave), var(--superficie)); }
.siguiente-paso h2 { margin-bottom: .25rem; }
.siguiente-paso .ayuda { display: block; font-size: .9rem; color: var(--texto-suave); }
.siguiente-paso .acciones { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) { .siguiente-paso { grid-template-columns: minmax(0, 1fr); } .siguiente-paso .acciones { justify-content: flex-start; } }
.boton-whatsapp .icono { color: #0f7a3f; }

.tabla-sin-borde { border: 0; box-shadow: none; }
.tabla-items td { vertical-align: top; }
.tabla-items td:first-child { white-space: normal; }

.totales-pedido { display: grid; gap: .4rem; margin: 0; margin-left: auto; width: min(100%, 320px); }
.totales-pedido div { display: flex; justify-content: space-between; gap: 1rem; }
.totales-pedido dt { color: var(--texto-suave); }
.totales-pedido dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.totales-descuento dt, .totales-descuento dd { color: var(--ok); }
.totales-final { padding-top: .5rem; border-top: 1px solid var(--borde); font-weight: 700; font-size: 1.1rem; }
.totales-final dt { color: var(--texto); }
.nota-cliente { margin: 0; white-space: pre-line; padding: .8rem 1rem; border-left: 3px solid var(--borde-fuerte); background: var(--superficie-suave); border-radius: 0 var(--radio-chico) var(--radio-chico) 0; }

.datos-pedido { display: grid; gap: .6rem; margin: 0; }
.datos-pedido div { display: grid; gap: .05rem; }
.datos-pedido dt { font-size: .78rem; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.datos-pedido dd { margin: 0; overflow-wrap: anywhere; }
.cambiar-estado { display: flex; gap: .5rem; }
.cambiar-estado select { flex: 1; min-width: 0; }

/* ---------- Envíos y pagos ---------- */

.lista-entregas { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.entrega { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .8rem .9rem; border: 1px solid var(--borde); border-radius: var(--radio-chico); }
.entrega-pausada { background: var(--superficie-suave); }
.entrega-pausada .entrega-datos { opacity: .65; }
.entrega-icono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--primario-suave); color: var(--primario); }
.entrega-pausada .entrega-icono { background: var(--borde); color: var(--texto-tenue); }
.entrega-datos { display: grid; gap: .1rem; min-width: 0; }
.entrega-descripcion { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entrega-acciones { display: flex; gap: .25rem; align-items: center; }
.entrega-acciones form { display: contents; }
.entrega-acciones .pastilla { margin-right: .35rem; }
@media (max-width: 640px) {
  .entrega { grid-template-columns: auto minmax(0, 1fr); }
  .entrega-acciones { grid-column: 1 / -1; justify-content: flex-end; }
  .entrega-descripcion { white-space: normal; }
}
.agregar-entrega { display: grid; gap: .5rem; padding-top: 1rem; border-top: 1px dashed var(--borde-fuerte); }
.lista-entregas:empty + .agregar-entrega, .estado-vacio-chico + .agregar-entrega { border-top: 0; padding-top: 0; }
.agregar-entrega .acciones { flex-wrap: wrap; justify-content: flex-start; }

.formas-pago { display: grid; gap: 1rem; }
.forma-pago { display: grid; gap: 1.1rem; margin: 0; min-width: 0; }
.forma-pago .interruptor-texto strong { display: inline-flex; gap: .4rem; align-items: center; }
.forma-pago-campos { padding-top: 1rem; border-top: 1px solid var(--borde); transition: opacity var(--transicion); }
/* Con la forma de pago apagada, sus datos se ven más tenues (se guardan igual, por si se vuelve a activar). */
.forma-pago:has([data-activar-forma]:not(:checked)) .forma-pago-campos { opacity: .5; }
.formas-pago .barra-guardar { margin: 0; border-radius: var(--radio); border: 1px solid var(--borde); }

.tipos-entrega { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.tipos-entrega legend { margin-bottom: .5rem; padding: 0; }
@media (max-width: 560px) { .tipos-entrega { grid-template-columns: minmax(0, 1fr); } }
.opcion-tipo { position: relative; display: grid; gap: .2rem; padding: .85rem 1rem; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico); cursor: pointer; transition: border-color var(--transicion), background var(--transicion); }
.opcion-tipo input { position: absolute; opacity: 0; }
.opcion-tipo > span:first-of-type { display: inline-flex; gap: .45rem; align-items: center; }
.opcion-tipo:hover { border-color: var(--primario); }
.opcion-tipo:has(input:checked) { border-color: var(--primario); background: var(--primario-suave); box-shadow: inset 0 0 0 1px var(--primario); }
.opcion-tipo:has(input:focus-visible) { box-shadow: var(--foco); }
.tipos-entrega .error-campo { grid-column: 1 / -1; }
.campo-con-prefijo .sufijo { order: -1; border: 1px solid var(--borde-fuerte); border-right: 0; border-radius: var(--radio-chico) 0 0 var(--radio-chico); }
.campo-con-prefijo input { border-radius: 0 var(--radio-chico) var(--radio-chico) 0 !important; }
.campo-con-prefijo input:disabled { background: var(--superficie-suave); color: var(--texto-tenue); }
.editor-entrega, .editor-pedido { grid-template-areas: "principal lateral"; }
@media (max-width: 1000px) { .editor-entrega, .editor-pedido { grid-template-areas: "principal" "lateral"; } }

/* ---------- Celular: las tablas de productos, pedidos y variantes pasan a tarjetas ---------- */

/* Con una tabla de 5 columnas en 390px, Stock, Estado y los botones de acción quedaban escondidos detrás de un
   scroll horizontal. Acá cada fila es una tarjeta con todo a la vista. Los <th> siguen en el HTML (para lectores
   de pantalla), solo se ocultan visualmente; las etiquetas de cada dato salen de data-etiqueta. */
@media (max-width: 700px) {
  .tabla-productos, .tabla-pedidos, .tabla-variantes,
  .tabla-productos tbody, .tabla-pedidos tbody, .tabla-variantes tbody { display: block; }
  .tabla-productos thead, .tabla-pedidos thead, .tabla-variantes thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  }
  .tabla-productos td, .tabla-pedidos td, .tabla-variantes td { display: block; padding: 0; border: 0; white-space: normal; }
  .tabla-productos td[data-etiqueta]::before,
  .tabla-pedidos td[data-etiqueta]::before,
  .tabla-variantes td[data-etiqueta]::before {
    content: attr(data-etiqueta);
    display: block;
    margin-bottom: .15rem;
    font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: var(--texto-tenue);
  }
  .tabla-productos tbody tr, .tabla-pedidos tbody tr { padding: .9rem 1rem; border-bottom: 1px solid var(--borde); }
  .tabla-productos tbody tr:last-child, .tabla-pedidos tbody tr:last-child { border-bottom: 0; }

  /* Productos: nombre arriba; abajo precio, stock y estado, y los botones a la derecha. */
  .tabla-productos tbody tr { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1.5rem; }
  .tabla-productos td:first-child { flex: 1 1 100%; }
  .tabla-productos .numero { text-align: left; }
  .tabla-productos .celda-acciones { margin-left: auto; }

  /* Pedidos: número y estado arriba; cliente, entrega y total debajo. */
  .tabla-pedidos tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem 1rem; }
  .tabla-pedidos td { grid-column: 1 / -1; min-width: 0; }
  .tabla-pedidos td:first-child { grid-column: 1; grid-row: 1; }
  .tabla-pedidos td:last-child { grid-column: 2; grid-row: 1; }
  .tabla-pedidos .numero { text-align: left; }
  .tabla-pedidos td .celda-fila { max-width: none; white-space: normal; }

  /* Variantes: cada variante es una tarjeta con sus campos rotulados (el nombre de cada valor, por ejemplo Talle). */
  .tabla-variantes-contenedor { border: 0; background: none; overflow: visible; }
  .tabla-variantes .fila-variante {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem;
    padding: .9rem; margin-bottom: .6rem;
    border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie);
  }
  .tabla-variantes .fila-variante td { flex: 1 1 72px; min-width: 0; padding: 0; }
  .tabla-variantes .fila-variante .celda-sku { flex-basis: 100%; }
  .tabla-variantes .fila-variante .celda-quitar { flex: 0 0 auto; width: auto; }
  .tabla-variantes input, .tabla-variantes .entrada-sku, .tabla-variantes .entrada-precio, .tabla-variantes .entrada-stock { min-width: 0; min-height: 42px; font-size: 1rem; }
  .tabla-variantes .fila-con-error { border-color: var(--error-borde); margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .tabla-variantes .fila-errores { display: block; margin-bottom: .6rem; padding: .5rem .9rem; border: 1px solid var(--error-borde); border-top: 0; border-radius: 0 0 var(--radio-chico) var(--radio-chico); background: var(--error-fondo); }
  .tabla-variantes .fila-errores td { padding: 0 !important; background: none; }
  .tabla-variantes tbody tr:hover { background: var(--superficie); }
}