/* ═══════════════════════════════════════════════════════════════
   CODEX VESTIGIA - MOBILE ENHANCEMENTS
   Este archivo contiene SOLO estilos para móvil.
   No afecta en absoluto la versión de escritorio.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   MOBILE-ONLY MEDIA QUERY (max-width: 768px)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ───────────────────────────────────────────────────────────
       VARIABLES MÓVIL - Espaciados más compactos
       ─────────────────────────────────────────────────────────── */
    :root {
        --space-xs: 0.375rem;
        --space-sm: 0.75rem;
        --space-md: 1.25rem;
        --space-lg: 2rem;
        --space-xl: 3rem;
    }

    /* ───────────────────────────────────────────────────────────
       HERO SECTION - Más compacto e impactante
       ─────────────────────────────────────────────────────────── */
    .hero {
        min-height: 28vh;
        padding: var(--space-lg) var(--space-sm);
        padding-top: calc(var(--space-lg) + env(safe-area-inset-top));
    }

    .hero::before {
        width: 300px;
        height: 300px;
    }

    .hero-title {
        font-size: clamp(2.2rem, 14vw, 3.5rem);
        letter-spacing: 0.08em;
        line-height: 1.1;
    }

    /* Logo header móvil */
    .hero-logo-container {
        gap: 0.3rem;
    }

    .hero-logo-book {
        width: 60px;
    }

    .hero-logo-text {
        width: min(600px, 92vw);
    }

    .hero-subtitle {
        font-size: 0.7rem;
        letter-spacing: 0.3em;
        margin-top: var(--space-xs);
        padding: 0 var(--space-sm);
    }

    .hero-line {
        width: 80px;
        margin-top: var(--space-sm);
    }

    /* ───────────────────────────────────────────────────────────
       NAVIGATION - Scroll horizontal suave
       ─────────────────────────────────────────────────────────── */
    .navigation {
        padding: var(--space-xs) 0;
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .nav-container {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--space-xs);
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        padding: var(--space-xs) var(--space-sm);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 var(--space-sm);
    }

    .nav-container::-webkit-scrollbar {
        display: none;
    }

    .nav-btn {
        flex-shrink: 0;
        padding: 0.5rem 0.9rem;
        font-size: 0.7rem;
        letter-spacing: 0.08em;
        border-radius: 20px;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    .nav-btn:hover {
        transform: none;
    }

    .nav-btn:active {
        transform: scale(0.96);
        transition: transform 0.1s ease;
    }

    /* ───────────────────────────────────────────────────────────
       SHOWCASE SECTIONS - Diferenciación clara entre secciones
       ─────────────────────────────────────────────────────────── */
    .archivista-showcase {
        margin: 0 var(--space-xs);
        margin-top: var(--space-xl);
        padding: var(--space-md) var(--space-sm);
        padding-top: 0;
        border-radius: 12px;
        position: relative;
    }

    /* Primera sección sin margen superior extra */
    .archivista-showcase:first-of-type {
        margin-top: var(--space-md);
    }

    .showcase-corner {
        width: 16px;
        height: 16px;
    }

    .showcase-corner::before {
        width: 16px;
    }

    .showcase-corner::after {
        height: 16px;
    }

    /* Header de sección - MUY visible en móvil */
    .showcase-header {
        margin-bottom: var(--space-md);
        margin-left: calc(-1 * var(--space-sm));
        margin-right: calc(-1 * var(--space-sm));
        padding: var(--space-md) var(--space-sm);
        flex-direction: column;
        gap: var(--space-xs);
        background: linear-gradient(
            180deg,
            rgba(212, 175, 55, 0.12) 0%,
            rgba(212, 175, 55, 0.04) 60%,
            transparent 100%
        );
        border-top: 2px solid rgba(212, 175, 55, 0.4);
        position: relative;
    }

    /* Línea decorativa superior del header */
    .showcase-header::before {
        content: '';
        position: absolute;
        top: -8px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: linear-gradient(90deg, transparent, var(--gold-metallic), transparent);
        border-radius: 2px;
    }

    .showcase-header-line {
        display: none;
    }

    .showcase-header-content {
        padding: 0;
    }

    .showcase-emblem {
        width: 42px;
        height: 42px;
        padding: 8px;
        margin-bottom: var(--space-xs);
        background: rgba(212, 175, 55, 0.15);
        border: 1px solid rgba(212, 175, 55, 0.3);
    }

    .showcase-title {
        font-size: 1.25rem;
        letter-spacing: 0.15em;
    }

    .showcase-subtitle {
        font-size: 0.7rem;
        letter-spacing: 0.12em;
        opacity: 0.8;
    }

    /* ───────────────────────────────────────────────────────────
       BOOKS GRID - Grid 2 columnas optimizado
       ─────────────────────────────────────────────────────────── */
    .books-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-sm) !important;
    }

    .showcase-content .books-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-sm) !important;
    }

    .library {
        padding: var(--space-md) var(--space-sm);
    }

    /* ───────────────────────────────────────────────────────────
       BOOK CARD - Diseño móvil mejorado
       ─────────────────────────────────────────────────────────── */
    .book-card {
        border-radius: 12px;
        padding: var(--space-xs);
        padding-bottom: var(--space-sm);
        max-width: none !important;
    }

    .book-cover-container {
        border-radius: 8px;
        overflow: hidden;
    }

    .book-cover {
        border-radius: 8px;
    }

    .book-info {
        padding: var(--space-xs) 0.25rem 0;
    }

    .book-title {
        font-size: 0.85rem;
        line-height: 1.25;
        margin-bottom: 0.2rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .book-author {
        font-size: 0.65rem;
        margin-bottom: 0.3rem;
    }

    .book-quote-preview {
        display: none;
    }

    /* ───────────────────────────────────────────────────────────
       MODAL - Experiencia fullscreen mejorada
       ─────────────────────────────────────────────────────────── */
    .modal-backdrop {
        padding: 0;
        align-items: stretch;
    }

    .modal-content {
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        background: var(--slate-950);
    }

    .modal-content-cronista-full {
        max-width: 100%;
    }

    /* Botón cerrar - posición fija fuera del contenido del modal */
    .modal-close {
        position: fixed;
        top: max(12px, env(safe-area-inset-top));
        right: 12px;
        width: 44px;
        height: 44px;
        background: rgba(2, 6, 23, 0.95);
        border: 1px solid var(--slate-600);
        border-radius: 50%;
        z-index: 1002;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    }

    .modal-close:active {
        transform: scale(0.92);
        background: rgba(2, 6, 23, 1);
    }

    /* Grid a una columna con mejor flujo */
    .cronista-full-grid {
        grid-template-columns: 1fr;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* Contenido principal con mejor padding */
    .cronista-full-content {
        padding: var(--space-md) var(--space-sm);
        padding-top: calc(60px + env(safe-area-inset-top));
        padding-bottom: calc(90px + env(safe-area-inset-bottom));
    }

    .cronista-full-layout {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-sm);
    }

    /* Portada más grande y centrada */
    .cronista-full-cover {
        width: 45%;
        max-width: 180px;
        margin-bottom: var(--space-sm);
    }

    .cronista-full-cover-inner {
        box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.7),
            0 0 40px rgba(212, 175, 55, 0.1);
    }

    /* Texto centrado con mejor legibilidad */
    .cronista-full-texto {
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .cronista-full-texto .modal-divider {
        margin-left: auto;
        margin-right: auto;
        max-width: 180px;
    }

    /* Título del libro */
    .modal-title {
        font-size: 1.5rem;
        line-height: 1.2;
        margin-bottom: var(--space-xs);
    }

    .modal-author-label {
        font-size: 0.75rem;
        margin-bottom: var(--space-xs);
    }

    .modal-divider {
        margin: var(--space-sm) auto;
    }

    /* Sinopsis con mejor tipografía */
    .modal-synopsis {
        font-size: 0.95rem;
        line-height: 1.75;
        margin-bottom: var(--space-sm);
        text-align: left;
        padding: 0 var(--space-xs);
    }

    /* Cita destacada */
    .modal-quote {
        padding: var(--space-sm);
        margin: var(--space-sm) 0;
        border-radius: 8px;
        background: rgba(212, 175, 55, 0.05);
        border-left: 3px solid var(--gold-metallic);
    }

    .modal-quote p {
        font-size: 0.9rem;
        line-height: 1.6;
        font-style: italic;
    }

    /* ADN Narrativo compacto */
    .cronista-full-dna {
        margin-top: var(--space-sm);
        padding-top: var(--space-sm);
    }

    .neon-label {
        font-size: 0.6rem;
        margin-bottom: var(--space-xs);
        letter-spacing: 0.15em;
    }

    .neon-bar-container {
        height: 14px;
        border-radius: 7px;
    }

    .neon-legend {
        margin-top: var(--space-sm);
        gap: var(--space-sm);
        flex-wrap: wrap;
        justify-content: center;
        display: flex;
    }

    .neon-legend-item {
        flex-direction: column;
        gap: 0.15rem;
        align-items: center;
        text-align: center;
        min-width: 55px;
    }

    .neon-value {
        font-size: 1.1rem;
        font-weight: 600;
        order: 1;
    }

    .cronista-full-dna .neon-value {
        font-size: 1.1rem;
    }

    .neon-name {
        font-size: 0.5rem;
        order: 2;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        opacity: 0.85;
    }

    /* ═══════════════════════════════════════════════════════════════
       ESPECTRO VERTICAL MÓVIL (solo para libros con dna-vertical-mobile)
       ═══════════════════════════════════════════════════════════════ */

    /* Contenedor principal - forzar ancho completo */
    .dna-vertical-mobile {
        width: 100% !important;
        max-width: none !important;
        text-align: left;
    }

    /* Título Espectro más grande */
    .dna-vertical-mobile .neon-label {
        font-size: 0.85rem;
        letter-spacing: 0.2em;
        margin-bottom: var(--space-md);
        text-align: left;
    }

    /* Ocultar barra horizontal y leyenda en versión vertical */
    .dna-vertical-mobile .neon-bar-container,
    .dna-vertical-mobile .neon-legend {
        display: none;
    }

    /* Mostrar versión vertical */
    .dna-vertical-mobile .neon-bar-vertical {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
    }

    /* Cada fila: grid con 3 columnas */
    .neon-row {
        display: grid;
        grid-template-columns: 30% 2.8rem auto;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
    }

    /* Barra de color - más alta */
    .neon-row-bar {
        height: 16px;
        border-radius: 8px;
        justify-self: start;
    }

    /* Porcentaje - más grande */
    .neon-row-value {
        font-family: var(--font-display);
        font-size: 1.15rem;
        font-weight: 700;
        text-align: right;
    }

    /* Etiqueta - más grande y legible */
    .neon-row-name {
        font-family: var(--font-body);
        font-size: 0.7rem;
        font-weight: 500;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: var(--slate-400);
        white-space: nowrap;
    }

    /* Ocultar video de columna derecha en móvil */
    .cronista-full-video {
        display: none;
    }

    /* Video móvil integrado */
    .cronista-video-mobile {
        display: block;
        position: relative;
        margin: var(--space-md) calc(-1 * var(--space-sm));
        width: calc(100% + 2 * var(--space-sm));
        overflow: hidden;
        aspect-ratio: 4/3;
        background: var(--slate-900);
    }

    .cronista-video-mobile .cronista-full-video-element,
    .modal-content .cronista-video-mobile .cronista-full-video-element,
    video.cronista-full-video-element {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center 30% !important;
    }
}

