/* ═════════════ Temas de cor ═════════════
   Cada tema define a cor principal, a versão escura (hover), o RGB (transparências),
   a cor do menu lateral e a cor de link usada no modo escuro. */
:root, [data-tema="azul"] {
  --ec-primaria: #1463ff; --ec-primaria-escura: #0b47c2; --ec-primaria-rgb: 20, 99, 255;
  --ec-sidebar: #0f1b33; --ec-link-escuro: #7aa7ff;
}
[data-tema="esmeralda"] {
  --ec-primaria: #0e9f6e; --ec-primaria-escura: #057a55; --ec-primaria-rgb: 14, 159, 110;
  --ec-sidebar: #0b2a20; --ec-link-escuro: #4ade9b;
}
[data-tema="violeta"] {
  --ec-primaria: #7c3aed; --ec-primaria-escura: #5b21b6; --ec-primaria-rgb: 124, 58, 237;
  --ec-sidebar: #1e1338; --ec-link-escuro: #b39afb;
}
[data-tema="laranja"] {
  --ec-primaria: #ea580c; --ec-primaria-escura: #c2410c; --ec-primaria-rgb: 234, 88, 12;
  --ec-sidebar: #2a170c; --ec-link-escuro: #fb9a5c;
}
[data-tema="rubi"] {
  --ec-primaria: #e11d48; --ec-primaria-escura: #be123c; --ec-primaria-rgb: 225, 29, 72;
  --ec-sidebar: #2a0d17; --ec-link-escuro: #fb7f99;
}
[data-tema="oceano"] {
  --ec-primaria: #0891b2; --ec-primaria-escura: #0e7490; --ec-primaria-rgb: 8, 145, 178;
  --ec-sidebar: #082c38; --ec-link-escuro: #38d3f0;
}
[data-tema="grafite"] {
  --ec-primaria: #475569; --ec-primaria-escura: #334155; --ec-primaria-rgb: 71, 85, 105;
  --ec-sidebar: #111827; --ec-link-escuro: #a5b4c8;
}

