/* RC31 — módulo audiovisual profesional de fonética */
.phonetics-video-library,
.phonetics-letter-video-panel {
  min-width: 0;
  border: 1px solid rgba(226,189,67,.30);
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 0%,rgba(226,189,67,.13),transparent 34%),
    linear-gradient(145deg,rgba(31,34,43,.98),rgba(8,9,13,.99));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07),0 14px 30px rgba(0,0,0,.24);
}

.phonetics-video-library { padding: 16px; }
.phonetics-video-library-header {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 16px;
  align-items: start;
  margin-bottom: 14px;
}
.phonetics-video-library-header h3 { margin: 4px 0 7px; color:#f6f7fb; font-size:clamp(19px,3vw,25px); line-height:1.15; }
.phonetics-video-library-header p { margin:0; max-width:72ch; color:#aeb4c1; font-size:12.5px; line-height:1.5; }
.phonetics-video-progress {
  min-width: 92px;
  display:grid;
  justify-items:center;
  gap:1px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(242,201,76,.42);
  color:#171208;
  background:linear-gradient(145deg,#ffe47b,#d39a10);
  box-shadow:0 7px 18px rgba(212,169,31,.18);
}
.phonetics-video-progress strong { font-size:19px; line-height:1; }
.phonetics-video-progress span { font-size:9px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }

.phonetics-video-toolbar { display:grid; gap:10px; margin-bottom:13px; }
.phonetics-video-search {
  min-height:46px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 13px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(255,255,255,.045);
}
.phonetics-video-search .ui-icon { width:18px; height:18px; color:#d9bb54; flex:0 0 auto; }
.phonetics-video-search input {
  min-width:0;
  width:100%;
  border:0;
  outline:0;
  color:#f6f7fb;
  background:transparent;
  font:inherit;
  font-size:13px;
}
.phonetics-video-search input::placeholder { color:#7f8795; }
.phonetics-video-filter { display:flex; flex-wrap:wrap; gap:7px; }
.phonetics-video-filter button {
  min-height:38px;
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  color:#cbd0da;
  background:linear-gradient(145deg,rgba(49,53,65,.96),rgba(15,17,22,.98));
  font:inherit;
  font-size:10.5px;
  font-weight:850;
  cursor:pointer;
}
.phonetics-video-filter button.selected {
  color:#171208;
  border-color:#f0c84b;
  background:linear-gradient(145deg,#ffe47b,#d49c12);
}

.phonetics-video-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:11px;
}
.phonetics-video-preview {
  min-width:0;
  padding:0;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 1fr;
  border:1px solid rgba(255,255,255,.11);
  border-radius:18px;
  color:inherit;
  background:linear-gradient(145deg,rgba(38,41,51,.98),rgba(10,11,15,.99));
  box-shadow:0 10px 24px rgba(0,0,0,.23);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:transform .17s ease,border-color .17s ease,box-shadow .17s ease;
}
.phonetics-video-preview:hover { transform:translateY(-2px); border-color:rgba(242,201,76,.52); box-shadow:0 15px 30px rgba(0,0,0,.31); }
.phonetics-video-preview:active { transform:scale(.985); }
.phonetics-video-preview:focus-visible { outline:3px solid #f2c94c; outline-offset:3px; }
.phonetics-video-preview[hidden] { display:none !important; }
.phonetics-video-preview-media {
  position:relative;
  display:block;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#050608;
}
.phonetics-video-preview-media img { width:100%; height:100%; display:block; object-fit:cover; object-position:center 30%; transition:transform .25s ease; }
.phonetics-video-preview:hover img { transform:scale(1.025); }
.phonetics-video-preview-shade { position:absolute; inset:0; background:linear-gradient(180deg,transparent 46%,rgba(0,0,0,.72)); }
.phonetics-video-play {
  position:absolute;
  left:50%; top:50%;
  width:48px; height:48px;
  display:grid; place-items:center;
  transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,.55);
  border-radius:50%;
  color:#171208;
  background:linear-gradient(145deg,#ffe785,#d49c12);
  box-shadow:0 8px 20px rgba(0,0,0,.32);
}
.phonetics-video-play .ui-icon { width:23px; height:23px; margin-left:2px; }
.phonetics-video-duration {
  position:absolute; right:8px; bottom:8px;
  padding:4px 7px;
  border-radius:999px;
  color:#fff;
  background:rgba(0,0,0,.72);
  font-size:9.5px;
  font-weight:900;
}
.phonetics-video-complete-badge {
  position:absolute; left:8px; top:8px;
  display:none;
  align-items:center;
  gap:4px;
  padding:5px 7px;
  border-radius:999px;
  color:#092f19;
  background:#9ae6b4;
  font-size:9px;
  font-weight:900;
}
.phonetics-video-complete-badge .ui-icon { width:12px; height:12px; }
.phonetics-video-preview.is-complete .phonetics-video-complete-badge { display:flex; }
.phonetics-video-preview-copy { min-width:0; display:grid; align-content:start; gap:7px; padding:11px 12px 13px; }
.phonetics-video-preview-title { color:#f5f7fb; font-size:13px; font-weight:900; line-height:1.3; }
.phonetics-video-preview-description { color:#aeb4c1; font-size:11.5px; line-height:1.42; }
.phonetics-video-preview-meta { display:flex; align-items:center; justify-content:space-between; gap:7px; color:#9ea5b3; font-size:9.5px; }
.phonetics-video-preview-meta b { color:#e3c45c; font-size:11px; }
.phonetics-video-preview.is-compact { grid-template-columns:112px minmax(0,1fr); grid-template-rows:1fr; }
.phonetics-video-preview.is-compact .phonetics-video-preview-media { height:100%; aspect-ratio:4/3; }
.phonetics-video-preview.is-compact .phonetics-video-preview-description { display:none; }
.phonetics-video-preview.is-compact .phonetics-video-play { width:38px; height:38px; }
.phonetics-video-preview.is-compact .phonetics-video-play .ui-icon { width:18px; height:18px; }

.phonetics-video-empty { margin:13px 0 0; padding:16px; border:1px dashed rgba(255,255,255,.15); border-radius:14px; color:#aeb4c1; text-align:center; }
.phonetics-letter-video-panel { display:grid; gap:11px; margin-top:12px; padding:13px; }
.phonetics-video-focus-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.phonetics-video-focus-header strong { display:block; margin-top:4px; color:#f5f7fb; font-size:13px; }
.phonetics-video-focus-letter {
  min-width:48px; height:48px;
  display:grid; place-items:center;
  border-radius:15px;
  color:#171208;
  background:linear-gradient(145deg,#ffe47b,#d49c12);
  font-size:21px;
  font-weight:950;
}
.phonetics-video-variants { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:8px; }
.phonetics-video-method { margin:0; color:#aeb4c1; font-size:11.5px; line-height:1.45; }

.pronunciation-video-modal {
  position:fixed;
  inset:0;
  z-index:100000;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(2,3,6,.84);
  backdrop-filter:blur(10px);
}
.pronunciation-video-modal.hidden { display:none; }
body.pronunciation-video-open { overflow:hidden; }
.pronunciation-video-dialog {
  width:min(980px,100%);
  max-height:min(94vh,900px);
  overflow:auto;
  border:1px solid rgba(242,201,76,.42);
  border-radius:24px;
  color:#eef1f6;
  background:linear-gradient(150deg,#242833,#090b10 78%);
  box-shadow:0 28px 80px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.10);
}
.pronunciation-video-dialog:focus { outline:none; }
.pronunciation-video-dialog > header {
  position:sticky;
  top:0;
  z-index:3;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:15px 17px 13px;
  border-bottom:1px solid rgba(255,255,255,.09);
  background:rgba(15,17,22,.94);
  backdrop-filter:blur(12px);
}
.pronunciation-video-dialog h2 { margin:4px 0 0; font-size:clamp(18px,3vw,27px); line-height:1.16; }
.pronunciation-video-close {
  width:42px; height:42px;
  display:grid; place-items:center;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.14);
  border-radius:13px;
  color:#f5f7fb;
  background:rgba(255,255,255,.06);
  cursor:pointer;
}
.pronunciation-video-close .ui-icon { width:21px; height:21px; }
.pronunciation-video-stage { position:relative; background:#000; }
.pronunciation-video-stage video { display:block; width:100%; max-height:62vh; aspect-ratio:16/9; object-fit:contain; background:#000; }
.pronunciation-video-error { position:absolute; inset:0; display:grid; place-items:center; padding:25px; color:#ffd0d0; background:rgba(55,4,4,.92); text-align:center; }
.pronunciation-video-error[hidden] { display:none; }
.pronunciation-video-copy { display:grid; gap:8px; padding:14px 17px 5px; }
.pronunciation-video-copy p { margin:0; color:#c3c9d4; font-size:13px; line-height:1.5; }
.pronunciation-video-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:9px; color:#dabc55; font-size:11px; font-weight:850; }
.pronunciation-video-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding:12px 17px; }
.pronunciation-video-speed { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.pronunciation-video-speed > span { margin-right:3px; color:#aeb4c1; font-size:10.5px; font-weight:850; }
.pronunciation-video-speed button,
.pronunciation-video-complete,
.pronunciation-video-navigation button {
  min-height:39px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;
  color:#dce1ea;
  background:rgba(255,255,255,.055);
  font:inherit;
  font-size:11px;
  font-weight:850;
  cursor:pointer;
}
.pronunciation-video-speed button { min-width:54px; padding:8px 10px; }
.pronunciation-video-speed button.selected { color:#171208; border-color:#f0c84b; background:linear-gradient(145deg,#ffe47b,#d49c12); }
.pronunciation-video-complete { display:flex; align-items:center; gap:7px; padding:8px 12px; }
.pronunciation-video-complete .ui-icon { width:17px; height:17px; }
.pronunciation-video-complete.is-complete { color:#0c301b; border-color:#9ae6b4; background:#9ae6b4; }
.pronunciation-video-navigation { display:grid; grid-template-columns:1fr 1fr; gap:9px; padding:0 17px 17px; }
.pronunciation-video-navigation button { display:flex; align-items:center; justify-content:center; gap:7px; padding:9px 13px; }
.pronunciation-video-navigation button .ui-icon { width:17px; height:17px; }

@media (max-width:700px) {
  .phonetics-video-library { padding:12px; border-radius:18px; }
  .phonetics-video-library-header { grid-template-columns:1fr; }
  .phonetics-video-progress { justify-self:start; grid-auto-flow:column; align-items:center; gap:6px; min-width:0; }
  .phonetics-video-grid { grid-template-columns:1fr; }
  .phonetics-video-preview { grid-template-columns:124px minmax(0,1fr); grid-template-rows:1fr; }
  .phonetics-video-preview-media { height:100%; aspect-ratio:4/3; }
  .phonetics-video-preview-description { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .phonetics-video-preview-meta span { display:none; }
  .pronunciation-video-modal { place-items:end center; padding:0; }
  .pronunciation-video-dialog { width:100%; max-height:96vh; border-radius:22px 22px 0 0; }
  .pronunciation-video-stage video { max-height:48vh; }
  .pronunciation-video-controls { align-items:stretch; }
  .pronunciation-video-speed { width:100%; }
  .pronunciation-video-complete { width:100%; justify-content:center; }
}

@media (max-width:420px) {
  .phonetics-video-preview { grid-template-columns:104px minmax(0,1fr); }
  .phonetics-video-preview-copy { padding:9px 10px 10px; }
  .phonetics-video-preview-title { font-size:12px; }
  .phonetics-video-preview-description { font-size:10.5px; }
  .phonetics-video-play { width:40px; height:40px; }
  .phonetics-video-filter { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .phonetics-video-filter button { width:100%; }
  .pronunciation-video-navigation { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
  .phonetics-video-preview,
  .phonetics-video-preview-media img { transition:none; }
}


/* RC33: subtítulos visibles ligados al clip correcto. */
.pronunciation-video-caption {
  position: absolute;
  left: 4%; right: 4%; bottom: 54px;
  z-index: 4;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(0,0,0,.78);
  color: #fff;
  font-size: clamp(14px, 3.8vw, 19px);
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
  box-shadow: 0 6px 24px rgba(0,0,0,.4);
  pointer-events: none;
}