/* ===========================================
   RESPONSIVE.CSS - Layout Mobile-First
   Neria App - Estilos de Responsividade
   =========================================== */

/* Google Fonts - Roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Esconde scrollbar global */
html, body {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

/* Body fullscreen */
body {
    background-color: #183A68;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
}

/* Container principal - Fullscreen (celular, tablet, até 13") */
.app-container {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background-color: #183A68;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ===========================================
   TABLETS PEQUENOS (768px - 1023px)
   iPad Mini, iPad, Tablets Android
   =========================================== */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    body {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .app-container {
        width: 75vw;
        max-width: 600px;
        border-radius: 2vh;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
    }

    .header-cadastro {
        padding: 2.5vh 3vw;
        padding-top: 4vh;
    }

    .content-cadastro {
        padding: 2.5vh 3vw;
    }

    .footer-cadastro {
        padding: 2.5vh 3vw;
    }

    /* Botão voltar maior para touch */
    .btn-voltar {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        left: 3vw;
        top: 4.5vh;
    }

    /* Textos maiores para tablets */
    .question-text {
        font-size: 2.2vh;
        margin-bottom: 2.5vh;
    }

    .option-btn {
        font-size: 2.2vh;
        padding: 2vh 3vw;
        min-height: 48px;
    }

    .options-row .option-btn {
        font-size: clamp(14px, 2vh, 18px);
        padding: 2vh 2.5vw;
    }

    .btn-continuar {
        font-size: 2.2vh;
        padding: 2vh 4vw;
        min-height: 52px;
    }

    /* Inputs maiores */
    .form-control {
        font-size: 16px;
        padding: 1.8vh 2vw;
        min-height: 48px;
    }
}

/* ===========================================
   TABLETS GRANDES (1024px - 1279px)
   iPad Pro, Tablets Android grandes
   =========================================== */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
    body {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .app-container {
        width: 60vw;
        max-width: 550px;
        border-radius: 2vh;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
    }

    .header-cadastro {
        padding: 2.5vh 2.5vw;
        padding-top: 4vh;
    }

    .content-cadastro {
        padding: 2.5vh 2.5vw;
    }

    .footer-cadastro {
        padding: 2.5vh 2.5vw;
    }

    /* Botão voltar com área de toque adequada */
    .btn-voltar {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        left: 2.5vw;
        top: 4.5vh;
    }

    /* Textos otimizados */
    .question-text {
        font-size: 2.3vh;
        margin-bottom: 2.5vh;
    }

    .option-btn {
        font-size: 2.2vh;
        padding: 2vh 2.5vw;
        min-height: 48px;
    }

    .options-row .option-btn {
        font-size: clamp(14px, 2vh, 18px);
        padding: 2vh 2vw;
    }

    .btn-continuar {
        font-size: 2.2vh;
        padding: 2vh 3vw;
        min-height: 52px;
    }

    .form-control {
        font-size: 16px;
        padding: 1.8vh 2vw;
        min-height: 48px;
    }
}

/* ===========================================
   TELAS GRANDES (1280px e acima) - Desktop
   Notebooks, Monitores
   =========================================== */
@media screen and (min-width: 1280px) {
    body {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .app-container {
        width: 48vh;
        max-width: 450px;
        border-radius: 2vh;
        box-shadow: 0 0 60px rgba(0, 0, 0, 0.3);
    }

    .header-cadastro {
        padding: 2vh 1vw !important;
        padding-top: 4vh !important;
    }

    .content-cadastro {
        padding: 2vh 1vw !important;
    }

    .footer-cadastro {
        padding: 2vh 1vw !important;
    }

    .btn-voltar {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        background-size: 1.2vh 2vh;
        left: 0.5vw !important;
    }

    .option-btn {
        padding: 1.5vh 1vw !important;
        min-height: 44px;
        font-size: 1.9vh !important;
    }

    .btn-continuar {
        min-height: 48px;
    }

    .form-control {
        min-height: 44px;
    }
}

/* ===========================================
   TELAS EXTRA GRANDES (1440px e acima)
   Monitores grandes, 4K
   =========================================== */
@media screen and (min-width: 1440px) {
    .app-container {
        width: 45vh;
        max-width: 480px;
    }
}

.app-container::-webkit-scrollbar {
    display: none;
}

/* Botão Voltar - Padrão global */
/* Area de toque minima 44x44px (Apple HIG) com icone visual menor */
.btn-voltar {
    background: url('/static/img/seta-voltar.svg') no-repeat center;
    background-size: 1.5vh 2.5vh;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    position: absolute;
    left: 2vw;
    top: 4vh;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    font-size: 0;
    color: transparent;
    z-index: 10;
}

/* Material 3 - Title Medium (Títulos de perguntas) */
.title-medium,
.question-label,
.question-text {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.15px;
}

/* Material 3 - Body Medium (Placeholders) */
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.5px;
}

/* Material 3 - Title Medium (Botões) */
.btn-continuar,
.btn-fechar,
.btn-primary,
.btn-entrar {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.15px;
}

/* ===========================================
   LAYOUT FLUIDO - Componentes Responsivos
   =========================================== */

/* App Container - Extensões */
.app-container {
    color: white;
}

/* Header com Stepper */
.header-cadastro {
    background-color: #183A68;
    padding: 2vh 4vw;
    padding-top: 4vh;
    flex-shrink: 0;
    position: relative;
}

/* Conteúdo */
.content-cadastro {
    flex: 1;
    padding: 2vh 4vw;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.question-text {
    font-size: 2vh;
    margin-bottom: 2vh;
    color: white;
    font-weight: 400;
    line-height: 1.4;
    flex-shrink: 0;
}

.options-container {
    display: flex;
    flex-direction: column;
    gap: 1.2vh;
    margin-bottom: 1.5vh;
    flex: 1;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.options-container::-webkit-scrollbar {
    display: none;
}

.options-row {
    display: flex;
    gap: 2vw;
    margin-bottom: 2vh;
    flex-shrink: 0;
}

.options-row .option-btn {
    flex: 1;
    white-space: nowrap;
    font-size: clamp(12px, 1.8vh, 16px);
    padding: 1.5vh 2vw;
    text-align: center;
}

.option-btn {
    background-color: white;
    color: #183A68;
    font-family: 'Roboto', sans-serif;
    font-size: 2vh;
    font-weight: 400;
    border: none;
    padding: 1.5vh 4vw;
    border-radius: 1vh;
    width: 100%;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
    flex-shrink: 0;
}

.option-btn:hover {
    background-color: #f0f0f0;
}

.option-btn.selected {
    background-color: #C4D600;
    color: #183A68;
    font-weight: 600;
}

.sub-question {
    margin-top: 1.5vh;
    display: none;
    animation: fadeIn 0.3s ease-in;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.sub-question.show {
    display: flex;
    flex-direction: column;
}

.sub-question .options-container {
    flex: 1;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.sub-question .options-container::-webkit-scrollbar {
    display: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(1vh);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Footer com Botão */
.footer-cadastro {
    padding: 2vh 4vw;
    background-color: #183A68;
    flex-shrink: 0;
}

.btn-continuar {
    background-color: #C4D600;
    color: #183A68;
    font-family: 'Roboto', sans-serif;
    font-size: 2vh;
    font-weight: 500;
    border: none;
    padding: 1.5vh 4vw;
    border-radius: 1vh;
    width: 100%;
    transition: all 0.3s ease;
}

.btn-continuar:hover:not(:disabled) {
    background-color: #B0C400;
    color: #183A68;
}

.btn-continuar:disabled {
    background-color: rgba(196, 214, 0, 0.3);
    cursor: not-allowed;
    opacity: 0.6;
}