/* ============================================
   MOBILE RESPONSIVE STYLES
   Optimización para dispositivos móviles
   ============================================ */

/* Base Mobile Adjustments */
@media (max-width: 768px) {
    /* Body & Container */
    body {
        overflow-x: hidden;
    }

    /* Sidebar - Collapse to icon-only on mobile */
    aside {
        width: 60px !important;
        min-width: 60px;
    }

    aside nav button span {
        display: none !important;
    }

    aside .border-t button span {
        display: none !important;
    }

    /* Header adjustments */
    #app-header {
        padding-left: 1rem;
        padding-right: 1rem;
        height: 56px;
    }

    #header-title {
        font-size: 1rem;
        font-weight: 500;
    }

    /* Hide search on mobile */
    #app-header .relative.hidden.md\\:block {
        display: none !important;
    }

    /* Main content padding */
    main .p-8 {
        padding: 1rem !important;
    }

    main .px-8 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    main .py-8 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    /* Dashboard Grid - Single column on mobile */
    #decks-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Dashboard Header */
    .flex.items-center.justify-between.mb-8 {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch !important;
    }

    .flex.items-center.justify-between.mb-8 .flex.gap-2 {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .flex.items-center.justify-between.mb-8 button {
        width: 100%;
        justify-content: center;
    }

    /* Creator Module - Stack vertically */
    .grid.grid-cols-1.lg\\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    .p-8.lg\\:p-12 {
        padding: 1.5rem !important;
    }

    /* Creator Header - Completely redesigned for mobile */
    .creator-header {
        padding: 0.75rem 0.5rem !important;
        height: auto !important;
        min-height: auto !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        align-items: stretch !important;
    }

    .creator-header > div:first-child {
        width: 100%;
        justify-content: flex-start;
    }

    .creator-header-text h2 {
        font-size: 0.875rem !important;
        line-height: 1.2;
    }

    .creator-header-text p {
        display: none !important;
    }

    .creator-header-actions {
        width: 100% !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
    }

    .creator-cancel-btn {
        display: none !important;
    }

    .creator-generate-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
    }

    .creator-generate-btn .btn-text {
        display: inline !important;
    }

    /* Style selector grid */
    #style-selector {
        grid-template-columns: 1fr !important;
    }

    /* Style selector options - Better mobile display */
    #style-selector .style-option {
        padding: 1rem !important;
    }

    #style-selector .style-option .font-medium {
        font-size: 0.875rem !important;
    }

    #style-selector .style-option .text-xs {
        font-size: 0.75rem !important;
    }

    /* Textarea adjustments */
    textarea {
        font-size: 14px !important;
        min-height: 120px !important;
    }

    /* Creator sections spacing */
    .max-w-xl.mx-auto.space-y-8 {
        max-width: 100% !important;
    }

    .max-w-xl.mx-auto.space-y-8 > div {
        margin-top: 1.5rem !important;
    }

    /* Creator dropzone */
    .h-24.rounded-xl.border-2 {
        height: 5rem !important;
    }

    /* Creator input title */
    #deck-title-input {
        font-size: 1.25rem !important;
    }

    /* Creator labels */
    .text-xs.font-semibold.text-zinc-500 {
        font-size: 0.625rem !important;
    }

    /* Input fields */
    input[type="text"],
    input[type="password"],
    input[type="email"] {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }

    /* Buttons - Better touch targets */
    button {
        min-height: 44px;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    button i {
        flex-shrink: 0;
    }

    /* Modal adjustments */
    .max-w-lg,
    .max-w-md,
    .max-w-sm {
        max-width: calc(100vw - 2rem) !important;
        margin: 1rem;
    }

    /* Share Modal */
    #share-modal .flex.gap-2 {
        flex-direction: column;
        gap: 0.5rem;
    }

    #share-modal .flex.gap-2 input {
        width: 100%;
    }

    #share-modal .flex.gap-2 button {
        width: 100%;
    }

    /* Brand Module Grid */
    .grid.grid-cols-1.md\\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    .md\\:col-span-1,
    .md\\:col-span-2 {
        grid-column: span 1 !important;
    }

    /* Brand Logos Grid */
    #brand-logos-container.grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* Asset Modal Grid */
    #modal-step-selection .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* Typography adjustments */
    h1 {
        font-size: 1.5rem !important;
    }

    h2 {
        font-size: 1.25rem !important;
    }

    h3 {
        font-size: 1rem !important;
    }

    .text-2xl {
        font-size: 1.25rem !important;
    }

    .text-xl {
        font-size: 1.125rem !important;
    }

    .text-lg {
        font-size: 1rem !important;
    }

    /* Loading Overlay */
    #local-loading-overlay .w-96 {
        width: calc(100vw - 2rem) !important;
        padding: 1rem;
    }

    #local-loading-overlay h2 {
        font-size: 1.25rem !important;
    }

    /* Presentation View */
    .slide-active,
    .slide-hidden {
        padding: 1rem !important;
    }

    /* Asset List */
    #asset-list {
        max-height: 200px;
        overflow-y: auto;
    }

    /* Tag buttons */
    .flex.flex-wrap.gap-2 button {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
    }

    /* Delete Modal */
    #delete-confirm-modal .absolute {
        width: calc(100vw - 2rem) !important;
        margin: 1rem;
    }

    /* Alert Modal */
    #alert-modal .w-full.max-w-sm {
        max-width: calc(100vw - 2rem) !important;
    }

    /* Scrollbar - Hide on mobile for cleaner look */
    ::-webkit-scrollbar {
        width: 3px;
    }

    /* Logo sizing */
    aside .h-8 {
        height: 1.5rem !important;
    }

    /* Navigation spacing */
    nav.space-y-2 {
        padding: 0.5rem !important;
    }

    nav button {
        padding: 0.75rem !important;
        justify-content: center;
    }

    /* Profile image */
    .w-8.h-8.rounded-full {
        width: 2rem !important;
        height: 2rem !important;
    }
}

