.proposals-app { color: #172033; }

.proposals-heading,
.proposals-heading-inline,
.proposal-editor-toolbar,
.proposal-panel-title,
.proposals-heading-actions,
.proposal-clause-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.proposals-heading { justify-content: space-between; margin-bottom: 22px; }
.proposals-heading .page-title { margin: 0 0 5px; border: 0; padding: 0; }
.proposals-heading p, .proposal-panel-help { margin: 0; color: #64748b; font-size: 13px; }
.proposal-modal-help { margin: 0 0 16px; color: #64748b; font-size: 13px; line-height: 1.5; }

.proposals-filters {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 210px;
    gap: 14px;
    margin-bottom: 18px;
}

.proposals-search { position: relative; display: block; }
.proposals-search i {
    position: absolute; z-index: 1; left: 15px; top: 50%; transform: translateY(-50%);
    color: #94a3b8; pointer-events: none;
}
.proposals-search input { min-height: 44px; padding-left: 44px !important; }
.proposals-filters input, .proposals-filters select,
.proposal-field input, .proposal-field select, .proposal-field textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 10px 12px;
    background: #fff;
    color: #172033;
    font: inherit;
    box-sizing: border-box;
}

.proposals-filters input:focus, .proposals-filters select:focus,
.proposal-field input:focus, .proposal-field select:focus, .proposal-field textarea:focus {
    outline: 2px solid rgba(230, 92, 0, .15);
    border-color: var(--primary-orange);
}

/* A listagem de propostas usa .data-table/.table-responsive, como as outras abas — as regras
   próprias que viviam aqui (.proposals-table*) diziam quase a mesma coisa com outros valores, e
   eram o que fazia esta tabela parecer de outro sistema. Sobra só a largura mínima, que é dela:
   seis colunas com Código INC e Empresa não cabem confortavelmente em menos que isto. */
#pr-table { min-width: 980px; }

/* A linha inteira abre a proposta. O fundo do hover já vem de `.data-table tbody tr:hover`
 * (main.css); o que falta é o cursor dizer que dá para clicar — sem ele o alvo existe e não se
 * anuncia. Só nas linhas que têm proposta: a de "nenhuma proposta encontrada" não abre nada. */
#pr-table-body tr[data-proposal-id] { cursor: pointer; }
.proposal-row-actions { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.proposal-row-actions .proposal-reuse-action {
    color: #334155;
}
.proposal-row-actions .proposal-reuse-action:hover { color: #9a3412; background: #fff7ed; }
.proposal-empty { padding: 42px !important; text-align: center; color: #64748b; }
.proposals-loader { padding: 35px; text-align: center; color: #64748b; }
.proposals-loader.is-error { color: #b91c1c; background: #fef2f2; border-radius: 10px; }

.proposal-pdf-loading {
    position: fixed; inset: 0; z-index: 11000; display: grid; place-items: center;
    padding: 20px; background: rgba(15, 23, 42, .56); backdrop-filter: blur(3px);
}
.proposal-pdf-loading[hidden] { display: none; }
.proposal-pdf-loading-card {
    display: flex; width: min(390px, calc(100vw - 40px)); box-sizing: border-box;
    flex-direction: column; align-items: center; gap: 9px; padding: 28px 30px;
    border-radius: 14px; background: #fff; color: #172033; text-align: center;
    box-shadow: 0 22px 65px rgba(15, 23, 42, .3);
}
.proposal-pdf-loading-card strong { color: var(--primary-blue); font-size: 18px; }
.proposal-pdf-loading-card > span:last-child { color: #64748b; font-size: 13px; line-height: 1.45; }
.proposal-pdf-spinner {
    width: 36px; height: 36px; margin-bottom: 3px; border: 4px solid #e2e8f0;
    border-top-color: var(--primary-orange); border-radius: 50%;
    animation: proposal-pdf-spin .8s linear infinite;
}
@keyframes proposal-pdf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .proposal-pdf-spinner { animation-duration: 1.8s; } }

.proposal-status { display: inline-flex; border-radius: 999px; padding: 5px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.proposal-status-rascunho { color: #92400e; background: #fef3c7; }
.proposal-status-pronta { color: #166534; background: #dcfce7; }

.icon-button {
    width: 34px; height: 34px; border: 1px solid #e2e8f0; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center; background: #fff; color: #475569; cursor: pointer;
}
.icon-button:hover { color: var(--primary-orange); border-color: var(--primary-orange); }
.icon-button:disabled { opacity: .35; cursor: default; }

.proposal-editor-toolbar {
    position: sticky; top: -40px; z-index: 15; flex-wrap: wrap;
    background: rgba(248, 250, 252, .96); padding: 12px 0; margin-bottom: 15px; backdrop-filter: blur(8px);
}
.proposal-editor-title { display: flex; flex: 1; min-width: 220px; flex-direction: column; }
.proposal-editor-title strong { color: var(--primary-blue); }
.proposal-editor-title span { color: #64748b; font-size: 12px; }
.proposal-editor-title span.is-pending { color: #b45309; }
.proposal-editor-title span.is-saving { color: #2563eb; }
.proposal-editor-title span.is-error { color: #dc2626; }
.proposal-editor-title span.is-saved { color: #15803d; }
.proposal-more { position: relative; }
.proposal-more-trigger { width: 42px; height: 42px; font-size: 17px; }
.proposal-more-menu {
    position: absolute; z-index: 30; top: calc(100% + 7px); right: 0; width: 235px;
    padding: 6px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff;
    box-shadow: 0 14px 35px rgba(15, 23, 42, .18);
}
.proposal-more-menu[hidden] { display: none; }
/* O item declara `display: flex` logo abaixo, e isso venceria o [hidden] do navegador: é por aqui
   que "Excluir proposta" some para quem não é o responsável. */
.proposal-menu-item[hidden] { display: none; }
.proposal-menu-item {
    display: flex; width: 100%; align-items: center; gap: 9px; border: 0; border-radius: 7px;
    padding: 10px; color: #334155; background: transparent; font: inherit; font-size: 12px; font-weight: 700;
    text-align: left; cursor: pointer;
}
.proposal-menu-item:hover, .proposal-menu-item:focus { color: #9a3412; background: #fff7ed; outline: none; }
.proposal-menu-item i { width: 16px; color: #64748b; text-align: center; }

/* A EXCLUSÃO É A ÚNICA COISA IRREVERSÍVEL DESTE MENU. As outras duas abrem tela; esta apaga a
   proposta. O vermelho e a linha que a separa das vizinhas chegam ANTES do clique — a pergunta de
   confirmação só aparece depois de a pessoa já ter mirado. */
.proposal-menu-item-danger { margin-top: 4px; padding-top: 12px; border-top: 1px solid #e2e8f0; border-radius: 0 0 7px 7px; color: #b91c1c; }
.proposal-menu-item-danger i { color: #dc2626; }
.proposal-menu-item-danger:hover, .proposal-menu-item-danger:focus { color: #991b1b; background: #fef2f2; }

.proposal-editor-layout {
    display: grid;
    grid-template-columns: minmax(245px, 300px) minmax(520px, 1fr) minmax(250px, 320px);
    align-items: start;
    gap: 16px;
}
.proposal-editor-layout.clauses-collapsed {
    grid-template-columns: minmax(245px, 300px) minmax(520px, 1fr);
}
.clauses-collapsed .proposal-clauses-panel { display: none; }

.proposal-panel {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px;
    max-height: calc(100vh - 155px); overflow: auto; position: sticky; top: 65px;
}
.proposal-panel h3 { margin: 0 0 14px; color: var(--primary-blue); font-size: 15px; }
.proposal-panel-title { justify-content: space-between; margin-top: 12px; }
.proposal-panel-title h3 { margin: 0; }
.proposal-panel-help { margin: 7px 0 12px; line-height: 1.45; }

.proposal-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 13px; }

/* QUALQUER CAMPO DO PAINEL PRECISA PODER SUMIR. A linha acima declara `display: flex`, que vence a
   regra `[hidden] { display: none }` do agente do usuário — sem esta, pôr o atributo não esconde
   nada. Vale para o CNPJ e o endereço, que somem quando a contratante é um grupo, e substitui as
   regras avulsas que cada caso vinha declarando por conta própria. */
.proposal-field[hidden], .proposal-cnpj-status[hidden] { display: none; }
.proposal-field > span { color: #475569; font-size: 12px; font-weight: 700; }
.proposal-field textarea { resize: vertical; line-height: 1.5; }
.proposal-checkbox-field { flex-direction: row; align-items: center; cursor: pointer; }
.proposal-checkbox-field input[type="checkbox"] {
    width: 18px; height: 18px; flex: 0 0 18px; padding: 0; accent-color: var(--primary-orange); cursor: pointer;
}
.proposal-checkbox-field > span { cursor: pointer; }
.proposal-calculated-field { color: #475569; background: #f1f5f9 !important; cursor: not-allowed; }
.proposal-grow { flex: 1; }
.proposal-check { display: flex; align-items: center; gap: 8px; margin: 10px 0; color: #475569; font-size: 13px; }
.proposal-data-panel fieldset { border: 0; padding: 0; margin: 18px 0 0; }
.proposal-data-panel legend { width: 100%; border-bottom: 1px solid #e2e8f0; padding-bottom: 6px; margin-bottom: 12px; color: var(--primary-blue); font-size: 12px; font-weight: 800; text-transform: uppercase; }

/* AS OUTRAS EMPRESAS DO GRUPO, no painel. Um cartão por empresa em vez de uma caixa de texto: são
   cinco campos que viram uma linha da tabela do objeto, e misturá-los numa string livre foi
   exatamente o que tornava impossível conferir se todas estavam completas antes de gerar. */
.proposal-group-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 13px; }

/* A SEÇÃO INTEIRA DO GRUPO some com a caixa "É um grupo de empresas" desmarcada — e pela mesma
   razão do `.proposal-group-billing[hidden]` logo abaixo: a linha acima declara `display: flex`,
   que vence a regra de agente do usuário e deixaria o bloco visível com o atributo posto. Sem
   isto, desmarcar a caixa não esconderia nada, e a única pista seria o documento parar de mostrar
   o grupo. */
.proposal-group-field[hidden] { display: none; }
.proposal-group-title { color: #475569; font-size: 12px; font-weight: 700; }
.proposal-group-list { display: flex; flex-direction: column; gap: 10px; }

/* O ARRANJO DO FATURAMENTO só existe com grupo — some junto com a última empresa. O `[hidden]` do
   navegador não bastaria aqui: `.proposal-field` declara `display: flex`, que vence a regra de
   agente do usuário e deixaria o campo visível com o atributo posto. */
.proposal-group-billing { margin-bottom: 0; }
.proposal-group-billing[hidden] { display: none; }
.proposal-group-empty { margin: 0; color: #64748b; font-size: 12px; line-height: 1.45; }

.proposal-group-item {
    display: flex; flex-direction: column; gap: 8px;
    border: 1px solid #dbe3ec; border-radius: 8px; padding: 10px; background: #f8fafc;
}
.proposal-group-item-head {
    display: flex; align-items: center; justify-content: space-between;
    color: var(--primary-blue); font-size: 12px;
}
.proposal-group-remove {
    border: 0; background: transparent; color: #b42318; cursor: pointer;
    padding: 3px 5px; border-radius: 4px;
}
.proposal-group-remove:hover { background: #fee4e2; }

/* Os campos do cartão são menores que os do painel: cabem cinco por empresa numa coluna de 300px
   sem que o cartão vire uma rolagem própria. */
.proposal-group-input { gap: 3px; margin-bottom: 0; }
.proposal-group-input > span { font-size: 10px; }
.proposal-group-input input, .proposal-group-input select { padding: 8px; font-size: 12px; }
.proposal-group-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; }

.proposal-group-add {
    width: 100%; border: 1px dashed var(--primary-orange); border-radius: 6px; padding: 9px;
    background: #fff7ed; color: var(--primary-orange);
    font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.proposal-group-add:hover { background: #ffedd5; }

/* A DICA DO EDITOR. A edição do documento aqui é sempre ligada — não há botão para ligá-la, e
   portanto não havia onde dizer o que dá para fazer com ela. Fica acima do papel, discreta. */
.proposal-preview-dica {
    margin: 0 0 8px; color: #64748b; font-size: 12px; line-height: 1.45;
}
.proposal-preview-dica strong { color: #475569; }

.proposal-preview-shell { background: #dbe2ea; border-radius: 12px; padding: 22px; min-height: 720px; overflow: auto; }
.proposal-preview-shell.is-legacy { padding: 0; overflow: hidden; background: #525659; }
.proposal-legacy-frame {
    display: block; width: 100%; height: calc(100vh - 180px); min-height: 760px; border: 0; background: #525659;
}
.proposal-document {
    width: min(100%, 794px); min-height: 1123px; margin: 0 auto; background: #fff; position: relative;
    box-shadow: 0 8px 30px rgba(15, 23, 42, .16); font-family: Montserrat, Arial, sans-serif; color: #1f2937;
}
.proposal-document.is-draft::before {
    content: 'RASCUNHO'; position: absolute; z-index: 0; top: 42%; left: 9%; transform: rotate(-32deg);
    font-size: 76px; font-weight: 800; color: rgba(148, 163, 184, .14); letter-spacing: .12em; pointer-events: none;
}
.proposal-cover {
    min-height: 880px; padding: 70px 64px; box-sizing: border-box; display: flex; flex-direction: column;
    justify-content: center; position: relative; border-bottom: 14px solid var(--primary-orange); overflow: hidden;
}
.proposal-cover::after { content: ''; position: absolute; right: -160px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: #000425; opacity: .96; }
.proposal-cover img { width: 190px; margin-bottom: 90px; position: relative; z-index: 1; }
.proposal-cover h1 { color: #000425; font-size: 34px; margin: 0 0 10px; max-width: 560px; }
.proposal-cover-subtitle { color: #e65c00; font-size: 18px; font-weight: 700; margin: 0 0 45px; }
.proposal-cover strong { font-size: 16px; color: #475569; }
.proposal-cover h2 { margin-top: 22px; font-size: 22px; color: #000425; }
.proposal-cover > p:last-child { color: #64748b; }
.proposal-document-body { padding: 58px 64px 75px; position: relative; z-index: 1; }
.proposal-document-clause { margin-bottom: 28px; }
.proposal-document-clause h2 { color: #000425; border-left: 5px solid #e65c00; padding: 8px 0 8px 13px; font-size: 16px; line-height: 1.35; }
.proposal-document-clause h3 { color: #000425; font-size: 13px; line-height: 1.45; margin: 18px 0 6px; }
.proposal-document-clause p, .proposal-document-clause li { font-family: Arial, sans-serif; font-size: 12px; line-height: 1.65; text-align: justify; }
.proposal-clause-live-preview {
    margin: 12px -12px; padding: 12px; border-radius: 9px;
    box-shadow: 0 0 0 3px rgba(230, 92, 0, .28); background: rgba(255, 247, 237, .7);
}
.proposal-document-clause ul { padding-left: 22px; }
.proposal-inline-editable { border-radius: 3px; cursor: text; transition: background-color .15s, outline-color .15s; }
.proposal-inline-editable:hover { background: #fff7ed; outline: 1px dashed #fb923c; outline-offset: 2px; }
.proposal-inline-editable:focus { background: #fff; outline: 2px solid var(--primary-orange); outline-offset: 2px; }
.proposal-missing-variable { color: #b91c1c; background: #fee2e2; border-radius: 3px; padding: 0 2px; }
.proposal-document > footer { position: absolute; bottom: 18px; left: 64px; right: 64px; border-top: 1px solid #e2e8f0; padding-top: 8px; color: #94a3b8; font-size: 9px; letter-spacing: .08em; }

.proposal-clause-item {
    border: 1px solid #e2e8f0; border-radius: 9px; padding: 8px; margin-bottom: 8px; background: #f8fafc;
    display: flex; align-items: center; gap: 7px; justify-content: space-between;
}
.proposal-clause-name { text-align: left; color: #334155; font-size: 12px; font-weight: 700; flex: 1; }
.proposal-clause-actions { display: flex; gap: 3px; }
.proposal-clause-actions .icon-button { width: 27px; height: 27px; font-size: 11px; }
.proposal-clause-actions .proposal-delete-clause { color: #b91c1c; }
.proposal-clause-actions .proposal-delete-clause:hover { color: #991b1b; border-color: #ef4444; background: #fef2f2; }
.proposal-empty-small { color: #94a3b8; text-align: center; padding: 14px; font-size: 12px; }

.proposals-app .modal {
    position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, .56); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s;
}
.proposals-app .modal.active { opacity: 1; visibility: visible; pointer-events: auto; }
.proposals-app .modal-content { width: min(92vw, 780px); max-height: 92vh; overflow: hidden; display: flex; flex-direction: column; background: #fff; border-radius: 13px; box-shadow: 0 22px 65px rgba(15, 23, 42, .3); }
.proposals-app .proposal-small-modal { max-width: 520px; }
.proposals-app .proposal-clause-modal { max-width: 1040px; height: min(92vh, 820px); }
.proposals-app .proposal-clause-modal .modal-body {
    display: flex; flex: 1; min-height: 0; flex-direction: column; overflow: hidden;
}
.proposals-app .close-modal { border: 0; background: none; color: #64748b; font-size: 25px; cursor: pointer; }

/* A oferta de criar fichas cadastrais, ao finalizar a proposta. */
.proposal-fichas-intro { margin: 0 0 14px; color: #334155; font-size: 14px; line-height: 1.5; }
.proposal-fichas-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.proposal-fichas-list label {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap; cursor: pointer;
    padding: 9px 11px; border: 1px solid #e2e8f0; border-radius: 9px; background: #f8fafc;
}
.proposal-fichas-list label:hover { border-color: #cbd5e1; background: #f1f5f9; }
.proposal-fichas-list input[type="checkbox"] { flex: none; width: 15px; height: 15px; cursor: pointer; }
.proposal-fichas-name { font-size: 13.5px; font-weight: 600; color: #0f172a; }
.proposal-fichas-list small { color: #64748b; font-size: 12px; }
.proposal-fichas-tag {
    margin-left: auto; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
    letter-spacing: .3px; color: #0B1E3B; background: #dbeafe;
}
.proposal-fichas-warn { padding: 2px 8px; border-radius: 999px; font-size: 11px; color: #92400e; background: #fef3c7; }
.proposal-fichas-note { margin: 12px 0 0; color: #92400e; font-size: 12.5px; line-height: 1.5; }
.proposals-app #pr-clause-modal {
    inset: 16px; align-items: stretch; justify-content: flex-end; background: transparent; pointer-events: none;
}
.proposals-app #pr-clause-modal.active { pointer-events: none; }
.proposals-app #pr-clause-modal .proposal-clause-modal {
    width: min(520px, calc(100vw - 32px)); height: 100%; max-height: none; pointer-events: auto;
    border: 1px solid #dbe3ec; box-shadow: 0 18px 60px rgba(15, 23, 42, .28);
}
.proposal-live-preview-note { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: #b45309; font-size: 11px; font-weight: 700; }
.proposal-clause-row {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px;
}
.proposal-clause-row .proposal-field { min-width: 0; }
.proposal-position-field { min-width: 0; }
.proposal-position-field small,
.proposal-builder-heading small { color: #64748b; font-size: 11px; line-height: 1.35; }
.proposal-content-builder {
    display: flex; flex: 1; min-height: 0; flex-direction: column;
    border: 1px solid #d8e0ea; border-radius: 11px; background: #f8fafc; overflow: hidden;
}
.proposal-builder-heading {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 13px 15px; border-bottom: 1px solid #e2e8f0; background: #fff;
}
.proposal-builder-heading > div { display: flex; flex-direction: column; gap: 3px; }
.proposal-builder-heading strong { color: #334155; font-size: 13px; }
#pr-clause-block-count { color: #475569; background: #f1f5f9; border-radius: 999px; padding: 4px 9px; font-size: 11px; white-space: nowrap; }
.proposal-clause-block-list {
    display: flex; flex: 1; min-height: 170px; flex-direction: column; gap: 10px; padding: 12px; overflow-y: auto;
}
.proposal-clause-block {
    border: 1px solid #d8e0ea; border-radius: 10px;
    padding: 12px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
.proposal-block-header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding-bottom: 10px;
    border-bottom: 1px solid #edf1f5;
}
.proposal-block-order {
    display: inline-flex; align-items: center; justify-content: center; min-width: 25px; height: 25px;
    border: 1px solid #d8e0ea; border-radius: 6px; background: #f8fafc;
    color: #64748b; font-size: 11px; font-weight: 800;
}
.proposal-block-type {
    width: auto; min-width: 145px; border: 1px solid #cbd5e1; border-radius: 7px;
    padding: 6px 28px 6px 9px; background: #fff; color: #334155; font: inherit; font-size: 12px; font-weight: 700;
}
.proposal-block-actions { display: flex; gap: 4px; margin-left: auto; }
.proposal-block-actions .icon-button { width: 29px; height: 29px; font-size: 11px; }
.proposal-clause-block-text {
    width: 100%; min-height: 52px; box-sizing: border-box; resize: vertical; border: 1px solid #d8e0ea;
    border-radius: 7px; padding: 10px 11px; color: #172033; background: #fff; font: inherit; line-height: 1.5;
}
.proposal-clause-block-text:focus, .proposal-block-type:focus {
    outline: 2px solid rgba(230, 92, 0, .15); border-color: var(--primary-orange);
}
.proposal-block-add {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 11px 13px;
    border-top: 1px solid #e2e8f0; background: #fff;
}
.proposal-block-add > span { margin-right: 2px; color: #64748b; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.proposal-block-add .btn-secondary { padding: 7px 10px; font-size: 12px; }
.proposal-block-add .btn-secondary i { margin-right: 5px; }

@media (max-width: 1400px) {
    .proposal-editor-layout { grid-template-columns: 260px minmax(480px, 1fr); }
    .proposal-data-panel { grid-column: 1; grid-row: 1; }
    .proposal-preview-shell { grid-column: 2; grid-row: 1; }
    /* O organizador não pode virar uma segunda linha: os painéis laterais são sticky e, ao rolar,
       acabavam cobrindo a lista de cláusulas. Nesta largura ele funciona como um painel sobre o
       canto direito do preview, sem alterar a posição vertical do documento. */
    .proposal-clauses-panel {
        grid-column: 2; grid-row: 1; justify-self: end; z-index: 14;
        width: min(320px, calc(100% - 24px)); margin: 12px;
        box-sizing: border-box; box-shadow: 0 14px 38px rgba(15, 23, 42, .18);
    }
}

@media (max-width: 1100px) {
    .proposals-heading { align-items: flex-start; flex-direction: column; }
    .proposals-filters,
    .proposal-editor-layout,
    .proposal-editor-layout.clauses-collapsed { grid-template-columns: 1fr; }
    .proposal-panel { position: static; max-height: none; }
    .proposal-data-panel,
    .proposal-preview-shell,
    .proposal-clauses-panel {
        grid-column: auto; grid-row: auto; justify-self: stretch; z-index: auto;
    }
    .proposal-clauses-panel { width: auto; margin: 0; box-shadow: none; }
    .proposal-preview-shell { padding: 8px; }
    .proposal-document-body, .proposal-cover { padding-left: 30px; padding-right: 30px; }
}

/* =============================================================================
   CELULAR: a aba precisa GERAR uma proposta num telefone, e não só caber nele.
   =============================================================================

   Três coisas mudam abaixo de 700px, e cada uma resolve um problema medido em
   viewport de 393px antes de escrever qualquer regra:

     1. A LISTA VIRA CARTÃO. A tabela tem `min-width: 980px` (seis colunas com
        Código INC e Empresa não cabem em menos), então no telefone ela virava um
        arrasto lateral de 1027px. Em cartão, cada proposta ocupa a largura da
        tela e o rótulo de cada campo vem do `data-label` que a renderização põe
        em cada célula — é a MESMA tabela, refluída por CSS, então ordenação,
        filtro e busca continuam operando sobre as mesmas linhas.

     2. O DOCUMENTO SAI DA FRENTE. Ele é um A4; encolhido para 393px o texto fica
        ilegível, e é o formulário que se usa para gerar. O documento passa a
        abrir em tela cheia pelo botão "Ver documento".

     3. OS ALVOS DE TOQUE CRESCEM. Os ícones de ordenar e filtrar mediam 13px de
        altura, e os botões de ação 34px. O mínimo confortável é 44px.

   O botão "Ver documento" e a barra de fechar existem no HTML sempre; quem os
   esconde no computador é o CSS. Assim não há estado de interface dependendo da
   largura no JavaScript, e redimensionar a janela volta ao lado a lado sozinho. */

.proposal-preview-toggle { display: none; }
.proposal-preview-bar { display: none; }

/* DEDO É DEDO EM QUALQUER LARGURA.
   O tablet em retrato tem 768px — larga o bastante para escapar do breakpoint de
   cartão, e ainda assim é toque. Esta consulta pergunta pelo APONTADOR, não pelo
   tamanho: vale para telefone, tablet e telefone deitado, e não toca no
   computador, onde 13px com um mouse é confortável e mexer no tamanho
   desalinharia o cabeçalho das sete abas. */
@media (hover: none) and (pointer: coarse) {
    .dt-icon-btn { min-width: 40px; min-height: 40px; }
    .proposals-app .btn-primary,
    .proposals-app .btn-secondary { min-height: 44px; }
    .proposal-row-actions .icon-button {
        min-width: 44px; min-height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
    }
}

/* 820px, e não 700: o tablet em retrato tem 768px, e a tabela pede 1027px para
   caber — ou seja, tudo abaixo de ~1040px arrasta de lado de qualquer jeito. O
   cartão serve melhor a faixa inteira. Acima disso a tabela cabe e continua a
   mesma das outras seis abas. */
@media (max-width: 820px) {
    /* ---- 1. lista em cartões ---- */

    /* O cabeçalho some junto com a grade: sem colunas, "Código INC ▲" não tem o
       que ordenar visualmente. A busca e o filtro de status do topo continuam,
       e são o que se usa no telefone. */
    #pr-table thead { display: none; }
    #pr-table,
    #pr-table tbody,
    #pr-table tr,
    #pr-table td { display: block; width: auto; }

    /* A largura mínima é o que forçava o arrasto lateral. */
    #pr-table { min-width: 0; }
    .proposals-app .table-responsive { overflow: visible; border: 0; background: none; }

    #pr-table tr {
        box-sizing: border-box;
        margin-bottom: 12px;
        padding: 14px 16px;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
    }

    #pr-table td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 14px;
        padding: 5px 0;
        border: 0;
        text-align: right;
    }

    /* O rótulo vem do atributo posto na renderização (ver renderList em page.js). */
    #pr-table td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: #64748b;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        text-align: left;
    }

    /* Código INC e Empresa são o que identifica a proposta: viram o topo do
       cartão, em bloco e sem rótulo, como um título. */
    #pr-table td[data-label="Código INC"],
    #pr-table td[data-label="Empresa"] { display: block; text-align: left; }
    #pr-table td[data-label="Código INC"]::before,
    #pr-table td[data-label="Empresa"]::before { content: none; }
    #pr-table td[data-label="Código INC"] {
        color: var(--primary-blue); font-size: 15px; font-weight: 700; padding-top: 0;
    }
    #pr-table td[data-label="Empresa"] {
        padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid #f1f5f9;
        color: #172033; font-size: 14px; line-height: 1.35;
    }

    /* As ações ganham a largura do cartão, com alvo de toque cheio. */
    #pr-table td.proposal-row-actions {
        justify-content: flex-start;
        gap: 8px;
        padding-top: 12px;
        margin-top: 4px;
        border-top: 1px solid #f1f5f9;
    }
    #pr-table td.proposal-row-actions::before { content: none; }
    #pr-table td.proposal-row-actions .icon-button {
        min-width: 44px; min-height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
    }

    /* A linha de "nenhuma proposta" não é um cartão de dados. */
    #pr-table td.proposal-empty {
        display: block; text-align: center; padding: 32px 12px !important;
    }
    #pr-table td.proposal-empty::before { content: none; }

    /* ---- 2. documento em tela cheia, sob demanda ---- */

    .proposal-preview-toggle { display: inline-flex; }

    /* Fechado: o formulário tem a tela inteira. */
    .proposal-editor-layout .proposal-preview-shell { display: none; }

    .proposal-editor-layout.preview-aberto .proposal-preview-shell {
        display: block;
        position: fixed;
        inset: 0;
        /* ACIMA DO MENU-SANDUÍCHE, que é `position: fixed; z-index: 100`.
           Com z-index menor, o documento cobria a tela mas o botão do menu ficava
           por cima do canto onde mora o "Fechar" e ENGOLIA o toque: dava para
           abrir o documento e não dava para sair dele. Um teste de navegador
           pegou isso — a olho não aparece, porque o botão do menu é pequeno e
           some contra o fundo branco da barra. */
        z-index: 120;
        margin: 0;
        padding: 0;
        border-radius: 0;
        min-height: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .proposal-editor-layout.preview-aberto .proposal-preview-bar {
        display: flex;
        position: sticky;
        top: 0;
        z-index: 1;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 14px;
        border-bottom: 1px solid #cbd5e1;
        background: #fff;
    }
    .proposal-editor-layout.preview-aberto .proposal-preview-bar strong { font-size: 14px; }
    .proposal-editor-layout.preview-aberto .proposal-preview-bar .btn-secondary { min-height: 44px; }

    /* Enquanto o documento está por cima, a página de trás não rola junto — senão
       fechar devolveria a pessoa a outro ponto do formulário. */
    body.proposal-preview-travado { overflow: hidden; }

    /* E o cromo do aplicativo sai de cena: um visor de documento em tela cheia não
       divide a tela com o menu do sistema. Isto acompanha o z-index acima — um
       resolve a ordem, o outro tira o elemento do caminho, e juntos garantem que
       o "Fechar" seja alcançável mesmo que o valor de z-index mude um dia. */
    body.proposal-preview-travado .mobile-menu-btn,
    body.proposal-preview-travado .sidebar-toggle-handle { display: none; }

    /* O A4 usa a largura que tem, com margens de leitura em vez das de impressão. */
    .proposal-editor-layout.preview-aberto .proposal-document { min-height: 0; box-shadow: none; }
    .proposal-editor-layout.preview-aberto .proposal-document-body,
    .proposal-editor-layout.preview-aberto .proposal-cover { padding-left: 18px; padding-right: 18px; }
    .proposal-editor-layout.preview-aberto .proposal-legacy-frame {
        height: calc(100vh - 64px); min-height: 0;
    }

    /* ---- 3. alvos de toque ---- */

    /* Os ícones do cabeçalho de tabela (ordenar/filtrar) mediam 13px de altura.
       Vale para as tabelas da Central inteira, não só esta — o componente é
       compartilhado, e o dedo é o mesmo em qualquer aba. */
    .dt-icon-btn { min-width: 40px; min-height: 40px; }

    .proposals-heading { align-items: stretch; }
    .proposals-heading-actions .btn-primary { width: 100%; justify-content: center; }
    .proposals-app .btn-primary,
    .proposals-app .btn-secondary { min-height: 44px; }

    /* A barra do editor empilhava em quatro fileiras de botões de tamanhos
       diferentes. Em duas colunas ela fica previsível, e cada botão fica grande
       o bastante para o dedo. */
    .proposal-editor-toolbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
        gap: 8px;
    }
    .proposal-editor-toolbar .proposal-editor-title,
    .proposal-editor-toolbar .proposal-status { grid-column: 1 / -1; }
    .proposal-editor-toolbar .btn-primary,
    .proposal-editor-toolbar .btn-secondary { justify-content: center; }
    /* Sem `grid-column: 1 / -1`: o "..." ocupa a coluna livre ao lado de "Ver documento",
       em vez de abrir uma fileira inteira para um botão de 42px. */
    .proposal-editor-toolbar .proposal-more { justify-self: end; align-self: center; }
}

@media (max-width: 600px) {
    .proposals-app #pr-clause-modal { inset: 0; background: rgba(15, 23, 42, .56); }
    .proposals-app #pr-clause-modal .proposal-clause-modal { width: 100vw; border: 0; border-radius: 0; }
    .proposals-app .proposal-clause-modal { height: 96vh; max-height: 96vh; }
    .proposals-app .proposal-clause-modal .modal-body { padding: 16px; }
    .proposal-clause-row { grid-template-columns: 1fr; align-items: stretch; }
    .proposal-position-field { flex: 1 1 auto; }
    .proposal-block-add > span { width: 100%; }
}

@page { size: A4; margin: 20mm 16mm 22mm; }

@media print {
    body.proposal-printing { display: block !important; background: #fff !important; }
    body.proposal-printing .sidebar,
    body.proposal-printing .sidebar-toggle-handle,
    body.proposal-printing .mobile-menu-btn,
    body.proposal-printing #sidebar-flyout,
    body.proposal-printing #sidebarOverlay,
    body.proposal-printing .toast-container { display: none !important; }
    body.proposal-printing .app-layout { display: block !important; }
    body.proposal-printing .main-content { padding: 0 !important; overflow: visible !important; background: #fff !important; }
    body.proposal-printing .tab-pane { display: none !important; }
    body.proposal-printing #tab-propostas { display: block !important; animation: none !important; }
    body.proposal-printing [data-proposal-view] { display: none !important; }
    body.proposal-printing [data-proposal-view="editor"] { display: block !important; }
    body.proposal-printing .proposal-editor-toolbar,
    body.proposal-printing .proposal-panel { display: none !important; }
    body.proposal-printing .proposal-editor-layout { display: block !important; }
    body.proposal-printing .proposal-preview-shell { padding: 0 !important; margin: 0 !important; min-height: 0 !important; overflow: visible !important; background: #fff !important; }
    body.proposal-printing .proposal-document { width: auto !important; min-height: 0 !important; margin: 0 !important; box-shadow: none !important; }
    body.proposal-printing .proposal-cover { min-height: 245mm; padding: 35mm 10mm; break-after: page; border-bottom-width: 4mm; }
    body.proposal-printing .proposal-document-body { padding: 0; }
    body.proposal-printing .proposal-document-clause h2 { break-after: avoid; }
    body.proposal-printing .proposal-document-clause p,
    body.proposal-printing .proposal-document-clause li { orphans: 3; widows: 3; }
    body.proposal-printing .proposal-document > footer { display: none; }
    body.proposal-printing .proposal-document.is-draft::before { position: fixed; top: 45%; }
}

/* Linha de resposta da consulta de CNPJ. Mora logo abaixo do campo porque não há botão de
   buscar: completar os 14 dígitos é o que dispara, e é aqui que isso se explica e se responde.
   Mesmas cores do status equivalente no on-boarding. */
.proposal-cnpj-status {
    margin: -7px 0 13px;
    font-size: 11px;
    line-height: 1.4;
    color: #64748b;
    min-height: 14px;
}

.proposal-cnpj-status[data-cnpj-status="loading"] { color: #475569; }
.proposal-cnpj-status[data-cnpj-status="ok"] { color: #1a7d3c; }
.proposal-cnpj-status[data-cnpj-status="error"] { color: #b91c1c; }