/* Administración: acceso al editor y editor (#editar). Va el último, como en el original. */
/* ---------- Acceso al editor: solo existe en un dispositivo reconocido como administrador ---------- */
/* «Editar» junto a «Índice», con su misma pastilla. En la portada, donde Índice no se enseña, Editar ocupa su sitio.
   En la historia se ocultan los dos, como siempre Índice.
   Escritorio: dos pastillas, una al lado de la otra.
   Móvil, tableta y aplicación instalada: una cápsula compartida partida por un filete, «Índice | Editar»: dos botones
   distintos (cada mitad es el suyo), que caben junto a «Nuestro mapa / desde el…» sin partirlo. Con el ancho solo
   cambian el aire y el icono, nunca la letra:
     ≥ 600 px       como las pastillas de siempre;
     400–599 px     iconos de 12 px y menos relleno (Android grandes, iPhone Plus y Pro Max);
     < 400 px       solo texto (iPhone 14/15, iPhone SE, Android de 360 px). */
.cabecera-der { display: flex; align-items: flex-start; gap: 8px; flex: none; }
body.modo-intro .cabecera-der #abrir-indice { display: none; }
body.modo-intro .boton-editar { visibility: visible; opacity: 1; pointer-events: auto; }
body.editando .boton-editar, body.viendo-victoria .boton-editar { display: none !important; }
@media (max-width: 879px) {
  /* Si aun así no cupieran (por ejemplo, sin la tipografía), se parte la firma: nunca se montan. */
  .cabecera.con-editar .cabecera-izq { min-width: 0; }
  .cabecera-der {
    gap: 0; margin-left: -4px;
    background: var(--papel); border: 1px solid var(--linea); border-radius: 999px;
    box-shadow: 0 2px 10px rgba(42,35,30,.1);
    transition: opacity .4s;
  }
  .cabecera-der .boton-indice { position: relative; background: none; border: 0; box-shadow: none; }
  .cabecera-der .boton-editar::before { content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; border-left: 1px solid var(--linea); }
  body.modo-intro .cabecera-der .boton-editar::before { display: none; }
  body.modo-historia .cabecera-der { visibility: hidden; opacity: 0; pointer-events: none; }
  body.editando .cabecera-der, body.viendo-victoria .cabecera-der { box-shadow: none; }
}
@media (max-width: 599px) {
  .cabecera-der .boton-indice { gap: 5px; padding: 8px 9px 8px 10px; }
  .cabecera-der .boton-editar { padding: 8px 10px 8px 9px; }
  .cabecera-der .boton-indice svg { width: 12px; height: 12px; }
}
@media (max-width: 399px) {
  .cabecera-der .boton-indice svg { display: none; }
  .cabecera-der .boton-indice, .cabecera-der .boton-editar { padding: 8px; }
}

