.productos-toolbar {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  align-items: center;
  flex-wrap: wrap;
}

.productos-toolbar input {
  flex: 1 1 260px;
  padding-left: var(--space-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A837B' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: var(--space-4) center;
}

.productos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
}

.producto-card {
  position: relative;
  isolation: isolate;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
}

.inventario-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-soft);
}

.inventario-tabs a {
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
}

.inventario-tabs a:hover,
.inventario-tabs a.active {
  border-bottom-color: var(--color-gold);
  color: var(--color-gold-bright);
}

.page-head-compact { margin-bottom: var(--space-5); }
.page-head-compact h2 { margin-bottom: var(--space-2); }

/* Señal de atención sobre el artículo específico. No obliga a recorrer el
   dashboard para descubrir qué necesita reabasto. */
.producto-alerta-stock {
  position: absolute;
  z-index: 1;
  top: var(--space-3);
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(217, 117, 111, .52);
  border-radius: 999px;
  background: rgba(37, 17, 16, .9);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  color: var(--color-error);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.producto-alerta-stock::before {
  content: '!';
  display: grid;
  width: 14px;
  height: 14px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-error);
  color: #24110f;
  font-size: 10px;
  font-weight: 800;
}

.producto-card img,
.producto-card-sin-foto {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--color-surface-sunken);
}

/* Marcador de los productos que todavía no tienen foto. Antes era un recuadro
   vacío con la palabra "Sin foto"; con el icono del set propio se lee como parte
   del sitio y no como un error de carga. */
.producto-card-sin-foto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.producto-card-sin-foto .sitio-icono {
  width: 34px;
  height: 34px;
  opacity: .55;
}

/* El cuerpo es una columna con separación uniforme: antes cada línea traía su
   propio margen (2px, 1px, 1px…) y el texto quedaba pegado entre sí. */
.producto-card-cuerpo {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.producto-card-cuerpo > .badge,
.producto-card-cuerpo > .producto-card-badges { align-self: flex-start; }

.producto-card-cuerpo h3 {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.35;
}

.producto-card-precio {
  color: var(--color-gold-bright);
  font-weight: 700;
  font-size: var(--text-lg);
  margin: calc(var(--space-1) * -1) 0 0;
  font-variant-numeric: tabular-nums;
}

.producto-card-stock {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0;
}

.producto-card-stock-bajo { color: var(--color-warning); font-weight: 600; }

/* Variantes y proveedor: contexto secundario, sin el margen suelto de
   .card-hint que los apretaba contra la línea de arriba. */
.producto-card-cuerpo .card-hint {
  margin: 0;
  line-height: 1.45;
}

.producto-card-destacado {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
  cursor: pointer;
  line-height: 1.45;
}

.producto-card-destacado input { width: auto; margin-top: 2px; }

/* Reabastecer/Eliminar en una sola fila pareja — sin esto, en una tarjeta angosta
   se apilaban con espacios dispares en vez de verse como una sola fila de acciones. */
.producto-card-cuerpo .actions { flex-wrap: nowrap; gap: var(--space-2); margin-top: var(--space-3); }
.producto-card-cuerpo .actions button { flex: 1; padding-inline: var(--space-2); }

@media (max-width: 560px) {
  .productos-toolbar > button { width: 100%; }
  .inventario-tabs { overflow-x: auto; }
  .inventario-tabs a { white-space: nowrap; }
}

/* ---------- Modal de producto (admin) ---------- */
/* Encabezado y pie fijos y solo el cuerpo hace scroll: Guardar y los avisos siempre se ven,
   aunque el producto tenga muchas variantes. */
.modal-panel.modal-panel-producto {
  display: flex;
  max-width: 760px;
  max-height: min(86vh, 860px);
  max-height: min(86dvh, 860px);
  padding: 0;
  overflow: hidden;
}
.modal-panel-producto form { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0; width: 100%; gap: 0; }
.mp-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-soft);
}
.mp-cabecera h2 { margin: 0; }
.mp-cuerpo {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--space-5);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mp-pie {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5) var(--space-4);
  border-top: 1px solid var(--color-border-soft);
  background: var(--color-surface-raised);
}
.mp-pie .error { margin: 0; }
.mp-pie .actions { justify-content: flex-end; }

/* Celular: hoja que sube desde abajo, con un borde de fondo a la vista para tocar y cerrar. */
@media (max-width: 640px) {
  .modal-overlay:has(> .modal-panel-producto) { align-items: flex-end; padding: 0; }
  .modal-panel.modal-panel-producto {
    max-width: none;
    max-height: 90vh;
    max-height: 90dvh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .mp-cabecera { padding: var(--space-3) var(--space-4); }
  .mp-cuerpo { padding: var(--space-4); }
  .mp-pie { padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); }
}

