/* ══════════════════════════════════════════════════════════════
   YENI INSPIRA — Panel de administración
   Depende de styles.css (tokens, header, botones) y de agendar.css
   (los campos de formulario ya están resueltos ahí).
   ══════════════════════════════════════════════════════════════ */

.adm {
  position: relative;
  padding: var(--s5) 0 var(--s7);
  min-height: calc(100vh - var(--header-h));
  background: linear-gradient(180deg, #FBF8FE 0%, #F6F0FC 40%, var(--bg) 100%);
  overflow: hidden;
  isolation: isolate;
}
.adm__glow {
  position: absolute; top: -160px; right: -130px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(151,110,220,.28), rgba(151,110,220,0) 70%);
  filter: blur(70px); z-index: -2; pointer-events: none;
}
.adm__titulo {
  font-size: clamp(1.8rem, 8vw, 2.1rem);
  line-height: 1.1; letter-spacing: -.03em;
  text-wrap: balance;
}
.adm__titulo em { font-style: normal; color: var(--violet); }
.adm__bajada {
  margin-top: var(--s2);
  color: var(--ink-soft);
  font-size: .97rem; line-height: 1.65;
}

/* ─────────── PUERTA DE ENTRADA ─────────── */
.adm-puerta { max-width: 22rem; margin-inline: auto; text-align: center; padding-top: var(--s5); }
.adm-puerta .icono-marca { margin: 0 auto var(--s4); }
.adm-puerta__form { margin-top: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.adm-puerta__error {
  display: none;
  font-size: .86rem; font-weight: 500; color: #B4304B;
}
.adm-puerta__error.is-visible { display: block; }

/* ─────────── PANEL ─────────── */
.adm-panel { display: none; }
.adm-panel.is-visible { display: block; }

/* Pestañas */
.adm-tabs {
  display: flex; gap: .4rem;
  margin: var(--s4) 0 var(--s4);
  padding: .3rem;
  background: var(--lavender-mist);
  border: 1px solid var(--lavender);
  border-radius: 100px;
}
.adm-tab {
  flex: 1;
  min-height: 42px;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border: none; border-radius: 100px;
  background: none;
  font-family: var(--sans); font-size: .88rem; font-weight: 600;
  color: var(--violet-deep);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.adm-tab .icon { width: 17px; height: 17px; }
.adm-tab[aria-selected="true"] {
  background: var(--violet);
  color: #fff;
  box-shadow: 0 4px 14px rgba(108,74,182,.28);
}

/* Bloque de conexión con GitHub */
.adm-conexion {
  padding: var(--s3);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra);
  margin-bottom: var(--s4);
}
.adm-conexion__cabeza {
  display: flex; align-items: center; gap: .55rem;
  font-size: .9rem; font-weight: 600; color: var(--ink);
  margin-bottom: var(--s2);
}
.adm-conexion__luz {
  width: 9px; height: 9px; border-radius: 50%;
  background: #C9BEDA; flex-shrink: 0;
}
.adm-conexion__luz.is-ok { background: var(--violet); box-shadow: 0 0 0 3px rgba(108,74,182,.18); }
.adm-conexion__ayuda {
  font-size: .82rem; line-height: 1.55; color: var(--ink-soft);
  margin-top: var(--s2);
}
.adm-conexion__ayuda a { color: var(--violet); font-weight: 600; }
.adm-conexion__fila { display: flex; gap: .5rem; align-items: stretch; }
.adm-conexion__fila .campo__input { flex: 1; min-height: 46px; }

/* Lista de fichas */
.adm-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }

.adm-ficha {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra);
}
.adm-ficha__mini {
  width: 78px; flex-shrink: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--lavender);
}
.adm-ficha__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-ficha__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.adm-ficha__num {
  font-size: .68rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--violet);
}
.adm-ficha__titulo {
  font-size: .93rem; font-weight: 600; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.adm-ficha__acciones { display: flex; flex-direction: column; gap: .3rem; flex-shrink: 0; }

.adm-mini-btn {
  min-height: 34px; padding: .3rem .7rem;
  border: 1px solid var(--line); border-radius: 100px;
  background: #fff;
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  color: var(--violet-deep);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.adm-mini-btn:hover { border-color: var(--violet-soft); color: var(--violet); }
.adm-mini-btn--rojo:hover { border-color: #E0A8B4; color: #B4304B; }

.adm-vacio {
  padding: var(--s4);
  text-align: center; color: var(--ink-soft); font-size: .93rem;
  background: var(--bg-tenue);
  border: 1px dashed var(--lavender);
  border-radius: var(--r-lg);
}

/* Botón de agregar, abajo a la derecha del bloque */
.adm-agregar {
  display: flex; justify-content: flex-end;
  margin-top: var(--s4);
}
.adm-agregar .btn { width: auto; max-width: none; padding: .85rem 1.4rem; min-height: 50px; }

/* Formulario de alta/edición */
.adm-form {
  display: none;
  margin-top: var(--s4);
  padding: var(--s4) var(--s3);
  background: #fff;
  border: 1px solid var(--lavender);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-alta);
}
.adm-form.is-visible { display: block; }
.adm-form__titulo {
  font-size: 1.24rem; letter-spacing: -.02em;
  margin-bottom: var(--s3);
}
.adm-form .campo + .campo { margin-top: var(--s3); }
.adm-form__pista { font-size: .8rem; color: var(--ink-soft); margin-top: .3rem; }
.adm-form__acciones { display: flex; gap: .6rem; margin-top: var(--s4); }
.adm-form__acciones .btn { flex: 1; max-width: none; min-height: 50px; padding: .85rem 1rem; }

.btn--suave {
  background: var(--lavender-mist);
  color: var(--violet-deep);
  border: 1px solid var(--lavender);
  border-radius: 100px;
  font-weight: 600;
}
.btn--suave:hover { border-color: var(--violet-soft); }

textarea.campo__input { resize: vertical; min-height: 96px; line-height: 1.6; }

/* Vista previa de la portada elegida */
.adm-portada {
  margin-top: .5rem;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--lavender);
  background: var(--lavender);
  display: none;
}
.adm-portada.is-visible { display: block; }
.adm-portada img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }

/* Barra de publicación */
.adm-publicar {
  position: sticky; bottom: 0;
  margin-top: var(--s5);
  padding: var(--s3) 0 var(--s2);
  background: linear-gradient(180deg, rgba(255,255,255,0), var(--bg) 24%);
}
.adm-publicar .btn { width: 100%; max-width: none; }
.adm-publicar__pendiente {
  display: none;
  align-items: center; gap: .5rem;
  margin-bottom: var(--s2);
  font-size: .85rem; font-weight: 600; color: var(--violet-deep);
}
.adm-publicar__pendiente.is-visible { display: flex; }
.adm-publicar__pendiente::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); flex-shrink: 0;
}

/* Avisos del panel */
.adm-aviso {
  display: none;
  align-items: flex-start; gap: .6rem;
  margin-top: var(--s3);
  padding: .85rem 1rem;
  border-radius: var(--r-sm);
  font-size: .89rem; line-height: 1.55; font-weight: 500;
}
.adm-aviso.is-visible { display: flex; }
.adm-aviso .icon { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; }
.adm-aviso--ok    { background: var(--lavender-mist); border: 1px solid var(--lavender); color: var(--violet-deep); }
.adm-aviso--error { background: #FCF2F4; border: 1px solid #EFD3DA; color: #B4304B; }

/* ─────────── ACCESO DISCRETO DESDE EL PIE ─────────── */
.site-footer__admin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--violet-soft);
  text-decoration: none;
  opacity: .5;
  transition: opacity .2s ease, color .2s ease, border-color .2s ease;
}
.site-footer__admin:hover { opacity: 1; color: var(--violet); border-color: var(--violet-soft); }
.site-footer__admin .icon { width: 15px; height: 15px; }

.site-footer__accesos {
  display: flex; justify-content: flex-end; gap: .5rem;
  max-width: var(--col);
  margin: var(--s3) auto 0;
  padding-inline: var(--s3);
}

/* ══════════════════════════════════════════════════════════════
   PERSONAS — quiénes descargaron un recurso
   ══════════════════════════════════════════════════════════════ */
.reg-rotulo {
  display: flex; align-items: center; gap: .5rem;
  font-size: .73rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 600; color: var(--violet);
  margin-bottom: var(--s2);
}
.reg-cuenta {
  display: inline-block;
  margin-left: .4rem;
  padding: .1rem .5rem;
  background: var(--lavender-mist);
  border: 1px solid var(--lavender);
  border-radius: 100px;
  font-size: .8rem; font-weight: 600; color: var(--violet-deep);
}

.reg-lista {
  list-style: none;
  margin: var(--s5) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--s2);
}