/* ---------- Editor (#editar) ---------- */
.editor {
  position: fixed; z-index: 50; inset: 0;
  background: var(--papel);
  display: flex; flex-direction: column;
  font-size: 1rem;
}
@media (min-width: 880px) {
  .editor { left: auto; width: 460px; border-left: 1px solid var(--linea); box-shadow: var(--sombra); }
}
.editor[hidden] { display: none; }
.ed-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 18px 12px;
  border-bottom: 1px solid var(--linea);
}
.ed-cab b { font-weight: 400; font-style: italic; font-size: 1.3rem; }
.ed-pestanas { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--linea); overflow-x: auto; scrollbar-width: none; }
.ed-pestanas button {
  background: none; border: 0; border-bottom: 2px solid transparent; padding: 12px 10px 10px;
  font-family: var(--serif); font-size: 1rem; color: var(--tinta-2); white-space: nowrap;
}
.ed-pestanas button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--rojo); }
.ed-cuerpo { flex: 1; overflow-y: auto; grid-auto-rows: max-content; padding: 18px 18px calc(env(safe-area-inset-bottom, 0px) + 40px); display: grid; gap: 16px; align-content: start; }
.ed-cuerpo h3 { margin: 0; font-weight: 400; font-size: 1.5rem; line-height: 1.15; }
.ed-cuerpo p { margin: 0; }
.ed-nota { color: var(--tinta-2); font-size: .95rem; }
.ed-fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ed-campo { display: grid; gap: 6px; min-width: 0; }
.ed-campo > span { font-family: var(--serif); font-size: .98rem; font-style: italic; color: var(--tinta-2); }
.ed-campo input:not([type="checkbox"]), .ed-campo select, .ed-campo textarea {
  width: 100%; box-sizing: border-box;
  background: #fff; border: 1px solid var(--linea); border-radius: 8px;
  padding: 10px 12px; font-size: 1rem; line-height: 1.4;
}
.ed-campo textarea { min-height: 92px; resize: vertical; }
.ed-campo input:focus, .ed-campo select:focus, .ed-campo textarea:focus { outline: none; border-color: var(--tinta-3); box-shadow: 0 0 0 3px rgba(157,59,43,.12); }
.ed-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ed-check { display: flex; gap: 10px; align-items: flex-start; font-size: .98rem; }
.ed-check input { margin-top: 4px; accent-color: var(--rojo); }
.ed-boton {
  background: var(--papel); border: 1px solid var(--linea); border-radius: 999px;
  padding: 7px 14px; font-family: var(--serif); font-size: .98rem; color: var(--tinta);
}
.ed-boton:hover { border-color: var(--tinta-3); }
.ed-boton.fuerte { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.ed-boton.peligro { color: var(--rojo); border-color: rgba(157,59,43,.35); }
.ed-boton:disabled { opacity: .45; cursor: default; }
.ed-lista { display: grid; }
.ed-item {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline;
  background: none; border: 0; border-bottom: 1px solid var(--linea); padding: 11px 0; text-align: left; width: 100%;
}
.ed-item b { font-weight: 400; font-size: 1.08rem; min-width: 0; }
.ed-item i { color: var(--tinta-2); font-size: .9rem; grid-column: 1; min-width: 0; }
.ed-marcas { display: flex; gap: 4px; grid-row: 1; grid-column: 2; flex-wrap: wrap; justify-content: flex-end; }
.ed-marca { font-family: var(--serif); font-size: .82rem; font-style: italic; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--linea); color: var(--tinta-2); white-space: nowrap; }
.ed-marca.aviso { border-color: rgba(157,59,43,.4); color: var(--rojo); }
.ed-marca.oscuro { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.ed-bloque { border: 1px solid var(--linea); border-radius: 12px; padding: 14px; display: grid; gap: 12px; background: var(--tierra); }
.ed-bloque > .ed-fila:first-child { justify-content: space-between; }
.ed-subir { position: relative; overflow: hidden; display: inline-flex; }
.ed-subir input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ed-confirmar { background: #f3e2dc; border-radius: 10px; padding: 12px; display: grid; gap: 10px; }
.ed-registro { min-height: 3em; font-family: var(--serif); font-size: .78rem; line-height: 1.6; background: var(--tierra); border: 1px solid var(--linea); border-radius: 8px; padding: 10px 12px; white-space: pre-wrap; max-height: 220px; overflow: auto; }
.ed-coords { font-family: var(--serif); font-size: .85rem; color: var(--tinta-2); }
.ed-orden { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.ed-orden .num { color: var(--tinta-3); font-size: .8rem; width: 2ch; text-align: right; }
.ed-orden .ed-fila { gap: 4px; }
.ed-orden .ed-boton { padding: 5px 9px; }
.ed-sep { border: 0; border-top: 1px solid var(--linea); margin: 4px 0; }

/* Elegir un punto en el mapa */
.mira { position: fixed; z-index: 45; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); pointer-events: none; }
.mira::before, .mira::after { content: ""; position: absolute; background: var(--rojo); }
.mira::before { left: 21px; top: 0; width: 2px; height: 44px; }
.mira::after { top: 21px; left: 0; height: 2px; width: 44px; }
.mira span { position: absolute; inset: 14px; border: 2px solid var(--rojo); border-radius: 50%; background: rgba(247,242,231,.4); }
.barra-mira {
  position: fixed; z-index: 46; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  background: var(--papel); border: 1px solid var(--linea); border-radius: 16px; box-shadow: var(--sombra);
  padding: 14px 16px; display: grid; gap: 10px; max-width: 520px; margin: 0 auto;
}
body.eligiendo .cabecera, body.eligiendo .filtros, body.eligiendo .pastilla-borrador { opacity: 0; pointer-events: none; }

/* ---------- Editor de álbum: acciones, secciones y fotos ---------- */
.ed-acciones { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--linea); }
.ed-accion {
  background: none; border: 0; border-right: 1px solid var(--linea);
  padding: 13px 6px 12px; font-family: var(--serif); font-size: 1rem; color: var(--tinta); line-height: 1.2;
}
.ed-accion:last-child { border-right: 0; }
.ed-accion span { color: var(--rojo); margin-right: 2px; }
.ed-accion:hover { background: var(--tierra); }
.ed-migas { margin-bottom: -6px; }
.ed-migas .ed-boton { border-color: transparent; padding-left: 0; color: var(--tinta-2); background: none; }
.ed-seccion { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--linea); }
.ed-seccion h4 { margin: 0; font-weight: 400; font-style: italic; font-size: 1.15rem; color: var(--tinta); }
.ed-seccion h4 + .ed-nota { margin-top: -8px; }
.ed-vacio { color: var(--tinta-3); font-style: italic; font-size: .95rem; padding: 6px 0; }
.ed-mini {
  background: none; border: 0; padding: 4px 0; font-family: var(--serif); font-size: .88rem;
  color: var(--tinta-2); text-decoration: underline; text-decoration-color: var(--linea); text-underline-offset: 3px;
}
.ed-mini:hover { color: var(--tinta); text-decoration-color: currentColor; }
.ed-mini.peligro { color: var(--rojo); }
.ed-mini:disabled { opacity: .35; }
.ed-orden .ed-mini { padding: 4px 6px; text-decoration: none; font-size: 1rem; }

