/* ===========================================================================
   O mini app do Calendário na home (_assets/js/miniapps/calendario.js): o mês, a lista dos próximos dias e o
   cartão do dia de hoje. O cartão do bloco, o topo e os pedaços comuns dos mini apps são do home.css.
   =========================================================================== */

.pg .hm-cal{
    display: flex;
    flex: 1;
    gap: 16px;
    min-height: 0;
}

.pg .hm-cal-mes{
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.pg .hm-cal-topo{
    display: flex;
    align-items: center;
    gap: 4px;
    margin: -4px 0 4px 0;
}

.pg .hm-cal-topo strong,
.pg .hm-cal-topo a{
    flex: 1;
    overflow: hidden;
    color: var(--fx-text);
    font-size: 0.95rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pg .hm-cal-topo a:hover{
    color: var(--fx-primary);
    text-decoration: underline;
}

.pg .hm-cal-anda{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--fx-muted);
}

.pg .hm-cal-anda:hover{
    background: color-mix(in srgb, var(--fx-primary) 10%, transparent);
    color: var(--fx-primary);
}

.pg .hm-cal-anda:focus-visible{
    outline: 3px solid color-mix(in srgb, var(--fx-primary) 45%, transparent);
}

/* a grade estica com o bloco: as semanas dividem a altura que sobra */
.pg .hm-cal-grade{
    display: grid;
    flex: 1;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-auto-rows: minmax(0, 1fr);
    min-height: 0;
    text-align: center;
}

.pg .hm-cal-sem{
    padding-bottom: 4px;
    color: var(--fx-muted);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.pg .hm-cal-dia{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    font-size: 0.84rem;
    font-weight: 700;
}

.pg .hm-cal-dia > span{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    max-height: 100%;
    border-radius: 50%;
}

.pg .hm-cal-fim{
    color: var(--fx-muted);
}

.pg .hm-cal-fora{
    color: color-mix(in srgb, var(--fx-muted) 45%, transparent);
}

.pg .hm-cal-feriado > span{
    background: color-mix(in srgb, var(--fx-error) 13%, transparent);
    color: var(--fx-error);
}

/* a bolinha do dia que tem o que os outros mini apps marcaram (os compromissos da Agenda) */
.pg .hm-cal-tem > span::after{
    content: "";
    position: absolute;
    bottom: 1px;
    left: 50%;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
    background: var(--fx-primary);
}

.pg .hm-cal-hoje > span{
    background: var(--fx-primary);
    color: var(--fx-on-primary);
    font-weight: 900;
}

.pg .hm-cal-hoje > span::after{
    background: var(--fx-on-primary);
}

/* ---- a lista dos próximos dias (bloco grande) ---- */
.pg .hm-cal-lista{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    scrollbar-width: thin;
}

.pg .hm-cal-lista li{
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.25;
}

.pg .hm-cal-lista b{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3px 0;
    border-radius: 10px;
    background: var(--fx-surface-alto);
    color: var(--fx-primary);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.05;
}

.pg .hm-cal-lista b small{
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
}

.pg .hm-cal-lista .hm-cal-l-feriado b{
    background: color-mix(in srgb, var(--fx-error) 13%, transparent);
    color: var(--fx-error);
}

.pg .hm-cal-lista span{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pg .hm-cal-lista span small{
    display: block;
    color: var(--fx-muted);
    font-size: 0.76rem;
    font-weight: 600;
}

/* ---- o dia de hoje (bloco pequeno) ---- */
/* no bloco estreito o texto desce para baixo do dia */
.pg .hm-cal-curto{
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    gap: 10px 14px;
    min-height: 0;
    overflow: hidden;
}

.pg .hm-cal-curto-dia{
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 70px;
    border-radius: 16px;
    background: var(--fx-primary);
    color: var(--fx-on-primary);
}

.pg .hm-cal-curto-dia.hm-cal-curto-folga{
    background: color-mix(in srgb, var(--fx-error) 13%, var(--fx-cartao));
    color: var(--fx-error);
}

.pg .hm-cal-curto-dia small{
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pg .hm-cal-curto-dia strong{
    font-size: 1.9rem;
    font-weight: 900;
    line-height: 1;
}

.pg .hm-cal-curto p{
    flex: 1 1 150px;
    min-width: 0;
    margin: 0;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.35;
}

.pg .hm-cal-curto p b{
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: capitalize;
}

.pg .hm-cal-curto-linha{
    display: block;
    color: var(--fx-muted);
}

/* a consulta que falhou: o recado em cima do mês */
.pg .hm-cal-recado{
    margin: 0 0 6px 0;
    color: var(--fx-error);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.3;
}