/* =====================================================================
   MiTv 2.0 / LeCache - SISTEMA DE DISENO OTT  (MITV-926)
   ---------------------------------------------------------------------
   CAPA EXCLUSIVAMENTE VISUAL. No define comportamiento, no renombra nada,
   no toca URLs ni identificadores usados por el backend.

   Orden de carga (head.jsp, include global de TODAS las vistas):
       1. <theme>.css  -> base.css        (Subsonic 6.1.6, heredado)
       2. font-awesome-4.5.0              (iconografia heredada)
       3. bloque LECACHE_GLOBAL_RESPONSIVE de head.jsp
       4. mitv-mobile.css                 (MITV-910, app-shell movil)
       5. ESTE ARCHIVO                    (MITV-926, sistema de diseno)

   Al ir el ultimo, gana por orden en igualdad de especificidad y no
   necesita !important salvo donde el heredado ya lo usa.

   Codificacion: ASCII puro (leccion L5 del proyecto).
   ===================================================================== */

/* =====================================================================
   1. DESIGN TOKENS
   ===================================================================== */
:root {
    /* --- Superficies --------------------------------------------- */
    --mv-bg:            #06080c;
    --mv-bg-elev:       #0b0f15;
    --mv-surface:       #11161f;
    --mv-surface-2:     #171e29;
    --mv-surface-hover: #1e2734;
    --mv-scrim:         rgba(4, 6, 10, 0.72);

    /* --- Bordes --------------------------------------------------- */
    --mv-border:        #202936;
    --mv-border-2:      #2c3849;
    --mv-border-soft:   rgba(255, 255, 255, 0.07);

    /* --- Marca ---------------------------------------------------- */
    --mv-primary:       #8ecbff;   /* acento historico de MiTv */
    --mv-primary-deep:  #4aa3f0;
    --mv-primary-ink:   #05131f;   /* texto sobre el acento */
    --mv-primary-soft:  rgba(142, 203, 255, 0.14);
    --mv-secondary:     #a78bfa;
    --mv-accent:        #f5c518;   /* VIP / valoraciones */

    /* --- Texto ---------------------------------------------------- */
    --mv-text:          #f2f6fb;
    --mv-text-2:        #9aa8bd;
    --mv-text-3:        #6b7889;

    /* --- Estado --------------------------------------------------- */
    --mv-focus:         #8ecbff;
    --mv-success:       #34d399;
    --mv-warning:       #fbbf24;
    --mv-error:         #f87171;

    /* --- Gradientes ----------------------------------------------- */
    --mv-grad-app:      linear-gradient(180deg, #0b0f15 0%, #06080c 100%);
    --mv-grad-primary:  linear-gradient(135deg, #a9d8ff 0%, #6bb6f5 100%);
    --mv-grad-chrome:   linear-gradient(180deg, #131924 0%, #0c1118 100%);
    --mv-grad-hero:     linear-gradient(90deg, rgba(6,8,12,.96) 0%, rgba(6,8,12,.78) 38%, rgba(6,8,12,.10) 78%, rgba(6,8,12,0) 100%);
    --mv-grad-hero-b:   linear-gradient(0deg, var(--mv-bg) 0%, rgba(6,8,12,.55) 22%, rgba(6,8,12,0) 60%);

    /* --- Sombras -------------------------------------------------- */
    --mv-sh-1:          0 1px 2px rgba(0, 0, 0, .35);
    --mv-sh-2:          0 8px 24px -12px rgba(0, 0, 0, .75);
    --mv-sh-3:          0 20px 46px -18px rgba(0, 0, 0, .85);
    --mv-sh-focus:      0 0 0 3px var(--mv-bg), 0 0 0 6px var(--mv-focus), 0 18px 40px -16px rgba(0, 0, 0, .9);
    --mv-sh-glow:       0 0 26px -6px rgba(142, 203, 255, .55);

    /* --- Radios --------------------------------------------------- */
    --mv-r-xs: 6px;
    --mv-r-sm: 10px;
    --mv-r-md: 14px;
    --mv-r-lg: 18px;
    --mv-r-xl: 24px;
    --mv-r-pill: 999px;

    /* --- Espaciado ------------------------------------------------ */
    --mv-s1: 4px;  --mv-s2: 8px;  --mv-s3: 12px; --mv-s4: 16px;
    --mv-s5: 22px; --mv-s6: 30px; --mv-s7: 42px; --mv-s8: 60px;
    --mv-gutter: 26px;

    /* --- Tipografia ----------------------------------------------- */
    --mv-font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
               "Helvetica Neue", Arial, sans-serif;
    --mv-fs-hero:  44px;
    --mv-fs-h1:    27px;
    --mv-fs-h2:    19px;
    --mv-fs-card:  15px;
    --mv-fs-body:  14px;
    --mv-fs-meta:  12.5px;
    --mv-lh-tight: 1.18;
    --mv-lh:       1.5;

    /* --- Geometria de componentes --------------------------------- */
    --mv-rail-w:    228px;   /* barra lateral desktop/TV desplegada */
    --mv-rail-mini: 76px;    /* barra lateral colapsada */
    --mv-tap:       44px;    /* objetivo tactil minimo */
    --mv-card-w:    228px;   /* ancho de tarjeta en carrusel */
    --mv-focus-scale: 1.06;

    /* --- Movimiento ------------------------------------------------ */
    --mv-t-fast: 140ms;
    --mv-t:      200ms;
    --mv-t-slow: 300ms;
    --mv-ease:   cubic-bezier(.22, .61, .36, 1);
}

/* =====================================================================
   2. BASE / TIPOGRAFIA
   ===================================================================== */
body.mainframe,
body.topframe,
body.leftframe,
body.mitv-shell,
body.mitv-doc {
    font-family: var(--mv-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.mainframe {
    background: var(--mv-grad-app);
    color: var(--mv-text);
    font-size: var(--mv-fs-body);
    line-height: var(--mv-lh);
}

body.mainframe h1 {
    font-size: var(--mv-fs-h1);
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: var(--mv-lh-tight);
    color: #fff;
}
body.mainframe h2 {
    font-size: var(--mv-fs-h2);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--mv-text);
}
body.mainframe h3 { font-size: 16px; font-weight: 600; color: var(--mv-text); }

body.mainframe a { color: var(--mv-primary); text-decoration: none; }
body.mainframe a:hover { color: #cfe8ff; }

body.mainframe .detail,
body.mainframe .small { color: var(--mv-text-2); font-size: var(--mv-fs-meta); }

/* Titulo de seccion del catalogo: usa la retica de fila (mv-row-head) */
.mv-section-title {
    display: flex;
    align-items: center;
    gap: var(--mv-s3);
    margin: 0 0 var(--mv-s4);
    font-size: var(--mv-fs-h2);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--mv-text);
}
.mv-section-title .mv-ico { color: var(--mv-primary); }

/* =====================================================================
   3. ICONOGRAFIA
   Una sola familia: trazo 2, 24x24, currentColor. El sprite vive en
   /style/mitv-icons.svg y se referencia con <svg class="mv-ico"><use .../>.
   Font Awesome 4.5 permanece cargado para las vistas heredadas que aun
   lo usan; aqui solo se normaliza su tamano y color para que no desentone.
   ===================================================================== */
.mv-ico {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: middle;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
.mv-ico-sm { width: 18px; height: 18px; }
.mv-ico-lg { width: 28px; height: 28px; }
.mv-ico-solid { fill: currentColor; stroke: none; }

body.mainframe .fa,
body.topframe .fa,
body.leftframe .fa { color: var(--mv-primary); }

/* =====================================================================
   4. SISTEMA DE FOCO  (prioridad: mando a distancia)
   ---------------------------------------------------------------------
   Regla: TODO elemento interactivo tiene un foco inequivoco a 3 metros.
   :focus-visible no existe en los navegadores de Fire TV / Tizen antiguos,
   por eso el estilo se aplica a :focus y el runtime (mitv-tv.js) solo
   marca <html class="mv-pointer"> cuando la interaccion es de raton, para
   no dibujar el anillo en clics de escritorio.
   ===================================================================== */
.mv-focusable { outline: none; }

.mv-focusable:focus,
.mv-btn:focus,
.mv-card:focus,
.mv-nav-item:focus,
.mv-chip:focus,
.mv-tab:focus,
.mv-search-input:focus {
    outline: none;
    box-shadow: var(--mv-sh-focus);
    z-index: 5;
    position: relative;
}
html.mv-pointer .mv-focusable:focus,
html.mv-pointer .mv-btn:focus,
html.mv-pointer .mv-card:focus,
html.mv-pointer .mv-nav-item:focus,
html.mv-pointer .mv-chip:focus,
html.mv-pointer .mv-tab:focus {
    box-shadow: none;
}
html.mv-pointer .mv-search-input:focus { box-shadow: none; border-color: var(--mv-primary); }

/* En modo TV el foco ademas escala y eleva */
body.mv-tv .mv-card:focus,
body.mv-tv .mv-card.is-focus {
    transform: scale(var(--mv-focus-scale));
    z-index: 6;
}

/* =====================================================================
   5. BOTONES
   ===================================================================== */
.mv-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mv-s2);
    min-height: var(--mv-tap);
    padding: 11px 22px;
    border: 1px solid transparent;
    border-radius: var(--mv-r-pill);
    background: var(--mv-surface-2);
    color: var(--mv-text);
    font-family: var(--mv-font);
    font-size: 15px;
    font-weight: 650;
    letter-spacing: .01em;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--mv-t-fast) var(--mv-ease),
                border-color var(--mv-t-fast) var(--mv-ease),
                color var(--mv-t-fast) var(--mv-ease),
                transform var(--mv-t-fast) var(--mv-ease);
}
.mv-btn:hover { background: var(--mv-surface-hover); color: #fff; }
.mv-btn:active { transform: scale(.97); }
.mv-btn[disabled], .mv-btn.is-disabled {
    opacity: .42;
    cursor: default;
    pointer-events: none;
}

/* Primario: alto contraste, legible a distancia */
.mv-btn-primary {
    background: var(--mv-grad-primary);
    color: var(--mv-primary-ink);
    border-color: transparent;
    box-shadow: 0 10px 26px -14px rgba(142, 203, 255, .9);
}
.mv-btn-primary:hover { background: #fff; color: var(--mv-primary-ink); }
.mv-btn-primary .mv-ico { stroke-width: 2.4; }

/* Secundario: superficie translucida sobre imagen */
.mv-btn-secondary {
    background: rgba(238, 244, 251, .13);
    border-color: rgba(255, 255, 255, .22);
    color: #fff;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.mv-btn-secondary:hover { background: rgba(238, 244, 251, .22); }

/* Fantasma: acciones terciarias */
.mv-btn-ghost {
    background: transparent;
    border-color: var(--mv-border-2);
    color: var(--mv-text-2);
}
.mv-btn-ghost:hover { background: var(--mv-surface); color: var(--mv-text); }

/* Boton de icono */
.mv-btn-icon {
    width: var(--mv-tap);
    height: var(--mv-tap);
    min-height: 0;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mv-text-2);
}
.mv-btn-icon:hover { background: var(--mv-surface-hover); color: var(--mv-text); }

.mv-btn-lg { min-height: 54px; padding: 15px 30px; font-size: 17px; }
.mv-btn-block { width: 100%; }

/* =====================================================================
   6. CHIPS / FILTROS
   ===================================================================== */
.mv-chiprow {
    display: flex;
    gap: var(--mv-s2);
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0 6px;
    margin: 0 0 var(--mv-s5);
}
.mv-chiprow::-webkit-scrollbar { display: none; }

.mv-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 17px;
    border: 1px solid var(--mv-border-2);
    border-radius: var(--mv-r-pill);
    background: var(--mv-surface);
    color: var(--mv-text-2);
    font-size: 13.5px;
    font-weight: 650;
    letter-spacing: .015em;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--mv-t-fast) var(--mv-ease),
                color var(--mv-t-fast) var(--mv-ease),
                border-color var(--mv-t-fast) var(--mv-ease);
}
.mv-chip:hover { background: var(--mv-surface-hover); color: var(--mv-text); border-color: #3d4b5f; }
.mv-chip.is-active,
.mv-chip[aria-current="true"] {
    background: var(--mv-grad-primary);
    border-color: transparent;
    color: var(--mv-primary-ink);
}

/* =====================================================================
   7. TARJETA DE CONTENIDO
   ===================================================================== */
.mv-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: var(--mv-r-md);
    background: var(--mv-surface);
    border: 1px solid var(--mv-border);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    box-shadow: var(--mv-sh-1);
    transition: transform var(--mv-t) var(--mv-ease),
                box-shadow var(--mv-t) var(--mv-ease),
                border-color var(--mv-t) var(--mv-ease);
    will-change: transform;
}
.mv-card:hover {
    transform: translateY(-4px);
    border-color: #3a4b62;
    box-shadow: var(--mv-sh-3);
}
.mv-card:focus,
.mv-card.is-focus {
    border-color: var(--mv-focus);
    box-shadow: var(--mv-sh-focus);
}

/* Lienzo 16:9 uniforme: todas las tarjetas miden lo mismo */
.mv-card-art {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
    background: #0f2743;
}
.mv-card-art > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
    transition: transform var(--mv-t-slow) var(--mv-ease);
}
.mv-card:hover .mv-card-art > img,
.mv-card:focus .mv-card-art > img { transform: scale(1.04); }

/* Degradados de respaldo cuando no hay portada */
.mv-art-g0 { background: linear-gradient(135deg, #12325a, #4a9fe8); }
.mv-art-g1 { background: linear-gradient(135deg, #0f3a2c, #2fbf88); }
.mv-art-g2 { background: linear-gradient(135deg, #2a1f52, #8e6bff); }
.mv-art-g3 { background: linear-gradient(135deg, #3a1430, #ff6ba7); }
.mv-art-g4 { background: linear-gradient(135deg, #123a3f, #35c4d6); }
.mv-art-g5 { background: linear-gradient(135deg, #3a2c0f, #f5b73c); }

.mv-card-art::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent 42%, rgba(4, 7, 11, .62) 100%);
    pointer-events: none;
}

/* Insignias sobre la portada */
.mv-badge {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: var(--mv-r-xs);
    background: rgba(5, 8, 13, .78);
    color: #e6eef8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    font-variant-numeric: tabular-nums;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.mv-badge-tr { top: 9px; right: 9px; }
.mv-badge-br { bottom: 9px; right: 9px; }
.mv-badge-bl { bottom: 9px; left: 9px; }
.mv-badge-live {
    background: #e11d48;
    color: #fff;
    text-transform: uppercase;
}
.mv-badge-live::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: mv-pulse 1.8s infinite;
}
.mv-badge-vip { background: rgba(245, 197, 24, .92); color: #2a1f00; }
@keyframes mv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Boton de reproduccion centrado */
.mv-card-play {
    position: absolute;
    inset: 0;
    margin: auto;
    z-index: 3;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--mv-grad-primary);
    color: var(--mv-primary-ink);
    opacity: 0;
    transform: scale(.82);
    transition: opacity var(--mv-t) var(--mv-ease), transform var(--mv-t) var(--mv-ease);
    box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .8);
}
.mv-card-play .mv-ico { margin-left: 2px; }
.mv-card:hover .mv-card-play,
.mv-card:focus .mv-card-play,
.mv-card.is-focus .mv-card-play { opacity: 1; transform: scale(1); }

/* Barra de progreso "continuar viendo" */
.mv-progress {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    height: 4px;
    background: rgba(255, 255, 255, .18);
}
.mv-progress > i {
    display: block;
    height: 100%;
    background: var(--mv-primary);
}

/* Cuerpo */
.mv-card-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 0;
    padding: 12px 13px 13px;
}
.mv-card-title {
    font-size: var(--mv-fs-card);
    font-weight: 700;
    line-height: 1.3;
    color: var(--mv-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    overflow-wrap: anywhere;
}
.mv-card-sub {
    font-size: var(--mv-fs-meta);
    color: var(--mv-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mv-card-meta {
    margin-top: auto;
    padding-top: 9px;
    border-top: 1px solid var(--mv-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mv-s2);
    color: var(--mv-text-3);
    font-size: var(--mv-fs-meta);
    font-variant-numeric: tabular-nums;
}
.mv-rate { display: inline-flex; align-items: center; gap: 5px; color: var(--mv-text); font-weight: 700; }
.mv-rate .mv-ico { width: 14px; height: 14px; color: var(--mv-accent); fill: currentColor; stroke: none; }

/* =====================================================================
   8. FILAS / CARRUSELES HORIZONTALES
   ===================================================================== */
.mv-row { margin: 0 0 var(--mv-s7); position: relative; }

.mv-row-head {
    display: flex;
    align-items: center;
    gap: var(--mv-s3);
    margin: 0 0 var(--mv-s3);
    min-height: 34px;
}
.mv-row-title {
    display: flex;
    align-items: center;
    gap: var(--mv-s2);
    margin: 0;
    font-size: var(--mv-fs-h2);
    font-weight: 750;
    letter-spacing: -.012em;
    color: var(--mv-text);
}
.mv-row-title .mv-ico { color: var(--mv-primary); }
.mv-row-count {
    font-size: var(--mv-fs-meta);
    font-weight: 600;
    color: var(--mv-text-3);
    font-variant-numeric: tabular-nums;
}
.mv-row-spacer { flex: 1 1 auto; }
.mv-row-nav { display: flex; gap: 6px; opacity: 0; transition: opacity var(--mv-t) var(--mv-ease); }
.mv-row:hover .mv-row-nav, .mv-row:focus-within .mv-row-nav { opacity: 1; }
.mv-row-nav .mv-btn-icon {
    width: 36px; height: 36px;
    background: var(--mv-surface);
    border: 1px solid var(--mv-border);
}

/* Pista con desplazamiento por gesto, rueda o mando */
.mv-track {
    display: flex;
    gap: var(--mv-s4);
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    /* margen para que la escala del foco no se recorte */
    padding: 10px 4px 16px;
    margin: -10px -4px -16px;
}
.mv-track::-webkit-scrollbar { display: none; }
.mv-track > .mv-card {
    flex: 0 0 var(--mv-card-w);
    width: var(--mv-card-w);
    scroll-snap-align: start;
}

/* Rejilla (vista de catalogo completo) */
.mv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--mv-card-w), 1fr));
    gap: var(--mv-s5) var(--mv-s4);
    width: 100%;
    align-items: stretch;
}

/* =====================================================================
   9. HERO CINEMATOGRAFICO
   ===================================================================== */
.mv-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 340px;
    margin: 0 0 var(--mv-s6);
    border-radius: var(--mv-r-xl);
    overflow: hidden;
    background: var(--mv-surface);
    border: 1px solid var(--mv-border);
    isolation: isolate;
}
.mv-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 32%;
    opacity: 0;
    transform: scale(1.03);
    transition: opacity 620ms var(--mv-ease), transform 900ms var(--mv-ease);
}
.mv-hero-bg.is-ready { opacity: 1; transform: scale(1); }
.mv-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--mv-grad-hero);
}
.mv-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--mv-grad-hero-b);
}
.mv-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 640px;
    padding: var(--mv-s7) var(--mv-s6) var(--mv-s6);
}
.mv-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 var(--mv-s3);
    padding: 5px 12px 5px 9px;
    border-radius: var(--mv-r-pill);
    background: var(--mv-primary-soft);
    border: 1px solid rgba(142, 203, 255, .28);
    color: var(--mv-primary);
    font-size: 11.5px;
    font-weight: 750;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.mv-hero-title {
    margin: 0 0 var(--mv-s3);
    font-size: var(--mv-fs-hero);
    font-weight: 800;
    letter-spacing: -.028em;
    line-height: 1.06;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .65);
    overflow-wrap: anywhere;
}
.mv-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mv-s2) var(--mv-s3);
    margin: 0 0 var(--mv-s3);
    color: var(--mv-text-2);
    font-size: 13.5px;
    font-weight: 600;
}
.mv-hero-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.mv-hero-meta .mv-pill {
    padding: 2px 8px;
    border: 1px solid var(--mv-border-2);
    border-radius: var(--mv-r-xs);
    font-size: 11.5px;
    letter-spacing: .04em;
    color: var(--mv-text-2);
}
.mv-hero-desc {
    margin: 0 0 var(--mv-s5);
    max-width: 52ch;
    color: #cfd8e5;
    font-size: 15px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mv-hero-actions { display: flex; flex-wrap: wrap; gap: var(--mv-s3); }

/* =====================================================================
   10. CARGA (SKELETON)
   ===================================================================== */
.mv-skel {
    position: relative;
    overflow: hidden;
    background: var(--mv-surface-2);
    border-radius: var(--mv-r-sm);
}
.mv-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent);
    animation: mv-shimmer 1.35s infinite;
}
@keyframes mv-shimmer { 100% { transform: translateX(100%); } }

