/* ══════════════════════════════════════════════════════════════════════
   MATRIZ DE EISENHOWER

   Só o que é desta ferramenta. A casca (trilha, topo, selos, apoio, FAQ
   e convite) vem de /ferramentas/base.css.

   Cada quadrante tem uma cor, e a cor aparece em três lugares só: o
   título, a borda e um fundo quase branco. Quatro cores fortes em blocos
   grandes viram painel de semáforo, e o que precisa aparecer é a tarefa.
   ══════════════════════════════════════════════════════════════════ */

.q-fazer { --q: #ea580c; --q-fundo: #fff7ed; --q-borda: #fed7aa; }
.q-agendar { --q: #2563eb; --q-fundo: #eff6ff; --q-borda: #bfdbfe; }
.q-delegar { --q: #b45309; --q-fundo: #fffbeb; --q-borda: #fde68a; }
.q-eliminar { --q: #64748b; --q-fundo: #f8fafc; --q-borda: #e2e8f0; }

/* ── Entrada ────────────────────────────────────────────────────────── */
.entrada {
    max-width: 760px;
    margin: 0 auto;
}

.entrada-linha {
    display: flex;
    gap: 10px;
}

.entrada-linha input {
    flex: 1;
    min-width: 0;
    height: 52px;
    padding: 0 18px;
    border: 1.5px solid var(--color-border);
    border-radius: 14px;
    background: var(--bg-surface, #fff);
    font-family: inherit;
    font-size: 16px;
    color: var(--color-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.entrada-linha input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.12);
}

.entrada-linha button {
    flex-shrink: 0;
    height: 52px;
    padding: 0 22px;
    border: none;
    border-radius: 14px;
    background: var(--color-primary);
    color: #fff;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.entrada-linha button:hover {
    filter: brightness(1.06);
}

.entrada-extra {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.link-botao {
    padding: 4px 6px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.link-botao:hover {
    color: var(--color-primary);
}

.link-botao:disabled {
    opacity: 0.4;
    cursor: default;
}

.colar {
    margin-top: 12px;
}

.colar textarea {
    display: block;
    width: 100%;
    min-height: 130px;
    padding: 14px 16px;
    border: 1.5px solid var(--color-border);
    border-radius: 14px;
    background: var(--bg-surface, #fff);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text);
    resize: vertical;
}

.colar textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.colar-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    font-size: 13.5px;
    color: var(--color-text-muted);
}

.botao-secundario {
    padding: 9px 16px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--bg-surface, #fff);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.botao-secundario:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ── Selo de exemplo ────────────────────────────────────────────────── */
.selo-exemplo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 30px auto 0;
    padding: 12px 18px;
    max-width: 760px;
    border: 1px dashed var(--color-border-hover, #cbd5e1);
    border-radius: 12px;
    font-size: 14.5px;
    color: var(--color-text-secondary);
    text-align: center;
}

/* ── Barra da matriz ────────────────────────────────────────────────── */
.barra-matriz {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 30px 0 14px;
}

.barra-matriz h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    color: var(--color-text);
}

.acoes-matriz {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.acoes-matriz button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--color-border);
    border-radius: 9px;
    background: var(--bg-surface, #fff);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.acoes-matriz button:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.acoes-matriz svg {
    width: 15px;
    height: 15px;
}

.acoes-matriz .botao-limpar {
    color: #b91c1c;
    border-color: rgba(185, 28, 28, 0.3);
}

.acoes-matriz .botao-limpar:hover {
    color: #991b1b;
    border-color: #b91c1c;
}

/* Matriz vazia: exportar nada não faz sentido. */
.acoes-matriz--vazia button {
    opacity: 0.45;
    pointer-events: none;
}

/* ── Bandeja "a classificar" ─────────────────────────────────────────
   Fica acima da matriz porque é por ela que a tarefa entra. */
.bandeja {
    padding: 16px 18px;
    border: 1.5px dashed var(--color-border-hover, #cbd5e1);
    border-radius: 16px;
    background: var(--bg-surface, #fff);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.bandeja-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.bandeja-topo h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 15px;
    font-weight: 750;
    color: var(--color-text);
}

.perguntar {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: none;
    border-radius: 9px;
    background: var(--color-text);
    color: #fff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}

.perguntar:hover {
    background: var(--color-primary);
}

.bandeja .lista {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.bandeja .cartao {
    flex: 0 1 auto;
    max-width: 100%;
}

.bandeja-vazio {
    display: none;
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--color-text-muted);
}

.bandeja--vazia .bandeja-vazio {
    display: block;
}

.bandeja--vazia .lista {
    display: none;
}

/* ── A matriz ─────────────────────────────────────────────────────────
   Os rótulos dos eixos são uma coluna e uma linha a mais na grade, e
   não texto solto posicionado: assim eles acompanham a altura de cada
   linha, que muda com o número de tarefas. */
.matriz {
    display: grid;
    grid-template-columns: 30px 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 12px;
    margin-top: 18px;
}

.eixo {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.eixo--lateral {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.quadrante {
    display: flex;
    flex-direction: column;
    min-height: 230px;
    padding: 18px 18px 14px;
    border: 1.5px solid var(--q-borda);
    border-radius: 16px;
    background: var(--q-fundo);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.quadrante-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.quadrante h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    color: var(--q);
}

.conta {
    min-width: 26px;
    padding: 2px 8px;
    border-radius: 9999px;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--q-borda);
    font-size: 13px;
    font-weight: 750;
    text-align: center;
    color: var(--q);
    font-variant-numeric: tabular-nums;
}

.quadrante-eixo {
    margin: 2px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.quadrante-acao {
    margin: 6px 0 12px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.quadrante .lista {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
}

/* Lista vazia vira área de soltar visível, com a instrução dentro. */
.quadrante .lista:empty {
    min-height: 70px;
    border: 1.5px dashed var(--q-borda);
    border-radius: 12px;
}

.quadrante .lista:empty::before {
    content: "Arraste uma tarefa para cá";
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 70px;
    font-size: 13.5px;
    color: var(--color-text-muted);
}

/* Destino do arraste. */
[data-quadrante].alvo {
    box-shadow: 0 0 0 3px var(--q, var(--color-primary));
}

.bandeja.alvo {
    --q: var(--color-primary);
    border-color: var(--color-primary);
}

/* ── Cartão ─────────────────────────────────────────────────────────── */
.lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cartao {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 8px 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 11px;
    background: var(--bg-surface, #fff);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.cartao-marca {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--q, var(--color-primary));
    cursor: pointer;
}

.cartao-texto {
    flex: 1;
    min-width: 0;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.cartao--feita .cartao-texto {
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.cartao-menu {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 24px;
    margin: -2px 0;
    border: none;
    border-radius: 7px;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
}

.cartao-menu svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.cartao-menu:hover,
.cartao-menu:focus-visible {
    background: var(--bg-sidebar);
    color: var(--color-text);
}

.cartao-edicao {
    flex: 1;
    min-width: 0;
    padding: 2px 6px;
    border: 1.5px solid var(--color-primary);
    border-radius: 7px;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--color-text);
}

.cartao--origem {
    opacity: 0.35;
}

.cartao--fantasma {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    pointer-events: none;
    cursor: grabbing;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18);
    transform-origin: center;
}

body.arrastando,
body.arrastando * {
    cursor: grabbing !important;
}

/* ── Menu do cartão ─────────────────────────────────────────────────── */
.menu {
    position: fixed;
    z-index: 1001;
    min-width: 200px;
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--bg-surface, #fff);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}

.menu-rotulo {
    display: block;
    padding: 6px 10px 4px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.menu button {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: 8px;
    background: none;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
}

.menu button:hover,
.menu button:focus-visible {
    background: var(--bg-sidebar);
    outline: none;
}

.menu button i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.menu hr {
    margin: 5px 4px;
    border: none;
    border-top: 1px solid var(--color-border);
}

.menu .menu-apagar {
    color: #b91c1c;
}

/* ── Dica e aviso ───────────────────────────────────────────────────── */
.dica {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    padding: 13px 16px;
    border: 1px solid #fde68a;
    border-radius: 12px;
    background: #fffbeb;
    font-size: 14.5px;
    line-height: 1.55;
    color: #78350f;
}

.dica svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
}

.aviso {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 1002;
    transform: translateX(-50%);
    max-width: calc(100% - 32px);
    padding: 11px 18px;
    border-radius: 11px;
    background: #0f172a;
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.25);
}

/* ── Guia de duas perguntas ─────────────────────────────────────────── */
.guia {
    position: fixed;
    inset: 0;
    z-index: 1003;
    display: flex;
    /* Presa pelo topo, não centralizada: a caixa muda de altura entre a
       pergunta e o destino, e centralizada ela pulava para cima e para
       baixo a cada troca. Assim só a borda de baixo se mexe. */
    align-items: flex-start;
    justify-content: center;
    padding: max(16px, 14vh) 16px 16px;
    background: rgba(15, 23, 42, 0.45);
}

.guia-caixa {
    width: 100%;
    max-width: 520px;
    padding: 26px;
    border-radius: 18px;
    background: var(--bg-surface, #fff);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3);
}

.guia-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-muted);
}

.guia-topo button {
    border: none;
    background: none;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.guia-tarefa {
    margin: 0 0 20px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--bg-sidebar);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-text);
}

.guia-pergunta h3 {
    margin: 0 0 6px;
    font-size: 21px;
    font-weight: 800;
    color: var(--color-text);
}

.guia-pergunta p {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.guia-botoes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.guia-botoes button {
    height: 50px;
    border: 1.5px solid var(--color-border);
    border-radius: 12px;
    background: var(--bg-surface, #fff);
    font-family: inherit;
    font-size: 16px;
    font-weight: 750;
    color: var(--color-text);
    cursor: pointer;
}

/* Sem hover logo depois da troca: o "Sim" da pergunta nova nasce
   exatamente embaixo do cursor que acabou de clicar no anterior, e com o
   hover laranja parecia já respondido. Volta quando o mouse se mexe. */
.guia-caixa:not(.sem-hover) .guia-botoes button:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* O foco vai sozinho para o "Sim" a cada pergunta, para quem usa o
   teclado. Em laranja ele parecia uma resposta já escolhida; o anel
   neutro diz só "você está aqui". */
.guia-botoes button:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}

/* Botão escolhido: acende na cor da marca por um instante antes da
   troca. É o "recebi" do clique. */
.guia-botoes button.escolhido {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
    transform: scale(0.97);
}

.guia-botoes button {
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.12s ease,
        opacity 0.15s ease;
}

/* O outro botão recua devagar, e pouco: cair de uma vez para 40% era um
   segundo tremor, do lado de lá. */
.guia-botoes button:disabled:not(.escolhido) {
    opacity: 0.55;
    cursor: default;
}

/* Trilha das duas etapas: mostra em qual pergunta se está e guarda a
   resposta dada, para a pergunta 2 não parecer a 1 de novo. */
.guia-etapas {
    display: flex;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.guia-etapas li {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 8px 12px;
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 650;
    color: var(--color-text-muted);
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.guia-etapas li.atual {
    border-color: var(--color-text);
    color: var(--color-text);
}

.guia-etapas li.feita {
    color: var(--color-text);
    background: var(--bg-sidebar);
}

.guia-etapas b {
    font-weight: 800;
}

.guia-etapas li.sim b {
    color: #15803d;
}

.guia-etapas li.nao b {
    color: #b91c1c;
}

/* O destino da tarefa, na cor do quadrante. */
.guia-resultado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 22px 16px;
    border: 1.5px solid var(--q-borda);
    border-radius: 14px;
    background: var(--q-fundo);
    text-align: center;
}

.guia-resultado span {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-text-muted);
}

.guia-resultado strong {
    font-size: 24px;
    font-weight: 800;
    color: var(--q);
}

/* Entrada: desliza um pouco e aparece. Curta de propósito, é retorno e
   não espetáculo.

   Na pergunta, só o título e o texto entram. Os botões ficam parados:
   eles ocupam o mesmo lugar nas duas perguntas, e com o bloco inteiro
   animado iam de opacidade 1 a 0 e voltavam no ponto exato onde o dedo
   ou o mouse acabou de clicar. Medido quadro a quadro, era a piscada. */
.guia-tarefa.entra,
.guia-pergunta.entra h3,
.guia-pergunta.entra p {
    animation: guia-entra 0.24s ease-out;
}

.guia-resultado.entra {
    animation: guia-destino 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@keyframes guia-entra {
    from { opacity: 0; transform: translateX(14px); }
    to { opacity: 1; transform: none; }
}

@keyframes guia-destino {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .guia-tarefa.entra,
    .guia-pergunta.entra h3,
    .guia-pergunta.entra p,
    .guia-resultado.entra {
        animation: none;
    }

    .guia-botoes button.escolhido {
        transform: none;
    }
}

.guia-rodape {
    margin-top: 14px;
    text-align: center;
}

body.guia-aberto {
    overflow: hidden;
}

/* ── Impressão ────────────────────────────────────────────────────────
   "Salvar em PDF" imprime só a matriz, numa folha deitada. */
@media print {
    @page {
        size: A4 landscape;
        margin: 12mm;
    }

    .navbar,
    .mobile-menu-overlay,
    .footer,
    .breadcrumb,
    .ferramenta-topo,
    .entrada,
    .garantias,
    .selo-exemplo,
    .acoes-matriz,
    .bandeja,
    .dica,
    .apoio,
    .ferramenta-cta,
    .aviso,
    .cartao-menu,
    #cookie-banner {
        display: none !important;
    }

    .ferramenta {
        padding: 0;
        max-width: none;
    }

    .barra-matriz {
        margin-top: 0;
    }

    .quadrante {
        min-height: 0;
        break-inside: avoid;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .quadrante .lista:empty {
        display: none;
    }

    .cartao {
        box-shadow: none;
        break-inside: avoid;
    }
}

/* ── Celular ──────────────────────────────────────────────────────────
   Uma coluna. Os eixos somem, e cada quadrante já diz no próprio título
   de qual combinação ele é. */
@media (max-width: 720px) {
    .matriz {
        grid-template-columns: minmax(0, 1fr);
    }

    .eixo {
        display: none;
    }

    .quadrante {
        min-height: 0;
    }

    .entrada-linha button {
        padding: 0 16px;
    }

    .barra-matriz {
        flex-direction: column;
        align-items: stretch;
    }

    .acoes-matriz button {
        flex: 1 1 auto;
        justify-content: center;
        padding: 9px 8px;
        font-size: 12.5px;
    }

    .guia-caixa {
        padding: 20px;
    }
}