/* Un bloque por persona: nombre, correo y de qué recurso vino */
.reg-ficha {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s3);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra);
}
.reg-ficha__inicial {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--violet);
  color: #fff;
  font-family: var(--serif); font-weight: 600; font-size: .95rem;
  letter-spacing: .02em;
}
.reg-ficha__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.reg-ficha__nombre {
  font-size: 1rem; font-weight: 600; color: var(--ink);
  line-height: 1.3;
}
.reg-ficha__mail {
  font-size: .88rem; color: var(--violet);
  text-decoration: none;
  word-break: break-all;
}
.reg-ficha__mail:hover { text-decoration: underline; }
.reg-ficha__recurso {
  margin-top: .3rem;
  font-size: .8rem; line-height: 1.4;
  color: var(--ink-soft);
  padding-left: .6rem;
  border-left: 2px solid var(--lavender);
}
.reg-ficha__fecha {
  flex-shrink: 0;
  font-size: .74rem; color: var(--ink-soft);
  text-align: right;
  line-height: 1.35;
  max-width: 6.5rem;
}

.reg-cargando, .reg-vacio, .reg-aviso {
  list-style: none;
  padding: var(--s4);
  text-align: center;
  color: var(--ink-soft);
  font-size: .93rem; line-height: 1.6;
  background: var(--bg-tenue);
  border: 1px dashed var(--lavender);
  border-radius: var(--r-lg);
}
.reg-aviso { margin-top: var(--s5); }

/* Botón "Ver personas" dentro de la pestaña de Recursos del panel */
.adm-personas {
  display: none;
  align-items: center; gap: var(--s3);
  margin-bottom: var(--s4);
  padding: var(--s3);
  background: var(--lavender-mist);
  border: 1px solid var(--lavender);
  border-radius: var(--r-lg);
  text-decoration: none; color: inherit;
  transition: border-color .25s ease, transform .25s ease;
}
.adm-personas.is-visible { display: flex; }
.adm-personas:hover { border-color: var(--violet-soft); transform: translateY(-2px); }
.adm-personas .icono-marca { --halo: var(--lavender-mist); }
.adm-personas__txt { flex: 1; display: flex; flex-direction: column; line-height: 1.4; }
.adm-personas__que { font-size: .95rem; font-weight: 600; color: var(--ink); }
.adm-personas__dato { font-size: .82rem; color: var(--ink-soft); }
.adm-personas > .icon { color: var(--violet); flex-shrink: 0; }


/* ─────────── FILTRO POR FORMULARIO ───────────
   Están todas las opciones, aunque alguna todavía no tenga a nadie.
   Bajan de renglón en vez de correrse de costado: en el celular, una
   fila que se desliza esconde las últimas opciones y nadie se entera
   de que están. */
.reg-filtro {
  display: flex; flex-wrap: wrap; gap: .42rem;
  margin-top: var(--s4);
}

.reg-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  flex-shrink: 0;
  padding: .38rem .7rem;
  font-family: var(--sans);
  font-size: .78rem; font-weight: 600;
  color: var(--violet-deep);
  background: #fff;
  border: 1.5px solid var(--lavender);
  border-radius: 100px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.reg-chip:hover { border-color: var(--violet-soft); }
