/* Sistema Joseilson — Componentes reutilizáveis */

/* Card */
.card{
  background:var(--bg-surface);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
}
@media (max-width:640px){.card{padding:var(--space-4)}}
.card__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4);gap:var(--space-3);flex-wrap:wrap}
.card__title{font-size:var(--text-md);font-weight:600;color:var(--ink-900)}
.card__subtitle{font-size:var(--text-xs);color:var(--ink-500);margin-top:2px}
.card__action{font-size:var(--text-sm);color:var(--accent-600);font-weight:600;background:none;border:0}
.card__action:hover{text-decoration:underline}

/* KPI */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--space-4)}
.kpi{
  background:var(--bg-surface);border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);
}
.kpi__top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:var(--space-3)}
.kpi__label{font-size:var(--text-xs);color:var(--ink-500);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.kpi__icon{width:30px;height:30px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.kpi__icon--accent{background:var(--accent-100);color:var(--accent-600)}
.kpi__icon--success{background:var(--success-bg);color:var(--success-fg)}
.kpi__icon--warning{background:var(--warning-bg);color:var(--warning-fg)}
.kpi__icon--danger{background:var(--danger-bg);color:var(--danger-fg)}
.kpi__value{font-family:var(--font-mono);font-size:var(--text-2xl);font-weight:600;color:var(--ink-900);line-height:1.1}
.kpi__delta{display:inline-flex;align-items:center;gap:3px;font-size:var(--text-xs);font-weight:600;padding:2px 7px;border-radius:var(--radius-pill);margin-top:var(--space-2)}
.kpi__delta--up{background:var(--success-bg);color:var(--success-fg)}
.kpi__delta--down{background:var(--danger-bg);color:var(--danger-fg)}

/* Grid helpers */
.grid-2{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--space-5);align-items:start}
/* min-width:0 evita o "grid blowout": sem isso, um item do grid nunca encolhe abaixo da largura
   mínima do próprio conteúdo (ex.: o gráfico de barras do Dashboard), mesmo com a faixa em 1fr —
   o item ficava mais largo que a viewport em telas pequenas. Não muda nada visualmente em telas
   largas, onde já há espaço de sobra. */
.grid-2>*{min-width:0}
@media (max-width:1080px){.grid-2{grid-template-columns:1fr}}

/* Botões */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-size:var(--text-sm);font-weight:600;padding:var(--space-2) var(--space-4);
  border-radius:var(--radius-md);border:1px solid var(--line-strong);
  background:var(--bg-surface);color:var(--ink-900);
  transition:background var(--ease),border-color var(--ease),transform var(--ease);
  white-space:nowrap;
}
.btn:hover{background:var(--bg-surface-alt)}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--accent-600);border-color:var(--accent-600);color:#fff}
.btn--primary:hover{background:var(--accent-700)}
.btn--success{background:var(--success-bg);border-color:var(--success-fg);color:var(--success-fg)}
.btn--danger{background:var(--danger-bg);border-color:var(--danger-fg);color:var(--danger-fg)}
.btn--ghost{background:transparent;border-color:transparent}
.btn--ghost:hover{background:var(--bg-surface-alt)}
.btn--sm{padding:var(--space-1) var(--space-3);font-size:var(--text-xs)}
.btn--icon{padding:var(--space-2);border-radius:var(--radius-md)}
.btn--block{width:100%}

/* Inputs */
.field{display:flex;flex-direction:column;gap:6px}
.field__label{font-size:var(--text-xs);font-weight:600;color:var(--ink-700)}
.input,.select,.textarea{
  font-size:var(--text-sm);padding:9px 12px;border-radius:var(--radius-md);
  border:1px solid var(--line-strong);background:var(--bg-surface);color:var(--ink-900);
  width:100%;transition:border-color var(--ease),box-shadow var(--ease);
}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--accent-500);box-shadow:0 0 0 3px var(--accent-100);
}
.textarea{min-height:90px;resize:vertical}
.select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='none' stroke='%23857D72' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;
}
.search-field{position:relative;flex:1;min-width:180px}
.search-field svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink-500);pointer-events:none}
.search-field .input{padding-left:34px}

.filters-bar{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}

/* Linha de 2 campos lado a lado (ex.: Data + Hora em modais) — empilha no mobile */
.field-row{display:flex;gap:var(--space-3)}
@media (max-width:480px){.field-row{flex-direction:column}}

