/* Sistema visual do PautaOn. Ver DESIGN.md.
   Mundo fixado pelo Bruno em 02/09/2026: painel claro de trabalho com barra
   lateral, coluna de kanban tingida por etapa, cartão branco dentro dela.
   Claro e escuro seguindo a preferência do sistema operacional. */

:root {
    color-scheme: light dark;

    --fonte: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Neutros: o conteúdo é o mais claro, a lateral é mais fria. */
    --chao: #eeeef2;
    --lateral: #f7f7fa;
    --superficie: #ffffff;
    --linha: #e2e2e9;
    --linha-forte: #cfcfda;
    --tinta: #1c1d22;
    --tinta-media: #55565f;
    --tinta-fraca: #7c7d88;

    /* Vermelho existe só para prazo vencido. Nada mais. */
    --vencido: #a3221a;
    --vencido-fundo: #fdeceb;

    --foco: #3b5bdb;

    /* Uma etapa, um matiz. O índice vem do cor_idx que já está no banco. */
    --etapa-0-fundo: #ebe7fb;
    --etapa-0-tinta: #5b3fc4;
    --etapa-1-fundo: #e3ecfd;
    --etapa-1-tinta: #2b5fc9;
    --etapa-2-fundo: #fbe5ef;
    --etapa-2-tinta: #b03470;
    --etapa-3-fundo: #e1f4e8;
    --etapa-3-tinta: #1f7a44;
    --etapa-4-fundo: #fdf0da;
    --etapa-4-tinta: #96601a;

    --raio-painel: 14px;
    --raio-cartao: 10px;
    --raio-capsula: 999px;

    --sombra-cartao: 0 1px 2px rgb(28 29 34 / 0.06), 0 2px 8px rgb(28 29 34 / 0.05);
    --sombra-alta: 0 8px 24px rgb(28 29 34 / 0.12), 0 2px 6px rgb(28 29 34 / 0.08);

    --passo: 150ms;
}

@media (prefers-color-scheme: dark) {
    :root {
        --chao: #131418;
        --lateral: #191a1f;
        --superficie: #21232a;
        --linha: #2e3038;
        --linha-forte: #3d404a;
        --tinta: #eceef2;
        --tinta-media: #a9acb6;
        --tinta-fraca: #82858f;

        --vencido: #ff9c8c;
        --vencido-fundo: #3a1d19;

        --foco: #8fa6ff;

        /* Véu de baixa saturação sobre o grafite, e nunca o pastel escurecido. */
        --etapa-0-fundo: #241f3a;
        --etapa-0-tinta: #b3a4f5;
        --etapa-1-fundo: #182640;
        --etapa-1-tinta: #96b6f7;
        --etapa-2-fundo: #341c2b;
        --etapa-2-tinta: #f0a2c6;
        --etapa-3-fundo: #16301f;
        --etapa-3-tinta: #8ad9a6;
        --etapa-4-fundo: #33260f;
        --etapa-4-tinta: #e8bd76;

        --sombra-cartao: 0 1px 2px rgb(0 0 0 / 0.4), 0 2px 8px rgb(0 0 0 / 0.3);
        --sombra-alta: 0 8px 24px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.4);
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--fonte);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--tinta);
    background: var(--chao);
    -webkit-font-smoothing: antialiased;
}

h1 {
    font-size: 1.3125rem;
    line-height: 1.25;
    margin: 0;
    letter-spacing: -0.01em;
}

h2 {
    font-size: 1.0625rem;
    margin: 0 0 0.5rem;
    letter-spacing: -0.005em;
}