/* ═════════════ Modo claro (padrão) ═════════════ */
:root {
  --ec-sucesso: #12a150;
  --ec-fundo: #f4f6fb;
  --ec-superficie: #ffffff;
  --ec-borda: #e3e8f0;
  --ec-texto: #1c2434;
  --ec-suave: #6b7489;
  --ec-sidebar-texto: #b7c2d8;
  --ec-sidebar-fundo: var(--ec-sidebar);
  --ec-link: var(--ec-primaria);
  --ec-raio: 12px;
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
:root, [data-bs-theme] {
  --bs-primary: var(--ec-primaria);
  --bs-primary-rgb: var(--ec-primaria-rgb);
  --bs-primary-bg-subtle: rgba(var(--ec-primaria-rgb), .12);
  --bs-primary-border-subtle: rgba(var(--ec-primaria-rgb), .35);
  --bs-primary-text-emphasis: var(--ec-primaria-escura);
  --bs-link-color: var(--ec-link);
  --bs-link-color-rgb: var(--ec-primaria-rgb);
  --bs-link-hover-color: var(--ec-primaria-escura);
  --bs-body-color: var(--ec-texto);
  --bs-body-bg: var(--ec-fundo);
  --bs-border-color: var(--ec-borda);
  --bs-secondary-color: var(--ec-suave);
  --bs-tertiary-bg: var(--ec-fundo);
  --bs-focus-ring-color: rgba(var(--ec-primaria-rgb), .25);
}

/* ═════════════ Modo escuro ═════════════ */
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) {
    --ec-fundo: #0e1422; --ec-superficie: #161e30; --ec-borda: #263149;
    --ec-texto: #e5eaf4; --ec-suave: #93a0b9;
    --ec-sidebar-fundo: color-mix(in srgb, var(--ec-sidebar) 65%, #000);
    --ec-link: var(--ec-link-escuro);
  }
}
[data-bs-theme="dark"] {
  --ec-fundo: #0e1422; --ec-superficie: #161e30; --ec-borda: #263149;
  --ec-texto: #e5eaf4; --ec-suave: #93a0b9;
  --ec-sidebar-fundo: color-mix(in srgb, var(--ec-sidebar) 65%, #000);
  --ec-link: var(--ec-link-escuro);
  --bs-primary-text-emphasis: var(--ec-link-escuro);
  --bs-link-hover-color: var(--ec-link-escuro);
}
[data-bs-theme="dark"] .btn-light { --bs-btn-bg: #222c42; --bs-btn-border-color: #222c42; --bs-btn-color: var(--ec-texto);
  --bs-btn-hover-bg: #2b3752; --bs-btn-hover-border-color: #2b3752; --bs-btn-hover-color: #fff; }
[data-bs-theme="dark"] .text-primary { color: var(--ec-link-escuro) !important; }

body { background: var(--ec-fundo); color: var(--ec-texto); font-size: .925rem; transition: background-color .2s; }
a { color: var(--ec-link); }

/* Componentes do Bootstrap que têm a cor azul fixa no CSS compilado */
.btn-primary { --bs-btn-bg: var(--ec-primaria); --bs-btn-border-color: var(--ec-primaria);
  --bs-btn-hover-bg: var(--ec-primaria-escura); --bs-btn-hover-border-color: var(--ec-primaria-escura);
  --bs-btn-active-bg: var(--ec-primaria-escura); --bs-btn-active-border-color: var(--ec-primaria-escura);
  --bs-btn-disabled-bg: var(--ec-primaria); --bs-btn-disabled-border-color: var(--ec-primaria); }
.btn-outline-primary { --bs-btn-color: var(--ec-link); --bs-btn-border-color: var(--ec-primaria);
  --bs-btn-hover-bg: var(--ec-primaria); --bs-btn-hover-border-color: var(--ec-primaria); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--ec-primaria); --bs-btn-active-border-color: var(--ec-primaria); --bs-btn-active-color: #fff; }
.btn-link { --bs-btn-color: var(--ec-link); --bs-btn-hover-color: var(--ec-primaria-escura); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--ec-primaria); --bs-nav-link-color: var(--ec-link); --bs-nav-link-hover-color: var(--ec-primaria-escura); }
.form-check-input:checked { background-color: var(--ec-primaria); border-color: var(--ec-primaria); }
.form-check-input:focus { border-color: var(--ec-primaria); box-shadow: 0 0 0 .2rem rgba(var(--ec-primaria-rgb), .2); }
.form-check-input { border-color: color-mix(in srgb, var(--ec-suave) 60%, transparent); }
.pagination { --bs-pagination-color: var(--ec-link); --bs-pagination-active-bg: var(--ec-primaria); --bs-pagination-active-border-color: var(--ec-primaria);
  --bs-pagination-bg: var(--ec-superficie); --bs-pagination-border-color: var(--ec-borda); --bs-pagination-disabled-bg: var(--ec-superficie); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--ec-primaria); --bs-dropdown-bg: var(--ec-superficie); --bs-dropdown-border-color: var(--ec-borda); }
.modal { --bs-modal-bg: var(--ec-superficie); }
.list-group { --bs-list-group-bg: transparent; --bs-list-group-border-color: var(--ec-borda); --bs-list-group-color: var(--ec-texto); }
.btn-success { --bs-btn-bg: var(--ec-sucesso); --bs-btn-border-color: var(--ec-sucesso); }
.caixa-destaque { background: rgba(var(--ec-primaria-rgb), .06); border-radius: var(--ec-raio); }
.text-suave { color: var(--ec-suave) !important; }
.mono { font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: .8rem; word-break: break-all; }

