/* Subtítulos (overlay): ventana PiP, página /subs (OBS, proyector) y vista previa de Ajustes */
@font-face { font-family: "Poppins"; src: url("/static/assets/fonts/Poppins-Regular.ttf") format("truetype"); font-weight: 400; }
@font-face { font-family: "Poppins"; src: url("/static/assets/fonts/Poppins-Medium.ttf") format("truetype"); font-weight: 500; }
@font-face { font-family: "Poppins"; src: url("/static/assets/fonts/Poppins-SemiBold.ttf") format("truetype"); font-weight: 600; }

.ovl {
  --ovl-size: 30px; --ovl-lh: 1.32; --ovl-lines: 2;
  --ovl-color: #FFFFFF; --ovl-src: #B4C6DD; --ovl-bg: rgba(3, 31, 70, .72);
  box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  padding: 14px 26px; border-radius: 16px; background: var(--ovl-bg);
  font-family: var(--ovl-font, "Poppins"), "Segoe UI", system-ui, sans-serif; color: var(--ovl-color);
  transition: opacity .6s ease; overflow: hidden;
}
.ovl.fill { position: fixed; inset: 0; border-radius: 0; }
.ovl.hidden { opacity: 0; }
.ovl * { box-sizing: border-box; }
.ovl-src {
  display: flex; justify-content: flex-start; overflow: hidden; white-space: nowrap;
  font-size: calc(var(--ovl-size) * .56); line-height: 1.3; color: var(--ovl-src); opacity: .95;
}
.ovl-src span { flex: none; }
.ovl-src.over { justify-content: flex-end; }              /* no cabe: se ve el final (lo último dicho) */
.ovl-src.rtl { direction: rtl; }
.ovl.align-center .ovl-src:not(.over) { justify-content: center; }
.ovl-src:empty { display: none; }
.ovl-main {
  position: relative; overflow: hidden; flex: none;
  height: calc(var(--ovl-size) * var(--ovl-lh) * var(--ovl-lines));
  font-size: var(--ovl-size); line-height: var(--ovl-lh);
  /* la línea que sale por arriba se desvanece */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--ovl-size) * .55));
          mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--ovl-size) * .55));
}
.ovl-text { position: absolute; left: 0; right: 0; bottom: 0; will-change: transform; }
.ovl-text.roll { transition: transform .26s cubic-bezier(.2, .7, .2, 1); }
.ovl-text p { margin: 0; text-align: start; text-shadow: 1.5px 2px 3px rgba(0, 0, 0, .75); overflow-wrap: anywhere; }
.ovl.align-center .ovl-text p { text-align: center; }
.ovl-src span, .ovl-text p { unicode-bidi: plaintext; }