/* ========================================
   SISTEMA RESPONSIVO COMPLETO
   Claude Service - Responsividade Universal
   ======================================== */

/* ========================================
   VARIÁVEIS CSS GLOBAIS
   ======================================== */
:root {
    /* Cores responsivas */
    --primary-color: #667eea;
    --secondary-color: #764ba2;
    --success-color: #28a745;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    --info-color: #17a2b8;
    --light-color: #f8f9fa;
    --dark-color: #343a40;
    
    /* Espaçamentos responsivos */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
    
    /* Tamanhos de fonte responsivos */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-xxl: 1.5rem;
    --font-size-xxxl: 2rem;
    
    /* Bordas responsivas */
    --border-radius-sm: 0.25rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 1rem;
    --border-radius-xl: 1.5rem;
    
    /* Sombras responsivas */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --shadow-xl: 0 1.5rem 4rem rgba(0, 0, 0, 0.2);
    
    /* Transições responsivas */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Z-index responsivos */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ========================================
   RESET E BASE RESPONSIVA
   ======================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--dark-color);
    background-color: var(--light-color);
    overflow-x: hidden;
    min-height: 100vh;
}

/* ========================================
   SISTEMA DE GRID RESPONSIVO
   ======================================== */
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--spacing-md));
}

.col {
    flex: 1;
    padding: 0 var(--spacing-md);
}

/* ========================================
   BREAKPOINTS RESPONSIVOS
   ======================================== */

/* ========================================
   EXTRA PEQUENO (Smartphones pequenos)
   ======================================== */
@media (max-width: 320px) {
    :root {
        --font-size-base: 0.875rem;
        --spacing-md: 0.75rem;
        --border-radius-lg: 0.75rem;
    }
    
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    .row {
        margin: 0 calc(-1 * var(--spacing-sm));
    }
    
    .col {
        padding: 0 var(--spacing-sm);
    }
    
    /* Ajustes específicos para telas muito pequenas */
    .btn {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
    
    .form-group {
        margin-bottom: 0.75rem;
    }
    
    input, select, textarea {
        padding: 0.75rem;
        font-size: 0.875rem;
    }
}

/* ========================================
   PEQUENO (Smartphones)
   ======================================== */
@media (min-width: 321px) and (max-width: 480px) {
    :root {
        --font-size-base: 0.9rem;
        --spacing-md: 0.875rem;
    }
    
    .container {
        max-width: 100%;
        padding: 0 var(--spacing-md);
    }
    
    /* Layout específico para smartphones */
    .mobile-stack {
        flex-direction: column;
    }
    
    .mobile-center {
        text-align: center;
    }
    
    .mobile-full {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ========================================
   MÉDIO PEQUENO (Tablets pequenos)
   ======================================== */
@media (min-width: 481px) and (max-width: 768px) {
    .container {
        max-width: 720px;
    }
    
    /* Ajustes para tablets pequenos */
    .tablet-grid-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
}

/* ========================================
   MÉDIO (Tablets)
   ======================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        max-width: 960px;
    }
    
    /* Layout específico para tablets */
    .tablet-sidebar {
        display: flex;
        gap: var(--spacing-lg);
    }
    
    .tablet-sidebar > *:first-child {
        flex: 0 0 250px;
    }
    
    .tablet-sidebar > *:last-child {
        flex: 1;
    }
}

/* ========================================
   GRANDE (Desktops)
   ======================================== */
@media (min-width: 1025px) and (max-width: 1440px) {
    .container {
        max-width: 1200px;
    }
    
    /* Layout específico para desktops */
    .desktop-grid-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-lg);
    }
    
    .desktop-sidebar {
        display: flex;
        gap: var(--spacing-xl);
    }
    
    .desktop-sidebar > *:first-child {
        flex: 0 0 300px;
    }
    
    .desktop-sidebar > *:last-child {
        flex: 1;
    }
}

/* ========================================
   EXTRA GRANDE (Telas grandes)
   ======================================== */
@media (min-width: 1441px) and (max-width: 1920px) {
    .container {
        max-width: 1400px;
    }
    
    :root {
        --font-size-base: 1.125rem;
        --spacing-md: 1.25rem;
        --spacing-lg: 2rem;
        --spacing-xl: 2.5rem;
    }
    
    /* Layout específico para telas grandes */
    .large-grid-4 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-xl);
    }
}

/* ========================================
   ULTRA GRANDE (Telas de plasma, 4K)
   ======================================== */
@media (min-width: 1921px) {
    .container {
        max-width: 1800px;
    }
    
    :root {
        --font-size-base: 1.25rem;
        --spacing-md: 1.5rem;
        --spacing-lg: 2.5rem;
        --spacing-xl: 3rem;
        --spacing-xxl: 4rem;
    }
    
    /* Layout específico para telas ultra grandes */
    .ultra-grid-5 {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: var(--spacing-xxl);
    }
    
    .ultra-wide {
        max-width: 100vw;
        margin: 0 auto;
    }
}

/* ========================================
   ORIENTAÇÃO LANDSCAPE (Paisagem)
   ======================================== */
@media (orientation: landscape) and (max-height: 500px) {
    /* Ajustes para dispositivos em paisagem com tela baixa */
    .landscape-compact {
        padding: var(--spacing-sm);
    }
    
    .landscape-compact .btn {
        padding: 0.5rem 1rem;
    }
    
    .landscape-compact .form-group {
        margin-bottom: 0.5rem;
    }
}