/* ── Layout ── */
.ec-sidebar {
  width: 248px; background: var(--ec-sidebar-fundo); color: var(--ec-sidebar-texto);
  position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; z-index: 1030;
}
.ec-sidebar .marca { color: #fff; font-weight: 700; font-size: 1.25rem; padding: 1.1rem 1.25rem; text-decoration: none; display: flex; align-items: center; gap: .5rem; }
.ec-sidebar .marca .logo { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.logo-login { width: 72px; height: 72px; object-fit: contain; padding: 8px; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.ec-sidebar .nav-link { color: var(--ec-sidebar-texto); border-radius: 8px; margin: 1px .75rem; padding: .55rem .8rem; display: flex; align-items: center; gap: .65rem; }
.ec-sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.ec-sidebar .nav-link.active { color: #fff; background: var(--ec-primaria); }
.ec-sidebar .secao { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; opacity: .55; padding: 1rem 1.6rem .35rem; }
.ec-main { margin-left: 248px; min-height: 100vh; }
.ec-topo { background: var(--ec-superficie); border-bottom: 1px solid var(--ec-borda); padding: .6rem 1.25rem; position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .75rem; }
.ec-conteudo { padding: 1.25rem; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--ec-primaria); color: #fff; font-size: .75rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: .02em; }
.avatar-lg { width: 56px; height: 56px; font-size: 1.15rem; }
.menu-usuario > .btn { padding-top: .3rem; padding-bottom: .3rem; padding-left: .35rem; }
.menu-usuario .nome { max-width: 140px; }
.menu-usuario .dropdown-menu { min-width: 230px; }
.min-w-0 { min-width: 0; }

@media (max-width: 991.98px) {
  .ec-sidebar { transform: translateX(-100%); transition: transform .2s ease; }
  .ec-sidebar.aberta { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.45); }
  .ec-main { margin-left: 0; }
  .ec-conteudo { padding: 1rem; }
}

/* ── Cartões ── */
.card { background: var(--ec-superficie); border: 1px solid var(--ec-borda); border-radius: var(--ec-raio); }
.card-header { background: transparent; border-bottom: 1px solid var(--ec-borda); font-weight: 600; padding: .8rem 1rem; display: flex; align-items: center; gap: .5rem; }
.passo { width: 24px; height: 24px; border-radius: 50%; background: var(--ec-primaria); color: #fff; font-size: .75rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.indicador { padding: 1rem 1.1rem; }
.indicador .valor { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.indicador .rotulo { color: var(--ec-suave); font-size: .8rem; }
.indicador .icone { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }

.atalho { display: flex; align-items: center; gap: .9rem; padding: 1rem; border-radius: var(--ec-raio); border: 1px solid var(--ec-borda); background: var(--ec-superficie); color: var(--ec-texto); text-decoration: none; transition: border-color .15s, transform .15s; }
.atalho:hover { border-color: var(--ec-primaria); transform: translateY(-1px); color: var(--ec-texto); }
.atalho i { font-size: 1.6rem; color: var(--ec-primaria); }
.atalho small { color: var(--ec-suave); display: block; }

/* ── Formulários ── */
.form-label { font-size: .8rem; font-weight: 500; color: var(--ec-suave); margin-bottom: .25rem; }
.form-control, .form-select { border-radius: 8px; border-color: var(--ec-borda); background-color: var(--ec-superficie); color: var(--ec-texto); }
.form-control:focus, .form-select:focus { border-color: var(--ec-primaria); box-shadow: 0 0 0 .2rem rgba(var(--ec-primaria-rgb), .15); }
.errorlist { list-style: none; padding: 0; margin: .2rem 0 0; color: #dc3545; font-size: .8rem; }
.zona-upload { border: 2px dashed var(--ec-borda); border-radius: var(--ec-raio); padding: 1.25rem; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.zona-upload:hover, .zona-upload.arrastando { border-color: var(--ec-primaria); background: rgba(var(--ec-primaria-rgb), .04); }
.zona-upload i { font-size: 2rem; color: var(--ec-primaria); }

.participante-card { border: 1px solid var(--ec-borda); border-radius: 10px; padding: .6rem .8rem; display: flex; gap: .6rem; align-items: center; min-height: 58px; }
.participante-card .nome { font-weight: 600; line-height: 1.2; }
.participante-card .info { font-size: .78rem; color: var(--ec-suave); }
.autocomplete { position: relative; }
.autocomplete .sugestoes { position: absolute; z-index: 1050; left: 0; right: 0; top: 100%; background: var(--ec-superficie); border: 1px solid var(--ec-borda); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 280px; overflow-y: auto; display: none; }
.autocomplete .sugestoes.show { display: block; }
.autocomplete .sugestoes button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: .5rem .75rem; color: var(--ec-texto); font-size: .875rem; }
.autocomplete .sugestoes button:hover, .autocomplete .sugestoes button.ativo { background: rgba(var(--ec-primaria-rgb), .08); }

.tomador-opcoes .btn { flex: 1 1 0; font-size: .82rem; }
.doc-item { display: flex; gap: .75rem; align-items: flex-start; padding: .65rem 0; border-bottom: 1px solid var(--ec-borda); }
.doc-item:last-child { border-bottom: 0; }
.doc-item .num { width: 26px; height: 26px; border-radius: 50%; background: rgba(var(--ec-primaria-rgb), .1); color: var(--ec-primaria); font-size: .75rem; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vazio { text-align: center; color: var(--ec-suave); padding: 1.5rem .5rem; }
.vazio i { font-size: 2rem; display: block; margin-bottom: .4rem; opacity: .6; }
.uf-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 999px; background: rgba(var(--ec-primaria-rgb), .1); color: var(--ec-primaria); font-weight: 600; font-size: .8rem; margin: 0 .25rem .25rem 0; }
.uf-chip button { border: 0; background: transparent; color: inherit; padding: 0; line-height: 1; }
.rota { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; font-weight: 600; }
.rota .seta { color: var(--ec-suave); }

/* ── Resumo lateral ── */
.resumo { position: sticky; top: 76px; }
.resumo dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem .75rem; margin: 0; font-size: .85rem; }
.resumo dt { color: var(--ec-suave); font-weight: 400; }
.resumo dd { margin: 0; text-align: right; font-weight: 600; word-break: break-word; }
.resumo .total { font-size: 1.5rem; font-weight: 700; color: var(--ec-sucesso); }
.checklist { list-style: none; padding: 0; margin: .75rem 0; font-size: .82rem; }
.checklist li { padding: .2rem 0; }
.checklist .pendente { color: #c77700; }
.checklist .ok { color: var(--ec-sucesso); }

/* Barra de ação fixa no celular */
@media (max-width: 991.98px) {
  .resumo { position: static; }
  .barra-acao { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1025; background: var(--ec-superficie); border-top: 1px solid var(--ec-borda); padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom)); display: flex; gap: .5rem; }
  .barra-acao .btn { flex: 1; }
  body.com-barra { padding-bottom: 80px; }
}
@media (min-width: 992px) { .barra-acao-mobile { display: none !important; } }

/* ── Listas ── */
.tabela { margin: 0; }
.tabela th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ec-suave); font-weight: 600; background: transparent; border-bottom-width: 1px; white-space: nowrap; }
.tabela td { vertical-align: middle; background: transparent; }
.tabela tbody tr { cursor: pointer; }
.tabela tbody tr:hover td { background: rgba(var(--ec-primaria-rgb), .03); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--ec-texto); }
@media (max-width: 767.98px) {
  .tabela thead { display: none; }
  .tabela tr { display: block; padding: .75rem 1rem; border-bottom: 1px solid var(--ec-borda); }
  .tabela td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .15rem 0; }
  .tabela td::before { content: attr(data-label); color: var(--ec-suave); font-size: .78rem; }
  .tabela td.sem-rotulo::before { content: none; }
}
.badge-status { font-weight: 600; font-size: .72rem; padding: .35em .65em; border-radius: 6px; }