/* Sobreescribir específicamente la media query de 640px de styles.css */
@media (max-width: 640px) {
    .cronista-video-mobile .cronista-full-video-element,
    .modal-content .cronista-video-mobile .cronista-full-video-element,
    video.cronista-full-video-element {
        object-position: center 30% !important;
    }

    .cronista-full-video-wrapper {
        height: 100%;
    }

    .video-play-btn {
        width: 56px;
        height: 56px;
        background: rgba(212, 175, 55, 0.9);
        backdrop-filter: blur(8px);
    }

    .video-play-btn svg {
        width: 22px;
        height: 22px;
    }

    /* Botón Amazon sticky mejorado */
    .cronista-full-amazon {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        border-radius: 0;
        padding: 1rem var(--space-sm);
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
        justify-content: center;
        z-index: 1000;
        background: linear-gradient(
            135deg,
            var(--gold-metallic) 0%,
            var(--gold-dark) 100%
        );
        box-shadow:
            0 -4px 20px rgba(0, 0, 0, 0.5),
            0 -2px 10px rgba(212, 175, 55, 0.25);
    }

    .amazon-link.cronista-full-amazon {
        width: 100%;
        text-align: center;
        font-size: 0.9rem;
        font-weight: 600;
    }

    .cronista-full-amazon:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }

    /* ───────────────────────────────────────────────────────────
       FOOTER - Más compacto
       ─────────────────────────────────────────────────────────── */
    .footer {
        padding: var(--space-md) var(--space-sm);
        padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
    }

    .footer-title {
        font-size: 0.8rem;
        letter-spacing: 0.15em;
    }

    .footer-line {
        width: 60px;
    }

    .footer-tagline {
        font-size: 0.65rem;
    }

    .footer-symbols {
        font-size: 0.8rem;
        gap: var(--space-xs);
    }

    /* ───────────────────────────────────────────────────────────
       SCROLLBAR - Oculta en móvil
       ─────────────────────────────────────────────────────────── */
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    /* ───────────────────────────────────────────────────────────
       TOUCH IMPROVEMENTS
       ─────────────────────────────────────────────────────────── */

    /* Eliminar delay de tap en iOS */
    * {
        -webkit-tap-highlight-color: transparent;
    }

    /* Mejor feedback táctil para tarjetas */
    .book-card:active {
        transform: scale(0.97);
        transition: transform 0.1s ease;
    }

    /* Prevenir zoom accidental en inputs */
    input, select, textarea {
        font-size: 16px;
    }

}

