@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200..700&display=swap');

:root {
    --bg-page: #ffffff;
    --bg-section: #fcfcfc;
    --text-main: #333333;
    --text-label: #000000;
    --border-color: #cccccc;
    --border-focus: #888888;
    --input-bg: #ffffff; 
}

/* Limpeza simples sem travar a altura, deixando o scroll natural do celular atuar */
html, body { 
    background-color: var(--bg-page) !important; 
    margin: 0; 
    padding: 0; 
}

body { 
    font-family: 'Montserrat', sans-serif; 
    color: var(--text-main); 
    -webkit-font-smoothing: antialiased; 
}

.container { 
    max-width: 1000px; 
    margin: 0 auto; 
    /* Mantém um respiro confortável no final para não bater no rodapé do navegador */
    padding: 30px 20px 100px 20px; 
}

header { text-align: center; margin-bottom: 30px; }
.header-logo { height: 140px; width: auto; margin-bottom: 15px; }

/* Bloco de Introdução e Card de Orientações */
.intro-box, .outro-box { text-align: center; margin-bottom: 25px; }
.intro-box p { font-size: 1rem; color: #555555; line-height: 1.5; font-weight: 400; margin-bottom: 15px; }

.guidelines-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-left: 4px solid #222222;
    border-radius: 6px;
    padding: 25px;
    margin: 30px 0;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.guidelines-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.guidelines-list { list-style: none; padding: 0; margin: 0; }
.guidelines-list li {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #444;
    margin-bottom: 12px;
    padding-left: 20px;
    position: relative;
}
.guidelines-list li::before { content: "•"; position: absolute; left: 0; color: #222222; font-weight: bold; }

.device-tip {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #ddd;
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
}

/* Estrutura de Seções */
.section-box { background-color: var(--bg-section); padding: 30px 35px; border-radius: 8px; margin-bottom: 35px; }
h2 { font-size: 1.35rem; font-weight: 600; color: #222222; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 1px solid #e5e5e5; text-transform: uppercase; }
.sub-header { font-size: 1.05rem; font-weight: 600; margin: 15px 0 10px; color: #333333; text-transform: uppercase; }
.minor-header { font-size: 0.95rem; font-weight: 600; margin: 12px 0 8px 0; color: #555555; text-transform: uppercase; }

label { font-size: 15px; font-weight: 250; color: var(--text-label); margin-bottom: 3px; display: block; }

/* Grids */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 10px; align-items: end; } 
.full { grid-column: span 2; }
.flex-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 10px; align-items: end; }
.flex-row-4 { display: grid; grid-template-columns: 0.8fr 1.6fr 1.1fr 1.1fr; gap: 8px 10px; align-items: end; }
.grid-children { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; align-items: end; }
.parent-row { display: grid; grid-template-columns: 2fr 1fr; gap: 8px 10px; align-items: end; }
.gp-single-line { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px 10px; align-items: end; }
.grid-siblings { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px 10px; align-items: end; }

/* Inputs e Auto-Resize Textarea */
input[type="text"], 
input[type="email"], 
input[type="date"], 
input[type="time"], 
textarea {
    width: 100%;
    padding: 8px 10px; 
    border: 1px solid var(--border-color);
    background-color: var(--input-bg);
    font-family: 'Montserrat', sans-serif;
    /* FIX PARA IOS: Fonte obrigatoriamente 16px para evitar auto-zoom e pulos na tela */
    font-size: 16px; 
    border-radius: 3px; 
    box-sizing: border-box;
    transition: border-color 0.2s ease;
    height: 38px; 
    appearance: none; 
    -webkit-appearance: none;
}

textarea { 
    min-height: 40px; 
    height: auto; 
    resize: none; 
    overflow: hidden; 
    line-height: 1.4; 
    display: block;
}
.textarea-tall { min-height: 60px; }
.textarea-extra-tall { min-height: 120px; } 

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
}

input:focus, textarea:focus { outline: none; border-color: var(--border-focus); }

/* Seleção e Botões */
.radio-group { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; min-height: 35px; }
.radio-item { display: flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 300; cursor: pointer; }
.radio-item input { accent-color: #333333; }
.flex-align { display: flex; align-items: center; gap: 6px; }
.inline-input { 
    flex: 1; 
    padding: 6px 8px !important; 
    height: 30px !important; 
}
.inline-radio-row { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eaeaea; }

.footer-btns { margin-top: 30px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.btn-submit { background-color: #222222; color: #ffffff; padding: 12px 35px; border: none; border-radius: 3px; font-weight: 500; cursor: pointer; }
.btn-submit:hover { background-color: #444444; }
.save-status { font-size: 13px; color: #27ae60; margin-top: 10px; display: none; }

/* Responsividade e Print */
@media (max-width: 768px) {
    .grid, .flex-row-3, .flex-row-4, .parent-row, .grid-siblings { 
        grid-template-columns: 1fr; 
    }
    
    .full {
        grid-column: span 1;
    }

    .gp-single-line { grid-template-columns: 1fr 1fr; }
    .gp-single-line > .field:first-child { grid-column: span 2; }
    .inline-radio-row { flex-direction: column; align-items: flex-start; border: none; }
    
    /* Proteção extra contra rolagem horizontal fantasma */
    html, body {
        overflow-x: hidden;
    }
}

@media print {
    .intro-box, .outro-box, .footer-btns, .guidelines-card { display: none !important; }
    .section-box { background: transparent !important; page-break-inside: avoid; }
    textarea { height: auto !important; overflow: visible !important; }
}