.mv-skel-card {
    flex: 0 0 var(--mv-card-w);
    width: var(--mv-card-w);
    border-radius: var(--mv-r-md);
    border: 1px solid var(--mv-border);
    background: var(--mv-surface);
    overflow: hidden;
}
.mv-skel-card .mv-skel-art { width: 100%; padding-top: 56.25%; border-radius: 0; }
.mv-skel-card .mv-skel-line { height: 11px; margin: 12px 13px 0; border-radius: 4px; }
.mv-skel-card .mv-skel-line.w60 { width: 60%; }
.mv-skel-card .mv-skel-line.last { margin-bottom: 15px; }
.mv-skel-hero { min-height: 340px; border-radius: var(--mv-r-xl); margin-bottom: var(--mv-s6); }

/* =====================================================================
   11. ESTADOS VACIOS Y DE ERROR
   ===================================================================== */
.mv-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--mv-s3);
    padding: var(--mv-s8) var(--mv-s5);
    text-align: center;
    border: 1px dashed var(--mv-border-2);
    border-radius: var(--mv-r-lg);
    background: rgba(17, 22, 31, .55);
    color: var(--mv-text-2);
}
.mv-state-ico {
    display: grid;
    place-items: center;
    width: 62px; height: 62px;
    border-radius: 50%;
    background: var(--mv-surface-2);
    color: var(--mv-text-3);
}
.mv-state-ico .mv-ico { width: 28px; height: 28px; }
.mv-state h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--mv-text); }
.mv-state p { margin: 0; max-width: 46ch; font-size: 14px; line-height: 1.55; }
.mv-state-error .mv-state-ico { background: rgba(248, 113, 113, .12); color: var(--mv-error); }
.mv-state-warn  .mv-state-ico { background: rgba(251, 191, 36, .12); color: var(--mv-warning); }
.mv-state-actions { display: flex; gap: var(--mv-s3); margin-top: var(--mv-s2); }