/* Segmented control */
.segmented{display:inline-flex;max-width:100%;overflow-x:auto;padding:3px;gap:2px;background:var(--bg-surface-alt);border:1px solid var(--line-soft);border-radius:var(--radius-md)}
.segmented__opt{padding:6px 13px;border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:600;color:var(--ink-500);background:none;border:0;transition:background var(--ease),color var(--ease),box-shadow var(--ease)}
.segmented__opt.is-active{background:var(--bg-surface);color:var(--accent-600);box-shadow:var(--shadow-sm)}

/* Badge */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:var(--text-xs);font-weight:600;padding:3px 9px;border-radius:var(--radius-pill);white-space:nowrap}
.badge--success{background:var(--success-bg);color:var(--success-fg)}
.badge--warning{background:var(--warning-bg);color:var(--warning-fg)}
.badge--danger{background:var(--danger-bg);color:var(--danger-fg)}
.badge--neutral{background:var(--bg-surface-alt);color:var(--ink-500);border:1px solid var(--line-soft)}
.badge--accent{background:var(--accent-100);color:var(--accent-600)}

/* Avatar */
.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-weight:700;flex-shrink:0;background:var(--accent-100);color:var(--accent-700)}
img.avatar{object-fit:cover;display:block}
.avatar--sm{width:26px;height:26px;font-size:11px}
.avatar--md{width:34px;height:34px;font-size:13px}
.avatar--lg{width:56px;height:56px;font-size:19px}

/* Tabela */
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:var(--text-sm);min-width:560px}
.table thead th{
  position:sticky;top:0;background:var(--bg-surface-alt);
  text-align:left;font-size:var(--text-xs);font-weight:600;color:var(--ink-500);
  text-transform:uppercase;letter-spacing:.03em;padding:10px 12px;
  border-bottom:1px solid var(--line-soft);white-space:nowrap;
}
.table tbody td{padding:11px 12px;border-bottom:1px solid var(--line-soft);color:var(--ink-900)}
.table tbody tr{transition:background var(--ease)}
.table tbody tr:hover{background:var(--bg-surface-alt)}
.table tbody tr:last-child td{border-bottom:none}
.table .num{text-align:right}
.table-actions{display:flex;gap:var(--space-2);justify-content:flex-end}

/* Paginação */
.pagination{display:flex;align-items:center;justify-content:space-between;padding-top:var(--space-3);border-top:1px solid var(--line-soft);flex-wrap:wrap;gap:var(--space-2)}
.pagination__info{font-size:var(--text-xs);color:var(--ink-500)}
.pagination__pages{display:flex;gap:4px}
.page-btn{width:28px;height:28px;border-radius:var(--radius-sm);border:1px solid var(--line-soft);background:var(--bg-surface);font-size:var(--text-xs);color:var(--ink-700);transition:background var(--ease),border-color var(--ease),color var(--ease)}
.page-btn.is-active{background:var(--accent-600);border-color:var(--accent-600);color:#fff}

/* Tabs / Subnav */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.tabs__item{padding:10px 4px;font-size:var(--text-sm);font-weight:600;color:var(--ink-500);border-bottom:2px solid transparent;margin-right:var(--space-5);background:none;border-top:0;border-left:0;border-right:0;transition:color var(--ease),border-color var(--ease)}
.tabs__item:hover{color:var(--ink-900)}
.tabs__item.is-active{color:var(--accent-600);border-bottom-color:var(--accent-600)}

/* Modal */
.modal-overlay{
  position:fixed;inset:0;background:rgba(15,20,20,.5);
  display:flex;align-items:center;justify-content:center;z-index:100;padding:var(--space-5);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--ease),visibility var(--ease);
}
.modal-overlay.is-open{opacity:1;visibility:visible;pointer-events:auto}
.modal{
  width:100%;max-width:460px;background:var(--bg-surface);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);max-height:90vh;display:flex;flex-direction:column;
  transform:scale(.97);transition:transform var(--ease);
}
.modal-overlay.is-open .modal{transform:none}
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5) var(--space-5) var(--space-4);border-bottom:1px solid var(--line-soft)}
.modal__title{font-size:var(--text-md);font-weight:600}
.modal__close{background:transparent;border:0;color:var(--ink-500)}
/* O <form> de cada modal de escrita envolve .modal__body E .modal__footer (nunca só o body) —
   sem virar ele mesmo uma coluna flex que pode encolher, o rodapé (Salvar/Cancelar) empurra para
   fora do card em formulários longos (ex.: Cliente com endereço completo) e fica inacessível em
   telas como 1366x768. min-height:0 é o que permite o filho flex encolher abaixo do seu conteúdo
   e ativar o overflow-y:auto do body em vez de estourar o card. */
