/* Render de la Home personalizable del alumno y de su preview integral.
   Vivía inline en _StudentHomeResolvedContent; se movió acá porque el proyecto no admite
   estilos inline (salvo los tokens de tema que emite el layout) y porque ahora lo comparten
   la Home real y el preview del profesor.
   Todo color sale de los tokens --theme-*: la paleta la define el tenant, no esta hoja. */

.student-home-resolved {
    display: flex;
    flex-direction: column;
    gap: var(--skin-section-gap, 1.5rem);
}

.student-home-custom-section,
.student-home-system-card,
.student-home-empty-card {
    background: var(--theme-surface, #fff);
    border: 1px solid var(--theme-border, rgba(var(--theme-primary-rgb, 13, 110, 253), .18));
    border-radius: var(--skin-card-radius, 16px);
    padding: 1.25rem;
}

.student-home-custom-section {
    --student-home-media-aspect-ratio: 16 / 9;
    display: grid;
    gap: 1rem;
}

.student-home-callout {
    padding: 1rem;
    background: var(--theme-surface-2, rgba(var(--theme-primary-rgb, 13, 110, 253), .06));
    border-left: 4px solid var(--theme-primary, #0d6efd);
    border-radius: 8px;
}

/* ⚠️ --theme-quaternary es un ALIAS de --theme-on-surface (ver theme-tokens.css):
   el borde del destacado "atención" quedaba del color del texto. El semántico real
   es --theme-warning, verificado a contraste en los dos modos. */
.student-home-callout-success { border-left-color: var(--theme-success, #157347); }
.student-home-callout-warning { border-left-color: var(--theme-warning, #8a6400); }
.student-home-callout-neutral { border-left-color: var(--theme-on-surface-muted, #6c757d); }

.student-home-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .8rem;
}

.student-home-richtext :last-child { margin-bottom: 0; }

.student-home-file {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.student-home-divider-dashed { border-top-style: dashed; }
.student-home-divider-subtle { opacity: .35; }
.student-home-divider-small { margin: .5rem 0; }
.student-home-divider-large { margin: 2rem 0; }

.student-home-icon-small { font-size: 1rem; }
.student-home-icon-medium { font-size: 1.5rem; }
.student-home-icon-large { font-size: 2.25rem; }

.student-home-carousel-file {
    display: grid;
    place-items: center;
    background: var(--theme-surface-2, rgba(var(--theme-primary-rgb, 13, 110, 253), .06));
    border-radius: 12px;
}

/* Todos los bloques visuales comparten la misma proporción, sin importar si la sección
   nació de un template o desde cero. El marco panorámico evita que una imagen vertical
   convierta el posteo en una pantalla entera; contain preserva la obra sin recortarla. */
.student-home-media-frame,
.sh-strip--media .sh-strip__frame,
.student-home-carousel .carousel-item > img,
.student-home-carousel .carousel-item > video,
.student-home-carousel .carousel-item > .ratio,
.student-home-carousel .carousel-item > .student-home-carousel-file,
.student-home-carousel .carousel-item > .student-home-placeholder {
    width: 100%;
    aspect-ratio: var(--student-home-media-aspect-ratio, 16 / 9);
    max-height: 30rem;
}

.student-home-media-frame {
    position: relative;
    overflow: hidden;
    justify-self: center;
    border: 1px solid var(--theme-border);
    border-radius: 14px;
    background: var(--theme-surface-2);
}

.student-home-media-frame > img,
.student-home-media-frame > video,
.student-home-media-frame > iframe,
.student-home-media-frame > .student-home-media-link,
.student-home-media-frame > .student-home-placeholder,
.student-home-media-frame > .student-home-media-link > img {
    width: 100%;
    height: 100%;
}

.student-home-media-frame > img,
.student-home-media-frame > video,
.student-home-media-frame > .student-home-media-link > img {
    display: block;
    object-fit: contain;
}

.student-home-media-frame > iframe {
    display: block;
    border: 0;
}

.student-home-media-frame > .student-home-media-link {
    display: block;
}

.student-home-media-frame > .student-home-placeholder {
    min-height: 0;
    border: 0;
    border-radius: 0;
}

.student-home-media figcaption {
    margin-top: .5rem;
    color: var(--theme-on-surface-muted);
    font-size: .85rem;
    text-align: center;
}

.student-home-carousel .carousel-item > img,
.student-home-carousel .carousel-item > video {
    height: auto;
    object-fit: contain;
    background: var(--theme-surface-2, rgba(var(--theme-primary-rgb, 13, 110, 253), .06));
}

.student-home-carousel .carousel-item > .ratio,
.student-home-carousel .carousel-item > .student-home-carousel-file,
.student-home-carousel .carousel-item > .student-home-placeholder {
    min-height: 0;
}

/* Las flechas de Bootstrap son un PNG blanco: sobre un carrusel claro desaparecen. */
.student-home-carousel .carousel-control-prev-icon,
.student-home-carousel .carousel-control-next-icon {
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, .75));
}

/* Marcador de un recurso que todavía no tiene fila: sólo aparece en el preview. */
.student-home-placeholder {
    display: grid;
    place-items: center;
    min-height: 8rem;
    padding: 1rem;
    border: 1px dashed var(--theme-border, rgba(var(--theme-primary-rgb, 13, 110, 253), .35));
    border-radius: 12px;
    background: var(--theme-surface-2, rgba(var(--theme-primary-rgb, 13, 110, 253), .06));
    color: var(--theme-body-muted, #6c757d);
    font-size: .875rem;
    text-align: center;
}

.student-home-placeholder--inline {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 0;
    padding: .35rem .75rem;
}

@media (max-width: 575.98px) {
    .student-home-custom-section,
    .student-home-system-card,
    .student-home-empty-card { padding: 1rem; }

    .student-home-gallery { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* ── Tira deslizable (galería, carrusel de cursos) ────────────────────────────
   Estilo Instagram: se corre de a uno con el dedo o con las flechas, y el
   elemento activo queda CENTRADO con los vecinos asomando, que es lo que avisa
   que hay más al costado.

   Es CSS scroll-snap puro, sin librería: el gesto táctil y el scroll con rueda
   o trackpad los hace el navegador. El JS sólo agrega flechas y puntitos. */

.sh-strip { position: relative; }

.sh-strip__track {
    display: flex;
    gap: .85rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* La barra se oculta porque ya están las flechas y los puntitos; el scroll
       con el dedo y con el teclado sigue funcionando igual. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: .15rem .1rem .3rem;
    margin: 0 -.1rem;
}

.sh-strip__track::-webkit-scrollbar { display: none; }

.sh-strip__track:focus-visible {
    outline: 2px solid var(--theme-primary);
    outline-offset: 3px;
    border-radius: 12px;
}

.sh-strip__item {
    flex: 0 0 auto;
    scroll-snap-align: center;
    margin: 0;
}

/* Galería: la imagen activa domina, pero las vecinas quedan recortadas a ambos
   lados. El marco usa contain para no cortar la obra dentro de su propia tarjeta;
   el recorte lateral pertenece al carrusel y deja claro que se puede deslizar. */
.sh-strip--media .sh-strip__item { width: 78%; }

.sh-strip--media .sh-strip__track {
    margin-inline: -1.25rem;
    padding-inline: 0;
    scroll-padding-inline: 11%;
}

/* ⚠️ El marco es position:relative y la imagen va absoluta, NO un grid con
   place-items:center. Con grid, la fila se dimensiona por su contenido y el
   height:100% de la imagen queda circular: el navegador lo resuelve como auto,
   la imagen conserva su alto natural y el overflow:hidden la RECORTA. Medido:
   una imagen de 600×850 se renderizaba 560×794 dentro de un marco de 450 de alto,
   o sea cortada por la mitad. En una academia de arte eso es inaceptable. */
.sh-strip--media .sh-strip__frame {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: var(--theme-surface-2);
    border: 1px solid var(--theme-border);
}

.sh-strip--media .sh-strip__frame img,
.sh-strip--media .sh-strip__frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* contain y no cover: se ve la obra entera, aunque queden bandas al costado. */
    object-fit: contain;
    border-radius: 0;
}

.sh-strip--media .sh-strip__frame .student-home-placeholder {
    position: absolute;
    inset: 0;
    border: none;
    border-radius: 0;
}

.sh-strip--media figcaption {
    margin-top: .5rem;
    font-size: .85rem;
    color: var(--theme-on-surface-muted);
    text-align: center;
}

/* Tarjetas de curso: se ven unas tres y media en escritorio y una y pico en el
   teléfono, así que siempre queda claro que la fila sigue. */
.sh-strip--cards .sh-strip__item { width: min(82%, 19rem); }

@media (min-width: 768px) {
    .sh-strip--cards .sh-strip__item { width: 17.5rem; }
}

.sh-strip--cards .sh-strip__item > * { height: 100%; }

/* Flechas. Se ocultan solas cuando no hay nada para correr, y en pantallas
   táctiles chicas tampoco aparecen: ahí el gesto es el modo natural. */
.sh-strip__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--theme-border);
    border-radius: 50%;
    background: var(--theme-surface);
    color: var(--theme-on-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
    cursor: pointer;
    opacity: .96;
}

.sh-strip__nav:hover { border-color: var(--theme-primary); color: var(--theme-primary); }
.sh-strip__nav:focus-visible { outline: 2px solid var(--theme-primary); outline-offset: 2px; }
.sh-strip__nav[hidden] { display: none; }
.sh-strip__nav--prev { left: -.6rem; }
.sh-strip__nav--next { right: -.6rem; }

.sh-strip--media .sh-strip__nav { top: calc(50% - 1rem); }

/* Puntitos: sólo en la galería, donde el total es chico (2 a 10) y sirven para
   saber en cuál estás. */
.sh-strip__dots {
    display: flex;
    justify-content: center;
    gap: .35rem;
    margin-top: .7rem;
}

.sh-strip__dots:empty { display: none; }

.sh-strip__dot {
    width: .5rem;
    height: .5rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--theme-border);
    cursor: pointer;
}

.sh-strip__dot.is-on {
    background: var(--theme-primary);
    transform: scale(1.25);
}

.sh-strip__dot:focus-visible { outline: 2px solid var(--theme-primary); outline-offset: 2px; }

@media (max-width: 575.98px) {
    .sh-strip__nav { display: none; }
    .sh-strip--media .sh-strip__item { width: 86%; }
    .sh-strip--media .sh-strip__track {
        margin-inline: -1rem;
        padding-inline: 0;
        scroll-padding-inline: 7%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sh-strip__track { scroll-behavior: auto; }
    .sh-strip__dot.is-on { transform: none; }
}

/* ── Video suelto ────────────────────────────────────────────────────────────
   Aprovecha el ancho útil de la sección, con un techo amplio sólo para evitar
   que una pantalla ultrawide lo vuelva desproporcionado. */
/* ⚠️ width explícito, NO sólo max-width. La sección personalizada es display:grid,
   y en un grid item el margin-inline:auto anula el stretch: el ancho pasa a
   fit-content y el .ratio de Bootstrap (que es width:100%) colapsa a CERO.
   Medido: el bloque de video desaparecía entero. */
.student-home-video {
    width: min(100%, 70rem);
    margin-inline: auto;
    justify-self: center;
}

/* ── Galería en cuadrícula ───────────────────────────────────────────────────
   Todas las fotos a la vista, como miniaturas cuadradas. La miniatura RECORTA
   (cover) para que la grilla quede pareja; la obra entera se ve al tocarla, en
   el modal .sh-lightbox, que usa contain. */
.sh-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
}

@media (max-width: 575.98px) {
    .sh-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
}

.sh-gallery-grid__item { margin: 0; min-width: 0; }

.sh-gallery-grid__open,
.sh-gallery-grid__item > .student-home-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    background: var(--theme-surface-2);
}

.sh-gallery-grid__open { cursor: zoom-in; transition: transform .15s ease, box-shadow .15s ease; }
.sh-gallery-grid__open:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(var(--theme-primary-rgb, 13, 110, 253), .18); }
.sh-gallery-grid__open:focus-visible { outline: 2px solid var(--theme-primary); outline-offset: 3px; }

.sh-gallery-grid__open > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sh-gallery-grid figcaption {
    margin-top: .35rem;
    color: var(--theme-on-surface-muted);
    font-size: .8rem;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .sh-gallery-grid__open { transition: none; }
    .sh-gallery-grid__open:hover { transform: none; }
}

/* Modal de la imagen ampliada (cuadrícula). Superficie del tema, nunca blanco fijo:
   en un preset oscuro un modal blanco encandila. */
.sh-lightbox .modal-content {
    background: var(--theme-surface, var(--theme-background));
    color: var(--theme-on-surface);
    border: 1px solid var(--theme-border);
}

.sh-lightbox__count { color: var(--theme-on-surface-muted); font-size: .9rem; }

.sh-lightbox__img {
    display: block;
    width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 10px;
    background: var(--theme-surface-2);
}

.sh-lightbox__caption {
    margin: .65rem 0 0;
    color: var(--theme-on-surface-muted);
    text-align: center;
}

.sh-lightbox .modal-footer { justify-content: space-between; }

/* La cruz de Bootstrap es un SVG oscuro: en modo oscuro se invierte, como en .manual-access. */
.theme-mode-dark .sh-lightbox .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* Sección pública en la portada (_HomeBodyRubro, #destacado): la misma tarjeta que en la
   Home del alumno, con un ancho de lectura para que una galería no ocupe toda la pantalla. */
/* Con el id: site.css tiene "#homeScroll > .scroll-section:not(#inicio) > * { max-width:
   1140px }" y, sin id, le ganaba (medido en test: la tarjeta a 1140px y el video a 1098×480). */
#homeScroll > #destacado > .home-public-section__list {
    max-width: 920px;
    margin-inline: auto;
    display: grid;
    gap: var(--skin-section-gap, 1.5rem);
}
/* Un video a todo el ancho de la tarjeta tapaba la pantalla en escritorio. */
#destacado .home-public-section__inner .student-home-video { width: min(100%, 44rem); }
/* En la portada los h2/h3 heredan el margen de los títulos de sección (40px): dentro de la
   tarjeta el espacio lo pone el gap de la grilla, igual que en la Home del alumno. */
.home-public-section__inner.student-home-custom-section > :is(h2, h3) { margin: 0; }