/* =====================================================================
   12. AVISOS (TOAST)
   ===================================================================== */
.mv-toasts {
    position: fixed;
    z-index: 9000;
    left: 50%;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: var(--mv-s2);
    width: max-content;
    max-width: min(92vw, 460px);
    pointer-events: none;
}
.mv-toast {
    display: flex;
    align-items: center;
    gap: var(--mv-s3);
    padding: 12px 18px;
    border-radius: var(--mv-r-pill);
    background: rgba(23, 30, 41, .96);
    border: 1px solid var(--mv-border-2);
    color: var(--mv-text);
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--mv-sh-3);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--mv-t) var(--mv-ease), transform var(--mv-t) var(--mv-ease);
}
.mv-toast.is-in { opacity: 1; transform: translateY(0); }
.mv-toast-ok    .mv-ico { color: var(--mv-success); }
.mv-toast-warn  .mv-ico { color: var(--mv-warning); }
.mv-toast-error .mv-ico { color: var(--mv-error); }

/* =====================================================================
   13. APP SHELL (index.jsp)
   ---------------------------------------------------------------------
   La estructura de iframes NO cambia: #upper (top.view) y #main sigue
   siendo el destino de toda la navegacion heredada. Lo que cambia es que
   el menu pasa a vivir en el documento contenedor (barra lateral nativa),
   con lo que puede desbordar, animarse y recibir foco de mando, cosa
   imposible dentro de un iframe de 56 px.
   #upper permanece cargado -y accesible como parent.frames.upper- porque
   head.jsp le enruta los atajos de teclado de Mousetrap.
   ===================================================================== */
body.mitv-shell { background: var(--mv-bg); }

.mitv-app {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    position: relative;          /* referencia de la barra lateral superpuesta */
    background: var(--mv-bg);
}

/* #upper: presente y funcional, visualmente retirado */
.mv-upper {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    left: -9999px;
    top: 0;
    opacity: 0;
    border: 0;
    pointer-events: none;
}

.mv-shell-col {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    margin-left: 0;              /* se separa de la barra por breakpoint */
    background: var(--mv-bg);
}

.mitv-main-wrap {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    background: var(--mv-bg);
}
.mitv-main-wrap > #main {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* --- 13.1 Barra lateral (desktop y TV) ------------------------------ */
/* La barra se superpone al contenido en lugar de empujarlo. Si fuera un
   elemento de la fila flexible, cada vez que el raton la rozara cambiaria
   el ancho del iframe #main y el navegador tendria que recomponer TODO el
   documento de dentro: un reflujo completo por cada pasada del raton, que
   en un televisor se nota. Superpuesta, la animacion es solo de esta capa. */
.mv-rail {
    display: none;                /* se activa por breakpoint (seccion 18) */
    flex-direction: column;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--mv-rail-mini);
    padding: var(--mv-s4) 10px calc(var(--mv-s4) + env(safe-area-inset-bottom, 0px));
    background: var(--mv-grad-chrome);
    border-right: 1px solid var(--mv-border);
    overflow: hidden;
    z-index: 30;
    transition: width var(--mv-t-slow) var(--mv-ease), box-shadow var(--mv-t-slow) var(--mv-ease);
}
.mv-rail:hover,
.mv-rail:focus-within,
.mv-rail.is-open {
    width: var(--mv-rail-w);
    box-shadow: 22px 0 44px -26px rgba(0, 0, 0, .95);
}

.mv-rail-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 var(--mv-s5);
    padding: 8px 10px;
    border: 0;
    background: none;
    color: var(--mv-text);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em;
    white-space: nowrap;
    cursor: pointer;
    border-radius: var(--mv-r-sm);
}
.mv-rail-mark {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: 11px;
    background: var(--mv-grad-primary);
    color: var(--mv-primary-ink);
    box-shadow: var(--mv-sh-glow);
}
.mv-rail-mark .mv-ico { width: 20px; height: 20px; fill: currentColor; stroke: none; margin-left: 1px; }

.mv-rail-nav { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; overflow-x: hidden; }
.mv-rail-nav::-webkit-scrollbar { width: 4px; }
.mv-rail-foot { margin-top: auto; padding-top: var(--mv-s3); border-top: 1px solid var(--mv-border); }

.mv-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--mv-r-sm);
    background: none;
    color: var(--mv-text-2);
    font-family: var(--mv-font);
    font-size: 14.5px;
    font-weight: 650;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--mv-t-fast) var(--mv-ease),
                color var(--mv-t-fast) var(--mv-ease),
                transform var(--mv-t-fast) var(--mv-ease);
}
.mv-nav-item .mv-ico { flex: 0 0 auto; opacity: .85; transition: opacity var(--mv-t-fast); }
.mv-nav-item .mv-nav-label {
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--mv-t) var(--mv-ease), transform var(--mv-t) var(--mv-ease);
}
.mv-rail:hover .mv-nav-label,
.mv-rail:focus-within .mv-nav-label,
.mv-rail.is-open .mv-nav-label { opacity: 1; transform: translateX(0); }

.mv-nav-item:hover { background: var(--mv-surface-hover); color: var(--mv-text); transform: translateX(4px); }
.mv-nav-item:hover .mv-ico { opacity: 1; }
.mv-nav-item:focus { background: var(--mv-surface-hover); color: #fff; }
.mv-nav-item:focus .mv-ico { opacity: 1; color: var(--mv-primary); }

/* Seccion activa */
.mv-nav-item.is-active { color: #fff; background: var(--mv-primary-soft); }
.mv-nav-item.is-active .mv-ico { color: var(--mv-primary); opacity: 1; }
.mv-nav-item.is-active::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 0 3px 3px 0;
    background: var(--mv-primary);
}

/* --- 13.2 Barra superior (movil y tablet) --------------------------- */
.mitv-topbar {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--mv-s2);
    width: 100%;
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 10px 0 14px;
    background: var(--mv-grad-chrome);
    border-bottom: 1px solid var(--mv-border);
    color: var(--mv-text);
}
.mitv-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 4px;
    border: 0;
    background: none;
    color: var(--mv-text);
    font-family: var(--mv-font);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.02em;
    cursor: pointer;
    white-space: nowrap;
    min-width: 0;
}
.mitv-brand .mv-rail-mark { width: 30px; height: 30px; border-radius: 9px; }
.mitv-brand .mv-rail-mark .mv-ico { width: 17px; height: 17px; }
.mitv-topbar-spacer { flex: 1 1 auto; min-width: 0; }

.mitv-iconbtn {
    flex: 0 0 auto;
    width: var(--mv-tap);
    height: var(--mv-tap);
    display: inline-grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--mv-r-sm);
    background: transparent;
    color: var(--mv-text-2);
    cursor: pointer;
    padding: 0;
    transition: background var(--mv-t-fast), color var(--mv-t-fast);
}
.mitv-iconbtn:hover, .mitv-iconbtn:focus { background: var(--mv-surface-hover); color: var(--mv-text); }

/* Buscador de la cabecera */
.mitv-search { display: none; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; }
.mitv-topbar.searching .mitv-search { display: flex; }
.mitv-topbar.searching .mitv-brand,
.mitv-topbar.searching .mitv-topbar-spacer,
.mitv-topbar.searching .js-search-open { display: none; }
.mitv-topbar .js-search-close { display: none; }
.mitv-topbar.searching .js-search-close { display: inline-grid; }

.mitv-search input, .mv-search-input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--mv-border-2);
    border-radius: var(--mv-r-pill);
    background: var(--mv-surface);
    color: var(--mv-text);
    font-family: var(--mv-font);
    font-size: 16px;          /* 16px: evita el zoom automatico en iOS */
    outline: none;
    transition: border-color var(--mv-t-fast), background var(--mv-t-fast);
}
.mitv-search input::placeholder, .mv-search-input::placeholder { color: var(--mv-text-3); }
.mitv-search input:focus, .mv-search-input:focus {
    border-color: var(--mv-primary);
    background: var(--mv-surface-2);
}

