/* ───────────────────────────────────────────────────────────
   Jungla Digital — [jd_term], reproductor de terminal.
   La ventana es SIEMPRE oscura (estética terminal) en ambos modos;
   en Selva resalta como "ventana", en Consola se funde con el tema.
   ─────────────────────────────────────────────────────────── */

.jd-term{margin:2em 0;border:1px solid #1d4631;border-radius:12px;overflow:hidden;background:#06120A;font-family:var(--font-mono)}
:root[data-mode="consola"] .jd-term{border-radius:0;border-color:color-mix(in srgb,#34E07A 35%,transparent)}

/* barra superior */
.jd-term__bar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#0A1B11;border-bottom:1px solid #143524;margin:0}
.jd-term__dots{display:inline-flex;gap:6px}
.jd-term__dots i{width:11px;height:11px;border-radius:99px;background:#1d4631}
.jd-term__dots i:first-child{background:#FF5E3A}
.jd-term__dots i:nth-child(2){background:#C3FF01}
.jd-term__dots i:last-child{background:#34E07A}
.jd-term__title{flex:1;font-size:12.5px;color:#5E8870;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jd-term__play{background:none;border:1px solid #1d4631;border-radius:99px;color:#D6E8DC;font-family:var(--font-mono);font-size:12px;padding:4px 12px;cursor:pointer;transition:border-color .15s,color .15s;flex-shrink:0}
.jd-term__play:hover{border-color:#34E07A;color:#34E07A}
.jd-term__play:focus-visible{outline:2px solid #34E07A;outline-offset:2px}
:root[data-mode="consola"] .jd-term__play{border-radius:4px}

/* cuerpo: pantalla + panel GUI opcional (lado a lado en desktop) */
.jd-term--vsgui .jd-term__body{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(180px,1fr)}
.jd-term__gui{order:2;padding:16px 18px;border-left:1px dashed #143524;font-size:13px}
.jd-term__gui-head{display:block;color:#5E8870;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.jd-term__gui ol{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:8px;color:#8FB79E}
.jd-term__gui li{transition:color .3s,opacity .3s}
.jd-term__gui li.is-done{color:#5E8870;opacity:.75;text-decoration:line-through;text-decoration-color:#FF5E3A;text-decoration-thickness:1.5px}
@media (max-width:760px){
  .jd-term--vsgui .jd-term__body{grid-template-columns:1fr}
  .jd-term__gui{order:0;border-left:0;border-bottom:1px dashed #143524}
}

/* pantalla */
.jd-term__screen{margin:0;border:0;padding:18px 20px;overflow-x:auto;background:transparent;font-size:14.5px;line-height:1.75}
.jd-term__screen code{font-family:inherit;background:none;padding:0;color:#D6E8DC;display:block}
.jd-term__line{display:block;white-space:pre-wrap;word-break:break-word}
.jd-term__prompt{color:#34E07A;font-weight:700}
.jd-term__line--cmd .jd-term__typed{color:#D6E8DC}
.jd-term__line--out{color:#8FB79E}
.jd-term__line--comment{color:#5E8870;font-style:italic}

/* las teclas NO se marcan inline (romperían la palabra completada:
   "cd Documentos/" debe quedar continuo, como en una terminal real).
   Su historia la cuentan el menú de opciones y la franja de abajo. */
.jd-term__key{display:none}

/* menú de autocompletado (tras Tab): opciones con la elegida resaltada */
.jd-term__menu{display:block;padding:4px 0 4px 1.55em;font-size:13px;color:#5E8870}
.jd-term__menu[hidden]{display:none} /* el display:block de arriba pisaría el hidden del UA */
.jd-term__menu.is-in{animation:jdMenuIn .22s ease}
@keyframes jdMenuIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.jd-term__menu-opt{display:inline-block;margin-right:20px}
.jd-term__menu-opt.is-sel{background:#34E07A;color:#06120A;padding:1px 8px;border-radius:4px;font-weight:700}

/* ── franja "Teclas de esta sesión" (abajo de la ventana) ── */
.jd-term__keys{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 16px;border-top:1px dashed #143524;background:#0A1B11}
.jd-term__keys-label{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#5E8870}
.jd-term__keys-chip{font-family:inherit;font-size:13px;line-height:1;color:#8FB79E;background:#06120A;border:1px solid #1d4631;border-bottom-width:3px;border-radius:7px;padding:7px 12px;white-space:nowrap;transition:color .2s,border-color .2s,opacity .2s}
.jd-term__keys-chip.is-used{color:#C3FF01;border-color:#34E07A}
.jd-term__keys-chip.is-hit{animation:jdKeyHit .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes jdKeyHit{
  0%{transform:translateY(2px) scale(.92);background:#C3FF01;color:#06120A}
  100%{transform:none;background:#06120A}
}
.jd-term__keys-count{margin-left:6px;font-size:11px;color:#34E07A}
[data-seg="fill"].is-flash{animation:jdFillFlash .5s ease}
@keyframes jdFillFlash{from{background:#C3FF01;color:#06120A}to{background:transparent;color:inherit}}
@media (prefers-reduced-motion:reduce){
  .jd-term__key.is-pop,[data-seg="fill"].is-flash{animation:none}
}

/* estados de animación (solo con JS activo) */
.jd-term__line.is-hidden{display:none}
.jd-term__line.is-typing .jd-term__typed::after{content:"▋";color:#34E07A;animation:jdTermBlink .8s steps(1) infinite;margin-left:1px}
@keyframes jdTermBlink{50%{opacity:0}}

/* comparativa GUI vs CLI */
.jd-term__vs{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0;padding:11px 16px;border-top:1px dashed #143524;font-size:13px;color:#5E8870}
.jd-term__vs-gui{text-decoration:line-through;text-decoration-color:#FF5E3A;text-decoration-thickness:1.5px}
.jd-term__vs-cli{color:#C3FF01;font-weight:700}
.jd-term__vs-sep{color:#34E07A}
.jd-term__vs:not(.is-on){opacity:0}
.jd-term__vs.is-on{opacity:1;transition:opacity .4s ease}

@media (prefers-reduced-motion:reduce){
  .jd-term__vs{opacity:1 !important}
  .jd-term__line.is-hidden{display:block}
}
@media (max-width:520px){
  .jd-term__screen{padding:14px;font-size:13px}
}