/* Tokens e shell em erpoint.css + components.css */

/* ============================================================
   UTILITÁRIOS GLOBAIS
   ============================================================ */
.eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-3);
}
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.upper { text-transform: uppercase; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ============================================================
   TRIAR — chips de área coloridos + dot de filtro
   ============================================================ */
.triar-area-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; flex-shrink: 0;
}
.triar-chip-area { cursor: pointer; transition: opacity var(--tr); }
.triar-chip-area:hover { opacity: 0.75; }
.act-warn { color: var(--warn); border-color: rgba(245,166,35,0.25); }
.act-warn:hover { background: rgba(245,166,35,0.13); border-color: var(--warn); }
.act-sm { padding: 4px 8px; font-size: 11.5px; }

/* ============================================================
   HOJE — layout 2 colunas + timeline 24h
   ============================================================ */
.hoje-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
  align-items: start;
  margin-top: 20px;
}
@media (max-width: 960px) {
  .hoje-grid { grid-template-columns: 1fr; }
}

/* Timeline 24h */
.timeline-scroll {
  height: 400px;
  overflow-y: auto;
  position: relative;
  border-radius: 8px;
}
.timeline-wrap {
  position: relative;
  height: 960px;
}
.timeline-axis {
  position: absolute; inset: 0;
  pointer-events: none;
}
.timeline-mark {
  position: absolute;
  left: 0; right: 0; height: 0;
  border-top: 1px solid var(--border-soft);
}
.timeline-mark-label {
  position: absolute; left: 0; top: -9px;
  font-size: 10px; font-weight: 600; color: var(--text-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  width: 28px; text-align: right;
}
.timeline-blocks {
  position: absolute;
  inset: 0;
  left: 36px; /* espaço pros labels */
}
.timeline-block {
  position: absolute;
  left: 4px; right: 4px;
  border-radius: 4px;
  min-height: 6px;
  padding: 2px 6px;
  font-size: 11px; font-weight: 600;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0.88;
  cursor: default;
}
.timeline-block.tipo-foco-ativo {
  opacity: 1;
  animation: tl-pulse 1.6s ease-in-out infinite;
}
@keyframes tl-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}
@media (prefers-reduced-motion: reduce) {
  .timeline-block.tipo-foco-ativo { animation: none; }
}
.timeline-block.tipo-agenda {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent);
  opacity: 1;
}
.timeline-block.tipo-planejado {
  border: 1.5px dashed var(--border-strong);
  background: var(--surface-2);
  color: var(--text-3);
  opacity: 1;
}
/* Barra lateral multi-área: gradiente das cores das áreas */
.timeline-block-multi { border-left: 4px solid; }

/* Linha AGORA */
.timeline-agora-line {
  position: absolute;
  left: 36px; right: 0;
  height: 2px;
  background: var(--danger);
  z-index: 2;
  pointer-events: none;
}
.timeline-agora-dot {
  position: absolute;
  left: -5px; top: -4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--danger);
}

/* Barra empilhada por área */
.area-bar-wrap { display: flex; height: 10px; border-radius: var(--r-pill); overflow: hidden; gap: 1px; }
.area-bar-seg { height: 100%; }
.area-bar-legenda { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--text-3); }
.area-bar-legenda-item { display: flex; align-items: center; gap: 5px; }
.area-bar-legenda-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Card Agora */
.card-agora {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 14px;
}
.card-agora.executando { border-top: 3px solid var(--accent); }
.card-agora.ocioso { border-top: 3px solid var(--border); }
.card-agora-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; gap: 10px;
}
.card-agora-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.card-agora.executando .card-agora-eyebrow { color: var(--accent); }
.card-agora.ocioso .card-agora-eyebrow { color: var(--text-3); }
.card-agora-timer { margin-left: auto; font-family: var(--mono); font-size: 13px; color: var(--text-3); }
.card-agora-body { padding: 14px 16px; }
.card-agora-titulo { font-size: 15px; font-weight: 700; margin: 0 0 10px; }
.card-agora-areas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.card-agora-area-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600;
  border: 1.5px solid; cursor: pointer; transition: var(--tr);
  background: none; font-family: inherit;
}
.card-agora-area-btn.ativa { color: #fff; }
.card-agora-area-btn:not(.ativa) { opacity: 0.5; }
.card-agora-area-btn:not(.ativa):hover { opacity: 0.8; }
.card-agora-acoes { display: flex; gap: 7px; flex-wrap: wrap; }
.card-agora-ocioso-msg { color: var(--text-3); font-size: 13px; }

/* A seguir */
.a-seguir-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  transition: var(--tr);
}
.a-seguir-item:hover { border-color: var(--border-strong); background: var(--surface-2); }
.a-seguir-texto { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--text); }
.a-seguir-meta { font-size: 11.5px; color: var(--text-3); }

/* Captura inline na Hoje */
.hoje-captura-nova {
  margin-bottom: 20px;
}
.hoje-captura-nova .capture {
  width: 100%;
}



.page-header {
    margin-bottom: 1.5rem;
}

.page-header h1 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

.page-header .subtitle {
    font-size: 13px;
    color: var(--text-soft);
}

/* =================================================
   STAT CARDS
   ================================================= */

.stats {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.stat-card {
    background: var(--surface);
    padding: 10px 16px;
    border-radius: 10px;
    border: 0.5px solid var(--border);
    font-size: 13px;
    color: var(--text-soft);
    display: flex;
    align-items: center;
    gap: 8px;
}
.stat-card strong {
    color: var(--text);
    font-weight: 700;
    font-size: 17px;
}

/* Stats clicáveis */
.stat-card.stat-info {
    cursor: default;
}

.stat-card.stat-clicavel {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: all 0.15s ease;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.stat-card.stat-clicavel:hover {
    background: var(--surface-soft);
    border-color: var(--accent);
    transform: translateY(-1px);
}

.stat-card.stat-clicavel.ativo {
    background: var(--text);
    color: var(--surface);
    border-color: var(--text);
}

.stat-card.stat-clicavel.ativo strong {
    color: var(--surface);
}

@media (prefers-color-scheme: dark) {
    .stat-card.stat-clicavel.ativo {
        background: var(--surface);
        color: var(--bg);
        border-color: var(--surface);
    }
    .stat-card.stat-clicavel.ativo strong {
        color: var(--bg);
    }
}

/* =================================================
   TABS E FILTROS
   ================================================= */

.tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    padding: 4px;
    background: var(--surface);
    border-radius: 10px;
    border: 0.5px solid var(--border);
    width: fit-content;
}

.tab {
    padding: 7px 13px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-soft);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.tab:hover {
    background: var(--surface-soft);
    color: var(--text);
}
.tab.ativo {
    background: var(--text);
    color: var(--bg);
}
.tab .count {
    background: rgba(0,0,0,0.06);
    padding: 1px 7px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
}
.tab.ativo .count {
    background: rgba(255,255,255,0.18);
}
@media (prefers-color-scheme: dark) {
    .tab .count {
        background: rgba(255,255,255,0.08);
    }
    .tab.ativo .count {
        background: rgba(0,0,0,0.2);
    }
}

.filtros-estado {
    display: flex;
    gap: 4px;
    margin-bottom: 1rem;
    font-size: 13px;
}

.filtro-estado {
    padding: 6px 12px;
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-soft);
    border: 0.5px solid var(--border);
    font-weight: 500;
    font-size: 12px;
}

.filtro-estado.ativo {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
}

/* =================================================
   LISTA DE TAREFAS
   ================================================= */

.lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tarefa {
    background: var(--surface);
    border: 0.5px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    transition: border-color 0.15s ease;
}
.tarefa:hover {
    border-color: var(--border-strong);
}

.tarefa-info {
    flex: 1;
    min-width: 0;
}

.tarefa-texto {
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
}

.tarefa-meta {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
    flex-wrap: wrap;
}
.tarefa-meta .id {
    font-family: ui-monospace, "SF Mono", monospace;
}

.tarefa-obs {
    font-size: 11px;
    color: var(--warn);
    margin-top: 6px;
    padding: 4px 8px;
    background: var(--warn-bg);
    border-radius: 6px;
    display: inline-block;
}

.acoes {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.btn-acao {
    background: var(--surface-soft);
    border: 0.5px solid var(--border);
    border-radius: 8px;
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-soft);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}
.btn-acao:hover { transform: translateY(-1px); }
.btn-acao.concluir:hover {
    background: var(--success-bg);
    color: var(--success);
    border-color: var(--success);
}
.btn-acao.descartar:hover {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: var(--danger);
}
.btn-acao.foco:hover {
    background: rgba(239, 158, 28, 0.15);
    color: #c87a0e;
    border-color: #d6822e;
}

.btn-acao.reabrir:hover {
    background: rgba(96, 165, 250, 0.15);
    color: var(--accent-dark);
    border-color: var(--accent);
}

@media (prefers-color-scheme: dark) {
    .btn-acao.foco:hover {
        background: rgba(214, 130, 46, 0.2);
        color: #fbbf24;
    }
    .btn-acao.reabrir:hover {
        background: rgba(133, 183, 235, 0.15);
        color: #B5D4F4;
    }
}

form:not(.criar-form) { display: inline; margin: 0; }

.vazio {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    background: var(--surface);
    border-radius: 10px;
    border: 0.5px dashed var(--border);
}

/* =================================================
   PÁGINA "EM CONSTRUÇÃO"
   ================================================= */

/* =================================================
   PÁGINA DE CONFIGURAÇÃO
   ================================================= */

.config-secoes {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 640px;
}

.config-secao-titulo {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.config-card {
    background: var(--surface);
    border: 0.5px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.config-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
}

.config-item + .config-item {
    border-top: 0.5px solid var(--border);
}

.config-item-nome {
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 2px;
}

.config-item-desc {
    font-size: 13px;
    color: var(--text-muted);
}

/* Toggle switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--border-strong);
    border-radius: 24px;
    transition: background 0.2s ease;
}

.toggle-slider::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--accent);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

/* =================================================
   EM CONSTRUÇÃO
   ================================================= */

.em-construcao {
    background: var(--surface);
    border: 0.5px dashed var(--border-strong);
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
}
.em-construcao .icone {
    font-size: 48px;
    margin-bottom: 12px;
}
.em-construcao h2 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 6px;
}
.em-construcao p {
    color: var(--text-soft);
    font-size: 14px;
}

/* =================================================
   RESPONSIVO
   ================================================= */

@media (max-width: 720px) {

}

/* =================================================
   DASHBOARD
   ================================================= */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 1100px) {
    .dashboard-grid { grid-template-columns: 1fr; }
}

.dashboard-card {
    background: var(--surface);
    border: 0.5px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
}

.dashboard-card .card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
}

.dashboard-card .card-subtitle {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.dashboard-card .chart-container {
    position: relative;
    height: 240px;
}

.dashboard-card.full {
    grid-column: 1 / -1;
}

.dashboard-card.full .chart-container {
    height: 200px;
}

.lista-datas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 1100px) {
    .lista-datas { grid-template-columns: 1fr; }
}

.tarefa-data-item {
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--surface-soft);
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

.tarefa-data-item .data-tag {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    background: var(--surface);
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.tarefa-data-item .texto-resumo {
    color: var(--text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.lista-vazia {
    padding: 1.5rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    font-style: italic;
}

/* =================================================
   BOTÃO PRIMÁRIO + FORM CRIAR
   ================================================= */

.btn-primario {
    background: var(--accent);
    color: white;
    border: 0;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    text-decoration: none;
}

.btn-primario:hover {
    background: var(--accent-dark);
    transform: translateY(-1px);
}

@media (prefers-color-scheme: dark) {
    .btn-primario {
        background: var(--accent);
        color: var(--bg);
    }
    .btn-primario:hover {
        background: var(--accent-dark);
        color: var(--bg);
    }
}

.btn-secundario {
    background: var(--surface-soft);
    color: var(--text-soft);
    border: 0.5px solid var(--border);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}

.btn-secundario:hover {
    background: var(--surface);
    color: var(--text);
}

.btn-danger {
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.3);
}

.btn-danger:hover {
    background: var(--danger-bg);
    border-color: #dc2626;
    color: #dc2626;
}

/* Header com ação */
.page-header-com-acao {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-header-com-acao .page-header {
    margin-bottom: 0;
}

/* Form de criação */
/* link de breadcrumb sutil (ex: ← Projetos, ← Hoje) */
.breadcrumb-link {
    display: inline-block;
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 4px;
}

.breadcrumb-link:hover {
    color: var(--text-soft);
}

/* hint abaixo de campos de formulário */
.form-hint {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-muted);
}

.criar-form {
    background: var(--surface);
    border: 0.5px solid var(--accent);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(55, 138, 221, 0.08);
}

.criar-form .form-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.criar-form .form-grupo {
    margin-bottom: 12px;
}

.criar-form textarea,
.criar-form select,
.criar-form input[type="text"],
.criar-form input[type="date"],
.criar-form input[type="email"],
.criar-form input[type="number"] {
    width: 100%;
    background: var(--bg);
    border: 0.5px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--text);
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.15s ease;
}

.criar-form textarea:focus,
.criar-form select:focus,
.criar-form input[type="text"]:focus,
.criar-form input[type="date"]:focus,
.criar-form input[type="email"]:focus,
.criar-form input[type="number"]:focus {
    outline: none;
    border-color: var(--accent);
}

.criar-form textarea {
    min-height: 70px;
    line-height: 1.5;
}

.criar-form .form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}

/* Estado fechado / aberto */
.criar-form.fechado {
    display: none;
}


/* =================================================
   DROPDOWN MUDAR ÁREA
   ================================================= */

.btn-mudar-area {
    background: var(--surface-soft);
    border: 0.5px solid var(--border);
    border-radius: 8px;
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-soft);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-mudar-area:hover {
    background: var(--surface);
    color: var(--text);
    transform: translateY(-1px);
    border-color: var(--accent);
}

.area-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.area-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--surface);
    border: 0.5px solid var(--border);
    border-radius: 10px;
    padding: 6px;
    min-width: 200px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    z-index: 100;
    display: none;
    max-height: 400px;
    overflow-y: auto;
}

.area-dropdown.aberto {
    display: block;
}

.area-dropdown .dropdown-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 6px 10px 4px;
    font-weight: 600;
}

.area-dropdown button {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 7px 10px;
    text-align: left;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    transition: background 0.12s ease;
}

.area-dropdown button:hover {
    background: var(--surface-soft);
}

.area-dropdown button.atual {
    background: var(--accent-bg);
    color: var(--accent-dark);
    font-weight: 600;
}

.area-dropdown hr {
    border: 0;
    border-top: 0.5px solid var(--border);
    margin: 4px 0;
}

/* =================================================
   MENSAGENS DE FEEDBACK (toast)
   ================================================= */

.messages-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 400px;
    pointer-events: none; /* toasts são só visuais — nunca bloqueiam cliques abaixo */
}

.message {
    background: var(--surface);
    border: 0.5px solid var(--border);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--text);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    pointer-events: none; /* explícito: herança de pointer-events não é confiável em HTML */
    animation: slideIn 0.25s ease-out, fadeOut 0.4s ease-out 3.5s forwards;
}

.message-success {
    border-left: 3px solid var(--success);
}

.message-warning {
    border-left: 3px solid var(--warn);
}

.message-error {
    border-left: 3px solid var(--danger);
}

@keyframes slideIn {
    from { transform: translateX(120%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
    to { opacity: 0; transform: translateY(-10px); }
}

/* =================================================
   BADGE DE ÁREA (usado em tarefas)
   ================================================= */

.badge-area {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    background: var(--surface-soft);
    border: 0.5px solid var(--border);
}

.badge-cat-profissional {
    background: #e0eaff;
    color: #1e40af;
    border-color: rgba(30, 64, 175, 0.2);
}

.badge-cat-pessoal {
    background: #e7f5ec;
    color: #15803d;
    border-color: rgba(21, 128, 61, 0.2);
}

.badge-cat-sistema {
    background: #f0f0ef;
    color: #57534e;
    border-color: rgba(87, 83, 78, 0.2);
}

@media (prefers-color-scheme: dark) {
    .badge-cat-profissional {
        background: rgba(96, 165, 250, 0.15);
        color: #93c5fd;
        border-color: rgba(96, 165, 250, 0.3);
    }
    .badge-cat-pessoal {
        background: rgba(74, 222, 128, 0.15);
        color: #86efac;
        border-color: rgba(74, 222, 128, 0.3);
    }
    .badge-cat-sistema {
        background: rgba(168, 162, 158, 0.15);
        color: #d6d3d1;
        border-color: rgba(168, 162, 158, 0.3);
    }
}

/* =================================================
   FILTROS DE ÁREA — CHIPS HORIZONTAIS
   ================================================= */

.filtros-area {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 0.5px solid var(--border);
}

.chip-area {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-soft);
    background: var(--surface);
    border: 0.5px solid var(--border);
    text-decoration: none;
    transition: all 0.15s ease;
    cursor: pointer;
}

.chip-area:hover {
    background: var(--surface-soft);
    color: var(--text);
    transform: translateY(-1px);
}

.chip-area .chip-count {
    background: rgba(0,0,0,0.05);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.chip-area.ativo {
    background: var(--text);
    color: var(--surface);
    border-color: var(--text);
}

.chip-area.ativo .chip-count {
    background: rgba(255,255,255,0.15);
    color: var(--surface);
}

/* Cores sutis por categoria (não-ativo) */
.chip-area.chip-cat-profissional {
    background: #e7eefa;
    color: #1e40af;
    border-color: rgba(30, 64, 175, 0.15);
}
.chip-area.chip-cat-profissional .chip-count {
    background: rgba(30, 64, 175, 0.1);
    color: #1e40af;
}

.chip-area.chip-cat-pessoal {
    background: #e9f3ec;
    color: #166534;
    border-color: rgba(22, 101, 52, 0.15);
}
.chip-area.chip-cat-pessoal .chip-count {
    background: rgba(22, 101, 52, 0.1);
    color: #166534;
}

.chip-area.chip-cat-sistema {
    background: #f3f1ee;
    color: #57534e;
    border-color: rgba(87, 83, 78, 0.15);
}
.chip-area.chip-cat-sistema .chip-count {
    background: rgba(87, 83, 78, 0.1);
    color: #57534e;
}

/* Quando ativo, mantém destaque escuro independente de categoria */
.chip-area.chip-cat-profissional.ativo,
.chip-area.chip-cat-pessoal.ativo,
.chip-area.chip-cat-sistema.ativo {
    background: var(--text);
    color: var(--surface);
    border-color: var(--text);
}

@media (prefers-color-scheme: dark) {
    .chip-area.chip-cat-profissional {
        background: rgba(96, 165, 250, 0.1);
        color: #93c5fd;
        border-color: rgba(96, 165, 250, 0.2);
    }
    .chip-area.chip-cat-profissional .chip-count {
        background: rgba(96, 165, 250, 0.15);
        color: #93c5fd;
    }
    .chip-area.chip-cat-pessoal {
        background: rgba(74, 222, 128, 0.1);
        color: #86efac;
        border-color: rgba(74, 222, 128, 0.2);
    }
    .chip-area.chip-cat-pessoal .chip-count {
        background: rgba(74, 222, 128, 0.15);
        color: #86efac;
    }
    .chip-area.chip-cat-sistema {
        background: rgba(168, 162, 158, 0.1);
        color: #d6d3d1;
        border-color: rgba(168, 162, 158, 0.2);
    }
    .chip-area.chip-cat-sistema .chip-count {
        background: rgba(168, 162, 158, 0.15);
        color: #d6d3d1;
    }
    .chip-area.ativo,
    .chip-area.chip-cat-profissional.ativo,
    .chip-area.chip-cat-pessoal.ativo,
    .chip-area.chip-cat-sistema.ativo {
        background: var(--surface);
        color: var(--bg);
        border-color: var(--surface);
    }
}

/* =================================================
   PÁGINA HOJE — SEÇÕES
   ================================================= */

.hoje-secao {
    margin-bottom: 1.75rem;
}

.hoje-secao:last-child {
    margin-bottom: 0;
}

.secao-titulo {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.75rem 0;
    padding: 0 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.secao-colapsavel:hover {
    color: var(--text);
}

.secao-chevron {
    font-style: normal;
    font-size: 16px;
    line-height: 1;
    color: var(--text-muted);
    transition: color 0.1s;
    width: 14px;
    text-align: center;
}

.secao-titulo .secao-count {
    background: var(--surface-soft);
    border: 0.5px solid var(--border);
    color: var(--text-soft);
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
}

/* Atrasadas — destaque vermelho */
.secao-atrasadas .secao-titulo {
    color: #dc2626;
}

.secao-atrasadas .secao-count {
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.2);
}

.tarefa-atrasada {
    border-left: 3px solid #dc2626 !important;
    background: rgba(220, 38, 38, 0.02);
}

.data-atrasada {
    color: #dc2626 !important;
    font-weight: 500;
}

/* Calendário — destaque azul */
.secao-calendario .secao-titulo {
    color: var(--accent-dark);
}

.secao-calendario .secao-count {
    background: rgba(55, 138, 221, 0.08);
    color: var(--accent-dark);
    border-color: rgba(55, 138, 221, 0.2);
}

.tarefa-calendario {
    border-left: 3px solid var(--accent) !important;
}

.tarefa-hoje {
    background: rgba(55, 138, 221, 0.04) !important;
    border-left-color: var(--accent-dark) !important;
}

.data-cal {
    color: var(--accent-dark) !important;
    font-weight: 500;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .secao-atrasadas .secao-titulo,
    .data-atrasada {
        color: #fca5a5 !important;
    }
    .secao-atrasadas .secao-count {
        background: rgba(220, 38, 38, 0.15);
        color: #fca5a5;
        border-color: rgba(220, 38, 38, 0.3);
    }
    .tarefa-atrasada {
        border-left: 3px solid #fca5a5 !important;
        background: rgba(220, 38, 38, 0.06);
    }
    .secao-calendario .secao-titulo,
    .data-cal {
        color: #93c5fd !important;
    }
    .secao-calendario .secao-count {
        background: rgba(96, 165, 250, 0.15);
        color: #93c5fd;
        border-color: rgba(96, 165, 250, 0.3);
    }
}

/* =================================================
   PROJETOS — Cards e Lista
   ================================================= */

.projetos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 1rem;
    grid-auto-rows: 1fr;
    align-items: stretch;
}

.projeto-card {
    background: var(--surface);
    border: 0.5px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
    text-decoration: none;
    color: var(--text);
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.projeto-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.projeto-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.projeto-nome {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    line-height: 1.3;
    flex: 1;
}

.projeto-descricao {
    font-size: 13px;
    color: var(--text-soft);
    line-height: 1.45;
}

/* ============================================================
   Card de projeto — clicável via data-href (div, não <a>)
   pra permitir links de sub-projetos dentro
   ============================================================ */
.projeto-card[data-href] {
    cursor: pointer;
}

.projeto-card[data-href]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-color: var(--accent);
}

/* Linha de metadados (sub-projeto de X, contém N sub-projetos) */
.projeto-meta-linha {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

/* Lista de sub-projetos dentro do card-pai */
.projeto-sub-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.projeto-sub-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-soft);
    font-size: 13px;
    transition: background 0.12s ease, color 0.12s ease;
}

.projeto-sub-item:hover {
    background: var(--surface-soft);
    color: var(--text);
}

.projeto-sub-nome {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.projeto-sub-prog {
    flex-shrink: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.projeto-sub-pct {
    font-weight: 600;
    color: var(--text-soft);
}

.projeto-sub-frac {
    margin-left: 2px;
    opacity: 0.75;
}

.projeto-tarefa-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.projeto-tarefa-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-soft);
    font-size: 13px;
    transition: background 0.12s ease, color 0.12s ease;
}

.projeto-tarefa-item:hover {
    background: var(--surface-soft);
    color: var(--text);
}

.projeto-tarefa-texto {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.projeto-tarefa-data {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.form-inline {
    display: inline;
    margin: 0;
}

.projeto-sub-mais {
    padding: 4px 8px;
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

.projeto-sub-toggle {
    list-style: none;
    padding: 4px 8px 0;
}

.btn-sub-expandir {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--surface-soft);
    border: 0.5px solid var(--border-strong);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-soft);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.btn-sub-expandir:hover {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent-dark);
}

.banner-finalizacao {
    background: linear-gradient(135deg, var(--success-bg), var(--surface));
    border: 1px solid var(--accent);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.banner-finalizacao-texto {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.banner-finalizacao-texto strong {
    font-size: 16px;
    color: var(--text);
}

.banner-finalizacao-texto span {
    font-size: 13px;
    color: var(--text-soft);
}

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

.captura-projeto {
    margin: 1.5rem 0;
}

.captura-rapida-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.captura-rapida-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
}

.captura-rapida-input:focus {
    outline: none;
    border-color: var(--accent);
}

.btn-link {
    background: transparent;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: 13px;
    padding: 4px 8px;
    font-family: inherit;
    white-space: nowrap;
}

.btn-link:hover {
    text-decoration: underline;
}

.projeto-descricao-full {
    background: var(--surface-soft);
    border-left: 3px solid var(--accent);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-soft);
    line-height: 1.55;
    margin-bottom: 1rem;
}

.projeto-progresso {
    margin-top: auto;
}

.projeto-progresso-grande {
    margin-bottom: 1.25rem;
}

.progresso-bar {
    height: 6px;
    background: var(--surface-soft);
    border: 0.5px solid var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.progresso-bar.large {
    height: 10px;
    border-radius: 5px;
}

.progresso-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-dark) 100%);
    transition: width 0.4s ease;
}

.progresso-info {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 6px;
}

.progresso-pct {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-dark);
}

.progresso-detalhe {
    font-size: 11px;
    color: var(--text-muted);
}

/* =================================================
   BADGE DE PROJETO em tarefa
   ================================================= */

.badge-projeto {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 500;
    color: var(--accent-dark);
    background: rgba(55, 138, 221, 0.08);
    border: 0.5px solid rgba(55, 138, 221, 0.2);
    text-decoration: none;
    transition: all 0.15s ease;
}

.badge-projeto:hover {
    background: rgba(55, 138, 221, 0.15);
    border-color: var(--accent);
}