h3 {
    font-size: 0.9375rem;
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

main a:not(.botao) {
    text-decoration: underline;
    text-decoration-color: var(--linha-forte);
    text-underline-offset: 2px;
}

:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ─── Estrutura ──────────────────────────────────────────────────────────── */

.aplicacao {
    display: grid;
    grid-template-columns: 15rem 1fr;
    min-height: 100vh;
}

.lateral {
    background: var(--lateral);
    border-right: 1px solid var(--linha);
    padding: 1rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.marca {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.25rem 0.5rem 0;
    font-weight: 650;
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
}

.marca-selo {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 8px;
    background: var(--etapa-0-tinta);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.8125rem;
    font-weight: 700;
}

.grupo-titulo {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinta-fraca);
    padding: 0 0.5rem;
    margin: 0 0 0.4rem;
}

.lateral nav {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem;
    border-radius: 8px;
    color: var(--tinta-media);
    font-weight: 500;
    transition: background var(--passo) ease-out, color var(--passo) ease-out;
}

.item:hover {
    background: color-mix(in oklab, var(--tinta) 6%, transparent);
    color: var(--tinta);
}

.item[aria-current="page"] {
    background: var(--superficie);
    color: var(--tinta);
    font-weight: 600;
    box-shadow: var(--sombra-cartao);
}

.item svg {
    width: 1.0625rem;
    height: 1.0625rem;
    flex: none;
    stroke-width: 1.75;
}

.item .conta {
    margin-left: auto;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--etapa-0-tinta);
    font-variant-numeric: tabular-nums;
}

