/* =========================================================================
   Marca d'água "Tecnologia e desenvolvimento por Datasy"
   Kit reutilizável — não depende de variáveis, framework ou fonte do sistema.
   Prefixo .dts- para não colidir com o CSS de cada projeto.
   ========================================================================= */

.dts-credit{
    display:inline-flex;
    align-items:center;
    flex-wrap:wrap;                     /* nunca estoura a largura do rodapé */
    gap:12px;
    max-width:100%;
    padding:4px 0;
    color:#8fa9c2;                      /* cor do texto em fundo escuro */
    font-family:inherit;
    line-height:1.15;
    text-decoration:none;
    white-space:nowrap;
    transition:color .18s ease;
}

.dts-credit__copy{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:2px;
}

.dts-credit__copy small{
    font-size:.62rem;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:inherit;
    opacity:.85;
}

.dts-credit__copy strong{
    font-size:.8rem;
    font-weight:600;
    letter-spacing:0;
    color:#dbe7f3;                      /* destaque em fundo escuro */
}

.dts-credit__logo{
    display:block;
    width:auto;
    height:26px;
    max-width:120px;
    object-fit:contain;
    opacity:.9;
    transition:opacity .18s ease,transform .18s ease;
}

.dts-credit:hover{color:#fff}
.dts-credit:hover .dts-credit__copy strong{color:#fff}
.dts-credit:hover .dts-credit__logo{opacity:1;transform:translateY(-1px)}
.dts-credit:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:8px}

/* ---- Variante para fundo claro ---------------------------------------- */
.dts-credit--claro{color:#5b6b80}
.dts-credit--claro .dts-credit__copy strong{color:#16243a}
.dts-credit--claro .dts-credit__logo{filter:brightness(0);opacity:.72}
.dts-credit--claro:hover{color:#16243a}
.dts-credit--claro:hover .dts-credit__copy strong{color:#16243a}

/* ---- Variante só com o logo (rodapés apertados, painéis) --------------- */
.dts-credit--so-logo .dts-credit__copy{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ---- Variante empilhada (coluna estreita) ----------------------------- */
.dts-credit--empilhado{flex-direction:column;gap:8px;white-space:normal;text-align:center}
.dts-credit--empilhado .dts-credit__copy{align-items:center}

/* ---- Faixa pronta: use quando o sistema não tem rodapé ----------------- */
.dts-credit-bar{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
    padding:18px 24px;
    border-top:1px solid rgba(255,255,255,.1);
    background:#0f1f33;                 /* troque pela cor do seu rodapé */
    font-family:inherit;
}
.dts-credit-bar--claro{background:#f4f6f9;border-top-color:#e2e8ef}

/* ---- Telas pequenas ---------------------------------------------------- */
@media (max-width:600px){
    .dts-credit{gap:10px}
    .dts-credit__logo{height:22px;max-width:92px}
    .dts-credit__copy small{font-size:.56rem;letter-spacing:.03em}
    .dts-credit__copy strong{font-size:.76rem}
}
@media (max-width:360px){
    .dts-credit{white-space:normal}
    .dts-credit__copy{align-items:flex-start}
}

/* ---- Acessibilidade e impressão ---------------------------------------- */
@media (prefers-reduced-motion:reduce){
    .dts-credit,.dts-credit__logo{transition:none}
    .dts-credit:hover .dts-credit__logo{transform:none}
}
@media print{
    .dts-credit{color:#333}
    .dts-credit__copy strong{color:#000}
    .dts-credit__logo{filter:brightness(0);opacity:1}
}