/* =====================================================================
   MiTv 2.0 / LeCache - Capa mobile-first y app-shell  (MITV-910)
   CNT EP - O&M Redes IP
   ---------------------------------------------------------------------
   Se carga DESPUES de black.css y del bloque LECACHE_GLOBAL_RESPONSIVE v1
   de head.jsp, en todas las vistas (head.jsp es include global).
   Identidad conservada: oscuro #0d1016 + acento #8ecbff.
   Regla: no introduce anchos fijos; nada puede ampliar el ancho de pagina.
   ===================================================================== */

/* ---------- 0. Tokens ---------- */
:root {
    --mitv-bg:        #0a0d12;
    --mitv-bg-2:      #0d1016;
    --mitv-panel:     #151a22;
    --mitv-panel-2:   #1b222c;
    --mitv-border:    #232b36;
    --mitv-border-2:  #2c3644;
    --mitv-text:      #eef2f7;
    --mitv-muted:     #93a1b3;
    --mitv-accent:    #8ecbff;
    --mitv-ink:       #08121d;
    --mitv-topbar-h:  52px;
    --mitv-tabbar-h:  58px;
    --mitv-safe-t:    env(safe-area-inset-top, 0px);
    --mitv-safe-b:    env(safe-area-inset-bottom, 0px);
    --mitv-safe-l:    env(safe-area-inset-left, 0px);
    --mitv-safe-r:    env(safe-area-inset-right, 0px);
}

/* ---------- 1. Cero descuadre: base global ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Nota: NO se fija width:100% en body. base.css le da margin:0.75em en
   desktop; con width:100% ese margen desbordaria 24 px la pagina. El ancho
   automatico del bloque ya resuelve el 100% util. */
html {
    width: 100%;
    max-width: 100%;
}
html, body {
    max-width: 100%;
    overflow-x: hidden;           /* ninguna vista genera scroll horizontal */
    overscroll-behavior-x: none;  /* sin rebote lateral en movil */
}

/* Medios responsive por defecto (no toca miniaturas con tamano explicito
   en desktop: solo garantiza que nunca superen el contenedor) */
img, video, canvas, svg, iframe, embed, object {
    max-width: 100%;
}
img, video { height: auto; }

/* Formularios y tablas: nunca mas anchos que el viewport */
input, select, textarea, button { max-width: 100%; }
table { max-width: 100%; }