.ed-fotos { border-radius: 0; transition: background .2s; }
.ed-fotos.ed-soltar { background: var(--tierra); outline: 2px dashed var(--terracota); outline-offset: 6px; }
.ed-fotos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 14px 10px; }
.ed-foto { margin: 0; display: grid; gap: 6px; align-content: start; cursor: grab; touch-action: manipulation; }
.ed-foto-img { position: relative; }
.ed-foto-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: var(--linea); border-radius: 3px; pointer-events: none; }
.ed-foto:first-child { grid-column: span 2; }
.ed-foto:first-child .ed-foto-img img { aspect-ratio: 3 / 2; }
.ed-principal {
  position: absolute; left: 8px; bottom: 8px;
  background: rgba(251,248,241,.94); color: var(--tinta); font-style: italic; font-size: .82rem;
  padding: 2px 9px; border-radius: 999px;
}
.ed-foto input {
  width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--linea); background: transparent;
  padding: 4px 0; font-family: var(--serif); font-style: italic; font-size: .92rem; color: var(--tinta); border-radius: 0;
}
.ed-foto input:focus { outline: none; border-bottom-color: var(--tinta-3); }
.ed-foto .ed-fila { gap: 12px; }
.ed-fantasma { opacity: .35; }
.sortable-chosen .ed-foto-img img { box-shadow: 0 8px 22px rgba(42,35,30,.22); }
.ed-resultados { display: grid; border-top: 1px solid var(--linea); max-height: 260px; overflow-y: auto; }
.ed-resultados .ed-item i { grid-column: 1 / -1; }

/* Ver como lo verá Victoria: una barra fina, lejos de la ficha */
.barra-victoria {
  position: fixed; z-index: 60; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 10px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100vw - 24px); box-sizing: border-box;
  background: var(--tinta); color: var(--papel); border-radius: 999px; padding: 6px 6px 6px 18px;
  font-style: italic; font-size: .95rem; box-shadow: var(--sombra);
}
.barra-victoria .ed-boton.fuerte { background: var(--papel); color: var(--tinta); border-color: var(--papel); white-space: nowrap; }
body.viendo-victoria .cabecera { padding-top: calc(env(safe-area-inset-top, 0px) + 60px); }
@media (max-width: 520px) { .barra-victoria { font-size: .85rem; padding-left: 14px; gap: 8px; } }

