/* ═══════════════════════════════════════════════════════════
   Panel de administración — Boda Lidia & David
   (se carga junto a styles.css y reutiliza su paleta)
   ═══════════════════════════════════════════════════════════ */

.admin-body { background: var(--marfil); }

/* ── Pantalla de bloqueo ──────────────────────────────────── */

.lock {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 2rem 1.5rem;
  background: var(--crema);
}

.lock__box {
  width: min(400px, 100%);
  text-align: center;
  background: var(--crema);
  border: 1px solid var(--dorado-claro);
  box-shadow: inset 0 0 0 6px var(--crema), inset 0 0 0 7px rgba(197, 165, 90, .4),
              0 24px 60px -24px rgba(74, 93, 67, .35);
  padding: 3rem 2.4rem 2.6rem;
}

.lock__icon {
  width: 44px; height: 44px;
  margin: 0 auto 1.2rem;
  color: var(--dorado);
}

.lock__box h1 {
  font-family: var(--f-serif);
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--verde-oscuro);
}

.lock__sub {
  font-size: .9rem;
  color: var(--tinta-suave);
  margin: .3rem 0 1.4rem;
}

.lock__box input[type="password"] {
  width: 100%;
  padding: .8rem 1rem;
  font-family: var(--f-sans);
  font-size: 1rem;
  letter-spacing: .15em;
  text-align: center;
  border: 1px solid var(--salvia-suave);
  background: #fff;
  color: var(--tinta);
  margin-bottom: 1.1rem;
}

.lock__box input[type="password"]:focus {
  outline: none;
  border-color: var(--dorado);
}

.lock__error {
  color: #A34A3C;
  font-size: .88rem;
  margin-top: 1rem;
}

.lock__back {
  display: inline-block;
  margin-top: 1.6rem;
  font-size: .82rem;
  letter-spacing: .08em;
  color: var(--tinta-suave);
  text-decoration: none;
}

.lock__back:hover { color: var(--verde-oscuro); }

/* versión visible: permite saber al instante si el servidor/navegador
   está sirviendo la última copia del panel */
.lock__version {
  margin-top: 1.4rem;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--salvia-suave);
}

/* ── Barra del panel ──────────────────────────────────────── */

.panel__bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .8rem;
  padding: .9rem clamp(1.2rem, 4vw, 3rem);
  background: var(--verde-oscuro);
  color: var(--crema);
  box-shadow: 0 6px 24px rgba(62, 58, 51, .25);
}

.panel__title {
  font-family: var(--f-serif);
  font-size: 1.25rem;
  letter-spacing: .06em;
}

.panel__actions {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.panel__status {
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--salvia-suave);
}

.panel__status--dirty { color: var(--dorado-claro); }

.panel__exit {
  font-size: .82rem;
  letter-spacing: .1em;
  color: var(--salvia-suave);
  text-decoration: none;
}

.panel__exit:hover { color: var(--crema); }

.panel__hint {
  max-width: 860px;
  margin: 1.6rem auto 0;
  padding: 1rem 1.4rem;
  font-size: .92rem;
  color: var(--tinta-suave);
  background: var(--crema);
  border: 1px dashed var(--dorado-claro);
}

.panel__hint code {
  font-size: .85em;
  background: var(--marfil);
  padding: .1em .4em;
  border: 1px solid var(--salvia-suave);
}

/* ── Botones del panel ────────────────────────────────────── */

.btn--gold {
  background: var(--dorado);
  border-color: var(--dorado);
  color: #fff;
}

.btn--gold:hover, .btn--gold:focus-visible {
  background: var(--verde-oscuro);
  border-color: var(--verde-oscuro);
  color: var(--crema);
}

.btn--ghost {
  background: transparent;
  border-color: var(--salvia-suave);
  color: var(--tinta-suave);
}

.btn--ghost:hover, .btn--ghost:focus-visible {
  background: var(--marfil);
  border-color: var(--tinta-suave);
  color: var(--tinta);
}

.btn--mini {
  font-size: .68rem;
  padding: .55rem 1.2rem;
  letter-spacing: .18em;
  background: var(--crema);
}

/* ── Sección historia dentro del panel ────────────────────── */

.story--admin { padding-top: clamp(2.5rem, 5vw, 4rem); }

.story--admin .admin-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  justify-self: end;
}

.story--admin .story__item--reverse .admin-photo {
  order: 2;
  justify-self: start;
}

.story--admin .story__text .btn--mini { margin-top: 1.1rem; }

@media (max-width: 880px) {
  .story--admin .admin-photo,
  .story--admin .story__item--reverse .admin-photo {
    order: 0;
    justify-self: center;
  }
}

/* marca de "foto nueva sin exportar" */
.admin-photo--dirty .arch { box-shadow: 0 0 0 3px var(--dorado), 0 22px 45px -22px rgba(74, 93, 67, .35); }

/* ── Galería dentro del panel ─────────────────────────────── */

.admin-gallery__grid {
  max-width: var(--ancho);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
}

.admin-gallery__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
}

.admin-gallery__thumb {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--dorado-claro);
  background: var(--marfil);
}

.admin-gallery__thumb--normal { aspect-ratio: 3 / 2; }
.admin-gallery__thumb--tall { aspect-ratio: 5 / 7; }

.admin-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-gallery__thumb--dirty { box-shadow: 0 0 0 3px var(--dorado); }