/* Extra Small Devices (< 480px) */
@media (max-width: 480px) {
    /* Further reduce padding */
    main .p-8,
    main .px-8,
    main .py-8 {
        padding: 0.75rem !important;
    }

    .p-8.lg\\:p-12 {
        padding: 1rem !important;
    }

    /* Smaller buttons */
    button {
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
    }

    /* Compact header */
    #app-header {
        height: 48px;
        padding: 0.5rem;
    }

    #header-title {
        font-size: 0.875rem;
    }

    /* Sidebar even more compact */
    aside {
        width: 50px !important;
        min-width: 50px;
    }

    aside nav button {
        padding: 0.5rem !important;
    }

    aside nav button i {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }

    /* Modal padding */
    .p-6 {
        padding: 1rem !important;
    }

    .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .py-6 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    /* Typography further reduced */
    h1 {
        font-size: 1.25rem !important;
    }

    h2 {
        font-size: 1.125rem !important;
    }

    .text-2xl {
        font-size: 1.125rem !important;
    }

    /* Gap adjustments */
    .gap-8 {
        gap: 1rem !important;
    }

    .gap-6 {
        gap: 0.75rem !important;
    }

    .gap-4 {
        gap: 0.5rem !important;
    }

    /* Space adjustments */
    .space-y-8 > * + * {
        margin-top: 1rem !important;
    }

    .space-y-6 > * + * {
        margin-top: 0.75rem !important;
    }
}

/* Landscape Mobile Devices */
@media (max-width: 768px) and (orientation: landscape) {
    /* Reduce vertical padding in landscape */
    main .p-8,
    main .py-8 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    #app-header {
        height: 48px;
    }

    /* Compact modals in landscape */
    .max-w-lg,
    .max-w-md {
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    button,
    a,
    input[type="checkbox"],
    input[type="radio"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Better spacing for touch */
    .space-y-2 > * + * {
        margin-top: 0.75rem !important;
    }

    /* Prevent text selection on buttons */
    button {
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    /* Smooth scrolling */
    * {
        -webkit-overflow-scrolling: touch;
    }
}

/* Tablet Adjustments (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Sidebar - Show text but narrower */
    aside {
        width: 180px !important;
    }

    /* Grid adjustments */
    #decks-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Creator grid - Keep stacked */
    .grid.grid-cols-1.lg\\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* Brand grid */
    .grid.grid-cols-1.md\\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper borders */
    .border {
        border-width: 0.5px;
    }

    /* Crisper text */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Dark mode specific mobile adjustments */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
    /* Reduce brightness for OLED screens */
    body {
        background-color: #000000;
    }

    /* Softer borders */
    .border-zinc-900 {
        border-color: rgba(39, 39, 42, 0.5);
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Print Styles */
@media print {
    aside,
    #app-header,
    button {
        display: none !important;
    }

    main {
        width: 100% !important;
        padding: 0 !important;
    }
}

/* ============================================
   SHARE PAGE MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {
    /* Share page container */
    .max-w-6xl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    /* Share page header */
    .max-w-6xl > .flex.items-center.justify-between {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
    }

    /* Share page title */
    .max-w-6xl h1 {
        font-size: 1.5rem !important;
    }

    /* Slides wrapper height adjustment */
    #slides-wrapper {
        height: 60vh !important;
        min-height: 400px;
    }

    /* Share controls - Top bar */
    .absolute.top-4.left-4.right-4 {
        top: 0.5rem !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        flex-wrap: wrap;
    }

    /* Share controls - Bottom bar */
    .absolute.bottom-4 {
        bottom: 0.5rem !important;
        padding: 0.5rem !important;
    }

    /* Share dots - Smaller on mobile */
    #share-dots button {
        width: 0.375rem !important;
        height: 0.375rem !important;
    }

    #share-dots button.scale-150 {
        transform: scale(1.2) !important;
    }

    /* Fullscreen button - Compact */
    #share-fullscreen {
        padding: 0.5rem !important;
        font-size: 0.75rem;
    }

    #share-fullscreen span {
        display: none;
    }

    /* Password form */
    .max-w-md {
        max-width: 100% !important;
    }

    /* Share footer text */
    .mt-6.flex.items-center.justify-between {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    /* Presentation slides - Better mobile padding */
    .slide-active > div,
    .slide-hidden > div {
        padding: 1rem !important;
    }

    /* Slide content text sizing */
    .slide-active h1,
    .slide-hidden h1 {
        font-size: 1.5rem !important;
    }

    .slide-active h2,
    .slide-hidden h2 {
        font-size: 1.25rem !important;
    }

    .slide-active p,
    .slide-hidden p {
        font-size: 0.875rem !important;
    }
}

@media (max-width: 480px) {
    /* Extra small devices */
    #slides-wrapper {
        height: 50vh !important;
        min-height: 300px;
    }

    /* Even smaller controls */
    .absolute.top-4.left-4.right-4,
    .absolute.bottom-4 {
        padding: 0.25rem !important;
    }

    /* Compact buttons */
    #share-prev,
    #share-next {
        padding: 0.375rem !important;
    }

    #share-prev i,
    #share-next i {
        width: 1rem !important;
        height: 1rem !important;
    }

    /* Slide indicator */
    #share-slide-indicator,
    #share-slide-total {
        font-size: 0.625rem !important;
    }
}

/* Landscape orientation for share page */
@media (max-width: 768px) and (orientation: landscape) {
    #slides-wrapper {
        height: 70vh !important;
    }

    .max-w-6xl {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
}