/* =========================================================================
   Ñande Táva · capa común de las presentaciones
   Sólo agrega: botón de inicio, adaptación a celular y modo edición.
   No toca ni un color, ni una animación, ni un texto de las presentaciones.
   ========================================================================= */

:root{
  --ne-azul:#1b3c8c; --ne-azul-osc:#0e1f4d; --ne-amarillo:#fbc400;
  --ne-rojo:#e1251b; --ne-blanco:#fff;
}

/* ---------- Botón para volver al inicio ---------- */
#ne-inicio{
  position:fixed; left:14px; top:14px; z-index:99000;
  display:inline-flex; align-items:center; gap:9px;
  font:700 13px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#fff; background:rgba(14,31,77,.82); border:1px solid rgba(255,255,255,.22);
  padding:10px 15px 10px 12px; border-radius:999px; cursor:pointer;
  text-decoration:none; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 8px 26px rgba(6,15,40,.35); opacity:.42; transition:opacity .25s, transform .25s;
}
#ne-inicio:hover,#ne-inicio:focus-visible{opacity:1; transform:translateY(-1px)}
#ne-inicio svg{width:15px;height:15px;flex:none}
@media (max-width:820px){ #ne-inicio{opacity:.9; padding:9px 13px 9px 10px; font-size:12px} }
@media print{ #ne-inicio{display:none} }

/* ---------- Bloque de acceso: código QR ---------- */
.ne-qr{display:block;width:100%;height:auto;border-radius:6px}
.ne-qr-caja{background:#fff;border-radius:18px;padding:16px;flex:none;
  box-shadow:0 22px 60px rgba(6,15,40,.28)}
.ne-url{
  font-family:ui-monospace,"DM Mono","Roboto Mono",Consolas,monospace;
  word-break:break-all; text-decoration:none;
}
.ne-acceso [data-ne="url"]:hover{text-decoration:underline}

/* ---------- Encuadre del lienzo ----------
   Las presentaciones tienen un lienzo fijo (1280×720, 1600×900 o 1920×1080)
   que se achica para entrar en pantalla. Estaban centradas con una rejilla y,
   cuando la pantalla era más chica que el lienzo, el navegador lo empujaba
   contra un borde: en cualquier notebook la diapositiva salía cortada.
   Con margen automático queda centrada siempre, en cualquier pantalla.       */
.ne-marco{ display:block !important; overflow:hidden; }
.ne-lienzo{
  position:absolute !important;
  left:50% !important; top:50% !important;
  right:auto !important; bottom:auto !important;
  /* el corrimiento de medio lienzo lo pone el guion, en píxeles:
     así anda también en celulares viejos */
}

/* ---------- Adaptación a celular en vertical ----------
   Las presentaciones tienen un lienzo fijo 16:9. En un celular parado eso
   queda diminuto. Giramos el lienzo para que ocupe toda la pantalla.
   No se modifica la presentación: sólo cómo se la muestra.               */
html.ne-girado, html.ne-girado body{ overflow:hidden !important; }
html.ne-girado .ne-marco{
  position:fixed; top:0; left:0; right:auto; bottom:auto;
  width:100vh; height:100vw;
  transform-origin:0 0;
  /* -100% equivale al alto del marco (100vw): así el giro cae justo
     sobre la pantalla, sin quedar corrido */
  transform:rotate(90deg) translateY(-100%);
  display:block; overflow:hidden;
  z-index:1;
}
html.ne-girado .ne-lienzo{ transform:scale(var(--ne-k,1)) !important; }

/* Aviso y botón de giro */
#ne-girar{
  position:fixed; right:14px; top:14px; z-index:99000;
  display:none; align-items:center; gap:8px;
  font:700 12px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#0e1f4d; background:var(--ne-amarillo); border:0;
  padding:10px 14px; border-radius:999px; cursor:pointer;
  box-shadow:0 8px 26px rgba(6,15,40,.35);
}
#ne-girar svg{width:14px;height:14px}
body.ne-movil-vertical #ne-girar{display:inline-flex}

#ne-aviso{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  z-index:99000; display:none; align-items:center; gap:10px;
  max-width:min(92vw,420px);
  font:600 12.5px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#fff; background:rgba(14,31,77,.94); border:1px solid rgba(255,255,255,.2);
  padding:12px 16px; border-radius:14px; box-shadow:0 14px 40px rgba(6,15,40,.45);
  animation:ne-entra .45s cubic-bezier(.2,.8,.3,1) both;
}
#ne-aviso.ver{display:flex}
#ne-aviso b{color:var(--ne-amarillo)}
#ne-aviso button{margin-left:auto;background:rgba(255,255,255,.16);border:0;color:#fff;
  border-radius:8px;padding:7px 11px;font:700 11px/1 inherit;cursor:pointer;flex:none}
@keyframes ne-entra{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- Modo edición de textos ---------- */
html.ne-editando #ne-barra-edicion{display:flex}
#ne-barra-edicion{
  position:fixed; left:0; right:0; top:0; z-index:99500; display:none;
  align-items:center; gap:12px; padding:9px 14px;
  background:linear-gradient(90deg,var(--ne-azul-osc),var(--ne-azul));
  color:#fff; font:600 12.5px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  box-shadow:0 6px 24px rgba(6,15,40,.4); border-bottom:2px solid var(--ne-amarillo);
}
#ne-barra-edicion .pt{display:inline-flex;align-items:center;gap:7px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:11px;color:var(--ne-amarillo)}
#ne-barra-edicion .ay{opacity:.82;font-weight:500}
#ne-barra-edicion .der{margin-left:auto;display:flex;gap:8px;align-items:center}
#ne-barra-edicion button{
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2); color:#fff;
  border-radius:9px; padding:8px 13px; font:700 12px/1 inherit; cursor:pointer;
}
#ne-barra-edicion button.pri{background:var(--ne-amarillo);color:#0e1f4d;border-color:transparent}
#ne-barra-edicion button:hover{filter:brightness(1.08)}
#ne-barra-edicion .cambios{background:rgba(251,196,0,.2);color:var(--ne-amarillo);
  border-radius:999px;padding:5px 11px;font-weight:800;font-size:11px}

html.ne-editando [data-ne-editable]{
  outline:1.5px dashed rgba(251,196,0,.75); outline-offset:2px; cursor:text; border-radius:3px;
}
html.ne-editando [data-ne-editable]:hover{
  outline:2px solid var(--ne-amarillo); background:rgba(251,196,0,.14);
}
html.ne-editando [data-ne-editable][contenteditable="true"]{
  outline:2px solid var(--ne-amarillo); background:rgba(251,196,0,.2);
}
html.ne-editando [data-ne-cambiado]{ outline-color:#1ea672; }
html.ne-editando #ne-inicio{top:52px}
html.ne-editando #ne-girar{top:52px}