/*
 * EDITOR DEL LOGO (2026-09-26) — estilos del parcial
 * src/Shared/Views/_components/logo-editor.twig.
 *
 * Las dos vistas previas copian las medidas de las páginas de verdad:
 *   .logoed-placa   ← .perk__logotile (src/Public/Views/pages/club/_tarjetas.twig)
 *   .logoed-circulo ← .prov__mono     (src/Public/Views/pages/club/proveedores.twig)
 * EditorLogoTest compara las medidas: si cambian allá, avisa acá.
 *
 * Los colores van escritos (no tokens del panel) porque son los del Club,
 * no los del panel: el editor tiene que verse igual en el portal del proveedor.
 */
.logoed [hidden] { display: none !important; }
.logoed__cuerpo {
  display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: var(--space-4, 16px);
  margin-top: var(--space-3, 12px);
}
@media (max-width: 640px) { .logoed__cuerpo { grid-template-columns: 1fr; } }
.logoed__lienzo {
  display: block; width: 100%; height: auto; aspect-ratio: 580 / 440;
  border-radius: var(--r-md, 8px); background: #0a1426;
  cursor: grab; touch-action: none; outline-offset: 3px;
}
.logoed__lienzo:active { cursor: grabbing; }
.logoed__lienzo:focus-visible { outline: 2px solid var(--accent, #C9A961); }
.logoed__zoom { display: flex; align-items: center; gap: var(--space-2, 8px); margin-top: var(--space-3, 12px); }
.logoed__zoom input[type="range"] { flex: 1; min-width: 0; }
.logoed__zoom output { min-width: 3.5em; text-align: right; font-variant-numeric: tabular-nums; font-size: var(--text-sm, 13px); color: var(--muted, #6b6b6b); }
.logoed__acciones { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); margin-top: var(--space-2, 8px); }
.logoed__grupo { border: 0; padding: 0; margin: var(--space-3, 12px) 0 0; min-width: 0; }
.logoed__grupo legend { font-size: var(--text-sm, 13px); font-weight: 500; margin-bottom: var(--space-1, 4px); padding: 0; }
.logoed__opciones { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); }
.logoed__opcion {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm, 13px);
  border: 1px solid var(--line, #ddd6c8); border-radius: 999px; padding: 6px 12px; cursor: pointer;
}
.logoed__opcion:has(input:checked) { border-color: var(--ink, #1a1a1a); font-weight: 500; }
.logoed__opcion:has(input:focus-visible) { outline: 2px solid var(--accent, #C9A961); outline-offset: 2px; }
.logoed__muestra { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,.2); }
.logoed__vistas {
  background: #12213c; border-radius: var(--r-md, 8px); padding: var(--space-4, 16px);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4, 16px); color: #c6d0e2;
  align-self: start;
}
@media (max-width: 640px) { .logoed__vistas { flex-direction: row; justify-content: space-around; } }
.logoed__vistas figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.logoed__vistas figcaption { font-size: 12px; text-align: center; line-height: 1.3; }
.logoed__vistas figcaption small { display: block; opacity: .7; }

/* Copia de .perk__logotile (pages/club/_tarjetas.twig). */
.logoed-placa {
  width: 92px; height: 63px; border-radius: 12px;
  background: #f2ede2; border: 1px solid rgba(184, 153, 90, 0.5);
  box-shadow: 0 8px 20px rgba(6, 12, 24, 0.4);
  display: flex; align-items: center; justify-content: center;
  padding: 6px 8px; box-sizing: border-box;
}
.logoed-placa img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logoed-placa--navy { background: linear-gradient(174deg, #1a2f54 0%, #101f3a 100%); border-color: rgba(139, 163, 201, 0.42); }
.logoed-placa--blanco { background: #fff; }

/* Copia de .prov__mono (pages/club/proveedores.twig). */
.logoed-circulo {
  width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: #0a1426;
  border: 1px solid rgba(139, 163, 201, 0.26); box-sizing: border-box;
}
.logoed-circulo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.logoed-circulo--placa { background: #f2ede2; padding: 9px; }
.logoed-circulo--placa-navy { background: linear-gradient(174deg, #1a2f54 0%, #101f3a 100%); padding: 9px; }
.logoed-circulo--placa-blanco { background: #fff; padding: 9px; }
.logoed-circulo--placa img, .logoed-circulo--placa-navy img, .logoed-circulo--placa-blanco img { object-fit: contain; }
.logoed-circulo--llena { background: #f2ede2; }
.logoed-circulo--llena-navy { background: linear-gradient(174deg, #1a2f54 0%, #101f3a 100%); }
.logoed-circulo--llena-blanco { background: #fff; }
.logoed__aviso {
  border: 1px solid var(--warning, #C9A961); background: var(--warning-bg, #fbf6ea);
  border-radius: var(--r-md, 8px); padding: var(--space-2, 8px) var(--space-3, 12px); font-size: var(--text-sm, 13px);
  margin: var(--space-2, 8px) 0;
}
.logoed__solo-lector {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.logoed__ayuda { font-size: 12px; color: var(--muted, #6b6b6b); margin: var(--space-1, 4px) 0 0; }
.logoed__quitar {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-3, 12px);
  font-size: var(--text-sm, 13px); color: var(--muted, #6b6b6b);
}