/* Reset e variáveis */
:root {
    /* Cores principais */
    --maintenance-bg: #ffffff;
    --maintenance-text: #000000;
    --maintenance-image-bg: #0078D7;
    
    /* Layout */
    --maintenance-container-padding: 0;
    --maintenance-image-max-width: 100vw;
    --maintenance-image-max-height: 100vh;
}

/* Reset básico */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

/* Estilos do corpo */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--maintenance-bg);
    color: var(--maintenance-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-overflow-scrolling: touch;
    pointer-events: none;
}

/* Wrapper principal */
.maintenance-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    pointer-events: none;
}

/* Container da imagem */
.maintenance-image-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Imagem de manutenção */
.maintenance-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

/* Media Queries para diferentes dispositivos */
@media screen and (min-width: 1200px) {
    .maintenance-image {
        object-fit: cover;
    }
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
    .maintenance-image {
        object-fit: cover;
    }
}

@media screen and (max-width: 767px) {
    .maintenance-wrapper {
        position: relative;
        height: 200vh;
        background-color: var(--maintenance-image-bg);
    }

    .maintenance-image-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 50vh;
        overflow: hidden;
    }

    .maintenance-image {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .maintenance-wrapper::after {
        content: '';
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50vh;
        background-color: var(--maintenance-image-bg);
    }
}

/* Suporte para orientação do dispositivo */
@media screen and (orientation: portrait) {
    .maintenance-image {
        object-fit: cover;
    }
}

@media screen and (orientation: landscape) {
    .maintenance-image {
        object-fit: cover;
    }
}

/* Suporte para dispositivos de alta resolução */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .maintenance-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Suporte para modo escuro */
@media (prefers-color-scheme: dark) {
    :root {
        --maintenance-bg: #ffffff;
        --maintenance-text: #000000;
    }
}

/* Suporte para modo claro */
@media (prefers-color-scheme: light) {
    :root {
        --maintenance-bg: #ffffff;
        --maintenance-text: #000000;
    }
}

/* Suporte para impressão */
@media print {
    html, body {
        position: static;
        overflow: visible;
    }
    
    .maintenance-wrapper {
        position: static;
        height: auto;
    }
    
    .maintenance-image {
        position: static;
        width: 100%;
        height: auto;
        page-break-inside: avoid;
    }
}

/* Suporte para navegadores antigos */
@supports not (object-fit: cover) {
    .maintenance-image {
        position: absolute;
        min-width: 100%;
        min-height: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

/* Suporte para redução de movimento */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}