:root {
            --primary-color: #3f51b5;
            --secondary-color: #f50057;
            --accent-color: #ff9800;
            --background-color: #f5f5f5;
            --card-color: #ffffff;
			--card-color-cinza: #989A91;
            --text-color: #333333;
            --border-radius: 8px;
            --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            --reference-bg: #f9f9f9;
            --catecismo-color: #3f51b5;
            --santos-color: #f50057;
            --antigo-testamento-color: #4caf50;
            --novo-testamento-color:#ffff00
        }

        * { 
            margin: 0; 
            padding: 0; 
            box-sizing: border-box; 
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            
        }
       

        body { 
            background-color: var(--background-color); 
            color: var(--text-color); 
            line-height: 1.6; 
        }

        .login-page {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f8f8;
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container { 
            max-width: 1200px; 
            margin: 0 auto; 
            padding: 20px;
            text-align: center;
        }

        .login-container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0,0,0,0.1);
            width: 300px;
        }

       
        input {
            padding: 10px;
            font-size: 1rem;
            width: 100%;
            margin-top: 10px;
            box-sizing: border-box;
        }

        .mensagem-erro {
            color: red;
            margin-top: 10px;
        }

        .botao-login {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            font-size: 1rem;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            margin-top: 15px;
        }

        .botao-login:hover {
            background-color: #45a049;
        }

        
        header { 
            background-color: var(--primary-color); 
            color: white; 
            padding: 20px 0; 
            text-align: center; 
            margin-bottom: 30px; 
            border-radius: var(--border-radius); 
            box-shadow: var(--box-shadow); 
        }
        h1 { 
            font-size: 2.5rem; 
            margin-bottom: 10px; 
        }
        h2 { 
            font-size: 1.8rem; 
            margin: 20px 0; color: var(--primary-color); 
            border-bottom: 2px solid var(--primary-color); 
            padding-bottom: 5px; 
        }
        h3 { 
            font-size: 1.4rem; margin: 
            15px 0; color: var(--secondary-color); 
        }
        h4 { 
            font-size: 1.2rem; 
            margin: 10px 0; 
            color: var(--primary-color); 
        }

        h5 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            color: #292929
        }

        img {
            border-radius: var(--border-radius);
            box-sizing: border-box;
            width: 420px;
            height: 550px;
        }

        #imagem-unica {
            border-radius: var(--border-radius);
            box-sizing: border-box;
            width: 600px;
            height: 380px;
        }

        .imagem-sao-jose {
            border-radius: var(--border-radius);
            box-sizing: border-box;
            width: 400px;
            height: 300px;
        }

        .nav-tabs { 
            display: flex; 
            flex-wrap: wrap; 
            list-style: none; 
            border-bottom: 2px solid var(--primary-color); 
            margin-bottom: 20px; 
        }
        .nav-tabs li { 
            margin-right: 5px; 
        }
        .nav-tabs a { 
            display: block; 
            padding: 10px 20px; 
            text-decoration: none; 
            background-color: #e0e0e0; 
            color: var(--text-color); 
            border-radius: var(--border-radius) var(--border-radius) 0 0; 
            transition: all 0.3s ease; 
        }
        .nav-tabs a:hover, .nav-tabs a.active {
            background-color: var(--primary-color); 
            color: white; 
        }
        .tab-content { 
            display: none; 
            padding: 20px; 
            background-color: var(--card-color); 
            border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius); 
            box-shadow: var(--box-shadow); 
            margin-bottom: 30px; 
        }
        .tab-content.active { 
            display: block; 
        }

        .card { 
            background-color: var(--card-color); 
            border-radius: var(--border-radius); 
            box-shadow: var(--box-shadow); 
            padding: 20px; 
            margin-bottom: 20px; 
            text-align: justify;
        }
        .card-cinza { 
            background-color: var(--card-color-cinza); 
            border-radius: var(--border-radius); 
            box-shadow: var(--box-shadow); 
            padding: 20px; 
            margin-bottom: 20px; 
        }

        .progress-container { 
            margin: 20px 0; 
        }
        .progress-bar { 
            height: 20px; 
            background-color: #e0e0e0; 
            border-radius: 10px; 
            overflow: hidden; 
            margin-bottom: 10px; 
        }

        .progress { 
            height: 100%; 
            background-color: var(--accent-color); 
            width: 0%; 
            transition: width 0.5s ease; 
        }
        .progress-label { 
            display: flex; 
            justify-content: space-between; 
            font-weight: bold; 
        }
        .map-container { 
            margin: 20px 0;
            text-align: center;
        }
        .map-container-img { 
            max-width: 100%; 
            height: auto; 
            border-radius: var(--border-radius); 
            box-shadow: var(--box-shadow); 
        }

        .notes-container { 
            margin: 20px 0; 
        }
        textarea { 
            width: 100%; 
            min-height: 150px; 
            padding: 10px; 
            border: 1px solid #ddd; 
            border-radius: var(--border-radius); 
            resize: vertical; 
            font-family: inherit; 
            margin-bottom: 10px; 
        }
        button { 
            background-color: var(--primary-color); 
            color: white; border: none; 
            padding: 10px 20px; 
            border-radius: var(--border-radius); 
            cursor: pointer; 
            transition: background-color 0.3s ease; 
        }
        button:hover { 
            background-color: #303f9f; 
        }

        .date-input {
            margin-left: 10px;
            padding: 3px 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 0.9rem;
            color: var(--text-color);
            background-color: #f9f9f9;
        }
        
        .date-label {
            font-size: 0.85rem;
            margin-left: 10px;
            color: #666;
        }

        .date-container {
            display: flex;
            align-items: center;
            margin-top: 5px;
        }

        .catecismo-reference, .santos-reference, .antigo-testamento-reference, .novo-testamento-reference { 
            padding: 12px; 
            background-color: var(--reference-bg); 
            margin: 10px 0; 
            font-size: 0.95rem; 
        }
        .catecismo-reference { 
            border-left: 4px solid var(--catecismo-color); 
        }
        .santos-reference { 
            border-left: 4px solid var(--santos-color); 
        }
        .antigo-testamento-reference { 
            border-left: 4px solid var(--antigo-testamento-color); 
        }

        .novo-testamento-reference {
            border-left: 4px solid var(--novo-testamento-color);
        }

        .reference-tag { 
            display: inline-block; 
            padding: 2px 6px; 
            border-radius: 4px; 
            font-size: 0.8rem; 
            font-weight: bold; 
            margin-right: 5px; 
            color: white; 
        }

        .catecismo-tag { 
            background-color: var(--catecismo-color); 
        }
        .santos-tag { 
            background-color: var(--santos-color); 
        }
        .antigo-testamento-tag { 
            background-color: var(--antigo-testamento-color); 
        }

        .novo-testamento-tag {
            background-color: var(--novo-testamento-color);
            color:black
        }

        .reference-header { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            margin-bottom: 5px; 
        }
        .reference-title { 
            font-weight: bold; 
        }
        .reference-content { 
            margin-bottom: 5px; 
        }

        .checkbox-container { 
            margin: 10px 0; 
        }
        .checkbox-item { 
            display: flex; 
            align-items: center; 
            margin-bottom: 10px; 
            border-bottom: 1px solid #eee; 
            text-align: left;
        }
        .checkbox-item-input[type="checkbox"] {
            margin-right: 10px; 
        }
        .checkbox-content { 
            text-align: left;
        }

        .chapter-title {
            font-weight: bold; 
            margin-bottom: 5px; 
        }
        .chapter-references { 
            margin-top: 8px; 
        }
        .two-columns { 
            display: flex; 
            flex-wrap: wrap; 
            gap: 20px; 
            text-align: justify;
        }
        .column { 
            flex: 1; 
            min-width: 300px; 
            text-align: justify;
        }

        .references-toggle { 
            background-color: transparent; 
            color: var(--primary-color); 
            border: 1px solid var(--primary-color); 
            padding: 5px 10px; 
            font-size: 0.8rem; 
            margin-top: 5px; 
        }
        .references-toggle:hover { 
            background-color: rgba(63, 81, 181, 0.1); 
        }
        .hidden-references { 
            display: none; 
        }

        .chapter-list { 
            max-height: 500px; 
            overflow-y: auto; 
            padding-right: 10px; 
        }
        .chapter-list::-webkit-scrollbar { 
            width: 8px; 
        }
        .chapter-list::-webkit-scrollbar-track { 
            background: #f1f1f1; 
            border-radius: 10px; 
        }
        .chapter-list::-webkit-scrollbar-thumb { 
            background: #888; 
            border-radius: 10px; 
        }
        .chapter-list::-webkit-scrollbar-thumb:hover { 
            background: #555; 
        }

        .legend { 
            display: flex; 
            flex-wrap: wrap; 
            gap: 10px; 
            margin: 15px 0; 
            padding: 10px; 
            background-color: #f0f0f0; 
            border-radius: var(--border-radius); 
        }
        .legend-item { 
            display: flex; 
            align-items: center; 
            margin-right: 15px; 
        }
        .legend-color { 
            width: 15px; 
            height: 15px; 
            margin-right: 5px; 
            border-radius: 3px; 
        }
        footer { 
            text-align: center;
            padding: 20px; 
            margin-top: 30px; 
            background-color: var(--primary-color); 
            color: white; 
            border-radius: var(--border-radius); 
        }

        @media (max-width: 768px) { 
            .two-columns { 
                flex-direction: column; 
            } 
            .nav-tabs { 
                flex-direction: column; 
            } 
            .nav-tabs li {
                 margin-right: 0;
                 margin-bottom: 5px; 
                } 
                .nav-tabs a { 
                    border-radius: var(--border-radius); 
                } 
            }