.admin-gallery__tag {
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* ── Modales ──────────────────────────────────────────────── */

.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(42, 48, 38, .8);
  overflow-y: auto;
}

.modal[hidden] { display: none; }

.modal__card {
  width: min(480px, 100%);
  max-height: 92svh;
  overflow-y: auto;
  background: var(--crema);
  border: 1px solid var(--dorado-claro);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  padding: 2rem 1.8rem 1.6rem;
}

.modal__card--wide { width: min(880px, 100%); }

.modal__title {
  font-family: var(--f-serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--verde-oscuro);
  text-align: center;
}

.modal__sub {
  font-size: .88rem;
  color: var(--tinta-suave);
  text-align: center;
  margin: .4rem auto 1.4rem;
  max-width: 42ch;
}

.modal__buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.6rem;
}

.modal__range {
  display: grid;
  grid-template-columns: 92px 1fr 58px;
  align-items: center;
  gap: .8rem;
  font-size: .82rem;
  letter-spacing: .06em;
  color: var(--tinta-suave);
  margin-top: 1rem;
}

.modal__range input[type="range"] { accent-color: var(--dorado); width: 100%; }
.modal__range output { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Posicionador de foto (marco en arco) ─────────────────── */

.positioner {
  position: relative;
  width: min(320px, 80vw);
  aspect-ratio: 10 / 13;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 999px 999px 0 0;
  background: var(--marfil);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.positioner:active { cursor: grabbing; }

.positioner img {
  position: absolute;
  top: 0; left: 0;
  transform-origin: 0 0;
  max-width: none;
  pointer-events: none;
}

.positioner__frame {
  position: absolute;
  inset: 0;
  border: 2px solid var(--dorado);
  border-radius: 999px 999px 0 0;
  pointer-events: none;
}

/* variante para la galería: marco rectangular, no en arco.
   El aspect-ratio real (normal o vertical) lo fija admin.js en línea,
   según el hueco de la rejilla que ocupe cada foto. */
.positioner--rect,
.positioner--rect .positioner__frame {
  border-radius: 4px;
}

.positioner--rect { width: min(360px, 84vw); }

/* fondo crema visible en el hueco cuando el zoom baja del 100% y la
   foto deja de cubrir el marco entero */
.positioner { background: var(--crema); }

/* ── Selector de forma del marco (marco ajustable) ────────── */

.frame-presets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin: 0 0 1.2rem;
}

.frame-preset {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: .5rem .8rem;
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--tinta-suave);
  background: var(--marfil);
  border: 1px solid var(--salvia-suave);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.frame-preset:hover { border-color: var(--dorado); color: var(--tinta); }

.frame-preset--activo {
  border-color: var(--dorado);
  background: var(--crema);
  color: var(--verde-oscuro);
  box-shadow: inset 0 0 0 1px var(--dorado);
}

.frame-preset__swatch {
  width: 22px;
  border: 1.4px solid currentColor;
}

/* ── Editor de texto ──────────────────────────────────────── */

.texteditor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  margin-top: 1.4rem;
}

@media (max-width: 720px) {
  .texteditor { grid-template-columns: 1fr; }
}

.texteditor__form label {
  display: block;
  font-size: .8rem;
  letter-spacing: .08em;
  color: var(--tinta-suave);
  margin-bottom: .9rem;
}

.texteditor__form label small { letter-spacing: 0; }

.texteditor__form input[type="text"],
.texteditor__form textarea,
.texteditor__form select {
  display: block;
  width: 100%;
  margin-top: .3rem;
  padding: .55rem .7rem;
  font-family: var(--f-sans);
  font-size: .95rem;
  color: var(--tinta);
  background: #fff;
  border: 1px solid var(--salvia-suave);
}

.texteditor__form textarea { resize: vertical; line-height: 1.5; }

.texteditor__form input:focus,
.texteditor__form textarea:focus,
.texteditor__form select:focus {
  outline: none;
  border-color: var(--dorado);
}

.texteditor__check {
  display: flex !important;
  align-items: center;
  gap: .5rem;
}

.texteditor__check input { accent-color: var(--dorado); }

.texteditor__preview-label {
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dorado);
  margin-bottom: .6rem;
}

.texteditor__preview-box {
  background: var(--crema);
  border: 1px dashed var(--dorado-claro);
  padding: 1.4rem 1.5rem;
  min-height: 260px;
}

.texteditor__preview-box .story__year {
  display: inline-block;
  font-family: var(--f-script);
  font-size: 2rem;
  color: var(--dorado);
  line-height: 1;
  margin-bottom: .4rem;
}

.texteditor__preview-box h3 {
  font-family: var(--f-serif);
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--verde-oscuro);
  margin-bottom: .7rem;
}

.texteditor__preview-box p {
  color: var(--tinta-suave);
  white-space: pre-line;
}

/* ── Resumen de exportación ───────────────────────────────── */

.export-info {
  font-size: .92rem;
  color: var(--tinta-suave);
  margin-top: 1rem;
}

.export-info ul {
  margin: .8rem 0 .8rem 1.2rem;
}

.export-info li { margin-bottom: .45rem; }

.export-info code {
  font-size: .85em;
  background: var(--marfil);
  padding: .1em .4em;
  border: 1px solid var(--salvia-suave);
}