/* --- 13.3 Barra inferior (movil) ------------------------------------ */
.mitv-tabbar {
    display: none;
    flex: 0 0 auto;
    width: 100%;
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--mv-grad-chrome);
    border-top: 1px solid var(--mv-border);
}
.mitv-tab {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0;
    background: none;
    color: var(--mv-text-3);
    font-family: var(--mv-font);
    font-size: 10.5px;
    font-weight: 650;
    padding: 6px 2px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--mv-t-fast);
}
.mitv-tab .mv-ico { width: 22px; height: 22px; }
.mitv-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mitv-tab.active { color: var(--mv-primary); }
.mitv-tab.active::before {
    content: "";
    position: absolute;
    top: 0;
    width: 26px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--mv-primary);
}

/* --- 13.4 Hoja inferior "Mas" --------------------------------------- */
.mitv-sheet-bd {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: none;
    background: var(--mv-scrim);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.mitv-sheet-bd.open { display: block; }
.mitv-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 41;
    max-width: 100vw;
    padding: 8px 12px calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--mv-surface);
    border-top: 1px solid var(--mv-border);
    border-radius: var(--mv-r-xl) var(--mv-r-xl) 0 0;
    box-shadow: 0 -20px 50px -24px rgba(0, 0, 0, .9);
    transform: translateY(102%);
    transition: transform var(--mv-t-slow) var(--mv-ease);
    font-family: var(--mv-font);
}
.mitv-sheet.open { transform: translateY(0); }
.mitv-sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: #3a4658; margin: 4px auto 12px; }
.mitv-sheet a {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    padding: 13px 12px;
    border-radius: var(--mv-r-sm);
    color: var(--mv-text);
    text-decoration: none;
    font-size: 15px;
    font-weight: 650;
}
.mitv-sheet a .mv-ico { color: var(--mv-primary); }
.mitv-sheet a:hover, .mitv-sheet a:focus { background: var(--mv-surface-hover); }

/* =====================================================================
   14. VISTAS HEREDADAS DE SUBSONIC
   ---------------------------------------------------------------------
   El tema activo es 'default' (base.css + default.css): fondo blanco,
   texto negro. Solo home.jsp se pintaba oscuro, de modo que al entrar a
   una carpeta, a la busqueda o a los ajustes la interfaz saltaba de negro
   a blanco. Aqui se unifica TODA la aplicacion en el tema oscuro sin
   tocar el tema heredado ni el markup de esas vistas.
   ===================================================================== */
body.mainframe.bgcolor1,
body.leftframe.bgcolor2,
body.rightframe,
body.playlistframe { background: var(--mv-grad-app); color: var(--mv-text); }

.bgcolor1 { background-color: var(--mv-surface); }
.bgcolor2 { background-color: var(--mv-surface-2); }

body.mainframe .border1,
body.mainframe .ruleTableHeader,
body.mainframe .ruleTableCell,
body.mainframe .log { border-color: var(--mv-border); }

body.mainframe h1, body.mainframe h1 a,
body.mainframe h2, body.mainframe h2 a { color: var(--mv-text); font-family: var(--mv-font); }
body.mainframe .detail, body.mainframe .albumComment { color: var(--mv-text-2); }
body.mainframe .icon { color: var(--mv-primary); }
body.mainframe b, body.mainframe tr { color: inherit; }
body.mainframe .warning { color: var(--mv-warning); }
body.mainframe .starred { color: var(--mv-accent); }
body.mainframe a:hover, body.mainframe a:hover * { text-decoration: none; }

/* --- Tablas de contenido (playlist, carpeta, busqueda) -------------- */
body.mainframe table.music {
    line-height: 1.9;
    border-collapse: collapse;
    border-radius: var(--mv-r-md);
    overflow: hidden;
}
body.mainframe table.music tr:nth-of-type(odd)  { background-color: rgba(23, 30, 41, .55); }
body.mainframe table.music tr:nth-of-type(even) { background-color: rgba(17, 22, 31, .55); }
body.mainframe table.music tr:hover { background-color: var(--mv-surface-hover); }
body.mainframe table.music td { border: 0; padding-top: 4px; padding-bottom: 4px; }
body.mainframe th {
    color: var(--mv-text-3);
    font-size: 11px;
    letter-spacing: .07em;
    border-bottom: 1px solid var(--mv-border);
}
body.mainframe .ruleTable { border-radius: var(--mv-r-sm); overflow: hidden; }
body.mainframe .ruleTableHeader { background: var(--mv-surface-2); color: var(--mv-text); }

/* --- Cabeceras de filtro heredadas (.header / .headerSelected) ------ */
body.mainframe .header,
body.mainframe .headerSelected {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 7px 16px !important;
    margin: 0 6px 6px 0;
    border: 1px solid var(--mv-border-2);
    border-radius: var(--mv-r-pill);
    background: var(--mv-surface);
    font-size: 12.5px;
    font-weight: 650;
    letter-spacing: .03em;
    transition: background var(--mv-t-fast), color var(--mv-t-fast), border-color var(--mv-t-fast);
}
body.mainframe .header a { color: var(--mv-text-2); }
body.mainframe .header:hover { background: var(--mv-surface-hover); border-color: #3d4b5f; }
body.mainframe .header:hover a { color: var(--mv-text); }
body.mainframe .headerSelected {
    background: var(--mv-grad-primary);
    border-color: transparent;
    border-bottom: 1px solid transparent;
}
body.mainframe .headerSelected a { color: var(--mv-primary-ink); }

/* --- Miniaturas heredadas (.albumThumb / .coverart) ----------------- */
body.mainframe .coverart {
    background-color: var(--mv-surface);
    color: var(--mv-text);
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-r-md);
    overflow: hidden;
    box-shadow: var(--mv-sh-1);
    transition: transform var(--mv-t) var(--mv-ease),
                border-color var(--mv-t) var(--mv-ease),
                box-shadow var(--mv-t) var(--mv-ease);
}
body.mainframe .albumThumb:hover .coverart,
body.mainframe .albumThumb:focus-within .coverart {
    transform: translateY(-4px);
    border-color: #3a4b62;
    box-shadow: var(--mv-sh-3);
}
body.mainframe .albumThumb:focus-within .coverart { border-color: var(--mv-focus); }
body.mainframe .coverart .caption1 { color: var(--mv-text); font-weight: 650; padding: 10px 11px 3px; }
body.mainframe .coverart .caption1 a:link,
body.mainframe .coverart .caption1 a:visited { color: var(--mv-text); }
body.mainframe .coverart .caption2,
body.mainframe .coverart .caption3 { color: var(--mv-text-2); padding: 0 11px 8px; }
body.mainframe .hoverable:hover { box-shadow: var(--mv-sh-3); }

/* Flechas de paginacion heredadas: sin PNG claro sobre fondo oscuro */
body.mainframe .back, body.mainframe .forward {
    background-image: none;
    padding-left: 0;
    color: var(--mv-primary);
}

/* --- Formularios ---------------------------------------------------- */
body.mainframe input[type=text],
body.mainframe input[type=password],
body.mainframe input[type=number],
body.mainframe input[type=email],
body.mainframe textarea,
body.mainframe select {
    background: var(--mv-surface);
    border: 1px solid var(--mv-border-2);
    border-radius: var(--mv-r-sm);
    color: var(--mv-text);
    padding: 9px 12px;
    font-family: var(--mv-font);
    font-size: 14px;
    outline: none;
    transition: border-color var(--mv-t-fast), background var(--mv-t-fast);
}
body.mainframe input:hover, body.mainframe textarea:hover, body.mainframe select:hover {
    border-color: #3d4b5f;
}
body.mainframe input:focus, body.mainframe textarea:focus, body.mainframe select:focus {
    border-color: var(--mv-primary);
    background: var(--mv-surface-2);
    box-shadow: 0 0 0 3px var(--mv-primary-soft);
}
body.mainframe select option { background: var(--mv-surface); color: var(--mv-text); }

body.mainframe input[type=submit],
body.mainframe input[type=button],
body.mainframe button {
    min-height: 40px;
    padding: 9px 20px;
    border: 1px solid var(--mv-border-2);
    border-radius: var(--mv-r-pill);
    background: var(--mv-surface-2);
    color: var(--mv-text);
    font-family: var(--mv-font);
    font-size: 14px;
    font-weight: 650;
    cursor: pointer;
    transition: background var(--mv-t-fast), border-color var(--mv-t-fast), transform var(--mv-t-fast);
}
body.mainframe input[type=submit]:hover,
body.mainframe input[type=button]:hover,
body.mainframe button:hover { background: var(--mv-surface-hover); border-color: #3d4b5f; }
body.mainframe input[type=submit]:active,
body.mainframe input[type=button]:active,
body.mainframe button:active { transform: scale(.98); background: var(--mv-surface); }

/* --- Menu contextual heredado --------------------------------------- */
.context-menu-item { color: var(--mv-text); }
.context-menu-list { background: var(--mv-surface); border: 1px solid var(--mv-border); border-radius: var(--mv-r-sm); }
.context-menu-item.hover, .context-menu-item:hover { background: var(--mv-surface-hover) !important; }

/* =====================================================================
   15. MENU SUPERIOR HEREDADO (top.jsp)
   Se conserva por compatibilidad de atajos; si se vuelve a mostrar debe
   verse igual de premium que el resto.
   ===================================================================== */
body.topframe {
    background: var(--mv-grad-chrome);
    color: var(--mv-text);
    height: 56px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--mv-border);
}
body.topframe .top-menu-item {
    height: auto;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 10px 14px !important;
    margin-right: 2px;
    border-radius: var(--mv-r-sm);
    color: var(--mv-text-2);
    font-size: 14.5px;
    font-weight: 650;
    transition: background var(--mv-t-fast), color var(--mv-t-fast);
}
body.topframe .top-menu-item:hover { background: var(--mv-surface-hover); color: #fff; }
body.topframe .top-menu-item .icon, body.topframe .top-menu-item i { color: var(--mv-primary); }
body.topframe input#query {
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--mv-border-2);
    border-radius: var(--mv-r-pill);
    background: var(--mv-surface);
    color: var(--mv-text);
    font-size: 14px;
    outline: none;
}
body.topframe input#query:focus { border-color: var(--mv-primary); background: var(--mv-surface-2); }

/* =====================================================================
   16. PANEL DE CUENTA (left.jsp)
   ===================================================================== */
