/* Visor XMLTV de la seccion EPG.

   Replica del panel de referencia. Las medidas salen de medir el mock con
   PIL y escalarlas por 589/796 = 0.74 (marco del mock 796x724 -> ancho 589
   del contenedor existente):

     marco   796x724 -> pad 21    card 741 -> 548     header 78 -> 58
     footer  55 -> 41             texto 17.45 -> 13   interlinea 33.57 -> 25

   Todo va prefijado con #epg-system porque el CSS original de la ventana lo
   inyecta en runtime un script minificado (index.html:566) que no se toca;
   con el id se gana por especificidad sin pelear por orden de carga. */

#epg-system .window-container {
    --win-pad: 20px;
    --win-line: 25px;
    --win-lines: 10;

    width: 589px;
    /* header + (n lineas + aire) + footer + marco */
    height: calc(58px + (var(--win-lines) * var(--win-line)) + 26px + 41px + var(--win-pad) * 2 + 2px);
    margin: auto;
    position: relative;
    opacity: 1;
}

#epg-system .window-inner {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: var(--win-pad);
    border: 1px solid #23234f;
    border-radius: 12px;
    background: #090821;
    box-shadow: 0 0 0 1px rgba(96, 55, 255, .06),
                0 18px 60px -20px rgba(96, 55, 255, .45);
    position: relative;
}

#epg-system .window-inner::before { content: none; }

/* la tarjeta del archivo */
#epg-system .window-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #20204a;
    border-radius: 10px;
    background: #090b20;
    overflow: hidden;
}

#epg-system .window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: static;
    flex: none;
    height: 58px;
    /* asimetrico igual que el mock: el badge respira menos que el titulo */
    padding: 0 16px 0 23px;
    border-bottom: 1px solid #2f3370;
    border-radius: 0;
    background: #121434;
}

#epg-system .window-file {
    display: flex;
    align-items: center;
    gap: 13px;
    font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: #fff;
}

#epg-system .window-file svg {
    width: 14px;
    height: 16px;
    flex: none;
    color: #fcfcfd;
}

#epg-system .window-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 31px;
    padding: 0 13px;
    border: 1px solid #2d3061;
    border-radius: 10px;
    background: #1c1d41;
    font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    color: #fff;
}

#epg-system .window-badge i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #57bd5e;
}

#epg-system .code-wrapper {
    display: flex;
    position: static;
    flex: 1 1 auto;
    min-height: 0;
    padding: 13px 16px 13px 0;
    overflow: hidden;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: var(--win-line);
    color: #e5e5ee;
}

#epg-system .code-gutter {
    flex: none;
    width: 58px;
    padding-right: 20px;
    text-align: right;
    color: #363a5b;
    -webkit-user-select: none;
    user-select: none;
}

#epg-system .code-wrapper pre {
    margin: 0;
    font: inherit;
    white-space: pre;
}

#epg-system .window-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
    height: 41px;
    padding: 0 27px 0 19px;
    border-top: 1px solid #13143f;
    background: #121332;
    font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
    font-size: 11px;
    color: #c0c3da;
}

#epg-system .window-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#epg-system .window-status i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #4fbe5b;
}

#epg-system .window-meta {
    display: inline-flex;
    gap: 38px;
}

/* Resaltado de sintaxis: colores muestreados del mock (pico de
   saturacion x valor dentro de cada glifo, para saltear el antialiasing) */
#epg-system .punctuation { color: #8b7cf8; }   /* < > / ? */
#epg-system .tag         { color: #bf5cf5; }   /* nombre de etiqueta */
#epg-system .attr        { color: #a9a6c9; }   /* nombre de atributo */
#epg-system .eq          { color: #5f9ad9; }   /* el igual */
#epg-system .value       { color: #7fd64a; }   /* valor entrecomillado */

#epg-system .cursor {
    display: inline-block;
    width: 8px;
    background: #e5e5ee;
    animation: blink 1s infinite;
}

@media screen and (max-width: 990px) {
    #epg-system .window-container {
        --win-pad: 12px;
        --win-line: 21px;

        width: 322px;
        height: calc(48px + (var(--win-lines) * var(--win-line)) + 20px + 34px + var(--win-pad) * 2 + 2px);
    }

    #epg-system .window-header { height: 48px; padding: 0 16px; }
    #epg-system .window-file { font-size: 13px; gap: 10px; }
    #epg-system .window-badge { height: 26px; padding: 0 10px; font-size: 11px; gap: 7px; }
    #epg-system .code-wrapper { padding: 10px 10px 10px 0; font-size: 11px; }
    #epg-system .code-gutter { width: 42px; padding-right: 14px; }
    #epg-system .window-footer { height: 34px; padding: 0 14px; font-size: 10px; }
    #epg-system .window-meta { gap: 20px; }
}