@charset "UTF-8";

/* DPMG Design System — Gerador DOCX público (US-1103)
 * =====================================================================
 * CSS extraído dos dois <style> inline que existiam em
 * gerador_docx/template/gerador_docx_script.html (variante pública com
 * menu) e gerador_docx/template/gerador_sem_menu.html (variante pública
 * standalone). As duas páginas declaravam um :root próprio e
 * desatualizado (--color-primary: #1a5f3a; --color-accent: #d4af37),
 * divergente da paleta unificada em dpmg-tokens.css (#1a5c3a / #c9a227).
 * Esse :root foi removido dos templates: este arquivo NÃO declara :root
 * próprio, apenas consome os tokens globais (var(--color-primary) etc.
 * já resolvem para os valores corretos assim que dpmg-tokens.css é
 * carregado antes deste arquivo).
 *
 * As duas páginas têm pequenas divergências visuais reais entre si
 * (não são 100% idênticas apesar de estruturalmente parecidas): botão
 * "Inserir citação" com estilos diferentes, tamanhos de card-body,
 * altura do textarea, tipografia do corpo (a standalone usa
 * var(--font-sans)/var(--font-serif), a variante com menu herda a
 * tipografia do shell público). Essas divergências são preservadas
 * via os modificadores `.gerador-menu` / `.gerador-standalone`
 * (aplicados no `<div class="main-container">` de cada template) para
 * não introduzir nenhuma mudança visual além da correção de paleta.
 *
 * Usado por: gerador_docx_script.html, gerador_sem_menu.html.
 * gerador.html (área restrita) NÃO usa este arquivo — usa
 * dpmg-paginas.css, já tokenizado, e tem layout estruturalmente
 * diferente (sem row/col, sem hero-section) — ver decisão no PRD.
 * ===================================================================== */

/* ---- Comum às duas variantes ---- */

.main-container {
    margin: 0 auto;
}

.card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: none;
    margin-bottom: 2rem;
}

.card-header {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    color: var(--color-on-primary);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    border-bottom: none;
}

.card-header h5 {
    font-weight: 600;
    margin: 0;
}

.form-label {
    font-weight: 600;
    color: var(--color-primary-dark);
    margin-bottom: 0.5rem;
}

.form-control, .form-select {
    border: 2px solid rgba(var(--color-primary-rgb), 0.2);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    transition: var(--transition);
}

.form-control:focus, .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
    outline: none;
}

textarea.form-control {
    font-size: 0.95rem;
}

.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.form-check-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-rgb), 0.15);
}

.btn-gerar {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: var(--color-on-primary);
    border: none;
    font-weight: 600;
    padding: 1rem 2.5rem;
    border-radius: var(--radius-md);
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
    letter-spacing: 0.02em;
}

.btn-gerar:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.3);
    color: var(--color-on-primary);
}

.info-card {
    border-left: 4px solid var(--color-accent);
}

.info-card .card-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
}

.info-card .card-header h6 {
    font-weight: 600;
    font-size: 1rem;
}

/* Página standalone (gerador_sem_menu.html) usa .page-header; a
   variante com menu usa .hero-section (já definido em
   dpmg-publico-shell.css — US-1131, ex dpmg-components.css —, carregado
   por base_script.html) — não há colisão de seletor porque cada markup
   só existe em uma das páginas. */
.page-header {
    font-family: var(--font-sans);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: var(--color-on-primary);
    padding: 2.5rem 1rem;
    margin-bottom: 0;
    box-shadow: var(--shadow-md);
    text-align: center;
}

.page-header h1 {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 2rem;
    margin: 0;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- Variante "com menu" (gerador_docx_script.html) ----
 * Escopo: `<div class="container main-container gerador-menu">`. */

.main-container.gerador-menu {
    max-width: 1200px;
    padding: 2rem 0;
}

.gerador-menu .card-body {
    padding: 1.5rem;
}

.gerador-menu .card-header {
    padding: 1.25rem 1.5rem;
}

.gerador-menu .card-header h5 {
    font-size: 1.25rem;
}

.gerador-menu textarea.form-control {
    min-height: 160px;
    overflow: hidden;
    resize: vertical;
    line-height: 1.6;
}

.gerador-menu .btn-citacao {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: var(--transition);
}

.gerador-menu .btn-citacao:hover {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.gerador-menu .btn-citacao:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
    box-shadow: var(--focus-ring-outer);
}

.gerador-menu .btn-gerar:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
    box-shadow: var(--focus-ring-outer);
}

.gerador-menu .formato-toggle {
    display: inline-flex;
    border: 2px solid rgba(var(--color-primary-rgb), 0.2);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.gerador-menu .formato-toggle .form-check {
    margin: 0;
    padding: 0;
}

.gerador-menu .formato-toggle .form-check-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.6rem 1.25rem;
    margin: 0;
    cursor: pointer;
    font-weight: 500;
    /* EXCEÇÃO: cinza sem token exato equivalente (--dpmg-muted é #666,
       o valor original aqui é #555) — mantido literal para não alterar
       o visual da página. */
    color: #555;
    background: var(--color-surface);
    transition: all 0.2s ease;
}

