/* =====================================================================
   La pestaña del Manual. Es lo único que se carga siempre, y pesa poco:
   el panel entero (manual.css + panel.js) baja recién cuando alguien lo
   abre por primera vez.

   El color sale de la Configuración de cada empresa: --navy y --gold. El
   relieve y el brillo se arman con capas translúcidas encima de ese color,
   así que una agencia con el navy en verde o en vino se ve igual de bien
   sin tocar nada aquí.

   Regla que no se negocia: NO TAPA NADA. El área de trabajo reserva a la
   derecha el ancho exacto de la pestaña, así que vive en un margen vacío.
   Y desaparece sola con una ventana abierta encima y al imprimir.
   ===================================================================== */

@media (min-width:901px){
  .main{ padding-right:52px !important; }
}

.man-tab{
  position:fixed; top:96px; right:0; z-index:140;
  display:flex; align-items:center; gap:10px;
  /* El brillo va por encima del color de la empresa, no en vez de él. */
  background:
    linear-gradient(200deg, rgba(255,255,255,.14), rgba(255,255,255,0) 58%),
    var(--navy,#17213A);
  color:#fff; border:0; cursor:pointer;
  border-radius:12px 0 0 12px;
  padding:17px 9px 17px 11px;
  font-family:inherit; font-size:10.5px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase;
  writing-mode:vertical-rl;
  box-shadow:
    -1px 0 0 rgba(255,255,255,.14) inset,
    -10px 6px 26px -14px rgba(16,24,44,.75);
  transition:transform .18s ease, right .26s ease, box-shadow .18s ease, filter .18s ease;
}
/* El filo dorado: es lo que la ata al resto del sistema. */
.man-tab::before{
  content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px;
  background:var(--gold,#B5924C); border-radius:3px;
  box-shadow:0 0 10px -1px var(--gold,#B5924C);
}
.man-tab:hover{
  transform:translateX(-3px); filter:saturate(1.08);
  box-shadow:
    -1px 0 0 rgba(255,255,255,.2) inset,
    -14px 8px 30px -14px rgba(16,24,44,.85);
}
.man-tab:active{ transform:translateX(-1px); }

/* El foco se marca por dentro, con el dorado de la empresa. Un aro por
   fuera partía la forma y se veía como un error. */
.man-tab:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 2px var(--gold,#B5924C) inset,
    -10px 6px 26px -14px rgba(16,24,44,.75);
}

.man-tab .man-tab-ico{
  writing-mode:horizontal-tb; display:grid; place-items:center;
  color:var(--gold,#B5924C);
}
.man-tab .man-tab-ico svg{ width:16px; height:16px; display:block; }
.man-tab .man-tab-dot{
  writing-mode:horizontal-tb; width:7px; height:7px; border-radius:50%;
  background:#E2503A; display:none;
  box-shadow:0 0 0 3px rgba(226,80,58,.22);
  animation:man-late 2.6s ease-in-out infinite;
}
.man-tab.man-hay .man-tab-dot{ display:block; }
@keyframes man-late{
  0%,72%,100%{ box-shadow:0 0 0 3px rgba(226,80,58,.22); }
  82%        { box-shadow:0 0 0 6px rgba(226,80,58,0); }
}

/* Con el panel abierto la pestaña viaja con él y sirve para cerrarlo. */
body.man-abierto .man-tab{ right:392px; transform:none; }
body.man-fijo    .man-tab{ display:none; }

/* Nunca encima de una ventana; nunca dentro de un documento impreso. */
body:has(.modal-bg.open) .man-tab{ display:none; }
@media print{ .man-tab{ display:none !important; } }

/* -------- teléfono: el mismo botón, redondo y abajo a la izquierda -------- */
@media (max-width:900px){
  .man-tab{
    top:auto; bottom:22px; left:18px; right:auto;
    width:48px; height:48px; padding:0; border-radius:50%;
    writing-mode:horizontal-tb; font-size:0; letter-spacing:0;
    justify-content:center; gap:0;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.12) inset,
      0 8px 22px -6px rgba(16,24,44,.55);
  }
  .man-tab::before{
    left:auto; inset:-2px; top:-2px; bottom:-2px; width:auto;
    border-radius:50%; background:none; box-shadow:none;
    border:1.5px solid var(--gold,#B5924C); opacity:.55;
  }
  .man-tab:hover{ transform:none; }
  .man-tab .man-tab-ico svg{ width:22px; height:22px; }
  .man-tab .man-tab-dot{
    position:absolute; top:0; right:0; box-shadow:0 0 0 2px #fff; animation:none;
  }
  body.man-abierto .man-tab{ right:auto; display:none; }
}

@media (prefers-reduced-motion:reduce){
  .man-tab{ transition:none; }
  .man-tab:hover{ transform:none; }
  .man-tab .man-tab-dot{ animation:none; }
}

/* ---- El "?" junto al título de cada pantalla: abre el manual en el tema de esa pantalla ---- */
.man-q{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; margin-left:9px; padding:0; vertical-align:middle;
  border-radius:50%; border:1px solid var(--border,#d9dce3); background:#fff;
  color:var(--navy,#17213A); font-size:11.5px; font-weight:700; line-height:1; font-family:inherit; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.man-q:hover,.man-q:focus-visible{ background:var(--navy,#17213A); color:#fff; border-color:var(--navy,#17213A); outline:none; }
@media print{ .man-q{ display:none !important; } }