/* ---------- Editor de variantes (admin) ---------- */
/* Cada variante es un desplegable: plegada es una línea ("Grande · $500 · stock 3"). */
.variantes-lista { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); }
.variante-item {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}
.variante-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-2) var(--space-4);
  color: var(--color-text);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.variante-item > summary::-webkit-details-marker { display: none; }
.variante-item > summary::after { content: '▾'; flex-shrink: 0; color: var(--color-gold); transition: transform var(--duration-fast) var(--ease-out); }
.variante-item[open] > summary { border-bottom: 1px solid var(--color-border-soft); color: var(--color-gold-bright); }
.variante-item[open] > summary::after { transform: rotate(180deg); }
.var-resumen { min-width: 0; overflow-wrap: anywhere; }
.variante-cuerpo { display: grid; gap: var(--space-3); padding: var(--space-4); }
/* Nombre en su renglón y precio y stock lado a lado; con espacio, los tres en una fila. */
.variante-cuerpo .field-grid { grid-template-columns: 1fr 1fr; }
.variante-cuerpo .field-grid > label { min-width: 0; }
.variante-cuerpo .field-grid > label:first-child { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .variante-cuerpo .field-grid { grid-template-columns: 2fr 1fr 1fr; }
  .variante-cuerpo .field-grid > label:first-child { grid-column: auto; }
}
.variante-cuerpo .var-quitar { justify-self: start; }
.variante-cuerpo textarea { width: 100%; resize: vertical; }

/* ============================================================
   Editor de variantes con DOS NIVELES.
   El principal lleva el precio (la cascada: las subvariantes no lo modifican)
   y sus opciones van anidadas debajo, con una guía visual a la izquierda.
   Sin segundo nivel el editor usa el estilo plano de arriba.
   ============================================================ */
.variantes-niveles {
  margin-bottom: var(--space-2);
}

.variante-grupo {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  padding: var(--space-3);
}

.variante-grupo-cabecera {
  display: grid;
  grid-template-columns: 2fr 1fr auto;
  gap: var(--space-3);
  align-items: end;
}

.variante-grupo-cabecera > label { min-width: 0; }
.variante-grupo-cabecera .var-quitar-grupo { justify-self: end; }

.variante-grupo > .card-hint {
  margin: var(--space-2) 0 0;
}

/* Las opciones del segundo nivel cuelgan del principal. */
.variante-subs {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-border-soft);
}

.variante-sub {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}

.variante-sub > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.variante-sub > summary::-webkit-details-marker { display: none; }
.variante-sub > summary::after { content: '▾'; margin-left: auto; flex-shrink: 0; color: var(--color-gold); transition: transform var(--duration-fast) var(--ease-out); }
.variante-sub[open] > summary { color: var(--color-gold-bright); border-bottom: 1px solid var(--color-border-soft); }
.variante-sub[open] > summary::after { transform: rotate(180deg); }

.variante-sub .variante-cuerpo { padding: var(--space-3); }
.variante-sub .field-grid { grid-template-columns: 2fr 1fr; }
.variante-sub .field-grid > label:first-child { grid-column: auto; }

.variante-grupo .var-agregar-sub {
  justify-self: start;
}

@media (max-width: 640px) {
  .variante-grupo-cabecera { grid-template-columns: 1fr; }
  .variante-grupo-cabecera .var-quitar-grupo { justify-self: start; }
  .variante-sub .field-grid { grid-template-columns: 1fr; }
}
/* ============================================================
   Tarjeta de producto del ADMIN.
   Solo muestra el estado (foto, categoría, nombre, precio, stock).
   Toda la configuración vive en el modal que se abre al hacer clic, así que
   aquí no hay botones ni datos secundarios.
   ============================================================ */
.producto-card-foto {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-surface-sunken);
}
.producto-card-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}
.producto-card:hover .producto-card-foto img { transform: scale(1.04); }

/* Las pastillas de la foto van en una fila que se acomoda sola. Antes cada una se
   colocaba por su cuenta: "Stock bajo" traía left y right a la vez (se estiraba a
   todo lo ancho) y con "Destacado" se encimaba — medido, 87px de traslape a 250px
   de ancho. Dentro del contenedor son estáticas y el ancho lo da su contenido. */