.gerador-menu .formato-toggle .form-check-input {
    position: absolute;
    opacity: 0;
}

.gerador-menu .formato-toggle .form-check-input:checked + .form-check-label {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

/* US-1508: estado de foco por teclado do grupo de rádios do formato,
   visualmente DISTINTO do estado selecionado (que é preenchimento sólido
   var(--color-primary) + texto branco — nunca um outline). Offset
   negativo porque `.formato-toggle` tem `overflow: hidden` (para cortar
   as bordas arredondadas do container): um outline com offset positivo
   seria cortado pelo clip. */
.gerador-menu .formato-toggle .form-check-input:focus-visible + .form-check-label {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
    box-shadow: var(--focus-ring-outer);
}

/* US-1508: hover/active não podem reduzir o contraste do estado
   selecionado (fundo verde escuro + texto branco, hoje ~7:1 — precisa
   continuar >= 4.5:1 AA). A opção NÃO selecionada ganha um tingimento
   sutil de fundo para indicar interatividade; a opção selecionada, ao
   passar hover/active, fica um tom mais escuro (nunca mais claro/lavado)
   mantendo o texto branco legível. */
.gerador-menu .formato-toggle .form-check-input:not(:checked) + .form-check-label:hover {
    background: rgba(var(--color-primary-rgb), 0.08);
    color: var(--color-primary-dark);
}

.gerador-menu .formato-toggle .form-check-input:checked + .form-check-label:hover,
.gerador-menu .formato-toggle .form-check-input:checked + .form-check-label:active {
    background: var(--color-primary-dark);
    color: var(--color-on-primary);
}

.gerador-menu .char-counter {
    font-size: 0.8rem;
    color: var(--dpmg-muted);
    text-align: right;
    margin-top: 0.35rem;
}

.gerador-menu .helper-text {
    font-size: 0.85rem;
    color: var(--dpmg-muted);
    margin-top: 0.35rem;
    line-height: 1.5;
}

/* ---- US-1505: coluna "Como usar" sticky (desktop) / colapsável (mobile) ----
 * Markup em gerador_docx/template/_gerador_conteudo.html, variante
 * 'script' — única com grid lateral col-lg-8/col-lg-4 (as variantes
 * 'restrito' e 'sem_menu' empilham os cards em coluna única, sem grid,
 * então o problema do card lateral "vazio" só existe aqui). Não há
 * navbar fixa nesta variante (base_script.html não usa position:fixed/
 * sticky-top na navbar — ver dpmg-publico-shell.css), então o offset do
 * sticky é só respiro visual do design system (--space-6), sem precisar
 * compensar altura de navbar sobreposta. */
.gerador-como-usar-summary {
    /* `display: block` (em vez do `display: list-item` padrão do
       <summary>) remove o marcador nativo de forma consistente entre
       Chrome/Firefox/Safari; o marcador próprio é desenhado via ::after
       abaixo. */
    display: block;
    cursor: pointer;
    list-style: none;
}

.gerador-como-usar-summary::-webkit-details-marker {
    display: none;
}

.gerador-como-usar-summary::after {
    content: '\25B8'; /* ▸ */
    float: right;
    margin-left: 0.5rem;
    transition: transform 0.2s ease;
}

.gerador-como-usar[open] > .gerador-como-usar-summary::after {
    transform: rotate(90deg);
}

.gerador-como-usar-summary:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
    box-shadow: var(--focus-ring-outer);
}

@media (min-width: 992px) {
    .gerador-row-como-usar {
        /* align-items: flex-start é obrigatório para sticky funcionar:
           por padrão o Bootstrap `.row` estica as colunas (align-items:
           stretch), o que faria a coluna ter a MESMA altura da maior
           (a do formulário) — sticky não teria "folga" para deslizar. */
        align-items: flex-start;
    }

    .gerador-row-como-usar > .col-lg-4 {
        position: sticky;
        top: var(--space-6, 2rem);
    }

    /* Em lg+ o <details> fica sempre com `open` (garantido por
       gerador-docx.js via matchMedia; o markup já vem com `open` de
       fábrica como fallback sem JS). NÃO tente revelar o conteúdo de um
       <details> fechado por CSS de autor: no Chrome atual o ocultamento
       vem do shadow DOM interno do elemento (verificado no Chrome 150 —
       `display: block` no filho não tem efeito visual), não de uma
       regra `display: none` sobrescrevível. */
    .gerador-como-usar-summary {
        cursor: default;
        pointer-events: none;
    }

    .gerador-como-usar-summary::after {
        content: none;
    }
}

