/* ══════════════════════════════════════════════════════════════════════
   MANUAL OPERATIVO — estilos (compartidos)
   ══════════════════════════════════════════════════════════════════════
   Lo usan DOS páginas, con el mismo contenido y el mismo motor:
     · /command/carga_datos  → vista interna, dentro del Panel de Control
     · /manual               → página pública (la que cita el decreto)
   Por eso vive acá y no dentro de command.css: la página pública no tiene
   por qué arrastrar el CSS del panel entero.

   COLORES: se consumen del host por variables. Dentro del panel las define
   command.css (y cambian solas con el tema Clásico/Futurista). En la página
   pública no hay host, así que `.manual-standalone` define abajo la paleta
   institucional clara. Nunca escribir un color a mano en una regla .man-*
   que no sea el matiz de [data-theme="light"].
   ══════════════════════════════════════════════════════════════════════ */

/* Paleta de la página PÚBLICA (el panel trae la suya). Espejo del Tema
   Clásico: blanco, verde institucional #007242, Fira Sans + Outfit. */
.manual-standalone {
  --bg-primary:        #ffffff;
  --bg-card:           #eaf4ee;
  --bg-card-hover:     #dfeee6;
  --border-glass:      #cfe4d8;
  --border-glass-glow: rgba(0, 114, 66, 0.45);
  --cyan:              #007242;
  --text-primary:      #333333;
  --text-secondary:    #4f5f56;
  --text-muted:        #6d7972;
  --rose:              #e11d48;
  --font-body:         'Fira Sans', 'Inter', system-ui, sans-serif;
  --font-heading:      'Outfit', 'Fira Sans', sans-serif;
  --radius-md:         16px;
}

/* Medida de lectura, CENTRADA. En monitores grandes la vista del panel ocupa todo el
   ancho: sin tope las barras quedaban estiradísimas, y solo con tope quedaba todo pegado
   a la izquierda con un vacío enorme a la derecha.
   Se centra el ENCABEZADO junto con el cuerpo: centrar solo el cuerpo dejaba el título
   del panel desalineado respecto del texto de abajo. */
#manual-cuerpo,
#view-manual .top-header { max-width: 1012px; margin-left: auto; margin-right: auto; }

.man-stamp {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px; border-radius: 30px; font-size: 0.85rem;
  background: var(--bg-card); border: 1px solid var(--border-glass);
  color: var(--text-secondary); white-space: nowrap;
}
.man-stamp .eic { width: 15px; height: 15px; color: var(--cyan); flex-shrink: 0; }

.man-intro { padding: 26px 28px; margin-bottom: 22px; }
.man-intro h3 { font-family: var(--font-heading); font-size: 1.15rem; margin: 0 0 10px; color: var(--text-primary); }
.man-intro > p { color: var(--text-secondary); line-height: 1.65; margin: 0 0 16px; max-width: 72ch; }
.man-principios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.man-principios li {
  padding: 14px 16px; border-radius: var(--radius-md); line-height: 1.55; font-size: 0.86rem;
  background: rgba(0, 200, 83, 0.06); border: 1px solid rgba(0, 200, 83, 0.18); color: var(--text-secondary);
}
[data-theme="light"] .man-principios li { background: rgba(0, 114, 66, 0.05); border-color: rgba(0, 114, 66, 0.18); }

/* Filtro por rol */
.man-filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.man-chip {
  padding: 8px 16px; border-radius: 30px; font-size: 0.82rem; font-weight: 600; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border-glass); color: var(--text-secondary);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.man-chip:hover { border-color: var(--cyan); }
.man-chip[aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan); background: rgba(0, 200, 83, 0.10); }
[data-theme="light"] .man-chip[aria-pressed="true"] { background: rgba(0, 114, 66, 0.10); }

