/*
 * BeFly - visual do OpenTask (tokens de opentask-web/src/app.css).
 * Tema escuro por padrao (classe .dark no <html>); barra lateral retratil (.rail-collapsed).
 */
  /* Tokens do OpenTask (opentask-web/src/app.css) */
  :root {
    --brand-h: 262;
    --ground: #f6f7fb; --surface: #ffffff; --surface-2: #f4f6fa; --surface-3: #e9edf5;
    --line: #e3e8f0; --line-soft: #eef1f7;
    --ink: #0d1424; --ink-dim: #55637a; --ink-faint: #8593a9;
    --primary: oklch(0.52 0.19 var(--brand-h)); --primary-hover: oklch(0.47 0.19 var(--brand-h));
    --primary-ink: oklch(0.45 0.19 var(--brand-h)); --primary-soft: oklch(0.52 0.19 var(--brand-h) / 0.09);
    --primary-edge: oklch(0.52 0.19 var(--brand-h) / 0.32);
    --ok: #00775c; --ok-soft: color-mix(in srgb, #00775c 10%, transparent); --ok-edge: color-mix(in srgb, #00775c 30%, transparent);
    --warn: #8a5f00; --warn-soft: color-mix(in srgb, #8a5f00 11%, transparent); --warn-edge: color-mix(in srgb, #8a5f00 30%, transparent);
    --crit: #96102f; --crit-soft: color-mix(in srgb, #96102f 9%, transparent); --crit-edge: color-mix(in srgb, #96102f 28%, transparent);
    --rail: #ffffff; --rail-line: #e1e7f1; --rail-ink: #101828; --rail-dim: #55637a; --rail-faint: #7c889d;
    --rail-hover: color-mix(in srgb, #101828 5%, transparent); --rail-panel: color-mix(in srgb, #101828 3%, transparent);
    --rail-active: color-mix(in srgb, oklch(0.52 0.19 var(--brand-h)) 10%, #ffffff);
    --rail-edge: color-mix(in srgb, oklch(0.52 0.19 var(--brand-h)) 34%, transparent);
    --rail-accent: oklch(0.47 0.16 var(--brand-h));
    --shadow-1: 0 1px 2px rgb(13 20 36 / 0.06);
    --shadow-2: 0 1px 2px rgb(13 20 36 / 0.05), 0 6px 16px -4px rgb(13 20 36 / 0.08);
    --shadow-3: 0 2px 4px rgb(13 20 36 / 0.05), 0 16px 40px -8px rgb(13 20 36 / 0.14);
    --card-edge: transparent;
    --radius-card: 0.875rem; --radius-control: 0.625rem;
    --row-py: 0.8125rem; --card-p: 1.375rem;
    --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  }
  .dark {
    --ground: #070b14; --surface: #0e1524; --surface-2: #151d30; --surface-3: #1c2740;
    --line: #202c46; --line-soft: #172034;
    --ink: #eaeff9; --ink-dim: #93a3c0; --ink-faint: #64748f;
    --primary: oklch(0.62 0.19 var(--brand-h)); --primary-hover: oklch(0.68 0.19 var(--brand-h));
    --primary-ink: oklch(0.8 0.11 var(--brand-h)); --primary-soft: oklch(0.62 0.19 var(--brand-h) / 0.14);
    --primary-edge: oklch(0.62 0.19 var(--brand-h) / 0.38);
    --ok: #34d399; --ok-soft: color-mix(in srgb, #34d399 13%, transparent); --ok-edge: color-mix(in srgb, #34d399 32%, transparent);
    --warn: #f5a524; --warn-soft: color-mix(in srgb, #f5a524 14%, transparent); --warn-edge: color-mix(in srgb, #f5a524 32%, transparent);
    --crit: #fb7185; --crit-soft: color-mix(in srgb, #fb7185 14%, transparent); --crit-edge: color-mix(in srgb, #fb7185 32%, transparent);
    --rail: #0b111f; --rail-line: #1b2740; --rail-ink: #dbe4f4; --rail-dim: #7186a8; --rail-faint: #5a6b8c;
    --rail-hover: color-mix(in srgb, #ffffff 5%, transparent); --rail-panel: color-mix(in srgb, #000000 20%, transparent);
    --rail-active: color-mix(in srgb, oklch(0.6 0.19 var(--brand-h)) 18%, #0b111f);
    --rail-edge: color-mix(in srgb, oklch(0.6 0.19 var(--brand-h)) 42%, transparent);
    --rail-accent: oklch(0.78 0.11 var(--brand-h));
    --card-edge: rgb(255 255 255 / 0.05);
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-2: 0 2px 8px -2px rgb(0 0 0 / 0.5);
    --shadow-3: 0 16px 48px -12px rgb(0 0 0 / 0.7);
    color-scheme: dark;
  }
  * { box-sizing: border-box; }
  body { margin: 0; font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
         color: var(--ink); background: var(--ground); -webkit-font-smoothing: antialiased; font-size: 14px; }
  svg.lucide { width: 1.125rem; height: 1.125rem; stroke-width: 1.75; flex-shrink: 0; }
  .sm svg.lucide, svg.lucide.sm { width: 0.9rem; height: 0.9rem; }

  .label-mono { font-family: var(--mono); font-size: .6875rem; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
  .numeric { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
  .dim { color: var(--ink-dim); } .faint { color: var(--ink-faint); }



  /* Casca do app: barra lateral + cabecalho */
  .shell { display: flex; min-height: 100vh; }
  .rail { width: 15.5rem; background: var(--rail); border-right: 1px solid var(--rail-line); display: flex; flex-direction: column; padding: 1rem .75rem; }
  .brand { display: flex; align-items: center; gap: .6rem; padding: .25rem .5rem 1.25rem; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; }
  .brand-mark { width: 2rem; height: 2rem; border-radius: .6rem; display: grid; place-items: center; color: #fff;
                background: linear-gradient(135deg, oklch(0.6 0.19 var(--brand-h)), oklch(0.45 0.19 var(--brand-h))); }
  .brand small { display: block; font-weight: 500; font-size: .7rem; color: var(--rail-faint); letter-spacing: 0; }
  .rail .label-mono { color: var(--rail-faint); padding: 0 .75rem .5rem; }
  .nav { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .15rem; }
  .nav a { display: flex; align-items: center; gap: .65rem; padding: .5rem .75rem; border-radius: .5rem; color: var(--rail-dim);
           text-decoration: none; font-size: .8125rem; border: 1px solid transparent; }
  .nav a:hover { background: var(--rail-hover); color: var(--rail-ink); }
  .nav a.active { background: var(--rail-active); border-color: var(--rail-edge); color: var(--rail-accent); font-weight: 500; }
  .nav .count { margin-left: auto; font-family: var(--mono); font-size: .68rem; color: var(--rail-faint); }
  .rail-panel { margin-top: auto; border: 1px solid var(--rail-line); background: var(--rail-panel); border-radius: .75rem; padding: .9rem; }
  .rail-user { display: flex; align-items: center; gap: .6rem; padding: .9rem .25rem 0; }
  .avatar { width: 2rem; height: 2rem; border-radius: 999px; display: grid; place-items: center; font-size: .72rem; font-weight: 600;
            background: var(--primary-soft); color: var(--primary-ink); border: 1px solid var(--primary-edge); }
  .rail-user .who { min-width: 0; flex: 1; } .rail-user .who p { margin: 0; }
  .rail-user .name { font-size: .8125rem; font-weight: 500; color: var(--rail-ink); }
  .rail-user .role { font-size: .6875rem; color: var(--rail-faint); }
  .icon-btn { background: none; border: none; color: var(--rail-dim); padding: .4rem; border-radius: .5rem; cursor: pointer; display: grid; place-items: center; }
  .icon-btn:hover { background: var(--rail-hover); color: var(--rail-ink); }

  /* Barra lateral retratil (app-layout.tsx do OpenTask: w-64 -> w-16, so icones) */
  .rail { transition: width .28s cubic-bezier(0.22, 1, 0.36, 1), padding .28s cubic-bezier(0.22, 1, 0.36, 1); overflow: hidden; }
  /* Altura da janela, presa no lugar: página longa (histórico cheio) rola só do lado direito */
  .rail { position: sticky; top: 0; height: 100vh; height: 100dvh; flex-shrink: 0; overflow-y: auto; }
  .rail-toggle { margin-left: auto; }
  .rail-sep { display: none; border: none; border-top: 1px solid var(--rail-line); margin: 0 .25rem .75rem; }
  .rail-collapsed .rail { width: 4rem; padding: 1rem .5rem; }
  .rail-collapsed .rail .brand { flex-direction: column; gap: .5rem; padding: .25rem 0 1rem; }
  .rail-collapsed .rail .brand > span:not(.brand-mark) { display: none; }
  .rail-collapsed .rail .rail-toggle { margin-left: 0; }
  .rail-collapsed .rail .label-mono { display: none; }
  .rail-collapsed .rail .rail-sep { display: block; }
  .rail-collapsed .rail .nav a { font-size: 0; gap: 0; justify-content: center; padding: .55rem 0; }
  .rail-collapsed .rail .nav .count, .rail-collapsed .rail .rail-panel, .rail-collapsed .rail .who { display: none; }
  .rail-collapsed .rail .rail-user { flex-direction: column; gap: .5rem; padding-left: 0; padding-right: 0; }

  .main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .topbar { height: 3.5rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--ground) 85%, transparent);
            backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: .75rem; padding: 0 1.5rem; }
  .topbar .crumb { font-size: .8125rem; color: var(--ink-dim); display: flex; align-items: center; gap: .4rem; }
  .topbar .crumb b { color: var(--ink); font-weight: 500; }
  .topbar .right { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
  .canvas { flex: 1; background-image: radial-gradient(60rem 30rem at 50% -8rem, oklch(0.62 0.19 var(--brand-h) / 0.07), transparent 70%); }
  .content { max-width: 87.5rem; margin: 0 auto; padding: 2rem 2.5rem 3rem; }

  .page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
  .page-header h1 { margin: .35rem 0 0; font-size: 1.625rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.028em; }
  .page-header p { margin: .25rem 0 0; color: var(--ink-dim); font-size: .8125rem; }
  .actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

  .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: inset 0 1px 0 0 var(--card-edge), var(--shadow-2); }
  .theme-btn { background: none; border: none; color: var(--ink-dim); width: 2.25rem; height: 2.25rem; border-radius: .5rem; display: grid; place-items: center; cursor: pointer; }
  .theme-btn:hover { background: var(--surface-2); color: var(--ink); }

  /* Painel lateral de detalhe (sheet do OpenTask) */
  .sheet-backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / .5); z-index: 20; display: none; }
  .sheet { position: fixed; top: 0; right: 0; bottom: 0; width: min(32rem, 100vw); background: var(--surface); border-left: 1px solid var(--line);
           box-shadow: var(--shadow-3); z-index: 21; display: none; flex-direction: column; animation: slide-left .28s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .sheet.open, .sheet-backdrop.open { display: flex; } .sheet-backdrop.open { display: block; }
  .sheet header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--line-soft); }
  .sheet header .t { margin: 0; font-weight: 600; font-size: 1.05rem; } .sheet header .s { margin: .2rem 0 0; font-size: .75rem; color: var(--ink-faint); }
  .sheet .body { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; display: grid; gap: 1.5rem; align-content: start; }
  .sheet .box { border: 1px solid var(--line); border-radius: .75rem; overflow: hidden; }
  .sheet .box .kv { padding: .6rem 1rem; }
  .sheet .foot { padding: .9rem 1.5rem; border-top: 1px solid var(--line-soft); font-size: .75rem; color: var(--ink-dim); }
  .trilha { display: grid; gap: .5rem; } .trilha div { display: flex; align-items: center; font-size: .8125rem; }
  .trilha small { color: var(--ink-faint); width: 6.5rem; flex-shrink: 0; }
  @keyframes slide-left { from { transform: translateX(100%); } }
  /* Regra: tudo que e card, contador, pilula, chip ou linha e clicavel */
  .clickable, [data-ir], [data-toast], [data-ver], [data-limpar], [data-set-cliente], [data-set-ramal], [data-set-situacao], [data-filtro-previa] { cursor: pointer; }
  button.pill { font: inherit; font-size: .75rem; line-height: 1.25rem; font-weight: 500; }
  .pill[data-ir]:hover, .pill[data-toast]:hover, .pill[data-limpar]:hover, .pill[data-set-situacao]:hover, .pill[data-filtro-previa]:hover { box-shadow: 0 0 0 3px var(--primary-soft); }
  .card.clickable:hover { border-color: var(--primary-edge); }
  .rail-panel.clickable:hover { border-color: var(--rail-edge); }
  .chip[data-ir]:hover { border-color: var(--primary-edge); color: var(--primary-ink); }
  .link-like:hover { color: var(--primary-ink); text-decoration: underline; text-underline-offset: 3px; }
  .toast { position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--surface);
           padding: .6rem 1rem; border-radius: .6rem; font-size: .8125rem; z-index: 40; box-shadow: var(--shadow-3); display: none; }
  .toast.on { display: block; }
  .pill.on-filtro { box-shadow: 0 0 0 3px var(--primary-edge); }
  .filters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; align-items: end; }
  .path { color: var(--ink-dim); max-width: 18rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; }
  .card-p { padding: var(--card-p); }
  .card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem var(--card-p); border-bottom: 1px solid var(--line-soft); }
  .card-head h2 { margin: 0; font-size: .9375rem; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: .5rem; }

  /* Pilulas (status-pill.tsx): bolinha + texto, nunca so cor */
  .pill { display: inline-flex; align-items: center; gap: .375rem; border: 1px solid transparent; border-radius: 999px;
          padding: .125rem .625rem .125rem .5rem; font-size: .75rem; line-height: 1.25rem; font-weight: 500; white-space: nowrap; }
  .pill::before { content: ''; width: .375rem; height: .375rem; border-radius: 999px; background: currentColor; }
  .pill.ok { border-color: var(--ok-edge); background: var(--ok-soft); color: var(--ok); }
  .pill.warn { border-color: var(--warn-edge); background: var(--warn-soft); color: var(--warn); }
  .pill.crit { border-color: var(--crit-edge); background: var(--crit-soft); color: var(--crit); }
  .pill.info { border-color: var(--primary-edge); background: var(--primary-soft); color: var(--primary-ink); }
  .pill.muted { border-color: var(--line); background: var(--surface-2); color: var(--ink-dim); }
  .chip { display: inline-block; font-family: var(--mono); font-size: .72rem; padding: .1rem .45rem; border-radius: .375rem;
          background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-dim); }

  /* Controles */
  label.f { display: block; font-size: .8125rem; font-weight: 500; margin-bottom: .375rem; }
  .input, .select, .textarea { width: 100%; font: inherit; font-size: .875rem; color: var(--ink); background: var(--surface);
          border: 1px solid var(--line); border-radius: var(--radius-control); padding: .55rem .75rem; outline: none; }
  .input:focus, .select:focus, .textarea:focus { border-color: var(--primary-edge); box-shadow: 0 0 0 3px var(--primary-soft); }
  .select:disabled { background: var(--surface-2); color: var(--ink-faint); }
  .hint { font-size: .75rem; color: var(--ink-dim); margin-top: .35rem; display: flex; gap: .35rem; align-items: center; }
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font: inherit; font-size: .8125rem; font-weight: 500;
         border-radius: var(--radius-control); padding: .55rem .9rem; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
  .btn:hover { background: var(--surface-2); }
  .btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: var(--shadow-1); }
  .btn.primary:hover { background: var(--primary-hover); }
  .btn.primary:disabled { opacity: .45; cursor: not-allowed; }
  .btn.lg { padding: .75rem 1rem; font-size: .9rem; width: 100%; }
  .btn.ghost-crit { color: var(--crit); } .btn.ghost-ok { color: var(--ok); }
  .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
  .stack { display: grid; gap: 1rem; }

  /* Tabela (data-table.tsx) */
  table.dt { width: 100%; border-collapse: collapse; font-size: .8125rem; text-align: left; }
  table.dt th { font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
                font-weight: 500; padding: .75rem 1.25rem; border-bottom: 1px solid var(--line-soft); }
  table.dt td { padding: var(--row-py) 1.25rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
  table.dt tr:last-child td { border-bottom: none; }
  table.dt tbody tr:hover { background: var(--surface-2); }
  table.dt tr.erro { background: var(--crit-soft); }
  .cell-strong { font-weight: 500; }
  .table-foot { display: flex; justify-content: space-between; align-items: center; padding: .85rem 1.25rem; border-top: 1px solid var(--line-soft); font-size: .75rem; color: var(--ink-dim); }
  .pager { display: flex; gap: .25rem; } .pager span { min-width: 1.75rem; text-align: center; padding: .2rem .4rem; border-radius: .375rem; border: 1px solid var(--line); font-family: var(--mono); font-size: .72rem; }
  .pager span.on { background: var(--primary); border-color: var(--primary); color: #fff; }

  /* Tabulacao */
  .tab-grid { display: grid; grid-template-columns: 22rem 1fr; gap: 1.5rem; align-items: start; }
  .proto { text-align: center; padding: 1.25rem var(--card-p) 1rem; border-bottom: 1px solid var(--line-soft); }
  .proto .numeric { font-size: 1.5rem; font-weight: 600; color: var(--primary-ink); margin-top: .35rem; }
  .kv { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem var(--card-p); border-bottom: 1px solid var(--line-soft); font-size: .8125rem; }
  .kv:last-child { border-bottom: none; } .kv span:first-child { color: var(--ink-dim); } .kv b { font-weight: 500; }
  .nivel { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: .375rem; margin-right: .45rem;
           font-family: var(--mono); font-size: .68rem; background: var(--primary-soft); color: var(--primary-ink); border: 1px solid var(--primary-edge); }
  .section-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.5rem 0 .9rem; padding-top: 1.25rem; border-top: 1px solid var(--line-soft); }
  .section-title h3 { margin: 0; font-size: .875rem; font-weight: 600; display: flex; align-items: center; gap: .45rem; }

  /* Estado vazio (empty-state.tsx) */
  .empty { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 4rem 1.5rem; text-align: center; }
  .empty .ico { width: 3.5rem; height: 3.5rem; border-radius: 1rem; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-faint); display: grid; place-items: center; }
  .empty .ico svg { width: 1.5rem; height: 1.5rem; }
  .empty p { margin: 0; } .empty .t { font-size: .875rem; font-weight: 500; } .empty .d { font-size: .75rem; color: var(--ink-dim); max-width: 24rem; line-height: 1.6; }

  .alert { display: flex; gap: .6rem; align-items: flex-start; border-radius: var(--radius-control); padding: .7rem .85rem; font-size: .8125rem; border: 1px solid; }
  .alert.warn { background: var(--warn-soft); border-color: var(--warn-edge); color: var(--warn); }
  .alert.crit { background: var(--crit-soft); border-color: var(--crit-edge); color: var(--crit); }

  /* Login (auth-layout.tsx) */
  .auth-bg { min-height: 100vh; display: grid; place-items: center; padding: 2rem;
             background: #245fd4 radial-gradient(130% 120% at 18% -10%, #3f82ec 0%, #245fd4 34%, #15295a 74%, #070b14 100%); }
  .auth-box { width: 100%; max-width: 60rem; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: 1.4rem;
              border: 1px solid var(--line); background: var(--ground); box-shadow: 0 32px 80px -24px rgb(0 0 0 / .55); min-height: 30rem; }
  .auth-brand { position: relative; background: var(--rail); border-right: 1px solid var(--rail-line); padding: 3rem; display: flex; flex-direction: column; overflow: hidden; }
  .auth-brand::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(var(--rail-line) 1px, transparent 1px);
              background-size: 24px 24px; -webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 55%); mask-image: linear-gradient(160deg, #000 0%, transparent 55%); }
  .auth-brand .hero { position: relative; margin: auto 0; display: grid; gap: 1rem; justify-items: center; text-align: center; }
  .auth-brand h2 { margin: 0; font-size: 2rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; }
  .auth-brand p { margin: 0; color: var(--rail-dim); font-size: .95rem; line-height: 1.6; max-width: 22rem; }
  .auth-brand .foot { position: relative; color: var(--rail-faint); font-size: .8rem; display: flex; gap: .4rem; align-items: center; }
  .auth-form { display: grid; place-items: center; padding: 3rem 2.5rem; }
  .auth-form .inner { width: 100%; max-width: 22rem; }
  .auth-form h1 { margin: .4rem 0 .25rem; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.025em; }

/* Telas estreitas: como o auth-layout do OpenTask (abaixo de 900px empilha e esconde o destaque) */
@media (max-width: 899px) {
  .auth-bg { padding: 1rem; }
  .auth-box { grid-template-columns: 1fr; min-height: 0; }
  .auth-brand { border-right: none; border-bottom: 1px solid var(--rail-line); padding: 1.25rem 1.5rem; }
  .auth-brand .hero, .auth-brand .foot { display: none; }
  .auth-form { padding: 2rem 1.5rem; }
  .tab-grid { grid-template-columns: 1fr; }
  .filters { grid-template-columns: 1fr 1fr !important; }
  .content { padding: 1.5rem 1rem 2.5rem; }
}
@media (max-width: 599px) {
  .grid2, .filters { grid-template-columns: 1fr !important; }
}

/* Avisos de sucesso, erro de campo, linhas que levam a outra tela e a janela de confirmacao */
.alert.ok { background: var(--ok-soft); border-color: var(--ok-edge); color: var(--ok); }
.erro-campo { color: var(--crit); font-size: .75rem; margin-top: .35rem; display: flex; gap: .35rem; align-items: center; }
.input.invalido, .select.invalido { border-color: var(--crit-edge); }
tr[data-href] { cursor: pointer; }
/* Prioridade entre filas: a linha inteira se arrasta (befly-prioridade.js); os pontinhos só indicam isso */
tr[draggable="true"] { cursor: grab; }
tr[draggable="true"]:active { cursor: grabbing; }
tr[draggable="true"] a, tr[draggable="true"] button { cursor: pointer; }
.alca-arrastar { display: inline-flex; vertical-align: middle; margin-right: .35rem; color: var(--ink-faint); }
tr.arrastando { opacity: .45; outline: 2px dashed var(--line); }
tbody.salvando { opacity: .6; pointer-events: none; }
a.pill, a.chip { text-decoration: none; }
a.pill:hover, a.chip:hover { box-shadow: 0 0 0 3px var(--primary-soft); }
.link-like { color: inherit; text-decoration: none; }
.check { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; }
.check input { width: 1rem; height: 1rem; accent-color: var(--primary); }
.row-actions { display: flex; gap: .4rem; justify-content: flex-end; }
.row-actions form { margin: 0; }
dialog.confirmar { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); color: var(--ink);
                   padding: 1.25rem 1.5rem; width: min(26rem, 92vw); box-shadow: var(--shadow-3); }