.reg-chip__n {
  min-width: 1.15rem; padding: 0 .3rem;
  font-size: .72rem; line-height: 1.45;
  color: var(--violet-deep);
  background: var(--lavender-mist);
  border-radius: 100px;
  text-align: center;
}
.reg-chip.es-activo {
  background: var(--violet);
  border-color: var(--violet);
  color: #fff;
}
.reg-chip.es-activo .reg-chip__n { background: rgba(255,255,255,.24); color: #fff; }

/* Correo y teléfono: dos datos del mismo peso, uno debajo del otro */
.reg-ficha__dato {
  display: flex; align-items: center; gap: .35rem;
  font-size: .86rem; color: var(--violet);
  text-decoration: none;
  word-break: break-all;
}
.reg-ficha__dato:hover { text-decoration: underline; }
.reg-ficha__dato .icon { flex-shrink: 0; opacity: .75; }

/* ─────────── PÁGINAS ───────────
   De a doce por página: la lista nunca se hace infinita. */
.reg-pag {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin-top: var(--s4);
}
.reg-pag__nums { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: center; }
.reg-pag__n, .reg-pag__flecha {
  display: grid; place-items: center;
  min-width: 38px; height: 38px;
  padding: 0 .5rem;
  font-family: var(--sans); font-size: .88rem; font-weight: 600;
  color: var(--violet-deep);
  background: #fff;
  border: 1.5px solid var(--lavender);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.reg-pag__n:hover, .reg-pag__flecha:hover:not([disabled]) { border-color: var(--violet-soft); }
.reg-pag__n.es-activo {
  background: var(--violet); border-color: var(--violet); color: #fff;
}
.reg-pag__flecha[disabled] { opacity: .35; cursor: default; }

/* Cruz para sacar un registro. Discreta hasta que la buscás: está
   siempre, pero no compite con el nombre de la persona. */
.reg-ficha { position: relative; }
.reg-ficha__borrar {
  position: absolute; top: 6px; right: 6px;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  padding: 0;
  color: var(--ink-soft);
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: .45;
  transition: opacity .2s ease, background .2s ease, color .2s ease;
}
.reg-ficha__borrar:hover {
  opacity: 1;
  color: #B4304B;
  background: rgba(180, 48, 75, .09);
}
.reg-ficha__borrar[disabled] { cursor: default; }
/* Para que la cruz no se coma la fecha */
.reg-ficha__fecha { padding-top: 26px; }
.reg-ficha.se-va { opacity: .45; pointer-events: none; }

/* ─────────── PANEL · REFLEXIONES ───────────
   El formulario tiene dos partes numeradas —la hoja y la reflexión
   completa— para que se entienda qué va en cada lado. */
.adm-ficha__mini--rf {
  display: grid; place-items: center;
  background: #FFFDF8;
  border: 1px solid #EFE7DA;
  font-family: var(--serif);
  font-size: 2.2rem; line-height: 1;
  color: var(--gold-light);
  padding-top: .5rem;
}
.adm-ficha__borrador {
  color: #8E5A08;
  font-weight: 700;
}

.adm-rf__paso {
  display: flex; align-items: center; gap: .6rem;
  margin-top: var(--s5);
  font-family: var(--serif);
  font-size: 1.2rem; font-weight: 600;
  color: var(--ink);
}
.adm-rf__paso:first-child { margin-top: var(--s2); }
.adm-rf__paso span {
  display: grid; place-items: center;
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--violet); color: #fff;
  font-family: var(--sans); font-size: .85rem;
}
.adm-rf__explica {
  margin: .3rem 0 var(--s3);
  font-size: .88rem; line-height: 1.55;
  color: var(--ink-soft);
}
[data-rf-form] .campo + .campo { margin-top: var(--s3); }
.adm-rf__cuenta { display: flex; justify-content: space-between; gap: var(--s2); }
.adm-rf__cuenta span { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.adm-rf__cuenta .es-mucho { color: #B4304B; font-weight: 600; }

/* La hoja de muestra, sobre su propia "mesa" */
.adm-rf__vista {
  margin-top: var(--s3);
  padding: var(--s4) var(--s3) var(--s5);
  background: linear-gradient(180deg, #FBF8FE, #F3EDFA);
  border: 1px dashed var(--lavender);
  border-radius: var(--r-lg);
}
.adm-rf__vista-rotulo {
  margin-bottom: var(--s4);
  text-align: center;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--violet);
}
.adm-rf__hoja { display: flex; justify-content: center; }

.adm-rf__herramientas {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-bottom: .5rem;
}
.adm-rf__herr {
  padding: .45rem .8rem;
  font-family: var(--sans); font-size: .84rem; font-weight: 600;
  color: var(--violet-deep);
  background: var(--lavender-mist);
  border: 1px solid var(--lavender);
  border-radius: 100px;
  cursor: pointer;
}
.adm-rf__herr em { font-family: var(--serif); font-size: .95rem; }
.adm-rf__herr:hover { border-color: var(--violet-soft); background: #fff; }
.adm-rf__cuerpo {
  min-height: 380px;
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.7;
}
.adm-rf__largo { font-weight: 600; color: var(--violet-deep); }
.adm-rf__quitar { margin-top: .5rem; }

.adm-rf__borrador {
  display: flex; align-items: flex-start; gap: .6rem;
  margin-top: var(--s4);
  padding: var(--s2) var(--s3);
  background: #FFFDF8;
  border: 1px solid #EFE7DA;
  border-radius: var(--r-md);
  cursor: pointer;
  font-weight: 600; font-size: .92rem;
}
.adm-rf__borrador input { margin-top: .25rem; width: 18px; height: 18px; accent-color: var(--violet); }
.adm-rf__borrador small {
  display: block;
  font-weight: 400; font-size: .8rem;
  color: var(--ink-soft);
}

.adm-form--rf .adm-form__acciones { flex-wrap: wrap; }
.adm-form--rf .adm-rf__ver { flex-basis: 100%; }