.rodape-lateral {
    margin-top: auto;
    border-top: 1px solid var(--linha);
    padding-top: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rodape-lateral .quem {
    min-width: 0;
}

.rodape-lateral .nome {
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rodape-lateral .papel {
    font-size: 0.75rem;
    color: var(--tinta-fraca);
}

.rodape-lateral form {
    margin: 0 0 0 auto;
    padding: 0;
    background: none;
    border: none;
}

.conteudo {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.oculto-visualmente {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ─── Topo do conteúdo ───────────────────────────────────────────────────── */

.topo {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
}

.saudacao {
    font-size: 0.8125rem;
    color: var(--tinta-fraca);
}

.saudacao strong {
    display: block;
    font-size: 0.9375rem;
    color: var(--tinta);
}

.busca {
    margin-left: auto;
    position: relative;
    flex: 1 1 16rem;
    max-width: 22rem;
}

.busca svg {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: var(--tinta-fraca);
    pointer-events: none;
}

.busca input {
    padding-left: 2rem;
    background: var(--superficie);
}

/* ─── Formulário e controle ──────────────────────────────────────────────── */

button,
.botao {
    font: inherit;
    font-weight: 550;
    padding: 0.4375rem 0.875rem;
    border: 1px solid var(--linha-forte);
    border-radius: 8px;
    background: var(--superficie);
    color: var(--tinta);
    cursor: pointer;
    transition: background var(--passo) ease-out, border-color var(--passo) ease-out;
}

button:hover:not(:disabled),
.botao:hover {
    border-color: var(--tinta-fraca);
}

button:active:not(:disabled) {
    transform: translateY(0.5px);
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

button.primario {
    background: var(--etapa-0-tinta);
    border-color: transparent;
    color: #fff;
}

button.primario:hover:not(:disabled) {
    background: color-mix(in oklab, var(--etapa-0-tinta) 88%, black);
    border-color: transparent;
}

button.discreto {
    background: none;
    border-color: transparent;
    color: var(--tinta-media);
    padding: 0.3125rem 0.5rem;
}

button.discreto:hover:not(:disabled) {
    background: color-mix(in oklab, var(--tinta) 7%, transparent);
    border-color: transparent;
    color: var(--tinta);
}

input,
select,
textarea {
    font: inherit;
    width: 100%;
    padding: 0.4375rem 0.625rem;
    border: 1px solid var(--linha-forte);
    border-radius: 8px;
    background: var(--superficie);
    color: inherit;
}

input:hover,
select:hover,
textarea:hover {
    border-color: var(--tinta-fraca);
}

textarea {
    resize: vertical;
    min-height: 4.5rem;
}

label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 550;
    color: var(--tinta-media);
    margin: 0.75rem 0 0.25rem;
}

form {
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio-painel);
    padding: 1rem;
    margin: 0 0 1.25rem;
    max-width: 34rem;
}

form.linha {
    display: flex;
    gap: 0.75rem;
    align-items: end;
    flex-wrap: wrap;
    max-width: none;
}

form.linha label {
    margin: 0 0 0.25rem;
}

form.linha input,
form.linha select {
    width: auto;
}

fieldset {
    border: 1px solid var(--linha);
    border-radius: 10px;
    margin: 1rem 0 0;
    padding: 0.5rem 0.875rem 0.875rem;
}

legend {
    font-size: 0.8125rem;
    font-weight: 550;
    color: var(--tinta-media);
    padding: 0 0.375rem;
}

.cargos {
    display: grid;
    gap: 0.25rem 1rem;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
}

.botoes {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.ajuda {
    color: var(--tinta-media);
    font-size: 0.875rem;
    margin: 0 0 1rem;
    max-width: 68ch;
}

.resumo {
    color: var(--tinta-fraca);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.acoes {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 1.25rem 1rem;
}

#aviso {
    margin: 0 1.25rem 1rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--vencido);
    border-radius: 10px;
    color: var(--vencido);
    background: var(--vencido-fundo);
    font-size: 0.875rem;
}

/* ─── Quadro ─────────────────────────────────────────────────────────────── */

.quadro {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(13.25rem, 1fr);
    gap: 0.875rem;
    padding: 0 1.25rem 1.5rem;
    overflow-x: auto;
    align-items: start;
}

.coluna {
    background: var(--fundo-da-etapa, var(--superficie));
    border-radius: var(--raio-painel);
    padding: 0.75rem 0.625rem;
    min-height: 60vh;
    transition: box-shadow var(--passo) ease-out;
}

.coluna[data-cor="0"] { --fundo-da-etapa: var(--etapa-0-fundo); --tinta-da-etapa: var(--etapa-0-tinta); }
.coluna[data-cor="1"] { --fundo-da-etapa: var(--etapa-1-fundo); --tinta-da-etapa: var(--etapa-1-tinta); }
.coluna[data-cor="2"] { --fundo-da-etapa: var(--etapa-2-fundo); --tinta-da-etapa: var(--etapa-2-tinta); }
.coluna[data-cor="3"] { --fundo-da-etapa: var(--etapa-3-fundo); --tinta-da-etapa: var(--etapa-3-tinta); }
.coluna[data-cor="4"] { --fundo-da-etapa: var(--etapa-4-fundo); --tinta-da-etapa: var(--etapa-4-tinta); }

.coluna.alvo {
    box-shadow: inset 0 0 0 2px var(--tinta-da-etapa, var(--foco));
}

.coluna-titulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.25rem 0.625rem;
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    color: var(--tinta-da-etapa, var(--tinta));
}

.coluna-titulo .conta {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    opacity: 0.75;
}

.cartoes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 2.5rem;
}

.cartao {
    background: var(--superficie);
    border-radius: var(--raio-cartao);
    padding: 0.5625rem 0.625rem;
    box-shadow: var(--sombra-cartao);
    cursor: grab;
    display: grid;
    gap: 0.375rem;
    text-align: left;
    width: 100%;
    border: none;
    font: inherit;
    color: inherit;
    transition: box-shadow var(--passo) ease-out, transform var(--passo) ease-out;
}

.cartao:hover {
    box-shadow: var(--sombra-alta);
}

.cartao.arrastando {
    opacity: 0.4;
    cursor: grabbing;
}

/* O único momento de movimento autoral: o cartão que volta quando a gravação
   falha. Ver DESIGN.md. */
.cartao.devolvido {
    animation: devolver 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes devolver {
    0% { transform: scale(0.94); box-shadow: var(--sombra-alta); }
    100% { transform: scale(1); box-shadow: var(--sombra-cartao); }
}

.cartao h3 {
    font-size: 0.8438rem;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cartao-etiquetas {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.capsula {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.0625rem 0.4375rem;
    border-radius: var(--raio-capsula);
    background: color-mix(in oklab, var(--tinta-da-etapa, var(--tinta)) 12%, var(--superficie));
    color: var(--tinta-da-etapa, var(--tinta-media));
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.capsula.neutra {
    background: color-mix(in oklab, var(--tinta) 8%, var(--superficie));
    color: var(--tinta-media);
}

.cartao-pe {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.75rem;
    color: var(--tinta-fraca);
    font-variant-numeric: tabular-nums;
}

.cartao-pe .prazo.vencido {
    color: var(--vencido);
    font-weight: 650;
}

.quem-responde {
    margin-left: auto;
    font-weight: 550;
    color: var(--tinta-media);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.quem-responde.sem-dono {
    font-weight: 400;
    font-style: italic;
    color: var(--tinta-fraca);
}

.avatar {
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: color-mix(in oklab, var(--tinta-da-etapa, var(--tinta)) 18%, var(--superficie));
    color: var(--tinta-da-etapa, var(--tinta));
    flex: none;
}

.avatar.vazio {
    background: none;
    border: 1px dashed var(--linha-forte);
    color: var(--tinta-fraca);
}

.barra {
    height: 3px;
    border-radius: var(--raio-capsula);
    background: color-mix(in oklab, var(--tinta) 10%, transparent);
    overflow: hidden;
}

.barra span {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: inherit;
    background: var(--tinta-da-etapa, var(--tinta-media));
    /* Escala por transform em vez de largura: animar width causa recálculo de
       layout, e aqui a barra vive dentro de uma lista de centenas de cartões. */
    transform-origin: left;
    transition: transform 200ms ease-out;
}

.coluna-vazia {
    font-size: 0.8125rem;
    color: color-mix(in oklab, var(--tinta-da-etapa, var(--tinta-fraca)) 70%, transparent);
    padding: 0.5rem 0.375rem;
    line-height: 1.45;
}

/* ─── Painel lateral de tarefa ───────────────────────────────────────────── */

.gaveta {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(26rem, 100vw);
    background: var(--superficie);
    border-left: 1px solid var(--linha);
    box-shadow: var(--sombra-alta);
    padding: 1.25rem;
    overflow-y: auto;
    z-index: 20;
}

.gaveta form {
    border: none;
    padding: 0;
    margin: 0;
    max-width: none;
    background: none;
}

.gaveta-topo {
    display: flex;
    align-items: start;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.gaveta-topo h2 {
    margin: 0;
}

.gaveta-topo button {
    margin-left: auto;
}

.faixa-progresso {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.faixa-progresso output {
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    min-width: 2.75rem;
    text-align: right;
}

input[type="range"] {
    accent-color: var(--etapa-0-tinta);
    padding: 0;
}

.editor-etiquetas {
    display: flex;
    gap: 0.3125rem;
    flex-wrap: wrap;
    align-items: center;
}

.editor-etiquetas .capsula {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: color-mix(in oklab, var(--tinta) 8%, var(--superficie));
    color: var(--tinta-media);
    font-size: 0.75rem;
    padding: 0.125rem 0.25rem 0.125rem 0.5rem;
}

.editor-etiquetas .capsula button {
    all: unset;
    cursor: pointer;
    line-height: 1;
    padding: 0 0.1875rem;
    border-radius: 50%;
    color: var(--tinta-fraca);
}

.editor-etiquetas .capsula button:hover {
    color: var(--vencido);
}

/* ─── Tabela ─────────────────────────────────────────────────────────────── */

table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio-painel);
    overflow: hidden;
    font-size: 0.875rem;
}

th,
td {
    text-align: left;
    padding: 0.5625rem 0.75rem;
    border-bottom: 1px solid var(--linha);
}

th {
    color: var(--tinta-fraca);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: color-mix(in oklab, var(--tinta) 3%, var(--superficie));
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody tr:hover {
    background: color-mix(in oklab, var(--tinta) 3%, transparent);
}

.esqueleto {
    display: grid;
    gap: 0.5rem;
}

.esqueleto span {
    display: block;
    height: 2.75rem;
    border-radius: var(--raio-cartao);
    background: color-mix(in oklab, var(--tinta) 8%, transparent);
}

/* ─── Login: escuro nas duas peles, com o brilho de aurora ───────────────── */

.tela-login {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem 1.25rem;
    background: #0b0c0f;
    color: #f2f3f6;
    position: relative;
    overflow: hidden;
}

.aurora {
    position: absolute;
    top: -30vmax;
    left: 50%;
    transform: translateX(-50%);
    width: 78vmax;
    height: 78vmax;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, rgb(31 61 214 / 0.85), transparent 72%),
        radial-gradient(closest-side at 62% 46%, rgb(222 206 178 / 0.5), transparent 68%);
    filter: blur(60px);
    pointer-events: none;
}

.caixa-login {
    position: relative;
    width: min(23rem, 100%);
    text-align: center;
}

.caixa-login .marca-selo {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    margin: 0 auto 1.25rem;
    font-size: 1.125rem;
    background: rgb(255 255 255 / 0.12);
    border: 1px solid rgb(255 255 255 / 0.18);
}

.caixa-login h1 {
    font-size: 1.75rem;
    font-weight: 680;
    letter-spacing: -0.02em;
    margin-bottom: 0.375rem;
}

.caixa-login .subtitulo {
    color: rgb(242 243 246 / 0.62);
    font-size: 0.9375rem;
    margin: 0 0 1.75rem;
}

.caixa-login form {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    text-align: left;
    max-width: none;
}

.caixa-login label {
    color: rgb(242 243 246 / 0.62);
}

.caixa-login input {
    background: rgb(255 255 255 / 0.07);
    border-color: rgb(255 255 255 / 0.16);
    color: inherit;
    padding: 0.625rem 0.75rem;
}

.caixa-login input:hover {
    border-color: rgb(255 255 255 / 0.3);
}

.caixa-login input::placeholder {
    color: rgb(242 243 246 / 0.45);
}

.caixa-login button {
    width: 100%;
    margin-top: 1.25rem;
    padding: 0.6875rem;
    border-radius: var(--raio-capsula);
    background: #f7f8fa;
    border-color: transparent;
    color: #111216;
    font-weight: 650;
    box-shadow: 0 0 32px rgb(255 255 255 / 0.14);
}

.caixa-login button:hover {
    background: #fff;
    border-color: transparent;
}

.caixa-login .erro {
    background: rgb(163 34 26 / 0.18);
    border: 1px solid rgb(255 156 140 / 0.4);
    color: #ff9c8c;
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    margin: 0 0 1rem;
}

.caixa-login .pe {
    color: rgb(242 243 246 / 0.42);
    font-size: 0.75rem;
    margin-top: 1.75rem;
}

/* ─── Telas estreitas: a mudança é estrutural, não de tipografia ─────────── */

@media (max-width: 60rem) {
    .aplicacao {
        grid-template-columns: 1fr;
    }

    .lateral {
        position: static;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--linha);
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        overflow-x: auto;
        padding: 0.625rem 0.875rem;
    }

    .lateral nav {
        flex-direction: row;
        gap: 0.25rem;
    }

    .grupo-titulo,
    .rodape-lateral .papel {
        display: none;
    }

    .item {
        white-space: nowrap;
    }

    .rodape-lateral {
        margin: 0 0 0 auto;
        border: none;
        padding: 0;
    }

    .quadro {
        grid-auto-columns: minmax(14rem, 78vw);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ─── Quadro público, só de leitura ──────────────────────────────────────── */

.publico .quadro {
    padding: 0 1.25rem 1.5rem;
}

.topo-publico {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1.25rem;
}

.topo-publico h1 {
    font-size: 1.125rem;
}

.topo-publico .resumo {
    margin: 0.125rem 0 0;
}

/* Sem arrastar, então sem a mão de agarrar nem o realce de passagem. */
.cartao.estatico {
    cursor: default;
}

.cartao.estatico:hover {
    box-shadow: var(--sombra-cartao);
}