/* ── Login ── */
.tela-login { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.tela-login .lado { background: linear-gradient(135deg, var(--ec-sidebar), var(--ec-primaria)); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: center; }
.tela-login .lado h1 { font-weight: 800; font-size: 2.4rem; }
.tela-login .lado li { margin-bottom: .6rem; }
.tela-login .form-area { display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
@media (max-width: 767.98px) { .tela-login { grid-template-columns: 1fr; } .tela-login .lado { display: none; } }

.faixa-homologacao { background: repeating-linear-gradient(45deg, #ffb703, #ffb703 10px, #ffc533 10px, #ffc533 20px); color: #3d2a00; font-weight: 700; font-size: .72rem; text-align: center; padding: 2px; letter-spacing: .06em; }

@media print {
  .ec-sidebar, .ec-topo, .nao-imprimir, .faixa-homologacao { display: none !important; }
  .ec-main { margin: 0; }
  body { background: #fff; }
}

/* ═════════════ Seletor de tema ═════════════ */
.seletor-tema { width: 290px; padding: .9rem; }
.seletor-tema .titulo { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ec-suave); font-weight: 600; margin-bottom: .45rem; }
.seletor-tema .modos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin-bottom: .9rem; }
.seletor-tema .modos button { border: 1px solid var(--ec-borda); background: transparent; color: var(--ec-texto); border-radius: 8px; padding: .45rem .25rem; font-size: .78rem; display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.seletor-tema .modos button i { font-size: 1.1rem; }
.seletor-tema .modos button.ativo { border-color: var(--ec-primaria); background: rgba(var(--ec-primaria-rgb), .1); color: var(--ec-link); font-weight: 600; }
.seletor-tema .cores { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem .35rem; }
.seletor-tema .cores button { border: 0; background: transparent; color: var(--ec-texto); font-size: .7rem; display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: 0; }
.seletor-tema .amostra { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: inset 0 0 0 3px var(--ec-superficie); border: 2px solid transparent; transition: transform .12s; }
.seletor-tema .cores button:hover .amostra { transform: scale(1.08); }
.seletor-tema .cores button.ativo .amostra { border-color: var(--ec-texto); }
.seletor-tema .cores button:not(.ativo) .amostra i { display: none; }

/* ═════════════ Ajustes para celular ═════════════ */
/* Rótulo em uma linha só: campos lado a lado ficam sempre alinhados */
.form-label { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.faixa-homologacao .curto { display: none; }
@media (max-width: 575.98px) {
  .faixa-homologacao .longo { display: none; }
  .faixa-homologacao .curto { display: inline; }
  .ec-topo { padding: .5rem .75rem; gap: .5rem; }
  .ec-topo h1 { font-size: 1rem; }
  .ec-conteudo { padding: .75rem; }
  .card-body { padding: .85rem; }
  .card-header { padding: .7rem .85rem; flex-wrap: wrap; }
  .row.g-2 { --bs-gutter-x: .5rem; }
  /* 16px evita o zoom automático do iPhone ao tocar no campo */
  .form-control, .form-select, .form-control-sm, .form-select-sm, .input-group-text { font-size: 16px; }
  .form-switch { padding-top: .25rem; }
  .acoes-form { position: sticky; bottom: 0; background: var(--ec-fundo); padding: .6rem 0 calc(.6rem + env(safe-area-inset-bottom)); z-index: 5; }
  .acoes-form .btn-primary { flex: 1; }
  .indicador { padding: .75rem; gap: .6rem !important; }
  .indicador .valor { font-size: 1.3rem; }
  .indicador .icone { width: 36px; height: 36px; font-size: 1rem; }
  .atalho { padding: .8rem; }
  .seletor-tema { width: min(290px, calc(100vw - 2rem)); }
}