/* Palabras muy largas (nombres de curso tipo A_B_C) no ensanchan la pagina */
h1, h2, h3, .caption1, .caption2, .caption3, .video-title, .mitv-title, .detail {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Barras de desplazamiento acordes al tema (evita franjas blancas del
   scrollbar clasico en los contenedores con scroll propio) */
* { scrollbar-color: #3a4658 transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3a4658; border-radius: 4px; }
::-webkit-scrollbar-corner { background: transparent; }

/* Contenedor de tablas heredadas (lo crea mitv-mobile.js) */
.mitv-tablewrap { display: contents; }
.mitv-tablewrap.is-layout { display: contents; }

/* Rejilla para miniaturas heredadas (.albumThumb) (la crea mitv-mobile.js) */
.mitv-thumbgrid { display: contents; }

/* =====================================================================
   2. APP SHELL (index.jsp) - solo aplica al documento contenedor
   ===================================================================== */
body.mitv-shell {
    margin: 0;
    padding: 0;
    background: var(--mitv-bg);
    overflow: hidden;
    overscroll-behavior: none;
}

.mitv-app {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100vw;
    height: 100%;
    height: 100svh;   /* viewport pequeno: no queda contenido bajo la barra */
    height: 100dvh;   /* viewport dinamico: sin franja al mostrar/ocultar barras */
    min-height: 100%;
    overflow: hidden;
    padding-left: var(--mitv-safe-l);
    padding-right: var(--mitv-safe-r);
    background: var(--mitv-bg);
}

.mitv-app > #upper {
    flex: 0 0 56px;
    height: 56px;
    width: 100%;
    border: 0;
    display: block;
}

.mitv-main-wrap {
    flex: 1 1 auto;
    min-height: 0;          /* clave: evita que el iframe empuje el layout */
    width: 100%;
    display: flex;
    background: var(--mitv-bg);
}

.mitv-app > .mitv-main-wrap > #main {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* --- Barra superior movil (oculta en desktop) --- */
.mitv-topbar {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: calc(var(--mitv-topbar-h) + var(--mitv-safe-t));
    padding: var(--mitv-safe-t) 10px 0 12px;
    background: linear-gradient(180deg, #151a22 0%, #10141b 100%);
    border-bottom: 1px solid var(--mitv-border);
    color: var(--mitv-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.mitv-brand {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--mitv-text);
    background: none;
    border: 0;
    padding: 6px 2px;
    cursor: pointer;
    white-space: nowrap;
    min-width: 0;
}
.mitv-brand .fa { color: var(--mitv-accent); font-size: 18px; }
.mitv-brand span { overflow: hidden; text-overflow: ellipsis; }

.mitv-topbar-spacer { flex: 1 1 auto; min-width: 0; }

.mitv-iconbtn {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--mitv-accent);
    font-size: 19px;
    cursor: pointer;
    padding: 0;
}
.mitv-iconbtn:active { background: rgba(142, 203, 255, 0.14); }

/* Buscador expandible: ocupa el ancho real disponible, nunca lo supera */
.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 .mitv-iconbtn.js-search-open { display: none; }

.mitv-search input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    padding: 9px 14px;
    border-radius: 20px;
    font-size: 16px;          /* 16px evita el zoom automatico en iOS */
    outline: none;
}
.mitv-search input::placeholder { color: #8b97a6; }
.mitv-search input:focus { border-color: var(--mitv-accent); background: rgba(255, 255, 255, 0.12); }

/* --- Barra de navegacion inferior tipo app (oculta en desktop) --- */
.mitv-tabbar {
    display: none;
    flex: 0 0 auto;
    width: 100%;
    height: calc(var(--mitv-tabbar-h) + var(--mitv-safe-b));
    padding-bottom: var(--mitv-safe-b);
    background: linear-gradient(180deg, #10141b 0%, #0b0e13 100%);
    border-top: 1px solid var(--mitv-border);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.mitv-tab {
    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(--mitv-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.005em;
    padding: 6px 1px;
    line-height: 1.2;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mitv-tab .fa { font-size: 19px; line-height: 1; }
.mitv-tab span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mitv-tab.active { color: var(--mitv-accent); }
.mitv-tab:active { color: var(--mitv-text); }

/* --- Hoja inferior "Mas" --- */
.mitv-sheet-bd {
    position: fixed;
    inset: 0;
    background: rgba(4, 7, 11, 0.62);
    z-index: 40;
    display: none;
}
.mitv-sheet-bd.open { display: block; }

.mitv-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 41;
    max-width: 100vw;
    background: var(--mitv-panel);
    border-top: 1px solid var(--mitv-border);
    border-radius: 16px 16px 0 0;
    padding: 8px 10px calc(12px + var(--mitv-safe-b));
    transform: translateY(102%);
    transition: transform 0.22s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.mitv-sheet.open { transform: translateY(0); }
.mitv-sheet-grip {
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: #3a4658;
    margin: 4px auto 10px;
}
.mitv-sheet a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 12px;
    color: var(--mitv-text);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
}
.mitv-sheet a .fa { color: var(--mitv-accent); width: 22px; text-align: center; font-size: 17px; }
.mitv-sheet a:active { background: var(--mitv-panel-2); }

/* =====================================================================
   3. Reglas mobile de las vistas internas (iframe "main")
   ===================================================================== */
/* Condicion "movil": ancho de telefono O telefono en horizontal (poca altura).
   Un telefono apaisado mide 844x390: por ancho seria "desktop", pero debe
   seguir usando la navegacion de app. */
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) {

    /* --- app shell: cambia a cabecera + tabbar propias --- */
    .mitv-app > #upper { display: none; }
    .mitv-topbar { display: flex; }
    .mitv-tabbar { display: flex; }

    /* --- documentos internos --- */
    body.mainframe {
        /* Fondo unificado con el Home: aspecto de app, no de web heredada */
        background: linear-gradient(180deg, #0d1016 0%, #0a0d12 100%) !important;
        color: var(--mitv-text);
        margin: 0;
        padding-left: max(12px, var(--mitv-safe-l)) !important;
        padding-right: max(12px, var(--mitv-safe-r)) !important;
        padding-top: 12px !important;
        padding-bottom: 28px !important;
    }

    /* Miniaturas heredadas (.albumThumb de albumMain/search/starred/...)
       agrupadas por mitv-mobile.js en .mitv-thumbgrid */
    .mitv-thumbgrid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
        gap: 12px;
        width: 100%;
        max-width: 100%;
        clear: both;
    }
    .mitv-thumbgrid > .albumThumb {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        vertical-align: top;
    }
    .mitv-thumbgrid .coverart {
        width: 100% !important;
        max-width: 100% !important;
        background: var(--mitv-panel) !important;
        border: 1px solid var(--mitv-border);
        border-radius: 12px;
        overflow: hidden;
        color: var(--mitv-text) !important;
    }
    /* El primer div interno lleva width/height inline en px: se neutraliza */
    .mitv-thumbgrid .coverart > div {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
    }
    .mitv-thumbgrid .coverart img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        aspect-ratio: 16 / 9;      /* proporcion uniforme en todas las cards */
        object-fit: cover;
        object-position: center;
        display: block;
        background: #12325a;
    }
    /* Titulos: 2 lineas exactas -> todas las cards miden igual */
    .mitv-thumbgrid .caption1 {
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 2.7em;
        line-height: 1.35 !important;
        padding: 9px 10px 2px !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        color: var(--mitv-text) !important;
    }
    .mitv-thumbgrid .caption1 a { color: var(--mitv-text) !important; text-decoration: none; }
    .mitv-thumbgrid .caption2,
    .mitv-thumbgrid .caption3 {
        width: 100% !important;
        max-width: 100% !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0 10px 8px !important;
        font-size: 12px !important;
        color: var(--mitv-muted) !important;
    }
    /* Duracion / formato sobre la portada */
    .mitv-thumbgrid .video-duration,
    .mitv-thumbgrid .video-format {
        font-size: 11px !important;
        background: rgba(6, 9, 14, 0.78);
        color: #dfe8f2 !important;
        padding: 2px 6px;
        border-radius: 5px;
    }

    /* Tablas heredadas: scroll propio, nunca del documento */
    .mitv-tablewrap {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;          /* sin franja blanca de scrollbar */
        -ms-overflow-style: none;
        overscroll-behavior-x: contain;
    }
    .mitv-tablewrap::-webkit-scrollbar { display: none; }

    /* Tablas de maquetacion (paginador del home, barras de acciones):
       en lugar de scroll lateral, sus celdas fluyen y se envuelven. */
    .mitv-tablewrap.is-layout { overflow: visible; }
    .mitv-tablewrap.is-layout > table,
    .mitv-tablewrap.is-layout > table > tbody,
    .mitv-tablewrap.is-layout > table > tbody > tr {
        display: block;
        width: 100%;
        max-width: 100%;
    }
    .mitv-tablewrap.is-layout > table > tbody > tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 14px;
    }
    .mitv-tablewrap.is-layout td {
        display: inline-flex;
        align-items: center;
        padding: 4px 0 !important;
        max-width: 100%;
    }
    .mitv-tablewrap.is-layout select { max-width: 60vw; }

    /* Elementos absolutos/fijos heredados no pueden salirse */
    body.mainframe [style*="position:absolute"],
    body.mainframe [style*="position: absolute"] { max-width: 100%; }

    /* Cabeceras largas */
    body.mainframe h1.ellipsis,
    body.mainframe .ellipsis {
        white-space: normal !important;
        overflow: hidden;
    }

    /* Selects y buscadores heredados */
    body.mainframe select { max-width: 100%; }
}

/* Movil pequeno: una sola columna legible */
@media (max-width: 359px) {
    .mitv-thumbgrid { grid-template-columns: 1fr; gap: 10px; }
    .mitv-tab { font-size: 9.5px; }
    .mitv-tab .fa { font-size: 18px; }
}

/* Movil en horizontal: barras mas bajas para no comerse el video */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    :root { --mitv-topbar-h: 44px; --mitv-tabbar-h: 44px; }
    .mitv-tab span { display: none; }
    .mitv-tab .fa { font-size: 18px; }
    body.mainframe { padding-top: 8px !important; padding-bottom: 14px !important; }
    .mitv-thumbgrid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .mitv-thumbgrid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
        gap: 16px;
    }
    .mitv-thumbgrid > .albumThumb { width: 100% !important; padding: 0 !important; }
    .mitv-thumbgrid .coverart { width: 100% !important; }
    .mitv-thumbgrid .coverart > div { width: 100% !important; height: auto !important; }
    .mitv-thumbgrid .coverart img { width: 100% !important; height: auto !important; aspect-ratio: 16/9; object-fit: cover; }
    .mitv-thumbgrid .caption1,
    .mitv-thumbgrid .caption2,
    .mitv-thumbgrid .caption3 { width: 100% !important; }
}

@media (prefers-reduced-motion: reduce) {
    .mitv-sheet { transition: none; }
}

/* ---------- 4. Estados del shell ---------- */
.mitv-topbar .js-search-close { display: none; }
.mitv-topbar.searching .js-search-close { display: inline-grid; }

/* Modo inmersivo: reproductor en horizontal ocupa toda la pantalla */
body.mitv-shell.immersive .mitv-topbar,
body.mitv-shell.immersive .mitv-tabbar { display: none !important; }

/* Fallback para navegadores sin dvh (se activa desde index.jsp) */
.mitv-app.js-fixed-height { height: auto; }