body.leftframe {
    background: var(--mv-grad-app);
    color: var(--mv-text);
    padding: var(--mv-s4) var(--mv-s4) var(--mv-s7);
}
body.leftframe .left-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 11px 14px;
    margin-bottom: 4px;
    border-radius: var(--mv-r-sm);
    color: var(--mv-text-2);
    font-size: 15px;
    font-weight: 650;
    transition: background var(--mv-t-fast), color var(--mv-t-fast), transform var(--mv-t-fast);
}
body.leftframe .left-menu-item:hover {
    background: var(--mv-surface-hover);
    color: var(--mv-text);
    transform: translateX(4px);
}
body.leftframe .left-menu-item .icon { color: var(--mv-primary); }
body.leftframe .left-index-title {
    background: var(--mv-surface-2) !important;
    border-radius: var(--mv-r-xs);
    padding: 6px 10px;
    color: var(--mv-text);
}
body.leftframe .left-index-shortcut-artist { font-weight: 500; color: var(--mv-text-2); }

/* =====================================================================
   17. REPRODUCTOR (videoPlayer.jsp)
   ---------------------------------------------------------------------
   El JSP trae su propio <style> DESPUES de head.jsp, por lo que aqui se
   sube la especificidad con body.mainframe. NO se toca ni el elemento
   <video>, ni hls.js, ni el iframe de Flussonic, ni la logica de
   autoplay: solo el cromo que los rodea.
   ===================================================================== */
body.mainframe .player-sticky { background: #000; border-bottom: 1px solid var(--mv-border); }
body.mainframe .content-scroll { background: transparent; padding: var(--mv-s5) var(--mv-gutter) var(--mv-s8); }

body.mainframe .video-title {
    font-size: 23px;
    font-weight: 750;
    letter-spacing: -.02em;
    line-height: 1.22;
    color: #fff;
    margin: 0 0 var(--mv-s2);
}
body.mainframe .video-meta { color: var(--mv-text-2); font-size: 13.5px; }
body.mainframe .video-meta a { color: var(--mv-primary); }
body.mainframe .status-line { color: var(--mv-text-3); font-size: 12px; }
body.mainframe .status-ok    { color: var(--mv-success); }
body.mainframe .status-error { color: var(--mv-error); }
body.mainframe .status-warn  { color: var(--mv-warning); }

body.mainframe .section-title {
    display: flex;
    align-items: center;
    gap: var(--mv-s2);
    margin: var(--mv-s6) 0 var(--mv-s4);
    padding-left: 0;
    border-left: 0;
    font-size: var(--mv-fs-h2);
    font-weight: 750;
    letter-spacing: -.012em;
    color: var(--mv-text);
}
body.mainframe .section-title::before {
    content: "";
    width: 4px;
    height: 20px;
    border-radius: 2px;
    background: var(--mv-grad-primary);
}

/* Barra de autoplay: pasa de barra tecnica a control de producto */
body.mainframe .autoplay-bar {
    align-items: center;
    gap: var(--mv-s3);
    padding: 12px 16px;
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-r-pill);
    background: var(--mv-surface);
    box-shadow: var(--mv-sh-1);
}
body.mainframe .autoplay-toggle { color: var(--mv-text-2); font-weight: 650; font-size: 14px; }
body.mainframe .autoplay-toggle.on { color: var(--mv-text); }
body.mainframe .autoplay-btn {
    min-height: 40px;
    padding: 9px 20px;
    border: 1px solid var(--mv-border-2);
    border-radius: var(--mv-r-pill);
    background: var(--mv-surface-2);
    color: var(--mv-text);
    font-family: var(--mv-font);
    font-size: 14px;
    font-weight: 650;
}
body.mainframe .autoplay-btn:hover { background: var(--mv-surface-hover); }
body.mainframe .autoplay-btn.cancel { background: transparent; color: var(--mv-text-2); }
body.mainframe #starBtn { color: var(--mv-text-3); border-radius: 50%; }
body.mainframe #starBtn:hover { color: var(--mv-accent); background: var(--mv-surface-hover); }

body.mainframe .lecache-unmute {
    border-radius: var(--mv-r-pill);
    background: var(--mv-grad-primary);
    color: var(--mv-primary-ink);
    border: 0;
    font-weight: 700;
    box-shadow: var(--mv-sh-2);
}

/* Rejilla de "mas videos": mismas tarjetas que el resto del producto */
body.mainframe .video-grid { gap: var(--mv-s4); }
body.mainframe .video-card {
    border-radius: var(--mv-r-md);
    border: 1px solid var(--mv-border);
    background: var(--mv-surface);
    overflow: hidden;
    box-shadow: var(--mv-sh-1);
    transition: transform var(--mv-t) var(--mv-ease),
                border-color var(--mv-t) var(--mv-ease),
                box-shadow var(--mv-t) var(--mv-ease);
}
body.mainframe .video-card:hover,
body.mainframe .video-card:focus {
    transform: translateY(-4px);
    border-color: #3a4b62;
    box-shadow: var(--mv-sh-3);
    outline: none;
}
body.mainframe .video-card:focus { border-color: var(--mv-focus); box-shadow: var(--mv-sh-focus); }
body.mainframe .video-card.is-current { border-color: var(--mv-primary); }

/* Los controles nativos de <video> se conservan: son los unicos que
   garantizan pantalla completa, pistas de audio y subtitulos en Fire TV,
   Tizen y webOS. Solo se les da margen de seguridad en TV. */
body.mv-tv #lecachePlayer::-webkit-media-controls-panel { padding-bottom: 6px; }

/* =====================================================================
   18. RESPONSIVE
   Cuatro experiencias, no una sola comprimida.
   ===================================================================== */

/* --- 18.1 Movil (hasta 767 px) -------------------------------------- */
@media (max-width: 767px) {
    :root {
        --mv-gutter: 14px;
        --mv-card-w: 158px;
        --mv-fs-hero: 26px;
        --mv-fs-h1: 21px;
        --mv-fs-h2: 17px;
        --mv-fs-card: 13.5px;
        --mv-fs-meta: 11.5px;
        --mv-tap: 46px;
    }
    .mv-rail { display: none; }
    .mitv-topbar { display: flex; }
    .mitv-tabbar { display: flex; }

    body.mainframe { padding: var(--mv-s4) var(--mv-gutter) var(--mv-s7) !important; }

    .mv-hero { min-height: 0; border-radius: var(--mv-r-lg); }
    .mv-hero-inner { max-width: 100%; padding: var(--mv-s6) var(--mv-s4) var(--mv-s4); }
    .mv-hero-bg { object-position: center 30%; }
    .mv-hero::before { background: linear-gradient(0deg, rgba(6,8,12,.97) 30%, rgba(6,8,12,.45) 70%, rgba(6,8,12,.15) 100%); }
    .mv-hero-desc { -webkit-line-clamp: 2; font-size: 13.5px; margin-bottom: var(--mv-s4); }
    .mv-hero-actions .mv-btn { flex: 1 1 auto; }
    .mv-row { margin-bottom: var(--mv-s6); }
    .mv-row-nav { display: none; }
    .mv-track { gap: var(--mv-s3); }
    .mv-grid { gap: var(--mv-s4) var(--mv-s3); }
    .mv-card-play { width: 40px; height: 40px; opacity: .9; transform: scale(1); }
    .mv-card:hover { transform: none; }
    .mv-state { padding: var(--mv-s6) var(--mv-s4); }

    body.mainframe .content-scroll { padding: var(--mv-s4) var(--mv-gutter) var(--mv-s7); }
    body.mainframe .video-title { font-size: 18px; }
    body.mainframe .autoplay-bar { border-radius: var(--mv-r-md); padding: 10px 12px; }
}

/* Movil muy estrecho */
@media (max-width: 359px) {
    :root { --mv-card-w: 100%; }
    .mv-grid { grid-template-columns: 1fr; }
    .mitv-tab { font-size: 9.5px; }
}

/* Telefono en horizontal: se recupera altura util */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    .mv-rail { display: none; }
    .mitv-topbar { display: flex; height: 46px; padding-top: 0; }
    .mitv-tabbar { display: flex; height: 46px; }
    .mitv-tab span { display: none; }
    .mv-hero-inner { padding: var(--mv-s5) var(--mv-s4) var(--mv-s4); }
}

/* --- 18.2 Tablet (768 a 1023 px) ------------------------------------ */
@media (min-width: 768px) and (max-width: 1023px) {
    :root { --mv-gutter: 20px; --mv-card-w: 196px; --mv-fs-hero: 34px; }
    .mv-rail { display: flex; }
    .mv-shell-col { margin-left: var(--mv-rail-mini); }
    .mitv-topbar { display: flex; }
    .mitv-tabbar { display: none; }
    .mv-hero { min-height: 300px; }
    body.mainframe { padding: var(--mv-s5) var(--mv-gutter) var(--mv-s7) !important; }
}

/* --- 18.3 Escritorio (1024 px en adelante) -------------------------- */
@media (min-width: 1024px) {
    .mv-rail { display: flex; }
    .mv-shell-col { margin-left: var(--mv-rail-mini); }
    .mitv-topbar { display: flex; height: 64px; padding: 0 var(--mv-s5); }
    .mitv-tabbar { display: none; }
    .mitv-brand { display: none; }            /* la marca vive en la barra lateral */
    .mitv-topbar .js-search-open,
    .mitv-topbar .js-search-close { display: none; }
    .mitv-search { display: flex; max-width: 460px; }
    .mitv-topbar.searching .mitv-topbar-spacer { display: block; }
    body.mainframe { padding: var(--mv-s5) var(--mv-gutter) var(--mv-s8) !important; }
}

@media (min-width: 1440px) {
    :root { --mv-gutter: 40px; --mv-card-w: 246px; --mv-fs-hero: 50px; }
    .mv-hero { min-height: 400px; }
}

/* --- 18.4 Smart TV / 10-foot UI ------------------------------------- */
/* Se activa por resolucion (>=1900 px) o por deteccion de dispositivo
   (mitv-tv.js anade la clase mv-tv al <body> de cada documento). */
