/* ===========================================================================
   O mini app da Agenda na home (_assets/js/miniapps/agenda.js): a lista do dia com a linha do agora e o próximo
   compromisso. O cartão do bloco, o topo e os pedaços comuns dos mini apps são do home.css.
   =========================================================================== */

.pg .hm-ag{
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.pg .hm-ag-colunas{
    display: flex;
    flex: 1;
    gap: 18px;
    min-height: 0;
}

.pg .hm-ag-dia{
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.pg .hm-ag-lista{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0 2px 0 0;
    overflow-y: auto;
    list-style: none;
    scrollbar-width: thin;
}

.pg .hm-ag-item > a,
.pg .hm-ag-item > span{
    display: grid;
    grid-template-columns: 42px 4px minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    padding: 5px 6px 5px 0;
    border-radius: 10px;
    color: var(--fx-text);
    text-decoration: none;
}

.pg .hm-ag-item > a:hover{
    background: var(--fx-surface);
}

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

.pg .hm-ag-hora{
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: right;
}

.pg .hm-ag-hora small{
    display: block;
    color: var(--fx-muted);
    font-size: 0.74rem;
    font-weight: 700;
}

/* a cor do tipo do compromisso; sem cor no tipo, a do tema */
.pg .hm-ag-cor{
    align-self: stretch;
    min-height: 28px;
    border-radius: 3px;
    background: var(--hm-ag-cor, var(--fx-primary));
}

.pg .hm-ag-texto{
    min-width: 0;
}

.pg .hm-ag-titulo,
.pg .hm-ag-onde{
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pg .hm-ag-titulo{
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
}

.pg .hm-ag-onde{
    color: var(--fx-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.pg .hm-ag-passou{
    opacity: 0.5;
}

/* o convite ainda sem resposta: a cor pontilhada, como no app Agenda */
.pg .hm-ag-convite .hm-ag-cor{
    background: repeating-linear-gradient(var(--hm-ag-cor, var(--fx-primary)) 0 4px, transparent 4px 7px);
}

/* a linha do agora: a hora e um traço com uma bolinha */
.pg .hm-ag-agora{
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
    color: var(--fx-error);
}

.pg .hm-ag-agora span{
    font-size: 0.72rem;
    font-weight: 900;
    text-align: right;
}

.pg .hm-ag-agora::after{
    content: "";
    height: 10px;
    background:
        radial-gradient(circle at 5px 50%, var(--fx-error) 4px, transparent 4.5px),
        linear-gradient(var(--fx-error), var(--fx-error)) 0 50% / 100% 2px no-repeat;
}

.pg .hm-ag-rodape{
    display: flex;
    gap: 8px;
    margin: 10px 0 0 0;
}

/* ---- o próximo compromisso (bloco pequeno) ---- */
.pg .hm-ag-curto{
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 0;
}

.pg .hm-ag-curto-rotulo{
    color: var(--fx-warning);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pg .hm-ag-curto a{
    color: var(--fx-text);
    text-decoration: none;
}

.pg .hm-ag-curto a:hover strong{
    color: var(--fx-primary);
}

.pg .hm-ag-curto strong{
    display: -webkit-box;
    overflow: hidden;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.pg .hm-ag-curto > span:last-child{
    color: var(--fx-muted);
    font-size: 0.82rem;
    font-weight: 700;
}