dialog.confirmar::backdrop { background: rgb(0 0 0 / .5); }
dialog.confirmar .msg { font-size: .875rem; line-height: 1.6; margin: .5rem 0 1.25rem; }
.pagination-befly { display: flex; gap: .25rem; align-items: center; }
.pagination-befly a, .pagination-befly span { min-width: 1.75rem; text-align: center; padding: .2rem .45rem; border-radius: .375rem;
    border: 1px solid var(--line); font-family: var(--mono); font-size: .72rem; color: var(--ink-dim); text-decoration: none; }
.pagination-befly .on { background: var(--primary); border-color: var(--primary); color: #fff; }
.pagination-befly .off { opacity: .45; }

/* Tabela larga rola dentro do cartao, nunca a pagina inteira */
.table-wrap { overflow-x: auto; }
table.dt td.cell-strong, table.dt td.numeric, .row-actions { white-space: nowrap; }

/* Detalhe da tabulacao em pagina propria: mesmo desenho do painel lateral */
.sheet-pagina header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.sheet-pagina header .t { margin: 0; font-weight: 600; font-size: 1.05rem; }
.sheet-pagina header .s { margin: .2rem 0 0; font-size: .75rem; color: var(--ink-faint); }
.sheet-pagina .body { padding: 1.25rem 1.5rem; display: grid; gap: 1.5rem; }
.sheet-pagina .box { border: 1px solid var(--line); border-radius: .75rem; overflow: hidden; }
.sheet-pagina .box .kv { padding: .6rem 1rem; }
.sheet-pagina .foot { padding: .9rem 1.5rem; border-top: 1px solid var(--line-soft); font-size: .75rem; color: var(--ink-dim); }
.sheet header .actions { flex-wrap: wrap; justify-content: flex-end; }
.sheet .carregando { padding: 2rem 1.5rem; font-size: .8125rem; color: var(--ink-dim); }
a.btn, a.icon-btn { text-decoration: none; }