/* ---------- Estado, edición de varios, copias, sugerencias ---------- */
.ed-entre { justify-content: space-between; }
.ed-hecho { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; background: var(--tierra); border-radius: 8px; padding: 9px 12px; font-style: italic; }
.ed-item-sel { grid-template-columns: auto 1fr auto; cursor: pointer; }
.ed-item-sel input { grid-row: 1 / span 2; align-self: center; width: 20px; height: 20px; accent-color: var(--rojo); margin: 0; }
.ed-item-sel i { grid-column: 2; }
.ed-item-sel .ed-marcas { grid-column: 3; }
.ed-masivo {
  position: sticky; bottom: calc(-40px - env(safe-area-inset-bottom, 0px)); margin: 0 -18px calc(-40px - env(safe-area-inset-bottom, 0px));
  background: var(--papel); border-top: 1px solid var(--tinta); padding: 14px 18px calc(env(safe-area-inset-bottom, 0px) + 18px);
  display: grid; gap: 12px; box-shadow: 0 -8px 20px rgba(42,35,30,.06);
}
.ed-masivo-campos { display: grid; gap: 8px; }
.ed-masivo select, .ed-masivo input:not([type="checkbox"]) { width: 100%; box-sizing: border-box; background: #fff; border: 1px solid var(--linea); border-radius: 8px; padding: 9px 11px; font-size: 1rem; font-family: var(--serif); }
.ed-masivo input[aria-invalid="true"] { border-color: var(--rojo); }
.ed-confirmar ul { margin: 0; padding-left: 1.2em; }
.ed-salud { display: grid; border-top: 1px solid var(--linea); }
.ed-salud details { border-bottom: 1px solid var(--linea); }
.ed-salud summary, .ed-salud-ok { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; list-style: none; cursor: pointer; font-size: 1.05rem; }
.ed-salud summary::-webkit-details-marker { display: none; }
.ed-salud summary::before { content: "›"; color: var(--tinta-3); margin-right: 8px; display: inline-block; transition: transform .15s; }
.ed-salud details[open] summary::before { transform: rotate(90deg); }
.ed-salud summary span:first-child { flex: 1; }
.ed-salud .num { font-style: italic; color: var(--rojo); }
.ed-salud-ok { cursor: default; color: var(--tinta-2); border-bottom: 1px solid var(--linea); }
.ed-salud-ok .num { color: var(--oliva); }
.ed-salud .ed-lista { padding: 0 0 10px 18px; }
.ed-sugerencia { background: #f1ece0; border-left: 2px solid var(--oliva); padding: 10px 12px; display: grid; gap: 8px; }
.ed-sugerencia p { font-style: italic; }
.ed-enlace-directo { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin: -4px 0 0 !important; }
.ed-enlace-directo code { font-family: var(--serif); font-size: .95rem; background: var(--tierra); padding: 1px 6px; border-radius: 4px; word-break: break-all; }
.ed-confirmar li::first-letter, .ed-bloque li::first-letter { text-transform: uppercase; }
/* Móvil estrecho: las seis pestañas caben sin desplazarse. */
@media (max-width: 440px) {
  .ed-pestanas { padding: 0 4px; gap: 0; justify-content: space-between; }
  .ed-pestanas button { padding: 12px 5px 10px; font-size: .93rem; }
  .ed-accion { font-size: .95rem; padding: 12px 4px 11px; }
}

/* ---------- Lo que verá Victoria (recuerdos dentro del lugar) ---------- */
.ed-victoria { background: var(--tierra); border-top: 2px solid var(--tinta); margin: 0 -18px; padding: 16px 18px 18px; }
.ed-victoria > h4 { font-size: 1.3rem; }
.ed-rec-campos { display: grid; gap: 14px; }
.ed-victoria .ed-campo input:not([type="checkbox"]), .ed-victoria .ed-campo select, .ed-victoria .ed-campo textarea { background: #fffdf8; }
.ed-campo textarea.ed-auto { overflow: hidden; resize: none; font-family: var(--serif); font-size: 1.05rem; line-height: 1.55; }
.ed-campo textarea.ed-largo { line-height: 1.65; min-height: 220px; }
.ed-acordeon { display: grid; border-top: 1px solid var(--linea); }
.ed-acordeon details { border-bottom: 1px solid var(--linea); }
.ed-acordeon summary { list-style: none; cursor: pointer; padding: 13px 0; display: flex; gap: 10px; align-items: baseline; font-size: 1.08rem; }
.ed-acordeon summary::-webkit-details-marker { display: none; }
.ed-acordeon summary::before { content: "›"; color: var(--rojo); display: inline-block; width: .8em; transition: transform .15s; }
.ed-acordeon details[open] summary::before { transform: rotate(90deg); }
.ed-acordeon summary .t { flex: 1; }
.ed-acordeon summary i { color: var(--tinta-2); font-size: .9rem; }
.ed-acordeon details[open] { padding-bottom: 18px; }
.ed-acordeon details[open] summary { font-style: italic; }

/* Enlace de Google Maps: propuesta antes de guardar */
.ed-propuesta { border-left: 2px solid var(--oliva); background: #f1ece0; padding: 10px 12px; display: grid; gap: 8px; }
.ed-propuesta-mal { border-left-color: var(--rojo); background: #f6e9e4; }

/* Almacenamiento */
.ed-alm-fila { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding: 7px 0; border-bottom: 1px solid var(--linea); }
.ed-alm-fila b { font-weight: 400; font-variant-numeric: tabular-nums; }
.ed-alm-fila i { grid-column: 1 / -1; color: var(--tinta-2); font-size: .88rem; }

/* ---------- Historia: cada capítulo se abre para escribirlo ---------- */
/* La edición es una galerada de la tarjeta pública: misma barra de progreso, mismo «Capítulo IV · 4 de 21»,
   el título con el cuerpo del título y el texto con el del texto. Lo que se escribe ya se ve como lo leerá Victoria. */
.ed-caps { display: grid; }
.ed-cap > .ed-orden { padding: 2px 0; }
.ed-cap-fila { display: grid; gap: 1px; min-width: 0; min-height: 44px; align-content: center; text-align: left; background: none; border: 0; padding: 6px 0; color: inherit; }
.ed-cap-fila b { font-weight: 400; font-size: 1.06rem; line-height: 1.3; }
.ed-cap-fila b::before { content: "›"; display: inline-block; width: .9em; color: var(--rojo); transition: transform .15s; }
.ed-cap.abierto .ed-cap-fila b::before { transform: rotate(90deg); }
.ed-cap-fila i { color: var(--tinta-2); font-size: .9rem; padding-left: .9em; }
span.ed-cap-fila b::before { content: ""; }
.ed-cap.abierto { background: var(--tierra); margin: 0 -18px; padding: 0 18px; border-bottom: 1px solid var(--linea); }
.ed-cap.abierto > .ed-orden { border-bottom: 0; }
.ed-cap.abierto .ed-cap-fila i { font-style: italic; }
.ed-cap-panel { display: grid; gap: 14px; padding: 4px 0 22px; scroll-margin-top: 8px; }
.ed-cap-base { font-size: .95rem; color: var(--tinta-2); }
.ed-cap-base b { font-weight: 400; color: var(--tinta); }
.ed-galerada {
  background: var(--papel); border: 1px solid var(--linea); border-radius: 18px 18px 6px 6px;
  padding: 0 18px 20px; display: grid; gap: 16px; overflow: hidden;
  box-shadow: 0 -4px 18px rgba(42,35,30,.05);
}
.ed-progreso { height: 2px; background: var(--linea); margin: 0 -18px; }
.ed-progreso i { display: block; height: 100%; background: var(--rojo); }
.ed-galerada .capitulo-cab { padding-right: 0; margin-top: -4px; }
.ed-galerada > :first-child:not(.ed-progreso) { margin-top: 18px; }
.ed-cap-fuera { font-style: italic; color: var(--rojo); font-size: .95rem; }
.ed-cap-campo { gap: 4px; }
.ed-cap-campo > label { font-size: .86rem; font-style: italic; color: var(--tinta-3); }
.ed-galerada textarea.ed-auto {
  width: 100%; box-sizing: border-box; min-height: 0;
  background: transparent; border: 0; border-bottom: 1px solid var(--linea); border-radius: 0;
  padding: 4px 0 6px; overflow: hidden; resize: none;
  font-family: var(--serif); color: var(--tinta); font-size: var(--t-m); line-height: 1.5;
}
.ed-galerada textarea.ed-auto:focus { outline: none; border-color: var(--rojo); box-shadow: none; }
.ed-galerada textarea.ed-auto::placeholder { color: var(--tinta-3); opacity: .8; }
.ed-galerada textarea.ed-cap-titulo { font-size: var(--t-xl); line-height: 1.1; letter-spacing: -.015em; font-variation-settings: "opsz" 60; }
.ed-galerada textarea.ed-cap-subtitulo { font-style: italic; color: var(--tinta-2); }
.ed-galerada textarea.ed-cap-texto {
  min-height: 11.5em; padding: 10px 12px; line-height: 1.55;
  background: #fffdf8; border: 1px solid var(--linea); border-radius: 6px;
}
.ed-galerada textarea.ed-cap-texto:focus { border-color: var(--tinta-3); box-shadow: 0 0 0 3px rgba(157,59,43,.12); }
.ed-galerada .ed-nota { font-size: .86rem; }
.ed-cap-acciones { justify-content: space-between; }
@media (pointer: coarse) {
  .ed-cap-orden .ed-mini { min-width: 44px; min-height: 44px; }
  .ed-cap-acciones .ed-boton, #ed-dispositivo .ed-boton, #ed-conexion .ed-boton { min-height: 44px; padding-left: 16px; padding-right: 16px; }
  .ed-galerada textarea.ed-cap-texto { font-size: 1.0625rem; }  /* 17px: iOS no amplía la página al escribir */
}
@media (max-width: 440px) {
  .ed-galerada { padding: 0 14px 18px; }
  .ed-progreso { margin: 0 -14px; }
  .ed-cap-acciones .ed-boton { flex: 1 1 auto; }
}

/* Conexión con GitHub y este dispositivo */
.ed-conexion-estado { font-size: .95rem; background: var(--tierra); border-left: 2px solid var(--oliva); padding: 8px 12px; }
.ed-conexion-estado.falta { border-left-color: var(--rojo); }
.ed-conexion-estado b { font-weight: 400; font-style: italic; }
#gh-msg:empty { display: none; }