.modal > form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.modal__body{padding:var(--space-5);overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-4);flex:1 1 auto;min-height:0}
.modal__footer{display:flex;justify-content:flex-end;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-top:1px solid var(--line-soft);flex:0 0 auto}

/* Toast */
.toast-stack{position:fixed;bottom:20px;right:20px;z-index:200;display:flex;flex-direction:column;gap:10px}
.toast{
  display:flex;align-items:center;gap:10px;min-width:260px;max-width:360px;
  padding:12px 14px;border-radius:var(--radius-md);border:1px solid;
  font-size:var(--text-sm);font-weight:600;box-shadow:var(--shadow-md);
  animation:toast-in .18s ease;
}
.toast--success{background:var(--success-bg);border-color:var(--success-fg);color:var(--success-fg)}
.toast--info{background:var(--accent-100);border-color:var(--accent-600);color:var(--accent-700)}
.toast--warning{background:var(--warning-bg);border-color:var(--warning-fg);color:var(--warning-fg)}
.toast--danger{background:var(--danger-bg);border-color:var(--danger-fg);color:var(--danger-fg)}

/* Alerta inline (ex.: erro de login, avisos persistentes de formulário) */
.alert{padding:10px 14px;border-radius:var(--radius-md);border:1px solid;font-size:var(--text-sm);font-weight:500}
.alert--danger{background:var(--danger-bg);border-color:var(--danger-fg);color:var(--danger-fg)}
.alert--success{background:var(--success-bg);border-color:var(--success-fg);color:var(--success-fg)}
.alert--warning{background:var(--warning-bg);border-color:var(--warning-fg);color:var(--warning-fg)}
@keyframes toast-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

/* Empty state */
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-3);padding:var(--space-8) var(--space-5);color:var(--ink-500)}
.empty-state__icon{width:52px;height:52px;border-radius:var(--radius-lg);background:var(--bg-surface-alt);display:flex;align-items:center;justify-content:center;color:var(--ink-500)}
.empty-state__title{font-size:var(--text-md);font-weight:600;color:var(--ink-900)}
.empty-state__desc{font-size:var(--text-sm);max-width:320px}

/* Loading skeleton */
.skeleton{
  background:linear-gradient(90deg,var(--bg-surface-alt) 25%,var(--bg-shine) 37%,var(--bg-surface-alt) 63%);
  background-size:400% 100%;border-radius:var(--radius-sm);
  animation:skeleton-shimmer 1.4s ease infinite;
}
@keyframes skeleton-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* Kanban (Consultorias) */
.kanban{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:var(--space-4);overflow-x:auto}
.kanban__col{display:flex;flex-direction:column;gap:var(--space-3);background:var(--bg-surface-alt);border-radius:var(--radius-lg);padding:var(--space-3);min-width:220px}
.kanban__col-title{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-500);padding:0 4px;display:flex;justify-content:space-between}
.kanban__card{background:var(--bg-surface);border:1px solid var(--line-soft);border-radius:var(--radius-md);padding:var(--space-3);display:flex;flex-direction:column;gap:6px}
.kanban__card strong{font-size:var(--text-sm)}
@media (max-width:1080px){.kanban{grid-template-columns:repeat(2,minmax(220px,1fr))}}
@media (max-width:640px){.kanban{grid-template-columns:1fr}}

