/* ══════════════════════════════════════════════════════════
   AMIGOS — hoja propia, no toca style.css
   Todo con prefijo .amg- para no chocar con nada.
   ══════════════════════════════════════════════════════════ */

/*
 * Los colores van tambien en .amg-fondo porque las ventanas emergentes
 * cuelgan del <body>, FUERA de .amg. Si solo se declaran ahi, dentro del
 * dialogo var(--oro) no existe y los botones salen oscuros.
 */
.amg,
.amg-fondo {
  --oro: #E0B96A;
  --panel: #1C1C1E;
  --panel-alto: #26262A;
  --linea: rgba(224,185,106,0.18);
  --tinta: #F4F0E8;
  --tinta-media: #A9A196;
  --error: #E8705F;
}

.amg {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1rem 1.5rem 5rem;
}

.amg-intro {
  color: var(--tinta-media);
  font-size: 1.12rem;
  line-height: 1.9;
  text-align: center;
  max-width: 46ch;
  margin: 0 auto 2.5rem;
}

/* ─── Barra de edición ─── */
.amg-barra {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: 0.9rem 1.2rem;
  margin-bottom: 1rem;
}
.amg-barra[hidden] { display: none; }
.amg-barra-texto {
  flex: 1;
  color: var(--oro);
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.amg-ayuda {
  color: var(--tinta-media);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
  text-align: center;
}
.amg-ayuda[hidden] { display: none; }

/* ─── La rejilla de banners ─── */
/*
 * Los banners se ESTIRAN hasta ocupar el ancho de su columna. Es lo que
 * los hace legibles: un 468x60 a su tamaño real se pierde en una página
 * ancha, y al ocupar la columna entera se lee de un vistazo.
 *
 * El número de columnas y el ancho de la zona salen de config.py.
 */
.amg-rejilla {
  display: grid;
  grid-template-columns: repeat(var(--columnas, 1), 1fr);
  gap: var(--separacion, 14px);
  max-width: var(--ancho-zona, 720px);
  margin: 0 auto;
}


.amg-caja {
  position: relative;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.25s, transform 0.15s, opacity 0.2s;
}
.amg-caja:hover { border-color: var(--linea); }

.amg-caja a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.amg-caja img {
  display: block;
  width: 100%;              /* ocupa el ancho de la columna */
  height: auto;
  max-height: var(--alto-max, 130px);
  object-fit: contain;      /* si topa con el alto, se centra sin deformarse */
  background: var(--panel-alto);
}

/*
 * El hueco se reserva con la proporcion de la imagen, no con atributos
 * width y height: esos coinciden con las medidas tipicas de publicidad
 * y los bloqueadores esconden el elemento entero.
 */
.amg-caja img[style*="aspect-ratio"] { height: auto; }

/*
 * Los VERTICALES no se estiran: un 160x480 a 720 px de ancho mediría dos
 * mil de alto. Se limitan por altura y se quedan centrados.
 */
.amg-caja.vertical img { max-height: var(--alto-vertical, 320px); }
.amg-caja-pie {
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
  color: var(--tinta-media);
  text-align: center;
}

/* Banner oculto: solo lo ve quien edita */
.amg-caja.oculto { opacity: 0.4; }
.amg-caja.oculto::after {
  content: 'oculto';
  position: absolute;
  top: 0.6rem; left: 0.6rem;
  background: rgba(0,0,0,0.75);
  color: var(--tinta-media);
  font-size: 0.8rem;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
}

/* ─── Modo edición: agarradero y botón de editar ─── */
.amg-caja .amg-mango,
.amg-caja .amg-editar { display: none; }

.amg.editando .amg-caja .amg-mango,
.amg.editando .amg-caja .amg-editar { display: flex; }

.amg-mango {
  position: absolute;
  top: 0.6rem; right: 0.6rem;
  width: 2.2rem; height: 2.2rem;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.7);
  border: 1px solid var(--linea);
  border-radius: 8px;
  cursor: grab;
  touch-action: none;          /* imprescindible para arrastrar en el móvil */
  color: var(--oro);
  font-size: 1.1rem;
  user-select: none;
}
.amg-mango:active { cursor: grabbing; }

.amg-editar {
  position: absolute;
  top: 0.6rem; right: 3.2rem;
  width: 2.2rem; height: 2.2rem;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.7);
  border: 1px solid var(--linea);
  border-radius: 8px;
  cursor: pointer;
  color: var(--oro);
  font-size: 0.95rem;
}

/* Mientras se arrastra */
.amg-caja.arrastrando {
  opacity: 0.35;
  border-color: var(--oro);
}
.amg-caja.hueco {
  outline: 2px dashed var(--oro);
  outline-offset: -2px;
}

.amg-rota {
  padding: 1.6rem 1rem;
  text-align: center;
  color: var(--error);
  font-size: 0.92rem;
  background: var(--panel-alto);
  line-height: 1.6;
}

.amg-vacio {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--tinta-media);
  font-size: 1.05rem;
  padding: 3rem 0;
}

/* ─── Pie ─── */
.amg-pie { text-align: center; margin-top: 3rem; }
.amg-enlace {
  background: none;
  border: none;
  color: #6E675E;
  font-family: var(--sans);
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.25s;
}
.amg-enlace:hover { color: var(--oro); }