/* Tarjeta-acordeón de cada tarea */
.man-lista { display: flex; flex-direction: column; gap: 12px; }
.man-tarea {
  border-radius: var(--radius-md); overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--border-glass);
  transition: border-color 0.2s;
}
.man-tarea.open { border-color: rgba(0, 200, 83, 0.35); }
[data-theme="light"] .man-tarea.open { border-color: rgba(0, 114, 66, 0.35); }
.man-acc-head {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 16px 20px; background: transparent; border: none; cursor: pointer; color: var(--text-primary);
}
/* Los CONTROLES no se seleccionan: arrastrar el mouse sobre un botón pintaba el título de
   azul y la guía parecía rota. El texto del manual sí sigue seleccionable A PROPÓSITO —
   se publica bajo CC BY invitando a citarlo, y no se puede citar lo que no se puede copiar. */
.man-acc-head, .man-chip, .man-fig-btn {
  -webkit-user-select: none; user-select: none;
}
.man-acc-head:hover { background: var(--bg-card-hover); }
.man-num {
  font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.3px rgba(0, 200, 83, 0.55); flex-shrink: 0; min-width: 40px;
}
[data-theme="light"] .man-num { -webkit-text-stroke-color: rgba(0, 114, 66, 0.55); }
.man-acc-ic { flex-shrink: 0; line-height: 0; color: var(--cyan); }
.man-acc-ic .eic { width: 21px; height: 21px; }
.man-acc-tit { flex: 1; min-width: 0; }
.man-acc-tit h3 { font-family: var(--font-heading); font-size: 1.02rem; margin: 0; }
.man-acc-tit p { font-size: 0.82rem; color: var(--text-muted); margin: 3px 0 0; }
.man-roles { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.man-rol {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: 999px; border: 1px solid; white-space: nowrap;
}
.man-rol-todos { color: var(--text-muted); border-color: var(--border-glass); }
.man-rol-op    { color: var(--cyan); border-color: rgba(0, 200, 83, 0.45); }
.man-rol-sec   { color: #a855f7; border-color: rgba(168, 85, 247, 0.45); }
.man-rol-adm   { color: #f59e0b; border-color: rgba(245, 158, 11, 0.5); }
[data-theme="light"] .man-rol-sec { color: #7c3aed; }
[data-theme="light"] .man-rol-adm { color: #b45309; }
.man-acc-chev { flex-shrink: 0; line-height: 0; color: var(--text-muted); transition: transform 0.25s; }
.man-acc-chev .eic { width: 17px; height: 17px; }
.man-tarea.open .man-acc-chev { transform: rotate(180deg); }

/* Cuerpo: pasos numerados + callouts + capturas */
.man-acc-body { padding: 4px 22px 22px; }
.man-pasos { list-style: none; margin: 0; padding: 0; counter-reset: manpaso; }
.man-paso {
  counter-increment: manpaso; position: relative;
  padding: 10px 0 10px 46px; line-height: 1.6; font-size: 0.9rem; color: var(--text-secondary);
}
.man-paso::before {
  content: counter(manpaso); position: absolute; left: 0; top: 8px;
  width: 28px; height: 28px; line-height: 26px; text-align: center; font-size: 0.8rem; font-weight: 700;
  color: var(--cyan); border: 1.5px solid rgba(0, 200, 83, 0.45); border-radius: 50%;
}
[data-theme="light"] .man-paso::before { border-color: rgba(0, 114, 66, 0.45); }
.man-paso strong { color: var(--text-primary); }
.man-callout {
  display: flex; gap: 12px; align-items: flex-start; margin: 10px 0 10px 46px;
  padding: 13px 16px; border-radius: var(--radius-md); font-size: 0.85rem; line-height: 1.55; color: var(--text-secondary);
}
.man-co-ic { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; }
.man-tip   { background: rgba(0, 200, 83, 0.07); border: 1px solid rgba(0, 200, 83, 0.22); }
.man-tip .man-co-ic { color: var(--cyan); }
.man-aviso { background: rgba(245, 158, 11, 0.07); border: 1px solid rgba(245, 158, 11, 0.28); }
.man-aviso .man-co-ic { color: #f59e0b; }
[data-theme="light"] .man-tip { background: rgba(0, 114, 66, 0.05); border-color: rgba(0, 114, 66, 0.2); }
[data-theme="light"] .man-aviso { background: rgba(180, 83, 9, 0.06); }
[data-theme="light"] .man-aviso .man-co-ic { color: #b45309; }

/* Las capturas van CENTRADAS (los pasos y los avisos sí quedan indentados con el texto):
   son piezas visuales, no párrafos, y alineadas a la izquierda quedaban colgando. */
.man-figli { margin: 18px 0; }
.man-fig { margin: 0; text-align: center; }
/* La leyenda se centra como bloque pero el texto se lee alineado a la izquierda:
   centrar párrafos de dos líneas cuesta más leerlos. */
.man-fig figcaption { text-align: left; max-width: 640px; margin-left: auto; margin-right: auto; }
/* Dos capturas en fila (dónde se toca → qué se abre). En pantallas chicas se apilan.
   Base explícita + min-width:0: sin eso, el ancho natural de la leyenda infla el
   <figure> y la segunda captura se va sola a la línea de abajo. */
.man-figrow { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; justify-content: center; }
.man-figrow .man-fig { flex: 1 1 280px; min-width: 0; max-width: 420px; }
.man-figrow .man-fig-btn { max-width: 100%; }
/* Secuencia: la misma pantalla en varios momentos, apilada y ancha para poder
   compararlas sin ampliar. Sin tope de alto: son recortes bajos y anchos (un tablero). */
.man-figseq { display: flex; flex-direction: column; gap: 20px; align-items: center; }
.man-figseq .man-fig-btn { max-width: min(780px, 100%); }
.man-figseq .man-fig img { max-height: none; }
.man-figseq .man-fig figcaption { max-width: 780px; }
/* La captura es APOYO del paso, no protagonista: acotada (el lightbox la amplía al click).
   inline-block: el marco se ajusta al ancho real de la imagen (hay capturas angostas). */
.man-fig-btn {
  position: relative; display: inline-block; max-width: min(560px, 100%); padding: 0; cursor: zoom-in;
  border: 1px solid var(--border-glass); border-radius: var(--radius-md); overflow: hidden;
  background: transparent; line-height: 0; transition: border-color 0.2s;
}
.man-fig-btn:hover { border-color: var(--cyan); }
.man-fig-btn img { max-width: 100%; max-height: 420px; width: auto; height: auto; display: block; }
.man-fig-zoom {
  position: absolute; right: 10px; bottom: 10px; display: inline-flex; padding: 7px;
  border-radius: 10px; background: rgba(3, 8, 5, 0.72); color: #fff; opacity: 0; transition: opacity 0.2s;
}
.man-fig-zoom .eic { width: 15px; height: 15px; }
.man-fig-btn:hover .man-fig-zoom, .man-fig-btn:focus-visible .man-fig-zoom { opacity: 1; }
.man-fig figcaption { font-size: 0.78rem; color: var(--text-muted); margin-top: 8px; line-height: 1.5; }

/* ── Lightbox con zoom animado (FLIP) ──
   El fondo va en su PROPIA capa: así la imagen puede escalar desde la miniatura sin
   desvanecerse (parece la misma foto agrandándose, no otra que aparece encima).
   La animación la maneja manual.js con la Web Animations API: solo transform y
   opacity, que son las dos propiedades que el navegador compone en la GPU. */
.man-lb {
  position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 4vh 4vw;
}
.man-lb-bg {
  position: absolute; inset: 0;
  background: rgba(2, 6, 4, 0.93);
  /* ⚠️ SIN backdrop-filter — NO re-agregarlo. Medido: con blur(6px) la apertura corría a
     22,9 fps (43,6 ms por cuadro, 12 cuadros con tirón); sin él, 60 fps clavados y cero
     tirones. Animar opacity sobre un desenfoque de pantalla completa obliga a rehacer el
     blur en CADA cuadro. Es el mismo diagnóstico que ya habíamos hecho con las tarjetas
     del panel. Con 93% de opacidad el blur no se veía; el costo sí se sentía. */
}
/* Mientras el visor está abierto, la barra lateral del panel queda TAPADA por un fondo
   al 93%: su desenfoque no se ve, pero le costaba cuadros a la animación (medido en el
   panel: 54,9 fps con el blur de .sidebar vs 60 sin él). Se apaga solo mientras dura el
   visor, así el aspecto normal del panel no cambia en nada. */
body.man-lb-open .sidebar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

.man-lb img {
  position: relative; max-width: 100%; max-height: 82vh; border-radius: 12px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); cursor: zoom-out;
  transform-origin: top left;   /* la matemática del FLIP se apoya en este origen */
  will-change: transform;
}
.man-lb p { position: relative; color: rgba(255, 255, 255, 0.85); font-size: 0.85rem; margin: 0; max-width: 80ch; text-align: center; }
.man-lb-x {
  position: absolute; top: 18px; right: 20px; z-index: 1; padding: 10px; border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25); color: #fff;
  transition: background 0.15s, transform 0.15s;
}
.man-lb-x:hover { background: rgba(255, 255, 255, 0.2); transform: rotate(90deg); }
.man-lb-x .eic { width: 17px; height: 17px; display: block; }
/* La miniatura de origen se atenúa mientras su copia está ampliada: refuerza de dónde
   salió y a dónde vuelve. */
.man-fig-btn.is-zoomed { opacity: 0.25; }
.man-fig-btn { transition: border-color 0.2s, opacity 0.25s; }

/* ── CTA "Escribinos": botón en el panel, enlace mailto en la página pública ── */
.man-cta {
  display: inline-flex; align-items: center; gap: 9px; margin: 8px 0 4px 46px;
  padding: 11px 20px; border-radius: 30px; font-size: 0.9rem; font-weight: 700; cursor: pointer;
  color: #fff; background: var(--cyan); border: 1px solid transparent; transition: filter 0.15s, transform 0.1s;
  text-decoration: none;
}
.man-cta:hover { filter: brightness(1.06); }
.man-cta:active { transform: translateY(1px); }
.man-cta .eic { width: 16px; height: 16px; }
[data-theme="light"] .man-cta { background: #007242; }
/* Enlaces "escribinos" embebidos en el texto del manual */
.man-mail-link { color: var(--cyan); font-weight: 700; text-decoration: none; border-bottom: 1px dashed currentColor; cursor: pointer; background: none; border-top: none; border-left: none; border-right: none; padding: 0; font: inherit; }
[data-theme="light"] .man-mail-link { color: #007242; }
.man-mail-link:hover { border-bottom-style: solid; }

/* Novedades + pie + licencia */
.man-novedades { margin-top: 26px; padding: 20px 24px; border-radius: var(--radius-md); background: var(--bg-card); border: 1px solid var(--border-glass); }
.man-novedades h3 { font-family: var(--font-heading); font-size: 0.95rem; margin: 0 0 12px; color: var(--text-primary); }
.man-novedades ul { list-style: none; margin: 0; padding: 0; }
.man-novedades li { display: flex; gap: 12px; align-items: baseline; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.55; padding: 4px 0; }
.man-nov-fecha { font-weight: 700; color: var(--cyan); white-space: nowrap; font-size: 0.78rem; }
.man-pie { margin: 22px 4px 0; font-size: 0.78rem; color: var(--text-muted); line-height: 1.6; }
/* Licencia: es lo que protege la AUTORÍA (CC BY obliga a citar la fuente). */
.man-licencia {
  margin: 16px 0 0; padding: 16px 20px; border-radius: var(--radius-md);
  background: var(--bg-card); border: 1px solid var(--border-glass);
  font-size: 0.78rem; color: var(--text-muted); line-height: 1.65;
}
.man-licencia strong { color: var(--text-secondary); }
.man-licencia a { color: var(--cyan); text-decoration: none; border-bottom: 1px dashed currentColor; }
.man-licencia a:hover { border-bottom-style: solid; }

@media (max-width: 900px) {
  .man-principios { grid-template-columns: 1fr; }
  .man-roles { display: none; }             /* en móvil el rol se ve al abrir; el título manda */
  .man-acc-body { padding: 0 14px 18px; }
  .man-figli, .man-callout { margin-left: 0; }
  .man-paso { padding-left: 40px; }
}
@media (max-width: 640px) {
  .man-cta { margin-left: 0; }
}

/* ══════════════════════════════════════════════
   Envoltorio de la PÁGINA PÚBLICA (no aplica dentro del panel)
   ══════════════════════════════════════════════ */
/* El panel define border-box globalmente en command.css; esta página no lo carga,
   así que sin esto los anchos con padding se calcularían distinto en cada una. */
.manual-standalone, .manual-standalone *, .manual-standalone *::before, .manual-standalone *::after { box-sizing: border-box; }
.manual-standalone {
  margin: 0; background: var(--bg-primary); color: var(--text-primary);
  font-family: var(--font-body); -webkit-font-smoothing: antialiased;
}
/* Hilo verde institucional arriba, igual que el portal */
.manual-standalone::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0; height: 4px;
  background: var(--cyan); z-index: 50;
}

/* ── Fondo: el mismo lenguaje visual que "Estado de Datos" del panel ──
   Se REESCRIBEN acá (en vez de reusar las de command.css) porque esta página no carga
   command.css. Van scopeadas a .manual-standalone justamente porque el panel SÍ carga
   esta hoja: sin el scope, estas reglas le pisarían las suyas.
   Valores del Tema Clásico directos: esta página no tiene selector de tema. */
.manual-standalone .bg-mesh {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 15% 50%, rgba(0, 114, 66, 0.06), transparent 30%),
    radial-gradient(circle at 85% 30%, rgba(124, 58, 237, 0.04), transparent 30%);
  /* Sin filter: blur() — un desenfoque a pantalla completa se recompone en cada cuadro
     de scroll y no se percibe sobre gradientes al 6%. Misma regla que el panel. */
}
.manual-standalone .bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 114, 66, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 114, 66, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  /* La grilla se desvanece hacia los bordes: si llega al filo se lee como tabla, no como textura */
  mask-image: radial-gradient(circle at center, black, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at center, black, transparent 80%);
}
.man-top {
  border-bottom: 1px solid var(--border-glass); background: #fff;
  position: sticky; top: 0; z-index: 40;
}
.man-top-inner {
  max-width: 1060px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.man-top img { height: 42px; width: auto; display: block; }
.man-top-sep { flex: 1; }
.man-top a.man-volver {
  font-size: 0.85rem; font-weight: 600; color: var(--cyan); text-decoration: none;
  padding: 8px 16px; border-radius: 30px; border: 1px solid var(--border-glass);
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.man-top a.man-volver:hover { border-color: var(--cyan); background: rgba(0, 114, 66, 0.06); }
/* position/z-index: el contenido va POR ENCIMA de las capas de fondo (z-index 0) */
.man-wrap { max-width: 1060px; margin: 0 auto; padding: 34px 24px 70px; position: relative; z-index: 1; }
.man-hero { margin-bottom: 26px; }
/* Volanta a la izquierda y sello de actualización a la derecha, en la misma línea. */
.man-hero-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 10px;
}
.man-hero .man-kicker {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cyan); margin: 0;
}
/* Más chico que dentro del panel: acá comparte renglón con la volanta y no debe pesar
   más que ella. El fondo blanco lo despega de la grilla. */
.manual-standalone .man-stamp {
  font-size: 0.76rem; padding: 7px 14px; gap: 7px; background: #fff;
}
.manual-standalone .man-stamp .eic { width: 13px; height: 13px; }
.man-hero h1 {
  font-family: var(--font-heading); font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.15; margin: 0 0 12px; color: var(--text-primary);
}
.man-hero .man-bajada { font-size: 1rem; line-height: 1.65; color: var(--text-secondary); margin: 0; max-width: 74ch; }
@media (max-width: 640px) {
  .man-wrap { padding: 24px 16px 50px; }
  .man-top-inner { padding: 12px 16px; }
  /* En pantalla angosta el sello baja debajo de la volanta: alineado a la izquierda
     con ella, no colgado a la derecha. */
  .man-hero-top { justify-content: flex-start; }
}