@media (min-width: 1900px) {
    :root {
        --mv-gutter: 60px;
        --mv-card-w: 320px;
        --mv-fs-hero: 64px;
        --mv-fs-h1: 40px;
        --mv-fs-h2: 30px;
        --mv-fs-card: 21px;
        --mv-fs-body: 19px;
        --mv-fs-meta: 17px;
        --mv-tap: 60px;
        --mv-rail-w: 320px;
        --mv-rail-mini: 104px;
    }
    .mv-hero { min-height: 560px; border-radius: 30px; }
}

body.mv-tv {
    --mv-gutter: 56px;
    --mv-card-w: 300px;
    --mv-fs-hero: 58px;
    --mv-fs-h1: 36px;
    --mv-fs-h2: 28px;
    --mv-fs-card: 20px;
    --mv-fs-body: 18px;
    --mv-fs-meta: 16px;
    --mv-tap: 58px;
    --mv-rail-w: 300px;
    --mv-rail-mini: 96px;
    --mv-focus-scale: 1.08;
}
body.mv-tv .mitv-tabbar { display: none !important; }
body.mv-tv .mv-rail { display: flex; }
body.mv-tv .mv-shell-col { margin-left: var(--mv-rail-mini); }
body.mv-tv .mitv-topbar { height: 84px; }
body.mv-tv .mitv-brand { display: none; }
body.mv-tv .mv-nav-item { min-height: 62px; font-size: 20px; gap: 18px; }
body.mv-tv .mv-nav-item .mv-ico { width: 28px; height: 28px; }
body.mv-tv .mv-btn { min-height: 60px; padding: 16px 34px; font-size: 20px; }
body.mv-tv .mv-btn .mv-ico { width: 26px; height: 26px; }
body.mv-tv .mv-chip { min-height: 52px; padding: 12px 26px; font-size: 18px; }
body.mv-tv .mv-card-play { width: 72px; height: 72px; }
body.mv-tv .mv-card-play .mv-ico { width: 30px; height: 30px; }
body.mv-tv .mv-search-input, body.mv-tv .mitv-search input { height: 56px; font-size: 20px; }
body.mv-tv .mv-hero { min-height: 520px; }
body.mv-tv .mv-hero-desc { font-size: 20px; -webkit-line-clamp: 3; }
body.mv-tv .mv-row-nav { display: none; }        /* en TV se navega con el mando */
body.mv-tv .mv-card-title { -webkit-line-clamp: 2; }
/* El foco en TV nunca queda pegado al borde de la pantalla (overscan) */
body.mv-tv.mitv-shell .mitv-app { padding: 0; }
body.mv-tv.mainframe { padding: var(--mv-s6) var(--mv-gutter) var(--mv-s8) !important; }
body.mv-tv .mv-track { padding: 22px 8px 30px; margin: -22px -8px -30px; }