/* Ajustes compartilhados: formulários, mapas e celular. */
img, #imagem-unica, .imagem-sao-jose { max-width:100%; height:auto; }
input[type=checkbox] { width:22px; height:22px; margin:5px 10px 0 0; flex-shrink:0; }
.column, .checkbox-content { min-width:0; }
.column { flex:1 1 280px; }
.container { text-align:left; }
.checkbox-item { align-items:flex-start; }
.chapter-title label { cursor:pointer; }
input[type=date] { width:auto; max-width:100%; min-height:44px; }
button, .action { min-height:44px; }
.action { display:inline-flex; align-items:center; padding:8px 16px; background:var(--primary-color); color:white; border-radius:6px; text-decoration:none; }
:focus-visible { outline:3px solid #b35d00; outline-offset:3px; }
.auth-shell { max-width:480px; margin:32px auto; padding:20px; }
.auth-shell .login-container { width:100%; }
.auth-shell label { display:block; margin-top:12px; }
.auth-links { margin-top:20px; display:flex; flex-wrap:wrap; gap:16px; }
.notice { padding:12px; margin:12px 0; background:#fff2da; color:#4c3400; }
.account-nav { padding:12px; text-align:center; }
.portal-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }
#save-status:not(:empty) { position:sticky; top:0; padding:12px; background:#fff2da; z-index:10; }
.chapter-title { display:block; }
@media(max-width:768px) { .container { padding:12px; } .card,.tab-content { padding:14px; } .column { flex-basis:auto; width:100%; } h1 { font-size:1.8rem; } .chapter-list { max-height:none; overflow:visible; } }
@media(prefers-reduced-motion:reduce) { * { transition:none !important; } }