/* ---- US-1509: auditoria responsiva (390 / 576 / 768px) ----
 * Antes só havia um breakpoint (768px) e de forma desigual entre as
 * variantes. Passada única cobrindo: wrap da toolbar de marcação (botões
 * .btn-citacao — inclui o botão "Importar arquivo" da US-1506, que
 * segue a mesma classe .btn-citacao por convenção deste formulário),
 * wrap do .formato-toggle, paddings dos cards e alvos de toque >= 44px
 * (regra WCAG 2.5.5/2.5.8) nos botões da toolbar, no toggle e no
 * submit. */
@media (max-width: 768px) {
    .gerador-menu .card-body {
        padding: 1.25rem;
    }

    /* .btn-citacao é display:inline-block (herdado de .btn do
       Bootstrap), então múltiplos botões já quebram linha naturalmente
       quando não cabem — a margem abaixo garante um respiro consistente
       nas quebras, independente de espaço em branco no HTML fonte. */
    .gerador-menu .btn-citacao {
        margin: 0 0.5rem 0.5rem 0;
    }

    .gerador-menu .formato-toggle {
        flex-wrap: wrap;
        max-width: 100%;
    }

    .gerador-menu .formato-toggle .form-check {
        flex: 1 1 auto;
    }

    .gerador-menu .formato-toggle .form-check-label {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .main-container.gerador-menu {
        padding: 1.5rem 0;
    }

    .gerador-menu .card-body {
        padding: 1rem;
    }

    .gerador-menu .card-header {
        padding: 1rem;
    }
}

@media (max-width: 390px) {
    .gerador-menu .card-body {
        padding: 0.85rem;
    }
}

/* Alvos de toque >= 44px — aplicado em toda a faixa "mobile/tablet"
   (não só no menor breakpoint), pois o problema já existe em 768px. */
@media (max-width: 768px) {
    .gerador-menu .btn-citacao {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .gerador-menu .formato-toggle .form-check-label {
        min-height: 44px;
    }

    .gerador-menu .btn-gerar {
        min-height: 44px;
        width: 100%;
    }
}

/* ---- Variante standalone (gerador_sem_menu.html) ----
 * Escopo: `<body class="gerador-standalone-page">` +
 * `<div class="main-container gerador-standalone">`. */

body.gerador-standalone-page {
    font-family: var(--font-sans);
    color: var(--color-text);
    /* EXCEÇÃO: gradiente de fundo sutil sem token exato equivalente
       (--color-surface-alt é #f8f9fa; o valor original aqui é #f8fafb,
       1 dígito diferente) — mantido literal para não alterar o visual. */
    background: linear-gradient(135deg, #f8fafb 0%, var(--color-surface) 100%);
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

.main-container.gerador-standalone {
    max-width: 1000px;
    padding: 3rem 2rem;
}

.gerador-standalone .card {
    animation: fadeInUp 0.6s ease-out;
}

.gerador-standalone .card-header {
    padding: 1.5rem;
}

.gerador-standalone .card-header h5 {
    font-family: var(--font-sans);
    font-size: 1.5rem;
}

.gerador-standalone .card-body {
    padding: 2rem;
}

.gerador-standalone .form-control,
.gerador-standalone .form-select {
    font-family: var(--font-sans);
}

.gerador-standalone textarea.form-control {
    font-family: var(--font-sans);
    min-height: 400px;
}

.gerador-standalone .btn-citacao {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: var(--color-on-primary);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: var(--transition);
}

.gerador-standalone .btn-citacao:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.3);
    color: var(--color-on-primary);
}

.gerador-standalone .info-card .card-header {
    font-family: var(--font-sans);
}

/* US-1509: .char-counter/.helper-text nunca tiveram regra visual sob
   .gerador-standalone (só existiam para .gerador-menu e .page-gerador) —
   os elementos já eram lidos por leitor de tela desde a US-1504, mas
   ficavam sem estilo (cor/tamanho) nesta variante. Mesmos valores das
   outras duas variantes, para paridade visual. */
.gerador-standalone .char-counter {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--dpmg-muted);
    text-align: right;
    margin-top: 0.35rem;
}

.gerador-standalone .helper-text {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--dpmg-muted);
    margin-top: 0.35rem;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .gerador-standalone .page-header h1 {
        font-size: 1.5rem;
    }

    .main-container.gerador-standalone {
        padding: 2rem 1rem;
    }

    .gerador-standalone .card-body {
        padding: 1.5rem;
    }

    /* US-1509: mesmo ajuste de wrap/toque da .gerador-menu — ver
       comentário completo na seção correspondente acima. */
    .gerador-standalone .btn-citacao {
        margin: 0 0.5rem 0.5rem 0;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .gerador-standalone .btn-gerar {
        min-height: 44px;
        width: 100%;
    }
}

@media (max-width: 576px) {
    .main-container.gerador-standalone {
        padding: 1.5rem 1rem;
    }

    .gerador-standalone .card-body {
        padding: 1.25rem;
    }

    .gerador-standalone .card-header {
        padding: 1rem;
    }

    .gerador-standalone textarea.form-control {
        min-height: 260px;
    }
}

@media (max-width: 390px) {
    .gerador-standalone .card-body {
        padding: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gerador-standalone .card {
        animation: none;
    }
}