/* Padrão: skill "dashboard-premium-empresarial" (dark premium, tokens centralizados).
     Conceito: um portal com a logo da empresa no topo e quatro cartões altos (ícone + nome) numa linha no computador,
     duas colunas no celular. A cor de cada módulo é só um acento (borda, ícone e brilho no hover). */
  :root {
    --bg: #081A31;
    --surface: #0D2340;
    --card: #112A4C;
    --card-hover: #16335B;
    --surface-2: #153157;
    --line: #2B4568;
    --fg: #F2F5FF;
    --muted: #9AA8C1;
    --tarefas: #FFBE00;
    --financeiro: #36C6B0;
    --rh: #A78BFA;
    --compras: #F3B76A;
    --ok: #5BD08A;
    --warn: #F3B76A;
    --bad: #F2828A;
    --sombra: 0 12px 32px rgba(0, 0, 0, .22);
    --raio-controle: 12px;
    --raio-card: 22px;
    --fonte: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    color-scheme: dark;
  }

  * { box-sizing: border-box; }
  body {
    background: var(--bg);
    background-image: radial-gradient(1100px 520px at 50% -8%, rgba(255, 190, 0, .16), transparent 62%);
    background-repeat: no-repeat;
    color: var(--fg); font-family: var(--fonte); font-size: 15px; line-height: 1.5;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-block: 16px 48px;
    min-height: 100vh;
  }
  h1, h2, h3 { margin: 0; letter-spacing: -.01em; text-wrap: balance; }
  button { font: inherit; color: inherit; cursor: pointer; }
  :focus-visible { outline: 2px solid var(--hue, var(--tarefas)); outline-offset: 3px; border-radius: var(--raio-controle); }
  .wrap { max-width: 1240px; margin: 0 auto; }

  /* ---------- barra superior (controles do protótipo) ---------- */
  .topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; min-height: 44px; }
  .marca { display: flex; align-items: center; min-height: 32px; text-decoration: none; color: var(--fg); font-weight: 600; max-width: 55%; }
  .marca img { height: 30px; width: auto; max-width: 150px; object-fit: contain; display: block; }
  .ferramentas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .campo { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
  select, .btn-topo {
    background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: var(--raio-controle);
    padding: 8px 12px; font: inherit; font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  }
  select:hover, .btn-topo:hover { border-color: var(--muted); }

  /* ---------- início: logo + quatro módulos ---------- */
  .logo-home { display: flex; flex-direction: column; align-items: center; padding: 28px 0 0; }
  .logo-caixa { min-height: 96px; max-width: min(560px, 92%); max-height: 168px; display: grid; place-items: center; position: relative; }
  .logo-caixa::before { /* elevação discreta: um brilho suave atrás da logo, sem mexer nas cores dela */
    content: ""; position: absolute; inset: 10% -8% -6%; background: radial-gradient(closest-side, rgba(255, 190, 0, .20), transparent 75%); z-index: 0; pointer-events: none;
  }
  .logo-img { position: relative; z-index: 1; width: auto; height: auto; max-width: 100%; max-height: 160px; object-fit: contain; display: block; }
  .logo-texto { position: relative; z-index: 1; font-size: clamp(30px, 5vw, 48px); font-weight: 700; letter-spacing: -.02em; }
  .arco { width: min(880px, 100%); height: 78px; margin-top: 10px; border-radius: 0 0 50% 50% / 0 0 100% 100%; border-bottom: 1px solid rgba(255, 190, 0, .35); background: radial-gradient(ellipse at 50% 100%, rgba(255, 190, 0, .10), transparent 70%); }
  .modulos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 36px auto 0; padding: 8px 4px 24px; }

  .modulo {
    --hue: var(--tarefas);
    position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
    min-height: clamp(260px, 22vw, 320px); padding: 28px; text-align: left; text-decoration: none; color: inherit;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--raio-card); box-shadow: var(--sombra);
    transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
  }
  .modulo:hover, .modulo:focus-visible {
    transform: translateY(-4px); background: var(--card-hover);
    border-color: color-mix(in srgb, var(--hue) 70%, var(--line));
    box-shadow: var(--sombra), 0 10px 40px -18px color-mix(in srgb, var(--hue) 70%, transparent);
  }
  .modulo:active { transform: translateY(-1px) scale(.99); }
  .icone-modulo {
    width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center; color: var(--hue);
    background: color-mix(in srgb, var(--hue) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--hue) 26%, transparent);
  }
  .icone-modulo svg, .seta svg { stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .icone-modulo svg { width: 34px; height: 34px; }
  .modulo-base { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .modulo-nome { font-size: clamp(20px, 2vw, 26px); font-weight: 600; letter-spacing: -.01em; }
  .seta { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); flex: none; transition: color .2s ease, transform .2s ease; }
  .seta svg { width: 20px; height: 20px; }
  .modulo:hover .seta, .modulo:focus-visible .seta { color: var(--hue); transform: translateX(2px); }
  button.modulo { width: 100%; font-family: inherit; }

  /* ---------- área do módulo ---------- */
  .area { padding-top: 12px; }
  .modulo-topo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
  .voltar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--raio-controle); padding: 8px 12px; font-size: 13px; color: var(--muted); }
  .voltar:hover { color: var(--fg); border-color: var(--muted); }
  .modulo-titulo { display: flex; align-items: center; gap: 12px; }
  .modulo-titulo .icone-modulo { width: 46px; height: 46px; border-radius: 14px; --hue: var(--tarefas); }
  .modulo-titulo .icone-modulo svg { width: 24px; height: 24px; }
  .modulo-titulo h1 { font-size: 26px; }
  .abas { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
  .aba { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; color: var(--muted); font-weight: 500; margin-bottom: -1px; }
  .aba:hover { color: var(--fg); }
  .aba[aria-current="page"] { color: var(--fg); border-bottom-color: var(--tarefas); }
  .nota-papel { color: var(--muted); font-size: 13px; margin: 0 0 18px; }
  .exemplo { color: var(--muted); font-size: 12px; margin-top: 28px; text-align: center; }
  .pilula { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--surface-2); color: var(--muted); }
  .pilula.atencao { background: color-mix(in srgb, var(--bad) 16%, var(--surface-2)); color: var(--bad); }
  .pilula.aviso { background: color-mix(in srgb, var(--warn) 16%, var(--surface-2)); color: var(--warn); }

  /* quadro */
  .quadro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .coluna { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .coluna h3 { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 6px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
  .contagem { background: var(--surface-2); border-radius: 999px; padding: 1px 9px; color: var(--fg); letter-spacing: 0; }
  .tarefa { background: var(--card); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .tarefa-texto { font-weight: 500; overflow-wrap: anywhere; }
  .tarefa-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); }
  .tarefa-obs { font-size: 12px; color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); border-radius: 8px; padding: 6px 8px; }
  .acoes { display: flex; gap: 8px; flex-wrap: wrap; }
  .btn { border-radius: var(--raio-controle); padding: 7px 12px; font-size: 13px; font-weight: 500; border: 1px solid var(--line); background: var(--surface); }
  .btn:hover { border-color: var(--muted); }
  .btn.principal { background: var(--ok); border-color: var(--ok); color: #07140d; }
  .btn.principal:hover { filter: brightness(1.08); }
  .rejeitar { display: flex; gap: 8px; flex-wrap: wrap; }
  .rejeitar input { flex: 1 1 160px; min-width: 0; background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: var(--raio-controle); padding: 7px 10px; font: inherit; font-size: 13px; }
  .vazio { color: var(--muted); font-size: 13px; padding: 10px 4px; }

  /* pessoas */
  .pessoas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 22px; }
  .pessoa { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 10px; transition: border-color .18s ease, transform .18s ease; }
  .pessoa:hover { transform: translateY(-2px); border-color: var(--muted); }
  .pessoa[aria-pressed="true"] { border-color: var(--tarefas); background: color-mix(in srgb, var(--tarefas) 8%, var(--card)); }
  .pessoa-topo { display: flex; align-items: center; gap: 12px; }
  .avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--surface-2); color: var(--tarefas); flex: none; }
  .pessoa strong { display: block; }
  .pessoa small { color: var(--muted); }
  .lista-tarefas { display: flex; flex-direction: column; gap: 10px; }
  h2.secao { font-size: 18px; margin-bottom: 12px; }

  /* rotinas */
  .tabela { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
  table { width: 100%; border-collapse: collapse; min-width: 640px; }
  th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
  th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
  tr:last-child td { border-bottom: 0; }
  td.num { font-variant-numeric: tabular-nums; }
  .barra-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }

  /* relatório */
  .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 22px; }
  .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; }
  .kpi span { color: var(--muted); font-size: 13px; }
  .kpi strong { display: block; font-size: 30px; margin-top: 4px; font-variant-numeric: tabular-nums; }
  .kpi small { color: var(--muted); }
  .graficos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .grafico { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 18px; min-width: 0; }
  .grafico h3 { font-size: 16px; margin-bottom: 4px; }
  .grafico p { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
  .grafico svg { width: 100%; height: auto; display: block; }
  .grafico text { fill: var(--muted); font-family: var(--fonte); font-size: 11px; }
  .grafico .valor { fill: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
  .legenda { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
  .legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

  /* empresa (logo) */
  .config { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 900px; }
  .config > * { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 20px; min-width: 0; }
  .config-logo { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
  .previa { width: 140px; height: 110px; border-radius: 16px; background: var(--card); border: 1px dashed var(--line); display: grid; place-items: center; overflow: hidden; flex: none; padding: 8px; font-weight: 700; font-size: 18px; text-align: center; }
  .previa img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
  .config-nome { display: flex; flex-direction: column; gap: 8px; }
  .config-nome label { font-size: 13px; color: var(--muted); }
  .config-nome input { background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: var(--raio-controle); padding: 9px 12px; font: inherit; }
  .config-nome input:disabled { opacity: .65; }
  .config-nome small { color: var(--muted); }

  /* equipe e cargos */
  .form-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; align-items: end; }
  .campo-form { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .campo-form label { font-size: 13px; color: var(--muted); }
  .campo-form input, .campo-form select { background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: var(--raio-controle); padding: 9px 12px; font: inherit; width: 100%; min-width: 0; }
  .cartao-form { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 20px; margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
  .cartao-form h2 { font-size: 17px; }
  .caixa-aviso { border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); background: color-mix(in srgb, var(--warn) 9%, var(--surface)); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
  .caixa-aviso p { margin: 0; }
  td select { padding: 6px 8px; }
  .acao-linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .btn.perigo { border-color: color-mix(in srgb, var(--bad) 50%, var(--line)); color: var(--bad); }
  .btn[disabled] { opacity: .45; cursor: not-allowed; }
  .toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); background: var(--fg); color: var(--bg); padding: 10px 18px; border-radius: var(--raio-controle); font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 20; max-width: calc(100% - 32px); }
  .toast.visivel { opacity: 1; transform: translate(-50%, 0); }

  /* ---------- tablet e celular: duas colunas ---------- */
  @media (max-width: 1099px) {
    .modulos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .modulo { min-height: clamp(190px, 30vw, 260px); padding: 22px; }
    .arco { height: 60px; }
  }
  @media (max-width: 860px) { .quadro, .graficos, .config { grid-template-columns: 1fr; } }
  @media (max-width: 600px) {
    .modulos { gap: 14px; margin-top: 24px; }
    .modulo { min-height: 168px; padding: 16px; border-radius: 20px; gap: 16px; }
    .icone-modulo { width: 52px; height: 52px; border-radius: 16px; }
    .icone-modulo svg { width: 26px; height: 26px; }
    .modulo-nome { font-size: 18px; }
    .seta { width: 32px; height: 32px; border-radius: 10px; }
    .logo-home { padding-top: 12px; }
    .logo-caixa { min-height: 80px; max-height: 130px; }
    .logo-img { max-height: 120px; }
  }
  @media (max-width: 340px) { .modulos { gap: 10px; } .modulo { padding: 12px; } .modulo-nome { font-size: 16px; } }
  @media (prefers-reduced-motion: reduce) {
    .modulo, .seta, .pessoa, .toast { transition: none; }
    .modulo:hover, .modulo:focus-visible, .modulo:active, .modulo:hover .seta, .modulo:focus-visible .seta { transform: none; }
  }