/* ═══════════════════════════════════════════════════════════════
   MÓVIL PEQUEÑO (max-width: 380px) - iPhone SE, etc.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 380px) {

    .hero-title {
        font-size: 2rem;
    }

    /* Logo header móvil pequeño */
    .hero-logo-book {
        width: 50px;
    }

    .hero-logo-text {
        width: min(380px, 95vw);
    }

    .hero-subtitle {
        font-size: 0.6rem;
        letter-spacing: 0.2em;
    }

    /* Mensaje del Cronista - pantallas pequeñas */
    .cronista-message-text {
        font-size: 0.55rem;
        letter-spacing: 0.08em;
    }

    .cronista-waveform-btn {
        padding: 0.5rem 1rem;
    }

    .waveform-label {
        font-size: 0.65rem;
    }

    .subtitle-text {
        font-size: 0.7rem;
    }

    .showcase-title {
        font-size: 1.1rem;
        letter-spacing: 0.12em;
    }

    .showcase-subtitle {
        font-size: 0.65rem;
    }

    .showcase-emblem {
        width: 38px;
        height: 38px;
    }

    .nav-btn {
        padding: 0.4rem 0.7rem;
        font-size: 0.65rem;
    }

    .book-title {
        font-size: 0.75rem;
    }

    .book-author {
        font-size: 0.6rem;
    }

    .modal-title {
        font-size: 1.3rem;
    }

    .modal-synopsis {
        font-size: 0.9rem;
    }

    .cronista-full-cover {
        width: 50%;
        max-width: 150px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   LANDSCAPE MODE - Móvil horizontal
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) and (orientation: landscape) {

    .hero {
        min-height: 50vh;
        padding: var(--space-sm);
    }

    .hero-title {
        font-size: 2rem;
    }

    .cronista-full-layout {
        flex-direction: row;
        text-align: left;
        align-items: flex-start;
    }

    .cronista-full-cover {
        width: 30%;
        max-width: 140px;
    }

    .cronista-full-texto {
        text-align: left;
        align-items: flex-start;
    }

    .modal-synopsis {
        text-align: left;
    }

    .books-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .showcase-content .books-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   VIDEO CRONISTA - ESTILOS MÓVIL
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* ───────────────────────────────────────────────────────────
       MENSAJE ENTRANTE DEL CRONISTA - Mobile styles
       ─────────────────────────────────────────────────────────── */
    .cronista-message-container {
        gap: var(--space-xs);
        margin-top: var(--space-sm);
        padding: 0 var(--space-sm);
    }

    .cronista-message-text {
        font-size: 0.65rem;
        letter-spacing: 0.1em;
        text-align: center;
    }

    .cronista-waveform-btn {
        padding: 0.6rem 1.2rem;
        gap: 0.5rem;
    }

    .waveform-container {
        height: 16px;
        gap: 2px;
    }

    .waveform-bar {
        width: 2.5px;
    }

    .waveform-label {
        font-size: 0.7rem;
        letter-spacing: 0.1em;
    }

    /* ═══════════════════════════════════════════════════════════════
       ACCORDION MÓVIL - ALTURA FIJA, ANCHO EXPANDIDO
       ═══════════════════════════════════════════════════════════════ */

    .cronista-accordion {
        max-width: calc(100% - 24px);
        margin: var(--space-sm) auto 0;
        width: 100%;
        border-radius: 12px;
    }

    .cronista-accordion-inner {
        border-radius: 12px;
        border: 1px solid rgba(125, 211, 232, 0.3);
    }

    .cronista-accordion-video-wrapper {
        height: 420px;
        aspect-ratio: auto;
        border-radius: 12px 12px 0 0;
        overflow: hidden;
    }

    .cronista-accordion-video {
        object-fit: cover;
        object-position: center center;
    }

    /* Subtítulos con altura fija para evitar saltos */
    .cronista-subtitle-display {
        padding: var(--space-xs) var(--space-sm);
        min-height: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .subtitle-prefix {
        font-size: 0.85rem;
        flex-shrink: 0;
    }

    .subtitle-text {
        font-size: 0.75rem;
        line-height: 1.4;
        text-align: center;
    }

    .subtitle-cursor {
        font-size: 0.85rem;
        flex-shrink: 0;
    }

    /* Mute button en móvil */
    .cronista-accordion .cronista-mute-btn {
        bottom: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
    }

    .cronista-accordion .cronista-mute-btn svg {
        width: 18px;
        height: 18px;
    }

    /* Mute button móvil */
    .cronista-mute-btn {
        width: 36px;
        height: 36px;
        bottom: 10px;
        right: 10px;
    }

    .cronista-mute-btn svg {
        width: 18px;
        height: 18px;
    }

    .cronista-video-mobile video,
    .cronista-video-mobile .cronista-full-video-element {
        object-position: center 30% !important;
    }

    /* Zoom ligero en el video de standby para ocultar marca de agua */
    .cronista-video-mobile .cronista-full-video-element:not(.cronista-main-video) {
        transform: scale(1.05);
        transform-origin: center center;
    }

    /* Header del video dual en móvil */
    .cronista-video-mobile {
        position: relative;
    }

    .cronista-video-mobile .cronista-video-header {
        top: 1rem;
    }

    .cronista-video-mobile .cronista-video-header .cronista-review-icon {
        width: 18px;
        height: 18px;
    }

    .cronista-video-mobile .cronista-video-header .cronista-review-title {
        font-size: 0.65rem;
        letter-spacing: 0.12em;
    }
}