/* ─────────────────────────────────────────────────────────────
   Ferramentas Online — página individual (/ferramentas/{slug})
   Widget, resultados, hero da ferramenta, "Aprenda mais" e
   disclaimers de risco.

   Carregado APENAS por templates/public/tools/show.php, SEMPRE
   depois de tools.css (depende dos tokens --ps-* e dos keyframes
   pst-reveal/pst-rotate definidos lá — keyframes são globais ao
   documento).

   Extraído de tools.css em 2026-06-12 para que /melhores,
   /comparar, /produtos/comparativo-* e /produto/{slug}/historico-preco
   (que compartilham tools.css mas só usam hero/cards/.tool-btn/
   .tool-stats/.cmp-table) não paguem os bytes do chrome de widget.
   ───────────────────────────────────────────────────────────── */

/* Caixa-mãe do widget — fio de energia + elevação.
   NOTA: o overflow:hidden existe para o ::before do fio respeitar os
   cantos arredondados. Widgets futuros com dropdown/autocomplete/tooltip
   posicionados PARA FORA da caixa serão clipados — nesse caso, dar
   opt-out no widget (ex.: overflow visível via classe própria) e
   reproduzir o fio com border-image. Nenhum widget atual precisa. */
.tool-widget { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-xl, 1rem); padding: clamp(1.25rem, 3vw, 1.75rem); margin: 1rem 0 2rem; box-shadow: var(--shadow-md); position: relative; overflow: hidden; }
/* FIO DE ENERGIA — borda superior 3px gradiente laranja */
.tool-widget::before,
.tool-result--rich::before,
.tool-result--panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--ps-accent-grad); }
.tool-widget--placeholder { text-align: center; color: var(--color-text-secondary, #475569); padding: 3rem; }

.tool-widget label { display: block; font-family: var(--font-body); font-weight: 700; font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-secondary); margin: .75rem 0 var(--space-1, .25rem); }
.tool-widget input[type="text"],
.tool-widget input[type="number"],
.tool-widget input[type="url"],
.tool-widget input[type="tel"],
.tool-widget input[type="email"],
.tool-widget input[type="password"],
.tool-widget input[type="date"],
.tool-widget input[type="time"],
.tool-widget input[type="datetime-local"],
.tool-widget select,
.tool-widget textarea {
    width: 100%;
    min-height: 48px;
    padding: .65rem .75rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    font-size: 1.0625rem;
    font-family: inherit;
    background-color: var(--color-bg-white);
    color: inherit;
    box-sizing: border-box;
    transition: border-color var(--transition-fast);
}
.tool-widget textarea { min-height: 120px; resize: vertical; }
.tool-widget input:focus,
.tool-widget select:focus,
.tool-widget textarea:focus { border-color: var(--color-cta); box-shadow: 0 0 0 3px rgba(253,136,1,.28); outline: 2px solid transparent; /* o anel é o substituto visível */ }
.tool-widget select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23334155' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; padding-right: 2.25rem; }
.tool-widget input[type="checkbox"],
.tool-widget input[type="radio"],
.tool-widget input[type="range"] { accent-color: var(--color-cta); }
/* !important intencional: vence borda inline #e5e5e5 dos widgets (correção dark em massa) */
.tool-widget fieldset { border: 1px solid var(--color-border) !important; border-radius: var(--radius-md, 8px); padding: var(--space-3, .75rem); }

.tool-widget .row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 540px) { .tool-widget .row { grid-template-columns: 1fr; } }

.tool-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }

/* Caixa de resultado — reveal via animation (re-dispara ao sair de display:none) */
.tool-result { background: var(--color-bg); padding: 1rem; border-radius: var(--radius-lg, 12px); margin-top: 1rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9rem; white-space: pre-wrap; word-break: break-word; animation: pst-reveal .3s ease; }
.tool-result--rich { font-family: var(--font-body); background: var(--color-bg-card); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); padding: var(--space-5, 1.25rem); position: relative; overflow: hidden; }
.tool-result table { width: 100%; border-collapse: collapse; font-family: inherit; font-size: .9rem; }
.tool-result th, .tool-result td { padding: .5rem; text-align: left; border-bottom: 1px solid var(--color-border); }
.tool-result th { background: var(--color-bg); font-weight: 600; }

/* Opt-in: PAINEL RESULTADO NAVY (peça de autoridade).
   NÃO aplicar em massa — somente em widgets verificados manualmente
   (o HTML interno precisa ser legível sobre navy).
   Estrutura: .tool-result--panel > .tool-result__label / __value / __row */
