.pagina-clase {
  --filtro-glow-transcripcion-buscador-reposo: none;
  --filtro-glow-transcripcion-buscador: none;
  --sombra-transcripcion-buscador-campo: var(--sombra-buscador);
  --sombra-transcripcion-buscador-activo-campo: var(--sombra-buscador-activo); }
  .pagina-clase .panel-transcripcion-clase {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    background-color: var(--color-secundario);
    border-top: 1px solid var(--color-borde);
    overflow: hidden; }
    @media (max-width: 994px) {
      .pagina-clase .panel-transcripcion-clase {
        order: 0;
        --alto-reproductor-movil: min(calc(100vw * 9 / 16), 64dvh);
        --margen-panel-transcripcion-movil: 32px;
        --alto-panel-transcripcion-movil: clamp(
                280px,
                calc(100dvh - var(--alto-header) - var(--alto-reproductor-movil) - var(--alto-footer) - var(--margen-panel-transcripcion-movil)),
                520px
            );
        width: calc(100% - 32px);
        height: var(--alto-panel-transcripcion-movil);
        max-height: var(--alto-panel-transcripcion-movil);
        margin: 4px 16px 16px;
        border: 1px solid var(--color-borde-suave);
        border-radius: 21px; } }
    @media (min-width: 995px) {
      .pagina-clase .panel-transcripcion-clase {
        --panel-transcripcion-ancho-abierto: 445px;
        z-index: 20;
        flex-basis: var(--panel-transcripcion-ancho-abierto);
        width: var(--panel-transcripcion-ancho-abierto);
        border-top: 0;
        border-left: 1px solid var(--color-borde);
        overflow-x: hidden;
        overflow-y: hidden;
        transition: flex-basis 180ms ease, width 180ms ease; } }
  .pagina-clase .panel-transcripcion-clase-encabezado {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex: 0 0 auto;
    width: 100%;
    min-height: 56px;
    padding: 16px 16px 8px;
    box-sizing: border-box; }
    @media (max-width: 994px) {
      .pagina-clase .panel-transcripcion-clase-encabezado {
        align-items: center;
        justify-content: flex-start;
        min-height: 56px;
        padding: 12px 56px 8px 16px; } }
  .pagina-clase .panel-transcripcion-clase-titulo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    width: 100%;
    margin: 0;
    padding: 0 40px;
    box-sizing: border-box;
    color: var(--color-texto);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere; }
    @media (max-width: 994px) {
      .pagina-clase .panel-transcripcion-clase-titulo {
        justify-content: flex-start;
        padding: 0;
        font-size: 18px;
        text-align: left; } }
  .pagina-clase .boton-panel-transcripcion {
    position: absolute;
    top: 16px;
    left: 16px;
    margin-left: 0; }
  .pagina-clase .boton-panel-transcripcion .boton-panel-clases-icon {
    display: block;
    width: 24px;
    height: 24px;
    background-color: var(--color-icono-principal);
    filter: var(--filtro-icono-apariencia);
    pointer-events: none; }
  .pagina-clase .boton-panel-transcripcion-cerrar {
    display: inline-flex; }
    @media (max-width: 994px) {
      .pagina-clase .boton-panel-transcripcion-cerrar {
        top: 12px;
        right: 12px;
        left: auto; } }
  .pagina-clase .boton-panel-transcripcion-abrir {
    display: none; }
  .pagina-clase .boton-panel-transcripcion-icon--cerrar {
    -webkit-mask: url("/icons/cerrar.svg") center/18px 18px no-repeat;
    mask: url("/icons/cerrar.svg") center/18px 18px no-repeat; }
    @media (min-width: 995px) {
      .pagina-clase .boton-panel-transcripcion-icon--cerrar {
        -webkit-mask: url("/icons/panel-abrir.svg") center/contain no-repeat;
        mask: url("/icons/panel-abrir.svg") center/contain no-repeat; } }
  .pagina-clase .boton-panel-transcripcion-icon--abrir {
    -webkit-mask: url("/icons/panel-cerrar.svg") center/contain no-repeat;
    mask: url("/icons/panel-cerrar.svg") center/contain no-repeat; }
  @media (max-width: 994px) {
    html.panel-transcripcion-colapsado .pagina-clase [data-panel-transcripcion] {
      display: none; } }
  @media (min-width: 995px) {
    .pagina-clase [data-panel-transcripcion] > .panel-transcripcion-clase-encabezado,
    .pagina-clase [data-panel-transcripcion] > .transcripcion-buscador,
    .pagina-clase [data-panel-transcripcion] > .transcripcion-estado,
    .pagina-clase [data-panel-transcripcion] > .transcripcion-lista {
      width: var(--panel-transcripcion-ancho-abierto);
      min-width: var(--panel-transcripcion-ancho-abierto);
      max-width: var(--panel-transcripcion-ancho-abierto); }
    .pagina-clase [data-panel-transcripcion] > .panel-transcripcion-clase-encabezado,
    .pagina-clase [data-panel-transcripcion] > .transcripcion-buscador,
    .pagina-clase [data-panel-transcripcion] > .transcripcion-estado {
      flex-shrink: 0; }
    .pagina-clase [data-panel-transcripcion] > .transcripcion-buscador,
    .pagina-clase [data-panel-transcripcion] > .transcripcion-estado,
    .pagina-clase [data-panel-transcripcion] > .transcripcion-lista {
      opacity: 1;
      visibility: visible;
      transition: opacity 120ms ease 120ms; }
    html.panel-transcripcion-colapsado .pagina-clase [data-panel-transcripcion] {
      flex-basis: 0;
      width: 0;
      border-left: 0;
      overflow: visible; }
      html.panel-transcripcion-colapsado .pagina-clase [data-panel-transcripcion] .panel-transcripcion-clase-encabezado {
        width: 0;
        min-width: 0;
        min-height: 0;
        padding: 0; }
      html.panel-transcripcion-colapsado .pagina-clase [data-panel-transcripcion] .panel-transcripcion-clase-titulo {
        display: none; }
      html.panel-transcripcion-colapsado .pagina-clase [data-panel-transcripcion] .boton-panel-transcripcion-cerrar {
        display: none; }
      html.panel-transcripcion-colapsado .pagina-clase [data-panel-transcripcion] .boton-panel-transcripcion-abrir {
        top: 16px;
        right: 8px;
        left: auto;
        z-index: 30;
        display: inline-flex;
        background-color: transparent;
        box-shadow: none;
        opacity: .88; }
      html.panel-transcripcion-colapsado .pagina-clase [data-panel-transcripcion] .boton-panel-transcripcion-abrir:hover {
        background-color: transparent;
        box-shadow: none;
        opacity: 1; }
      html.panel-transcripcion-colapsado .pagina-clase [data-panel-transcripcion] .boton-panel-transcripcion-abrir .boton-panel-clases-icon {
        display: block;
        background-color: var(--color-texto-atenuado); }
      html.panel-transcripcion-colapsado .pagina-clase [data-panel-transcripcion] .boton-panel-transcripcion-abrir:hover .boton-panel-clases-icon {
        background-color: var(--color-primario); }
      html.panel-transcripcion-colapsado .pagina-clase [data-panel-transcripcion] .transcripcion-buscador,
      html.panel-transcripcion-colapsado .pagina-clase [data-panel-transcripcion] .transcripcion-estado,
      html.panel-transcripcion-colapsado .pagina-clase [data-panel-transcripcion] .transcripcion-lista {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition-delay: 0ms; }
      html.panel-transcripcion-colapsado .pagina-clase [data-panel-transcripcion] .transcripcion-sincronizar {
        visibility: hidden;
        pointer-events: none; } }
  .pagina-clase .transcripcion-buscador {
    flex: 0 0 auto;
    width: 100%;
    padding: 12px 16px 14px;
    box-sizing: border-box; }
    .pagina-clase .transcripcion-buscador:focus-within .transcripcion-buscador-campo, .pagina-clase .transcripcion-buscador:focus-within .transcripcion-buscador-campo:hover {
      border-color: var(--color-primario);
      box-shadow: none;
      filter: var(--filtro-glow-transcripcion-buscador); }
    .pagina-clase .transcripcion-buscador:focus-within .transcripcion-buscador-icono {
      background-color: var(--color-primario); }
    .pagina-clase .transcripcion-buscador:not(:focus-within) .transcripcion-buscador-campo:hover {
      box-shadow: var(--sombra-transcripcion-buscador-activo-campo);
      filter: var(--filtro-glow-transcripcion-buscador); }
    .pagina-clase .transcripcion-buscador:not(:focus-within) .transcripcion-buscador-campo:hover .transcripcion-buscador-icono {
      background-color: var(--color-primario); }
  .pagina-clase .transcripcion-buscador-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap; }
  .pagina-clase .transcripcion-buscador-campo {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    padding: 8px 16px;
    border: 2px solid transparent;
    border-radius: 32px;
    box-sizing: border-box;
    background-color: var(--color-fondo-buscador);
    background-clip: padding-box;
    box-shadow: var(--sombra-transcripcion-buscador-campo);
    cursor: text;
    filter: var(--filtro-glow-transcripcion-buscador-reposo); }
  .pagina-clase .transcripcion-buscador-icono {
    display: block;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background-color: var(--color-texto-atenuado);
    -webkit-mask: url("/icons/buscar.svg") center/contain no-repeat;
    mask: url("/icons/buscar.svg") center/contain no-repeat; }
  .pagina-clase .transcripcion-buscador-campo input {
    flex: 1 1 auto;
    min-width: 0;
    height: 24px;
    padding: 0;
    border: 0;
    outline: 0;
    background-color: transparent;
    color: var(--color-texto);
    font-family: 'Inter', 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    appearance: none; }
    .pagina-clase .transcripcion-buscador-campo input::placeholder {
      color: var(--color-texto-atenuado);
      opacity: 1; }
    .pagina-clase .transcripcion-buscador-campo input::-webkit-search-decoration, .pagina-clase .transcripcion-buscador-campo input::-webkit-search-cancel-button, .pagina-clase .transcripcion-buscador-campo input::-webkit-search-results-button, .pagina-clase .transcripcion-buscador-campo input::-webkit-search-results-decoration {
      -webkit-appearance: none;
      appearance: none; }
  .pagina-clase .transcripcion-buscador-limpiar {
    flex: 0 0 auto;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0.2rem;
    box-sizing: border-box;
    cursor: pointer;
    font: inherit;
    line-height: 0; }
    .pagina-clase .transcripcion-buscador-limpiar:hover {
      background-color: var(--color-fondo-cerrar-reciente-hover); }
    .pagina-clase .transcripcion-buscador-limpiar:hover .transcripcion-buscador-limpiar-icono, .pagina-clase .transcripcion-buscador-limpiar:focus-visible .transcripcion-buscador-limpiar-icono {
      background-color: var(--color-primario-oscuro); }
    .pagina-clase .transcripcion-buscador-limpiar:focus {
      outline: none; }
  .pagina-clase .transcripcion-buscador-limpiar[hidden] {
    display: none; }
  .pagina-clase .transcripcion-buscador-limpiar-icono {
    display: block;
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    padding: 0;
    background-color: var(--color-primario);
    -webkit-mask: url("/icons/cerrar.svg") center/contain no-repeat;
    mask: url("/icons/cerrar.svg") center/contain no-repeat; }
  .pagina-clase .transcripcion-estado {
    flex: 0 0 auto;
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
    color: var(--color-texto-atenuado);
    font-size: 14px;
    font-weight: 700;
    line-height: normal; }
  .pagina-clase .transcripcion-estado[hidden] {
    display: none; }
  .pagina-clase .transcripcion-lista {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    list-style: none; }
  .pagina-clase .transcripcion-segmento {
    display: block;
    margin: 0;
    padding: 0; }
  .pagina-clase .transcripcion-segmento[hidden] {
    display: none; }
  .pagina-clase .transcripcion-segmento-boton {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    width: 100%;
    min-height: 58px;
    padding: 16px;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    background-color: var(--color-secundario);
    color: var(--color-texto);
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    text-align: left;
    touch-action: pan-y;
    cursor: pointer;
    appearance: none; }
    .pagina-clase .transcripcion-segmento-boton:hover {
      background-color: var(--color-primario-suave);
      color: var(--color-texto); }
    .pagina-clase .transcripcion-segmento-boton:focus-visible {
      position: relative;
      z-index: 1;
      outline: 2px solid var(--color-primario);
      outline-offset: -2px; }
  .pagina-clase .transcripcion-segmento-tiempo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 3px 5px;
    border-radius: 17px;
    background-color: var(--color-secundario-oscuro);
    color: var(--color-primario-oscuro);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap; }
  .pagina-clase .transcripcion-segmento-texto {
    min-width: 0;
    overflow-wrap: anywhere; }
  .pagina-clase .transcripcion-segmento-boton-pasado {
    color: var(--color-texto-atenuado);
    font-weight: 400; }
    .pagina-clase .transcripcion-segmento-boton-pasado .transcripcion-segmento-tiempo {
      color: var(--color-texto-atenuado); }
  .pagina-clase .transcripcion-segmento-boton-futuro {
    font-weight: 500; }
  .pagina-clase .transcripcion-segmento-boton-activo {
    background-color: var(--color-primario-suave);
    color: var(--color-texto);
    font-weight: 700; }
    .pagina-clase .transcripcion-segmento-boton-activo .transcripcion-segmento-tiempo {
      background-color: var(--color-primario);
      color: var(--color-texto-sobre-primario); }
  .pagina-clase .transcripcion-sincronizar {
    position: absolute;
    right: 16px;
    bottom: 16px;
    left: 16px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 16px;
    border: 0;
    border-radius: 32px;
    box-sizing: border-box;
    background-color: var(--color-primario);
    box-shadow: var(--sombra-panel);
    color: var(--color-texto-sobre-primario);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    appearance: none; }
    .pagina-clase .transcripcion-sincronizar:hover {
      background-color: var(--color-primario-oscuro); }
    .pagina-clase .transcripcion-sincronizar:focus-visible {
      outline: 2px solid var(--color-primario);
      outline-offset: 2px; }
  .pagina-clase .transcripcion-sincronizar[hidden] {
    display: none; }

:root[data-apariencia="oscuro"] .pagina-clase {
  --filtro-glow-transcripcion-buscador-reposo: drop-shadow(0 0 10px rgba(91, 148, 223, .08));
  --filtro-glow-transcripcion-buscador: drop-shadow(0 0 9px rgba(91, 148, 223, .34)) drop-shadow(0 0 18px rgba(91, 148, 223, .14));
  --sombra-transcripcion-buscador-campo: inset 0 0 0 1px rgba(142, 166, 188, .42);
  --sombra-transcripcion-buscador-activo-campo: inset 0 0 0 1px rgba(91, 148, 223, .80); }
  :root[data-apariencia="oscuro"] .pagina-clase .transcripcion-buscador-campo {
    transition: border-color 120ms ease, box-shadow 120ms ease, filter 120ms ease; }
  :root[data-apariencia="oscuro"] .pagina-clase .transcripcion-buscador-limpiar-icono {
    transition: background-color 120ms ease; }

.boton-accion-clase-icon-transcripcion {
  width: 20px;
  height: 20px;
  -webkit-mask: url("/icons/transcripcion.svg") center/18px 18px no-repeat;
  mask: url("/icons/transcripcion.svg") center/18px 18px no-repeat; }