/* «DalIA Personal»: pestaña vertical FIJA en el borde izquierdo de la pantalla (se ve en todas las slides) que abre un panel de tres pasos (acordeón). views/components/personal.php; comportamiento en js/demos/personal.js.
   Cerrado, solo se ve la pestaña (el contenedor está desplazado a la izquierda); abierto, el panel se desliza sobre la portada. Solo se muestra con JavaScript (la clase .js la pone theme-init.js).
   En pantallas angostas la pestaña es una pastilla horizontal abajo a la izquierda y el panel sube desde abajo. Clases con prefijo pp-. */
.pp { display: none; }
.js .pp {
  --pp-tab: 46px;
  display: flex;
  position: fixed;   /* fija: se ve en todas las slides; la cabecera mide 64 px */
  z-index: 31;       /* por encima del giro de página (30) y de las slides; la cabecera (20) queda fuera de su zona */
  left: 0;
  top: 76px;
  bottom: 12px;
  pointer-events: none;
  transform: translateX(calc(-100% + var(--pp-tab)));
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.js .pp.is-open { transform: none; }
.pp > * { pointer-events: auto; }

.pp-drawer {
  box-sizing: border-box;
  align-self: center;   /* mide lo que mide su contenido y se centra (no se estira a toda la altura de la portada) */
  max-height: 100%;
  width: min(400px, calc(100vw - 90px));
  overflow-y: auto;
  padding: 18px 18px 20px;
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 20px 20px 0;
  background: var(--bg);
  box-shadow: var(--shadow);
}
.pp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pp-head b { display: block; color: var(--accent); font: 800 1.15rem "Plus Jakarta Sans", sans-serif; }
.pp-head span { display: block; margin-top: 3px; color: var(--muted); font-size: 0.82rem; line-height: 1.4; }
.pp-close { display: grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--bg2); color: var(--muted); cursor: pointer; }
.pp-close:hover { border-color: var(--accent); color: var(--accent); }
.pp-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* La pestaña: el texto se lee de abajo hacia arriba; la pestaña misma no gira (así sus esquinas redondeadas quedan del lado correcto) */
.pp-tab {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: var(--pp-tab, 46px);
  padding: 16px 0;
  border: 0;
  border-radius: 0 14px 14px 0;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow);
  font: 700 0.84rem "Plus Jakarta Sans", sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.pp-tab span { white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); }
.pp-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pp-chev { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s; }
.pp.is-open .pp-chev { transform: rotate(180deg); }

/* Los tres pasos */
.pp-step { margin-bottom: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg2); transition: border-color 0.2s; }
.pp-step[open] { border-color: var(--accent); }
.pp-step summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: var(--ink); font-weight: 700; font-size: 0.92rem; cursor: pointer; list-style: none; }
.pp-step summary::-webkit-details-marker { display: none; }
.pp-step summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 14px; }
.pp-n { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--line); color: var(--ink); font-size: 0.74rem; font-weight: 800; transition: background 0.2s, color 0.2s; }
.pp-step[open] .pp-n { background: var(--accent); color: var(--accent-ink); }
.pp-body { padding: 0 14px 14px; color: var(--muted); font-size: 0.86rem; line-height: 1.5; }
.pp-body p { margin: 0 0 10px; }
.pp-label { display: block; margin: 4px 0 4px; color: var(--ink); font-size: 0.78rem; font-weight: 700; }
.pp-copyrow { display: flex; gap: 8px; margin-bottom: 10px; }
.pp-address { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: 600 0.82rem ui-monospace, "SFMono-Regular", Menlo, monospace; }
.pp-address:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.pp-copy { padding: 8px 14px; font-size: 0.82rem; }
.pp-assistants { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-assistants .btn { flex: 1; min-width: 140px; padding: 9px 12px; font-size: 0.86rem; }
.pp-status { min-height: 1.3em; margin: 8px 0 0; color: var(--teal); font-size: 0.8rem; font-weight: 700; }
.pp-note { margin: 4px 0 0; font-size: 0.78rem; }
.pp-video { display: block; width: 100%; aspect-ratio: 16 / 9; margin-top: 4px; border-radius: 12px; background: #000; }

/* Con poco ancho el margen izquierdo de la portada es menor: la pestaña se angosta para no montarse sobre el título */
@media (min-width: 861px) and (max-width: 1100px) {
  .js .pp { --pp-tab: 38px; }
  .pp-tab { font-size: 0.78rem; }
}
@media (max-width: 860px) {
  .js .pp { position: static; display: block; transform: none; }
  .pp-tab { position: fixed; z-index: 31; left: 16px; bottom: 24px; max-width: calc(50vw - 44px); flex-direction: row; align-items: center; width: auto; padding: 10px 16px 10px 12px; border-radius: 999px; }
  .pp-tab span { writing-mode: horizontal-tb; transform: none; white-space: normal; text-align: left; line-height: 1.15; }
  .pp-chev { transform: rotate(-90deg); }
  .pp.is-open .pp-chev { transform: rotate(90deg); }
  .pp-drawer {
    position: fixed;
    z-index: 30;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 82vh;
    border: 1px solid var(--line);
    border-radius: 20px 20px 0 0;
    transform: translateY(105%);
    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .pp.is-open .pp-drawer { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .pp, .pp-drawer, .pp-chev, .pp-step, .pp-n { transition: none; }
}

/* Botón del paso 2 que abre el video instructivo */
.pp-play { display: flex; width: 100%; margin-top: 8px; gap: 8px; padding: 9px 12px; font-size: 0.86rem; }
.pp-play svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }

/* Paso 2: los botones de los videos de ChatGPT y de Claude, lado a lado */
.pp-plays { display: flex; gap: 8px; margin-top: 8px; }
.pp-plays .pp-play { flex: 1; width: auto; min-width: 0; margin-top: 0; justify-content: center; }

/* Mientras se pide la ventana del video (primer clic; en celular no hay «pasar el puntero» que la adelante) el botón se ve ocupado */
.pp-play[aria-busy="true"] { opacity: 0.65; cursor: progress; }