/* ─── Botones ─── */
.amg-btn {
  background: var(--panel-alto);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0.7rem 1.3rem;
  cursor: pointer;
  transition: filter 0.2s, background 0.2s;
}
.amg-btn:hover { background: #303036; }
.amg-btn--oro { background: var(--oro); border-color: var(--oro); color: #16160F; font-weight: 500; }
.amg-btn--oro:hover { filter: brightness(1.08); background: var(--oro); }
.amg-btn--rojo { border-color: var(--error); color: var(--error); margin-right: auto; }
.amg-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ─── Pantalla de entrada de la página de edición ─── */
.amg-entrada {
  --oro: #E0B96A;
  --panel: #1C1C1E;
  --panel-alto: #26262A;
  --linea: rgba(224,185,106,0.18);
  --tinta: #F4F0E8;
  --tinta-media: #A9A196;
  --error: #E8705F;

  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 2rem 1.2rem;
}
.amg-entrada[hidden] { display: none; }
.amg-entrada .amg-ventana { max-width: 26rem; }
.amg-entrada .amg-botones { justify-content: stretch; }
.amg-entrada .amg-btn { flex: 1; }

/* ─── Ventanas ─── */
.amg-fondo {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  z-index: 100;
}
.amg-fondo[hidden] { display: none; }

.amg-ventana {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 16px;
  padding: 1.8rem;
  width: 100%;
  max-width: 30rem;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.amg-ventana h2 {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--tinta);
  margin-bottom: 1.3rem;
}

.amg-campo { margin-bottom: 1.1rem; }
.amg-campo label {
  display: block;
  font-size: 1rem;
  color: var(--tinta-media);
  margin-bottom: 0.4rem;
}
.amg-campo input {
  width: 100%;
  background: var(--panel-alto);
  border: 1.5px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.02rem;
  padding: 0.8rem 1rem;
  outline: none;
  transition: border-color 0.25s;
}
.amg-campo input:focus { border-color: var(--oro); }
.amg-campo input::placeholder { color: #6E675E; }

.amg-alternativa {
  font-size: 0.9rem;
  color: var(--tinta-media);
  margin-top: 0.45rem;
}
.amg-alternativa .amg-enlace { font-size: 0.9rem; }

.amg-vista {
  background: var(--panel-alto);
  border-radius: 10px;
  padding: 0.8rem;
  margin-bottom: 1.1rem;
  text-align: center;
}
.amg-vista[hidden] { display: none; }
.amg-vista-texto {
  display: block;
  font-size: 0.9rem;
  color: var(--tinta-media);
  margin-bottom: 0.6rem;
}
.amg-vista img { max-width: 100%; height: auto; border-radius: 6px; }

.amg-nota {
  background: rgba(224,185,106,0.1);
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  color: var(--tinta-media);
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 1.1rem;
}
.amg-nota[hidden] { display: none; }

.amg-visible {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--tinta-media);
  font-size: 1rem;
  margin-bottom: 1.1rem;
  cursor: pointer;
}
.amg-visible input { width: 1.1rem; height: 1.1rem; accent-color: var(--oro); }

.amg-fallo {
  color: var(--error);
  font-size: 0.95rem;
  min-height: 1.2rem;
  margin-bottom: 0.6rem;
}

.amg-botones {
  display: flex;
  gap: 0.7rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ─── Accesibilidad ─── */
.amg :focus-visible,
.amg-ventana :focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .amg *, .amg-ventana * { transition-duration: 0.01ms !important; }
}

/* ─── Móvil ─── */
@media (max-width: 700px) {
  .amg { padding: 0.5rem 1rem 3.5rem; }
  .amg-rejilla { grid-template-columns: 1fr; }   /* en el móvil, siempre una */
  .amg-ventana { padding: 1.4rem; }
  .amg-botones { justify-content: stretch; }
  .amg-botones .amg-btn { flex: 1; }
  .amg-btn--rojo { flex-basis: 100%; margin-right: 0; }
}

/* ══════════════════════════════════════════════════════════
   EDITOR: pestañas y galería
   ══════════════════════════════════════════════════════════ */
.amg-pestanas {
  flex-wrap: wrap;
  row-gap: 0.4rem;
  --oro: #E0B96A;
  --panel: #1C1C1E;
  --panel-alto: #26262A;
  --linea: rgba(224,185,106,0.18);
  --tinta: #F4F0E8;
  --tinta-media: #A9A196;
  --error: #E8705F;

  display: flex;
  gap: 0.5rem;
  max-width: 1000px;
  margin: 0 auto 1.5rem;
  padding: 0 1.5rem;
  align-items: center;
}
.amg-pestana {
  background: var(--panel-alto);
  border: 1.5px solid transparent;
  border-radius: 10px 10px 0 0;
  color: var(--tinta-media);
  font-family: var(--sans);
  font-size: 1.05rem;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.amg-pestana:hover { background: #303036; color: var(--tinta); }
.amg-pestana.activa {
  background: var(--oro);
  border-color: var(--oro);
  color: #16160F;
  font-weight: 500;
}
.amg-pestana-salir { margin-left: auto; border-radius: 10px; }

/* ─── Lista de carpetas ─── */
.amg-carpeta {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.7rem;
  transition: border-color 0.25s, opacity 0.2s;
}
.amg-carpeta:hover { border-color: var(--linea); }
.amg-carpeta.oculto { opacity: 0.45; }
.amg-carpeta.arrastrando { opacity: 0.35; border-color: var(--oro); }
.amg-carpeta.hueco { outline: 2px dashed var(--oro); outline-offset: -2px; }

.amg-carpeta .amg-mango {
  position: static;
  display: flex;
  width: 2rem; height: 2rem;
  flex-shrink: 0;
}
.amg-carpeta-datos { flex: 1; min-width: 0; }
.amg-carpeta-datos b {
  display: block;
  color: var(--tinta);
  font-size: 1.05rem;
  font-weight: 500;
}
.amg-carpeta-datos small {
  color: var(--tinta-media);
  font-size: 0.9rem;
}
.amg-carpeta-miniaturas { display: flex; gap: 0.25rem; flex-shrink: 0; }
.amg-carpeta-miniaturas img {
  width: 2.6rem; height: 2.6rem;
  object-fit: cover;
  border-radius: 6px;
  background: var(--panel-alto);
}

/* ─── Ventana ancha para las fotos ─── */
.amg-ventana--ancha { max-width: 52rem; }

/* ─── Zona de subida ─── */
.amg-subir {
  border: 2px dashed var(--linea);
  border-radius: 12px;
  padding: 1.8rem 1rem;
  text-align: center;
  cursor: pointer;
  color: var(--tinta-media);
  transition: border-color 0.2s, background 0.2s;
  margin-bottom: 1rem;
}
.amg-subir:hover, .amg-subir.encima {
  border-color: var(--oro);
  background: rgba(224,185,106,0.06);
}
.amg-subir p { margin-bottom: 0.3rem; color: var(--tinta); }
.amg-subir small { font-size: 0.9rem; }

.amg-progreso {
  height: 6px;
  background: var(--panel-alto);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.8rem;
}
.amg-progreso[hidden] { display: none; }
.amg-progreso-barra {
  height: 100%;
  width: 0;
  background: var(--oro);
  transition: width 0.25s;
}

/* ─── Cuadrícula de fotos ─── */
.amg-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: 0.6rem;
  max-height: 46vh;
  overflow-y: auto;
  margin-bottom: 1.2rem;
}
.amg-foto { position: relative; transition: opacity 0.2s; }
.amg-foto.arrastrando { opacity: 0.35; }
.amg-foto.hueco img { outline: 2px dashed var(--oro); outline-offset: -2px; }
.amg-foto .amg-mango {
  position: absolute;
  top: 0.3rem; left: 0.3rem;
  display: flex;
  width: 1.7rem; height: 1.7rem;
  font-size: 0.9rem;
  border-radius: 50%;
}
.amg-foto img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  background: var(--panel-alto);
}
.amg-quitar {
  position: absolute;
  top: 0.3rem; right: 0.3rem;
  width: 1.7rem; height: 1.7rem;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.75);
  color: var(--error);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.amg-quitar:hover { background: var(--error); color: #fff; }

@media (max-width: 700px) {
  .amg-pestanas {
  flex-wrap: wrap;
  row-gap: 0.4rem; padding: 0 1rem; flex-wrap: wrap; }
  .amg-carpeta { flex-wrap: wrap; }
  .amg-carpeta-miniaturas { order: 3; }
  .amg-fotos { grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); }
}

/* ─── Videos ─── */
.amg-videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.8rem;
}
.amg-video {
  position: relative;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.25s, opacity 0.2s;
}
.amg-video:hover { border-color: var(--linea); }
.amg-video.oculto { opacity: 0.45; }
.amg-video.arrastrando { opacity: 0.35; border-color: var(--oro); }
.amg-video.hueco { outline: 2px dashed var(--oro); outline-offset: -2px; }

.amg-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  background: #000;
}
.amg-video-pie {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.6rem;
  font-size: 0.88rem;
  color: var(--tinta-media);
}
.amg-video-pie span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.amg-video-pie input { width: 1.05rem; height: 1.05rem; accent-color: var(--oro); }
.amg-video .amg-mango {
  position: absolute;
  top: 0.4rem; left: 0.4rem;
  display: flex;
  width: 1.9rem; height: 1.9rem;
  font-size: 0.95rem;
}
.amg-video .amg-quitar { top: 0.4rem; right: 0.4rem; }