/* Calendário (Agenda) */
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.calendar__weekday{font-size:var(--text-xs);font-weight:600;color:var(--ink-500);text-align:center;padding-bottom:4px}
.calendar__day{
  aspect-ratio:1;border-radius:var(--radius-md);border:1px solid var(--line-soft);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-size:var(--text-sm);color:var(--ink-900);background:var(--bg-surface);
}
.calendar__day--empty{border-color:transparent;background:transparent}
.calendar__day--today{border-color:var(--accent-500);font-weight:700;color:var(--accent-700)}
.calendar__day-dot{width:5px;height:5px;border-radius:50%;background:var(--accent-500)}
button.calendar__day{cursor:pointer;font-family:inherit;transition:background var(--ease),border-color var(--ease)}
button.calendar__day:hover{background:var(--bg-surface-alt)}
.calendar__day--selected{background:var(--accent-600);border-color:var(--accent-600);color:#fff}
.calendar__day--selected .calendar__day-dot{background:#fff}
.calendar__day--empty{cursor:default}
.calendar__day--empty:hover{background:transparent}

/* Widget de voz */
.voice-widget{display:flex;flex-direction:column;align-items:center;gap:var(--space-5);padding:var(--space-8) var(--space-5);text-align:center}
.mic-btn{
  width:96px;height:96px;border-radius:50%;border:0;
  background:var(--accent-600);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 8px var(--accent-100);
  transition:background var(--ease);
}
.voice-status{font-size:var(--text-sm);font-weight:600;color:var(--ink-700)}

/* Switch (toggle) */
.switch{position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch__track{position:absolute;inset:0;background:var(--line-strong);border-radius:var(--radius-pill);transition:background var(--ease)}
.switch__track::before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform var(--ease)}
.switch input:checked + .switch__track{background:var(--accent-600)}
.switch input:checked + .switch__track::before{transform:translateX(18px)}

/* Chips (categorias) */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);font-weight:500;padding:6px 10px;border-radius:var(--radius-pill);background:var(--bg-surface-alt);border:1px solid var(--line-soft);color:var(--ink-700)}
.chip button{background:none;border:0;color:var(--ink-500);display:flex;transition:color var(--ease)}
.chip button:hover{color:var(--danger-fg)}

/* Hub (Relatórios) */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-4)}
.hub-card{
  display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-5);
  background:var(--bg-surface);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  text-align:left;transition:transform var(--ease),border-color var(--ease),box-shadow var(--ease);
}
.hub-card:hover{transform:translateY(-2px);border-color:var(--accent-500);box-shadow:var(--shadow-md)}
.hub-card.is-disabled{opacity:.55;cursor:default}
.hub-card.is-disabled:hover{transform:none;border-color:var(--line-soft);box-shadow:none}
.hub-card__icon{width:42px;height:42px;border-radius:var(--radius-md);background:var(--accent-600);color:#fff;display:flex;align-items:center;justify-content:center}
.hub-card__title{font-size:var(--text-md);font-weight:600}
.hub-card__desc{font-size:var(--text-sm);color:var(--ink-500)}

/* Gráfico de barras mockado (Dashboard) */
.dashboard-chart{display:flex;align-items:flex-end;gap:10px;height:150px}

/* ===== Mobile — ajustes de responsividade (Etapa: Mobile) =====
   Reaproveita os breakpoints já existentes (1080/640/480, ver layout.css) — nenhum breakpoint
   novo foi criado. */

/* Campos com max-width fixo (ex.: Número, UF em clientes.php) ficam artificialmente estreitos
   quando .field-row empilha em coluna (regra já existente logo acima, max-width:480px) — aqui
   eles voltam a ocupar a linha toda. !important é necessário e proposital: só assim uma regra
   de stylesheet consegue vencer um `style="max-width:...px"` inline sem reescrever o HTML. */
@media (max-width:480px){
  .field-row .field{max-width:none!important}
}

/* Calendário (Agenda, visão mês) — mais espaço útil por célula em telas pequenas. */
@media (max-width:480px){
  .calendar{gap:4px}
  .calendar__day{font-size:var(--text-xs)}
}

/* Área de toque maior em dispositivos sem ponteiro preciso (touch) — não afeta desktop com
   mouse/trackpad em nenhuma largura de tela, pois `pointer:coarse` reflete a capacidade do
   dispositivo de apontar, não o tamanho da viewport. */
@media (pointer:coarse){
  .btn{min-height:40px}
  .btn--sm{min-height:36px;padding:6px 12px}
  .btn--icon{min-width:40px;min-height:40px}
  .icon-btn{width:40px;height:40px}
  .page-btn{width:34px;height:34px}
}

/* Gráfico mockado do Dashboard não pode espremer as 8 colunas abaixo do legível — rola
   horizontalmente em vez de encolher demais. */
@media (max-width:480px){
  .dashboard-chart{overflow-x:auto}
  .dashboard-chart > div{min-width:34px}
}