html,
body{
margin:0;
padding:0;
overflow-x:hidden;
font-family:Arial, Helvetica, sans-serif;
}

*{
box-sizing:border-box;
}

img{
max-width:100%;
height:auto;
}

.container_santos{
width:100%;
max-width:1100px;
margin:0 auto;
padding:22px 18px 28px 18px;
}

.topo_santos{
margin-bottom:10px;
}

.linha_titulo_santos{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
border-bottom:3px solid #d8a327;
padding-bottom:8px;
}

.titulo_santos{
margin:0;
font-size:30px;
color:#1a3e6e;
display:flex;
align-items:center;
gap:10px;
font-family:Georgia, "Times New Roman", serif;
line-height:1.1;
white-space:nowrap;
}

.icone_titulo{
width:34px;
height:34px;
}

.subtopo_santos{
font-size:11px;
line-height:1.35;
color:#64778d;
text-align:right;
max-width:360px;
}

/* MODOS */

.modos_visualizacao{
display:flex;
gap:8px;
margin:12px 0 10px 0;
flex-wrap:wrap;
}

.modos_visualizacao a{
display:inline-block;
padding:6px 10px;
border-radius:999px;
background:#eef4fb;
border:1px solid #d6e1ee;
color:#1a3e6e;
text-decoration:none;
font-size:12px;
font-weight:700;
}

.modos_visualizacao a.ativo{
background:#1a3e6e;
color:#fff;
}

/* ALFABETO CORRIGIDO */

.alfabeto_santos,
.meses_santos{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:5px;
margin:10px 0 12px 0;
overflow:visible;
white-space:normal;
padding-bottom:2px;
}

.alfabeto_santos a,
.meses_santos a{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:28px;
height:28px;
padding:0 7px;
text-align:center;
border-radius:999px;
background:#f3f7fc;
border:1px solid #d8e3ef;
color:#1a3e6e;
text-decoration:none;
font-size:12px;
font-weight:700;
line-height:1;
flex:0 0 auto;
}

.alfabeto_santos a:hover,
.meses_santos a:hover{
background:#e8f0fa;
}

.alfabeto_santos a.ativo,
.meses_santos a.ativo{
background:#1a3e6e;
color:#fff;
border-color:#1a3e6e;
}

/* BUSCA */

.box_busca{
margin:0 0 14px 0;
}

.box_busca form{
display:flex;
gap:6px;
flex-wrap:wrap;
align-items:center;
}

.box_busca input,
.box_busca select{
padding:7px 9px;
border-radius:7px;
border:1px solid #cfdbe8;
font-size:12px;
background:#fff;
height:34px;
}

.box_busca input{
min-width:180px;
flex:0 1 220px;
}

.box_busca select{
min-width:88px;
}

.box_busca button{
background:#1a3e6e;
color:#fff;
border:none;
padding:7px 12px;
border-radius:7px;
font-size:12px;
font-weight:700;
height:34px;
cursor:pointer;
}

/* MÊS */

.bloco_mes_santos{
margin-top:16px;
}

.titulo_mes_santos{
font-size:22px;
font-weight:700;
font-family:Georgia,"Times New Roman",serif;
color:#2b5f95;
padding:6px 0 8px 0;
margin-bottom:6px;
border-bottom:1px solid #d7e4f1;
}

/* LISTA */

.lista_santos{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:6px 14px;
}

.item_santo{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:9px 10px;
text-decoration:none;
color:#1a3e6e;
border-bottom:1px solid #e2e9f2;
background:#fff;
}

.lista_santos .item_santo:nth-child(4n+1),
.lista_santos .item_santo:nth-child(4n+2){
background:#f7fbff;
}

.nome_santo_lista{
font-size:15px;
line-height:1.2;
font-family:Georgia,"Times New Roman",serif;
font-weight:700;
}

.data_item_santo{
font-size:11px;
font-weight:700;
color:#667688;
white-space:nowrap;
}

.msg_vazia{
text-align:center;
padding:22px 10px;
color:#77879a;
background:#fff;
border:1px solid #e4ebf3;
border-radius:10px;
margin-top:8px;
}

/* DARK */

body.modo-escuro .titulo_santos{
color:#e7eef7;
}

body.modo-escuro .alfabeto_santos a,
body.modo-escuro .meses_santos a{
background:#182230;
border-color:#2b3a4d;
color:#dce6f1;
}

body.modo-escuro .alfabeto_santos a.ativo,
body.modo-escuro .meses_santos a.ativo{
background:#d8a327;
color:#182230;
}

body.modo-escuro .item_santo{
color:#fff;
border-bottom:1px solid #2b3a4d;
}

body.modo-escuro .lista_santos .item_santo:nth-child(4n+1),
body.modo-escuro .lista_santos .item_santo:nth-child(4n+2){
background:#182230;
}

body.modo-escuro .lista_santos .item_santo:nth-child(4n+3),
body.modo-escuro .lista_santos .item_santo:nth-child(4n+4){
background:#1d2836;
}

/* RESPONSIVO */

@media(max-width:700px){

.lista_santos{
grid-template-columns:1fr;
}

}

@media(max-width:600px){

.container_santos{
padding:18px 10px 24px;
}

.linha_titulo_santos{
justify-content:center;
text-align:center;
}

.titulo_santos{
font-size:23px;
white-space:normal;
justify-content:center;
width:100%;
}

.subtopo_santos{
text-align:center;
max-width:none;
width:100%;
}

.modos_visualizacao{
justify-content:center;
}

.box_busca input{
min-width:100%;
flex:1 1 100%;
height:36px;
font-size:13px;
}

.box_busca select{
min-width:calc(50% - 4px);
flex:1 1 calc(50% - 4px);
height:36px;
font-size:13px;
}

.box_busca button{
width:100%;
height:36px;
}

.titulo_mes_santos{
font-size:20px;
text-align:center;
}

.alfabeto_santos a,
.meses_santos a{
min-width:30px;
height:30px;
font-size:12px;
}

}