.producto-card-pills {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  right: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
}
.producto-card-pills > * { position: static; }
/* Mismo alto y mismo renglón de texto: las dos pastillas se leen como un par.
   (position: static tiene que ir aquí con especificidad 0,2,0: la regla base de
   .producto-pill-destacado es absoluta y, con la misma especificidad, ganaba por
   venir después — la pastilla dorada se salía de la fila.) */
.producto-card-pills .producto-alerta-stock,
.producto-card-pills .producto-pill-destacado,
.producto-card-pills .producto-pill-agotado {
  position: static;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding-block: 0;
}

/* Agotado: sólido, para que no se confunda con el aviso de stock bajo (que va en
   contorno). Es el estado que pide acción inmediata. */
.producto-pill-agotado {
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-error);
  color: #24110f;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.producto-pill-destacado {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  padding: 3px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-gold);
  color: var(--color-bg);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Todas las tarjetas miden igual: la rejilla se lee como una retícula y no como una
   escalera. El nombre reserva sus dos renglones y la última línea se pega al fondo,
   así los precios de una misma fila quedan alineados entre sí. */
#productos-grid .producto-card {
  display: flex;
  flex-direction: column;
}
#productos-grid .producto-card-cuerpo { flex: 1 1 auto; gap: 4px; }
.producto-card-cuerpo h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.35em);
}
.producto-card-meta {
  margin: auto 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

/* Pie del modal: las acciones destructivas a la izquierda y separadas de
   Guardar, para que no compitan ni se toquen por accidente. */
.mp-pie-acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.mp-pie-peligro { display: flex; gap: var(--space-2); }
.mp-pie-principal { display: flex; gap: var(--space-2); margin-left: auto; }

@media (max-width: 560px) {
  .mp-pie-acciones { flex-direction: column; align-items: stretch; }
  .mp-pie-principal { margin-left: 0; }
  .mp-pie-principal > * { flex: 1; }
}

/* ============================================================
   Precio de la web pública.
   El sitio está en inglés y el visitante compra en dólares: se muestra SOLO el
   equivalente en dólares con la tasa del admin. El estudio sigue capturando en
   pesos (su moneda de referencia) — eso vive en el admin y el POS.
   Las reglas de .precio-usd / .precio-mxn viven en components.css: los
   comprobantes que se capturan en Citas y el POS no cargan este archivo.
   ============================================================ */

/* ============================================================
   Filtros de la lista de productos.
   Los usan la tienda pública y el admin: mismos chips, mismas
   medidas. Con 14 productos ya hacía falta acotar la lista y, sobre
   todo, saber cuántos quedan al aplicar un filtro.
   ============================================================ */
.productos-filtros {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.productos-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.producto-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.producto-chip:hover { border-color: var(--color-border-strong); color: var(--color-text); }

.producto-chip.activo {
  border-color: var(--color-gold);
  background: var(--tint-gold-2);
  color: var(--color-gold-bright);
}

.producto-chip:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }

/* El conteo va dentro del chip, en gris: se lee como dato, no compite con el nombre. */
.producto-chip-n {
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.producto-chip.activo .producto-chip-n { color: var(--color-gold); }

.productos-casilla {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
  cursor: pointer;
}

.productos-casilla input { width: auto; margin: 0; }

.productos-conteo {
  margin: 0 0 var(--space-3);
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

/* Mientras carga: la rejilla ya tiene su forma y el contenido no salta al llegar. */
/* Sin el degradado de la foto ni el aviso de "ver producto": es una tarjeta fantasma. */
.pc-esqueleto .pc-foto::after,
.pc-esqueleto .pc-vista { display: none; }
.pc-esqueleto .pc-foto,
.esq-foto,
.esq-linea {
  background: linear-gradient(90deg, var(--color-surface-sunken) 25%, var(--color-surface-raised) 50%, var(--color-surface-sunken) 75%);
  background-size: 240% 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .pc-esqueleto .pc-foto,
  .esq-foto,
  .esq-linea { animation: esq-brillo 1.6s var(--ease-out) infinite; }
}

@keyframes esq-brillo {
  from { background-position: 140% 0; }
  to { background-position: -40% 0; }
}

.esq-linea {
  display: block;
  height: 12px;
  border-radius: var(--radius-sm);
}.esq-linea--precio { height: 18px; width: 45%; }
.esq-linea--media { width: 70%; }
.esq-linea--corta { width: 35%; }

/* El estado vacío de la rejilla: icono del set propio y una salida (limpiar filtros). */
.productos-vacio {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
  border: 1px dashed var(--color-border-soft);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  text-align: center;
}
.productos-vacio .sitio-icono { width: 34px; height: 34px; color: var(--color-gold); opacity: .6; }
.productos-vacio p { margin: 0; font-size: var(--text-sm); }
.productos-vacio[hidden] { display: none; }

/* ============================================================
   Paginador del catálogo. Mismo criterio que Mi panel y el
   historial de Reportes: con una sola página no aparece.
   ============================================================ */
.productos-paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.productos-paginacion-contador {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.productos-paginacion button:disabled { opacity: .4; cursor: not-allowed; }

/* En celular el contador va arriba y las flechas abajo: en una línea no caben los tres. */
@media (max-width: 560px) {
  .productos-paginacion-contador { order: -1; flex: 1 1 100%; }
  /* Dos columnas, como el grid de artistas: una sola tarjeta cuadrada por renglón
     obligaba a bajar media pantalla por producto. */
  .productos-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--space-3); }
}

/* ============================================================
   Perfil de solo-fotos: el modal únicamente muestra la ficha
   del artículo (nombre, precio, variantes) y las galerías.
   El ocultado va por CSS y no por JS: `aplicarModoVariantes()`
   vuelve a mostrar precio y stock al abrir un producto sin
   variantes, y ganaba sobre el `hidden` que ponía el script.
   ============================================================ */
body.productos-solo-fotos .mp-cuerpo > *:not(.mp-bloque):not(#producto-fotos-tallas):not(.mp-bloque-fotos) {
  display: none !important;
}
/* De los bloques, solo el de fotos; y dentro, sin su título ni la ayuda (el perfil de fotos no
   crea productos: solo pone imágenes). */
body.productos-solo-fotos .mp-bloque:not(.mp-bloque-fotos) { display: none !important; }
body.productos-solo-fotos .mp-bloque-fotos > *:not(#producto-fotos-info):not(#producto-fotos-label) {
  display: none !important;
}
body.productos-solo-fotos .mp-bloque-fotos {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}
body.productos-solo-fotos .mp-pie-principal [type="submit"] { display: none !important; }
body.productos-solo-fotos .mp-pie-peligro { display: none !important; }
/* Los materiales no son parte de la tienda pública: en el perfil de fotos no existen.
   Va por CSS además de por JS para que no alcancen a verse ni un frame. */
body.productos-solo-fotos .inventario-tabs,
body.productos-solo-fotos #vista-materiales { display: none !important; }

/* Ficha de solo lectura (solo se pinta en el perfil de fotos). */
#producto-fotos-info {
  display: grid;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}
.pf-nombre {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
}
.pf-precio {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-gold-bright);
  font-variant-numeric: tabular-nums;
}
.pf-variantes {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.pf-variantes span {
  display: inline-block;
  min-width: 66px;
  margin-right: var(--space-2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-gold);
}

/* ============================================================
   Fotos de un producto con variantes: "Foto general" + una
   galería por variante principal (ej. por talla). En modo
   solo-fotos, esto es todo lo editable del modal.
   ============================================================ */
#producto-fotos-tallas {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}
/* Título de la zona: es una lista aparte de la galería general, así que se anuncia. */
.fotos-tallas-titulo {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-gold);
}
.fotos-tallas-titulo span {
  margin-left: var(--space-2);
  font-weight: 600;
  color: var(--color-text-muted);
}
#producto-fotos-tallas .card-hint { margin: calc(-1 * var(--space-2)) 0 0; }
.fotos-talla {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: var(--space-4);
  align-items: start;
}
.fotos-talla-nombre {
  padding-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-gold);
}
@media (max-width: 560px) {
  .fotos-talla { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* ============================================================
   Los cuatro bloques del modal (Producto, Fotos, Precio y stock,
   Dónde se ve): cada uno con su título y una línea que los separa,
   para que nada quede suelto al final.
   ============================================================ */
.mp-bloque {
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-5, 1.5rem);
  margin-top: var(--space-5, 1.5rem);
  border-top: 1px solid var(--color-border-soft);
}

.mp-bloque:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

.mp-bloque > .eyebrow { margin: 0; }

/* La casilla que cambia el modo del formulario se ve como lo que es: una decision, no un
   campo mas. */
.productos-casilla-variantes {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

/* ============================================================
   Fotos DENTRO de cada variante (administrador y recepción): la
   zona vive en la ficha de la variante, no en un bloque aparte.
   ============================================================ */
.variante-fotos:empty { display: none; }

.variante-fotos-caja {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-border-soft);
  display: grid;
  gap: var(--space-3);
}

/* El mismo título de la zona de abajo, sin la caja: aquí ya hay marco (la ficha). */
.variante-fotos-caja .fotos-talla-titulo { margin: 0; }
.variante-fotos-caja .card-hint { margin: 0; }