/* ============================================================
   Modal del panel de administración
   ------------------------------------------------------------
   Capa: componente. Solo tokens del contrato — lo usan los
   apuntes y, enlazado tal cual, la Biblioteca (ver
   biblioteca-insight/_layout.php, "PUENTE AL CONTRATO").
   ============================================================ */

.admin-modal {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(8,8,24,.6);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  align-items: center; justify-content: center;
  padding: 20px;
}
.admin-modal.visible { display: flex; }

.admin-modal-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 36px 32px 28px;
  max-width: 380px; width: 100%;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(var(--accent-rgb),.12);
  position: relative;
  animation: admin-modal-in .22s cubic-bezier(.34,1.4,.64,1);
}
@keyframes admin-modal-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.admin-modal-box::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: linear-gradient(90deg, var(--accent-strong), var(--accent), transparent);
}

.admin-modal-cerrar {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--gray);
  cursor: pointer; transition: background var(--t), color var(--t);
}
.admin-modal-cerrar:hover,
.admin-modal-cerrar:focus-visible { background: var(--bg2); color: var(--text); }
.admin-modal-cerrar:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }
body.dark-mode .admin-modal-cerrar:focus-visible { outline-color: var(--accent); }

.admin-modal-box h2 {
  font-family: var(--font-mono);
  font-size: .78rem; letter-spacing: .04em;
  color: var(--text); margin-bottom: 18px;
  padding-right: 24px;
}

.admin-modal-opciones {
  display: flex; flex-direction: column; gap: 10px;
}
.admin-modal-item {
  display: block;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg2);
  text-decoration: none;
  transition: background var(--t), border-color var(--t), transform .15s;
}
.admin-modal-item:hover,
.admin-modal-item:focus-visible {
  background: var(--accent-dim);
  border-color: rgba(var(--accent-rgb),.4);
  transform: translateX(3px);
}
/* Mismo criterio que en usuario.css: un fondo al 8 % no es un anillo
   de foco. El contorno solido es el que cumple 3:1. */
.admin-modal-item:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: -2px;
}
body.dark-mode .admin-modal-item:focus-visible { outline-color: var(--accent); }
.admin-modal-item-titulo {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-body);
  font-size: .92rem; font-weight: 600;
  color: var(--text);
}
/* La flecha de "abre en pestana nueva". Atenuada: informa, no compite
   con el titulo. El texto equivalente vive en el aria-label. */
.admin-modal-item-ext {
  font-size: .78rem; color: var(--gray);
  transition: color var(--t);
}
.admin-modal-item:hover .admin-modal-item-ext,
.admin-modal-item:focus-visible .admin-modal-item-ext { color: var(--accent); }
.admin-modal-item-desc {
  display: block;
  font-size: .74rem; color: var(--gray);
  margin-top: 3px; line-height: 1.4;
}

@media (max-width: 420px) {
  .admin-modal-box { padding: 30px 22px 24px; }
}

/* ═══════════════════════════════════════════════════
   AVISO DE VISTA PREVIA
   ---------------------------------------------------
   Lo dibuja partials/vista-previa.php cuando un admin abre un
   apunte con ?layout=. Vive en esta hoja y no en una propia
   porque es la otra mitad de lo mismo: herramientas que solo ve
   el admin. Así no se suma un archivo más a la cascada.
═══════════════════════════════════════════════════ */
.vista-previa {
  position: fixed; z-index: 9997;
  left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--text-2);
  animation: vista-previa-in .3s cubic-bezier(.34,1.4,.64,1);
}
@keyframes vista-previa-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.vista-previa strong { color: var(--text); }
.vista-previa-punto {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.vista-previa a {
  color: var(--accent-2);
  text-decoration: underline;
  white-space: nowrap;
}
html.dark-mode .vista-previa a, body.dark-mode .vista-previa a { color: var(--accent); }
.vista-previa a:focus-visible {
  outline: 2px solid var(--accent-2); outline-offset: 2px;
}
body.dark-mode .vista-previa a:focus-visible { outline-color: var(--accent); }

/* En papel no va: es una herramienta de pantalla. */
@media print { .vista-previa { display: none !important; } }

@media (max-width: 600px) {
  .vista-previa { flex-wrap: wrap; justify-content: center; border-radius: var(--radius); }
}