/* ==========================================================================
   Demo — laboratorio de extracción
   ========================================================================== */

.phead-plain{padding-bottom:clamp(28px,4vw,52px);}
.phead-plain::after{
  content:'';position:absolute;left:0;right:0;top:0;height:100%;z-index:-1;
  background:radial-gradient(72% 100% at 22% 0%,rgba(70,130,180,.20) 0%,rgba(70,130,180,0) 68%);
}

.lab{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:rgba(255,255,255,.03);}

/* pestañas */
.lab-tabs{display:flex;overflow-x:auto;border-bottom:1px solid var(--line);background:rgba(6,13,20,.5);-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.lab-tabs::-webkit-scrollbar{display:none;}
.lab-tab{
  display:flex;align-items:center;gap:.5rem;padding:.95rem 1.2rem;white-space:nowrap;
  font-size:.85rem;font-weight:500;color:var(--fg-dim);border-bottom:2px solid transparent;
  transition:color .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease);
}
.lab-tab svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;}
.lab-tab:hover{color:var(--fg);background:rgba(255,255,255,.03);}
.lab-tab.is-on{color:#fff;border-bottom-color:var(--secondary);background:rgba(255,255,255,.05);}

.lab-body{padding:clamp(16px,2.4vw,26px);}
.lab-meta{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-bottom:1rem;}

.lab-text{
  width:100%;display:block;background:rgba(6,13,20,.6);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;color:var(--fg);font-family:var(--font-body);font-size:.95rem;line-height:1.65;
  resize:vertical;min-height:180px;transition:border-color .22s var(--ease);
}
.lab-text:focus{outline:none;border-color:var(--secondary);}
.lab-actions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-top:1rem;}
#lab-status{min-height:1.2em;}

/* salida */
.lab-out{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,2.4vw,30px);
  margin-top:clamp(20px,3vw,34px);
}
@media(max-width:1000px){.lab-out{grid-template-columns:1fr;}}
.lab-marked-wrap,.lab-cards-wrap{min-width:0;}
.lab-marked-wrap h2,.lab-cards-wrap h2{margin-bottom:.85rem;display:flex;align-items:baseline;gap:.6rem;}
.lab-cards-wrap h2 .mono{color:var(--fg-dim);font-size:.75rem;}