.tool-result--panel { background: var(--ps-navy-grad); color: #fff; border: none; border-radius: var(--radius-xl, 1rem); box-shadow: var(--shadow-md); padding: var(--space-5, 1.25rem); position: relative; overflow: hidden; font-family: var(--font-body); }
.tool-result__label { display: block; font-family: var(--font-body); font-weight: 700; font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.7); }
.tool-result__value { display: block; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.75rem, 5vw, 2.5rem); font-variant-numeric: tabular-nums; color: #fff; }
.tool-result__row { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-top: 1px solid rgba(255,255,255,.12); font-variant-numeric: tabular-nums; }
.tool-result--panel a { color: #FFB068; }

/* área de toque maior sem deslocar layout (margens negativas compensam o padding) */
.tool-copy { display: inline-flex; align-items: center; margin: -.75rem 0 -.75rem .5rem; font-size: .8rem; color: var(--ps-accent-text); cursor: pointer; background: none; border: 0; padding: .75rem .5rem; }

.tool-related { margin: 2.5rem 0; }
.tool-related h2 { font-size: 1.25rem; margin: 0 0 1rem; }

.tool-offers { margin: 2.5rem 0; padding: 1.5rem; background: linear-gradient(135deg, var(--ps-accent-soft) 0%, transparent 100%); border-radius: var(--radius-xl, 1rem); border: 1px solid color-mix(in srgb, #FD8801 35%, var(--color-border)); }
.tool-offers__title { font-size: 1.3rem; margin: 0 0 .35rem; display: flex; align-items: center; gap: .5rem; }
.tool-offers__sub { margin: 0 0 1rem; color: var(--color-text-secondary, #475569); font-size: .9rem; }
.tool-offers__cta { margin: 1rem 0 0; text-align: center; }
.tool-offers__cta .tool-btn { text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════
   Tool Hero (imagem da categoria) — adicionado 2026-05-22
   ═══════════════════════════════════════════════════════════════ */
.tool-hero {
    margin: 0 0 var(--space-5, 1.25rem);
    border-radius: var(--radius-xl, 16px);
    overflow: hidden;
    background: var(--color-bg-hover);
    box-shadow: var(--shadow-sm);
    position: relative;
}
.tool-hero__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
}
.tool-hero__caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: .75rem 1rem;
    background: linear-gradient(180deg, rgba(0,11,39,0) 0%, rgba(0,11,39,0.55) 100%);
    color: #fff;
    font-size: var(--text-sm, .875rem);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tool-hero__cat {
    font-weight: 700;
    font-size: var(--text-base, 1rem);
    letter-spacing: 0.3px;
}
@media (max-width: 640px) {
    .tool-hero__caption { padding: .5rem .75rem; font-size: var(--text-xs, .75rem); }
    .tool-hero__cat { font-size: var(--text-sm, .875rem); }
}

/* ═══════════════════════════════════════════════════════════════
   Tool Learn (Aprenda mais) — links educacionais por categoria
   ═══════════════════════════════════════════════════════════════ */
.tool-learn {
    margin: var(--space-6, 1.5rem) 0;
    padding: var(--space-5, 1.25rem);
    border-radius: var(--radius-xl, 16px);
    background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-bg-card-alt) 100%);
    border: 1px solid var(--color-border);
}
.tool-learn__title {
    margin: 0 0 .35rem;
    font-size: var(--text-xl, 1.25rem);
    font-weight: 800;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.tool-learn__sub {
    margin: 0 0 1rem;
    color: var(--color-text-secondary);
    font-size: var(--text-sm, .875rem);
}
.tool-learn__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .75rem;
}
.tool-learn__card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 12px);
    text-decoration: none;
    color: inherit;
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}
.tool-learn__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md); /* snap intencional */
    border-color: var(--color-border-hover);
}
.tool-learn__card--yt { border-left: 4px solid #ff0000; }
.tool-learn__card--yt .tool-learn__icon { color: #ff0000; }
.tool-learn__card--search { border-left: 4px solid #6366f1; }
.tool-learn__card--wiki { border-left: 4px solid #475569; }
.tool-learn__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-hover);
    font-size: 1.25rem;
}
.tool-learn__txt { display: flex; flex-direction: column; min-width: 0; }
.tool-learn__label {
    font-size: var(--text-xs, .75rem);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 1px;
}
.tool-learn__txt strong {
    font-size: var(--text-sm, .875rem);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tool-learn__disclaimer {
    margin: 1rem 0 0;
    padding-top: .75rem;
    border-top: 1px dashed var(--color-border);
    font-size: var(--text-xs, .75rem);
    color: var(--color-text-muted);
    font-style: italic;
}

/* ============================================
   Tarja de disclaimer/aviso para ferramentas sensiveis
   (medico, financeiro, juridico, fake-doc, esoterico)
   Injetada pelo ToolsController via ToolsRiskDisclaimer.
   ============================================ */

.tool-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    margin: 0 0 var(--space-5, 1.25rem);
    border-radius: var(--radius-xl, 1rem);
    border: 1px solid;
    border-left-width: 5px;
    line-height: 1.5;
}
.tool-disclaimer__icon {
    font-size: 1.4rem;
    line-height: 1.2;
    flex-shrink: 0;
}
.tool-disclaimer__body { flex: 1; min-width: 0; }
.tool-disclaimer__title {
    display: block;
    font-size: .92rem;
    font-weight: 800;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.tool-disclaimer__text {
    margin: 0;
    font-size: .9rem;
}
.tool-disclaimer__text strong { font-weight: 700; }

/* Critical: medico_critico, sobriedade, fake_doc → vermelho */
.tool-disclaimer--critical {
    background: #fef2f2;
    border-color: #fca5a5;
    border-left-color: #dc2626;
    color: #7f1d1d;
}
.tool-disclaimer--critical .tool-disclaimer__title { color: #b91c1c; }

/* Warning: medico_geral, nutricao, suplemento, cardio, esporte, obstetricia,
   pediatria, sono, pet, financeiro, tributario, trabalhista, engenharia → amarelo */
.tool-disclaimer--warning {
    background: #fffbeb;
    border-color: #fde68a;
    border-left-color: #f59e0b;
    color: #78350f;
}
.tool-disclaimer--warning .tool-disclaimer__title { color: #b45309; }

/* Info: automotivo, esoterico → cinza/azul */
.tool-disclaimer--info {
    background: #eff6ff;
    border-color: #bfdbfe;
    border-left-color: #3b82f6;
    color: #1e3a8a;
}
.tool-disclaimer--info .tool-disclaimer__title { color: #1d4ed8; }

@media (max-width: 480px) {
    .tool-disclaimer { padding: 12px 14px; gap: 10px; }
    .tool-disclaimer__icon { font-size: 1.2rem; }
    .tool-disclaimer__title { font-size: .85rem; }
    .tool-disclaimer__text { font-size: .85rem; }
}

/* ─────────────────────────────────────────────────────────────
   Dark mode (unificado nos tokens navy do portal)
   ───────────────────────────────────────────────────────────── */
html.dark-mode .tool-widget input,
html.dark-mode .tool-widget select,
html.dark-mode .tool-widget textarea { background-color: var(--color-bg); border-color: var(--color-border); color: var(--color-text); }
html.dark-mode .tool-widget select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23cbd5e1' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
/* Help-text inline dos widgets (correção dark em massa, sem editar widget) */
html.dark-mode .tool-widget [style*="#666"],
html.dark-mode .tool-widget [style*="#64748b"] { color: var(--color-text-muted) !important; }
html.dark-mode .tool-result--panel { border: 1px solid var(--color-border); }
html.dark-mode .tool-hero { background: var(--color-bg-card-alt); box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
html.dark-mode .tool-learn { background: linear-gradient(135deg, var(--color-bg-card) 0%, var(--color-bg-hover) 100%); }
html.dark-mode .tool-disclaimer--critical {
    background: #450a0a; color: #fecaca; border-color: #b91c1c;
}
html.dark-mode .tool-disclaimer--critical .tool-disclaimer__title { color: #fca5a5; }
html.dark-mode .tool-disclaimer--warning {
    background: #422006; color: #fed7aa; border-color: #b45309;
}
html.dark-mode .tool-disclaimer--warning .tool-disclaimer__title { color: #fdba74; }
html.dark-mode .tool-disclaimer--info {
    background: #172554; color: #bfdbfe; border-color: #1e40af;
}
html.dark-mode .tool-disclaimer--info .tool-disclaimer__title { color: #93c5fd; }

/* ============================================
   Reduced motion — nada se move (espelha tools.css)
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .tool-result,
    .tool-learn__card,
    .tool-widget input, .tool-widget select, .tool-widget textarea {
        animation: none !important;
        transition: none !important;
    }
    .tool-learn__card:hover { transform: none !important; }
}