/* ==========================================================================
   mipitch.app · mp-video.css — Lecciones en video de Daniel
   ==========================================================================
   Estilos del componente MPVideo (mp-video.js). Usa los tokens de
   design-tokens.css. Dos estados: fachada (tarjeta de lección) y abierto
   (reproductor 16:9). El reproductor puede quedar flotando (.flotante)
   mientras la persona escribe más abajo (solo escritorio).
   ========================================================================== */

.mpv{margin:12px 0 14px;}
/* Reserva la altura de la fachada mientras el script no la ha pintado (sin CLS). */
.mpv:empty{min-height:106px;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* ---------- Fachada: tarjeta de lección ---------- */
.mpv-fachada{display:flex; align-items:center; gap:14px; width:100%; text-align:left; background:var(--mp-cream); border:1.5px solid var(--mp-line); border-radius:14px; padding:10px 14px 10px 10px; cursor:pointer; font:inherit; color:var(--mp-ink); transition:border-color var(--mp-t-fast), box-shadow var(--mp-t-fast);}
.mpv-fachada:hover{border-color:var(--mp-blue); box-shadow:var(--mp-shadow-card);}
.mpv-fachada:focus-visible{outline:2px solid var(--mp-navy); outline-offset:2px; border-color:var(--mp-navy);}
.mpv-thumb{position:relative; flex:none; width:148px; aspect-ratio:16/9; border-radius:9px; overflow:hidden; background:var(--mp-navy);}
.mpv-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.mpv.sin-miniatura .mpv-thumb img{display:none;}
.mpv-play{position:absolute; inset:0; margin:auto; width:40px; height:40px; border-radius:50%; background:var(--mp-yellow); color:var(--mp-navy); display:grid; place-items:center; box-shadow:0 4px 14px rgba(74,64,52,.45); transition:transform var(--mp-t-fast);}
.mpv-play svg{margin-left:2px;}
.mpv-fachada:hover .mpv-play{transform:scale(1.08);}
.mpv-dur{position:absolute; right:6px; bottom:6px; background:rgba(51,45,36,.88); color:#fff; font-size:var(--mp-text-2xs); font-weight:700; padding:2px 6px; border-radius:5px; font-variant-numeric:tabular-nums; line-height:1.3;}
.mpv-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;}
.mpv-eyebrow{display:flex; align-items:flex-start; gap:7px; font-family:var(--mp-font-accent); font-size:1.15rem; color:var(--mp-blue); line-height:1.15;}
.mpv-avatar{width:22px; height:22px; border-radius:50%; object-fit:cover; border:1.5px solid var(--mp-yellow); flex:none; margin-top:1px;}
.mpv-tit{font-family:var(--mp-font-display); font-weight:600; color:var(--mp-navy); font-size:1.02rem; line-height:1.2; letter-spacing:-.005em;}
.mpv-sub{display:flex; flex-wrap:wrap; gap:0 6px; font-size:var(--mp-text-xs); color:var(--mp-gray-text);}
.mpv-lec::after{content:" ·";}
.mpv.visto .mpv-estado{color:var(--mp-blue); font-weight:600;}
.mpv.completo .mpv-estado{color:var(--mp-green); font-weight:600;}
.mpv.completo .mpv-estado::before{content:"✓ ";}
.mpv.completo .mpv-thumb::after{content:"✓"; position:absolute; left:6px; top:6px; width:22px; height:22px; border-radius:50%; background:var(--mp-green); color:#fff; font-size:.75rem; font-weight:800; display:grid; place-items:center; box-shadow:0 2px 6px rgba(74,64,52,.35);}

/* Variante GRANDE (hero): el póster a todo el ancho, el texto debajo. */
.mpv.grande .mpv-fachada{flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden; border-radius:16px; box-shadow:var(--mp-shadow-card);}
.mpv.grande .mpv-fachada:hover{box-shadow:var(--mp-shadow-card-active);}
.mpv.grande .mpv-thumb{width:100%; border-radius:0;}
.mpv.grande .mpv-play{width:66px; height:66px;}
.mpv.grande .mpv-play svg{width:28px; height:28px;}
.mpv.grande .mpv-dur{right:10px; bottom:10px; font-size:.78rem; padding:3px 8px;}
.mpv.grande .mpv-txt{padding:12px 16px 14px;}
.mpv.grande .mpv-tit{font-size:1.15rem;}
/* Variante COMPACTA (clips de segundos): una sola línea, sin eyebrow. */
.mpv.compacto .mpv-fachada{gap:10px; padding:6px 12px 6px 6px;}
.mpv.compacto .mpv-thumb{width:96px;}
.mpv.compacto .mpv-play{width:30px; height:30px;}
.mpv.compacto .mpv-play svg{width:14px; height:14px;}
.mpv.compacto .mpv-eyebrow{display:none;}
.mpv.compacto .mpv-tit{font-size:.95rem;}

/* ---------- Abierto: reproductor ---------- */
.mpv-cab{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 2px 8px;}
.mpv-cab-txt{display:inline-flex; align-items:center; gap:8px; font-size:.82rem; color:var(--mp-gray-text); min-width:0;}
.mpv-cab-txt b{font-family:var(--mp-font-display); font-weight:600; color:var(--mp-navy); font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mpv-cab-dur{font-variant-numeric:tabular-nums; white-space:nowrap;}
.mpv-cerrar{flex:none; background:none; border:1.5px solid var(--mp-line); border-radius:99px; width:34px; height:34px; font-size:1.25rem; line-height:1; color:var(--mp-gray-text); cursor:pointer; transition:border-color var(--mp-t-fast), color var(--mp-t-fast);}
.mpv-cerrar:hover{border-color:var(--mp-navy); color:var(--mp-navy);}
.mpv-cerrar:focus-visible{outline:2px solid var(--mp-navy); outline-offset:2px;}
.mpv-marco{position:relative; aspect-ratio:16/9; width:100%; background:var(--mp-navy); border-radius:12px; overflow:hidden; box-shadow:var(--mp-shadow-card-active);}
.mpv-marco iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block;}
.mpv-cargando{position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.82); font-size:.85rem;}
.mpv-hueco{width:100%;}
.mpv-aviso{margin:8px 0 0; font-size:.8rem; color:var(--mp-gray-text); min-height:0;}
.mpv-aviso:empty{margin:0;}
.mpv-aviso.fin{color:var(--mp-green); font-weight:600;}
/* Salida siempre disponible bajo el reproductor */
.mpv-salida{margin:8px 2px 0; font-size:var(--mp-text-xs); color:var(--mp-gray-text); display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center;}
.mpv-salida[hidden], .mpv-hueco[hidden]{display:none;}
.mpv-salida a{color:var(--mp-blue); font-weight:600; text-decoration:underline; text-underline-offset:3px;}
.mpv-salida button{background:none; border:none; padding:0; font:inherit; color:var(--mp-blue); font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer;}
.mpv-salida a:focus-visible, .mpv-salida button:focus-visible{outline:2px solid var(--mp-navy); outline-offset:2px; border-radius:4px;}

/* ---------- Tarjeta de cierre: «Ahora te toca a ti» ---------- */
.mpv-fin{position:absolute; inset:0; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; padding:16px;}
.mpv-fin::before{content:""; position:absolute; inset:0; background:rgba(51,45,36,.78);}
.mpv-fin-caja{position:relative; text-align:center; color:#fff; max-width:34ch; display:flex; flex-direction:column; gap:8px; align-items:center;}
.mpv-fin-eyebrow{font-family:var(--mp-font-accent); font-size:1.3rem; color:var(--mp-yellow); line-height:1;}
.mpv-fin-caja b{font-family:var(--mp-font-display); font-weight:600; font-size:1.15rem; line-height:1.25; letter-spacing:-.005em;}
.mpv-fin-caja p{margin:0; font-size:.85rem; color:rgba(255,255,255,.85); line-height:1.45;}
.mpv-fin-btns{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:6px;}
.mpv-btn{display:inline-flex; align-items:center; justify-content:center; border-radius:99px; padding:10px 18px; font:inherit; font-size:.85rem; font-weight:700; cursor:pointer; text-decoration:none; background:rgba(255,255,255,.14); color:#fff; border:1.5px solid rgba(255,255,255,.55); transition:background var(--mp-t-fast);}
.mpv-btn:hover{background:rgba(255,255,255,.24);}
.mpv-btn.primario{background:var(--mp-yellow); color:var(--mp-navy); border-color:var(--mp-yellow);}
.mpv-btn.primario:hover{background:var(--mp-yellow-hover);}
.mpv-btn:focus-visible{outline:2px solid #fff; outline-offset:2px;}
.mpv-fin.mpv-error .mpv-fin-caja b{font-size:1.05rem;}

/* ---------- Mini-reproductor flotante (solo escritorio) ---------- */
.mpv-marco.flotante{position:fixed; right:16px; bottom:16px; width:min(380px, calc(100vw - 32px)); z-index:70; box-shadow:0 18px 50px rgba(51,45,36,.42); animation:mpv-entra var(--mp-t-slow) ease;}
@keyframes mpv-entra{from{transform:translateY(16px); opacity:0;} to{transform:none; opacity:1;}}
.mpv-flot-btns{position:absolute; top:6px; right:6px; display:flex; gap:6px; z-index:2;}
.mpv-flot-btns button{background:rgba(51,45,36,.88); color:#fff; border:none; border-radius:99px; padding:6px 10px; font:inherit; font-size:var(--mp-text-2xs); font-weight:700; cursor:pointer; line-height:1.2;}
.mpv-flot-btns button:hover{background:var(--mp-navy);}
.mpv-flot-btns button:focus-visible{outline:2px solid #fff; outline-offset:2px;}
.mpv-flot-btns .mpv-flot-x{width:28px; padding:6px 0; font-size:.95rem;}

@media (max-width:520px){
  .mpv:empty{min-height:86px;}
  .mpv-fachada{gap:11px; padding:9px 11px 9px 9px;}
  .mpv-thumb{width:116px;}
  .mpv-play{width:34px; height:34px;}
  .mpv-eyebrow{font-size:1.05rem;}
  .mpv-tit{font-size:.95rem;}
  .mpv-fin{padding:10px;}
  .mpv-fin-eyebrow{font-size:1.1rem;}
  .mpv-fin-caja b{font-size:.98rem;}
  .mpv-btn{padding:8px 14px; font-size:.8rem;}
}
/* En móvil y tableta el reproductor nunca flota (taparía el teclado y el campo). */
@media (max-width:1023px){ .mpv-marco.flotante{position:relative; right:auto; bottom:auto; width:100%; box-shadow:var(--mp-shadow-card-active);} }
@media (prefers-reduced-motion:reduce){
  .mpv-marco.flotante{animation:none;}
  .mpv-play, .mpv-fachada{transition:none;}
}
@media print{ .mpv{display:none!important;} }