/* vidriera.css — #/vidriera (docs/diseno/vidriera-publica-v1.md, seccion 3). "Tu tienda online":
   componentes NUEVOS y acotados sobre los tokens existentes (seccion 6 del diseño): el toggle
   grande/chico (neumorphic, el mismo lenguaje que el toggle de tema), el campo de link con
   prefijo fijo, y la lista de productos con su panel desplegable. Todo lo demas (.bloque, .campo,
   .boton, cinta de confirmacion, .mini-mockup/.banda-marca) ya vive en base.css y se reusa tal
   cual: cero reinvencion. */

/* Columna narrativa mas angosta en escritorio (como Ajustes, docs 3.1): sin esto .ws-grid--simple
   deja un panel de ancho completo, demasiado ancho para controles de settings tipo formulario. */
@media (min-width:1000px){
  #vista-vidriera.ws-grid{ max-width:760px; margin:0 auto; }
}

/* ============================================================ */
/* Toggle grande/chico (neumorphic): checkbox real + pista/thumb visual. Mismo lenguaje que el     */
/* segmentado/toggle de tema (tema-y-neumorphism-v1.md 7.1): track hundido, thumb extruido.         */
/* ============================================================ */
.toggle-switch{
  position:relative; display:inline-flex; align-items:center; gap:var(--sp-3); cursor:pointer;
}
.toggle-switch input{
  position:absolute; inset:0; margin:0; opacity:0; cursor:pointer; width:100%; height:100%;
}
.toggle-switch__pista{
  display:inline-flex; align-items:center; flex:none;
  width:44px; height:24px; border-radius:var(--r-pill);
  background:var(--superficie-neu); box-shadow:var(--sombra-neu-inset-suave);
  transition: background var(--mo-tacto);
}
.toggle-switch__thumb{
  width:18px; height:18px; border-radius:50%; margin-left:3px; flex:none;
  background:var(--surface); box-shadow:var(--sombra-neu-media);
  transition: transform var(--mo-base) var(--e-suave);
}
.toggle-switch input:checked + .toggle-switch__pista{ background:var(--marca-tenue); }
.toggle-switch input:checked + .toggle-switch__pista .toggle-switch__thumb{
  transform: translateX(20px); background:var(--marca-accion); box-shadow:var(--sombra-marca-alta);
}
.toggle-switch input:focus-visible + .toggle-switch__pista{ box-shadow:var(--sombra-neu-inset-suave), var(--sombra-foco-neu); }
.toggle-switch input:checked:focus-visible + .toggle-switch__pista{ box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--anillo-foco); }
.toggle-switch input:disabled + .toggle-switch__pista{ opacity:.6; }
.toggle-switch__etiqueta{ font-size:15px; font-weight:600; color:var(--ink); }

/* Variante grande (bloque 1, "¿Tu tienda está abierta?"): mismo patron, mas tactil. */
.toggle-switch--grande .toggle-switch__pista{ width:64px; height:34px; }
.toggle-switch--grande .toggle-switch__thumb{ width:26px; height:26px; margin-left:4px; }
.toggle-switch--grande input:checked + .toggle-switch__pista .toggle-switch__thumb{ transform: translateX(30px); }
.toggle-switch--grande .toggle-switch__etiqueta{ font-family:var(--font-marca); font-size:19px; font-weight:400; }

/* ============================================================ */
/* Bloque 2 — El link: prefijo fijo (gris) + slug editable.                                        */
/* ============================================================ */
.campo-link-vidriera__fila{
  display:flex; align-items:stretch; border-radius:var(--r-sm); border:1px solid var(--line-fuerte);
  overflow:hidden; background:var(--paper);
}
.campo-link-vidriera__prefijo{
  display:flex; align-items:center; padding:0 0 0 var(--sp-3); color:var(--ink-3); font-size:13.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52%;
}
.campo-link-vidriera__fila input{
  border:none; min-height:46px; flex:1; min-width:0; padding:0 var(--sp-3) 0 4px; background:none;
  color:var(--ink); font-size:15px;
}
.campo-link-vidriera__fila input:focus-visible{ outline:none; }
.campo-link-vidriera__fila:focus-within{ outline:2px solid var(--anillo-foco); outline-offset:1px; }

.fila-acciones-vidriera{ display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-4); }
.fila-acciones-vidriera .boton{ flex:1 1 auto; min-width:140px; }

/* ============================================================ */
/* Bloque 4 — Catalogo: filtros + filas de producto con panel desplegable.                         */
/* ============================================================ */
.catalogo-vidriera__filtros{
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin:var(--sp-4) 0 var(--sp-3);
}
.catalogo-vidriera__buscador{
  flex:1; min-width:160px; min-height:44px; padding:0 var(--sp-3); border-radius:var(--r-sm);
  border:1px solid var(--line-fuerte); background:var(--paper); color:var(--ink); font-size:15px;
}
.chip-check{
  display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 var(--sp-3);
  border-radius:var(--r-pill); border:1px solid var(--line-fuerte); background:var(--surface);
  font-size:13.5px; font-weight:600; color:var(--ink-2); cursor:pointer; flex:none;
}
.chip-check input{ width:16px; height:16px; accent-color:var(--marca-accion); }
.chip-check:has(input:checked){ background:var(--marca-tenue); color:var(--marca-ink); border-color:transparent; }

.fila-producto-vidriera{ border-top:1px solid var(--line); padding:var(--sp-3) 0; }
.fila-producto-vidriera:first-child{ border-top:none; }
.fila-producto-vidriera__cabecera{ display:flex; align-items:center; gap:var(--sp-3); }
.fila-producto-vidriera__foto{
  width:44px; height:44px; border-radius:var(--r-sm); flex:none; overflow:hidden;
  background:var(--marca-tenue); display:flex; align-items:center; justify-content:center;
}
.fila-producto-vidriera__foto-img{ width:100%; height:100%; object-fit:cover; display:block; }
.fila-producto-vidriera__foto-vacia{ font-family:var(--font-marca); font-size:18px; color:var(--marca-ink); }
.fila-producto-vidriera__info{ flex:1; min-width:0; }
.fila-producto-vidriera__nombre{ font-size:15px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fila-producto-vidriera__meta{ font-size:var(--t-micro); color:var(--ink-3); margin-top:2px; }
.fila-producto-vidriera__expandir{
  margin-top:var(--sp-2); background:none; border:none; color:var(--marca-ink); font-size:13.5px;
  font-weight:600; cursor:pointer; padding:var(--sp-2) 0; min-height:36px;
}
.fila-producto-vidriera__detalle{ margin-top:var(--sp-2); padding:var(--sp-3); border-radius:var(--r-md); background:var(--paper-2); }
.fila-producto-vidriera__detalle .campo:first-child{ margin-top:0; }

@media (min-width:640px){
  .fila-producto-vidriera__detalle .campo--fila{ display:flex; gap:var(--sp-4); }
}