/* Quando o badge de projeto tem categoria: cor da categoria prevalece (especificidade dupla) */
.badge-projeto.badge-cat-profissional {
    background: #e0eaff;
    color: #1e40af;
    border-color: rgba(30, 64, 175, 0.2);
}
.badge-projeto.badge-cat-pessoal {
    background: #e7f5ec;
    color: #15803d;
    border-color: rgba(21, 128, 61, 0.2);
}
.badge-projeto.badge-cat-sistema {
    background: #f0f0ef;
    color: #57534e;
    border-color: rgba(87, 83, 78, 0.2);
}

/* Ícone de tipo antes do texto */
.tarefa-tipo-icone {
    opacity: 0.55;
    font-size: 13px;
    margin-right: 4px;
    vertical-align: -1px;
    flex-shrink: 0;
}

@media (prefers-color-scheme: dark) {
    .badge-projeto {
        background: rgba(96, 165, 250, 0.12);
        color: #93c5fd;
        border-color: rgba(96, 165, 250, 0.25);
    }
    .badge-projeto:hover {
        background: rgba(96, 165, 250, 0.2);
    }
    .badge-projeto.badge-cat-profissional {
        background: rgba(96, 165, 250, 0.15);
        color: #93c5fd;
        border-color: rgba(96, 165, 250, 0.3);
    }
    .badge-projeto.badge-cat-pessoal {
        background: rgba(74, 222, 128, 0.15);
        color: #86efac;
        border-color: rgba(74, 222, 128, 0.3);
    }
    .badge-projeto.badge-cat-sistema {
        background: rgba(168, 162, 158, 0.15);
        color: #d6d3d1;
        border-color: rgba(168, 162, 158, 0.3);
    }
}

/* =================================================
   PRA HOJE — destaque laranja/quente
   ================================================= */

.secao-pra-hoje .secao-titulo {
    color: #c87a0e;
}

.secao-pra-hoje .secao-count {
    background: rgba(239, 158, 28, 0.1);
    color: #c87a0e;
    border-color: rgba(239, 158, 28, 0.25);
}

.tarefa-pra-hoje {
    border-left: 3px solid #ef9e1c !important;
    background: rgba(239, 158, 28, 0.03);
}

@media (prefers-color-scheme: dark) {
    .secao-pra-hoje .secao-titulo {
        color: #fbbf24;
    }
    .secao-pra-hoje .secao-count {
        background: rgba(251, 191, 36, 0.15);
        color: #fbbf24;
        border-color: rgba(251, 191, 36, 0.3);
    }
    .tarefa-pra-hoje {
        border-left: 3px solid #fbbf24 !important;
        background: rgba(251, 191, 36, 0.05);
    }
}

/* =================================================
   INDICADOR VISUAL DE PROXIMIDADE DE DATA
   ================================================= */

.tarefa-prox-atrasada {
    border-left: 3px solid #dc2626 !important;
    background: rgba(220, 38, 38, 0.02);
}

.tarefa-prox-hoje_amanha {
    border-left: 3px solid #ef9e1c !important;
    background: rgba(239, 158, 28, 0.02);
}

.tarefa-prox-proxima {
    border-left: 3px solid #16a34a !important;
}

.tarefa-prox-futura {
    border-left: 3px solid var(--accent) !important;
}

@media (prefers-color-scheme: dark) {
    .tarefa-prox-atrasada {
        border-left: 3px solid #fca5a5 !important;
        background: rgba(220, 38, 38, 0.06);
    }
    .tarefa-prox-hoje_amanha {
        border-left: 3px solid #fbbf24 !important;
        background: rgba(251, 191, 36, 0.05);
    }
    .tarefa-prox-proxima {
        border-left: 3px solid #4ade80 !important;
    }
    .tarefa-prox-futura {
        border-left: 3px solid #93c5fd !important;
    }
}

/* =================================================
   HOJE — MÉTRICAS STRIP
   ================================================= */

.metricas-strip {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--surface);
    border: 0.5px solid var(--border);
    border-radius: 12px;
    padding: 12px 20px;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 8px;
}

.metrica-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 0 16px;
}

.metrica-item:first-child {
    padding-left: 0;
}

.metrica-num {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}

.metrica-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.metrica-alerta .metrica-num {
    color: #dc2626;
}

.metrica-alerta .metrica-label {
    color: #dc2626;
}

.metrica-divider {
    width: 1px;
    height: 28px;
    background: var(--border);
    flex-shrink: 0;
}

@media (prefers-color-scheme: dark) {
    .metrica-alerta .metrica-num,
    .metrica-alerta .metrica-label {
        color: #fca5a5;
    }
}

/* =================================================
   HOJE — AGORA CARD
   ================================================= */

.agora-card {
    border-radius: 14px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.agora-ativo {
    background: var(--surface);
    border: 2px solid var(--accent);
    box-shadow: 0 2px 16px rgba(55, 138, 221, 0.12);
}

.agora-vazio {
    background: var(--surface);
    border: 1.5px dashed var(--border-strong);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 2rem 1.5rem;
    text-align: center;
}

.agora-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.agora-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
}

.agora-timer {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, "SF Mono", monospace;
    background: var(--surface-soft);
    border: 0.5px solid var(--border);
    padding: 3px 10px;
    border-radius: 6px;
}

.agora-texto {
    font-size: 18px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.45;
    margin-bottom: 16px;
}

.agora-rodape {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.agora-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.agora-id {
    font-size: 11px;
    color: var(--text-muted);
    font-family: ui-monospace, "SF Mono", monospace;
}

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

.agora-vazio-icone {
    font-size: 32px;
    color: var(--text-muted);
    line-height: 1;
}

.agora-vazio-texto {
    font-size: 15px;
    color: var(--text-soft);
    font-weight: 500;
    margin: 0;
}

.agora-vazio-hint {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.btn-iniciar-agora {
    background: var(--accent);
    color: white;
    border: 0;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    max-width: 500px;
    text-align: left;
    line-height: 1.4;
}

.btn-iniciar-agora:hover {
    background: var(--accent-dark);
    transform: translateY(-1px);
}

@media (prefers-color-scheme: dark) {
    .agora-ativo {
        box-shadow: 0 2px 16px rgba(55, 138, 221, 0.08);
    }
    .btn-iniciar-agora {
        color: var(--bg);
    }
    .btn-iniciar-agora:hover {
        color: var(--bg);
    }
}

/* =================================================
   HOJE — PRÓXIMA NA FILA
   ================================================= */

.proxima-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface-soft);
    border: 0.5px solid var(--border);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.proxima-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    flex-shrink: 0;
}

.proxima-texto {
    font-size: 14px;
    color: var(--text-soft);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =================================================
   HOJE — CAPTURA INLINE
   ================================================= */

.captura-inline-form {
    margin-bottom: 1.5rem;
}

.captura-input-wrapper {
    position: relative;
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

/* =================================================
   SLASH COMMANDS — menu autocomplete
   ================================================= */

.slash-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    z-index: 200;
    overflow: hidden;
}

.slash-menu.aberto {
    display: block;
}

.slash-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    border-bottom: 0.5px solid var(--border);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.1s;
}

.slash-item:last-child {
    border-bottom: none;
}

.slash-item:hover,
.slash-item[aria-selected="true"] {
    background: var(--surface-soft);
}

.slash-cmd {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    min-width: 120px;
}

.slash-desc {
    font-size: 12px;
    color: var(--text-muted);
}

@media (prefers-color-scheme: dark) {
    .slash-menu {
        box-shadow: 0 4px 20px rgba(0,0,0,0.35);
    }
}

.captura-input-wrapper input[type="text"] {
    flex: 1;
    background: var(--surface);
    border: 0.5px solid var(--border-strong);
    border-radius: 10px;
    padding: 11px 16px;
    font-size: 14px;
    color: var(--text);
    font-family: inherit;
    transition: border-color 0.15s ease;
}

.captura-input-wrapper input[type="text"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(55, 138, 221, 0.1);
}

.captura-btn {
    background: var(--accent);
    color: white;
    border: 0;
    border-radius: 10px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.captura-btn:hover {
    background: var(--accent-dark);
    transform: translateY(-1px);
}

.captura-hints {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.hint-chip {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--surface);
    border: 0.5px solid var(--border);
    border-radius: 5px;
    padding: 3px 9px;
}

.hint-chip code {
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 11px;
    color: var(--accent-dark);
    background: none;
}

@media (prefers-color-scheme: dark) {
    .captura-btn {
        color: var(--bg);
    }
    .captura-btn:hover {
        color: var(--bg);
    }
    .hint-chip code {
        color: var(--accent);
    }
}

/* =================================================
   HOJE — MODAL CONCLUIR AGORA
   ================================================= */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 500;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-box {
    background: var(--surface);
    border: 0.5px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem;
    max-width: 520px;
    width: 100%;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modal-titulo {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

.modal-candidata {
    width: 100%;
    background: var(--surface-soft);
    border: 0.5px solid var(--border);
    border-radius: 10px;
    padding: 11px 14px;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    transition: all 0.15s ease;
}

.modal-candidata:hover {
    background: rgba(55, 138, 221, 0.08);
    border-color: var(--accent);
}

.modal-candidata-icone {
    font-size: 13px;
    color: var(--accent);
    flex-shrink: 0;
}

.modal-candidata-texto {
    font-size: 14px;
    color: var(--text);
    flex: 1;
    line-height: 1.4;
}

.modal-candidata-data {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    background: var(--surface);
    border: 0.5px solid var(--border);
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.modal-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

.modal-vazio {
    width: 100%;
    background: transparent;
    border: 0.5px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-soft);
    text-align: left;
    transition: all 0.15s ease;
}

.modal-vazio:hover {
    background: var(--surface-soft);
    color: var(--text);
}

.modal-cancelar {
    background: transparent;
    border: 0;
    padding: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-muted);
    align-self: center;
    transition: color 0.15s ease;
}

.modal-cancelar:hover {
    color: var(--text);
}

.modal-sem-candidatas {
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    padding: 8px;
}

/* =================================================
   HOJE — TAREFAS COM PRIORIDADE
   ================================================= */

.tarefa-urgente {
    border-left: 3px solid #dc2626 !important;
}

.tarefa-alta {
    border-left: 3px solid #ef9e1c !important;
}

/* =================================================
   HOJE — REFINAMENTOS VISUAIS NAS SEÇÕES
   ================================================= */

/* Divisor entre seções — escopo restrito ao dashboard Hoje */
.dashboard-hoje .hoje-secao + .hoje-secao {
    border-top: 0.5px solid var(--border);
    padding-top: 1.75rem;
    margin-top: 0.25rem;
}

/* Gap maior entre cards */
.hoje-secao .lista {
    gap: 10px;
}

/* Cards com mais respiro */
.hoje-secao .tarefa {
    padding: 16px 20px;
    gap: 20px;
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

/* Hover com elevação sutil */
.hoje-secao .tarefa:hover {
    background: var(--surface-soft);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
    transform: translateY(-1px);
    border-color: var(--border-strong);
}

/* Texto da tarefa mais destacado */
.hoje-secao .tarefa-texto {
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.45;
}

/* Wrapper título + chip data em linha */
.tarefa-principal {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

/* Meta mais discreta */
.hoje-secao .tarefa-meta {
    margin-top: 0;
    gap: 8px;
}

/* #ID ultra discreto */
.hoje-secao .id {
    font-size: 10px;
    opacity: 0.38;
    font-family: ui-monospace, "SF Mono", monospace;
}

/* Botões com mais área de clique */
.hoje-secao .btn-acao {
    padding: 7px 13px;
    font-size: 12px;
    white-space: nowrap;
}

/* Chip de data colorido (inline com o título) */
.chip-data {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 5px;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
}

.chip-data-atrasada {
    background: var(--danger-bg);
    color: var(--danger);
}

.chip-data-hoje_amanha {
    background: var(--warn-bg);
    color: var(--warn);
}

.chip-data-proxima {
    background: var(--success-bg);
    color: var(--success);
}

.chip-data-futura {
    background: rgba(55, 138, 221, 0.1);
    color: var(--accent-dark);
}

/* Estado vazio por seção */
.secao-vazio {
    padding: 1.25rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    background: var(--surface-soft);
    border-radius: 8px;
    border: 0.5px dashed var(--border);
    line-height: 1.5;
}

.secao-vazio a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.secao-vazio-ok {
    color: var(--success);
    border-color: rgba(22, 163, 74, 0.2);
    background: var(--success-bg);
}

@media (prefers-color-scheme: dark) {
    .hoje-secao .tarefa:hover {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    }
    .chip-data-futura {
        background: rgba(133, 183, 235, 0.15);
        color: var(--accent);
    }
    .secao-vazio-ok {
        background: rgba(22, 163, 74, 0.1);
        color: #4ade80;
        border-color: rgba(74, 222, 128, 0.2);
    }
}

/* =================================================
   HÁBITOS / RECORRENTES
   ================================================= */

.badge-recorrencia {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(99, 102, 241, 0.1);
    color: #4f46e5;
    border: 0.5px solid rgba(99, 102, 241, 0.25);
}

.chip-hora {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(55, 138, 221, 0.1);
    color: var(--accent-dark);
    border: 0.5px solid rgba(55, 138, 221, 0.2);
    white-space: nowrap;
}

/* Card concluído hoje — fundo verde suave */
.tarefa-recorrente-ok {
    opacity: 0.75;
    background: rgba(22, 163, 74, 0.04);
    border-color: rgba(22, 163, 74, 0.2);
}

.tarefa-recorrente-ok .tarefa-texto {
    text-decoration: line-through;
    color: var(--text-muted);
}

@media (prefers-color-scheme: dark) {
    .badge-recorrencia {
        background: rgba(129, 140, 248, 0.15);
        color: #a5b4fc;
        border-color: rgba(129, 140, 248, 0.3);
    }
    .chip-hora {
        background: rgba(55, 138, 221, 0.15);
        color: #93c5fd;
    }
    .tarefa-recorrente-ok {
        background: rgba(22, 163, 74, 0.08);
        border-color: rgba(74, 222, 128, 0.2);
    }
}

/* PÁGINA HÁBITOS */
.habitos-lista { display: flex; flex-direction: column; gap: 16px; }

.habito-card {
    background: var(--surface);
    border: 0.5px solid var(--border);
    border-radius: 14px;
    padding: 20px 24px;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.habito-card:hover {
    box-shadow: 0 3px 12px rgba(0,0,0,0.07);
    border-color: var(--border-strong);
}
.habito-feito-hoje {
    border-left: 3px solid var(--success);
    background: linear-gradient(90deg, rgba(22,163,74,0.04) 0%, transparent 80%);
}
.habito-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.habito-nome {
    font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 8px;
}
.habito-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.habito-acao { flex-shrink: 0; }
.habito-nao-hoje { font-size: 12px; color: var(--text-muted); }

/* Mini gráfico 4 semanas */
.habito-semanas {
    display: flex; gap: 10px; margin-bottom: 16px;
    padding-bottom: 16px; border-bottom: 0.5px solid var(--border);
}
.semana-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.semana-barra-wrap {
    width: 100%; height: 56px; display: flex; align-items: flex-end;
    background: var(--surface-soft); border-radius: 4px; overflow: hidden;
}
.semana-barra { width: 100%; background: var(--accent); min-height: 3px; }
.semana-perfeita { background: var(--success); }
.semana-sem-dados { background: var(--border); opacity: 0.4; }
.semana-col-1 .semana-barra:not(.semana-sem-dados) { opacity: 0.3; }
.semana-col-2 .semana-barra:not(.semana-sem-dados) { opacity: 0.5; }
.semana-col-3 .semana-barra:not(.semana-sem-dados) { opacity: 0.7; }
.semana-col-4 .semana-barra:not(.semana-sem-dados) { opacity: 1; }
.semana-label {
    font-size: 10px; color: var(--text-muted); text-align: center;
    text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500;
}
.semana-col-4 .semana-label { color: var(--text-soft); font-weight: 700; }
.semana-num { font-size: 11px; font-weight: 700; color: var(--text-soft); text-align: center; }

/* Stats base do card */
.habito-stats { display: flex; align-items: center; gap: 20px; }
.stat-habito { display: flex; flex-direction: column; gap: 2px; }
.stat-habito-num { font-size: 20px; font-weight: 700; color: var(--text); line-height: 1; }
.stat-habito-de { font-size: 14px; font-weight: 400; color: var(--text-muted); }
.stat-habito-pct { font-size: 13px; color: var(--text-muted); }
.stat-habito-label {
    font-size: 10px; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.stat-habito-sep { width: 1px; height: 32px; background: var(--border); flex-shrink: 0; }

@media (prefers-color-scheme: dark) {
    .habito-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.3); }
    .habito-feito-hoje { background: linear-gradient(90deg, rgba(22,163,74,0.08) 0%, transparent 80%); }
}

/* =================================================
   PROJETO CARD — wrapper + menu de status (⋯)  [REMOVIDO 2026-08-11]
   =================================================
   O bloco inteiro (~138 linhas: .projeto-card-wrapper, .projeto-card-wrapper-inner,
   .btn-projeto-menu, .projeto-status-dropdown e seus filhos, .dropdown-divisor,
   .dropdown-item-danger) saiu no passo 4 do funil.

   Ele estilizava o `includes/projeto_card.html` + `projeto_status_menu.html`, que
   morreram junto com o campo `status`. Conferido nos dois sentidos: nenhum template
   vivo emite essas classes. O card de projeto de hoje é o `_card_projeto.html`, com
   estilo próprio mais abaixo.

   ⚠️ `.projeto-card` (sem o wrapper) NÃO saiu — é classe de outro lugar.
   ================================================= */

/* =================================================
   WIDGET HÁBITOS — Dashboard
   ================================================= */

.habito-widget-card { margin-top: 0; }

.habito-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.habito-widget-link {
    font-size: 12px;
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}
.habito-widget-link:hover { text-decoration: underline; }

.habito-widget-lista { display: flex; flex-direction: column; gap: 10px; }

.habito-widget-row {
    display: grid;
    grid-template-columns: 1fr 120px 48px;
    align-items: center;
    gap: 12px;
}

.habito-widget-nome {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.habito-widget-barra-wrap {
    height: 6px;
    background: var(--surface-soft);
    border-radius: 99px;
    overflow: hidden;
}

.habito-widget-barra {
    height: 100%;
    background: var(--accent);
    border-radius: 99px;
    transition: width 0.4s ease;
    min-width: 3px;
}
.habito-widget-barra.barra-perfeita { background: var(--success); }

.habito-widget-nums {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: right;
}
.habito-widget-nums .num-perfeito { color: var(--success); }

/* =================================================
   MINI-BAR — Card recorrente em /hoje/
   ================================================= */

.mini-bar {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    vertical-align: middle;
}

.mini-dia {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

.mini-dia-off      { background: var(--border); opacity: 0.35; }
.mini-dia-pendente { background: transparent; border: 1.5px solid var(--border-strong); }
.mini-dia-ok       { background: var(--success); }

/* anel extra no dia de hoje */
.mini-dia-hoje { outline: 1.5px solid var(--accent); outline-offset: 1px; }

@media (prefers-color-scheme: dark) {
    .mini-dia-off { opacity: 0.25; }
}


/* =================================================
   EDITAR TAREFA — página /tarefa/<id>/editar/
   ================================================= */

.editar-aviso {
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.35);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-soft);
    margin-bottom: 12px;
}

.editar-info-readonly {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-muted);
    padding: 12px 0;
    border-top: 0.5px solid var(--border);
    margin-top: 4px;
}

/* Botão de editar discreto nos cards de tarefa */
.btn-editar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 13px;
    padding: 4px 8px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    white-space: nowrap;
}
.btn-editar:hover {
    background: var(--surface-soft);
    color: var(--text);
    border-color: var(--border-strong);
}

@media (prefers-color-scheme: dark) {
    .editar-aviso {
        background: rgba(234, 179, 8, 0.08);
        border-color: rgba(234, 179, 8, 0.25);
    }
}


/* =================================================
   TIMELINE — página /timeline/
   ================================================= */

.timeline-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    font-size: 13px;
}

.timeline-nav-btn {
    color: var(--accent);
    text-decoration: none;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: background 0.12s;
}
.timeline-nav-btn:hover { background: var(--surface-soft); }
.timeline-nav-btn.disabled { color: var(--text-muted); pointer-events: none; border-color: var(--border); }

.timeline-nav-data {
    font-weight: 600;
    color: var(--text);
}

.timeline-hoje-badge {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 99px;
    margin-left: 6px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Totais do dia */
.timeline-totais {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--surface);
    border: 0.5px solid var(--border);
    border-radius: 12px;
    padding: 14px 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 8px;
}

.timeline-total-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0 16px;
}

.timeline-total-num {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}

.timeline-total-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.timeline-total-sep {
    width: 1px;
    height: 32px;
    background: var(--border);
    flex-shrink: 0;
}

/* Lista de sessões */
.timeline-lista {
    display: flex;
    flex-direction: column;
}

.timeline-item {
    display: flex;
    gap: 0;
    min-height: 56px;
}

.timeline-item-micro { opacity: 0.6; }

/* Fio vertical */
.timeline-fio {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 28px;
    flex-shrink: 0;
    padding-top: 4px;
}

.timeline-bolinha {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-strong);
    flex-shrink: 0;
    z-index: 1;
}

.bolinha-ativa {
    background: var(--accent);
    box-shadow: 0 0 0 3px rgba(94, 114, 228, 0.2);
}

.timeline-linha {
    width: 2px;
    flex: 1;
    background: var(--border);
    margin: 4px 0;
}

/* Conteúdo da sessão */
.timeline-conteudo {
    flex: 1;
    padding: 0 0 20px 12px;
}