/* =====================================================================
   19. ACCESIBILIDAD Y RENDIMIENTO
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Los navegadores de TV antiguos degradan mucho con blur: se desactiva. */
body.mv-tv .mv-btn-secondary,
body.mv-tv .mitv-sheet-bd,
body.mv-tv .mv-badge {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
body.mv-tv .mv-btn-secondary { background: rgba(238, 244, 251, .18); }

.mv-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* =====================================================================
   20. CAPA MOVIL ANDROID  (MITV-927)
   ---------------------------------------------------------------------
   BLOQUE ADITIVO. Corrige nueve defectos observados en Chrome Android
   sobre el rediseno MITV-926. No modifica ni una linea de las secciones
   1 a 19: todo vive dentro de un unico breakpoint movil, de modo que
   escritorio, tablet y TV quedan EXACTAMENTE igual que antes.

   Por que 767 y no 768: el corte movil de este archivo ya es 767 px
   (seccion 18.1) y el de tablet empieza en 768 px (seccion 18.2). Un
   bloque max-width:768px se solaparia con el de tablet justo en 768 px
   y ahi convivirian la barra lateral y la barra de pestanas. 767 es el
   MISMO breakpoint movil del archivo, no uno nuevo.
   La unica excepcion es 20.7: el defecto de la barra de autoplay se
   especifico explicitamente "por debajo de 480 px".

   Al ir el ultimo del archivo gana por orden sobre la seccion 18.1.
   Donde la capa heredada usa !important o selectores mas especificos
   (base.css, el bloque de head.jsp, el <style> de home.jsp y el de
   videoPlayer.jsp) se sube la especificidad en lugar de encadenar mas
   !important. Codificacion: ASCII puro.
   ===================================================================== */

@media (max-width: 767px) {

    /* --- 20.0 Tipografia movil ------------------------------------- */
    /* Minimo absoluto 12 px. La seccion 18.1 bajaba tarjeta a 13.5 y
       metadatos a 11.5: ilegibles a un brazo de distancia. */
    :root {
        --mv-fs-h2:   20px;      /* titulo de seccion */
        --mv-fs-card: 15.5px;    /* titulo de tarjeta */
        --mv-fs-meta: 12.5px;    /* metadatos */
    }

    /* --- 20.1 DEFECTO 1: boton "Reproducir" ilegible ---------------- */
    /* Causa: la seccion 2 declara `body.mainframe a { color: var(--mv-primary) }`
       con especificidad (0,1,2), superior a `.mv-btn-primary` (0,1,0).
       El <a> del hero acababa con texto #8ecbff sobre el degradado
       #a9d8ff->#6bb6f5: relacion 1.4:1. Se recupera la tinta oscura,
       que da 8.8:1 sobre el extremo mas claro del degradado.
       `.mv-chip.is-active` (0,2,0) no sufria el problema. */
    body.mainframe .mv-btn-primary,
    body.mainframe .mv-btn-primary:hover,
    body.mainframe .mv-btn-primary:focus,
    body.mainframe .mv-btn-primary:visited,
    body.mainframe .mv-btn-primary .mv-ico { color: var(--mv-primary-ink); }

    body.mainframe .mv-btn-secondary,
    body.mainframe .mv-btn-secondary:hover,
    body.mainframe .mv-btn-secondary:visited,
    body.mainframe .mv-btn-secondary .mv-ico { color: #fff; }

    /* El label no se corta: los botones del hero pasan a bloque y el
       texto puede envolver en dos lineas si hace falta. */
    .mv-hero-actions { gap: var(--mv-s2); }
    .mv-hero-actions .mv-btn {
        flex: 1 1 100%;
        min-width: 0;
        min-height: 48px;
        padding: 13px 18px;
        font-size: 16px;
        line-height: 1.2;
        white-space: normal;
    }

    /* --- 20.2 DEFECTO 2: la fila de chips se corta en los bordes ----- */
    /* Sangra hasta el borde del viewport y devuelve el margen como
       padding: el primer y el ultimo chip dejan de aparecer cercenados.
       La mascara marca que hay mas contenido a los lados; como el
       padding lateral vale justo el gutter, en reposo el primer chip
       queda integro. */
    .mv-chiprow {
        margin-left: calc(-1 * var(--mv-gutter));
        margin-right: calc(-1 * var(--mv-gutter));
        padding-left: var(--mv-gutter);
        padding-right: var(--mv-gutter);
        scroll-snap-type: x proximity;
        scroll-padding-left: var(--mv-gutter);
        -webkit-mask-image: linear-gradient(90deg,
            rgba(0,0,0,0) 0, #000 var(--mv-gutter),
            #000 calc(100% - 22px), rgba(0,0,0,0) 100%);
        mask-image: linear-gradient(90deg,
            rgba(0,0,0,0) 0, #000 var(--mv-gutter),
            #000 calc(100% - 22px), rgba(0,0,0,0) 100%);
    }
    .mv-chip {
        scroll-snap-align: start;
        min-height: 44px;              /* objetivo tactil */
        padding: 10px 16px;
        font-size: 13.5px;
    }

    /* --- 20.3 DEFECTO 3: barras blancas junto a las miniaturas ------ */
    /* coverArt.jsp fija la portada en una caja CUADRADA por estilo en
       linea (width:${size};height:${size}) y base.css pinta .coverart de
       blanco. Cuando mitv-mobile.js no ha llegado a agrupar los
       .albumThumb en .mitv-thumbgrid, ese blanco asoma a los lados del
       poster. Se neutraliza la caja cuadrada y se impone 16:9 recortado.
       El height:auto !important es imprescindible: compite contra un
       estilo en linea. */
    body.mainframe .coverart { background-color: var(--mv-surface); }
    body.mainframe .coverart > div {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
    }
    body.mainframe .coverart > div > a { display: block; }
    body.mainframe .coverart img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        object-position: center;
        background: #0f2743;
    }
    /* La tarjeta nueva ya reserva 16:9 con padding-top; solo se asegura
       que ningun poster deje ver el fondo por los lados. */
    .mv-card-art { background: #0f2743; }
    .mv-card-art > img { object-fit: cover; object-position: center; }

    /* --- 20.4 DEFECTO 5: titulos largos cortados sin elipsis -------- */
    /* base.css deja .coverart .caption1 en una sola linea con nowrap:
       "Canciones Mal Cantadas en Ing" se cortaba en seco. Dos lineas con
       elipsis en TODAS las superficies de titulo, nueva y heredada. */
    body.mainframe .mv-card-title,
    body.mainframe .coverart .caption1,
    body.mainframe .mitv-thumbgrid .caption1,
    body.mainframe .video-card .card-title,
    body.mainframe .mitv-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: normal;
        overflow-wrap: anywhere;
        line-height: 1.32;
    }
    body.mainframe .mv-card-title { min-height: 2.64em; }
    body.mainframe .mv-card-sub {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* --- 20.5 DEFECTO 6: icono deformado en la cabecera de carpeta -- */
    /* No es un SVG: es el #playButton de albumMain.jsp, dos glifos de
       Font Awesome apilados. El markup marca AMBOS como fa-stack-2x
       (el circulo de fondo deberia ser 2x y el play 1x), y ademas
       `body.mainframe .fa` (0,2,1) gana a `.fa-inverse` (0,1,0), asi que
       el circulo blanco tambien se pintaba celeste: el resultado era un
       borron azul del tamano del titulo. Se retira el circulo de fondo y
       se ajusta el play a un objetivo tactil de 44 px. albumMain.jsp no
       se toca. */
    body.mainframe #playButton.fa-stack,
    body.mainframe #playButton {
        width: 44px;
        height: 44px;
        line-height: 44px;
        font-size: 22px;
        vertical-align: middle;
        flex: 0 0 auto;
    }
    body.mainframe #playButton .fa-circle { display: none; }
    body.mainframe #playButton .fa-play-circle {
        font-size: 2em;
        line-height: 44px;
        color: var(--mv-primary);
    }

    /* --- 20.6 DEFECTO 8: la ultima fila queda bajo la barra inferior - */
    /* .mitv-tabbar mide 60px + safe-area. home.jsp reserva 60px con
       !important y especificidad (0,1,1); se sube a (0,1,2) con `html`
       para ganar sin encadenar mas !important de los que ya hay. */
    html body.mainframe {
        padding-bottom: calc(60px + 18px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* --- 20.7 DEFECTO 9: el overlay "43 vistas" es poco legible ------ */
    /* Fondo casi opaco en lugar de translucido y 12 px de cuerpo: pasa
       de ~2:1 a mas de 15:1 sobre cualquier poster. De paso se retira el
       backdrop-filter, que en Android obliga a recomponer la capa en
       cada scroll del riel. */
    body.mainframe .mv-badge {
        font-size: 12px;
        padding: 5px 9px;
        background: rgba(4, 7, 11, .92);
        border: 1px solid rgba(255, 255, 255, .14);
        color: #fff;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    body.mainframe .mv-badge-bl { bottom: 8px; left: 8px; }
    body.mainframe .mv-badge-tr { top: 8px; right: 8px; }
    body.mainframe .mv-badge-vip { background: rgba(245, 197, 24, .96); color: #241b00; }
    body.mainframe .mv-badge-live { background: #c81140; }

    /* --- 20.8 Rieles horizontales reales ---------------------------- */
    /* Sangran hasta el borde igual que los chips y hacen snap por
       tarjeta. Se conservan los margenes verticales de la seccion 8
       (el foco escalado no debe recortarse). */
    .mv-track {
        padding: 10px var(--mv-gutter) 16px;
        margin: -10px calc(-1 * var(--mv-gutter)) -16px;
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--mv-gutter);
    }
    .mv-track > .mv-card { scroll-snap-align: start; }

    /* --- 20.9 Objetivos tactiles y coste de pintado ------------------ */
    body.mainframe .mv-btn,
    body.mainframe .mv-btn-icon,
    .mitv-iconbtn,
    .mitv-tab { min-height: 44px; }
    .mitv-iconbtn { min-width: 44px; }
    body.mainframe .mv-card-play { width: 44px; height: 44px; }

    /* Solo transform y opacity: se retira todo blur de composicion. */
    body.mainframe .mv-btn-secondary,
    .mitv-sheet-bd,
    .mitv-search input {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    body.mainframe .mv-btn-secondary { background: rgba(238, 244, 251, .18); }

    /* Respeto del notch y de la barra de gestos en el shell */
    .mitv-topbar { padding-left: max(var(--mv-s3), env(safe-area-inset-left, 0px)); }
    .mitv-topbar { padding-right: max(var(--mv-s3), env(safe-area-inset-right, 0px)); }
}

/* --- 20.10 DEFECTO 7: la barra de autoplay desborda ------------------ */
/* "Siguiente >>" saltaba de linea y se salia porque el separador
   <div style="flex:1"> lo empuja al final de una fila que ya no cabe.
   Solo CSS: no se toca videoPlayer.jsp ni la logica de autoplay.
   El <style> del JSP carga DESPUES de esta hoja, por eso se mantiene el
   prefijo body.mainframe de la seccion 17: gana por especificidad, no
   por orden. Breakpoint 480 px por especificacion del defecto. */
@media (max-width: 480px) {
    body.mainframe .autoplay-bar {
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 12px;
        border-radius: var(--mv-r-md);
        padding: 12px 14px;
    }
    /* El separador elastico: en una barra que envuelve solo sirve para
       expulsar el boton. Se anula. */
    body.mainframe .autoplay-bar > div[style*="flex:1"] { display: none; }

    body.mainframe .autoplay-bar .autoplay-toggle {
        flex: 1 1 auto;
        min-height: 44px;
        font-size: 15px;
    }
    body.mainframe .autoplay-bar #starBtn {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }
    body.mainframe .autoplay-bar .autoplay-countdown.active {
        display: flex;
        flex: 1 1 100%;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        font-size: 13px;
    }
    body.mainframe .autoplay-bar .autoplay-countdown.active .autoplay-btn {
        flex: 0 0 auto;
        width: auto;
    }
    /* "Siguiente >>": linea propia, ancho completo, sin desbordar. */
    body.mainframe .autoplay-bar > .autoplay-btn {
        flex: 1 1 100%;
        width: 100%;
        min-height: 44px;
        font-size: 15px;
        white-space: nowrap;
    }
}

/* =====================================================================
   21. CORRECCIONES MITV-928
   ---------------------------------------------------------------------
   BLOQUE ADITIVO, igual que la seccion 20: no modifica ni una linea de
   las secciones 1 a 20. Se anade al final, de modo que gana por orden.

   ATENCION - CAMBIO DELIBERADO EN ESCRITORIO:
   la seccion 21.0 vive FUERA de todo @media. Es el unico cambio de
   escritorio del ticket (defecto A1) y esta ahi porque el defecto es de
   escritorio: en movil la barra lateral no se muestra (18.1 la oculta).
   Por eso el smoke de MITV-927 -que exige que TODO lo posterior a
   MITV-926 viva dentro de un @media movil- deja de pasar a partir de
   aqui: lo sustituye scripts/smoke/mitv928_mobile.sh, que compara el
   escritorio byte a byte SALVO esta seccion.

   El resto (21.1 a 21.4) es exclusivamente movil, bajo el mismo corte
   de 767 px que ya usan las secciones 18.1 y 20. Codificacion ASCII.
   ===================================================================== */

/* --- 21.0 DEFECTO A1: los menus se montan durante la navegacion ------ */
/* Sintomas: al pulsar una entrada del menu lateral la pagina anterior
   seguia visible varios cientos de milisegundos y la barra lateral se
   quedaba DESPLEGADA encima del contenido.

   Dos causas, ninguna de ellas un "fade":
     1. .mv-rail se expande con :hover Y con :focus-within (seccion 13.1).
        Al pulsar un .mv-nav-item el foco QUEDA en ese boton -la
        navegacion ocurre dentro del iframe #main, el foco del documento
        contenedor no se mueve-, asi que :focus-within sigue activo y la
        barra permanece a --mv-rail-w (228px) sobre un contenido cuyo
        margen izquierdo es solo --mv-rail-mini (76px). De ahi los "dos
        menus montados".
     2. Asignar iframe.contentWindow.location.href NO limpia el
        documento: el navegador lo mantiene pintado hasta el primer
        paint del siguiente. La pagina "tarda en desaparecer" porque
        literalmente sigue ahi.

   Correccion: index.jsp marca .mitv-app con .is-nav mientras dura la
   navegacion (y lo retira en el load del iframe, con red de seguridad
   por tiempo). Con esa clase la barra se colapsa aunque conserve el
   foco o el raton encima, y el documento saliente se oculta de
   inmediato dejando el fondo de la aplicacion mas una barra de
   progreso. Nada de esto existe fuera de la navegacion: sin .is-nav el
   escritorio es identico a MITV-927.

   z-index: .mitv-main-wrap pasa a crear su propio contexto de apilado
   (position:relative + z-index:1) por debajo del z-index:30 de la
   barra. Asi el contenido del iframe no puede volver a asomar por
   encima del menu durante la transicion. No altera el layout: era ya
   un elemento flexible y position:relative no cambia su caja. */
.mitv-main-wrap {
    position: relative;
    z-index: 1;
}

.mitv-app.is-nav .mv-rail,
.mitv-app.is-nav .mv-rail:hover,
.mitv-app.is-nav .mv-rail:focus-within,
.mitv-app.is-nav .mv-rail.is-open {
    width: var(--mv-rail-mini);
    box-shadow: none;
}
.mitv-app.is-nav .mv-rail .mv-nav-label,
.mitv-app.is-nav .mv-rail:hover .mv-nav-label,
.mitv-app.is-nav .mv-rail:focus-within .mv-nav-label,
.mitv-app.is-nav .mv-rail.is-open .mv-nav-label {
    opacity: 0;
    transform: translateX(-6px);
}
/* Durante la transicion el menu no reacciona al raton: si no, basta
   pasar por encima para volver a montarlo sobre el contenido. */
.mitv-app.is-nav .mv-nav-item:hover {
    transform: none;
    background: none;
    color: var(--mv-text-2);
}

/* El documento saliente desaparece en el acto. El hueco no queda en
   blanco: .mitv-main-wrap ya pinta var(--mv-bg). */
.mitv-app.is-nav .mitv-main-wrap > #main { visibility: hidden; }

/* Barra de progreso de 3 px mientras carga la vista siguiente. Solo
   existe mientras existe .is-nav, de modo que nunca es una animacion
   "que se repite sola". */
.mitv-app.is-nav .mitv-main-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2;
    background: var(--mv-grad-primary);
    transform-origin: 0 50%;
    animation: mv-nav-progress 1.1s var(--mv-ease) infinite;
    pointer-events: none;
}
@keyframes mv-nav-progress {
    0%   { transform: scaleX(0);    opacity: 1; }
    72%  { transform: scaleX(.86);  opacity: 1; }
    100% { transform: scaleX(1);    opacity: 0; }
}

/* Estado de fallo de navegacion: index.jsp lo activa cuando el iframe
   no ha terminado de cargar pasado el plazo de guarda. Convierte un
   marco en blanco en algo que el usuario puede leer y accionar. */
.mitv-navfail {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--mv-s3);
    padding: var(--mv-s6) var(--mv-s4);
    background: var(--mv-grad-app);
    color: var(--mv-text-2);
    font-family: var(--mv-font);
    font-size: 15px;
    text-align: center;
}
.mitv-app.is-navfail .mitv-navfail { display: flex; }
.mitv-navfail .mv-ico { width: 34px; height: 34px; color: var(--mv-warning); }
.mitv-navfail strong { color: var(--mv-text); font-size: 17px; font-weight: 750; }
.mitv-navfail code {
    font-size: 12.5px;
    color: var(--mv-text-3);
    overflow-wrap: anywhere;
}
.mitv-navfail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mv-s2);
    justify-content: center;
    margin-top: var(--mv-s2);
}

@media (max-width: 767px) {

    /* --- 21.1 DEFECTO B1: circulo azul encima de los posters -------- */
    /* Dos overlays distintos, con dos causas distintas.

       (a) Tarjetas nuevas (.mv-card): la seccion 18.1 fija
           .mv-card-play a opacity:.9 / transform:scale(1) -en
           escritorio solo aparece con :hover- y la 20.9 lo agranda a
           44x44. Resultado: un disco celeste de 44 px, centrado por
           `inset:0; margin:auto`, permanente sobre CADA portada.
           Aqui pasa a 28 px en la esquina inferior derecha: sigue
           indicando que la tarjeta reproduce, pero no tapa la imagen.

       (b) Rejilla heredada (.coverart, de coverArt.jsp): el contenedor
           trae onmouseover/onmouseout en linea que muestran y ocultan
           .coverart-play, dos glifos de Material Icons apilados
           -play_circle_filled a 36px con opacity .9 sobre play_arrow-.
           En un movil el toque dispara mouseover pero NUNCA llega el
           mouseout, asi que el disco se queda pegado a la portada que
           se toco o por la que se paso al desplazar: por eso aparece
           en unas tarjetas si y en otras no. En movil ese overlay
           sobra -toda la tarjeta ya navega- y se retira. El
           !important es imprescindible: jQuery .show() escribe
           display:block EN LINEA. coverArt.jsp no se toca. */
    body.mainframe .mv-card-play {
        inset: auto 8px 8px auto;
        margin: 0;
        width: 28px;
        height: 28px;
        opacity: .9;
        transform: none;
        box-shadow: 0 4px 12px -5px rgba(0, 0, 0, .9);
    }
    body.mainframe .mv-card-play .mv-ico {
        width: 14px;
        height: 14px;
        margin-left: 1px;
    }

    body.mainframe .coverart .coverart-play,
    body.mainframe .coverart:hover .coverart-play { display: none !important; }

    /* Con el disco fuera, el velo inferior de la seccion 7 puede
       aclararse: la portada gana casi un 20% de superficie limpia. */
    body.mainframe .mv-card-art::after {
        background: linear-gradient(180deg, transparent 64%, rgba(4, 7, 11, .52) 100%);
    }

    /* --- 21.2 DEFECTO B2: esqueletos grises que nunca cargan -------- */
    /* mitv-home.js retira el riel cuando la consulta falla o vuelve
       vacia, pero si la peticion se queda colgada -sin respuesta, sin
       error y sin que salte ontimeout, cosa que ocurre en el WebView
       de Android al perder la red- el <section> se queda con su
       esqueleto para siempre. El guardian por tiempo vive en el JS
       (MITV_ROW_WATCHDOG_MS); aqui van las dos redes de seguridad de
       presentacion:
         - un riel marcado .is-empty desaparece;
         - el brillo del esqueleto no puede repetirse indefinidamente
           (prioridad C: "sin animaciones que se repitan solas"). */
    body.mainframe .mv-row.is-empty { display: none !important; }
    body.mainframe .mv-skel { animation-iteration-count: 4; }

    /* --- 21.3 DEFECTO B4: la vista Index (left.jsp) ------------------ */
    /* Esta vista no habia recibido NINGUN tratamiento movil: la
       seccion 16 la viste en escritorio y mitv-mobile.css no la
       menciona. De ahi los tres sintomas del ticket.

       El <select> de carpetas ("Todos los directorios" / "gratis"):
       body.mainframe select (seccion 14) NO le llega, porque este
       documento es body.leftframe. Quedaba el control nativo del
       sistema, blanco, de 30 px y desalineado con el resto.

       "Filtro y flechas encimados": .left-index-title es un flex con
       .left-index-shortcut-letter en flex-grow:1 y la flecha pegada
       al borde derecho, sin separacion ni objetivo tactil.

       "Letras gigantes, nombres diminutos": la cabecera de indice
       hereda font-size:105% del <body> del marco mientras que
       .left-index-shortcut-artist se declara font-weight:300 y
       font-size:inherit dentro de un contenedor ya reducido.

       Todo se corrige desde aqui: left.jsp NO se modifica. La
       especificidad body.leftframe (0,2,0) gana al <style> del propio
       JSP (0,1,0) aunque este cargue despues. */
    body.leftframe {
        padding: var(--mv-s4) var(--mv-gutter)
                 calc(60px + 28px + env(safe-area-inset-bottom, 0px));
    }

    /* Selector de carpeta: un control real, de ancho completo. */
    body.leftframe select,
    body.leftframe select[name="musicFolderId"] {
        width: 100% !important;
        min-height: 46px;
        padding: 11px 40px 11px 14px;
        border: 1px solid var(--mv-border-2);
        border-radius: var(--mv-r-sm);
        background-color: var(--mv-surface);
        background-image: linear-gradient(45deg, transparent 50%, var(--mv-text-2) 50%),
                          linear-gradient(135deg, var(--mv-text-2) 50%, transparent 50%);
        background-position: calc(100% - 19px) 21px, calc(100% - 14px) 21px;
        background-size: 5px 5px, 5px 5px;
        background-repeat: no-repeat;
        color: var(--mv-text);
        font-family: var(--mv-font);
        font-size: 16px;          /* 16px: evita el zoom automatico */
        font-weight: 650;
        line-height: 1.2;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    body.leftframe select option { background: var(--mv-surface); color: var(--mv-text); }

    /* Cabecera de letra: se queda pegada arriba al desplazar, con la
       letra a tamano de titulo normal -no de titular- y la flecha de
       "volver arriba" convertida en un objetivo tactil de 44 px, ya
       separada de la letra. */
    body.leftframe .left-index-title {
        position: sticky;
        top: 0;
        z-index: 2;
        gap: var(--mv-s2);
        margin: var(--mv-s5) 0 var(--mv-s2);
        padding: 9px 6px 9px 12px;
        border: 1px solid var(--mv-border);
        border-radius: var(--mv-r-sm);
        background: var(--mv-surface-2) !important;
        font-size: 15px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--mv-text);
    }
    body.leftframe .left-index-shortcut-letter {
        flex: 1 1 auto;
        padding-left: 0;
        font-size: 15px;
    }
    body.leftframe .left-index-shortcut-arrow {
        flex: 0 0 auto;
        display: inline-grid;
        place-items: center;
        width: 44px;
        height: 44px;
        margin: -9px -6px -9px 0;
        padding-right: 0;
    }
    /* La flecha de left.jsp es un chevron-left reutilizado: apunta
       hacia arriba, que es a donde lleva. */
    body.leftframe .left-index-shortcut-arrow .mv-ico {
        width: 20px;
        height: 20px;
        transform: rotate(90deg);
        color: var(--mv-primary);
    }

    /* Los nombres dejan de ser "diminutos": misma escala que el resto
       de la interfaz y una fila tactil por titulo. */
    body.leftframe .left-index-shortcut-artist,
    body.leftframe .left-menu-item.left-index-shortcut-artist {
        display: flex;
        align-items: center;
        min-height: 48px;
        margin-bottom: 3px;
        padding: 11px 14px;
        border-radius: var(--mv-r-sm);
        background: var(--mv-surface);
        color: var(--mv-text);
        font-size: 15.5px;
        font-weight: 600;
        line-height: 1.3;
    }
    body.leftframe .left-index-shortcut-artist .ellipsis {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body.leftframe .left-menu-item { min-height: 50px; font-size: 15.5px; }
    body.leftframe .mv-account-group h2 { font-size: 12px; padding: 0 2px; }

    /* Barra alfabetica: estaba en position:fixed dentro del iframe, o
       sea justo debajo de la barra de pestanas de la aplicacion, que
       la tapaba. Pasa a sticky con separacion propia y las letras se
       convierten en pastillas tactiles con desplazamiento lateral. */
    body.leftframe .mv-index-bar {
        position: sticky;
        bottom: 0;
        left: auto;
        width: auto;
        margin: var(--mv-s5) calc(-1 * var(--mv-gutter)) 0;
        padding: 10px var(--mv-gutter) 10px;
        gap: 8px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--mv-grad-chrome);
        border-top: 1px solid var(--mv-border);
    }
    body.leftframe .mv-index-bar::-webkit-scrollbar { display: none; }
    body.leftframe .mv-index-bar a {
        flex: 0 0 auto;
        display: inline-grid;
        place-items: center;
        min-width: 38px;
        min-height: 38px;
        padding: 0 6px;
        border: 1px solid var(--mv-border);
        border-radius: var(--mv-r-pill);
        background: var(--mv-surface);
        color: var(--mv-text);
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
    }

    /* --- 21.4 PRIORIDAD C: la portada manda -------------------------- */
    /* Tarjetas mas grandes y menos texto encima. --mv-card-w pasa de
       158 px (18.1) a 190 px: en un telefono de 360 px caben una y
       media, que es lo que hace legible un riel horizontal, y la
       portada gana un 45% de superficie. */
    :root { --mv-card-w: 190px; }

    /* Una sola linea de titulo y sin la fila "Curso / HD", que no
       aporta nada y robaba alto a la imagen. */
    body.mainframe .mv-card-title {
        -webkit-line-clamp: 1;
        min-height: 0;
    }
    body.mainframe .mv-card-meta { display: none; }
    body.mainframe .mv-card-body { gap: 3px; padding: 9px 10px 11px; }

    /* La rejilla del catalogo tambien pasa a dos columnas grandes. */
    body.mainframe .mv-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--mv-s4) var(--mv-s3);
    }

    /* Sin movimiento que se repita solo: el latido de la insignia
       "en directo" y el zoom de la portada al enfocar se detienen. */
    body.mainframe .mv-badge-live::before { animation: none; }
    body.mainframe .mv-card:hover .mv-card-art > img,
    body.mainframe .mv-card:focus .mv-card-art > img { transform: none; }
}

/* --- 21.5 Movil muy estrecho (hasta 359 px) --------------------------
   La seccion 18.1bis ya reducia --mv-card-w a 100% y la rejilla a una
   sola columna para estas pantallas, pero vive ANTES en el archivo y
   21.4 la pisaba. Se restituye aqui, despues, con la especificidad que
   hace falta para ganar tambien a `body.mainframe .mv-grid`. */
@media (max-width: 359px) {
    :root { --mv-card-w: 158px; }
    body.mainframe .mv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.leftframe .mv-index-bar a { min-width: 34px; min-height: 34px; font-size: 13px; }
}