/* ========================================
   ORIENTAÇÃO PORTRAIT (Retrato)
   ======================================== */
@media (orientation: portrait) and (max-width: 768px) {
    /* Ajustes para dispositivos em retrato */
    .portrait-stack {
        flex-direction: column;
    }
    
    .portrait-full {
        width: 100%;
        max-width: 100%;
    }
}

/* ========================================
   DISPOSITIVOS ESPECÍFICOS
   ======================================== */

/* ========================================
   ANDROID ESPECÍFICO
   ======================================== */
@media screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 768px) {
    /* Ajustes específicos para Android de alta densidade */
    .android-hd {
        font-size: 0.9em;
    }
    
    .android-hd .btn {
        min-height: 48px; /* Material Design touch target */
    }
    
    .android-hd input, .android-hd select {
        min-height: 48px;
        font-size: 16px; /* Evita zoom no Android */
    }
}

/* ========================================
   IPHONE ESPECÍFICO
   ======================================== */
@media screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 414px) {
    /* Ajustes específicos para iPhone */
    .iphone-safe {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    
    .iphone-touch {
        min-height: 44px; /* Apple Human Interface Guidelines */
    }
    
    .iphone-touch .btn {
        min-height: 44px;
        font-size: 17px; /* Tamanho padrão do iOS */
    }
}

/* ========================================
   TABLET ESPECÍFICO
   ======================================== */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .tablet-optimized {
        font-size: 1.1em;
    }
    
    .tablet-optimized .btn {
        padding: 1rem 1.5rem;
        font-size: 1.1em;
    }
    
    .tablet-optimized input, .tablet-optimized select {
        padding: 1rem;
        font-size: 1.1em;
    }
}

/* ========================================
   DESKTOP ESPECÍFICO
   ======================================== */
@media screen and (min-width: 1025px) {
    .desktop-optimized {
        font-size: 1em;
    }
    
    .desktop-optimized .btn {
        padding: 1rem 2rem;
        font-size: 1em;
    }
    
    .desktop-optimized input, .desktop-optimized select {
        padding: 1rem 1.5rem;
        font-size: 1em;
    }
}

/* ========================================
   UTILITÁRIOS RESPONSIVOS
   ======================================== */

/* Visibilidade responsiva */
.hidden-xs { display: none !important; }
.hidden-sm { display: none !important; }
.hidden-md { display: none !important; }
.hidden-lg { display: none !important; }
.hidden-xl { display: none !important; }

.visible-xs { display: block !important; }
.visible-sm { display: block !important; }
.visible-md { display: block !important; }
.visible-lg { display: block !important; }
.visible-xl { display: block !important; }

/* Breakpoints específicos */
@media (max-width: 480px) {
    .hidden-xs { display: block !important; }
    .visible-xs { display: none !important; }
}

@media (min-width: 481px) and (max-width: 768px) {
    .hidden-sm { display: block !important; }
    .visible-sm { display: none !important; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .hidden-md { display: block !important; }
    .visible-md { display: none !important; }
}

@media (min-width: 1025px) and (max-width: 1440px) {
    .hidden-lg { display: block !important; }
    .visible-lg { display: none !important; }
}

@media (min-width: 1441px) {
    .hidden-xl { display: block !important; }
    .visible-xl { display: none !important; }
}

/* ========================================
   ANIMAÇÕES RESPONSIVAS
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    /* Desabilitar animações para usuários que preferem menos movimento */
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   ACESSIBILIDADE RESPONSIVA
   ======================================== */
@media (prefers-contrast: high) {
    /* Alto contraste */
    :root {
        --primary-color: #000000;
        --secondary-color: #ffffff;
        --light-color: #ffffff;
        --dark-color: #000000;
    }
}

@media (prefers-color-scheme: dark) {
    /* Modo escuro automático */
    :root {
        --light-color: #1a1a1a;
        --dark-color: #ffffff;
        --primary-color: #4a9eff;
        --secondary-color: #7c3aed;
    }
}

/* ========================================
   IMPRESSÃO RESPONSIVA
   ======================================== */
@media print {
    /* Estilos específicos para impressão */
    .no-print {
        display: none !important;
    }
    
    .print-only {
        display: block !important;
    }
    
    body {
        background: white !important;
        color: black !important;
        font-size: 12pt !important;
    }
    
    .container {
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ========================================
   PERFORMANCE RESPONSIVA
   ======================================== */
@media (max-width: 768px) {
    /* Otimizações para dispositivos móveis */
    .mobile-optimize {
        will-change: auto;
        transform: none;
        transition: none;
    }
    
    .mobile-optimize * {
        will-change: auto;
    }
}

/* ========================================
   DEBUG RESPONSIVO (Desenvolvimento)
   ======================================== */
.debug-responsive::before {
    content: 'XS';
    position: fixed;
    top: 10px;
    right: 10px;
    background: red;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    z-index: 9999;
}

@media (min-width: 481px) and (max-width: 768px) {
    .debug-responsive::before {
        content: 'SM';
        background: orange;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .debug-responsive::before {
        content: 'MD';
        background: yellow;
        color: black;
    }
}

@media (min-width: 1025px) and (max-width: 1440px) {
    .debug-responsive::before {
        content: 'LG';
        background: green;
    }
}

@media (min-width: 1441px) and (max-width: 1920px) {
    .debug-responsive::before {
        content: 'XL';
        background: blue;
    }
}

@media (min-width: 1921px) {
    .debug-responsive::before {
        content: 'XXL';
        background: purple;
    }
}