@media (max-width: 700px) {
  .amg-videos { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
}

/* ─── Preguntas frecuentes ─── */
.amg-pregunta {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.7rem;
  transition: border-color 0.25s, opacity 0.2s;
}
.amg-pregunta:hover { border-color: var(--linea); }
.amg-pregunta.oculto { opacity: 0.45; }
.amg-pregunta.arrastrando { opacity: 0.35; border-color: var(--oro); }
.amg-pregunta.hueco { outline: 2px dashed var(--oro); outline-offset: -2px; }

.amg-pregunta .amg-mango {
  position: static;
  display: flex;
  width: 2rem; height: 2rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.amg-pregunta-datos { flex: 1; min-width: 0; }
.amg-pregunta-datos b {
  display: block;
  color: var(--tinta);
  font-size: 1.02rem;
  font-weight: 500;
  margin-bottom: 0.2rem;
}
.amg-pregunta-datos small {
  display: block;
  color: var(--tinta-media);
  font-size: 0.9rem;
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.amg-pregunta .amg-btn { flex-shrink: 0; }

.amg-campo textarea {
  width: 100%;
  background: var(--panel-alto);
  border: 1.5px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.6;
  padding: 0.8rem 1rem;
  outline: none;
  resize: vertical;
  transition: border-color 0.25s;
}
.amg-campo textarea:focus { border-color: var(--oro); }
.amg-campo textarea::placeholder { color: #6E675E; }

@media (max-width: 700px) {
  .amg-pregunta { flex-wrap: wrap; }
  .amg-pregunta .amg-btn { width: 100%; }
}

/* ─── Editor de «Quién soy» ─── */
.amg-qs {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 1.5rem;
  align-items: start;
}
.amg-qs-foto { text-align: center; }
.amg-qs-foto img {
  display: block;
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 12px;
  background: var(--panel-alto);
  margin-bottom: 0.7rem;
}
.amg-qs-foto .amg-btn { width: 100%; }

.amg-qs-titulo { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.amg-qs-titulo input { flex: 1; min-width: 9rem; }
.amg-qs-titulo input:last-child {
  color: var(--oro);
  font-family: var(--serif);
  font-style: italic;
}

.amg-destacado {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 0.8rem 1.1rem;
  margin-bottom: 0.6rem;
  transition: border-color 0.25s, opacity 0.2s;
}
.amg-destacado:hover { border-color: var(--linea); }
.amg-destacado.oculto { opacity: 0.45; }
.amg-destacado.arrastrando { opacity: 0.35; border-color: var(--oro); }
.amg-destacado.hueco { outline: 2px dashed var(--oro); outline-offset: -2px; }
.amg-destacado .amg-mango {
  position: static;
  display: flex;
  width: 2rem; height: 2rem;
  flex-shrink: 0;
}
.amg-destacado-datos { flex: 1; min-width: 0; }
.amg-destacado-datos b {
  display: block;
  color: var(--oro);
  font-size: 1.05rem;
  font-weight: 500;
}
.amg-destacado-datos small {
  color: var(--tinta-media);
  font-size: 0.9rem;
}

@media (max-width: 700px) {
  .amg-qs { grid-template-columns: 1fr; }
  .amg-qs-foto img { max-width: 14rem; margin: 0 auto 0.7rem; }
  .amg-destacado { flex-wrap: wrap; }
}

/* ─── Editor de la página «Citas» ─── */
.amg-bloque {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.7rem;
  transition: border-color 0.25s, opacity 0.2s;
}
.amg-bloque:hover { border-color: var(--linea); }
.amg-bloque.oculto { opacity: 0.45; }
.amg-bloque.arrastrando { opacity: 0.35; border-color: var(--oro); }
.amg-bloque.hueco { outline: 2px dashed var(--oro); outline-offset: -2px; }

.amg-bloque .amg-mango {
  position: static;
  display: flex;
  width: 2rem; height: 2rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.amg-bloque-icono {
  flex-shrink: 0;
  width: 2.2rem; height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.amg-bloque-icono svg {
  width: 1.5rem; height: 1.5rem;
  fill: none;
  stroke: var(--oro);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.amg-bloque-datos { flex: 1; min-width: 0; }
.amg-bloque-datos b {
  display: block;
  color: var(--tinta);
  font-size: 1.02rem;
  font-weight: 500;
  margin-bottom: 0.2rem;
}
.amg-bloque-datos small {
  display: -webkit-box;
  color: var(--tinta-media);
  font-size: 0.9rem;
  line-height: 1.5;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.amg-bloque .amg-btn { flex-shrink: 0; }

/* ─── Elegir icono ─── */
.amg-iconos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.2rem, 1fr));
  gap: 0.5rem;
}
.amg-icono {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-alto);
  border: 1.5px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.amg-icono:hover { background: #303036; }
.amg-icono.elegido { border-color: var(--oro); background: rgba(224,185,106,0.1); }
.amg-icono.propio { position: relative; }
.amg-icono.propio::after {
  content: '';
  position: absolute;
  top: 0.25rem; right: 0.25rem;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--oro);
}
.amg-iconos {
  max-height: 14rem;
  overflow-y: auto;
  padding-right: 0.2rem;
}
.amg-icono svg {
  width: 1.5rem; height: 1.5rem;
  fill: none;
  stroke: var(--oro);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 700px) {
  .amg-bloque { flex-wrap: wrap; }
  .amg-bloque .amg-btn { width: 100%; }
}

/* ─── Interruptores de «Visible» ─── */
.amg-etiqueta-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.amg-ver {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--tinta-media);
  font-size: 0.9rem;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.amg-ver input { width: 1rem; height: 1rem; accent-color: var(--oro); }

/* ─── Editor de «Contactar» ─── */
.amg-canal {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 0.8rem 1.1rem;
  margin-bottom: 0.6rem;
  transition: border-color 0.25s, opacity 0.2s;
}
.amg-canal:hover { border-color: var(--linea); }
.amg-canal.oculto { opacity: 0.45; }
.amg-canal.arrastrando { opacity: 0.35; border-color: var(--oro); }
.amg-canal.hueco { outline: 2px dashed var(--oro); outline-offset: -2px; }
.amg-canal .amg-mango {
  position: static;
  display: flex;
  width: 2rem; height: 2rem;
  flex-shrink: 0;
}
.amg-canal > img {
  width: 2.2rem; height: 2.2rem;
  object-fit: contain;
  flex-shrink: 0;
}
.amg-canal-datos { flex: 1; min-width: 0; }
.amg-canal-datos b {
  display: block;
  color: var(--tinta);
  font-size: 1.02rem;
  font-weight: 500;
}
.amg-canal-datos small {
  display: block;
  color: var(--tinta-media);
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.amg-canal-datos small.apagado { color: var(--error); }

.amg-canal-icono {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--panel-alto);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  margin-bottom: 1.1rem;
}
.amg-canal-icono img {
  width: 3.2rem; height: 3.2rem;
  object-fit: contain;
  flex-shrink: 0;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
}
.amg-canal-icono > div { flex: 1; }
.amg-canal-icono .amg-alternativa { margin-top: 0.3rem; }

@media (max-width: 700px) {
  .amg-canal { flex-wrap: wrap; }
}

/* ─── Botones de dos opciones ─── */
.amg-opciones { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.amg-opcion {
  flex: 1;
  min-width: 8rem;
  background: var(--panel-alto);
  border: 1.5px solid transparent;
  border-radius: 10px;
  color: var(--tinta-media);
  font-family: var(--sans);
  font-size: 0.98rem;
  padding: 0.6rem 1rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.amg-opcion:hover { background: #303036; color: var(--tinta); }
.amg-opcion.elegida {
  border-color: var(--oro);
  background: rgba(224,185,106,0.1);
  color: var(--oro);
}

/* ─── Lista de cuadros de deseos ─── */
.amg-deseo {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 0.8rem 1.1rem;
  margin-bottom: 0.6rem;
  transition: border-color 0.25s, opacity 0.2s;
}
.amg-deseo:hover { border-color: var(--linea); }
.amg-deseo.oculto { opacity: 0.45; }
.amg-deseo.arrastrando { opacity: 0.35; border-color: var(--oro); }
.amg-deseo.hueco { outline: 2px dashed var(--oro); outline-offset: -2px; }
.amg-deseo .amg-mango {
  position: static;
  display: flex;
  width: 2rem; height: 2rem;
  flex-shrink: 0;
}
.amg-deseo-cabecera {
  width: 3.4rem; height: 2.4rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-alto);
  border-radius: 8px;
  overflow: hidden;
}
.amg-deseo-cabecera img { width: 100%; height: 100%; object-fit: cover; }
.amg-deseo-cabecera svg {
  width: 1.4rem; height: 1.4rem;
  fill: none; stroke: var(--oro);
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.amg-deseo-datos { flex: 1; min-width: 0; }
.amg-deseo-datos b {
  display: block;
  color: var(--tinta);
  font-size: 1.02rem;
  font-weight: 500;
}
.amg-deseo-datos small { color: var(--tinta-media); font-size: 0.88rem; }
.amg-deseo-marca {
  font-size: 0.78rem;
  color: var(--oro);
  border: 1px solid var(--linea);
  border-radius: 20px;
  padding: 0.1rem 0.6rem;
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .amg-deseo { flex-wrap: wrap; }
  .amg-deseo .amg-btn { width: 100%; }
}

/* ─── Deslizador de separación ─── */
.amg-margen { max-width: 26rem; }
.amg-margen input[type="range"] {
  width: 100%;
  accent-color: var(--oro);
  cursor: pointer;
}
.amg-margen .amg-contador { color: var(--oro); }

/* ─── Editor del menú ─── */
.amg-boton-menu {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 0.7rem 1.1rem;
  margin-bottom: 0.6rem;
  transition: border-color 0.25s, opacity 0.2s;
}
.amg-boton-menu:hover { border-color: var(--linea); }
.amg-boton-menu.apagada { opacity: 0.45; }
.amg-boton-menu.arrastrando { opacity: 0.35; border-color: var(--oro); }
.amg-boton-menu.hueco { outline: 2px dashed var(--oro); outline-offset: -2px; }
.amg-boton-menu .amg-mango {
  position: static;
  display: flex;
  width: 2rem; height: 2rem;
  flex-shrink: 0;
}
.amg-boton-menu input[type="text"] {
  flex: 1;
  min-width: 7rem;
  background: var(--panel-alto);
  border: 1.5px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0.55rem 0.9rem;
  outline: none;
  transition: border-color 0.25s;
}
.amg-boton-menu input[type="text"]:focus { border-color: var(--oro); }
.amg-boton-menu-pagina {
  color: var(--tinta-media);
  font-size: 0.85rem;
  width: 7rem;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.amg-boton-menu .amg-ver { flex-shrink: 0; }
.amg-apagada-aviso {
  font-size: 0.82rem;
  color: var(--error);
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .amg-boton-menu { flex-wrap: wrap; }
  .amg-boton-menu-pagina { width: auto; }
}

/* ─── Editor de los botones flotantes ─── */
.amg-flotante {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 0.7rem 1.1rem;
  margin-bottom: 0.6rem;
  transition: border-color 0.25s, opacity 0.2s;
}
.amg-flotante:hover { border-color: var(--linea); }
.amg-flotante.oculto { opacity: 0.45; }
.amg-flotante.arrastrando { opacity: 0.35; border-color: var(--oro); }
.amg-flotante.hueco { outline: 2px dashed var(--oro); outline-offset: -2px; }
.amg-flotante .amg-mango {
  position: static;
  display: flex;
  width: 2rem; height: 2rem;
  flex-shrink: 0;
}
.amg-flotante-muestra {
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.amg-flotante-muestra svg { width: 1.4rem; height: 1.4rem; }
.amg-flotante-muestra img {
  width: 1.5rem; height: 1.5rem;
  object-fit: contain;
}
.amg-flotante-datos { flex: 1; min-width: 0; }
.amg-flotante-datos b {
  display: block;
  color: var(--tinta);
  font-size: 1rem;
  font-weight: 500;
}
.amg-flotante-datos small {
  display: block;
  color: var(--tinta-media);
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.amg-color { display: flex; align-items: center; gap: 0.9rem; }
.amg-color input[type="color"] {
  width: 3.4rem; height: 2.4rem;
  background: none;
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  cursor: pointer;
  padding: 2px;
}
.amg-iconos .amg-icono.marca svg { stroke: none; fill: currentColor; }
.amg-iconos .amg-icono.marca { color: var(--oro); }

@media (max-width: 700px) {
  .amg-flotante { flex-wrap: wrap; }
  .amg-flotante .amg-btn { width: 100%; }
}

/* ─── Ajustes de reservas ─── */
.amg-ajuste {
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 1.1rem 1.3rem;
  margin-bottom: 0.8rem;
}
.amg-ajuste:hover { border-color: rgba(255,255,255,0.12); }
.amg-ajuste-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.amg-ajuste-titulo b {
  color: var(--tinta);
  font-size: 1.05rem;
  font-weight: 500;
}
.amg-ajuste-ayuda {
  color: var(--tinta-media);
  font-size: 0.92rem;
  line-height: 1.7;
  margin-top: 0.7rem;
}
.amg-ajuste-ayuda p { margin-bottom: 0.6rem; }
.amg-ajuste-ayuda p:last-child { margin-bottom: 0; }
.amg-ajuste-ayuda strong { color: var(--tinta); font-weight: 500; }
.amg-ajuste-ayuda code {
  background: var(--panel-alto);
  color: var(--oro);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.88rem;
}

.amg-ajuste input[type="text"],
.amg-ajuste input[type="number"],
.amg-ajuste textarea,
.amg-ajuste select {
  background: var(--panel-alto);
  border: 1.5px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0.6rem 0.9rem;
  outline: none;
  transition: border-color 0.25s;
}
.amg-ajuste input:focus,
.amg-ajuste textarea:focus,
.amg-ajuste select:focus { border-color: var(--oro); }
.amg-ajuste input[type="number"] { width: 7rem; }
.amg-ajuste textarea { width: 100%; line-height: 1.6; resize: vertical; }
.amg-ajuste select { width: 100%; max-width: 30rem; cursor: pointer; }
.amg-ajuste select option { background: var(--panel); }

/* Duraciones y precios */
.amg-tarifa {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.amg-tarifa input { width: 6rem; }
.amg-tarifa span { color: var(--tinta-media); font-size: 0.92rem; }
.amg-tarifa button {
  background: none;
  border: none;
  color: var(--error);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 0.4rem;
}

/* Horario */
.amg-dia {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.45rem;
  flex-wrap: wrap;
}
.amg-dia-nombre {
  width: 6.5rem;
  color: var(--tinta);
  font-size: 0.98rem;
  text-transform: capitalize;
}
.amg-dia input[type="time"] {
  background: var(--panel-alto);
  border: 1.5px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 0.98rem;
  padding: 0.4rem 0.6rem;
  outline: none;
}
.amg-dia input[type="time"]:focus { border-color: var(--oro); }
.amg-dia.cerrado input[type="time"] { opacity: 0.35; pointer-events: none; }
.amg-dia-a { color: var(--tinta-media); font-size: 0.92rem; }

/* El contador de los SMS */
.amg-contador-sms {
  font-size: 0.88rem;
  color: var(--tinta-media);
  margin-top: 0.4rem;
}
.amg-contador-sms.pasa { color: var(--error); }
.amg-contador-sms.justo { color: #E0B96A; }

/* Avanzado */
.amg-avanzado { margin-top: 2rem; }
.amg-avanzado-titulo {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  background: var(--panel-alto);
  border: 1.5px solid transparent;
  border-radius: 12px;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.05rem;
  padding: 0.9rem 1.3rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s, background 0.2s;
}
.amg-avanzado-titulo:hover { background: #303036; }
.amg-avanzado-titulo.abierto { border-color: var(--linea); color: var(--oro); }
.amg-avanzado-titulo small { color: var(--tinta-media); font-size: 0.88rem; }
.amg-avanzado-titulo::after { content: '▾'; margin-left: auto; color: var(--tinta-media); }
.amg-avanzado-titulo.abierto::after { content: '▴'; }
#reservas-avanzado { margin-top: 0.8rem; }

.amg-restaurar {
  background: none;
  border: none;
  color: #6E675E;
  font-family: var(--sans);
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  flex-shrink: 0;
}
.amg-restaurar:hover { color: var(--oro); }

@media (max-width: 700px) {
  .amg-ajuste { padding: 1rem; }
  .amg-dia-nombre { width: 100%; }
}

/* ─── Portada y aspecto ─── */
.amg-etiqueta-suave {
  display: block;
  font-size: 0.9rem;
  color: var(--tinta-media);
  margin-bottom: 0.35rem;
}
.amg-colores { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.amg-colores label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--tinta-media);
  font-size: 0.92rem;
  cursor: pointer;
}
.amg-colores input[type="color"] {
  width: 2.8rem; height: 2.2rem;
  background: none;
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  cursor: pointer;
  padding: 2px;
}
.amg-ajuste input[type="range"] { width: 12rem; accent-color: var(--oro); vertical-align: middle; }

.amg-vista-fuentes {
  background: var(--panel-alto);
  border-radius: 10px;
  padding: 1.3rem 1.5rem;
  margin-top: 0.9rem;
}
.amg-vf-titulo {
  font-size: 2rem;
  color: var(--tinta);
  font-weight: 300;
  margin-bottom: 0.5rem;
}
.amg-vf-titulo em { color: var(--oro); font-style: italic; }
.amg-vista-fuentes p {
  color: var(--tinta-media);
  font-size: 1rem;
  line-height: 1.8;
  margin: 0;
}

/* ─── Imágenes de las páginas ─── */
.amg-hueco { margin-bottom: 1.4rem; }
.amg-hueco-nombre {
  color: var(--tinta-media);
  font-size: 0.88rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.amg-hueco-medida {
  font-size: 0.76rem;
  color: var(--oro);
  opacity: 0.85;
}
.amg-hueco-fotos {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
}
.amg-hueco-foto {
  flex: 0 0 auto;
  /* El alto lo pone el JS, con la proporción real de esa cabecera */
  width: 5.2rem;
  height: 6.5rem;
  align-self: flex-start;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #303036;
  overflow: hidden;
  cursor: pointer;
}
.amg-hueco-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.amg-hueco-foto.elegida { border-color: var(--oro); }
.amg-hueco-auto {
  color: var(--tinta-media);
  font-size: 0.78rem;
  line-height: 1.3;
  padding: 0.4rem;
}
.amg-hueco-auto.elegida { color: var(--oro); }
.amg-hueco-nada.elegida { color: var(--oro); }
.amg-hueco-subir {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--oro);
  font-size: 0.76rem;
  line-height: 1.35;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--oro) 45%, transparent);
}
.amg-hueco-subir:hover { border-color: var(--oro); }
.amg-huecos-vacio { color: var(--tinta-media); font-size: 0.9rem; line-height: 1.6; }

/* ─── Paletas ya hechas ─── */
.amg-paletas { display: block; }
.amg-paletas-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.6rem;
}
/* El nombre de cada grupo: oscuras, claras, de los diseños */
.amg-paleta-grupo {
  color: var(--tinta-media);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  margin: 1.1rem 0 0.45rem;
}
.amg-paleta-grupo:first-child { margin-top: 0; }
.amg-paleta {
  background: var(--panel-alto);
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 0.7rem 0.8rem;
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  transition: border-color 0.2s, background 0.2s;
}
.amg-paleta:hover { background: #303036; }
.amg-paleta.elegida { border-color: var(--oro); background: rgba(224,185,106,0.08); }
.amg-paleta-muestra {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}
.amg-paleta-muestra span {
  flex: 1;
  height: 1.6rem;
  border-radius: 5px;
  /* Un filo por dentro: sin él, los colores claros de las paletas nuevas
     se funden con el panel y no se ve dónde acaba cada uno. */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}
.amg-paleta b {
  display: block;
  color: var(--tinta);
  font-size: 0.98rem;
  font-weight: 500;
}
.amg-paleta small {
  display: block;
  color: var(--tinta-media);
  font-size: 0.84rem;
  line-height: 1.4;
  margin-top: 0.1rem;
}

/* ─── Lista negra ─── */
.amg-negra-nuevo { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.amg-negra-nuevo input { flex: 1; min-width: 9rem; }
.amg-negra-nuevo input:first-child { max-width: 12rem; }
.amg-negra-nuevo input {
  background: var(--panel-alto);
  border: 1.5px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0.6rem 0.9rem;
  outline: none;
}
.amg-negra-nuevo input:focus { border-color: var(--oro); }

.amg-negra {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 0.75rem 1.1rem;
  margin-bottom: 0.55rem;
}
.amg-negra:hover { border-color: var(--linea); }
.amg-negra-tel {
  color: var(--tinta);
  font-size: 1.02rem;
  font-weight: 500;
  width: 9.5rem;
  flex-shrink: 0;
}
.amg-negra-datos { flex: 1; min-width: 0; }
.amg-negra-datos input {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--tinta-media);
  font-family: var(--sans);
  font-size: 0.92rem;
  padding: 0.35rem 0.5rem;
  outline: none;
}
.amg-negra-datos input:hover { border-color: rgba(255,255,255,0.08); }
.amg-negra-datos input:focus {
  border-color: var(--oro);
  background: var(--panel-alto);
  color: var(--tinta);
}
.amg-negra-fechas {
  color: #6E675E;
  font-size: 0.82rem;
  text-align: right;
  flex-shrink: 0;
  line-height: 1.5;
}
.amg-negra-fechas b { color: var(--error); font-weight: 500; }
.amg-negra-quitar {
  background: none;
  border: none;
  color: var(--error);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0 0.3rem;
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .amg-negra { flex-wrap: wrap; }
  .amg-negra-tel { width: auto; }
  .amg-negra-fechas { text-align: left; }
}

/* ─── Privacidad ─── */
.amg-vista-aviso {
  background: var(--panel-alto);
  border-left: 3px solid var(--oro);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  color: var(--tinta-media);
  font-size: 0.95rem;
  line-height: 1.7;
}
.amg-vista-privacidad {
  background: var(--panel-alto);
  border-radius: 10px;
  padding: 1.3rem 1.5rem;
  max-height: 26rem;
  overflow-y: auto;
}
.amg-vista-privacidad h2 {
  font-size: 1.1rem;
  color: var(--oro);
  font-weight: 500;
  margin: 1.2rem 0 0.5rem;
}
.amg-vista-privacidad .pv-bloque:first-child h2 { margin-top: 0; }
.amg-vista-privacidad p {
  color: var(--tinta-media);
  font-size: 0.92rem;
  line-height: 1.75;
  margin-bottom: 0.6rem;
}
.amg-vista-privacidad .pv-bloque {
  border: none;
  padding: 0;
  margin-bottom: 1rem;
}
.amg-vista-privacidad .pv-fecha { color: #6E675E; font-size: 0.82rem; }

/* ─── Estadísticas ─── */
.amg-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.7rem;
  margin-bottom: 1rem;
}
.amg-cifra {
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  text-align: center;
}
.amg-cifra b {
  display: block;
  font-size: 1.9rem;
  color: var(--oro);
  font-weight: 400;
  line-height: 1.1;
}
.amg-cifra small {
  color: var(--tinta-media);
  font-size: 0.85rem;
}

.amg-dos-columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}
.amg-dos-columnas .amg-ajuste { margin-bottom: 0.8rem; }

/* La gráfica de barras */
.amg-grafica {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 9rem;
  padding-top: 0.5rem;
}
.amg-barra-dia {
  flex: 1;
  min-width: 3px;
  background: var(--oro);
  border-radius: 2px 2px 0 0;
  opacity: 0.75;
  transition: opacity 0.15s;
  position: relative;
}
.amg-barra-dia:hover { opacity: 1; }
.amg-barra-dia[data-cero] { background: rgba(255,255,255,0.08); }

/* Las listas con su barra proporcional */
.amg-fila-dato {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.35rem 0;
  font-size: 0.94rem;
}
.amg-fila-dato span:first-child {
  width: 8rem;
  color: var(--tinta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}
.amg-fila-barra {
  flex: 1;
  height: 0.5rem;
  background: var(--panel-alto);
  border-radius: 3px;
  overflow: hidden;
}
.amg-fila-barra div {
  height: 100%;
  background: var(--oro);
  opacity: 0.7;
  border-radius: 3px;
}
.amg-fila-dato b {
  color: var(--tinta-media);
  font-weight: 400;
  font-size: 0.9rem;
  width: 3rem;
  text-align: right;
  flex-shrink: 0;
}

.amg-horas {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 5rem;
}
.amg-hora {
  flex: 1;
  background: var(--oro);
  opacity: 0.6;
  border-radius: 2px 2px 0 0;
  min-height: 2px;
}

@media (max-width: 700px) {
  .amg-dos-columnas { grid-template-columns: 1fr; }
}

/* ─── Selector de diseños ─── */
.amg-familias {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.amg-familia {
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 100px;
  color: var(--tinta-media);
  font-family: var(--sans);
  font-size: 0.88rem;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.amg-familia:hover { color: var(--tinta); }
.amg-familia.elegida {
  border-color: var(--oro);
  background: rgba(224,185,106,0.1);
  color: var(--oro);
}

.amg-disenos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.7rem;
}
.amg-diseno {
  background: var(--panel-alto);
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  overflow: hidden;
  transition: border-color 0.2s, transform 0.15s;
}
.amg-diseno:hover { transform: translateY(-2px); }
.amg-diseno.elegido { border-color: var(--oro); }

/* Una miniatura de cómo se ve el diseño */
.amg-diseno-muestra {
  height: 5.5rem;
  padding: 0.7rem 0.8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  position: relative;
}
.amg-diseno-titulo { font-size: 1.15rem; line-height: 1; }
.amg-diseno-linea { height: 3px; border-radius: 2px; opacity: 0.55; }
.amg-diseno-boton {
  align-self: flex-start;
  font-size: 0.6rem;
  padding: 0.2rem 0.6rem;
  margin-top: 0.15rem;
}
.amg-diseno-pie {
  padding: 0.6rem 0.8rem 0.7rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.amg-diseno-pie b {
  display: block;
  color: var(--tinta);
  font-size: 0.95rem;
  font-weight: 500;
}
.amg-diseno-pie small {
  display: block;
  color: var(--tinta-media);
  font-size: 0.8rem;
  line-height: 1.45;
  margin-top: 0.15rem;
}
.amg-diseno-tocado {
  position: absolute;
  top: 0.4rem; right: 0.5rem;
  font-size: 0.68rem;
  color: var(--oro);
  background: rgba(0,0,0,0.55);
  border-radius: 20px;
  padding: 0.1rem 0.5rem;
}

/* ─── Encuadrar la imagen de un hueco ─── */
.amg-encuadrar {
  margin-left: auto;
  background: none;
  border: 1px solid color-mix(in srgb, var(--oro) 45%, transparent);
  color: var(--oro);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  font-size: 0.76rem;
  cursor: pointer;
}
.amg-encuadrar:hover { border-color: var(--oro); }
.amg-hueco-marco:empty { display: none; }
.amg-hueco-marco { margin: 0 0 0.7rem; }
.amg-marco {
  width: 100%;
  max-width: 26rem;
  overflow: hidden;
  border-radius: 8px;
  border: 1.5px solid var(--oro);
  background: #17171b;
  cursor: grab;
  touch-action: none;      /* si no, el móvil hace scroll al arrastrar */
}
.amg-marco:active { cursor: grabbing; }
.amg-marco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.amg-marco-pie {
  color: var(--tinta-media);
  font-size: 0.8rem;
  margin: 0.4rem 0 0.6rem;
}
.amg-marco-botones { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.amg-btn-flojo { opacity: 0.75; }

/* ─── El número del encuadre ─── */
.amg-hueco-codigo {
  font-size: 0.74rem;
  color: var(--tinta-media);
  border: 1px solid #3a3a44;
  border-radius: 4px;
  padding: 0.05rem 0.4rem;
}
.amg-marco-codigo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}
.amg-marco-codigo label {
  color: var(--tinta-media);
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.amg-marco-codigo input {
  background: #17171b;
  border: 1px solid #3a3a44;
  border-radius: 5px;
  color: var(--oro);
  padding: 0.3rem 0.5rem;
  font-family: inherit;
  font-size: 0.85rem;
  width: 6.5rem;
}
.amg-marco-nota {
  color: var(--tinta-media);
  font-size: 0.78rem;
  line-height: 1.4;
  flex: 1 1 14rem;
}

/* ─── Tirar una imagen subida ─── */
.amg-hueco-envase { position: relative; display: inline-flex; flex: 0 0 auto; }
.amg-hueco-tirar {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: none;
  background: #17171b;
  color: var(--tinta-media);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0 0 1px #3a3a44;
  opacity: 0;
  transition: opacity 0.12s;
}
.amg-hueco-envase:hover .amg-hueco-tirar,
.amg-hueco-tirar:focus-visible { opacity: 1; }
.amg-hueco-tirar:hover { color: #e88; box-shadow: 0 0 0 1px #e88; }
/* En el móvil no hay ratón por encima: siempre visible */
@media (hover: none) { .amg-hueco-tirar { opacity: 1; } }

/* ─── Llevarlo a todos los diseños ─── */
.amg-huecos-pie {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid #33333c;
}

/* Las dos fotos que se comparten con su pestaña */
.amg-hueco-aviso {
  font-size: 0.74rem;
  color: var(--tinta-media);
  border: 1px dashed #3a3a44;
  border-radius: 4px;
  padding: 0.05rem 0.45rem;
}