.timeline-horario {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.timeline-inicio { font-weight: 600; color: var(--text-soft); }
.timeline-seta { opacity: 0.4; }
.timeline-fim { font-weight: 500; }
.timeline-em-andamento { color: var(--accent); font-weight: 600; }

.timeline-duracao {
    margin-left: 4px;
    font-weight: 700;
    color: var(--text);
    background: var(--surface-soft);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
}

.timeline-micro-badge {
    font-size: 9px;
    background: rgba(234, 179, 8, 0.15);
    color: #b45309;
    border-radius: 4px;
    padding: 1px 5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.timeline-tarefa-texto { margin-bottom: 6px; }

.timeline-tarefa-link {
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
}
.timeline-tarefa-link:hover { text-decoration: underline; color: var(--accent); }

.timeline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.timeline-motivo {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
}
.timeline-motivo-concluida { background: rgba(22,163,74,0.1); color: #15803d; }
.timeline-motivo-pausada { background: rgba(234,179,8,0.1); color: #b45309; }
.timeline-motivo-trocada { background: rgba(59,130,246,0.1); color: #1d4ed8; }
.timeline-motivo-ativa { background: rgba(94,114,228,0.12); color: var(--accent); }

.timeline-item-ativa .timeline-conteudo {
    border-left: 2px solid var(--accent);
    padding-left: 10px;
    margin-left: 2px;
}

/* =================================================
   WIDGET FOCO DE HOJE — Dashboard
   ================================================= */

.timeline-widget-card { margin-bottom: 0; }

.timeline-widget-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.timeline-widget-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0 16px;
}

.timeline-widget-top {
    align-items: flex-start;
    padding-left: 16px;
}

.timeline-widget-num {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}

.timeline-widget-num-sm {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}

.timeline-widget-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.timeline-widget-sep {
    width: 1px;
    height: 32px;
    background: var(--border);
    flex-shrink: 0;
}

@media (prefers-color-scheme: dark) {
    .timeline-micro-badge { background: rgba(234,179,8,0.08); color: #d97706; }
    .timeline-motivo-concluida { background: rgba(22,163,74,0.08); color: #4ade80; }
    .timeline-motivo-pausada { background: rgba(234,179,8,0.08); color: #fbbf24; }
    .timeline-motivo-trocada { background: rgba(59,130,246,0.08); color: #60a5fa; }
    .timeline-motivo-ativa { background: rgba(94,114,228,0.1); }
}

/* =================================================
   PROJETO EM AGORA — checklist drag-and-drop
   ================================================= */

.agora-projeto {
    border-left: 3px solid var(--accent);
}

.agora-projeto-progresso {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 12px;
}

.agora-projeto-progresso .progresso-bar {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.agora-projeto-progresso .progresso-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.agora-projeto-pct {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.checklist {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 8px 0;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: default;
}

.checklist-item:hover {
    border-color: var(--accent);
}

/* `.projeto-drag-handle` saiu junto (2026-08-11): a alça só aparecia no
   `.projeto-card-wrapper:hover`, e o wrapper morreu com o `projeto_card.html`.
   Sem o wrapper a regra do hover nunca casava — a alça ficaria invisível pra sempre.
   `.drag-handle` (sem o prefixo) é OUTRA classe, viva, logo abaixo. */

.drag-handle {
    cursor: grab;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    user-select: none;
    flex-shrink: 0;
}

.drag-handle:active {
    cursor: grabbing;
}

.sortable-ghost {
    opacity: 0.4;
    background: var(--accent-bg);
}

.checklist-texto {
    flex: 1;
    font-size: 14px;
    color: var(--text);
    line-height: 1.4;
}

.checklist-acoes {
    flex-shrink: 0;
}

.btn-sm {
    padding: 3px 10px;
    font-size: 12px;
    border-radius: 6px;
}

.checklist-vazio {
    text-align: center;
    padding: 16px;
    color: var(--text-muted);
    font-size: 14px;
}

@media (prefers-color-scheme: dark) {
    .checklist-item { background: rgba(255,255,255,0.03); }
    .checklist-item:hover { border-color: var(--accent); }
}

.sub-header-concluidos {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 12px 4px 6px;
    border-top: 1px dashed var(--border);
    margin-top: 8px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =================================================
   PÁGINA HOJE — REDESIGN
   ================================================= */

.hoje-header {
    margin-bottom: 20px;
}

.hoje-titulo {
    font-size: 22px;
    font-weight: 500;
    margin: 0;
}

.hoje-data {
    color: var(--text-muted);
    font-size: 13px;
    margin: 2px 0 0;
    text-transform: lowercase;
}

/* Banner do que está em foco */
.hoje-foco-banner {
    background: var(--surface-soft);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hoje-foco-banner-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.hoje-foco-label {
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.hoje-foco-nome {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hoje-foco-progresso-info {
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.hoje-foco-progresso-bar {
    flex: 1;
    height: 3px;
    background: var(--border);
    border-radius: 2px;
    max-width: 120px;
}

.hoje-foco-progresso-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    opacity: 0.6;
}

.hoje-foco-banner-acoes {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Pills temporais */
.hoje-pills {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
    align-items: center;
    flex-wrap: wrap;
}

.pill {
    font-size: 13px;
    padding: 6px 16px;
    background: transparent;
    border: 0.5px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.pill:hover {
    background: var(--surface-soft);
    color: var(--text);
}

.pill-ativa {
    background: var(--surface);
    border-color: var(--text);
    color: var(--text);
    font-weight: 500;
}

.hoje-capturar-link {
    margin-left: auto;
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
}

.hoje-capturar-link:hover {
    color: var(--text);
}

/* Grid de cards do dia */
.hoje-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.hoje-card {
    background: var(--surface);
    border: 0.5px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, transform 0.15s;
    cursor: pointer;
}

.hoje-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-1px);
}

.hoje-card-alerta {
    border-color: rgba(220, 38, 38, 0.3);
}

.hoje-card-alerta:hover {
    border-color: rgba(220, 38, 38, 0.6);
}

.hoje-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}

.hoje-card-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.hoje-card-count {
    font-size: 11px;
    color: var(--text-muted);
}

.hoje-card-body {
    font-size: 13px;
    flex: 1;
}

.hoje-card-item {
    line-height: 1.4;
}

.hoje-card-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.hoje-card-vazio {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

.hoje-card-footer {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 10px;
    padding-top: 6px;
    border-top: 0.5px solid var(--border);
}

/* Checklist do projeto em foco */
.hoje-checklist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    margin-bottom: 8px;
    border-bottom: 0.5px solid var(--border);
}

.hoje-checklist-titulo {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.hoje-checklist-hint {
    font-size: 11px;
    color: var(--text-muted);
}

.hoje-checklist {
    margin-bottom: 20px;
}

.hoje-checklist-item {
    padding: 10px 12px;
    border-bottom: 0.5px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background 0.15s;
}

.hoje-checklist-item:hover {
    background: var(--surface-soft);
}

.hoje-checklist-drag {
    color: var(--text-muted);
    font-size: 14px;
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
}

.hoje-checklist-drag:active {
    cursor: grabbing;
}

.hoje-checklist-info {
    flex: 1;
    min-width: 0;
}

.hoje-checklist-texto {
    font-size: 13px;
    line-height: 1.4;
}

.hoje-checklist-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    display: flex;
    gap: 4px;
}

.hoje-checklist-acoes {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.hoje-checklist-mais {
    display: block;
    padding: 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    text-decoration: none;
    border-bottom: 0.5px solid var(--border);
}

.hoje-checklist-mais:hover {
    color: var(--text);
}

/* Botão pequeno (banner + checklist) */
.btn-acao-sm {
    font-size: 12px;
    padding: 4px 10px;
    background: transparent;
    border: 0.5px solid var(--border-strong);
    border-radius: 6px;
    cursor: pointer;
    color: var(--text);
    transition: background 0.15s;
}

.btn-acao-sm:hover {
    background: var(--surface-soft);
}

.form-inline {
    display: inline;
}

/* Captura inline */
.hoje-captura {
    margin-top: 20px;
    position: relative;
}

.hoje-captura-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    border: 1.5px solid var(--border-strong);
    border-radius: 10px;
    padding: 0 10px 0 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.hoje-captura-wrapper:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}

.hoje-captura input[type="text"] {
    flex: 1;
    background: transparent;
    border: none;
    font-size: 14px;
    color: var(--text);
    padding: 12px 0;
    outline: none;
    min-width: 0;
}

.hoje-captura input[type="text"]::placeholder {
    color: var(--text-muted);
}

.hoje-captura-submit {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1;
    transition: background 0.12s, color 0.12s;
}

.hoje-captura-submit:hover {
    background: var(--accent-bg);
    color: var(--accent);
}

.hoje-captura-hints {
    margin-top: 6px;
    padding: 0 2px;
    font-size: 11px;
    color: var(--text-muted);
}

.hoje-captura-hints code {
    background: var(--surface-soft);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
}

.form-grupo-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

/* =================================================
   SEÇÃO TRIAR (embutida no Backlog)
   ================================================= */

.triar-secao {
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 1.5rem 0;
}

.triar-secao-header {
    cursor: pointer;
    user-select: none;
    margin-bottom: 12px;
}

.triar-secao-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: var(--text);
    margin: 0;
}

.triar-chevron {
    font-size: 14px;
    color: var(--text-muted);
}

.triar-secao-hint {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
    margin-left: 28px;
}

.triar-lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 1.5rem;
}

.triar-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--surface);
    border: 0.5px solid var(--border);
    border-radius: 8px;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.triar-item:hover {
    background: var(--surface-soft);
    border-color: var(--accent);
}

.triar-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.triar-texto {
    font-size: 14px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.triar-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
}

.triar-data {
    font-variant-numeric: tabular-nums;
}

.triar-acoes {
    flex-shrink: 0;
    display: flex;
    gap: 4px;
    align-items: center;
}

.triar-projeto-wrapper {
    position: relative;
}

.triar-projeto-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    min-width: 240px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.triar-projeto-dropdown.aberto {
    display: block;
}

.triar-projeto-dropdown .dropdown-label {
    padding: 8px 12px 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.triar-projeto-dropdown form button {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}

.triar-projeto-dropdown form button:hover {
    background: var(--accent-bg);
}

.btn-acao.foco {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.2);
}

.btn-acao.foco:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.4);
}

.btn-acao.descartar {
    background: rgba(220, 38, 38, 0.06);
    border-color: rgba(220, 38, 38, 0.2);
    color: #dc2626;
    font-size: 11px;
    font-weight: 700;
}

.btn-acao.descartar:hover {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.4);
}

/* =============================================
   HOJE — redesign 2026-05-21
   ============================================= */

/* === ZONA FOCO === */
.zona-foco { margin: 1.5rem 0; height: 100%; min-height: 0; display: flex; flex-direction: column; }
.zona-foco-card,
.zona-foco-vazia,
.banner-foco-ativo {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.zona-foco-card {
    background: linear-gradient(180deg, rgba(99,102,241,0.10) 0%, rgba(99,102,241,0.03) 100%);
    border: 0.5px solid rgba(99,102,241,0.28);
    border-radius: 16px;
    padding: 24px 28px;
}

.zona-foco-label {
    font-size: 11px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.zona-foco-titulo {
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

.zona-foco-hora {
    font-size: 14px;
    color: var(--text-soft);
    margin-bottom: 12px;
}

.zona-foco-acoes { display: flex; gap: 8px; }

.zona-foco-vazia {
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.zona-foco-vazia small { font-size: 12px; opacity: 0.8; }

/* === BANNER ACONTECENDO AGORA === */
.banner-foco-ativo {
    background: var(--warn-bg);
    border: 2px solid #f59e0b;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    animation: pulse-alerta 2s ease-in-out infinite;
}

@keyframes pulse-alerta {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
    50%       { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
}

.banner-foco-info { display: flex; flex-direction: column; gap: 4px; }

.banner-foco-label {
    font-size: 11px;
    font-weight: 700;
    color: #b45309;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.banner-foco-texto { font-size: 17px; color: var(--text); }

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

/* === GRID 2 COLUNAS === */
.hoje-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

@media (max-width: 700px) {
    .hoje-grid-2col { grid-template-columns: 1fr; }
}

/* === CARDS HOJE === */
.hoje-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
}

.hoje-card-warning {
    border-color: rgba(220, 38, 38, 0.3);
    background: rgba(220, 38, 38, 0.04);
}

.hoje-card-titulo {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-soft);
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* === LISTAS DE TAREFAS === */
.hoje-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hoje-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 8px;
    border-radius: 8px;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
    line-height: 1.4;
}

.hoje-item:last-child { border-bottom: none; }

.hoje-item:hover { background: var(--accent-bg); }

.hoje-item-stack {
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
}

.hoje-item-main {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.hoje-item-sub {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-left: 2px;
}

.hoje-item-data {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.hoje-item-diasemana {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hoje-item-diasfaltam {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}

.hoje-item.acontecendo {
    background: rgba(245, 158, 11, 0.1);
    border-left: 3px solid #f59e0b;
}

.hoje-item-hora {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 40px;
}

.hoje-item-texto {
    flex: 1;
    font-size: 14px;
    color: var(--text);
}

.hoje-item-projeto {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

.hoje-vazio {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    padding: 12px 0;
}

/* === HÁBITOS LINHA === */
.hoje-habitos { margin-bottom: 16px; }

.habitos-linha {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.habito-chip {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 13px;
    color: var(--text-soft);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.habito-chip:hover {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent);
}

.habito-chip.feito {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.4);
    color: #059669;
    text-decoration: line-through;
    opacity: 0.8;
}

/* === BOTÃO ▶ NO FOCO DO DIA === */
.hoje-item-btn-agora {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 11px;
    color: var(--accent);
    cursor: pointer;
    line-height: 1;
    transition: all 0.15s;
    flex-shrink: 0;
}

.hoje-item-btn-agora:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* === LAYOUT TOPO: ZONA FOCO + HÁBITOS LATERAL === */
.hoje-topo-grid {
    display: grid;
    grid-template-columns: 1fr 210px;
    gap: 16px;
    align-items: start;
    margin-bottom: 0;
}

@media (max-width: 680px) {
    .hoje-topo-grid { grid-template-columns: 1fr; }
}

.zona-habitos-lateral {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
}

.zona-habitos-titulo {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.habitos-lateral-chips {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.habitos-lateral-chips .habito-chip {
    width: 100%;
    text-align: left;
    justify-content: flex-start;
}

/* === FORM INLINE NOS GRUPOS DO FOCO DO DIA === */
.foco-grupo-add {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 4px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
}

.foco-add-input {
    flex: 1;
    background: transparent;
    border: none;
    font-size: 13px;
    color: var(--text);
    padding: 2px 0;
    outline: none;
    min-width: 0;
}

.foco-add-input::placeholder { color: var(--text-muted); }

.foco-add-submit {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: 15px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.1s;
    flex-shrink: 0;
}

.foco-add-submit:hover { background: var(--accent-bg); }

/* === STATS NO HEADER === */
.hoje-stats-header {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-size: 12px;
    color: var(--text-soft);
    padding-top: 4px;
    white-space: nowrap;
}

.hoje-stats-header strong { color: var(--text); }

/* =============================================
   FOCO DO DIA — workspace agrupado por projeto
   ============================================= */

.foco-do-dia {
    margin: 1.5rem 0;
}

.hoje-atrasadas-compacta {
    margin-bottom: 16px;
}

.foco-grupos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}

.foco-grupo {
    background: var(--surface-soft, var(--surface));
    border: 0.5px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    transition: border-color 0.15s;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.foco-grupo:hover {
    border-color: var(--border-strong);
}

/* Cards com sub-projetos ocupam linha inteira — são mais densos e os
   mini-cards de sub-projeto cabem melhor lado a lado em largura total. */
.foco-grupo-com-filhos {
    border-color: var(--border-strong);
    grid-column: 1 / -1;
}

/* Em telas estreitas (notebook pequeno / janela reduzida), volta pra 1 coluna */
@media (max-width: 900px) {
    .foco-grupos {
        grid-template-columns: 1fr;
    }
    .foco-grupo-com-filhos {
        grid-column: auto;
    }
}

.foco-grupo-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.foco-grupo-emoji {
    font-size: 15px;
    flex-shrink: 0;
}

.foco-grupo-titulo {
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
}

a.foco-grupo-titulo:hover {
    color: var(--accent);
}

.foco-grupo-count {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
}

.foco-grupo-acoes {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.btn-pill-foco {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    background: rgba(99, 102, 241, 0.12);
    color: var(--accent);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    white-space: nowrap;
}

.btn-pill-foco:hover {
    background: rgba(99, 102, 241, 0.22);
    border-color: rgba(99, 102, 241, 0.45);
}

.btn-icon-foco {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    font-size: 16px;
    line-height: 1;
    transition: background 0.12s, color 0.12s;
}

.btn-icon-foco:hover {
    color: var(--text);
    background: var(--surface);
}

.btn-icon-foco-mini {
    width: 22px;
    height: 22px;
    font-size: 13px;
}

.foco-grupo-drag {
    color: var(--text-muted);
    cursor: grab;
    user-select: none;
    font-size: 14px;
    opacity: 0.4;
    transition: opacity 0.12s;
    flex-shrink: 0;
    margin-right: 2px;
}

.foco-grupo:hover .foco-grupo-drag {
    opacity: 1;
}

.foco-grupo-progresso {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 10px;
}

.foco-grupo-barra-track {
    flex: 1;
    height: 7px;
    background: var(--border-strong);
    border-radius: 4px;
    overflow: hidden;
}

.foco-grupo-barra {
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.foco-grupo-barra.barra-quase { background: #f59e0b; }
.foco-grupo-barra.barra-concluida { background: #22c55e; }

.foco-grupo-progresso-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-soft);
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    min-width: 32px;
    text-align: right;
}

.zona-foco-progresso {
    margin: 6px 0 14px;
}

.zona-foco-progresso .foco-grupo-barra-track {
    height: 8px;
    border-radius: 4px;
}

.zona-foco-progresso .foco-grupo-progresso-label {
    font-size: 12px;
    min-width: 36px;
}

.foco-tarefas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.foco-tarefa {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    border-radius: 6px;
    border-bottom: 1px solid var(--border);
    transition: background 0.12s;
}

.foco-tarefa:last-child { border-bottom: none; }

.foco-tarefa:hover {
    background: var(--surface);
}

.foco-tarefa-drag {
    color: var(--text-muted);
    cursor: grab;
    user-select: none;
    font-size: 13px;
    opacity: 0;
    transition: opacity 0.12s;
    flex-shrink: 0;
}

.foco-tarefa:hover .foco-tarefa-drag {
    opacity: 1;
}

.foco-tarefa-form {
    margin: 0;
    display: inline;
    flex-shrink: 0;
}

.foco-tarefa-checkbox {
    background: transparent;
    border: 1.5px solid var(--text-muted);
    border-radius: 4px;
    width: 18px;
    height: 18px;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--text-muted);
    transition: all 0.12s;
    flex-shrink: 0;
}

.foco-tarefa-checkbox:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.foco-tarefa-checkbox.feito {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
    color: #059669;
    cursor: default;
}

.foco-tarefa-texto {
    flex: 1;
    font-size: 13px;
    color: var(--text-soft);
    line-height: 1.4;
}

.foco-tarefa.concluida .foco-tarefa-texto {
    text-decoration: line-through;
    color: var(--text-muted);
    opacity: 0.7;
}

.foco-concluidas {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}

.foco-concluidas-toggle {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 0;
    text-align: left;
}

.foco-concluidas-toggle:hover {
    color: var(--accent);
}

/* === CARDS ANINHADOS PAI -> FILHO (Candidatas ao Foco) === */
.foco-sub-bloco {
    margin-top: 14px;
    padding-left: 14px;
    border-left: 2px solid var(--border-strong);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.foco-sub-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
    margin-bottom: 2px;
}

.foco-sub-card {
    background: var(--bg);
    border: 0.5px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    transition: border-color 0.15s;
}

.foco-sub-card:hover {
    border-color: var(--border-strong);
}

.foco-sub-header {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.foco-sub-emoji {
    font-size: 13px;
    flex-shrink: 0;
}

.foco-sub-titulo {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
}

a.foco-sub-titulo:hover {
    color: var(--accent);
}

.foco-sub-count {
    font-size: 11px;
    color: var(--text-muted);
}

.foco-sub-progresso {
    margin: 2px 0 8px;
}

.foco-sub-progresso .foco-grupo-barra-track {
    height: 4px;
}

.foco-tarefas-sub .foco-tarefa {
    padding: 5px 4px;
}

.foco-tarefas-sub .foco-tarefa-texto {
    font-size: 12.5px;
}

.foco-ver-mais {
    padding: 8px 4px 2px;
    font-size: 12px;
}

.foco-ver-mais a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.12s;
}

.foco-ver-mais a:hover {
    color: var(--accent);
}

.foco-ver-mais-sub {
    padding: 6px 4px 0;
    font-size: 11px;
}

/* === AGENDA + CAPTURA — row no topo da página Hoje === */
.hoje-agenda-captura-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 14px;
}

.hoje-agenda-captura-row .hoje-agenda-strip {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

.hoje-agenda-captura-row .hoje-captura {
    flex: 0 0 260px;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* === AGENDA DO DIA — faixa horizontal no topo da página Hoje === */
.hoje-agenda-strip {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 14px;
}

.hoje-agenda-titulo {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.agenda-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.agenda-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface-soft, var(--bg));
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    transition: border-color 0.15s;
}

.agenda-chip.acontecendo {
    border-color: var(--accent);
    background: var(--accent-bg);
}

.agenda-chip-hora {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 12px;
    flex-shrink: 0;
}

.agenda-chip.acontecendo .agenda-chip-hora {
    color: var(--accent);
}

.agenda-chip-texto {
    color: var(--text);
}

.agenda-chip-proj {
    font-size: 14px;
    opacity: 0.7;
}

.hoje-vazio-inline {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    padding: 2px 0;
}

/* === LAYOUT MEIO: ZONA FOCO + HÁBITOS (esq) | NÃO ESQUECER (dir) === */
.hoje-meio-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 16px;
    align-items: stretch;
    margin-bottom: 16px;
}

@media (max-width: 860px) {
    .hoje-meio-grid { grid-template-columns: 1fr; }
}

.hoje-meio-esquerda {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hoje-meio-esquerda .zona-foco {
    flex: 1;
}

.hoje-meio-esquerda .zona-foco .zona-foco-card,
.hoje-meio-esquerda .zona-foco .zona-foco-vazia {
    height: 100%;
    box-sizing: border-box;
}

/* === NÃO ESQUECER — coluna direita, itens em 2 linhas === */
.hoje-nao-esquecer {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.hoje-nao-esquecer .hoje-lista {
    flex: 1;
    overflow-y: auto;
    margin: 0;
    padding: 0;
}

.nao-esquecer-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    padding: 8px 4px !important;
}

.nao-esquecer-data {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.2;
}

.hoje-item-data {
    font-weight: 600;
    color: var(--accent);
}

.hoje-item-diasemana {
    color: var(--text-muted);
}

.hoje-item-diasfaltam {
    color: var(--text-muted);
    font-style: italic;
}

.nao-esquecer-titulo {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    width: 100%;
}

.hoje-item-texto {
    font-size: 13px;
    color: var(--text);
    flex: 1;
    line-height: 1.4;
}

.hoje-item-projeto {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--surface-soft, var(--bg));
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 5px;
    white-space: nowrap;
}

/* =====================================================
   REDESIGN /PROJETOS/ — Centro de Comando (2026-05-24)
   ===================================================== */

.header-acoes { display: flex; gap: 8px; align-items: center; }

.projetos-zona { margin-bottom: 24px; }
.zona-titulo { font-size: 12px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin: 16px 0 10px; }
.zona-count { color: var(--text-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.zona-vazia { padding: 14px 18px; background: var(--surface-soft); border: 0.5px dashed var(--border); border-radius: 10px; color: var(--text-muted); font-size: 13px; display: flex; flex-direction: column; gap: 4px; }

/* === ZONA 1: EM FOCO AGORA === */
.foco-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.projeto-card-foco {
    background: linear-gradient(180deg, rgba(99,102,241,0.18) 0%, rgba(99,102,241,0.06) 100%);
    border: 1px solid rgba(99,102,241,0.4);
    border-radius: 12px;
    padding: 16px 18px;
}
.card-foco-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 11px; }
.card-foco-emoji { font-size: 14px; }
.card-foco-bread { color: var(--accent); text-decoration: none; }
.card-foco-bread:hover { text-decoration: underline; }
.card-foco-timer {
    margin-left: auto;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.card-foco-titulo { display: block; font-size: 18px; font-weight: 500; color: var(--text); text-decoration: none; margin: 6px 0; }
.card-foco-titulo:hover { color: var(--accent); }
.card-foco-bar { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; margin: 8px 0 4px; overflow: hidden; }
.card-foco-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; }
.card-foco-stats { font-size: 11px; color: var(--text-muted); margin-bottom: 10px; }
.card-foco-next { display: inline-block; font-size: 12px; padding: 5px 10px; background: rgba(245,158,11,0.12); color: #f59e0b; border-radius: 5px; margin-bottom: 8px; }
.card-foco-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.card-foco-task { display: flex; align-items: center; gap: 8px; padding: 4px 6px; font-size: 13px; color: var(--text); border-radius: 4px; }
.card-foco-task:hover { background: rgba(255,255,255,0.04); }
.card-foco-chk { background: transparent; border: 0; color: var(--text-muted); cursor: pointer; font-size: 14px; padding: 0; }
.card-foco-more { display: block; font-size: 11px; color: var(--accent); padding: 6px 6px; text-decoration: none; }
.card-foco-acts { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 0.5px solid rgba(255,255,255,0.08); flex-wrap: wrap; }
.btn-foco-primary { font-size: 12px; padding: 6px 14px; background: var(--accent); color: #fff; border: 0; border-radius: 6px; cursor: pointer; font-weight: 500; }
.btn-foco { font-size: 12px; padding: 6px 12px; background: rgba(255,255,255,0.05); color: var(--text); border: 0.5px solid var(--border); border-radius: 6px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.btn-foco:hover { background: rgba(255,255,255,0.1); }

/* === ZONA 2: ATIVOS POR MESTRE === */
.projetos-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1100px) { .projetos-cols { grid-template-columns: 1fr; } }
.projeto-col {
    background: var(--surface-soft);
    border-radius: 10px;
    padding: 10px;
    border-top: 3px solid;
}
.projeto-col-empresa { border-top-color: #4d8ce8; }
.projeto-col-gps { border-top-color: #a98cff; }
.projeto-col-pessoal { border-top-color: #54d4a3; }
.projeto-col-outro { border-top-color: var(--border); }

.col-head { padding: 4px 4px 10px; border-bottom: 0.5px solid var(--border); margin-bottom: 8px; }
.col-name { font-size: 13px; font-weight: 500; color: var(--text); text-decoration: none; display: block; }
.col-name:hover { color: var(--accent); }
.col-stats { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.col-bar { height: 3px; background: var(--surface); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.col-bar-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }
.projeto-col-empresa .col-bar-fill { background: #4d8ce8; }
.projeto-col-gps .col-bar-fill { background: #a98cff; }
.projeto-col-pessoal .col-bar-fill { background: #54d4a3; }

.col-rows { display: flex; flex-direction: column; gap: 1px; }
.projeto-row { display: flex; align-items: center; gap: 6px; padding: 6px 6px; font-size: 12px; border-radius: 5px; color: var(--text); text-decoration: none; transition: background 0.1s; }
.projeto-row:hover { background: rgba(255,255,255,0.05); }
.projeto-row.row-foco-here { background: rgba(99,102,241,0.12); border-left: 2px solid var(--accent); padding-left: 4px; }
.projeto-row.row-pausado { opacity: 0.55; }
.row-drag { color: var(--text-muted); cursor: grab; user-select: none; opacity: 0; transition: opacity 0.12s; }
.projeto-row:hover .row-drag { opacity: 0.6; }
.row-num { color: var(--text-muted); font-weight: 500; min-width: 16px; font-size: 11px; }
.row-nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-bar { width: 32px; height: 3px; background: var(--surface); border-radius: 1px; overflow: hidden; }
.row-bar-fill { height: 100%; background: var(--accent); }
.row-pct { font-size: 10px; color: var(--text-muted); min-width: 30px; text-align: right; }
.row-pendentes { font-size: 10px; color: #f59e0b; min-width: 20px; text-align: right; font-weight: 500; }
.col-vazia { font-size: 11px; color: var(--text-muted); padding: 8px; text-align: center; font-style: italic; }
.col-add { font-size: 11px; color: var(--text-muted); padding: 6px; text-align: center; border: 0.5px dashed var(--border); border-radius: 5px; margin-top: 6px; cursor: pointer; }
.col-add:hover { background: rgba(255,255,255,0.04); color: var(--text); }

/* === ZONA 3: ARQUIVOS === */
.projetos-zona-arq { margin-top: 24px; }
.arq-header { width: 100%; background: var(--surface-soft); border: 0.5px dashed var(--border); border-radius: 8px; padding: 10px 14px; display: flex; align-items: center; gap: 12px; opacity: 0.75; cursor: pointer; font-family: inherit; color: inherit; }
.arq-header:hover { opacity: 1; background: var(--surface); }
.arq-label { font-size: 12px; color: var(--text-muted); }
.arq-chip { font-size: 11px; padding: 3px 10px; border-radius: 12px; background: var(--surface); color: var(--text-muted); }
.arq-expand { margin-left: auto; font-size: 12px; color: var(--text-muted); }
.arq-content { padding: 12px 16px; }
.arq-content .hint { color: var(--text-muted); font-size: 12px; font-style: italic; }

/* ===== REDESIGN HOJE PARTE 2 (2026-05-24) ===== */

/* Header Hoje: Lembretes ESQUERDA (mais largo), Agenda+Captura DIREITA empilhados */
.hoje-agenda-captura-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: 2.3fr 1fr;
    grid-template-areas:
        "lembretes  agenda"
        "lembretes  captura";
    gap: 12px;
    align-items: stretch;
}
.hoje-agenda-strip  { grid-area: agenda; }
.hoje-lembretes-strip { grid-area: lembretes; }
.hoje-captura       { grid-area: captura; }

.hoje-agenda-strip, .hoje-lembretes-strip, .hoje-captura { min-height: 0; }

/* Lembretes: flex col pra chips scrollarem se houver muitos */
.hoje-lembretes-strip {
    background: var(--surface-soft, var(--surface));
    border: 0.5px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
}
.hoje-lembretes-titulo {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 8px;
}
/* .lembrete-chip e variantes removidos — substituídos por .lembrete-item (2026-05-24 parte 8) */

/* Hoje-meio-grid: 2 colunas equilibradas (Foco | Hábitos) */
.hoje-meio-grid {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    grid-auto-rows: minmax(0, 1fr);
}

/* Card grande de Hábitos (variante C — lado a lado do Foco) */
.zona-habitos-card {
    background: linear-gradient(180deg, rgba(84,212,163,0.09) 0%, rgba(84,212,163,0.03) 100%);
    border: 0.5px solid rgba(84,212,163,0.28);
    border-radius: 12px;
    padding: 14px 16px;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.habitos-card-label {
    font-size: 11px;
    font-weight: 500;
    color: #54d4a3;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}
.habitos-card-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.habitos-card-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(0,0,0,0.15);
    border-radius: 6px;
    font-size: 13px;
}
.habitos-card-item.feito { opacity: 0.6; }
.habitos-card-item.feito .habitos-card-nome { text-decoration: line-through; }
.habitos-card-chk {
    background: transparent;
    border: 1.5px solid #888;
    color: transparent;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    flex-shrink: 0;
}
.habitos-card-chk.feito {
    background: #54d4a3;
    border-color: #54d4a3;
    color: #fff;
}
.habitos-card-nome { flex: 1; color: var(--text); }
.habitos-card-hora { font-size: 11px; color: #54d4a3; font-variant-numeric: tabular-nums; }
.habitos-card-proj { opacity: 0.7; }
.habitos-card-vazio {
    text-align: center;
    padding: 20px 12px;
    color: var(--text-muted);
    flex: 1;
}
.habitos-card-vazio .vazio-titulo { font-size: 14px; margin-bottom: 6px; }
.habitos-card-vazio .vazio-info { font-size: 11px; }
.habitos-card-vazio a { color: #54d4a3; }
.habitos-card-footer {
    margin-top: auto;
    padding-top: 10px;
    border-top: 0.5px solid rgba(255,255,255,0.08);
    text-align: right;
    font-size: 11px;
}
.habitos-card-footer a { color: #54d4a3; text-decoration: none; }
.habitos-card-footer a:hover { text-decoration: underline; }

/* ⏸ ícone no header do card de Foco */
.zona-foco-label { display: flex; align-items: center; gap: 6px; }
.zona-foco-pausar { margin-left: auto; }
.btn-icone-pausar {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.12s, color 0.12s;
    line-height: 1;
}
.btn-icone-pausar:hover { background: rgba(255,255,255,0.08); color: var(--text); }

/* + Adicionar tarefa inline no fim do checklist */
.foco-tarefa-add-inline {
    list-style: none;
    padding: 4px 0 0;
}
.foco-tarefa-add-btn {
    background: transparent;
    border: 0.5px dashed var(--border);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 5px;
    width: 100%;
    text-align: left;
    transition: border-color 0.12s, color 0.12s;
    font-family: inherit;
}
.foco-tarefa-add-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Responsivo: ≤900px volta 1 coluna */
@media (max-width: 900px) {
    .hoje-agenda-captura-row {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "lembretes"
            "agenda"
            "captura";
    }
    .hoje-meio-grid { grid-template-columns: 1fr; }
}

/* ===== REGISTRO EXTRA/RETROATIVO DE HÁBITO (2026-05-24) ===== */
.btn-add-registro {
    background: rgba(99,102,241,0.15);
    color: var(--accent);
    border: 0.5px solid rgba(99,102,241,0.4);
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 4px;
    font-family: inherit;
}
.btn-add-registro:hover { background: rgba(99,102,241,0.25); }

.add-registro-form {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 6px;
    padding: 8px;
    background: var(--surface-soft, var(--surface));
    border-radius: 6px;
    border: 0.5px solid var(--border);
}
.add-registro-form input[type="date"] {
    font-size: 12px;
    padding: 4px 6px;
    background: var(--surface);
    border: 0.5px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-family: inherit;
}
.add-registro-form input[type="text"] {
    flex: 1;
    font-size: 12px;
    padding: 4px 8px;
    background: var(--surface);
    border: 0.5px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-family: inherit;
}
.btn-add-registro-submit {
    background: var(--accent);
    color: #fff;
    border: 0;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
}
.btn-add-registro-cancel {
    background: transparent;
    color: var(--text-muted);
    border: 0;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
}

/* ===== TRIAR UNIFICADA (2026-05-24) ===== */
.triar-filtros { display: flex; gap: 6px; margin: 12px 0; flex-wrap: wrap; }
.filtro-chip {
    font-size: 12px; padding: 5px 12px; border-radius: 14px;
    background: var(--surface-soft); color: var(--text-muted);
    text-decoration: none; border: 0.5px solid var(--border);
    transition: all 0.12s;
}
.filtro-chip:hover { color: var(--text); }
.filtro-chip.ativo { background: var(--accent); color: #fff; border-color: var(--accent); }

.triar-lista { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 6px; }
.triar-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 14px; background: var(--surface-soft);
    border: 0.5px solid var(--border); border-radius: 8px;
}
.triar-item:hover { border-color: var(--border-strong); }
.triar-item-texto { flex: 1; min-width: 0; }
.triar-item-texto span { display: block; color: var(--text); font-size: 14px; word-break: break-word; }
.triar-item-meta { color: var(--text-muted); font-size: 11px; margin-top: 2px; display: block; }
.triar-item-acoes { display: flex; gap: 4px; flex-wrap: wrap; flex-shrink: 0; }

.triar-vazio { text-align: center; padding: 40px 20px; color: var(--text-muted); }
.triar-vazio span { font-size: 18px; display: block; margin-bottom: 4px; color: var(--text); }
.triar-vazio small { font-size: 13px; }

.btn-acao-hoje { background: rgba(55,138,221,0.12); color: var(--accent); border-color: rgba(55,138,221,0.4); }
.btn-acao-concluir { background: rgba(34,197,94,0.12); color: #16a34a; border-color: rgba(34,197,94,0.35); }
.btn-acao-descartar { background: rgba(220,38,38,0.08); color: #dc2626; border-color: rgba(220,38,38,0.3); }

.triar-stats-footer {
    margin-top: 30px; padding: 12px; background: var(--surface-soft);
    border-radius: 8px; font-size: 12px; color: var(--text-muted);
    text-align: center; opacity: 0.7;
}
.btn-add-registro-cancel:hover { color: var(--text); }

/* .lembretes-amanha e .amanha-item removidos — substituídos por .lembretes-grupo-amanha e .lembrete-item (2026-05-24 parte 8) */

/* ===== POLISH VISUAL HOJE (2026-05-24 parte 8) ===== */

/* Wrappers de zonas */
.hoje-zona { margin-bottom: 20px; }
.hoje-zona-header { margin-bottom: 16px; }
.hoje-zona-planejamento,
.hoje-zona-execucao {
    padding: 14px;
    background: rgba(255,255,255,0.02);
    border-radius: 12px;
    border: 0.5px solid rgba(255,255,255,0.04);
}

/* Lembretes-strip: fundo mais limpo */
.hoje-lembretes-strip {
    background: rgba(255,255,255,0.015);
    border-color: rgba(255,255,255,0.06);
    padding: 12px;
}
.hoje-lembretes-titulo {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 10px;
}

/* Grupos de lembretes */
.lembretes-grupo + .lembretes-grupo { margin-top: 10px; }
.lembretes-grupo-header {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.grupo-data {
    font-weight: 400;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
}
.lembretes-grupo-itens { display: flex; flex-direction: column; gap: 3px; }

/* AMANHÃ — âmbar suavizado */
.lembretes-grupo-amanha {
    padding: 9px 11px;
    background: linear-gradient(180deg, rgba(245,158,11,0.09) 0%, rgba(245,158,11,0.02) 100%);
    border: 0.5px solid rgba(245,158,11,0.30);
    border-radius: 8px;
}
.lembretes-grupo-amanha .lembretes-grupo-header { color: #f59e0b; }

/* ESTA SEMANA — azul médio */
.lembretes-grupo-semana .lembretes-grupo-header { color: var(--accent); }

/* PRÓXIMAS SEMANAS — discreto */
.lembretes-grupo-proximas .lembretes-grupo-header { color: var(--text-muted); }

/* Item de lembrete unificado */
.lembrete-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 9px;
    background: rgba(255,255,255,0.025);
    border-radius: 5px;
    font-size: 12px;
    color: var(--text);
    text-decoration: none;
    transition: background 0.12s;
}
.lembrete-item:hover { background: rgba(255,255,255,0.06); }
.item-hora {
    color: #f59e0b;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    min-width: 38px;
    font-size: 11px;
}
.item-data {
    color: var(--accent);
    font-weight: 500;
    min-width: 52px;
    font-size: 11px;
}
.item-texto { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-proj { opacity: 0.6; font-size: 13px; }

/* Hábitos: item ligeiramente mais sutil */
.habitos-card-item { background: rgba(255,255,255,0.025); }

/* ===== SIMETRIA DEFINITIVA CARDS FOCO/HÁBITOS (2026-05-24 OSS) ===== */

/* Padding interno IDÊNTICO nos 2 cards */
.zona-foco-card,
.zona-habitos-card,
.zona-foco-vazia,
.banner-foco-ativo {
    padding: 16px 18px;
    box-sizing: border-box;
}

/* Labels do header com altura/margem IDÊNTICAS */
.zona-foco-label,
.habitos-card-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 0 0 12px;
    min-height: 18px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Wrapper externo .zona-foco SEM padding NEM margin (estava com margin 1.5rem 0 antiga, causando desnivelamento com .zona-habitos-card) */
.zona-foco {
    padding: 0;
    margin: 0;
}

/* ===== REFORMA PALETA DARK — CARDS E GRADIENTS (2026-05-24 OSS) ===== */

/* Card Foco — azul GitHub */
.zona-foco-card,
.banner-foco-ativo {
    background: linear-gradient(180deg, rgba(56,139,253,0.10) 0%, rgba(56,139,253,0.03) 100%);
    border: 0.5px solid rgba(56,139,253,0.32);
    border-radius: 10px;
}

/* Card Hábitos — verde GitHub */
.zona-habitos-card {
    background: linear-gradient(180deg, rgba(63,185,80,0.09) 0%, rgba(63,185,80,0.03) 100%);
    border: 0.5px solid rgba(63,185,80,0.32);
    border-radius: 10px;
}

/* AMANHÃ — âmbar/bronze GitHub */
.lembretes-grupo-amanha {
    background: linear-gradient(180deg, rgba(210,153,34,0.10) 0%, rgba(210,153,34,0.02) 100%);
    border: 0.5px solid rgba(210,153,34,0.34);
}
.lembretes-grupo-amanha .lembretes-grupo-header { color: #d29922; }

/* Labels coloridos dos cards */
.zona-foco-label { color: #58a6ff; }
.habitos-card-label { color: #3fb950; }

/* Wrappers das zonas — usa variáveis pra respeitar tema */
.hoje-zona-planejamento,
.hoje-zona-execucao {
    padding: 16px;
    background: rgba(255,255,255,0.015);
    border-radius: 12px;
    border: 0.5px solid var(--border);
}

/* Cards de lembrete/agenda/captura — visual unificado */
.hoje-lembretes-strip,
.hoje-agenda-strip,
.hoje-captura {
    background: var(--surface);
    border: 0.5px solid var(--border);
    border-radius: 10px;
    padding: 14px;
}

/* Item de tarefa no foco */
.card-foco-task {
    border-radius: 6px;
}

/* Item de hábito */
.habitos-card-item {
    background: rgba(255,255,255,0.02);
}

/* ===== AGENDA HÍBRIDA — hábitos com hora aparecem na Agenda como chips diferenciados (2026-05-24 OSS) ===== */
.agenda-chip.agenda-chip-habito {
    opacity: 0.72;
    border-left: 2px solid #3fb950;
    padding-left: 6px;
    background: rgba(63,185,80,0.04);
}
.agenda-chip-habito-tag {
    font-size: 10px;
    color: #3fb950;
    margin-left: 2px;
}

/* === ESTOQUE === */
.estoque-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.estoque-filtros { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.estoque-filtros select, .estoque-filtros input[type="search"] { padding: 6px 10px; border-radius: 4px; border: 1px solid var(--border, #ccc); background: var(--surface); color: var(--text); }
.estoque-filtros input[type="search"] { min-width: 240px; }
.estoque-checkbox { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted, #666); }
.estoque-tabela { width: 100%; border-collapse: collapse; }
.estoque-tabela th { text-align: left; padding: 10px 12px; background: var(--surface-soft); font-weight: 600; font-size: 13px; color: var(--text-muted); }
.estoque-tabela td { padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 14px; }
.estoque-tabela .num { text-align: right; }
.estoque-tabela .sku { font-family: monospace; font-weight: 600; color: var(--accent); }
.estoque-tabela .acoes { text-align: right; white-space: nowrap; }
.estoque-tabela .acoes a, .estoque-tabela .acoes button { text-decoration: none; margin-left: 8px; }
.estoque-tabela .vazio { text-align: center; padding: 40px; color: var(--text-muted); }
.estoque-tabela tr.produto-inativo { opacity: 0.45; }
.estoque-rodape { margin-top: 14px; font-size: 13px; color: var(--text-muted); }
.estoque-form { max-width: 600px; }
.estoque-form .campo { margin-bottom: 14px; }
.estoque-form label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 14px; }
.estoque-form input, .estoque-form select, .estoque-form textarea { width: 100%; padding: 8px 10px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: inherit; box-sizing: border-box; }
.estoque-form small { color: var(--text-muted); font-size: 12px; }
.estoque-form .erro { color: var(--danger, #c00); font-size: 12px; margin-top: 4px; }
.estoque-form .form-acoes { margin-top: 18px; }
.btn-link { background: none; border: none; cursor: pointer; padding: 0; font-size: 16px; }

/* === ESTOQUE: subnav e pedidos (Onda 2) === */
.estoque-subnav { display: flex; gap: 4px; border-bottom: 1px solid var(--border, #ddd); margin-bottom: 18px; }
.estoque-subnav a { padding: 8px 16px; text-decoration: none; color: var(--text-muted, #666); border-bottom: 2px solid transparent; font-size: 14px; }
.estoque-subnav a.ativo { color: var(--accent, #6366f1); border-bottom-color: var(--accent, #6366f1); font-weight: 600; }
.estoque-subnav a:hover { color: var(--text, #222); }

.pedido-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.pedido-aprovado { background: #fff4d6; color: #8a6500; }
.pedido-enviado { background: #d4f0ff; color: #1467a0; }
.pedido-entregue { background: #d6f0d6; color: #1e6a1e; }
.pedido-cancelado { background: #ffd6d6; color: #a01414; }
.pedido-devolucao_em_curso { background: #ffe0c2; color: #8a4500; }
.pedido-devolvido_ok { background: #d6f0d6; color: #1e6a1e; }
.pedido-devolvido_perda { background: #f0d6d6; color: #6a1414; }
.pedido-finalizado { background: #e0e0e0; color: #444; }

.pedido-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 24px; padding: 16px; background: var(--surface-soft, #f8f8f8); border-radius: 6px; }
.pedido-info-grid div { font-size: 14px; }
.pedido-aviso { margin-top: 12px; padding: 10px 14px; background: #fff4d6; border-left: 4px solid #d4a000; border-radius: 4px; font-size: 14px; }

.importar-explicacao {
  padding: 14px 16px;
  background: var(--surface-soft, #f8f8f8);
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--text, #222);
}
.importar-form {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 24px;
  padding: 16px;
  border: 2px dashed var(--border, #ccc);
  border-radius: 8px;
}
.importar-form input[type=file] { flex: 1; color: var(--text, #222); }

.importar-resultado {
  padding: 16px 18px;
  background: rgba(76, 175, 80, 0.10);
  border-left: 4px solid #4caf50;
  border-radius: 4px;
  margin-bottom: 20px;
  color: var(--text, #222);
}
.importar-resultado h2 {
  margin: 0 0 10px 0;
  font-size: 18px;
  color: #1e6a1e;
}
.importar-resultado ul { margin: 0; padding-left: 18px; }
.importar-resultado ul li { margin-bottom: 4px; line-height: 1.5; }
.importar-resultado ul li strong { color: #1e6a1e; }
.importar-resultado .erro { color: #c02020; font-weight: 700; }

/* Dark mode — força contraste */
html[data-theme="dark"] .importar-resultado {
  background: rgba(76, 175, 80, 0.18);
  color: #f0f0f0;
}
html[data-theme="dark"] .importar-resultado h2 { color: #7ed87e; }
html[data-theme="dark"] .importar-resultado ul li { color: #f0f0f0; }
html[data-theme="dark"] .importar-resultado ul li strong { color: #7ed87e; }
html[data-theme="dark"] .importar-explicacao { color: #e0e0e0; }
html[data-theme="dark"] .importar-resultado .erro { color: #ff8a8a; }

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .importar-resultado {
    background: rgba(76, 175, 80, 0.18);
    color: #f0f0f0;
  }
  html:not([data-theme="light"]) .importar-resultado h2 { color: #7ed87e; }
  html:not([data-theme="light"]) .importar-resultado ul li { color: #f0f0f0; }
  html:not([data-theme="light"]) .importar-resultado ul li strong { color: #7ed87e; }
  html:not([data-theme="light"]) .importar-explicacao { color: #e0e0e0; }
}

.paginacao { display: flex; justify-content: center; gap: 16px; margin-top: 18px; padding: 10px; font-size: 14px; }
.paginacao a { color: var(--accent, #6366f1); text-decoration: none; }
.paginacao span { color: var(--text-muted, #666); }


/* === DEVOLUÇÕES (Onda 3) === */
.pedido-estado-to_receive { background: #fff4d6; color: #8a6500; }
.pedido-estado-received { background: #d4f0ff; color: #1467a0; }
.pedido-estado-completed { background: #d6f0d6; color: #1e6a1e; }
.pedido-estado-exception { background: #ffd6d6; color: #a01414; }
.pedido-estado-unknown { background: #e0e0e0; color: #555; }

/* === ENTRADAS (Onda 4) === */
.entrada-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.entrada-compra { background: #d6f0d6; color: #1e6a1e; }
.entrada-recebimento { background: #d4f0ff; color: #1467a0; }
.entrada-manual { background: #fff4d6; color: #8a6500; }
.entrada-inicial { background: #e0d6ff; color: #4a2da0; }
.entrada-transferencia { background: #ffe0c2; color: #8a4500; }
.entrada-devolucao_fornecedor { background: #f0d6d6; color: #a01414; }
.entrada-outros { background: #e0e0e0; color: #555; }

/* === CONFERÊNCIA (Onda 5) — badges + linhas (light + dark) === */
.severidade-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #ffffff;
}
.sev-exato,
.sev-ok       { background: #1e6a1e; }
.sev-atencao  { background: #b87900; }
.sev-critico  { background: #a01414; }

/* Linhas de divergência — fundo sutil + faixa lateral colorida */
tr.severidade-atencao,
tr.severidade-critico { border-left: 4px solid transparent; }
tr.severidade-atencao { background: rgba(255, 196, 0, 0.10); border-left-color: #b87900; }
tr.severidade-critico { background: rgba(192, 0, 0, 0.10); border-left-color: #a01414; }

tr.severidade-atencao td,
tr.severidade-critico td { color: var(--text, #222) !important; }

/* Diferença com cor saturada */
tr.severidade-atencao td strong { color: #b87900; }
tr.severidade-critico td strong { color: #c02020; }

/* Dark mode — força contraste */
html[data-theme="dark"] tr.severidade-atencao td,
html[data-theme="dark"] tr.severidade-critico td { color: #f0f0f0 !important; }
html[data-theme="dark"] tr.severidade-atencao { background: rgba(255, 196, 0, 0.16); }
html[data-theme="dark"] tr.severidade-critico { background: rgba(255, 80, 80, 0.16); }
html[data-theme="dark"] tr.severidade-atencao td strong { color: #ffd166; }
html[data-theme="dark"] tr.severidade-critico td strong { color: #ff8a8a; }

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) tr.severidade-atencao td,
  html:not([data-theme="light"]) tr.severidade-critico td { color: #f0f0f0 !important; }
  html:not([data-theme="light"]) tr.severidade-atencao { background: rgba(255, 196, 0, 0.16); }
  html:not([data-theme="light"]) tr.severidade-critico { background: rgba(255, 80, 80, 0.16); }
  html:not([data-theme="light"]) tr.severidade-atencao td strong { color: #ffd166; }
  html:not([data-theme="light"]) tr.severidade-critico td strong { color: #ff8a8a; }
}

/* === AUTH (Onda A) === */
.auth-body { background: linear-gradient(135deg, #1a2942 0%, #0f1828 100%); min-height: 100vh; margin: 0; }
.auth-container { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; flex-direction: column; }
.auth-box {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 40px 36px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.auth-box h1 { margin: 0 0 8px 0; font-size: 28px; color: #fff; text-align: center; }
.auth-subtitulo { margin: 0 0 28px 0; color: rgba(255,255,255,0.6); text-align: center; font-size: 14px; }
.auth-campo { margin-bottom: 16px; }
.auth-campo label { display: block; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.8); margin-bottom: 6px; }
.auth-campo input[type=text],
.auth-campo input[type=password],
.auth-campo input[type=email] {
  width: 100%; padding: 10px 12px;
  background: rgba(255,255,255,0.06); color: #fff;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 6px;
  font-family: inherit; font-size: 14px; box-sizing: border-box;
}
.auth-campo input:focus { outline: none; border-color: #6366f1; background: rgba(255,255,255,0.08); }
.auth-campo small { display: block; color: rgba(255,255,255,0.4); font-size: 11px; margin-top: 4px; }
.auth-botao {
  width: 100%; padding: 12px;
  background: #6366f1; color: #fff;
  border: none; border-radius: 6px;
  font-size: 15px; font-weight: 600;
  cursor: pointer; margin-top: 8px;
}
.auth-botao:hover { background: #5358e0; }
.auth-botao-link { display: block; text-decoration: none; box-sizing: border-box; text-align: center; }
.auth-link { text-align: center; margin: 20px 0 0 0; color: rgba(255,255,255,0.6); font-size: 14px; }
.auth-link a { color: #818cf8; text-decoration: none; font-weight: 600; }
.auth-erro {
  background: rgba(192,32,32,0.18); color: #ff8a8a;
  border-left: 3px solid #c02020;
  padding: 10px 14px; border-radius: 4px; margin-bottom: 16px; font-size: 13px;
}
.auth-toast {
  background: rgba(76,175,80,0.18); color: #7ed87e;
  border-left: 3px solid #4caf50;
  padding: 10px 14px; border-radius: 4px; margin-bottom: 16px; font-size: 13px; text-align: center;
  width: 100%; max-width: 380px; box-sizing: border-box;
}


/* === CONFERÊNCIA MANUAL === */
.conf-manual-tabela .conf-manual-input {
  width: 90px; padding: 5px 8px; text-align: right;
  background: var(--surface-soft, #f5f5f5); color: var(--text, #222);
  border: 1px solid var(--border, #ccc); border-radius: 4px;
  font-size: 14px; font-family: inherit;
}
.conf-manual-tabela .conf-manual-input:focus {
  outline: none; border-color: var(--accent, #6366f1);
  background: var(--surface, #fff);
}
.conf-manual-footer {
  display: flex; align-items: center; gap: 20px;
  margin-top: 16px; padding: 14px 0; border-top: 1px solid var(--border, #e0e0e0);
}
.conf-manual-obs { display: flex; align-items: center; gap: 8px; }
.conf-manual-obs label { font-size: 13px; font-weight: 600; white-space: nowrap; }
.conf-manual-obs input[type=text] {
  padding: 7px 10px; font-size: 13px; font-family: inherit;
  background: var(--surface-soft, #f5f5f5); color: var(--text, #222);
  border: 1px solid var(--border, #ccc); border-radius: 4px;
}
.conf-manual-submit { padding: 9px 20px; font-size: 14px; }

/* === PAINEL DE SAÍDAS ML — Fase 1.5 (quadro diário) === */
.saidas-erro-config {
  background: #fff3cd; border: 1px solid #ffc107; border-radius: 6px;
  padding: 12px 16px; margin-bottom: 16px; font-size: 13px;
}
html[data-theme="dark"] .saidas-erro-config { background: #3a2800; border-color: #b38600; }

/* Badges globais no header */
.saidas-badge-global {
  padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600;
}
.saidas-badge-hoje { background: #fef3c7; color: #92400e; }
.saidas-badge-prox { background: #dbeafe; color: #1e40af; }
html[data-theme="dark"] .saidas-badge-hoje { background: rgba(245,158,11,0.2); color: #fcd34d; }
html[data-theme="dark"] .saidas-badge-prox { background: rgba(59,130,246,0.2); color: #93c5fd; }

/* Grid de contas — cresce horizontal até 3 colunas */
.saidas-contas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}

.saidas-conta-card {
  border: 1px solid var(--border, #ddd);
  border-radius: 10px;
  background: var(--surface, #fff);
  overflow: hidden;
}
.saidas-conta-card.saidas-conta-erro { border-color: #f5a623; }

.saidas-conta-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: var(--surface-alt, rgba(0,0,0,0.03));
  border-bottom: 1px solid var(--border, #ddd);
}
.saidas-conta-nome { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.saidas-alias {
  background: var(--accent-bg, #e8e8ff); color: var(--accent, #4a4af0);
  padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600;
}

/* Buckets (hoje / próximo dia útil) */
.saidas-bucket {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border, #eee);
}
.saidas-bucket-prox { border-bottom: none; }
.saidas-bucket-vazio { opacity: 0.55; }

.saidas-bucket-titulo {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-muted, #888);
  margin-bottom: 8px;
}

.saidas-bucket-zero { font-size: 12px; color: var(--text-muted, #999); margin: 0; }

.saidas-bucket-nums {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-bottom: 8px;
}

.saidas-num-bloco {
  display: flex; flex-direction: column; align-items: center;
  min-width: 44px;
}
.saidas-num {
  font-size: 24px; font-weight: 800; line-height: 1;
  color: var(--text, #111);
}
.saidas-num-label {
  font-size: 10px; color: var(--text-muted, #888);
  text-align: center; margin-top: 2px; white-space: nowrap;
}
.saidas-num-pacote .saidas-num { color: #6366f1; }
.saidas-num-alerta .saidas-num  { color: #f59e0b; }

/* Pills de modalidade */
.saidas-modalidades { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.saidas-mod {
  font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 600;
}
.saidas-mod-flex   { background: #dbeafe; color: #1d4ed8; }
.saidas-mod-normal { background: #f3f4f6; color: #374151; }
.saidas-mod-outros { background: #fef3c7; color: #92400e; }
.saidas-mod-full   { background: #d1fae5; color: #065f46; }
html[data-theme="dark"] .saidas-mod-flex   { background: rgba(59,130,246,0.18); color: #93c5fd; }
html[data-theme="dark"] .saidas-mod-normal { background: rgba(255,255,255,0.08); color: #d1d5db; }
html[data-theme="dark"] .saidas-mod-outros { background: rgba(245,158,11,0.15); color: #fcd34d; }
html[data-theme="dark"] .saidas-mod-full   { background: rgba(16,185,129,0.15); color: #6ee7b7; }

/* Erro e debug */
.saidas-conta-erro-msg {
  padding: 12px 14px; font-size: 13px; color: #dc2626;
}
html[data-theme="dark"] .saidas-conta-erro-msg { color: #fca5a5; }

.saidas-debug {
  padding: 8px 14px; font-size: 11px; color: var(--text-muted, #999);
  border-top: 1px solid var(--border, #eee);
}
.saidas-debug summary { cursor: pointer; }
.saidas-debug code { font-family: monospace; font-size: 11px; }

@media (max-width: 700px) {
  .saidas-contas-grid { grid-template-columns: 1fr; }
  .saidas-num { font-size: 20px; }
}

/* === PAINEL DE SAÍDAS ML — Fase 2 (abas + Flex/Normal separados) === */

/* Abas estilo ML */
.saidas-abas {
  display: flex; gap: 0; margin-bottom: 16px;
  border-bottom: 2px solid var(--border, #ddd);
}
.saidas-aba {
  background: none; border: none; cursor: pointer;
  padding: 10px 20px; font-size: 14px; font-weight: 500;
  color: var(--text-muted, #666);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.saidas-aba:hover { color: var(--text, #111); }
.saidas-aba.ativa { color: #1d4ed8; border-bottom-color: #1d4ed8; font-weight: 700; }
.saidas-aba-count {
  display: inline-block;
  background: #dbeafe; color: #1d4ed8;
  border-radius: 10px; padding: 1px 7px;
  font-size: 11px; font-weight: 700;
  margin-left: 6px; vertical-align: middle;
}
.saidas-aba.ativa .saidas-aba-count { background: #1d4ed8; color: #fff; }
html[data-theme="dark"] .saidas-aba:hover { color: var(--text, #f0f0f0); }
html[data-theme="dark"] .saidas-aba.ativa { color: #93c5fd; border-bottom-color: #93c5fd; }
html[data-theme="dark"] .saidas-aba-count { background: rgba(59,130,246,0.2); color: #93c5fd; }
html[data-theme="dark"] .saidas-aba.ativa .saidas-aba-count { background: #2563eb; color: #fff; }

/* Visibilidade por aba — CSS-only, JS apenas atualiza o atributo */
.saidas-bucket-aba { display: none; }
#saidasGrid[data-aba-ativa="hoje"]     .saidas-bucket-aba[data-bucket="hoje"]     { display: block; border-bottom: none; }
#saidasGrid[data-aba-ativa="amanha"]   .saidas-bucket-aba[data-bucket="amanha"]   { display: block; border-bottom: none; }
#saidasGrid[data-aba-ativa="proximos"] .saidas-bucket-aba[data-bucket="proximos"] { display: block; border-bottom: none; }

/* Resumo do bucket: total + badge de atrasados */
.saidas-bucket-resumo {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px;
}
.saidas-total-num { font-size: 26px; font-weight: 800; line-height: 1; color: var(--text, #111); }
.saidas-total-det { font-size: 11px; color: var(--text-muted, #888); }

/* Badge NF-e pendente */
.saidas-nfe-badge { display: inline-block; font-size: 12px; margin-left: 4px; opacity: 0.85; cursor: default; }

/* Badge atrasados — vermelho (mesmo destaque do ML) */
.saidas-atrasado-badge {
  background: #fee2e2; color: #dc2626;
  padding: 2px 9px; border-radius: 10px;
  font-size: 11px; font-weight: 700;
}
html[data-theme="dark"] .saidas-atrasado-badge { background: rgba(220,38,38,0.2); color: #fca5a5; }

/* Linhas por modalidade (Flex / Normal / Full / Outros) */
.saidas-mod-linha {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 0;
  border-top: 1px solid var(--border, #eee);
  font-size: 13px;
}
.saidas-mod-linha-tipo {
  font-weight: 700; min-width: 76px; font-size: 12px;
  color: var(--text-muted, #666);
}
.saidas-mod-linha-flex   .saidas-mod-linha-tipo { color: #1d4ed8; }
.saidas-mod-linha-normal .saidas-mod-linha-tipo { color: #374151; }
html[data-theme="dark"] .saidas-mod-linha-flex   .saidas-mod-linha-tipo { color: #93c5fd; }
html[data-theme="dark"] .saidas-mod-linha-normal .saidas-mod-linha-tipo { color: #d1d5db; }
.saidas-mod-num { font-weight: 700; color: var(--text, #111); }
.saidas-mod-det { color: var(--text-muted, #888); font-size: 11px; }
.saidas-mod-sep { color: var(--border, #ccc); font-size: 11px; margin: 0 1px; }

@media (max-width: 700px) {
  .saidas-abas { flex-wrap: wrap; }
  .saidas-aba  { padding: 8px 12px; font-size: 13px; }
}

/* === PAINEL DE SAÍDAS ML — Blocos de modalidade + quadros por dia + lista expansível === */

/* Blocos de modalidade — visualmente distintos, substituem as linhas inline */
.saidas-mod-bloco {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; border-radius: 6px;
  margin-top: 5px; font-size: 13px;
}
.saidas-mod-bloco-flex   { background: rgba(59,130,246,0.10); }
.saidas-mod-bloco-normal { background: rgba(0,0,0,0.04); }
.saidas-mod-bloco-full   { background: rgba(16,185,129,0.10); }
.saidas-mod-bloco-outros { background: rgba(245,158,11,0.10); }
html[data-theme="dark"] .saidas-mod-bloco-flex   { background: rgba(59,130,246,0.15); }
html[data-theme="dark"] .saidas-mod-bloco-normal { background: rgba(255,255,255,0.06); }
html[data-theme="dark"] .saidas-mod-bloco-full   { background: rgba(16,185,129,0.12); }
html[data-theme="dark"] .saidas-mod-bloco-outros { background: rgba(245,158,11,0.12); }

.saidas-mod-bloco-label { font-weight: 700; font-size: 12px; }
.saidas-mod-bloco-flex   .saidas-mod-bloco-label { color: #1d4ed8; }
.saidas-mod-bloco-normal .saidas-mod-bloco-label { color: #374151; }
.saidas-mod-bloco-full   .saidas-mod-bloco-label { color: #065f46; }
.saidas-mod-bloco-outros .saidas-mod-bloco-label { color: #92400e; }
html[data-theme="dark"] .saidas-mod-bloco-flex   .saidas-mod-bloco-label { color: #93c5fd; }
html[data-theme="dark"] .saidas-mod-bloco-normal .saidas-mod-bloco-label { color: #d1d5db; }
html[data-theme="dark"] .saidas-mod-bloco-full   .saidas-mod-bloco-label { color: #6ee7b7; }
html[data-theme="dark"] .saidas-mod-bloco-outros .saidas-mod-bloco-label { color: #fcd34d; }

.saidas-mod-bloco-stats { font-size: 12px; color: var(--text-muted, #666); }

/* Quadros por dia (aba Próximos dias) */
.saidas-quadro { padding: 10px 0 4px; }
.saidas-quadro-sep { border-bottom: 1px solid var(--border, #eee); padding-bottom: 10px; margin-bottom: 2px; }
.saidas-quadro-titulo {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-muted, #888);
  margin-bottom: 6px;
}

/* Lista expansível de pedidos */
.saidas-pedidos-details {
  margin-top: 8px;
  border-top: 1px dashed var(--border, #ddd);
  padding-top: 6px;
}
.saidas-pedidos-toggle {
  cursor: pointer; font-size: 12px; font-weight: 600;
  color: var(--text-muted, #666); user-select: none;
  list-style: none; padding: 2px 0;
}
.saidas-pedidos-toggle::marker,
.saidas-pedidos-toggle::-webkit-details-marker { display: none; }
.saidas-pedidos-details[open] .saidas-pedidos-toggle { color: var(--text, #333); }

.saidas-pedidos-scroll { overflow-x: auto; margin-top: 8px; }

.saidas-pedidos-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.saidas-pedidos-table th {
  text-align: left; padding: 4px 6px;
  background: var(--surface-alt, rgba(0,0,0,0.04));
  border-bottom: 1px solid var(--border, #ddd);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px;
  color: var(--text-muted, #888); white-space: nowrap;
}
.saidas-pedidos-table td {
  padding: 5px 6px;
  border-bottom: 1px solid var(--border, #f0f0f0);
  vertical-align: middle;
}
.saidas-pedidos-table tbody tr:last-child td { border-bottom: none; }
.saidas-pedidos-table tbody tr:hover { background: var(--surface-alt, rgba(0,0,0,0.02)); }

.saidas-ped-atrasado td { color: #dc2626; }
html[data-theme="dark"] .saidas-ped-atrasado td { color: #fca5a5; }
.saidas-ped-num  { font-family: monospace; font-size: 11px; white-space: nowrap; }
.saidas-ped-sku  { font-family: monospace; font-size: 11px; color: var(--text-muted, #777); }
.saidas-ped-qtd  { text-align: center; font-weight: 600; }
.saidas-ped-titulo {
  max-width: 180px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* === PAINEL DE SAÍDAS ML — visual v2 (metric cards + accordion modalidade) === */

/* Subheader do consolidado */
.saidas-sub { font-size: 14px; color: var(--text-muted, #9aa4b2); margin: 4px 0 18px; }
.saidas-sub strong { color: var(--text, #111); font-weight: 600; }
html[data-theme="dark"] .saidas-sub strong { color: #eef2f7; }

/* 3 metric cards — grid sem expansão */
.saidas-consolidado {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin: 0 0 28px;
}
.saidas-metric {
  background: var(--surface-alt, rgba(0,0,0,0.03));
  border: 1px solid var(--border, #ddd);
  border-radius: 12px; padding: 14px 16px;
}
html[data-theme="dark"] .saidas-metric {
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08);
}
.saidas-metric .lbl {
  font-size: 13px; color: var(--text-muted, #9aa4b2);
  display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
}
.saidas-metric .val {
  font-size: 26px; font-weight: 600; color: var(--text, #111); line-height: 1;
}
html[data-theme="dark"] .saidas-metric .val { color: #f2f5f9; }

/* Dot colorido */
.saidas-dot {
  width: 9px; height: 9px; border-radius: 50%;
  display: inline-block; flex: none;
}

/* Grid de painéis lado a lado */
.saidas-empresas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
  align-items: start;
}
@media (max-width: 760px) { .saidas-empresas-grid { grid-template-columns: 1fr; } }

/* Card por empresa */
.saidas-empresa {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #ddd);
  border-radius: 14px; padding: 14px 18px; margin-bottom: 14px;
}
html[data-theme="dark"] .saidas-empresa {
  background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08);
}
.saidas-empresa-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 6px;
}
.saidas-empresa-head .nome {
  font-size: 16px; font-weight: 600; color: var(--text, #111);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
html[data-theme="dark"] .saidas-empresa-head .nome { color: #f2f5f9; }
.saidas-tipo {
  font-size: 11px; font-weight: 500; padding: 2px 9px;
  border-radius: 999px;
  background: var(--surface-alt, rgba(0,0,0,0.06));
  color: var(--text-muted, #555);
}
html[data-theme="dark"] .saidas-tipo { background: rgba(255,255,255,.08); color: #c7d0db; }
.saidas-meta { font-size: 12px; color: var(--text-muted, #7c8595); white-space: nowrap; }
.saidas-empresa-actions { display: flex; align-items: center; gap: 6px; }

/* Accordion por modalidade — mata marcador padrão do <details> */
.saidas-mod {
  border: 1px solid var(--border, #eee);
  border-radius: 10px; margin-top: 8px;
  background: var(--surface-alt, rgba(0,0,0,0.02));
}
html[data-theme="dark"] .saidas-mod {
  border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.02);
}
.saidas-mod > summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px;
}
.saidas-mod > summary::-webkit-details-marker { display: none; }
.saidas-mod > summary::marker { content: ""; }
.saidas-mod > summary:hover { background: rgba(0,0,0,.03); border-radius: 10px; }
html[data-theme="dark"] .saidas-mod > summary:hover { background: rgba(255,255,255,.04); }

.saidas-mod .mod-left {
  display: flex; align-items: center; gap: 10px;
  font-weight: 500; color: var(--text, #111);
}
html[data-theme="dark"] .saidas-mod .mod-left { color: #e7ecf2; }
.saidas-mod .mod-right { display: flex; align-items: center; gap: 14px; }
.saidas-mod .mod-num { font-size: 20px; font-weight: 600; color: var(--text, #111); }
html[data-theme="dark"] .saidas-mod .mod-num { color: #f2f5f9; }
.saidas-mod .chev {
  transition: transform .18s ease; color: var(--text-muted, #7c8595);
  font-size: 18px; line-height: 1; display: inline-block;
}
.saidas-mod[open] .chev { transform: rotate(90deg); }

/* Lista de pedidos */
.saidas-lista { padding: 0 8px 8px; }
.saidas-ped {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 8px; font-size: 13px;
  border-top: 1px solid var(--border, #eee); color: var(--text, #111);
}
html[data-theme="dark"] .saidas-ped { border-color: rgba(255,255,255,.06); color: #dfe5ec; }
.saidas-ped .pid {
  color: var(--text-muted, #7c8595); font-family: monospace;
  font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.saidas-ped .desc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saidas-ped .qtd { color: var(--text-muted, #7c8595); white-space: nowrap; }

/* Badges — pílulas claras, legíveis nos dois temas */
.badge { font-size: 11px; padding: 2px 8px; border-radius: 8px; white-space: nowrap; font-weight: 500; }
.badge-pacote   { background: #FAECE7; color: #993C1D; }
.badge-nfe      { background: #FAEEDA; color: #854F0B; }
.badge-imprimir { background: #E6F1FB; color: #0C447C; }

@media (max-width: 700px) {
  .saidas-consolidado { grid-template-columns: 1fr; gap: 8px; }
  .saidas-metric .val { font-size: 22px; }
  .saidas-meta { display: none; }
}

/* Timestamp e stale warning no subheader */
.saidas-ts { color: var(--text-muted, #9aa4b2); font-size: 12px; }
.saidas-stale { color: #d97706; font-size: 12px; font-weight: 500; }
html[data-theme="dark"] .saidas-stale { color: #fbbf24; }

/* Estado "preparando" (1º boot sem snapshot) */
.saidas-preparando {
  text-align: center; padding: 48px 24px;
  color: var(--text, #111);
}
.saidas-preparando-sub { font-size: 13px; color: var(--text-muted, #999); margin-top: 6px; }

/* Atrasados */
.badge-atrasado { background: #FCEBEB; color: #A32D2D; }
.saidas-ped.atrasado { background: rgba(226,75,74,.07); }
.saidas-ped.atrasado .pid { color: #E24B4A; }
.mod-atraso {
  font-size: 11px; font-weight: 500; padding: 2px 8px;
  border-radius: 999px; background: #FCEBEB; color: #A32D2D; margin-right: 10px;
}
html[data-theme="dark"] .badge-atrasado { background: rgba(226,75,74,.18); color: #fca5a5; }
html[data-theme="dark"] .saidas-ped.atrasado { background: rgba(226,75,74,.10); }
html[data-theme="dark"] .saidas-ped.atrasado .pid { color: #fca5a5; }
html[data-theme="dark"] .mod-atraso { background: rgba(226,75,74,.18); color: #fca5a5; }


/* === PAINEL SAÍDAS — separação hoje vs próximos dias === */

/* Cabeçalho de bucket (hoje ou dia futuro) */
.saidas-bucket-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 5px;
  margin: 8px 0 4px;
}
.saidas-bucket-hoje {
  background: rgba(29,158,117,.12);
  color: #1D9E75;
}
html[data-theme="dark"] .saidas-bucket-hoje {
  background: rgba(29,158,117,.18);
  color: #4ade80;
}
.saidas-bucket-prox {
  background: rgba(99,102,241,.08);
  color: var(--text-muted, #666);
}
html[data-theme="dark"] .saidas-bucket-prox {
  background: rgba(99,102,241,.13);
}
.saidas-bucket-total {
  background: var(--surface, #fff);
  border: 1px solid currentColor;
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 11px;
  opacity: .9;
}
.saidas-mod-prox { opacity: .82; }
.saidas-hoje-vazio {
  font-size: 13px;
  color: var(--text-muted, #999);
  margin: 8px 0 4px;
  padding: 4px 0;
}

/* ── BIPAGEM DE DESPACHO ───────────────────────────────────────────────────── */

.bip-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bip-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bip-titulo { font-size: 1.35rem; font-weight: 700; margin: 0; }
.bip-data   { color: var(--text-muted); font-size: 0.85rem; }
.bip-snap-age {
  font-size: 0.78rem; background: rgba(99,102,241,0.12);
  border-radius: 10px; padding: 2px 8px; color: var(--accent);
}
.bip-snap-stale { background: rgba(245,158,11,0.15); color: #b45309; }
html[data-theme="dark"] .bip-snap-stale { color: #fbbf24; }

.bip-zona-scan { display: flex; flex-direction: column; gap: 14px; }

.bip-input-wrap { display: flex; gap: 8px; }
.bip-input {
  flex: 1; font-size: 1.5rem; padding: 12px 16px;
  border-radius: 10px; border: 2px solid var(--border);
  background: var(--surface); color: var(--text); outline: none;
  letter-spacing: 0.04em; transition: border-color .15s;
}
.bip-input:focus { border-color: var(--accent); }
.bip-btn-manual {
  padding: 0 20px; font-size: 1.4rem; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text); cursor: pointer;
}
.bip-btn-manual:hover { border-color: var(--accent); }

.bip-resultado {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 20px; border-radius: 12px;
  border: 1.5px solid var(--border); background: var(--surface);
  min-height: 72px; transition: background .2s, border-color .2s;
}
.bip-resultado-icon {
  font-size: 2.4rem; line-height: 1; flex-shrink: 0;
  min-width: 44px; text-align: center;
}
.bip-resultado-corpo { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.bip-resultado-msg   { font-size: 1.1rem; font-weight: 600; }
.bip-resultado-detalhe { font-size: 0.85rem; color: var(--text-muted); }
.bip-resultado-acoes { margin-top: 6px; }

.bip-resultado-vazio { border-color: var(--border); }

.bip-despachado { background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.5); }
.bip-despachado .bip-resultado-icon { color: #059669; }
.bip-despachado .bip-resultado-msg  { color: #065f46; }

.bip-duplicado { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.5); }
.bip-duplicado .bip-resultado-icon { color: #b45309; }
.bip-duplicado .bip-resultado-msg  { color: #78350f; }

.bip-fora-lista   { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.4); }
.bip-sem-snapshot { background: rgba(239,68,68,0.08);  border-color: rgba(239,68,68,0.3); }
.bip-erro         { background: rgba(239,68,68,0.10);  border-color: rgba(239,68,68,0.5); }
.bip-erro .bip-resultado-icon, .bip-sem-snapshot .bip-resultado-icon { color: #dc2626; }
.bip-erro .bip-resultado-msg,  .bip-sem-snapshot .bip-resultado-msg  { color: #991b1b; }

html[data-theme="dark"] .bip-despachado { background: rgba(16,185,129,0.14); }
html[data-theme="dark"] .bip-despachado .bip-resultado-msg { color: #6ee7b7; }
html[data-theme="dark"] .bip-duplicado  { background: rgba(245,158,11,0.14); }
html[data-theme="dark"] .bip-duplicado .bip-resultado-msg  { color: #fcd34d; }
html[data-theme="dark"] .bip-fora-lista { background: rgba(245,158,11,0.10); }
html[data-theme="dark"] .bip-erro .bip-resultado-msg,
html[data-theme="dark"] .bip-sem-snapshot .bip-resultado-msg { color: #fca5a5; }

.bip-itens-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.bip-sku-chip {
  font-size: 0.78rem; background: rgba(99,102,241,0.12);
  border-radius: 6px; padding: 2px 7px; color: var(--accent); font-weight: 600;
}

.btn-estornar-inline {
  padding: 4px 12px; font-size: 0.82rem; border-radius: 6px;
  border: 1.5px solid rgba(245,158,11,0.5);
  background: rgba(245,158,11,0.08); color: #92400e; cursor: pointer;
}
.btn-estornar-inline:hover { background: rgba(245,158,11,0.18); }
html[data-theme="dark"] .btn-estornar-inline { color: #fcd34d; }

.bip-recon-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 20px;
}
.bip-recon-header {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 12px;
}
.bip-recon-titulo { font-size: 1rem; font-weight: 700; margin: 0; }
.bip-recon-erro { color: #dc2626; padding: 8px 0; }

.bip-recon-totais { display: flex; gap: 16px; margin-bottom: 10px; flex-wrap: wrap; }
.bip-recon-tot {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 16px; border-radius: 10px;
  border: 1.5px solid var(--border); min-width: 90px;
}
.bip-tot-n     { font-size: 2rem; font-weight: 800; line-height: 1; }
.bip-tot-label { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
.bip-tot-bipados { border-color: rgba(99,102,241,0.4); background: rgba(99,102,241,0.07); }
.bip-tot-bipados .bip-tot-n { color: var(--accent); }
.bip-tot-faltam  { border-color: rgba(245,158,11,0.5); background: rgba(245,158,11,0.09); }
.bip-tot-faltam .bip-tot-n  { color: #d97706; }
.bip-tot-ok      { border-color: rgba(16,185,129,0.5); background: rgba(16,185,129,0.09); }
.bip-tot-ok .bip-tot-n      { color: #059669; }

.bip-prog-barra-wrap {
  height: 8px; background: rgba(0,0,0,0.08);
  border-radius: 4px; overflow: hidden; margin-bottom: 12px;
}
.bip-prog-barra {
  height: 100%; border-radius: 4px;
  transition: width 0.4s ease; min-width: 4px;
}
.bip-prog-verde { background: #10b981; }
.bip-prog-azul  { background: var(--accent); }
.bip-prog-ambar { background: #f59e0b; }

.bip-recon-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-bottom: 8px; }
.bip-recon-table th, .bip-recon-table td {
  padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: left;
}
.bip-recon-table th { color: var(--text-muted); font-weight: 600; font-size: 0.78rem; }
.bip-faltam-n { color: #d97706; font-weight: 700; }
.bip-ok-n     { color: #059669; font-weight: 700; }
.bip-corte-cell small { color: var(--text-muted); }
.bip-corte-alerta {
  display: inline-block; margin-left: 6px;
  background: rgba(239,68,68,0.15); color: #dc2626;
  border-radius: 6px; padding: 1px 7px; font-size: 0.75rem; font-weight: 700;
}

.bip-faltam-details { margin-top: 8px; font-size: 0.83rem; }
.bip-faltam-details summary { cursor: pointer; color: #d97706; font-weight: 600; padding: 4px 0; }
.bip-faltam-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.bip-faltam-table th, .bip-faltam-table td { padding: 4px 8px; border-bottom: 1px solid var(--border); }
.bip-faltam-table th { font-size: 0.75rem; color: var(--text-muted); }

.bip-snap-note { font-size: 0.75rem; color: var(--text-muted); margin-top: 6px; text-align: right; }

/* Selo "de ontem" — pacotes carregados de dia anterior, já bipados (contam como feitos) */
.bip-carregados { margin: 8px 0 2px; font-size: 0.82rem; }
.bip-carregados > summary {
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-muted); font-weight: 600; list-style: none;
  background: rgba(245,180,90,0.12); border: 1px solid rgba(245,180,90,0.35);
  border-radius: 999px; padding: 3px 12px;
}
.bip-carregados > summary::-webkit-details-marker { display: none; }
.bip-carregados[open] > summary { margin-bottom: 8px; }

/* Número de pedido copiável */
.bip-ped-cell { white-space: nowrap; }
.bip-ped-num  { user-select: text; cursor: text; }
.btn-copiar-ped {
  padding: 1px 5px; font-size: 0.7rem; border-radius: 4px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-muted); cursor: pointer; margin-left: 4px;
  opacity: 0.55; vertical-align: middle;
}
.btn-copiar-ped:hover      { opacity: 1; border-color: var(--accent); color: var(--accent); }
.btn-copiar-ped-ok         { opacity: 1; border-color: #10b981 !important; color: #10b981 !important; }

/* Divisões Coleta / Flex / Pacotes */
.bip-divisoes { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.bip-div-summary {
  cursor: pointer; font-weight: 600; padding: 5px 0;
  display: flex; align-items: center; gap: 8px;
  list-style: none; color: var(--text);
}
.bip-div-summary::-webkit-details-marker { display: none; }
.bip-div-summary::-moz-list-bullet       { list-style-type: none; }
.bip-div-summary::before { content: "\0025B6"; font-size: 0.6rem; color: var(--text-muted); flex-shrink: 0; }
details[open] > .bip-div-summary::before { content: "\0025BC"; }
.bip-div-counts {
  font-weight: 400; font-size: 0.8rem; color: var(--text-muted);
  display: inline-flex; gap: 4px; align-items: center;
}

.bip-historico-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 20px;
}
.bip-hist-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
.bip-hist-table th, .bip-hist-table td {
  padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: left;
}
.bip-hist-table th { color: var(--text-muted); font-weight: 600; font-size: 0.76rem; }
.bip-hist-hora { font-variant-numeric: tabular-nums; }
.bip-hist-ship { font-family: monospace; font-size: 0.82rem; color: var(--text-muted); }
.bip-hist-estornado td { color: var(--text-muted); text-decoration: line-through; }
.bip-hist-estornado .badge { text-decoration: none; }

.btn-estornar {
  padding: 3px 8px; font-size: 0.78rem; border-radius: 5px;
  border: 1.5px solid var(--border); background: transparent;
  color: var(--text-muted); cursor: pointer;
}
.btn-estornar:hover { border-color: #f59e0b; color: #92400e; }

.badge-verde {
  background: rgba(16,185,129,0.15); color: #065f46;
  padding: 2px 8px; border-radius: 8px; font-size: 0.76rem; font-weight: 600;
}
.badge-cinza {
  background: rgba(0,0,0,0.07); color: var(--text-muted);
  padding: 2px 8px; border-radius: 8px; font-size: 0.76rem;
}
html[data-theme="dark"] .badge-verde { background: rgba(16,185,129,0.2); color: #6ee7b7; }
html[data-theme="dark"] .badge-cinza { background: rgba(255,255,255,0.08); }

/* Badges novos: azul (sem_bip) e vermelho (cancelado) */
.badge-azul {
  background: rgba(99,102,241,0.15); color: #3730a3;
  font-weight: 600; padding: 2px 8px; border-radius: 8px; font-size: 0.76rem;
}
.badge-vermelho {
  background: rgba(239,68,68,0.15); color: #991b1b;
  font-weight: 600; padding: 2px 8px; border-radius: 8px; font-size: 0.76rem;
}
html[data-theme="dark"] .badge-azul    { background: rgba(99,102,241,0.2); color: #a5b4fc; }
html[data-theme="dark"] .badge-vermelho{ background: rgba(239,68,68,0.2); color: #fca5a5; }

/* Linhas do histórico: sem_bip (azul-sutil) e cancelado (vermelho-sutil) */
.bip-hist-sem_bip td { color: #3730a3; }
.bip-hist-sem_bip .badge { text-decoration: none; }
.bip-hist-cancelado td { color: #991b1b; }
.bip-hist-cancelado .badge { text-decoration: none; }
html[data-theme="dark"] .bip-hist-sem_bip td    { color: #a5b4fc; }
html[data-theme="dark"] .bip-hist-cancelado td  { color: #fca5a5; }

/* Resultado "cancelado" no box de feedback */
.bip-cancelado { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.5); }
.bip-cancelado .bip-resultado-icon { color: #dc2626; }
.bip-cancelado .bip-resultado-msg  { color: #991b1b; }
html[data-theme="dark"] .bip-cancelado .bip-resultado-msg { color: #fca5a5; }

/* Resultado "antecipado" — despacho fora da lista de hoje (prazo futuro), âmbar distinto */
.bip-antecipado { background: rgba(234,179,8,0.12); border-color: rgba(234,179,8,0.55); }
.bip-antecipado .bip-resultado-icon { color: #a16207; }
.bip-antecipado .bip-resultado-msg  { color: #713f12; }
.bip-page .bip-antecipado::before  { background: #f59e0b; }
.bip-page .bip-antecipado .bip-resultado-icon { animation: bip-pop .26s ease-out; }
html[data-theme="dark"] .bip-antecipado { background: rgba(234,179,8,0.16); }
html[data-theme="dark"] .bip-antecipado .bip-resultado-msg { color: #fde68a; }

/* Despachados antecipados na reconciliação */
.bip-antecip-det { margin: 6px 0; font-size: 0.87rem; }
.bip-antecip-det summary { cursor: pointer; color: #a16207; font-weight: 600; }

/* Contadores de sem_bip e cancelados na reconciliação */
.bip-tot-sem-bip   { border-color: rgba(99,102,241,0.4); }
.bip-tot-sem-bip .bip-tot-n { color: var(--accent); }
.bip-tot-cancelados { border-color: rgba(239,68,68,0.5); }
.bip-tot-cancelados .bip-tot-n { color: #dc2626; }

@media (max-width: 640px) {
  .bip-hist-table th:nth-child(4), .bip-hist-table td:nth-child(4),
  .bip-hist-table th:nth-child(5), .bip-hist-table td:nth-child(5) { display: none; }
  .bip-recon-totais { gap: 8px; }
  .bip-recon-tot { min-width: 70px; padding: 8px 10px; }
  .bip-tot-n { font-size: 1.6rem; }
}

/* ── HISTÓRICO DE BIPAGEM (/estoque/bipagem/historico/) ── */
.hist-bip-page { max-width: 1100px; margin: 0 auto; padding: 0 16px 40px; }

.hist-bip-header { display: flex; align-items: baseline; gap: 14px; margin: 18px 0 14px; }
.hist-bip-header h1 { font-size: 1.3rem; margin: 0; }
.hist-bip-total { font-size: 0.82rem; color: var(--text-muted); }

.hist-bip-filtros {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 14px; margin-bottom: 18px;
}
.hist-bip-input-busca {
  flex: 1 1 220px; min-width: 160px;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); font-size: 0.88rem;
}
.hist-bip-input-data, .hist-bip-select {
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); font-size: 0.88rem;
}
.btn-sm-outline {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-muted); padding: 5px 10px; border-radius: 6px;
  font-size: 0.82rem; cursor: pointer; text-decoration: none;
}
.btn-sm-outline:hover { background: var(--surface-soft); }

.hist-bip-grupo { margin-bottom: 24px; }
.hist-bip-grupo-header {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 0.95rem;
  padding: 6px 0; border-bottom: 2px solid var(--border);
  margin-bottom: 4px; color: var(--text);
}
.hist-bip-grupo-count { font-size: 0.78rem; color: var(--text-muted); font-weight: 400; }

.hist-bip-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.hist-bip-table th {
  text-align: left; padding: 6px 10px;
  background: var(--surface-soft); color: var(--text-muted);
  font-weight: 600; font-size: 0.78rem; border-bottom: 1px solid var(--border);
}
.hist-bip-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.hist-bip-row:hover td { background: var(--surface-soft); }

.hist-bip-hora { font-variant-numeric: tabular-nums; color: var(--text-muted); white-space: nowrap; }
.hist-bip-operador { color: var(--text-muted); font-size: 0.8rem; }

.hist-bip-ped-cell { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.hist-bip-ped-num  { font-variant-numeric: tabular-nums; }
.btn-copiar-hist {
  background: none; border: none; cursor: pointer;
  padding: 2px 4px; border-radius: 4px; font-size: 0.8rem;
  color: var(--text-muted); line-height: 1;
}
.btn-copiar-hist:hover { background: var(--surface-soft); color: var(--text); }

/* Row colorida por status */
.hist-bip-despachado td { }
.hist-bip-sem_bip td    { background: rgba(99,102,241,0.04); }
.hist-bip-cancelado td  { background: rgba(239,68,68,0.04); }
.hist-bip-estornado td  { opacity: 0.6; }

.hist-bip-paginacao {
  display: flex; align-items: center; gap: 12px;
  justify-content: center; margin-top: 20px;
}
.hist-bip-pag-info { font-size: 0.85rem; color: var(--text-muted); }

.hist-bip-vazio {
  text-align: center; padding: 40px; color: var(--text-muted);
  background: var(--surface); border: 1px dashed var(--border); border-radius: 8px;
}

@media (max-width: 700px) {
  .hist-bip-table th:nth-child(4),
  .hist-bip-table td:nth-child(4),
  .hist-bip-table th:nth-child(7),
  .hist-bip-table td:nth-child(7) { display: none; }
}

/* ── BIPAGEM — Painel 2 fluxos (Flex × Pacotes) + Multi-itens ── */
.bip-fluxos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.bip-fluxo { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.bip-fluxo-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bip-fluxo-icone { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 9px; font-size: 1.15rem; }
.bip-fluxo-flex .bip-fluxo-icone { background: rgba(217,151,34,0.16); }
.bip-fluxo-pacotes .bip-fluxo-icone { background: rgba(56,138,221,0.16); }
.bip-fluxo-proxima_coleta .bip-fluxo-icone { background: rgba(107,114,128,0.15); }
.bip-fluxo-titulo { display: flex; flex-direction: column; flex: 1; line-height: 1.2; min-width: 0; }
.bip-fluxo-nome { font-weight: 700; font-size: 0.98rem; color: var(--text); }
.bip-fluxo-sub { font-size: 0.74rem; color: var(--text-muted); }
.bip-fluxo-pill { font-size: 0.74rem; font-weight: 700; padding: 3px 9px; border-radius: 8px; white-space: nowrap; }
.bip-pill-ok { background: rgba(16,185,129,0.16); color: #059669; }
.bip-pill-falta { background: rgba(217,151,34,0.16); color: #d97706; }
.bip-pill-neutro { background: rgba(0,0,0,0.06); color: var(--text-muted); }
html[data-theme="dark"] .bip-pill-ok { color: #3fb950; }
html[data-theme="dark"] .bip-pill-falta { color: #e3b341; }
html[data-theme="dark"] .bip-pill-neutro { background: rgba(255,255,255,0.07); }
.bip-fluxo-frac { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; }
.bip-fluxo-frac-n { font-size: 1.7rem; font-weight: 800; line-height: 1; color: var(--text); }
.bip-fluxo-frac-tot { font-size: 0.8rem; color: var(--text-muted); }
.bip-fluxo-bar { margin-bottom: 10px; }
.bip-fluxo-contas { display: flex; flex-direction: column; }
.bip-fluxo-conta { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border); font-size: 0.85rem; }
.bip-conta-nome { flex: 1; color: var(--text); font-weight: 600; min-width: 0; }
.bip-conta-corte { font-size: 0.74rem; color: var(--text-muted); white-space: nowrap; }
.bip-conta-badge { font-size: 0.76rem; font-weight: 700; padding: 2px 8px; border-radius: 7px; white-space: nowrap; }
.bip-conta-ok { background: rgba(16,185,129,0.15); color: #059669; }
.bip-conta-falta { background: rgba(217,151,34,0.15); color: #d97706; }
html[data-theme="dark"] .bip-conta-ok { color: #3fb950; }
html[data-theme="dark"] .bip-conta-falta { color: #e3b341; }
.bip-fluxo-faltam { margin-top: 8px; font-size: 0.82rem; }
.bip-fluxo-faltam summary { cursor: pointer; color: var(--text-muted); font-weight: 600; padding: 4px 0; }
.bip-fluxo-vazio { font-size: 0.82rem; color: var(--text-muted); padding: 8px 0; }
.bip-multi { margin-top: 14px; background: var(--surface); border: 1px solid rgba(184,138,219,0.45); border-radius: 12px; padding: 14px 16px; }
.bip-multi-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.bip-multi-icone { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: rgba(184,138,219,0.18); border-radius: 8px; font-size: 1rem; }
.bip-multi-nome { font-weight: 700; color: var(--text); }
.bip-multi-sub { font-size: 0.78rem; color: var(--text-muted); }
.bip-multi-lista { display: flex; flex-direction: column; gap: 8px; }
.bip-multi-item { border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; background: var(--surface-soft); }
.bip-multi-feito { opacity: 0.55; }
.bip-multi-linha1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.84rem; }
.bip-multi-conta { font-weight: 700; color: var(--text); }
.bip-multi-stream { font-size: 0.72rem; font-weight: 700; padding: 1px 7px; border-radius: 6px; }
.bip-stream-flex { background: rgba(217,151,34,0.16); color: #d97706; }
.bip-stream-pacotes { background: rgba(56,138,221,0.16); color: var(--accent); }
html[data-theme="dark"] .bip-stream-flex { color: #e3b341; }
.bip-multi-comprador { color: var(--text-muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bip-multi-qtd { font-weight: 800; color: #d97706; font-size: 0.82rem; white-space: nowrap; }
.bip-multi-check { font-weight: 700; color: #059669; font-size: 0.78rem; white-space: nowrap; }
html[data-theme="dark"] .bip-multi-qtd { color: #e3b341; }
html[data-theme="dark"] .bip-multi-check { color: #3fb950; }
.bip-multi-itens { display: flex; flex-direction: column; gap: 4px; margin-top: 7px; }
.bip-multi-it { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; }
.bip-multi-it-qtd { font-weight: 800; color: var(--accent); background: rgba(56,138,221,0.14); border-radius: 6px; padding: 1px 7px; flex-shrink: 0; }
.bip-multi-it-sku { font-family: monospace; font-size: 0.76rem; color: var(--text-muted); flex-shrink: 0; }
.bip-multi-it-titulo { color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) { .bip-fluxos { grid-template-columns: 1fr; } }

/* % dentro da barra de progresso */
.bip-prog-barra-wrap { height: 16px; position: relative; }
.bip-prog-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; color: var(--text); pointer-events: none;
  letter-spacing: 0.02em; text-shadow: 0 1px 1px rgba(0,0,0,0.25);
}

/* Histórico minimizado por padrão */
.bip-hist-summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  list-style: none; font-weight: 700; color: var(--text);
}
.bip-hist-summary::-webkit-details-marker { display: none; }
.bip-hist-summary::before { content: "\0025B6"; font-size: 0.7rem; color: var(--text-muted); }
.bip-hist-details[open] .bip-hist-summary::before { content: "\0025BC"; }
.bip-hist-summary-titulo { font-size: 1rem; }
.bip-hist-badge { background: var(--accent-bg); color: var(--accent-dark); font-size: 0.76rem; font-weight: 700; padding: 1px 9px; border-radius: 20px; }
.bip-hist-summary-hint { margin-left: auto; font-size: 0.76rem; font-weight: 400; color: var(--text-muted); }
.bip-hist-details[open] .bip-hist-summary-hint { display: none; }
.bip-hist-corpo { padding-top: 12px; }
.bip-hist-link { font-size: 0.85rem; color: var(--text-muted); display: inline-block; margin-bottom: 10px; }

/* Janela do carrier ao lado do corte (Pacotes) */
.bip-conta-janela { font-size: 0.92em; opacity: 0.82; }
.bip-hist-modelo { font-size: 0.82rem; color: var(--text-soft); max-width: 320px; line-height: 1.25; }

/* Histórico em seções (Pedidos / Flex manhã-tarde), agrupado por empresa */
.bip-hist-vazia { color: var(--text-muted); font-size: 0.86rem; padding: 8px 2px; }
.bip-hist-secao { margin-bottom: 14px; }
.bip-hist-secao-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.95rem; padding: 6px 10px; border-radius: 8px; margin-bottom: 8px; }
.bip-head-pedidos { background: rgba(56,138,221,0.14); color: var(--accent); }
.bip-head-flex { background: rgba(217,151,34,0.16); color: #d97706; }
html[data-theme="dark"] .bip-head-flex { color: #e3b341; }
.bip-hist-secao-n { margin-left: auto; font-weight: 700; opacity: 0.9; }
.bip-hist-flexsub { margin: 6px 0 10px; }
.bip-hist-flexsub-titulo { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.84rem; color: var(--text-soft); margin-bottom: 5px; }
.bip-hist-grupo { margin-bottom: 8px; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.bip-hist-grupo-conta { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.82rem; background: var(--surface-soft); padding: 5px 10px; color: var(--text); }
.bip-hist-grupo-n { margin-left: auto; font-weight: 600; color: var(--text-muted); font-size: 0.78rem; }
.bip-hist-linha { padding: 5px 10px; border-top: 1px solid var(--border); font-size: 0.8rem; }
.bip-hl-top { display: flex; align-items: center; gap: 8px; }
.bip-hl-hora { color: var(--text-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.bip-hist-grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 8px; align-items: start; }
.bip-hist-grupos .bip-hist-grupo { margin-bottom: 0; }
.bip-hl-modelo { flex: 1; min-width: 0; color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bip-hl-bot { display: flex; align-items: center; gap: 4px; margin-top: 1px; color: var(--text-muted); font-size: 0.75rem; }
.bip-hl-ped-num { font-variant-numeric: tabular-nums; }
.bip-hl-spacer { display: none; }

/* Resumo do dia no topo da bipagem (Normal/Flex/Total + multi-item + expandir) */
.bip-resumo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; align-items: start; }
.bip-resumo-box { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; }
.bip-resumo-sum { cursor: pointer; list-style: none; }
.bip-resumo-sum::-webkit-details-marker { display: none; }
.bip-resumo-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bip-resumo-label { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; }
.bip-resumo-exp { font-size: 0.72rem; color: var(--accent); white-space: nowrap; }
.bip-resumo-exp::after { content: " \0025BE"; }
.bip-resumo-box[open] .bip-resumo-exp::after { content: " \0025B4"; }
.bip-resumo-num { font-size: 2rem; font-weight: 800; line-height: 1.15; color: var(--text); }
.bip-resumo-multi { margin-top: 5px; font-size: 0.8rem; font-weight: 700; color: #b45309; background: rgba(217,151,34,0.16); border-radius: 7px; padding: 3px 9px; display: inline-block; }
html[data-theme="dark"] .bip-resumo-multi { color: #f0c674; background: rgba(217,151,34,0.18); }
.bip-resumo-emp { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; }
.bip-resumo-emp-linha { display: flex; justify-content: space-between; font-size: 0.82rem; }
.bip-resumo-emp-linha span:first-child { color: var(--text); font-weight: 600; }
.bip-resumo-emp-n { color: var(--text-muted); font-weight: 600; }
.bip-resumo-emp-vazio { color: var(--text-muted); font-size: 0.8rem; }
@media (max-width: 720px) { .bip-resumo { grid-template-columns: 1fr; } }

/* Mobile: prioriza a AÇÃO do operador. Reordena (só com flex/order — sem tocar no HTML
   nem no desktop) pra: header → bipar+câmera → reconciliação → resumo do dia → histórico.
   Antes, o campo de bipar ficava enterrado embaixo do resumo inteiro. */
@media (max-width: 720px) {
  .bip-page { display: flex; flex-direction: column; padding: 12px; }
  .bip-header     { order: -3; }
  .bip-zona-scan  { order: -2; }
  .bip-recon-wrap { order: -1; }
  .bip-input { height: 54px; font-size: 1.12rem; }
  .bip-titulo { font-size: 1.5rem; }
  .bip-recon-totais { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .bip-recon-tot { min-width: 0; padding: 11px 4px; }
  .bip-tot-n { font-size: 1.6rem; }
  .bip-tot-label { font-size: 0.66rem; line-height: 1.15; }
}
.bip-resumo-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.bip-resumo-bar-titulo { font-size: 0.9rem; font-weight: 700; color: var(--text); }
.bip-resumo-form-tudo, .bip-resumo-emp-form { margin: 0; display: inline; }
.bip-resumo-emp-linha { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; justify-content: flex-start; }
.bip-resumo-emp-nome { flex: 1; color: var(--text); font-weight: 600; }
.bip-btn-refresh-mini { background: none; border: none; cursor: pointer; font-size: 0.78rem; padding: 0 2px; opacity: 0.55; line-height: 1; }
.bip-btn-refresh-mini:hover { opacity: 1; }
.bip-resumo-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.bip-resumo-tab { background: none; border: 1px solid var(--border); border-radius: 20px; padding: 4px 14px; font-size: 0.82rem; color: var(--text-muted); cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.bip-resumo-tab.ativo { background: var(--accent-bg); border-color: transparent; color: var(--accent-dark); }
.bip-tab-n { background: rgba(127,127,127,0.22); border-radius: 10px; padding: 0 7px; font-size: 0.72rem; }
.bip-resumo-vazio { color: var(--text-muted); font-size: 0.85rem; padding: 8px 2px; }

/* Unidades por modelo/voltagem (contagem da separação) */
.bip-modelos { margin-top: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); padding: 9px 13px; }
.bip-modelos-sum { cursor: pointer; list-style: none; font-weight: 700; font-size: 0.88rem; color: var(--text); display: flex; align-items: center; gap: 8px; }
.bip-modelos-sum::-webkit-details-marker { display: none; }
.bip-modelos-sum::before { content: "\0025B6"; font-size: 0.6rem; color: var(--text-muted); }
.bip-modelos[open] .bip-modelos-sum::before { content: "\0025BC"; }
.bip-modelos-tot { margin-left: auto; color: var(--accent); font-weight: 800; }
.bip-modelos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2px 18px; margin-top: 10px; }
.bip-modelo-linha { display: flex; align-items: baseline; gap: 8px; font-size: 0.85rem; padding: 4px 0; border-bottom: 1px solid var(--border); }
.bip-modelo-nome { font-weight: 700; color: var(--text); min-width: 64px; }
.bip-modelo-qtd { font-weight: 800; color: var(--text); }
.bip-modelo-volts { margin-left: auto; display: inline-flex; gap: 8px; font-size: 0.77rem; white-space: nowrap; }
.bip-volt { color: var(--text-muted); }
.bip-volt-110 { color: #2563eb; font-weight: 600; }
.bip-volt-220 { color: #dc2626; font-weight: 600; }
html[data-theme="dark"] .bip-volt-110 { color: #6ea8ff; }
html[data-theme="dark"] .bip-volt-220 { color: #ff8a8a; }
.bip-hist-estornado { opacity: 0.5; }
.bip-hist-cancelado { opacity: 0.7; }

/* Resumo de modalidades das Saídas: sub-nota + quadro Total */
.saidas-metric-sub { font-size: 0.74rem; color: var(--text-muted); margin-top: 3px; }
.saidas-metric-total .val { color: var(--accent); }


/* ── TRIAGEM DE SKU ─────────────────────────────────────────────────────────── */
.triagem-intro { color: var(--text-muted); font-size: 0.9rem; max-width: 72ch; line-height: 1.5; margin: 4px 0 16px; }
.triagem-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; align-items: start; }
.triagem-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 12px 14px; }
.triagem-card-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.triagem-cod { font-family: monospace; font-weight: 800; font-size: 1rem; color: var(--text); word-break: break-all; }
.triagem-meta { font-size: 0.76rem; color: var(--text-muted); white-space: nowrap; }
.triagem-titulo { font-size: 0.8rem; color: var(--text-soft); margin: 4px 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ── Identidade de marketplace nas telas de expedição (ML × Shopee) ──────────────
   O operador alterna entre as duas telas o dia todo e elas são gêmeas. A faixa de cor
   + o chip da marca dão o "onde estou" em visão periférica, sem depender de ler o título.
   Mora aqui (global) de propósito: o CSS .mlx-* está DUPLICADO (inline no ML ×
   _expedicao_estilos.html na Shopee) e duplicar de novo seria pedir divergência. */
.mkt-bar { height: 5px; border-radius: 999px; margin-bottom: 14px; }
.mkt-bar-ml { background: linear-gradient(90deg, #FFE600, #FFF176); }
.mkt-bar-shp { background: linear-gradient(90deg, #EE4D2D, #FF8A65); }
.mkt-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.9px; text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  vertical-align: middle; margin-left: 9px; }
.mkt-chip-ml { background: rgba(255, 230, 0, 0.14); color: #FFE600; border: 1px solid rgba(255, 230, 0, 0.45); }
.mkt-chip-shp { background: rgba(238, 77, 45, 0.16); color: #FF8A65; border: 1px solid rgba(238, 77, 45, 0.55); }
/* a caixa de escanear na cor da marca — é onde o olho do operador fica parado */
.mkt-scan-ml .mlx-scanbox { border-color: rgba(255, 230, 0, 0.75) !important; }
.mkt-scan-shp .mlx-scanbox { border-color: rgba(238, 77, 45, 0.8) !important; }
.mkt-scan-ml .mlx-label { color: #FFE600 !important; }
.mkt-scan-shp .mlx-label { color: #FF8A65 !important; }

/* Borda de TODOS os quadros na cor da marca. Tom baixo (0.3) de propósito: é pra
   tingir a página, não competir com as bordas que CARREGAM SIGNIFICADO — vermelho
   (atrasado / cancelado a retirar), âmbar (possível atraso) e azul (adiantáveis).
   Por isso os :not() abaixo, e por isso as bordas coloridas inline continuam vencendo. */
.mkt-page-ml .mlx-card:not(.mlx-scan-card),
.mkt-page-ml .mlx-pcard:not(.mlx-atrasar-pcard):not(.mlx-possivel-pcard) {
  border-color: rgba(255, 230, 0, 0.30);
}
.mkt-page-shp .mlx-card:not(.mlx-scan-card),
.mkt-page-shp .mlx-pcard:not(.mlx-atrasar-pcard):not(.mlx-possivel-pcard) {
  border-color: rgba(238, 77, 45, 0.32);
}
.mkt-page-ml .mlx-scan-card { border-color: rgba(255, 230, 0, 0.55); }
.mkt-page-shp .mlx-scan-card { border-color: rgba(238, 77, 45, 0.55); }

.triagem-form { margin-top: 10px; }
/* Armadilha do SKU-pai da Shopee (anúncio sem voltagem) */
.triagem-alerta { margin-top: 8px; padding: 8px 10px; border-radius: 8px; font-size: 0.78rem; line-height: 1.45;
  background: rgba(239, 68, 68, 0.10); border: 1px solid rgba(239, 68, 68, 0.45); color: var(--text); }
.triagem-alerta code, .triagem-var-cab code, .triagem-var-ok code, .triagem-nota code { font-family: monospace; }
/* Quadro "SKU sem cadastro" — âmbar DISCRETO, recolhido por padrão. Enquanto o catálogo
   está em construção isso é rotina, não incidente: informa e registra, não alarma. */
.mlx-skulog { border-color: rgba(230, 160, 18, 0.42) !important; background: rgba(230, 160, 18, 0.05); }
.mlx-skulog summary::-webkit-details-marker { display: none; }
.mlx-skulog summary { list-style: none; }
.mlx-skulog summary::before { content: "▸ "; color: #e6a012; }
.mlx-skulog details[open] > summary::before { content: "▾ "; }

/* código que ainda NÃO virou baixa (está num pedido a despachar) — dá pra prevenir */
.triagem-preventivo { margin-top: 8px; padding: 7px 10px; border-radius: 8px; font-size: 0.76rem; line-height: 1.45;
  background: rgba(59, 130, 246, 0.10); border: 1px solid rgba(59, 130, 246, 0.42); color: var(--text); }
.triagem-var-cab { margin-top: 10px; font-size: 0.8rem; color: var(--text-soft); }
.triagem-var-ok { margin-top: 8px; font-size: 0.78rem; color: var(--text-muted); }
.triagem-nota { margin-top: 10px; font-size: 0.74rem; color: var(--text-muted); }
.triagem-comps { display: flex; flex-direction: column; gap: 6px; }
.triagem-comp-linha { display: flex; gap: 6px; }
.triagem-comp-linha select { flex: 1; min-width: 0; padding: 5px 7px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-soft); color: var(--text); font-size: 0.82rem; }
.triagem-qtd { width: 56px; padding: 5px 7px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-soft); color: var(--text); font-size: 0.82rem; text-align: center; }
.triagem-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 9px; }
.btn-add-comp { background: none; border: 1px dashed var(--border); border-radius: 7px; padding: 4px 10px; font-size: 0.78rem; color: var(--text-muted); cursor: pointer; }
.btn-add-comp:hover { color: var(--accent); border-color: var(--accent); }
.triagem-desc { flex: 1; min-width: 120px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-soft); color: var(--text); font-size: 0.8rem; }
.triagem-vazia { padding: 28px; text-align: center; color: var(--text-muted); font-size: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.triagem-mapeados { margin-top: 22px; }
.triagem-mapeados > summary { cursor: pointer; font-weight: 700; color: var(--text-muted); padding: 6px 0; }


/* ═══════════════════════════════════════════════════════════════════════════
   BIPAGEM — REFINO VISUAL v2 (2026-06-17)
   Polimento de UI/UX da tela de despacho. Prioridades (validadas por pesquisa
   de apps de scanning): (1) a AÇÃO de bipar é o herói; (2) feedback grande e
   "glanceável" + som; (3) reconciliação/fluxos/resumo limpos; (4) alvos de
   toque ≥44px no mobile; (5) cores via variáveis (dark/light); (6) no mobile a
   barra de scan fica FIXA no topo (sempre alcançável ao rolar).
   Este bloco é OVERRIDE puramente visual — não cria nenhuma classe nova exigida
   pelo JS (renderRecon) ou pelos partials Django. Para reverter: apague o bloco.
   ═══════════════════════════════════════════════════════════════════════════ */

.bip-page {
  --bip-radius: 16px;
  --bip-radius-sm: 11px;
  --bip-gap: 16px;
  --bip-ok: #10b981;
  --bip-warn: #d97706;
  --bip-danger: #dc2626;
  max-width: 1040px;
  gap: var(--bip-gap);
}
html[data-theme="dark"] .bip-page { --bip-ok: #3fb950; --bip-warn: #e3b341; --bip-danger: #f85149; }

/* ── Cabeçalho ── */
.bip-page .bip-titulo { font-size: 1.45rem; letter-spacing: -0.01em; }
.bip-page .bip-snap-age { margin-left: auto; font-weight: 600; }

/* ── ZONA DE SCAN (herói) ─────────────────────────────────────────────────
   Agrupa input + câmera + resultado num "cockpit" elevado. */
.bip-page .bip-zona-scan {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--bip-radius);
  padding: 16px;
  gap: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 18px 40px -28px rgba(0,0,0,0.35);
}

/* Campo de bipagem: maior, centralizado, com anel de foco */
.bip-page .bip-input {
  height: 62px;
  font-size: 1.55rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.06em;
  border-width: 2px;
  border-radius: var(--bip-radius-sm);
  background: var(--bg);
}
.bip-page .bip-input::placeholder { font-weight: 500; letter-spacing: normal; color: var(--text-muted); }
.bip-page .bip-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(56,139,253,0.20); }

/* Botão confirmar (⏎): ação primária preenchida */
.bip-page .bip-btn-manual {
  min-width: 64px; padding: 0 18px; font-size: 1.5rem;
  border: none; border-radius: var(--bip-radius-sm);
  background: var(--accent); color: #fff; font-weight: 700;
}
.bip-page .bip-btn-manual:hover { filter: brightness(1.07); }
.bip-page .bip-btn-manual:active { transform: scale(.98); }

/* Botão câmera: ação secundária (outline suave) — vence o <style> inline via especificidade */
.bip-zona-scan .bip-cam-btn {
  max-width: none; margin: 0;
  background: var(--accent-bg); color: var(--accent-dark);
  border: 1px solid transparent; border-radius: var(--bip-radius-sm);
  font-weight: 700;
}
.bip-zona-scan .bip-cam-btn:hover { filter: brightness(1.03); }

/* ── RESULTADO DO BIP (feedback grande e glanceável) ── */
.bip-page .bip-resultado {
  align-items: center; gap: 16px;
  padding: 16px 18px 16px 22px;
  border-width: 1px; border-radius: var(--bip-radius-sm);
  position: relative; overflow: hidden;
}
.bip-page .bip-resultado::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: transparent;
}
.bip-page .bip-resultado-icon { font-size: 2.7rem; min-width: 54px; }
.bip-page .bip-resultado-msg  { font-size: 1.18rem; font-weight: 700; letter-spacing: -0.01em; }
.bip-page .bip-resultado-detalhe { font-size: 0.88rem; }

/* Estado vazio: tracejado, discreto, com ícone de etiqueta */
.bip-page .bip-resultado-vazio { background: var(--surface-soft); border-style: dashed; }
.bip-page .bip-resultado-vazio .bip-resultado-icon { font-size: 0; }
.bip-page .bip-resultado-vazio .bip-resultado-icon::before { content: "\1F3F7\FE0F"; font-size: 2rem; opacity: .55; }
.bip-page .bip-resultado-vazio .bip-resultado-msg { color: var(--text-muted); }

/* Faixa lateral colorida por estado */
.bip-page .bip-despachado::before  { background: var(--bip-ok); }
.bip-page .bip-duplicado::before   { background: var(--bip-warn); }
.bip-page .bip-fora-lista::before  { background: var(--bip-warn); }
.bip-page .bip-cancelado::before,
.bip-page .bip-erro::before,
.bip-page .bip-sem-snapshot::before { background: var(--bip-danger); }

/* Pop do ícone quando muda de estado */
@keyframes bip-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.14); } 100% { transform: scale(1); opacity: 1; } }
.bip-page .bip-despachado .bip-resultado-icon,
.bip-page .bip-duplicado .bip-resultado-icon,
.bip-page .bip-cancelado .bip-resultado-icon,
.bip-page .bip-fora-lista .bip-resultado-icon,
.bip-page .bip-erro .bip-resultado-icon { animation: bip-pop .26s ease-out; }

/* SKUs do resultado: chips mais legíveis */
.bip-page .bip-sku-chip { font-size: 0.82rem; padding: 3px 9px; border-radius: 7px; }

/* ── Cards (reconciliação / histórico) ── */
.bip-page .bip-recon-wrap, .bip-page .bip-historico-wrap {
  border-radius: var(--bip-radius); box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.bip-page .bip-recon-titulo { font-size: 1.05rem; }

/* Tiles de totais: segmentados, número tabular */
.bip-page .bip-recon-totais { gap: 10px; }
.bip-page .bip-recon-tot {
  flex: 1; min-width: 84px; gap: 3px;
  padding: 13px 10px; border-radius: var(--bip-radius-sm);
  border-width: 1px; background: var(--surface-soft);
}
.bip-page .bip-tot-n { font-size: 2.15rem; font-variant-numeric: tabular-nums; }
.bip-page .bip-tot-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.bip-page .bip-tot-bipados .bip-tot-n { color: var(--accent); }
.bip-page .bip-tot-faltam  .bip-tot-n { color: var(--bip-warn); }
.bip-page .bip-tot-ok      .bip-tot-n { color: var(--bip-ok); }

/* Barra de progresso: maior, arredondada */
.bip-page .bip-prog-barra-wrap { height: 18px; border-radius: 9px; background: rgba(127,127,127,0.16); }
.bip-page .bip-prog-barra { border-radius: 9px; }
.bip-page .bip-prog-verde { background: var(--bip-ok); }
.bip-page .bip-prog-ambar { background: var(--bip-warn); }

/* ── Cards de fluxo (Flex × Pacotes) ── */
.bip-page .bip-fluxos { gap: 14px; }
.bip-page .bip-fluxo {
  border-radius: var(--bip-radius); padding: 16px 16px 16px 18px;
  position: relative; overflow: hidden;
}
.bip-page .bip-fluxo::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.bip-page .bip-fluxo-flex::before           { background: var(--bip-warn); }
.bip-page .bip-fluxo-pacotes::before        { background: var(--accent); }
.bip-page .bip-fluxo-proxima_coleta::before { background: #9ca3af; }
.bip-page .bip-fluxo-frac-n { font-size: 1.95rem; font-variant-numeric: tabular-nums; }
.bip-page .bip-fluxo-conta { padding: 9px 0; gap: 10px; }
.bip-page .bip-fluxo-pill, .bip-page .bip-conta-badge { border-radius: 999px; }

/* Pendentes / tabelas de detalhe: alvo de toque e respiro */
.bip-page .bip-fluxo-faltam summary,
.bip-page .bip-carregados > summary,
.bip-page .bip-modelos-sum,
.bip-page .bip-resumo-sum { min-height: 32px; display: flex; align-items: center; }

/* ── Resumo de Saídas (Normal/Flex/Total) + abas como segmented control ── */
.bip-page .bip-resumo { gap: 12px; }
.bip-page .bip-resumo-box { border-radius: var(--bip-radius); padding: 14px 16px; }
.bip-page .bip-resumo-num { font-size: 2.1rem; line-height: 1.1; }
.bip-page .bip-resumo-tabs {
  gap: 0; width: fit-content; padding: 4px;
  background: var(--surface-soft); border-radius: 12px;
}
.bip-page .bip-resumo-tab { border: none; border-radius: 9px; padding: 8px 16px; }
.bip-page .bip-resumo-tab.ativo {
  background: var(--surface); color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.14);
}

/* Botões utilitários (copiar nº, atualizar) — um pouco maiores */
.bip-page .btn-copiar-ped { padding: 3px 8px; font-size: 0.8rem; border-radius: 6px; }

/* Sub-nav do estoque: rolável no mobile (não corta itens quando há muitos) */
@media (max-width: 720px) {
  .estoque-subnav { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .estoque-subnav::-webkit-scrollbar { display: none; }
  .estoque-subnav a { white-space: nowrap; }
}

/* ── MOBILE: ação primeiro + barra de scan FIXA ──────────────────────────── */
@media (max-width: 720px) {
  .bip-page { padding: 12px; gap: 14px; }

  /* Ordem: cabeçalho → SCAN (fixo) → reconciliação → modelos → resumo → histórico */
  .bip-page .bip-header       { order: -4; }
  .bip-page .bip-zona-scan    { order: -3; }
  .bip-page .bip-recon-wrap   { order: -2; }
  .bip-page .bip-modelos-wrap { order: -1; }

  /* Barra de scan fixa no topo ao rolar a reconciliação */
  .bip-page .bip-zona-scan {
    position: sticky; top: 0; z-index: 20;
    margin: -12px -12px 0; padding: 12px;
    border-radius: 0 0 var(--bip-radius) var(--bip-radius);
    box-shadow: 0 8px 20px -10px rgba(0,0,0,0.45);
  }

  .bip-page .bip-input { height: 58px; font-size: 1.35rem; min-width: 0; }
  .bip-page .bip-btn-manual { min-width: 58px; flex: 0 0 auto; }
  .bip-page .bip-resultado { padding: 12px 12px 12px 18px; }
  .bip-page .bip-resultado-icon { font-size: 2.1rem; min-width: 42px; }
  .bip-page .bip-resultado-msg { font-size: 1.04rem; }

  .bip-page .bip-recon-totais { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .bip-page .bip-recon-tot { min-width: 0; padding: 11px 4px; }
  .bip-page .bip-tot-n { font-size: 1.7rem; }
  .bip-page .bip-tot-label { font-size: 0.64rem; line-height: 1.15; }

  .bip-page .bip-fluxos { grid-template-columns: 1fr; gap: 12px; }
  .bip-page .bip-fluxo-conta { padding: 12px 0; }     /* alvo de toque */
  .bip-page .btn-copiar-ped { padding: 6px 10px; }    /* alvo de toque */
  .bip-page .bip-resumo { grid-template-columns: 1fr; }

  /* Tabela de pendentes: esconde "Comprador" (menos crítico) p/ caber */
  .bip-page .bip-faltam-table th:nth-child(4),
  .bip-page .bip-faltam-table td:nth-child(4) { display: none; }
}
/* ═══════════ fim BIPAGEM REFINO VISUAL v2 ═══════════ */

/* ── MODAL ESTORNAR TODOS ── */
.bip-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.bip-modal-overlay[hidden] { display: none; }
.bip-modal { background: var(--surface); color: var(--text); border-radius: 14px; padding: 22px; max-width: 380px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.5); text-align: center; }
.bip-modal-msg { font-size: 1.05rem; margin: 0 0 18px; line-height: 1.4; }
.bip-modal-sub { font-size: .85rem; color: var(--text-muted); }
.bip-modal-acoes { display: flex; gap: 10px; justify-content: center; }
.bip-modal-acoes button { padding: 12px 18px; border-radius: 10px; font-weight: 700; cursor: pointer; font-size: 1rem; border: none; min-width: 96px; }
.bip-modal-nao { background: transparent; border: 1px solid var(--border) !important; color: var(--text); }
.bip-modal-sim { background: #b91c1c; color: #fff; }
.bip-btn-estornar-todos { color: #b91c1c; }

/* ─── DEVOLUÇÕES ML (cockpit) ─────────────────────────────────────────── */
.dev-secao { margin-bottom: 32px; }
.dev-secao-conferir { border-left: 3px solid #4d8ce8; padding-left: 14px; }
.dev-secao-conferidas { opacity: .78; }
.dev-h2 { font-size: 1.05rem; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.dev-h2-conferir { color: #4d8ce8; }
.dev-count { font-size: .78rem; background: rgba(255,255,255,.08); border-radius: 10px;
             padding: 1px 9px; font-weight: 500; }

/* Badges */
.dev-badge { font-size: .72rem; padding: 2px 9px; border-radius: 10px; white-space: nowrap;
             font-weight: 500; letter-spacing: .01em; }
.dev-conta { background: rgba(255,255,255,.10); text-transform: capitalize; }
.dev-conta-fritinox { background: rgba(77,140,232,.22); color: #aaccf8; }
.dev-conta-ajf      { background: rgba(84,212,163,.20); color: #8fe3c4; }
.dev-conta-tuttifriti { background: rgba(169,140,255,.22); color: #c5b1ff; }
.dev-pdd { background: rgba(255,255,255,.07); font-family: ui-monospace, monospace;
           font-size: .70rem; letter-spacing: .02em; }
.dev-dinheiro-refunded { background: rgba(232,165,77,.22); color: #f0c088; }
.dev-dinheiro-retained { background: rgba(84,212,163,.16); color: #8fe3c4; }
.dev-dinheiro-none { background: rgba(255,255,255,.06); opacity: .65; }

.dev-selo-frete { font-size: .70rem; padding: 2px 7px; border-radius: 8px;
                  background: rgba(232,107,77,.18); color: #f0a088; white-space: nowrap; }
.dev-orfao { cursor: help; }

/* Table container — card arredondado com borda sutil */
.dev-table-wrap { border: 1px solid rgba(255,255,255,.07); border-radius: 10px;
                  overflow: hidden; overflow-x: auto; }

/* Tabela */
.dev-tabela { width: 100%; border-collapse: collapse; font-size: .875rem; }

.dev-tabela thead tr { background: rgba(255,255,255,.04); }
.dev-tabela th { text-align: left; font-size: .68rem; text-transform: uppercase;
                 letter-spacing: .06em; font-weight: 600; color: rgba(255,255,255,.42);
                 padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.08);
                 white-space: nowrap; }

/* Linhas do corpo */
.dev-tabela tbody tr { transition: background .10s; }
.dev-tabela tbody tr:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,.04); }
.dev-tabela tbody tr:nth-child(even) { background: rgba(255,255,255,.022); }
.dev-tabela tbody tr:hover { background: rgba(255,255,255,.065) !important; }

/* Acento lateral colorido por conta — lê-se "todos os meus X" de relance */
.dev-tabela tbody tr.dev-row-fritinox   td:first-child { border-left: 3px solid rgba(77,140,232,.7);  padding-left: 11px; }
.dev-tabela tbody tr.dev-row-ajf        td:first-child { border-left: 3px solid rgba(84,212,163,.7);  padding-left: 11px; }
.dev-tabela tbody tr.dev-row-tuttifriti td:first-child { border-left: 3px solid rgba(169,140,255,.7); padding-left: 11px; }

/* Tint de fundo muito sutil por conta (reforça o acento) */
.dev-tabela tbody tr.dev-row-fritinox   { background: rgba(77,140,232,.03); }
.dev-tabela tbody tr.dev-row-ajf        { background: rgba(84,212,163,.03); }
.dev-tabela tbody tr.dev-row-tuttifriti { background: rgba(169,140,255,.03); }
.dev-tabela tbody tr.dev-row-fritinox:nth-child(even)   { background: rgba(77,140,232,.055); }
.dev-tabela tbody tr.dev-row-ajf:nth-child(even)        { background: rgba(84,212,163,.055); }
.dev-tabela tbody tr.dev-row-tuttifriti:nth-child(even) { background: rgba(169,140,255,.055); }

/* Células */
.dev-tabela td { padding: 10px 14px; vertical-align: middle; }

.dev-td-sku { font-family: ui-monospace, monospace; font-weight: 700; font-size: .9rem;
              white-space: nowrap; }
.dev-qtd { font-weight: 400; opacity: .7; font-size: .82rem; }
.dev-td-motivo { max-width: 400px; line-height: 1.4; color: rgba(255,255,255,.88); }
.dev-td-data { font-size: .80rem; opacity: .7; white-space: nowrap; font-family: ui-monospace, monospace; }
.dev-td-status { font-size: .80rem; opacity: .75; }
.dev-td-etiqueta { font-family: ui-monospace, monospace; font-size: .76rem; opacity: .55;
                   white-space: nowrap; }

.dev-conf-ok  { color: #8fe3c4; font-weight: 600; }
.dev-conf-def { color: #f0a088; font-weight: 600; }
.dev-vazio { opacity: .48; font-style: italic; padding: 18px 14px; }

@media (max-width: 760px) {
  .dev-td-motivo { max-width: 180px; }
  .dev-td-etiqueta { display: none; }
}

/* ─── BIPAR DEVOLUÇÃO ─── */
.bipdev-scan { margin: 16px 0; }
#bipdev-input { width:100%; max-width:480px; font-size:1.3rem; padding:14px 16px; border-radius:10px;
                border:2px solid rgba(77,140,232,.4); background:rgba(77,140,232,.06); color:inherit; }
#bipdev-input:focus { outline:none; border-color:#4d8ce8; }
.bipdev-resultado { margin-top:18px; padding:16px; border-radius:10px; min-height:40px; font-size:1.05rem; }
.bipdev-item { border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); }
.bipdev-sku { font-family:ui-monospace,monospace; font-size:1.2rem; }
.bipdev-motivo { opacity:.85; margin-top:6px; font-size:.92rem; }
.bipdev-usado { margin-top:4px; font-size:.85rem; color:#8fe3c4; }
.bipdev-botoes { display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.bipdev-btn { font-size:1.05rem; padding:14px 22px; border-radius:10px; border:none; cursor:pointer; color:#fff; }
.bipdev-ok { background:#2e9e6b; }
.bipdev-usadobtn { background:#4d8ce8; }
.bipdev-defeito { background:#c0603e; }
.bipdev-sucesso { background:rgba(46,158,107,.18); color:#8fe3c4; }
.bipdev-erro { background:rgba(192,96,62,.18); color:#f0a088; }
.bipdev-aviso { background:rgba(232,165,77,.18); color:#f0c088; }

/* ─── PAINEL DEVOLUÇÕES v1.1 ──────────────────────────────────────────── */

/* Abas de estágio */
.devv-abas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.devv-aba {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: .88rem;
  font-weight: 500;
  color: rgba(255,255,255,.65);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  text-decoration: none;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.devv-aba:hover { background: rgba(255,255,255,.11); color: rgba(255,255,255,.9); }
.devv-aba-ativa { background: rgba(77,140,232,.22); color: #aaccf8;
                  border-color: rgba(77,140,232,.4); }

.devv-badge-aba {
  font-size: .74rem;
  font-weight: 700;
  background: rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 1px 8px;
  line-height: 1.6;
}
.devv-badge-conferir { background: rgba(77,140,232,.35); color: #c0daff; }
.devv-badge-hoje     { background: rgba(232,165,77,.35); color: #f0d0a0; }
.devv-badge-risco    { background: rgba(240,160,136,.35); color: #f8c0a8; }
.devv-badge-enc      { background: rgba(255,255,255,.08); color: rgba(255,255,255,.45); }

/* Chip de frete em risco (transversal) */
.devv-chip-risco {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 7px 14px;
  border-radius: 20px;
  font-size: .82rem;
  font-weight: 500;
  color: rgba(240,160,136,.9);
  background: rgba(240,160,136,.08);
  border: 1px solid rgba(240,160,136,.25);
  text-decoration: none;
  transition: background .12s;
  white-space: nowrap;
}
.devv-chip-risco:hover { background: rgba(240,160,136,.16); }
.devv-chip-risco-ativo { background: rgba(240,160,136,.22); border-color: rgba(240,160,136,.5); }

/* Sub-título de grupo dentro de uma aba */
.devv-grupo-header {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(255,255,255,.38);
  padding: 4px 0 8px;
  margin-top: 4px;
}
.devv-grupo-header-hoje {
  color: rgba(232,165,77,.85);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Aviso de truncagem de encerradas */
.devv-aviso-limite {
  font-size: .82rem;
  opacity: .55;
  margin-bottom: 12px;
}

/* Lista de linhas */
.devv-lista { display: flex; flex-direction: column; gap: 6px; }
.devv-lista-destaque { margin-bottom: 20px; }
.devv-lista-encerradas { opacity: .8; }

/* Linha individual */
.devv-linha {
  display: grid;
  grid-template-columns: 100px 1fr 160px;
  gap: 12px;
  align-items: start;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-left: 3px solid rgba(255,255,255,.10);
  transition: background .10s;
}
.devv-linha:hover { background: rgba(255,255,255,.06); }

/* Acento lateral por conta */
.devv-linha-fritinox   { border-left-color: rgba(77,140,232,.65); background: rgba(77,140,232,.03); }
.devv-linha-ajf        { border-left-color: rgba(84,212,163,.65); background: rgba(84,212,163,.03); }
.devv-linha-tuttifriti { border-left-color: rgba(169,140,255,.65); background: rgba(169,140,255,.03); }

/* Coluna meta (conta + prazo) */
.devv-col-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.devv-conta {
  font-size: .72rem;
  font-weight: 700;
  text-transform: capitalize;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  white-space: nowrap;
}
.devv-conta-fritinox   { background: rgba(77,140,232,.22); color: #aaccf8; }
.devv-conta-ajf        { background: rgba(84,212,163,.22); color: #8fe3c4; }
.devv-conta-tuttifriti { background: rgba(169,140,255,.22); color: #cdb8ff; }

/* Prazo */
.devv-prazo {
  font-size: .76rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
  white-space: nowrap;
}
.devv-prazo-vencido  { background: rgba(192,62,62,.28); color: #f09090; }
.devv-prazo-urgente  { background: rgba(192,96,62,.22); color: #f0b090; }
.devv-prazo-atencao  { background: rgba(232,165,77,.18); color: #f0d090; }
.devv-prazo-ok       { background: rgba(255,255,255,.07); color: rgba(255,255,255,.55); }
.devv-prazo-none     { background: transparent; color: rgba(255,255,255,.28); font-weight: 400; }

/* Coluna info (produto + razão) */
.devv-col-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.devv-produto {
  font-weight: 600;
  font-size: .93rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.devv-qtd { font-weight: 400; opacity: .65; font-size: .83rem; margin-left: 4px; }
.devv-orfao { font-size: .8rem; }
.devv-razao-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.devv-razao {
  font-size: .76rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.7);
  cursor: default;
}
.devv-risco-chip {
  font-size: .72rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 8px;
  background: rgba(240,160,136,.2);
  color: #f0b090;
  white-space: nowrap;
}
.devv-status-return {
  font-size: .74rem;
  color: rgba(255,255,255,.42);
}
.devv-problema {
  font-size: .82rem;
  color: rgba(255,255,255,.60);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.devv-prat {
  font-size: .72rem;
  font-weight: 700;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Coluna pedido (direita) */
.devv-col-pedido {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.devv-pedido-num {
  font-family: ui-monospace, monospace;
  font-size: .76rem;
  color: rgba(255,255,255,.55);
  word-break: break-all;
  text-align: right;
}
.devv-pedido-none { color: rgba(255,255,255,.22); font-size: .8rem; }
.devv-copiar { font-size: .80rem; padding: 2px 6px; }
.devv-conf-tag {
  font-size: .74rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
}
.devv-conf-ok    { background: rgba(46,158,107,.22); color: #8fe3c4; }
.devv-conf-defeito { background: rgba(192,96,62,.22); color: #f0a088; }

/* Vazio e responsivo */
.devv-vazio { padding: 32px 0; opacity: .42; font-style: italic; text-align: center; }

/* ── v1.1 polish: filtros de motivo, busca, nosso status, identificadores ── */

/* Linha de filtros (motivo + busca) */
.devv-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.devv-filtros-razao { display: flex; gap: 6px; flex-wrap: wrap; }
.devv-filtro-razao {
  padding: 5px 13px;
  border-radius: 16px;
  font-size: .82rem;
  font-weight: 500;
  color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  text-decoration: none;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.devv-filtro-razao:hover { background: rgba(255,255,255,.11); color: rgba(255,255,255,.88); }
.devv-filtro-razao-ativo {
  background: rgba(77,140,232,.18);
  color: #aaccf8;
  border-color: rgba(77,140,232,.38);
}

/* Busca */
.devv-busca-form {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.devv-busca-input {
  padding: 6px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.9);
  font-size: .84rem;
  width: 230px;
  outline: none;
  transition: border-color .15s, background .15s;
}
.devv-busca-input:focus {
  border-color: rgba(77,140,232,.5);
  background: rgba(77,140,232,.08);
}
.devv-busca-input::placeholder { color: rgba(255,255,255,.3); }
.devv-busca-limpar {
  font-size: .82rem;
  color: rgba(255,255,255,.4);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 8px;
  transition: color .12s;
}
.devv-busca-limpar:hover { color: rgba(255,255,255,.75); }

/* Mostrando X de Y */
.devv-mostrando {
  font-size: .8rem;
  color: rgba(255,255,255,.42);
  margin-bottom: 12px;
}
.devv-mostrando strong { color: rgba(255,255,255,.72); }

/* Chip de nosso estágio (na linha, perto da razão) */
.devv-estagio-chip {
  font-size: .71rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.50);
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,.08);
}

/* Coluna direita: 3 identificadores */
.devv-linha { grid-template-columns: 100px 1fr 175px; }
.devv-etiqueta-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 3px;
}
.devv-etiqueta-num {
  font-family: ui-monospace, monospace;
  font-size: .88rem;
  font-weight: 700;
  color: rgba(255,255,255,.88);
  word-break: break-all;
  line-height: 1.25;
}
.devv-ident-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}
.devv-ident-label {
  font-size: .68rem;
  color: rgba(255,255,255,.32);
  flex-shrink: 0;
}
.devv-ident-num {
  font-family: ui-monospace, monospace;
  font-size: .72rem;
  color: rgba(255,255,255,.48);
  word-break: break-all;
}
.devv-ident-claim { color: rgba(255,255,255,.32); font-size: .68rem; }

@media (max-width: 700px) {
  .devv-filtros { gap: 8px; }
  .devv-busca-form { margin-left: 0; width: 100%; }
  .devv-busca-input { width: 100%; }
  .devv-abas { gap: 6px; }
  .devv-chip-risco { margin-left: 0; }
  .devv-linha { grid-template-columns: 80px 1fr; grid-template-rows: auto auto; }
  .devv-col-pedido { grid-column: 1 / -1; flex-direction: row; align-items: center;
                     justify-content: flex-start; flex-wrap: wrap;
                     border-top: 1px solid rgba(255,255,255,.06);
                     padding-top: 8px; margin-top: 4px; }
  .devv-etiqueta-row { flex-wrap: wrap; }
  .devv-produto { white-space: normal; }
}

/* Campo de scan inline na aba Confirmar recebimento */
.devv-scan { margin: 0 0 12px; }
#devv-scan-input,
.devv-scan-conferir input {
  width: 100%; max-width: 480px;
  font-size: 1.3rem; padding: 14px 16px;
  border-radius: 10px;
  border: 2px solid rgba(77,140,232,.4);
  background: rgba(77,140,232,.06);
  color: inherit;
}
#devv-scan-input:focus,
.devv-scan-conferir input:focus { outline: none; border-color: #4d8ce8; box-shadow: 0 0 0 3px rgba(77,140,232,.18); }
.devv-scan-result {
  min-height: 36px; margin-bottom: 16px;
  padding: 10px 16px; border-radius: 8px;
  font-size: .95rem; font-weight: 500;
}
.devv-scan-ok   { background: rgba(46,158,107,.15); color: #8fe3c4; border: 1px solid rgba(46,158,107,.28); }
.devv-scan-erro { background: rgba(192,62,62,.15);  color: #f09090; border: 1px solid rgba(192,62,62,.28); }

/* ═══════════════════════════════════════════════════════════
   BIPAGEM DEVOLUÇÃO — 2 MOMENTOS (toggle Chegada / Resolver)
═══════════════════════════════════════════════════════════ */

/* Toggle de modo */
.bipdev-toggle {
  display: flex;
  gap: 6px;
  margin: 12px 0 10px;
}
.bipdev-tab {
  padding: 8px 20px;
  border-radius: 20px;
  border: 1.5px solid rgba(255,255,255,.18);
  background: transparent;
  color: var(--text-secondary, #94a3b8);
  font-size: .9rem;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.bipdev-tab:hover { background: rgba(255,255,255,.07); }
.bipdev-tab-ativo {
  background: rgba(99,102,241,.18);
  border-color: rgba(99,102,241,.6);
  color: #a5b4fc;
  font-weight: 700;
}

/* Banner confirmação de chegada (modo Chegada) */
.bipdev-banner-chegada {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 12px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.35);
  animation: bip-pop .2s ease;
}
.bipdev-chegada-icone {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}
.bipdev-chegada-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  font-size: .88rem;
}
.bipdev-chegada-razao {
  width: 100%;
  margin-top: 4px;
  font-size: .78rem;
  color: var(--text-secondary, #94a3b8);
}
.bipdev-ja-reg {
  font-size: .76rem;
  color: var(--text-secondary, #94a3b8);
  font-style: italic;
}

/* === FASE 2: botao Verificar na linha + pagina de conferencia === */
.devv-verificar-btn {
  display: inline-block;
  background: var(--accent, #4d8ce8);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 7px;
  text-decoration: none;
  margin-bottom: 8px;
  white-space: nowrap;
}
.devv-verificar-btn:hover { filter: brightness(1.08); }
.devv-grupo-header-semprazo { opacity: .72; }

.confdev-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.confdev-topo h1 { margin: 0; }
.confdev-voltar { color: var(--text-secondary, #94a3b8); text-decoration: none; font-size: .9rem; }
.confdev-voltar:hover { color: var(--text, #e5e7eb); }

.confdev-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 820px) { .confdev-grid { grid-template-columns: 1fr; } }

.confdev-card {
  background: var(--surface, #1e2230);
  border: 1px solid var(--border, #2c3140);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.confdev-conta { display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 20px; margin-bottom: 8px; }
.confdev-produto-nome { margin: 0 0 10px; font-size: 1.15rem; }
.confdev-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: .9rem; color: var(--text-secondary, #94a3b8); }
.confdev-orfao { color: #e0a800; }

.confdev-bloco { margin-bottom: 12px; }
.confdev-bloco:last-child { margin-bottom: 0; }
.confdev-rotulo { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary, #94a3b8); margin-bottom: 3px; }
.confdev-alegou-val { font-size: 1.02rem; font-weight: 600; }
.confdev-reason { color: var(--text-secondary, #94a3b8); font-weight: 400; font-size: .85rem; }
.confdev-verdade-val { font-size: .95rem; line-height: 1.45; }
.confdev-risco {
  margin-top: 10px;
  background: rgba(224, 168, 0, .12);
  border: 1px solid rgba(224, 168, 0, .4);
  color: #e0a800;
  border-radius: 8px;
  padding: 8px 11px;
  font-size: .85rem;
}

.confdev-ident-linha { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--border, #2c3140); font-size: .9rem; }
.confdev-ident-linha:last-child { border-bottom: none; }
.confdev-ident-linha span { color: var(--text-secondary, #94a3b8); }

.confdev-acao { background: var(--surface, #1e2230); border: 1px solid var(--border, #2c3140); border-radius: 12px; padding: 18px; position: sticky; top: 16px; }
.confdev-pergunta { font-weight: 600; margin-bottom: 12px; }
.confdev-botoes { display: flex; flex-direction: column; gap: 10px; }
.confdev-btn {
  display: flex; flex-direction: column; gap: 3px; text-align: center;
  padding: 14px; border-radius: 10px;
  border: 1px solid var(--border, #2c3140);
  background: var(--surface-2, #262b3a);
  color: var(--text, #e5e7eb);
  font-size: 1rem; font-weight: 700; cursor: pointer;
}
.confdev-btn small { font-weight: 400; font-size: .76rem; color: var(--text-secondary, #94a3b8); }
.confdev-btn:hover { filter: brightness(1.1); }
.confdev-btn:disabled { opacity: .5; cursor: default; }
.confdev-btn-novo { border-color: #2ea043; }
.confdev-btn-usado { border-color: #4d8ce8; }
.confdev-btn-defeito { border-color: #e5534b; }

.confdev-resultado { margin-top: 12px; font-size: .9rem; padding: 8px 0; min-height: 1.2em; }
.confdev-resultado-ok { color: #2ea043; font-weight: 600; }
.confdev-resultado-erro { color: #e5534b; font-weight: 600; }
.confdev-ja { color: #2ea043; font-weight: 600; }
.confdev-nota { margin-top: 14px; font-size: .78rem; color: var(--text-secondary, #94a3b8); font-style: italic; }

/* === FASE 3: assistente guiado (form de conferencia) === */
.confdev-secao { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border, #2c3140); }
.confdev-secao:last-of-type { border-bottom: none; }
.confdev-radio { display: block; padding: 12px 14px; border: 1px solid var(--border, #2c3140); border-radius: 10px; margin-bottom: 8px; cursor: pointer; }
.confdev-radio input { margin-right: 9px; }
.confdev-radio span { font-weight: 600; }
.confdev-radio small { display: block; margin-left: 24px; font-weight: 400; font-size: .76rem; color: var(--text-secondary, #94a3b8); }
.confdev-radio:hover { background: var(--surface-2, #262b3a); }
.confdev-radio-novo:has(input:checked) { border-color: #2ea043; background: rgba(46,160,67,.10); }
.confdev-radio-usado:has(input:checked) { border-color: #4d8ce8; background: rgba(77,140,232,.10); }
.confdev-radio-defeito:has(input:checked) { border-color: #e5534b; background: rgba(229,83,75,.10); }
.confdev-contestavel { margin-top: 10px; background: rgba(224,168,0,.10); border: 1px solid rgba(224,168,0,.35); border-radius: 8px; padding: 9px 11px; font-size: .82rem; line-height: 1.4; color: #e0a800; }
.confdev-check { display: flex; align-items: baseline; gap: 9px; padding: 8px 0; font-size: .95rem; cursor: pointer; }
.confdev-check input { width: 17px; height: 17px; flex-shrink: 0; }
.confdev-check small { color: var(--text-secondary, #94a3b8); font-size: .78rem; }
.confdev-check-encerrar { font-weight: 600; }
.confdev-obs { width: 100%; box-sizing: border-box; background: var(--surface-2, #262b3a); border: 1px solid var(--border, #2c3140); border-radius: 8px; color: var(--text, #e5e7eb); padding: 9px 11px; font-size: .9rem; font-family: inherit; resize: vertical; }
.confdev-submit { width: 100%; padding: 13px; border: none; border-radius: 10px; background: var(--accent, #4d8ce8); color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer; }
.confdev-submit:hover { filter: brightness(1.08); }

/* === Refinamento: resultado da conferencia colorido + scan na aba A conferir === */
.devv-conf-tag { display: inline-block; font-size: .74rem; font-weight: 700; padding: 2px 9px; border-radius: 6px; margin-top: 5px; }
.devv-conf-ok_novo, .devv-conf-ok { background: rgba(46,160,67,.16); color: #3fb950; }
.devv-conf-ok_usado { background: rgba(224,168,0,.18); color: #e0a800; }
.devv-conf-defeito { background: rgba(229,83,75,.16); color: #f06c64; }
.confdev-ja-ok_novo, .confdev-ja-ok { background: rgba(46,160,67,.12); border: 1px solid rgba(46,160,67,.45); color: #3fb950; border-radius: 10px; padding: 12px 14px; }
.confdev-ja-ok_usado { background: rgba(224,168,0,.12); border: 1px solid rgba(224,168,0,.5); color: #e0a800; border-radius: 10px; padding: 12px 14px; }
.confdev-ja-defeito { background: rgba(229,83,75,.12); border: 1px solid rgba(229,83,75,.5); color: #f06c64; border-radius: 10px; padding: 12px 14px; }
.devv-scan-conferir { margin-bottom: 16px; }

/* ── RETIRE DA EXPEDICAO (cancelados preparados) ── */
.bip-retire-wrap { border: 1px solid rgba(229,57,53,0.55); background: rgba(229,57,53,0.10); border-radius: 12px; padding: 12px 14px; margin: 12px 0; }
.bip-retire-head { font-weight: 700; color: #e53935; font-size: 1.02rem; margin-bottom: 4px; }
.bip-retire-hint { font-size: 0.86rem; opacity: 0.85; margin-bottom: 8px; }
.bip-retire-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.bip-retire-table th, .bip-retire-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid rgba(229,57,53,0.18); }
.bip-retire-table th { font-weight: 600; opacity: 0.75; }
.bip-retire-resolvidos { margin: 8px 0 12px; border: 1px solid rgba(76,175,80,0.35); border-radius: 10px; padding: 8px 12px; font-size: 0.88rem; }
.bip-retire-resolvidos summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.bip-retire-resolvidos table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.bip-retire-resolvidos td, .bip-retire-resolvidos th { padding: 4px 8px; border-bottom: 1px solid rgba(0,0,0,0.07); font-size: 0.85rem; }

/* ── GRUPOS SAIR HOJE / PROXIMOS DIAS ── */
.bip-grupo { margin-bottom: 14px; border-radius: 10px; overflow: hidden; }
.bip-grupo-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 0.92rem; font-weight: 700; }
.bip-grupo-sair_hoje .bip-grupo-header { background: rgba(229,57,53,0.12); }
.bip-grupo-proximos_dias .bip-grupo-header { background: rgba(255,193,7,0.14); }
.bip-grupo-nome { flex: 1; }
.bip-grupo-pill { font-size: 0.8rem; border-radius: 20px; padding: 2px 10px; font-weight: 700; }
.bip-grupo-pill-ok { background: rgba(76,175,80,0.2); color: #388e3c; }
.bip-grupo-pill-falta { background: rgba(229,57,53,0.18); color: #c62828; }
.bip-grupo .bip-fluxos { padding: 8px 8px 0; }

/* Alerta pedidos que perderam a coleta */
.bip-atrasando-alerta { background: rgba(255,193,7,0.15); border-left: 3px solid #ffc107; border-radius: 6px; padding: 7px 12px; margin: 6px 10px; font-size: 0.88rem; font-weight: 600; }
.bip-atrasando-lista { margin: 4px 0 0 16px; font-weight: 400; font-size: 0.84rem; }

/* Prazo futuro tag na lista de pendentes */
.bip-prazo-futuro-tag { display: inline-block; background: rgba(255,193,7,0.2); color: #b07800; border-radius: 4px; padding: 1px 5px; font-size: 0.78rem; margin-left: 4px; }
.bip-adiantar-tag { display: inline-block; background: rgba(59,130,246,0.18); color: #2563eb; border-radius: 4px; padding: 1px 5px; font-size: 0.78rem; margin-left: 4px; }
html[data-theme="dark"] .bip-adiantar-tag { color: #93c5fd; }

/* ML aguardando baixa */
.bip-ml-aguardando { border: 1px solid rgba(99,102,241,0.35); border-radius: 10px; padding: 8px 12px; margin: 8px 0; font-size: 0.88rem; }
.bip-ml-aguardando summary { cursor: pointer; font-weight: 600; color: var(--accent); }

/* ─────────────────────────────────────────────────────────────────────────────
   Mensagem do comprador (Pedidos ML) — 2026-07-28
   ROXO de proposito: vermelho/ambar/azul ja sao semanticos nesta tela
   (atrasado / possivel atraso / adiantavel). Mensagem nao e atraso — tingir de
   qualquer jeito apagaria o sinal justo onde importa. Vive AQUI (global) e nao
   inline no template: o .mlx-* ja e duplicado entre ML e Shopee, e triplicar
   seria pedir divergencia. Ver manual-sistema §7.
   ───────────────────────────────────────────────────────────────────────────── */
.mlx-msgbox { border: 1px solid rgba(127,119,221,0.45) !important; }
.mlx-msgbox .mlx-card-head { color: #7f77dd; }
.mlx-msg-abrir { margin-left: auto; font-size: 0.78rem; padding: 3px 10px; cursor: pointer;
  border: 1px solid rgba(127,119,221,0.55); border-radius: 6px;
  background: rgba(127,119,221,0.12); color: #7f77dd; }
.mlx-msg-abrir:hover { background: rgba(127,119,221,0.22); }
.mlx-msg-abrir[disabled] { opacity: 0.6; cursor: default; }

/* o fundo escuro; display alternado por JS entre none e flex */
.mlx-msg-modal { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,0.55);
  align-items: center; justify-content: center; padding: 16px; }
.mlx-msg-box { background: var(--card, #16181d); border: 1px solid rgba(127,119,221,0.45);
  border-radius: 12px; width: 100%; max-width: 560px; max-height: 82vh;
  display: flex; flex-direction: column; }
.mlx-msg-top { display: flex; align-items: center; gap: 8px; padding: 12px 14px 4px; }
.mlx-msg-x { margin-left: auto; background: none; border: 0; color: var(--muted);
  font-size: 1rem; cursor: pointer; line-height: 1; }
.mlx-msg-corpo { overflow-y: auto; padding: 6px 14px 10px; }
.mlx-msg-rodape { border-top: 1px solid var(--bd); padding: 10px 14px; }
.mlx-msg-cli, .mlx-msg-nos { border-left: 2px solid var(--bd); padding: 4px 0 4px 10px;
  margin-bottom: 10px; }
.mlx-msg-cli { border-left-color: rgba(127,119,221,0.75); }
.mlx-msg-nos { border-left-color: rgba(120,140,180,0.5); opacity: 0.85; }
.mlx-msg-quem { font-size: 0.72rem; color: var(--muted); margin-bottom: 2px; }
.mlx-msg-txt { font-size: 0.86rem; line-height: 1.55; white-space: pre-wrap; }
.mlx-msg-anexo { color: #7f77dd; }

/* Caixa de resposta ao comprador (dentro do modal da conversa).
   O aviso tem TRES cores porque sao tres estados do mundo, nao dois:
   verde = chegou · ambar = o ML moderou (saiu daqui e NAO chega la) · vermelho = nao saiu.
   Pintar "moderada" de verde seria a mentira mais cara desta tela. */
.mlx-resp-wrap { display: flex; flex-direction: column; gap: 8px; }
.mlx-resp-txt { width: 100%; resize: vertical; font: inherit; font-size: 0.86rem;
  line-height: 1.5; padding: 8px 10px; border-radius: 8px; background: var(--bg, #0f1115);
  color: var(--fg, #e8eaf0); border: 1px solid rgba(127,119,221,0.45); }
.mlx-resp-txt:focus { outline: none; border-color: rgba(127,119,221,0.9); }
.mlx-resp-txt[disabled] { opacity: 0.6; }
.mlx-resp-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mlx-resp-dica { flex: 1 1 220px; }
.mlx-resp-cheio { color: #e8b04b; }
.mlx-resp-btn { margin-left: auto; }
.mlx-resp-aviso { font-size: 0.82rem; line-height: 1.5; padding: 8px 10px;
  border-radius: 8px; border-left: 3px solid var(--bd); }
.mlx-resp-ok { background: rgba(70,170,110,0.12); border-left-color: #46aa6e; }
.mlx-resp-moderada { background: rgba(232,176,75,0.14); border-left-color: #e8b04b; }
.mlx-resp-erro { background: rgba(214,90,90,0.14); border-left-color: #d65a5a; }

/* Excecao no pedido — a decisao do operador dentro do modal da conversa */
.mlx-msg-decisao { border-top: 1px solid var(--bd); padding: 10px 14px;
  display: flex; flex-direction: column; gap: 8px; }
.mlx-exc-perg { font-size: 0.86rem; }
.mlx-exc-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mlx-exc-box { display: flex; flex-direction: column; gap: 8px; }
.mlx-exc-linha { display: flex; align-items: center; gap: 6px; }
.mlx-exc-sku { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 0.82rem;
  padding: 5px 8px; border-radius: 6px; background: var(--bg, #0f1115);
  color: var(--fg, #e8eaf0); border: 1px solid var(--bd); }
.mlx-exc-qtd { width: 62px; font: inherit; font-size: 0.82rem; padding: 5px 8px;
  border-radius: 6px; background: var(--bg, #0f1115); color: var(--fg, #e8eaf0);
  border: 1px solid var(--bd); text-align: center; }
.mlx-exc-busca { flex: 1 1 180px; font: inherit; font-size: 0.8rem; padding: 5px 8px;
  border-radius: 6px; background: var(--bg, #0f1115); color: var(--fg, #e8eaf0);
  border: 1px solid var(--bd); }
.mlx-exc-x { background: none; border: 1px solid var(--bd); border-radius: 6px;
  color: var(--muted); cursor: pointer; padding: 4px 8px; }
.mlx-exc-rod { display: flex; align-items: center; gap: 8px; }
.mlx-exc-rod .mlx-m-btn { margin-left: 0; }
.mlx-exc-rod .mlx-m-btn:last-child { margin-left: auto; }
/* A contagem fora da invariante e AMBAR, nao vermelha: nao e erro do operador, e um
   estado intermediario de quem esta montando. Vermelho aqui viraria ruido. */
.mlx-exc-fora { color: #e8b04b; }
.mlx-exc-ok { font-size: 0.84rem; line-height: 1.5; padding: 8px 10px; border-radius: 8px;
  background: rgba(232,176,75,0.14); border-left: 3px solid #e8b04b; }
.mlx-exc-erro { font-size: 0.82rem; line-height: 1.5; padding: 8px 10px; border-radius: 8px;
  background: rgba(214,90,90,0.14); border-left: 3px solid #d65a5a; }

/* ═══ FAIXA "cliente esperando resposta" (pergunta pre-venda do ML) ═══
   Partial `_perguntas_faixa.html`. Discreta de proposito: quem esta bipando nao pode ser
   interrompido, e alarme que interrompe vira clique automatico em duas semanas. Ambar
   (nao vermelho) porque nao e erro de ninguem — e alguem esperando. O vermelho da tela
   fica reservado pro pedido ATRASADO, e tingir isto de vermelho apagaria aquele sinal. */
.perg-faixa { display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  padding: 9px 14px; border-radius: 10px; text-decoration: none;
  background: rgba(232,176,75,0.12); border: 1px solid rgba(232,176,75,0.34);
  color: #f0c674; font-size: 0.86rem; transition: background .15s; }
.perg-faixa:hover { background: rgba(232,176,75,0.2); }
.perg-faixa-ico { font-size: 15px; flex: none; }
.perg-faixa-txt { flex: 1 1 auto; min-width: 0; }
.perg-faixa-txt strong { font-weight: 700; }
.perg-faixa-pior { opacity: .75; }
.perg-faixa-cta { flex: none; font-weight: 600; opacity: .9; }

/* ═══ PAGINA DE ATENDIMENTO — perguntas pre-venda ═══
   Segmentada por LOJA (cabecalho, nao chip em cada card): pedido do Rezox em 31/07.
   O RELOGIO e a peca central, nao enfeite — e o unico jeito de a espera deixar de ser
   invisivel, e espera invisivel e espera que ninguem encurta. */
.atd-wrap { max-width: 1240px; margin: 0 auto; padding: 4px 0 40px; }
.atd-head { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.atd-title { font-size: 22px; font-weight: 800; }
.atd-sub { font-size: 13px; color: var(--muted); margin-top: 3px; }
.atd-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.atd-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.atd-metric { background: var(--card, #121c2a); border: 1px solid var(--bd); border-radius: 12px; padding: 10px 14px; }
.atd-metric-lab { font-size: 11.5px; color: var(--muted); }
.atd-metric-val { font-size: 22px; font-weight: 700; margin-top: 2px; }
.atd-metric-val.alerta { color: #f0c674; }
.atd-loja { font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 16px 0 6px; }
.atd-card { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--bd);
  border-left: 3px solid var(--bd); border-radius: 0; background: var(--card, #121c2a); }
.atd-card + .atd-card { border-top: none; }
/* Passou do corte: a borda esquerda acende. E a diferenca entre "chegou" e "esta parada". */
.atd-card.atrasada { border-left-color: #e8b04b; }
.atd-thumb { width: 46px; height: 46px; flex: none; border-radius: 8px; object-fit: cover;
  background: rgba(255,255,255,.04); }
.atd-corpo { flex: 1 1 auto; min-width: 0; }
.atd-anuncio { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.atd-meta { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.atd-saldo-ok { color: #86efac; }
.atd-saldo-zero { color: #fca5a5; }
.atd-perg { font-size: 13.5px; margin-top: 6px; line-height: 1.5; }
.atd-espera { flex: none; text-align: right; font-size: 12.5px; font-weight: 600; }
.atd-espera.atrasada { color: #f0c674; }
.atd-resp { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.atd-resp textarea { width: 100%; font: inherit; font-size: 0.86rem; padding: 8px 10px;
  border-radius: 8px; background: var(--bg, #0f1115); color: var(--fg, #e8eaf0);
  border: 1px solid var(--bd); resize: vertical; }
.atd-resp-rod { display: flex; align-items: center; gap: 10px; }
/* A resposta e PUBLICA — fica no anuncio pra qualquer um ler. Errar aqui nao e um cliente
   chateado, e vitrine. O aviso fica colado na caixa, nao num tooltip. */
.atd-publico { font-size: 11.5px; color: var(--muted); flex: 1 1 auto; }
.atd-msg { font-size: 12.5px; padding: 8px 10px; border-radius: 8px; line-height: 1.5; }
.atd-msg.ok { background: rgba(34,197,94,.12); border-left: 3px solid #22c55e; color: #86efac; }
.atd-msg.erro { background: rgba(214,90,90,.14); border-left: 3px solid #d65a5a; color: #fca5a5; }
.atd-vazio { color: var(--muted); font-size: 13px; border: 1px dashed var(--bd);
  border-radius: 12px; padding: 26px; text-align: center; }
/* Anuncio fora do ar: NAO entra na fila (o ML nao aceita mais resposta). Fica aqui embaixo,
   recolhido, porque historico misturado com trabalho ensina a ignorar a fila. */
.atd-mortas { margin-top: 26px; font-size: 12.5px; color: var(--muted); }
.atd-mortas summary { cursor: pointer; }
.atd-mortas li { margin: 4px 0; }
/* O `.mlx-btn` vive INLINE no pedidos_ml_v2.html, nao aqui — usar aquele nome numa tela
   nova daria botao sem estilo, e o erro so apareceria na tela pronta. */
.atd-btn { font-size: 12.5px; font-weight: 600; color: #cdd8e8; background: transparent;
  border: 1px solid #2a3a52; padding: 8px 14px; border-radius: 8px; cursor: pointer; }
.atd-btn:hover { background: #101a28; border-color: #38496a; }