.legend{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.9rem;}
.lg{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:.22rem .55rem;border-radius:4px;}
.lg-act{background:rgba(106,180,240,.2);color:#8ec8f7;}
.lg-when{background:rgba(242,200,78,.18);color:#f2c84e;}
.lg-eur{background:rgba(92,206,160,.18);color:#5ccea0;}
.lg-who{background:rgba(168,142,240,.2);color:#bda7f5;}

.lab-marked{
  border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;
  background:rgba(6,13,20,.55);font-size:.95rem;line-height:1.85;white-space:pre-wrap;
  max-height:520px;overflow:auto;
}
.lab-marked mark{
  background:transparent;color:inherit;padding:.06em .2em;border-radius:3px;
  animation:markIn .5s var(--ease-out) both;
}
@keyframes markIn{from{background-size:0 100%;opacity:.45;}to{opacity:1;}}
.lab-marked .m-act{background:rgba(106,180,240,.24);box-shadow:inset 0 -2px 0 #6ab4f0;color:#fff;}
.lab-marked .m-when{background:rgba(242,200,78,.2);box-shadow:inset 0 -2px 0 #f2c84e;color:#fff;}
.lab-marked .m-eur{background:rgba(92,206,160,.2);box-shadow:inset 0 -2px 0 #5ccea0;color:#fff;}
.lab-marked .m-who{background:rgba(168,142,240,.24);box-shadow:inset 0 -2px 0 #a88ef0;color:#fff;}

/* tarjetas de compromiso */
.lab-cards{display:flex;flex-direction:column;gap:12px;}
.lab-card{
  border:1px solid var(--line);border-left:2px solid var(--secondary);border-radius:0 var(--r) var(--r) 0;
  padding:16px 18px;background:rgba(255,255,255,.035);
  animation:cardIn .55s var(--ease-out) both;
}
@keyframes cardIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.lab-card.lc-dudoso{border-left-color:var(--warn);}
.lab-card-h{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.55rem;flex-wrap:wrap;}
.lab-card-h .mono{font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);}
.lab-card-t{font-family:var(--font-heading);font-weight:600;font-size:1rem;color:#fff;line-height:1.35;letter-spacing:-.015em;}
.lab-card dl{display:grid;grid-template-columns:auto 1fr;gap:.3rem .85rem;margin:.85rem 0 0;font-size:.84rem;}
.lab-card dt{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim);padding-top:.3em;}
.lab-card dd{margin:0;color:var(--fg-mid);}
.lab-card dd.na{color:var(--warn);font-style:italic;}
.lab-quote{
  margin-top:.9rem;padding:.55rem 0 0 .8rem;border-left:2px solid rgba(255,255,255,.16);
  font-size:.83rem;line-height:1.5;color:var(--fg-dim);font-style:italic;
}
.conf-row{display:flex;align-items:center;gap:.5rem;margin-top:.85rem;}
.conf-bar{flex:1;height:4px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden;}
.conf-bar i{display:block;height:100%;border-radius:3px;background:var(--ok);transition:width .7s var(--ease);}
.conf-bar.low i{background:var(--warn);}
.conf-num{font-family:var(--font-mono);font-size:.72rem;color:var(--fg-mid);}

.lab-empty{border:1px dashed var(--line-2);border-radius:var(--r);padding:26px 22px;text-align:center;color:var(--fg-dim);font-size:.9rem;}

.lnk{display:inline-flex;align-items:center;gap:.35rem;margin-top:1rem;padding-block:.35rem;font-size:.85rem;font-weight:600;color:var(--accent);box-shadow:inset 0 -1px 0 currentColor;}
.lnk:hover{color:var(--primary-btn);}

/* ---------- El micrófono de la demo ---------- */
.lab-rec{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:'btn meter timer' 'status status status' 'privacy privacy privacy';
  align-items:center;gap:.7rem 1rem;
  margin-bottom:1rem;padding:1rem 1.1rem;
  border:1px solid var(--line);border-radius:var(--r);
  background:rgba(255,255,255,.02);
}
.rec-btn{
  grid-area:btn;display:inline-flex;align-items:center;gap:.6rem;
  padding:.6rem 1.1rem;border-radius:999px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.04);
  color:var(--fg);font-size:.82rem;font-weight:600;
  transition:background .22s var(--ease),border-color .22s var(--ease);
}
.rec-btn:hover:not(:disabled){background:rgba(255,255,255,.08);border-color:var(--secondary);}
.rec-btn:disabled{opacity:.55;cursor:progress;}
.rec-dot{width:11px;height:11px;border-radius:50%;background:var(--late);flex:none;}
.rec-btn.is-rec{border-color:var(--late);background:rgba(242,139,147,.12);}
.rec-btn.is-rec .rec-dot{animation:rec-pulse 1.4s var(--ease) infinite;}
@keyframes rec-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.78);}}

.rec-meter{
  grid-area:meter;display:flex;align-items:center;gap:3px;height:34px;min-width:0;
}
.rec-meter i{
  flex:1 1 0;min-width:2px;max-width:5px;height:100%;border-radius:2px;
  background:linear-gradient(180deg,var(--secondary),var(--primary));
  transform:scaleY(.12);transform-origin:50% 50%;
  transition:transform .08s linear;
}
.rec-timer{grid-area:timer;font-size:.76rem;color:var(--fg-dim);white-space:nowrap;}
.rec-status{grid-area:status;margin:0;color:var(--fg-mid);min-height:1.2em;}
.rec-privacy{grid-area:privacy;margin:0;color:var(--fg-dim);}

@media(max-width:560px){
  .lab-rec{grid-template-columns:auto 1fr;grid-template-areas:'btn timer' 'meter meter' 'status status' 'privacy privacy';}
  .rec-timer{text-align:right;}
}
@media(prefers-reduced-motion:reduce){
  .rec-meter i{transition:none;}
  .rec-btn.is-rec .rec-dot{animation:none;}
}