/* ========================================
   SISTEMA DE ATERMAÇÃO - RESPONSIVIDADE
   Mobile First Design
   ======================================== */

/* ===== MOBILE FIRST (até 768px) ===== */
@media (max-width: 768px) {
    /* Container */
    .container {
        padding: 10px;
    }
    
    /* Cabeçalho */
    .cabecalho {
        padding: 20px 10px;
        margin-bottom: 20px;
    }
    
    .cabecalho h1 {
        font-size: 1.8rem;
        line-height: 1.2;
    }
    
    .cabecalho p {
        font-size: 1rem;
    }
    
    /* Progresso */
    .progresso {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    
    .passo {
        width: 100%;
        max-width: 280px;
        justify-content: center;
        padding: 15px;
        border: 1px solid #e0e0e0;
        border-radius: var(--border-radius);
        background: var(--cor-branco);
    }
    
    .numero-passo {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }
    
    /* Seções */
    .secao {
        padding: 20px 15px;
        margin-bottom: 15px;
    }
    
    .titulo-secao {
        font-size: 1.4rem;
        line-height: 1.3;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    /* Subsecoes */
    .subsecao {
        padding: 15px;
        margin: 20px 0;
    }
    
    .subsecao h3 {
        font-size: 1.1rem;
    }
    
    /* Grids */
    .grid,
    .grid-2 {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    /* Template Selector */
    .template-selector {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 10px;
    }
    
    .template-card {
        padding: 15px 10px;
        min-height: 100px;
        font-size: 0.9rem;
    }
    
    .template-icon {
        font-size: 1.5rem;
        margin-bottom: 5px;
    }
    
    /* Botões */
    .botoes {
        flex-direction: column;
        gap: 10px;
    }
    
    .botao {
        width: 100%;
        justify-content: center;
        padding: 15px;
        font-size: 16px;
    }
    
    .botao-pequeno {
        padding: 12px;
        font-size: 14px;
    }
    
    /* Pessoas */
    .pessoa-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 15px;
    }
    
    .pessoa-dados {
        width: 100%;
    }
    
    .pessoa-acoes {
        width: 100%;
        justify-content: flex-end;
    }
    
    /* Lista de pessoas */
    .lista-pessoas {
        padding: 15px;
    }
    
    /* Modal */
    .modal-content {
        width: 95%;
        max-width: none;
        margin: 10px;
        padding: 20px 15px;
        max-height: 85%;
    }
    
    /* Campos */
    .grupo-campo {
        margin-bottom: 20px;
    }
    
    .input {
        font-size: 16px; /* Evita zoom no iOS */
        padding: 14px 12px;
    }
    
    .textarea {
        min-height: 100px;
    }
    
    /* Alertas */
    .alerta {
        padding: 12px;
        font-size: 14px;
        flex-direction: column;
        gap: 8px;
    }
    
    /* Cards */
    .card {
        padding: 15px;
    }
    
    /* Documentos */
    .documento-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 15px;
    }
    
    .documento-status {
        align-self: flex-end;
    }
    
    /* Checkboxes */
    .checkbox-grupo {
        flex-direction: column;
        gap: 5px;
    }
    
    .checkbox {
        margin-top: 0;
    }
}

/* ===== SMALL MOBILE (até 480px) ===== */
@media (max-width: 480px) {
    .cabecalho h1 {
        font-size: 1.5rem;
    }
    
    .template-selector {
        grid-template-columns: 1fr 1fr;
    }
    
    .template-card {
        padding: 12px 8px;
        min-height: 80px;
        font-size: 0.8rem;
    }
    
    .template-icon {
        font-size: 1.2rem;
    }
    
    .modal-content {
        width: 98%;
        padding: 15px 10px;
    }
    
    .secao {
        padding: 15px 10px;
    }
    
    .titulo-secao {
        font-size: 1.2rem;
    }
}

/* ===== TABLET (769px - 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 15px;
    }
    
    .grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
    
    .grid-2 {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    
    .template-selector {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
    
    .progresso {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .botoes {
        justify-content: space-between;
        flex-wrap: wrap;
    }
    
    .botao {
        min-width: 140px;
    }
}

/* ===== DESKTOP LARGE (1200px+) ===== */
@media (min-width: 1200px) {
    .container {
        max-width: 1400px;
        padding: 30px;
    }
    
    .cabecalho h1 {
        font-size: 3rem;
    }
    
    .cabecalho p {
        font-size: 1.3rem;
    }
    
    .secao {
        padding: 40px;
    }
    
    .titulo-secao {
        font-size: 2rem;
    }
    
    .grid {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 25px;
    }
    
    .grid-2 {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
    }
    
    .template-selector {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 20px;
    }
    
    .template-card {
        padding: 25px;
        min-height: 140px;
    }
    
    .template-icon {
        font-size: 2.5rem;
    }
}

/* ===== ULTRA WIDE (1600px+) ===== */
@media (min-width: 1600px) {
    .container {
        max-width: 1600px;
    }
    
    .grid {
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    }
    
    .template-selector {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

/* ===== LANDSCAPE MOBILE ===== */
@media (max-width: 768px) and (orientation: landscape) {
    .cabecalho {
        padding: 15px 10px;
    }
    
    .cabecalho h1 {
        font-size: 1.6rem;
    }
    
    .progresso {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .passo {
        width: auto;
        min-width: 120px;
        max-width: none;
    }
    
    .template-selector {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
    
    .modal-content {
        max-height: 80%;
    }
}

/* ===== HIGH DPI SCREENS ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    .template-icon {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    
    .numero-passo {
        font-weight: 500; /* Menos bold em telas retina */
    }
}

/* ===== MOTION PREFERENCES ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .passo,
    .template-card,
    .botao,
    .card {
        transform: none !important;
    }
}

/* ===== TOUCH DEVICES ===== */
@media (hover: none) and (pointer: coarse) {
    /* Aumentar área de toque */
    .botao {
        min-height: 44px;
        padding: 14px 24px;
    }
    
    .checkbox {
        transform: scale(1.5);
        margin: 8px;
    }
    
    .template-card {
        min-height: 120px;
        padding: 20px;
    }
    
    /* Remover hover effects */
    .template-card:hover,
    .card:hover,
    .pessoa-item:hover {
        transform: none;
        box-shadow: var(--sombra);
    }
    
    .botao:hover {
        transform: none;
    }
}

/* ===== DARK MODE RESPONSIVE ===== */
@media (prefers-color-scheme: dark) {
    @media (max-width: 768px) {
        .passo {
            background: #2a2a2a;
            border-color: #444;
        }
        
        .template-card {
            background: #2a2a2a;
            border-color: #444;
        }
    }
}

/* ===== FOCUS VISIBLE (para teclado) ===== */
@media (hover: hover) and (pointer: fine) {
    .botao:focus-visible,
    .input:focus-visible,
    .template-card:focus-visible {
        outline: 3px solid var(--cor-secundaria);
        outline-offset: 2px;
    }
}

/* ===== PRINT RESPONSIVO ===== */
@media print {
    .container {
        max-width: none;
        padding: 0;
    }
    
    .grid,
    .grid-2 {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .secao {
        margin-bottom: 10px;
        padding: 15px;
    }
    
    .titulo-secao {
        font-size: 1.2rem;
        border-bottom: 1px solid #333;
    }
    
    .template-card,
    .pessoa-item {
        break-inside: avoid;
    }
}