/* =====================================================================
   HyperDash — estilos das telas de painel.

   O sistema visual vem do Design System Gruppy (css/gruppy/gruppy.css) e o
   esqueleto do app de css/hd-app.css. Aqui fica so o que e proprio das telas
   de listagem de paineis: o controle segmentado, o cartao de painel e o
   estado vazio da galeria. Tudo escrito em tokens --g-*; nenhuma cor literal.
   ===================================================================== */

:root {
    /* Alias historico da cor da marca. Continua existindo porque o grafico do
       Log de Acessos le --hd-brand via getComputedStyle. Aponta para o token
       do DS, entao o override por tenant (--g-primaria) chega ate o grafico. */
    --hd-brand: var(--g-primaria);
    --hd-brand-2: var(--g-secundaria);
}

/* Titulo das listagens de painel */
.hd-home-title {
    font-size: var(--g-fs-lg);
    font-weight: var(--g-fw-semi);
    color: var(--g-titulo);
    letter-spacing: var(--g-ls-justo);
    margin-bottom: var(--g-sp-05);
}

/* ---------------------------------------------------------------------
   Galeria de paineis
   A grade e o .g-grid do DS (auto-fill, minimo de 240px). Antes a tela usava
   o grid do Bootstrap com col-xl-2, o que dava cartoes de ~140px e titulo
   truncado em quase todos; o minimo do DS resolve isso sozinho.
   --------------------------------------------------------------------- */
.hd-galeria { gap: var(--g-sp-4); }
.hd-galeria-lista { display: grid; grid-template-columns: 1fr; gap: var(--g-sp-2); }

/* ---------------------------------------------------------------------
   Cartao de painel
   --------------------------------------------------------------------- */
/* O cartao E um .g-card do DS (fundo, borda e raio vem de la). Aqui fica so o
   que a galeria precisa a mais: a midia sangra ate a borda, entao o padding do
   DS cai; mais a elevacao no hover e a variante em linha. */
.hd-card {
    padding: 0;
    display: flex; flex-direction: column; height: 100%;
    overflow: hidden;
    text-decoration: none; color: inherit; position: relative;
    box-shadow: var(--g-shadow-sm);
    transition: transform var(--g-dur-base) var(--g-ease), box-shadow var(--g-dur-base) var(--g-ease), border-color var(--g-dur-base) var(--g-ease);
}
.hd-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--g-shadow-md);
    border-color: var(--g-acento);
    color: inherit;
}
.hd-thumb-wrap { aspect-ratio: 16 / 10; overflow: hidden; background: var(--g-fundo); }
.hd-thumb { width: 100%; height: 100%; object-fit: cover; transition: transform var(--g-dur-lento) var(--g-ease); }
.hd-card:hover .hd-thumb { transform: scale(1.04); }
.hd-card-body { padding: var(--g-sp-3) var(--g-sp-4); flex: 1; min-width: 0; }
.hd-card-title {
    font-size: var(--g-fs-md);
    font-weight: var(--g-fw-semi);
    color: var(--g-titulo);
    margin-bottom: var(--g-sp-1);
}
.hd-card-desc { font-size: var(--g-fs-xs); color: var(--g-texto-suave); }

/* ---------------------------------------------------------------------
   Faixa diagonal "novo" — canto superior direito do cartao / da linha.
   O contedor recorta a faixa e herda o arredondamento do elemento pai,
   entao basta o pai ser position:relative e ter border-radius.
   --------------------------------------------------------------------- */
.hd-faixa-novo {
    position: absolute; top: 0; right: 0;
    width: 62px; height: 62px;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
    border-top-right-radius: inherit;
}
.hd-faixa-novo span {
    position: absolute; top: 12px; right: -20px;
    width: 88px; padding: 2px 0;
    transform: rotate(45deg);
    /* Preenchimento da marca com a tinta que o DS define para ficar por cima
       dele (--g-primaria-sobre). O tenant troca os dois de uma vez. */
    background: var(--g-primaria);
    color: var(--g-primaria-sobre);
    text-align: center;
    font-size: var(--g-fs-2xs);
    font-weight: var(--g-fw-forte);
    letter-spacing: var(--g-ls-caps);
    text-transform: uppercase;
    box-shadow: var(--g-shadow-sm);
}

/* Variante compacta — linhas de lista, onde o canto e menor */
.hd-faixa-novo--sm { width: 46px; height: 46px; }
.hd-faixa-novo--sm span {
    top: 10px; right: -16px;
    width: 64px; padding: 1px 0;
    font-size: var(--g-fs-3xs);
    letter-spacing: var(--g-ls-caps);
}

/* Variante espelhada — canto superior esquerdo (usada onde o canto direito
   ja pertence a seta .hd-card-go) */
.hd-faixa-novo--esq {
    right: auto; left: 0;
    border-top-right-radius: 0;
    border-top-left-radius: inherit;
}
.hd-faixa-novo--esq span {
    right: auto; left: -20px;
    transform: rotate(-45deg);
}
.hd-faixa-novo--esq.hd-faixa-novo--sm span { left: -16px; }

/* A etiqueta de categoria era copia literal de .g-chip--marca; sobrou so o
   truncamento, que o chip do DS nao faz porque nao conhece largura de cartao. */
.hd-chip-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Seta que aparece no hover do cartao */
.hd-card-go {
    position: absolute; top: var(--g-sp-3); right: var(--g-sp-3); width: 28px; height: 28px;
    border-radius: var(--g-radius-pill);
    background: var(--g-superficie); color: var(--g-primaria);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: translateX(-6px);
    transition: opacity var(--g-dur-base) var(--g-ease), transform var(--g-dur-base) var(--g-ease);
    box-shadow: var(--g-shadow);
}
.hd-card:hover .hd-card-go { opacity: 1; transform: translateX(0); }

/* Variante em lista */
.hd-card--list { flex-direction: row; align-items: center; }
.hd-card--list .hd-thumb-wrap { width: 130px; min-width: 130px; height: 80px; aspect-ratio: auto; }
.hd-card--list .hd-card-go {
    position: static; opacity: 1; transform: none; box-shadow: none;
    background: transparent; margin-right: var(--g-sp-4);
}

/* O estado vazio E um .g-empty do DS; a galeria so acrescenta a moldura
   tracejada, que demarca a area que teria conteudo. */
.hd-empty {
    border: 1px dashed var(--g-borda-forte);
    border-radius: var(--g-radius-md);
    background: var(--g-superficie-alt);
}
.hd-empty i { font-size: var(--g-fs-2xl); margin-bottom: var(--g-sp-2); color: var(--g-texto-tenue); }

/* Tela de login: coluna da imagem */
#img-auth-parent {
    justify-content: inherit;
    flex-direction: column;
    align-items: center;
}