/* ============================================
   MOBILE RESPONSIVE STYLES
   ============================================ */

/* Tablets e dispositivos médios (768px e abaixo) */
@media (max-width: 768px) {
    /* Container principal */
    .container {
        padding: 0 1rem;
    }
    
    /* Tabs de navegação */
    .flex.border-b {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        white-space: nowrap;
        padding-bottom: 0.5rem;
    }
    
    .tab {
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
        flex-shrink: 0;
    }
    
    /* Formulários */
    .grid.grid-cols-1.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    
    .grid.grid-cols-1.md\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
    
    /* Botões */
    .flex.justify-between {
        flex-direction: column;
        gap: 1rem;
    }
    
    .flex.justify-between > div {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .flex.justify-between button {
        width: 100%;
    }
    
    /* Preview do currículo */
    .resume-preview {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        padding: 1rem !important;
        font-size: 0.875rem;
    }
    
    .resume-preview h1 {
        font-size: 1.75rem !important;
    }
    
    .resume-preview h2 {
        font-size: 1.25rem !important;
    }
    
    .resume-preview h3 {
        font-size: 1rem !important;
    }
    
    .resume-preview h4 {
        font-size: 0.875rem !important;
    }
    
    .resume-preview p,
    .resume-preview li,
    .resume-preview span {
        font-size: 0.8rem !important;
    }
    
    /* Grid do preview em coluna única */
    .resume-preview .grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Foto de perfil menor */
    #previewProfileImage {
        width: 60px !important;
        height: 60px !important;
    }
    
    /* Template selector */
    #templateSelector {
        grid-template-columns: 1fr !important;
    }
    
    .template-btn {
        width: 100%;
    }
    
    /* Color palette */
    #colorPalette {
        justify-content: center;
    }
    
    /* Inputs e textareas */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="month"],
    input[type="color"],
    textarea,
    select {
        font-size: 16px !important; /* Previne zoom no iOS */
    }
    
    /* Botões de ação */
    .add-experience,
    .add-education,
    .add-skill,
    .add-language,
    .add-certification,
    .add-project {
        width: 100%;
    }
    
    /* Cards de itens */
    .experience-item,
    .education-item,
    .skill-item,
    .language-item,
    .certification-item,
    .project-item {
        padding: 1rem;
    }
    
    /* Auto-save indicator */
    .autosave-indicator {
        bottom: 0.5rem;
        right: 0.5rem;
        left: 0.5rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }
    
    /* Dicas */
    .dica-item {
        padding: 1rem;
    }
    
    /* Títulos */
    h1 {
        font-size: 1.75rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
}

/* Smartphones (480px e abaixo) */
@media (max-width: 480px) {
    /* Container */
    .container {
        padding: 0 0.75rem;
    }
    
    /* Tabs ainda menores */
    .tab {
        font-size: 0.75rem;
        padding: 0.5rem;
    }
    
    /* Preview do currículo */
    .resume-preview {
        padding: 0.75rem !important;
        font-size: 0.75rem;
    }
    
    .resume-preview h1 {
        font-size: 1.5rem !important;
    }
    
    .resume-preview h2 {
        font-size: 1.1rem !important;
    }
    
    .resume-preview h3 {
        font-size: 0.95rem !important;
    }
    
    .resume-preview h4 {
        font-size: 0.8rem !important;
    }
    
    .resume-preview p,
    .resume-preview li,
    .resume-preview span {
        font-size: 0.75rem !important;
    }
    
    /* Foto de perfil ainda menor */
    #previewProfileImage {
        width: 50px !important;
        height: 50px !important;
    }
    
    /* Botões menores */
    button {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }
    
    /* Template preview */
    .template-preview {
        height: 120px !important;
    }
    
    .template-preview i {
        font-size: 2.5rem !important;
    }
    
    /* Color palette */
    .w-12.h-12 {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    
    /* Títulos principais */
    h1 {
        font-size: 1.5rem;
    }
    
    h2 {
        font-size: 1.25rem;
    }
    
    h3 {
        font-size: 1.1rem;
    }
    
    /* Espaçamentos reduzidos */
    .mb-8 {
        margin-bottom: 1.5rem !important;
    }
    
    .mb-6 {
        margin-bottom: 1rem !important;
    }
    
    .mb-4 {
        margin-bottom: 0.75rem !important;
    }
    
    /* Gap reduzido */
    .gap-4 {
        gap: 0.75rem !important;
    }
    
    .gap-6 {
        gap: 1rem !important;
    }
}

/* Landscape em smartphones */
@media (max-width: 768px) and (orientation: landscape) {
    .resume-preview {
        max-height: 80vh;
        overflow-y: auto;
    }
    
    .tab {
        font-size: 0.75rem;
        padding: 0.4rem 0.6rem;
    }
}

/* Ajustes específicos para iOS */
@supports (-webkit-touch-callout: none) {
    /* Previne zoom em inputs */
    input,
    textarea,
    select {
        font-size: 16px !important;
    }
    
    /* Melhora scroll em tabs */
    .flex.border-b {
        -webkit-overflow-scrolling: touch;
    }
}

/* Ajustes para modo escuro (se o dispositivo usar) */
@media (prefers-color-scheme: dark) {
    /* Mantém o fundo claro para o currículo */
    .resume-preview {
        background: white !important;
        color: #1f2937 !important;
    }
}

/* Melhorias de touch */
@media (hover: none) and (pointer: coarse) {
    /* Aumenta área de toque dos botões */
    button,
    .tab,
    a {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Remove hover effects em touch devices */
    .template-btn:hover,
    button:hover {
        transform: none;
    }
    
    /* Adiciona feedback visual no tap */
    button:active,
    .tab:active {
        opacity: 0.7;
        transform: scale(0.98);
    }
}

/* Ajustes para telas muito pequenas (320px) */
@media (max-width: 320px) {
    .tab {
        font-size: 0.7rem;
        padding: 0.4rem;
    }
    
    .resume-preview {
        padding: 0.5rem !important;
    }
    
    .resume-preview h1 {
        font-size: 1.25rem !important;
    }
    
    button {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
}

/* Melhorias para acessibilidade em mobile */
@media (max-width: 768px) {
    /* Aumenta contraste */
    .text-gray-600 {
        color: #4b5563 !important;
    }
    
    .text-gray-500 {
        color: #6b7280 !important;
    }
    
    /* Melhora legibilidade */
    body {
        line-height: 1.6;
    }
    
    /* Espaçamento entre elementos clicáveis */
    .tab + .tab {
        margin-left: 0.25rem;
    }
}

/* Otimizações de performance para mobile */
@media (max-width: 768px) {
    /* Reduz animações para melhor performance */
    * {
        animation-duration: 0.2s !important;
        transition-duration: 0.2s !important;
    }
    
    /* Desabilita sombras complexas */
    .shadow-lg,
    .shadow-xl {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }
}

/* Ajustes para impressão em mobile */
@media print {
    .resume-preview {
        width: 100% !important;
        padding: 1rem !important;
    }
}