/* f2u-theme.css — Finds2U Design Intelligence aplicado à superfície de dashboards.
   Fonte canônica dos tokens: projects/finds2u/knowledge/brand/design-system.md (v2.3.0)
   e a implementação de referência em
   projects/finds2u/outputs/brand/output-finds2u-design-intelligence.html.

   Não editar valores de token aqui sem atualizar o design-system canônico.
   Este arquivo só traduz os tokens para as telas operacionais Finds2U. */

:root {
  color-scheme: light;

  /* ---- rampas da logomarca ---- */
  --cyan-50:#EEFCFD;--cyan-100:#D5F8FA;--cyan-200:#AEF0F4;--cyan-300:#75E5EC;--cyan-400:#45DAE4;
  --cyan-500:#2AD3E0;--cyan-600:#18B3C2;--cyan-700:#168F9C;--cyan-800:#176F79;--cyan-900:#185C64;--cyan-950:#0A353B;
  --blue-50:#EFF7FB;--blue-100:#DDEEF7;--blue-200:#B9DCEB;--blue-300:#83BFDA;--blue-400:#4B9FC3;
  --blue-500:#2D82AE;--blue-600:#206F9E;--blue-700:#19689D;--blue-800:#15547E;--blue-900:#123F60;--blue-950:#0A263C;
  --green-50:#F2FCEC;--green-100:#E1F8D5;--green-200:#C4F0AF;--green-300:#A2E581;--green-400:#8BDD67;
  --green-500:#74CE5E;--green-600:#55B33F;--green-700:#408B32;--green-800:#376E2E;--green-900:#305A2A;--green-950:#163116;
  --neutral-0:#FFFFFF;--neutral-50:#F7FAFB;--neutral-100:#EEF4F6;--neutral-200:#DDE8EC;--neutral-300:#C2D3DA;
  --neutral-400:#91A9B3;--neutral-500:#5B727D;--neutral-600:#4B626D;--neutral-700:#354B56;--neutral-800:#223640;
  --neutral-900:#142630;--neutral-950:#09171E;

  --graphite:#545454;--overlap:#74CE5E;--warning:#E9A23B;--danger:#D94B4B;--success:#55B33F;

  /* ---- tipografia ---- */
  --display:'Sora',system-ui,sans-serif;
  --sans:'Nunito Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',monospace;

  /* ---- forma ---- */
  --r-xs:6px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px;--r-pill:999px;
  --shadow-xs:0 1px 2px rgba(10,38,60,.05);
  --shadow-sm:0 2px 6px rgba(10,38,60,.07);
  --shadow-md:0 8px 24px rgba(10,38,60,.09);
  --shadow-lg:0 18px 50px rgba(10,38,60,.13);

  /* ---- semântica de superfície ---- */
  --bg:var(--neutral-50);--shell:var(--neutral-0);--raised:var(--neutral-0);--sunken:var(--neutral-100);
  --field:var(--neutral-0);--line:var(--neutral-200);--line-strong:var(--neutral-300);
  --text:var(--neutral-900);--body:var(--neutral-700);--muted:var(--neutral-600);--subtle:var(--neutral-500);
  --brand:var(--blue-700);--brand-strong:var(--blue-800);
  --focus:0 0 0 2px var(--raised),0 0 0 5px var(--blue-700);

  /* ---- gate de login (auth-gate.js, compartilhado e neutro) ----
     O gate serve as três superfícies e não conhece marca: ele lê estes tokens.
     Sem eles, apareceria vestido de Move Way — o que o ADR-030, item 4, proíbe
     para um brand-system independente como o Finds2U. */
  --gate-bg:var(--neutral-50);
  --gate-card:var(--neutral-0);
  --gate-field:var(--neutral-0);
  --gate-line:var(--neutral-200);
  --gate-fg:var(--neutral-900);
  --gate-muted:var(--neutral-600);
  --gate-primary:var(--blue-700);
  --gate-primary-hover:var(--blue-800);
  --gate-primary-fg:var(--neutral-0);
  --gate-ring:var(--cyan-500);
  --gate-ring-soft:rgba(42,211,224,.36);
  --gate-danger:var(--danger);
  --gate-subtle:var(--neutral-500);
  --gate-soft:var(--neutral-100);
  --gate-soft-fg:var(--neutral-700);
  --gate-soft-hover:var(--neutral-200);
  --gate-radius:var(--r-lg);
  --gate-radius-sm:var(--r-sm);
  --gate-font:var(--sans);
  --gate-font-heading:var(--display);
  /* A marca do Finds2U é tipográfica — o menu dela também não usa imagem. */
  --gate-logo-bg:linear-gradient(135deg,var(--cyan-500),var(--blue-700));
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:400 15px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
}

::selection{color:var(--blue-950);background:var(--cyan-300)}

a{color:var(--blue-700)}

:focus-visible{outline:3px solid var(--blue-700);outline-offset:2px;box-shadow:var(--focus);border-radius:var(--r-xs)}

.f2u-skip-link{
  position:fixed;z-index:250;top:8px;left:8px;padding:10px 14px;
  border-radius:var(--r-sm);background:var(--blue-950);color:var(--neutral-0);
  font-weight:700;transform:translateY(-160%);transition:transform 120ms ease;
}
.f2u-skip-link:focus{transform:translateY(0)}

.wrap{max-width:1280px;margin:0 auto;padding:20px 20px 72px}

/* ------------------------------------------------- menu (ds/f2u-nav.js)
   App shell do Finds2U: sidebar no desktop, header compacto e drawer no
   mobile — a estrutura que o Design Intelligence do projeto especifica
   (design-system.md, §Navegação). Componente próprio: o Finds2U é um
   brand-system independente e não veste o menu da Move Way. */

:root{ --f2u-side:236px; --f2u-head:56px }

/* O header é fixo: sem o padding-top o conteúdo passa por baixo dele. */
body.f2u-shell{ padding-left:var(--f2u-side);padding-top:var(--f2u-head) }
body.f2u-nav-open{overflow:hidden;overscroll-behavior:none}
body.f2u-shell .wrap{ padding-top:14px }

.f2u-nav-header{
  position:fixed;top:0;left:var(--f2u-side);right:0;z-index:40;
  display:flex;align-items:center;gap:12px;height:var(--f2u-head);padding:0 20px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.f2u-nav-brand{display:flex;align-items:center;gap:8px;text-decoration:none}
.f2u-nav-brand-mark{
  display:grid;place-items:center;width:24px;height:24px;border-radius:var(--r-xs);
  background:var(--blue-700);color:#fff;font-size:12px;
}
.f2u-nav-brand-text{color:var(--blue-800);font:700 13px/1 var(--sans);letter-spacing:-.01em}
.f2u-nav-title{
  color:var(--subtle);font:600 10px/1 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;
}
.f2u-nav-title::before{content:'/';margin-right:10px;color:var(--neutral-300)}

/* O botão do drawer só existe no mobile; no desktop a sidebar está sempre visível. */
.f2u-nav-toggle{display:none;border:0;background:none;padding:8px;cursor:pointer;border-radius:var(--r-xs)}
.f2u-nav-toggle-bars,
.f2u-nav-toggle-bars::before,
.f2u-nav-toggle-bars::after{
  display:block;width:17px;height:1.5px;border-radius:2px;background:var(--blue-800);content:'';
}
.f2u-nav-toggle-bars{position:relative}
.f2u-nav-toggle-bars::before{position:absolute;top:-5px}
.f2u-nav-toggle-bars::after{position:absolute;top:5px}

.f2u-nav-side{
  position:fixed;top:0;left:0;bottom:0;z-index:50;
  display:flex;flex-direction:column;gap:2px;width:var(--f2u-side);
  height:100dvh;padding:max(18px, env(safe-area-inset-top, 0px)) 12px max(18px, env(safe-area-inset-bottom, 0px));overflow:hidden;
  background:var(--blue-950);border-right:1px solid rgba(255,255,255,.06);
}
.f2u-nav-links{display:flex;min-height:0;flex:1;flex-direction:column;gap:2px;overflow-y:auto;overscroll-behavior:contain}
.f2u-nav-close{
  display:none;min-height:44px;flex:none;align-items:center;justify-content:center;margin:0 0 8px;
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-sm);background:rgba(255,255,255,.06);
  color:#fff;font:600 13px/1 var(--sans);cursor:pointer;
}
.f2u-nav-group{
  margin:16px 0 6px;padding:0 10px;color:rgba(255,255,255,.42);
  font:600 9px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
}
.f2u-nav-item{
  display:flex;align-items:center;gap:10px;min-height:38px;padding:8px 10px;
  border-radius:var(--r-sm);color:rgba(255,255,255,.72);text-decoration:none;
  font:600 12.5px/1.2 var(--sans);
  transition:background .14s cubic-bezier(.2,.8,.2,1),color .14s;
}
.f2u-nav-item:hover{color:#fff;background:rgba(255,255,255,.07)}
.f2u-nav-item.is-active{
  color:#fff;background:rgba(77,184,232,.16);
  box-shadow:inset 2px 0 0 var(--cyan-400);
}
.f2u-nav-icon{
  width:18px;flex:none;text-align:center;
  color:var(--cyan-400);font-size:13px;font-weight:400;
}
.f2u-nav-item.is-active .f2u-nav-icon{color:var(--cyan-300)}
.f2u-nav-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Portal e outras superfícies ficam no rodapé da sidebar, separados da operação. */
.f2u-nav-jump,.f2u-nav-portal{color:rgba(255,255,255,.55);font-weight:500}
.f2u-nav-portal{margin-top:auto;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);border-radius:0}

.f2u-nav-veil{position:fixed;inset:0;z-index:45;background:rgba(8,26,42,.5);backdrop-filter:blur(2px)}

@media (max-width:860px){
  body.f2u-shell{padding-left:0}
  .f2u-nav-header{left:0}
  .f2u-nav-toggle{display:block}
  .f2u-nav-title{display:none}

  /* Drawer: sai da tela e só entra quando o menu abre. */
  .f2u-nav-side{
    width:min(280px,84vw);
    transform:translateX(-100%);
    transition:transform .22s cubic-bezier(.2,.8,.2,1);
  }
  .f2u-nav-close{display:flex}
  .f2u-nav.is-open .f2u-nav-side{transform:translateX(0);box-shadow:0 0 40px rgba(8,26,42,.35)}
}

@media (max-width:860px) and (max-height:620px){
  .f2u-nav-side{padding-top:max(8px, env(safe-area-inset-top, 0px));padding-bottom:max(8px, env(safe-area-inset-bottom, 0px))}
  .f2u-nav-group{margin-top:8px}
}

@media (prefers-reduced-motion:reduce){
  .f2u-nav-side{transition:none}
}

/* ------------------------------------------------------------- cabeçalho */

.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:14px 0 6px}
.page-head h1{margin:0;font:600 28px/1.2 var(--display);letter-spacing:-.04em}
.eyebrow{font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--subtle);margin-bottom:8px}
.page-head .sub{color:var(--muted);font-size:13px;margin-top:5px}
.updated{color:var(--subtle);font-size:12px;margin:2px 0 18px}

/* contexto global: viagem ativa e câmbio congelado */
.context-bar{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin:0 0 18px;padding:11px 14px;
  background:var(--cyan-50);border:1px solid var(--cyan-300);border-radius:var(--r-md);
  font-size:13px;color:var(--blue-900);
}
.context-bar .ctx{display:inline-flex;align-items:center;gap:7px}
.context-bar .ctx b{font:600 13px var(--display)}
.context-bar .sep{color:var(--cyan-600)}
.context-bar .mono{font:500 12px var(--mono)}

/* --------------------------------------------------------------- botões */

.btn{
  appearance:none;cursor:pointer;
  min-height:44px;padding:10px 15px;
  border:1px solid var(--line-strong);border-radius:10px;
  background:var(--raised);color:var(--text);
  font:700 14px var(--sans);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background .18s cubic-bezier(.2,.8,.2,1),border-color .18s,transform .12s;
}
.btn:hover{border-color:var(--blue-500);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{background:var(--blue-700);color:#fff;border-color:var(--blue-700)}
.btn.primary:hover{background:var(--blue-800);border-color:var(--blue-800)}
.btn.secondary{background:var(--blue-50);color:var(--blue-800);border-color:var(--blue-300)}
.btn.ghost{background:transparent}
.btn:disabled{background:var(--sunken);color:var(--subtle);border-color:var(--line);cursor:default;transform:none}
.btn .spin{
  width:14px;height:14px;border-radius:50%;display:none;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;
  animation:f2u-spin .7s linear infinite;
}
.btn.loading .spin{display:inline-block}
@keyframes f2u-spin{to{transform:rotate(360deg)}}

/* ----------------------------------------------------------------- KPIs */

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:20px}
.kpi{
  position:relative;overflow:hidden;
  padding:18px 18px 18px 22px;
  background:var(--raised);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-xs);
}
.kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--cyan-500)}
.kpi.green::before{background:var(--green-500)}
.kpi.warning::before{background:var(--warning)}
.kpi.danger::before{background:var(--danger)}
/* Dois nomes para as mesmas partes: as telas antigas escrevem `lbl/val/extra`,
   as novas `kpi-label/kpi-value/kpi-extra`. Sem o par, as novas caíam num
   cartão com o texto sem estilo nenhum. */
.kpi .lbl,.kpi .kpi-label{font:600 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--subtle)}
.kpi .val,.kpi .kpi-value{font:600 27px/1 var(--display);letter-spacing:-.04em;margin-top:7px;font-variant-numeric:tabular-nums}
.kpi .val.neg,.kpi .kpi-value.neg{color:var(--danger)}
.kpi .extra,.kpi .kpi-extra{font-size:12px;color:var(--muted);margin-top:5px}

/* ---------------------------------------------------------------- cards */

.card{
  padding:22px;margin-bottom:18px;
  background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-xs);
}
.card > h2{margin:0 0 4px;font:600 19px/1.25 var(--display);letter-spacing:-.03em}
.card > .card-sub{margin:0 0 16px;color:var(--muted);font-size:13px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.card-head h2{margin:0;font:600 19px/1.25 var(--display);letter-spacing:-.03em}

.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px}

/* --------------------------------------------------------------- tabelas */

.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--raised)}
table{width:100%;border-collapse:collapse}
th,td{padding:13px 15px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{
  position:sticky;top:0;z-index:1;
  background:var(--sunken);color:var(--subtle);
  font:600 9px var(--mono);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
}
td{color:var(--body);font-size:13px}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--blue-50)}
td.money,th.money{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Valem também soltos: em `f2u-table.js` o alinhamento é da coluna, e o sinal
   fica num <span> dentro da célula, não na célula. */
td.mono,th.mono,.mono{font-family:var(--mono);font-size:12px}
td.neg,.neg{color:var(--danger)}
td.pos,.pos{color:var(--green-700)}
tfoot td{font-weight:700;color:var(--text);background:var(--sunken);border-top:1px solid var(--line-strong)}

/* ---------------------------------------------------------------- pills */

.pill{
  display:inline-flex;align-items:center;gap:6px;
  min-height:26px;padding:5px 9px;border-radius:var(--r-pill);border:1px solid transparent;
  font:600 9px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pill.info{border-color:var(--cyan-300);color:var(--cyan-800);background:var(--cyan-50)}
.pill.success{border-color:var(--green-300);color:var(--green-800);background:var(--green-50)}
.pill.warning{border-color:#F1CA83;color:#80500F;background:#FFF8E5}
.pill.danger{border-color:#F1AAAA;color:#993232;background:#FFF0F0}
.pill.neutral{color:var(--neutral-600);background:var(--neutral-100);border-color:var(--line)}

/* --------------------------------------------------------------- alertas */

.alert{
  display:grid;grid-template-columns:5px minmax(0,1fr);gap:14px;align-items:center;
  padding:14px 16px;margin-bottom:16px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--raised);
  font-size:13px;color:var(--body);
}
.alert::before{content:'';display:block;align-self:stretch;border-radius:3px;background:var(--cyan-500)}
.alert.success::before{background:var(--success)}
.alert.warning::before{background:var(--warning)}
.alert.danger::before{background:var(--danger)}
.alert b{color:var(--text)}
.f2u-feedback-title{display:block;color:var(--text);font-weight:700}
.f2u-feedback-message{display:block;min-width:0}

.f2u-toast-stack{
  position:fixed;z-index:220;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));
  display:grid;gap:10px;width:min(380px,calc(100vw - 28px));pointer-events:none;
}
.f2u-toast{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;
  padding:12px 14px;border:1px solid var(--line-strong);border-left:5px solid var(--cyan-700);
  border-radius:var(--r-md);background:var(--raised);color:var(--text);box-shadow:var(--shadow-lg);
  pointer-events:auto;animation:f2u-toast-in 180ms cubic-bezier(.2,.8,.2,1);
}
.f2u-toast.success{border-left-color:var(--success)}
.f2u-toast.warning{border-left-color:var(--warning)}
.f2u-toast.danger{border-left-color:var(--danger)}
.f2u-toast.is-leaving{opacity:0;transform:translateY(8px);transition:180ms ease}
.f2u-toast-action,.f2u-toast-close{min-height:36px;border:0;background:transparent;color:var(--blue-700);font-weight:700;cursor:pointer}
.f2u-toast-close{min-width:36px;font-size:20px;color:var(--muted)}
@keyframes f2u-toast-in{from{opacity:0;transform:translateY(8px)}}

.f2u-page-state{
  display:grid;justify-items:center;gap:8px;padding:36px 20px;text-align:center;
  border:1px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--raised);color:var(--muted);
}
.f2u-page-state-mark{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--cyan-100);color:var(--blue-800);font-size:22px}
.f2u-page-state h3,.f2u-page-state p{margin:0}
.f2u-page-state.is-loading .f2u-page-state-mark{animation:f2u-state-spin 900ms linear infinite}
@keyframes f2u-state-spin{to{transform:rotate(360deg)}}

/* ----------------------------------------------------------- vazio/erro */

.empty{
  padding:40px 24px;text-align:center;
  border:1px dashed var(--line-strong);border-radius:var(--r-lg);color:var(--muted);
}
/* estado vazio ocupando a faixa inteira quando mora dentro da grade de KPIs */
.kpis > .empty{grid-column:1/-1}
.empty .mark{
  width:54px;height:54px;margin:0 auto 14px;border-radius:50%;
  background:var(--cyan-100);color:var(--blue-800);
  display:flex;align-items:center;justify-content:center;font-size:22px;
}
.empty h3{margin:0 0 6px;font:600 17px var(--display);color:var(--text);letter-spacing:-.03em}
.empty p{margin:0;font-size:13px}

/* --------------------------------------------------------------- filtros */

.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:16px}
.field{display:flex;flex-direction:column;min-width:170px}
.field label{margin-bottom:6px;font-size:12px;font-weight:700;color:var(--text)}
.control{
  min-height:44px;padding:10px 12px;
  border:1px solid var(--line-strong);border-radius:10px;
  background:var(--field);color:var(--text);
  font:400 14px var(--sans);
}
.control:hover{border-color:var(--neutral-400)}
.control:focus{outline:0;border-color:var(--cyan-600);box-shadow:var(--focus)}

/* --------------------------------------------------------------- gráfico */

.chart-box{position:relative;height:280px}

/* barra de proporção usada nas tabelas de categoria */
.bar{height:6px;border-radius:999px;background:var(--sunken);overflow:hidden;min-width:70px}
.bar > span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--blue-700),var(--cyan-500))}

/* ------------------------------------------------------------ responsivo */

@media (max-width:820px){
  .wrap{padding:16px 14px 56px}
  .page-head h1{font-size:23px}
  .kpi .val,.kpi .kpi-value{font-size:23px}
  th,td{padding:11px 12px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ------------------------------------------------------- back office */
.f2u-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.f2u-flow{margin:0;padding-left:20px;color:var(--body)}
.f2u-flow li{padding:6px 0}
.f2u-flow a{font-weight:700;text-decoration:none}
.f2u-flow a:hover{text-decoration:underline}
.f2u-search{display:flex;flex-wrap:wrap;align-items:end;gap:10px;margin-bottom:16px}
.f2u-search label{display:flex;min-width:190px;flex-direction:column;gap:5px;color:var(--subtle);font:600 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.f2u-search .control{width:100%;margin-top:2px;text-transform:none;letter-spacing:normal;font-family:var(--sans)}
.muted{color:var(--subtle);font-size:12px}
.f2u-pager-btn{text-decoration:none}
.f2u-pager-btn.is-disabled{opacity:.45;pointer-events:none}
code{padding:2px 5px;border-radius:var(--r-xs);background:var(--sunken);font:500 12px var(--mono)}
@media(max-width:760px){.f2u-grid-2{grid-template-columns:1fr}}

/* ------------------------------------------- lista operacional (f2u-table.js)
   Filtros, ordenação, paginação e ações. Componente do Finds2U — o filtro da
   Move Way (mw-filters) tem a estrutura e a paleta daquela marca. */

.f2u-table-filters{
  display:flex;flex-direction:column;gap:10px;
  margin:0 0 14px;padding:12px 14px;
  background:var(--raised);border:1px solid var(--line);border-radius:var(--r-md);
}
/* Duas faixas: a fixa fica sempre à vista, a extra abre e fecha. Ambas são a
   mesma grade — recolher não pode mudar a largura dos campos.
   Grade, não fileira: em fileira cada filtro em chips tomava a linha inteira e
   meia dúzia deles empurrava a tabela para fora da tela. Em colunas eles
   convivem lado a lado, e no celular a grade cai sozinha para uma coluna. */
.f2u-table-filters-fixos,
.f2u-table-filters-extras{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  align-items:end;gap:12px 14px;
}
.f2u-table-filters-extras{
  padding-top:10px;border-top:1px dashed var(--line);
}
.f2u-table-filters-extras[hidden]{display:none}
/* Botões da barra: uma célula da grade, encostados à esquerda e à base, para
   não esticarem à largura da coluna. */
.f2u-filter-more,.f2u-filter-clear{justify-self:start;align-self:end}
.f2u-filter-more{
  align-self:flex-end;padding:7px 12px;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid var(--line);
  color:var(--subtle);font:600 12px/1 var(--sans);white-space:nowrap;
}
.f2u-filter-more:hover{border-color:var(--cyan-400);color:var(--blue-800)}
.f2u-filter-more[aria-expanded="true"]{border-color:var(--cyan-400);color:var(--blue-800)}
.f2u-filter{display:flex;flex-direction:column;gap:5px;min-width:0}
.f2u-filter-label{
  color:var(--subtle);font:600 9px/1 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;
}
.f2u-filter-input{
  min-height:38px;padding:8px 10px;
  background:var(--raised);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--text);font:500 13px/1.2 var(--sans);
}
.f2u-filter-input:focus-visible{border-color:var(--cyan-400)}
/* Período e faixa de valor: duas pontas na mesma linha. Cada uma é opcional,
   então dividem a largura por igual e a palavra no meio diz que é intervalo. */
.f2u-filter-periodo{display:flex;align-items:center;gap:6px}
.f2u-filter-periodo .f2u-filter-input{flex:1 1 0;min-width:0;width:100%}
.f2u-filter-ate{color:var(--subtle);font:500 11px/1 var(--sans);flex:none}
/* Duas pontas mais o rótulo do meio não cabem em 230px: ocupa duas colunas. */
.f2u-filter.is-periodo{grid-column:span 2}
@media (max-width:620px){ .f2u-filter.is-periodo{grid-column:1 / -1} }
.f2u-filter-clear{
  min-height:38px;padding:8px 14px;
  background:none;border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--muted);font:600 12px/1 var(--sans);cursor:pointer;
}
.f2u-filter-clear:hover{border-color:var(--cyan-400);color:var(--blue-800)}

/* Filtro em chips: multi-seleção aberta, sem menu. Dois ou três chips cabem
   numa coluna como qualquer outro campo; só a lista longa (categoria, com uma
   dúzia de opções) toma a linha inteira. */
.f2u-filter.is-chips{min-width:0}
.f2u-filter.is-chips.is-largo{grid-column:1 / -1}
.f2u-filter-chips{margin-top:0}

.f2u-table-body{overflow-x:auto}
.f2u-table{width:100%;border-collapse:collapse;font-size:13px}
.f2u-table caption{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.f2u-table th{
  padding:9px 12px;border-bottom:1px solid var(--line);
  color:var(--subtle);font:600 9.5px/1 var(--mono);
  letter-spacing:.12em;text-transform:uppercase;text-align:left;white-space:nowrap;
}
.f2u-table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.f2u-table tbody tr:hover{background:var(--blue-50)}
.f2u-table .is-right{text-align:right}
.f2u-table .is-control{width:44px;min-width:44px;max-width:44px}
.f2u-table .is-xs{width:72px;min-width:72px}
.f2u-table .is-sm{width:112px;min-width:112px}
.f2u-table .is-md{width:176px;min-width:176px}
.f2u-table .is-lg{width:260px;min-width:260px}
.f2u-table .is-xl{width:360px;min-width:360px}
.f2u-table .is-fluid{min-width:180px;width:auto}
.f2u-table .is-actions{width:96px;min-width:96px;max-width:144px}
.f2u-table td.is-single{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.f2u-table td.is-wrap{display:-webkit-box;max-width:360px;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;white-space:normal;overflow-wrap:anywhere}
.f2u-table td.has-overflow{text-decoration:underline dotted var(--cyan-500);text-underline-offset:3px}
.f2u-table td.is-editavel:has(input,textarea,select,[contenteditable="true"]){display:table-cell;max-width:none;overflow:visible;white-space:normal;-webkit-line-clamp:unset}
.f2u-table td.is-editavel input,.f2u-table td.is-editavel textarea,.f2u-table td.is-editavel select,.f2u-table td.is-editavel [contenteditable="true"]{min-width:112px;width:100%;font:inherit}
.f2u-table td.is-editavel textarea{min-height:72px;resize:vertical}

/* Cabeçalho ordenável: a seta indica o estado, não só a possibilidade. */
.f2u-th-sort{
  display:inline-flex;align-items:center;gap:6px;
  padding:0;background:none;border:0;cursor:pointer;
  color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;
}
.f2u-th-sort:hover{color:var(--blue-700)}
.f2u-th-sort.is-active{color:var(--blue-800)}
.f2u-th-arrow{color:var(--neutral-400);font-size:11px}
.f2u-th-sort.is-active .f2u-th-arrow{color:var(--cyan-600)}

.f2u-row-actions{display:inline-flex;gap:6px;justify-content:flex-end}
.f2u-row-action{
  min-height:44px;padding:8px 12px;background:none;
  border:1px solid var(--line);border-radius:var(--r-xs);
  color:var(--muted);font:600 11.5px/1 var(--sans);cursor:pointer;white-space:nowrap;
}
.f2u-row-action:hover{border-color:var(--cyan-400);color:var(--blue-800)}
.f2u-row-action.is-danger:hover{border-color:var(--danger);color:var(--danger)}

.f2u-table-empty{padding:36px 16px;text-align:center;color:var(--muted)}
.f2u-table-empty-hint{margin-top:6px;color:var(--subtle);font-size:12px}

.f2u-table-foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px;margin-top:12px;
}
.f2u-table-count{color:var(--subtle);font:500 12px/1 var(--sans)}
/* Total do recorte filtrado: é número de decisão, então pesa mais que a
   contagem — mesma linha, cor de texto normal e tabular para alinhar. */
.f2u-table-sum{
  color:var(--text);font:600 12px/1 var(--sans);
  font-variant-numeric:tabular-nums;margin-left:auto;padding-right:10px;
}
.f2u-pager{display:flex;align-items:center;gap:8px}
.f2u-pager-btn{
  padding:7px 12px;background:var(--raised);
  border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--muted);font:600 12px/1 var(--sans);cursor:pointer;
}
.f2u-pager-btn:hover:not(:disabled){border-color:var(--cyan-400);color:var(--blue-800)}
.f2u-pager-btn:disabled{opacity:.45;cursor:default}
.f2u-pager-pos{color:var(--subtle);font:500 12px/1 var(--sans)}

/* --------------------------------------------------- conciliação e formulários */

/* O estado da nota é informação de decisão: precisa ser legível na lista. */
.f2u-badge{
  display:inline-flex;align-items:center;gap:5px;padding:3px 8px;
  border-radius:999px;font:600 10.5px/1.4 var(--sans);white-space:nowrap;
}
.f2u-badge.is-fechado{background:var(--cyan-50);color:var(--blue-800);box-shadow:inset 0 0 0 1px var(--cyan-300)}
.f2u-badge.is-falta{background:#FEF6E7;color:#8A5A00;box-shadow:inset 0 0 0 1px #F3D9A4}
.f2u-badge.is-excede{background:#FDECEA;color:#A02318;box-shadow:inset 0 0 0 1px #F5C3BD}
.f2u-badge.is-vazio{background:var(--sunken);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}

/* Ciclo de vida do gasto (vgm_gastos.status). Reaproveita a mesma escala das
   badges de conciliação: pendente = âmbar, fechado = ciano, inerte = neutro.
   Contrato: projects/finds2u/knowledge/operations/ciclo-vida-gasto.md */
.f2u-badge.is-processing{background:#FEF6E7;color:#8A5A00;box-shadow:inset 0 0 0 1px #F3D9A4}
.f2u-badge.is-settled{background:var(--cyan-50);color:var(--blue-800);box-shadow:inset 0 0 0 1px var(--cyan-300)}
.f2u-badge.is-cancelled{background:var(--sunken);color:var(--subtle);box-shadow:inset 0 0 0 1px var(--line)}
.f2u-badge.is-refund-pending{background:#FDECEA;color:#A02318;box-shadow:inset 0 0 0 1px #F5C3BD}
.f2u-badge.is-refunded{background:var(--cyan-50);color:var(--blue-800);box-shadow:inset 0 0 0 1px var(--cyan-300)}

.f2u-dialog{
  position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;justify-content:center;
  padding:5vh 16px;background:rgba(8,26,42,.5);backdrop-filter:blur(2px);overflow-y:auto;
}
.f2u-dialog-card{
  width:min(720px,100%);background:var(--raised);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
}
.f2u-dialog-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--line);
}
.f2u-dialog-head h2{margin:0;font:600 18px/1.2 var(--display);letter-spacing:-.02em}
.f2u-dialog-close{background:none;border:0;color:var(--muted);font-size:20px;cursor:pointer;line-height:1}
.f2u-dialog-body{padding:18px 20px}
.f2u-dialog-foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px;
  padding:14px 20px;border-top:1px solid var(--line);
}

.f2u-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.f2u-form .is-full{grid-column:1/-1}
.f2u-field{display:flex;flex-direction:column;gap:5px}
/* `display:flex` vence o `[hidden]` que o navegador aplica por padrão: sem esta
   linha, marcar o campo como oculto não o tira da tela. */
.f2u-field[hidden]{display:none}
.f2u-field > span{
  color:var(--subtle);font:600 9px/1 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;
}
.f2u-field input,.f2u-field select,.f2u-field textarea{
  min-height:40px;padding:9px 11px;
  background:var(--raised);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--text);font:500 13px/1.35 var(--sans);
}
.f2u-field input:focus-visible,.f2u-field select:focus-visible,.f2u-field textarea:focus-visible{
  border-color:var(--cyan-400);
}
/* A regra acima é para campo de digitar. Aplicada à caixa de marcar, ela vira
   um retângulo de 40px de altura e largura inteira, com o quadradinho perdido
   dentro — o mesmo estrago que já tinha acontecido no valor do rateio. */
.f2u-field input[type="checkbox"]{
  min-height:0;padding:0;width:18px;height:18px;flex:none;
  accent-color:var(--blue-700);cursor:pointer;
}
/* Campo sim/não: caixa e frase lado a lado, a frase legível como frase. A
   ordem é do CSS porque o rótulo vem antes do controle na marcação, e é a
   marcação que dá o clique no rótulo de graça. */
.f2u-field.is-chave{flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap;cursor:pointer}
.f2u-field.is-chave > span{
  order:2;font:600 13px/1.3 var(--sans);color:var(--text);
  text-transform:none;letter-spacing:0;
}
.f2u-field.is-chave .f2u-field-hint,
.f2u-field.is-chave .f2u-field-error{order:3;flex:1 1 100%}

.f2u-field-hint{color:var(--subtle);font-size:11.5px}
.f2u-field-error{color:#A02318;font-size:11.5px}

.f2u-btn{
  min-height:44px;padding:10px 18px;border-radius:var(--r-sm);
  font:600 13px/1 var(--sans);cursor:pointer;border:1px solid transparent;
}
.f2u-btn.is-primary{background:var(--blue-700);color:#fff}
.f2u-btn.is-primary:hover{background:var(--blue-800)}
.f2u-btn.is-ghost{background:none;border-color:var(--line);color:var(--muted)}
.f2u-btn.is-ghost:hover{border-color:var(--cyan-400);color:var(--blue-800)}
.f2u-btn.is-danger{background:none;border-color:#F5C3BD;color:#A02318}
.f2u-btn:disabled{opacity:.5;cursor:default}

/* ------------------------------------------------- linha do tempo (f2u-timeline.js)
   O que ACONTECEU com o registro. O fio vertical liga os eventos em ordem; o
   ponto colorido diz a natureza sem obrigar a ler; o detalhe fica fechado
   porque o relatório de importação tem parágrafos e a linha é para passar o
   olho. */
.f2u-timeline{display:flex;flex-direction:column}
.f2u-timeline-item{display:flex;gap:12px;padding:0 0 16px;position:relative}
.f2u-timeline-item:last-child{padding-bottom:0}
/* O fio nasce do ponto e morre no próximo; no último item não há próximo. */
.f2u-timeline-item:not(:last-child)::before{
  content:"";position:absolute;left:5px;top:14px;bottom:0;
  width:1px;background:var(--line);
}
.f2u-timeline-ponto{
  width:11px;height:11px;border-radius:50%;flex:none;margin-top:4px;
  background:var(--subtle);position:relative;z-index:1;
  box-shadow:0 0 0 3px var(--surface);
}
.f2u-timeline-ponto.is-info{background:var(--cyan-400)}
.f2u-timeline-ponto.is-ok{background:#1F9D55}
.f2u-timeline-ponto.is-alerta{background:#D98A00}
.f2u-timeline-ponto.is-perigo{background:#C0392B}
.f2u-timeline-ponto.is-neutro{background:var(--subtle)}
.f2u-timeline-corpo{flex:1;min-width:0}
.f2u-timeline-titulo{font:400 13px/1.45 var(--sans);color:var(--text)}
.f2u-timeline-titulo b{font-weight:700}
.f2u-timeline-quando{color:var(--subtle);font-size:11.5px;margin-top:2px}
.f2u-timeline-abrir{
  background:none;border:0;padding:0;margin-top:3px;cursor:pointer;
  color:var(--blue-700);font:600 11.5px/1 var(--sans);text-decoration:underline;
}
.f2u-timeline-detalhe{
  display:none;margin-top:6px;padding:9px 11px;
  background:var(--raised);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--muted);font:400 12px/1.5 var(--sans);white-space:pre-wrap;
}
.f2u-timeline-detalhe.is-aberto{display:block}
.f2u-timeline-vazio{color:var(--subtle);font-size:12px;padding:4px 0}

/* Seções de escolha (tela de exportação): título, dica e uma fileira de chips.
   Cada bloco é uma pergunta — quais abas, quais colunas, quais categorias — e o
   que está marcado se lê sem abrir menu nenhum. */
.f2u-secao{padding:14px 0;border-bottom:1px solid var(--line)}
.f2u-secao:last-child{border-bottom:0;padding-bottom:0}
.f2u-secao:first-child{padding-top:0}
.f2u-secao-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 9px}
.f2u-secao-head b{font:600 13px/1.3 var(--sans)}
.f2u-secao-head small{color:var(--muted);font-size:11.5px}
/* Tudo/Nada são comando, não seleção: nunca ficam "ativos" e por isso se
   distinguem dos chips que carregam estado. */
.f2u-chip.is-atalho{
  border-style:dashed;color:var(--subtle);
  font:600 11px/1 var(--sans);
}
.f2u-chip.is-atalho:hover{border-style:solid;color:var(--blue-800)}

/* Interruptor de escopo da lista. Fica ACIMA da barra de filtros e separado
   dela de propósito: filtro recorta o que a lista mostra, isto muda o que a
   lista é. Some sozinho quando não há nada escondido para revelar. */
.f2u-escopo{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;
  margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line);
}
.f2u-escopo[hidden]{display:none}
.f2u-escopo small{color:var(--muted);font-size:11.5px;flex:1;min-width:200px}

/* Painel de vínculo: a conta da nota fica sempre visível enquanto se seleciona. */
.f2u-link-summary{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
  margin:0 0 14px;padding:12px 14px;border-radius:var(--r-md);
  background:var(--cyan-50);border:1px solid var(--cyan-300);
}
.f2u-link-summary.is-falta{background:#FEF6E7;border-color:#F3D9A4}
.f2u-link-summary.is-excede{background:#FDECEA;border-color:#F5C3BD}
.f2u-link-summary.is-vazio{background:var(--raised);border-color:var(--line)}
.f2u-link-figure{display:flex;flex-direction:column;gap:2px}
.f2u-link-figure b{font:600 15px/1.1 var(--sans)}
.f2u-link-figure span{color:var(--muted);font:600 9px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}

/* Alocações e acessórios: uma linha por nota que pagou, uma por acessório
   anexado. A grade fixa mantém os valores alinhados quando são vários — é
   somando a coluna que se vê se fecha com o total do item. */
.f2u-alocacoes,.f2u-acessorios{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.f2u-alocacao{display:grid;grid-template-columns:minmax(0,1fr) 140px auto;gap:8px;align-items:center}
.f2u-acessorio{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;
  padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--raised);
}
.f2u-acessorio b{font-variant-numeric:tabular-nums;white-space:nowrap}

/* Frase que diz a direção do vínculo. O título nomeia o produto; esta linha
   diz quem é acessório de quem, que foi o que se perdeu antes. */
.f2u-explica{
  margin:0 0 12px;padding:10px 12px;border-radius:var(--r-sm);
  background:var(--cyan-50);border:1px solid var(--cyan-300);
  color:var(--body);font-size:13px;line-height:1.45;
}
.f2u-modo{display:flex;gap:6px;margin:0 0 10px}
/* Dentro da linha do acessório: a unidade é escolha daquele item, então o par
   de chips fica colado ao campo de valor, não no topo da caixa. */
.f2u-modo.is-mini{margin:0;flex:none;gap:4px}
.f2u-modo.is-mini .f2u-chip{padding:4px 8px;font-size:11px;min-height:0}
@media (max-width:560px){
  .f2u-alocacao{grid-template-columns:minmax(0,1fr);}
  .f2u-alocacao .f2u-row-action{justify-self:start}
}

.f2u-link-list{max-height:320px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r-sm)}
.f2u-link-item{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-bottom:1px solid var(--line);cursor:pointer;
}
.f2u-link-item:last-child{border-bottom:0}
.f2u-link-item:hover{background:var(--blue-50)}
/* Só a caixa de seleção. A regra genérica `input` também pegava o campo de
   valor do rateio e o espremia a 16px — ilegível e impossível de editar. */
.f2u-link-item input[type="checkbox"]{width:16px;height:16px;flex:none;accent-color:var(--blue-700)}
.f2u-link-item-main{flex:1;min-width:0}
/* Largura fixa para o valor caber inteiro: em linha flex ele encolheria até
   o conteúdo, e o número é o que se vem editar aqui. */
.f2u-link-item .f2u-moeda{flex:0 0 132px;width:132px}
.f2u-link-item .f2u-moeda-input{padding:7px 9px;font-size:13px}
.f2u-link-item-main b{display:block;font:600 13px/1.3 var(--sans)}
.f2u-link-item-main small{color:var(--muted);font-size:11.5px}
.f2u-link-item-valor{font:600 13px/1 var(--sans);white-space:nowrap}
.f2u-link-item.is-outro{opacity:.62}

@media (max-width:640px){
  .f2u-dialog{padding:0}
  .f2u-dialog-card{border-radius:0;min-height:100vh}
}

/* ------------------------------------------ seletor de viagem (f2u-viagem.js)
   Mora na barra de contexto: a viagem é o escopo de tudo que a tela mostra,
   então a troca fica junto do que ela afeta, não escondida entre os filtros. */

.f2u-viagem-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  margin:0 0 14px;
}
/* O resumo é o F.ctxBar, que traz a própria caixa — aqui só o encaixe. */
.f2u-viagem-bar .context-bar{margin:0;flex:1 1 320px}
.f2u-viagem-field{
  display:flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:8px 12px;background:var(--raised);
  border:1px solid var(--line);border-radius:var(--r-md);
}
.f2u-viagem-field > span{
  color:var(--subtle);font:600 9px/1 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;
}
.f2u-viagem-select{
  min-height:34px;padding:6px 10px;
  background:var(--raised);border:1px solid var(--cyan-300);border-radius:var(--r-sm);
  color:var(--text);font:600 13px/1.2 var(--sans);max-width:100%;
}
.f2u-viagem-select:focus-visible{border-color:var(--cyan-500)}

.f2u-viagem-resumo{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;min-width:0}
.f2u-viagem-info{display:flex;flex-direction:column;gap:1px}
.f2u-viagem-info span{
  color:var(--subtle);font:600 8.5px/1 var(--mono);
  letter-spacing:.12em;text-transform:uppercase;
}
.f2u-viagem-info b{font:600 13px/1.2 var(--sans);color:var(--text)}

@media (max-width:640px){
  /* `min-width:0` nos dois: sem isso o item flex não encolhe abaixo do texto
     da opção mais longa, e a barra estoura a tela — a página inteira ganha
     rolagem horizontal por causa de um nome de viagem comprido. */
  .f2u-viagem-field{flex:1 1 100%;min-width:0}
  .f2u-viagem-select{flex:1;min-width:0}
}

/* ------------------------------------- select com "+ novo" (f2u-catalogo.js)
   Cadastrar o item que falta sem sair do formulário: o diálogo do catálogo
   abre por cima e o que já foi digitado continua onde estava. */

/* A linha inteira é a caixa do campo, e a ação mora dentro dela, encostada na
   direita — o mesmo desenho do prefixo US$, espelhado. Botão separado ao lado
   roubava largura do controle e o rótulo escrito quebrava no celular. */
.f2u-select-com-novo{
  display:flex;align-items:stretch;min-width:0;
  background:var(--raised);border:1px solid var(--line);border-radius:var(--r-sm);
}
.f2u-select-com-novo:focus-within{border-color:var(--cyan-400)}
/* Quem desenha a caixa é a linha; o controle de dentro não repete a borda. */
.f2u-select-com-novo > select,
.f2u-select-com-novo > input,
.f2u-select-com-novo > .f2u-seletor-trigger{
  flex:1;min-width:0;
  border:0;background-color:transparent;
  border-radius:var(--r-sm) 0 0 var(--r-sm);
}
.f2u-add-novo{
  flex:0 0 auto;display:grid;place-items:center;width:38px;padding:0;cursor:pointer;
  background:var(--cyan-50);border:0;border-left:1px solid var(--line);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  color:var(--blue-800);font:600 17px/1 var(--sans);
}
.f2u-add-novo:hover{background:var(--cyan-100)}

/* ------------------------------------------------------- campo de data
   `input[type=date]` também vem com desenho do sistema. O painel do
   calendário em si é do navegador e não aceita CSS — o que dá para acertar é
   o campo e o ícone que o abre. */
.f2u-field input[type="date"]{
  appearance:none;-webkit-appearance:none;
  background-color:var(--raised);
  font-variant-numeric:tabular-nums;
}
.f2u-field input[type="date"]::-webkit-date-and-time-value{text-align:left;margin:0}
.f2u-field input[type="date"]::-webkit-calendar-picker-indicator{
  width:16px;height:16px;margin:0 0 0 8px;padding:0;cursor:pointer;opacity:.75;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect x='1.75' y='3.25' width='12.5' height='11' rx='2' fill='none' stroke='%234B626D' stroke-width='1.4'/%3E%3Cpath d='M1.75 6.5h12.5M5.25 1.75v2.5M10.75 1.75v2.5' stroke='%234B626D' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:16px 16px;background-repeat:no-repeat;
}
.f2u-field input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:1}

/* Impostos ativos como atalho: clicar preenche o percentual. */
.f2u-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.f2u-chip{
  padding:5px 10px;border-radius:999px;cursor:pointer;
  background:var(--raised);border:1px solid var(--line);
  color:var(--muted);font:600 11.5px/1 var(--sans);
}
.f2u-chip:hover{border-color:var(--cyan-400);color:var(--blue-800)}
.f2u-chip.is-active{background:var(--cyan-50);border-color:var(--cyan-500);color:var(--blue-800)}
/* Terceiro estado do chip de filtro: negado — "tudo menos este".
   O contorno e o × carregam o significado junto com a cor; vermelho sozinho
   não diz nada a quem não o distingue, e num chip pequeno se confunde com o
   azul mesmo para quem distingue. */
.f2u-chip.is-excluido{
  background:#FDECEA;border-color:#E0796C;color:#A02318;
  text-decoration:line-through;text-decoration-thickness:1px;
}
.f2u-chip.is-excluido:hover{border-color:#A02318;color:#A02318}

/* Estado do catálogo na lista de administração. */
.f2u-badge.is-ativo{background:var(--cyan-50);color:var(--blue-800);box-shadow:inset 0 0 0 1px var(--cyan-300)}
.f2u-badge.is-inativo{background:var(--sunken);color:var(--subtle);box-shadow:inset 0 0 0 1px var(--line)}
.f2u-table tr.is-inativo td{opacity:.55}

/* Abas dos catálogos. */
.f2u-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.f2u-tab{
  padding:8px 14px;border-radius:var(--r-sm);cursor:pointer;
  background:var(--raised);border:1px solid var(--line);
  color:var(--muted);font:600 12.5px/1 var(--sans);
}
.f2u-tab:hover{border-color:var(--cyan-400);color:var(--blue-800)}
.f2u-tab.is-active{background:var(--blue-700);border-color:var(--blue-700);color:#fff}
.f2u-tab[aria-selected="true"]{background:var(--blue-700);border-color:var(--blue-700);color:#fff}
.f2u-tab:disabled{opacity:.5;cursor:not-allowed}

/* Colunas que não podem espremer: nome de banco e de loja vinham cortados. */
.f2u-table td.is-wide,.f2u-table th.is-wide{min-width:170px;white-space:nowrap}

/* Barra de alteração em massa. Fica ACIMA da tabela, entre os filtros e as
   linhas: é onde o olho já está depois de marcar, e no rodapé ficaria fora da
   tela numa lista de 25 itens. */
.f2u-lote{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 12px;padding:10px 12px;
  background:var(--cyan-50);border:1px solid var(--cyan-300);border-radius:var(--r-md);
}
.f2u-lote[hidden]{display:none}
.f2u-lote-texto{flex:1;min-width:140px;font:600 13px/1.3 var(--sans);color:var(--blue-800)}
.f2u-lote .f2u-btn{min-height:34px;padding:7px 14px;font-size:12.5px}

/* Coluna da caixa de seleção: largura do controle, nada mais. */
.f2u-table th.is-selecao,.f2u-table td.is-selecao{width:36px;padding-right:0}
.f2u-table .is-selecao input[type="checkbox"]{
  width:16px;height:16px;accent-color:var(--blue-700);cursor:pointer;
}

/* Linha clicável abre o item. O cursor é o que avisa que a linha inteira é
   alvo — sem ele a pessoa continua mirando o botão Editar. */
.f2u-table tr.is-clicavel{cursor:pointer}
.f2u-table tr.is-clicavel:hover{background:var(--blue-50)}
.f2u-table tr.is-clicavel:focus-visible{outline:3px solid color-mix(in srgb,var(--cyan-500) 35%,transparent);outline-offset:-3px;background:var(--blue-50)}

/* Coluna de texto livre (descrição, observação, rateio).
   Sem teto, uma observação longa estica a tabela e a barra de rolagem
   horizontal vira o controle principal da tela. Com teto, o texto corta em
   reticências e o conteúdo inteiro fica a um passo: `title` no computador,
   toque no celular — onde `:hover` não existe e um `title` nunca aparece. */
.f2u-table td.is-longo{
  max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  cursor:pointer;
}
.f2u-table td.is-longo.is-aberto{
  max-width:420px;white-space:normal;overflow:visible;word-break:break-word;
}
.f2u-table td.is-single.is-aberto,.f2u-table td.is-wrap.is-aberto{display:table-cell;max-width:420px;overflow:visible;white-space:normal;overflow-wrap:anywhere;-webkit-line-clamp:unset}
.f2u-table td[data-f2u-overflow][tabindex="0"]:focus-visible{text-decoration:underline dotted var(--cyan-700);text-underline-offset:3px}
/* A dica só onde o toque não resolve — no celular ela ocuparia a tela. */
@media (hover:hover){ .f2u-table td.is-longo:hover{color:var(--blue-800)} }
@media (max-width:640px){ .f2u-table td.is-longo{max-width:180px} }
@media (max-width:640px){.f2u-toast-stack{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px))}}
@media (prefers-reduced-motion:reduce){.f2u-toast,.f2u-toast.is-leaving,.f2u-skip-link{animation:none;transition:none}.f2u-page-state.is-loading .f2u-page-state-mark{animation:none}}

.f2u-timeline-detalhe[hidden]{display:none}

/* ------------------------------------- navegação campo a campo (f2u-form.js)
   Flutua sobre o formulário porque no celular o teclado cobre o rodapé: preso
   ao fim do diálogo, o controle ficaria embaixo do teclado justamente quando é
   mais útil. `env(safe-area-inset-bottom)` respeita a barra do iPhone. */

.f2u-passo{
  position:fixed;z-index:70;
  right:16px;bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  display:flex;align-items:center;gap:2px;padding:5px;
  background:var(--blue-950);border-radius:999px;
  box-shadow:0 6px 24px rgba(8,26,42,.35);
}
.f2u-passo-btn{
  width:42px;height:42px;flex:none;
  display:grid;place-items:center;
  background:transparent;border:0;border-radius:999px;
  color:rgba(255,255,255,.78);font-size:19px;line-height:1;cursor:pointer;
}
.f2u-passo-btn:hover{background:rgba(255,255,255,.10);color:#fff}
.f2u-passo-btn.is-principal{background:var(--cyan-500);color:var(--blue-950);font-weight:700}
.f2u-passo-btn.is-principal:hover{background:var(--cyan-400)}
.f2u-passo-pos{
  min-width:34px;text-align:center;
  color:rgba(255,255,255,.62);font:600 10px/1 var(--mono);letter-spacing:.06em;
}

/* Alvo de toque de 44 px e um respiro maior no celular (DI, §Acessibilidade). */
@media (max-width:640px){
  .f2u-passo{right:12px;bottom:calc(12px + env(safe-area-inset-bottom, 0px))}
  .f2u-passo-btn{width:46px;height:46px;font-size:21px}
}

@media (prefers-reduced-motion:reduce){
  .f2u-passo-btn{transition:none}
}

/* --------------------------------------------------------- zoom no celular
   O Safari do iPhone amplia a página sozinho quando o campo focado tem fonte
   menor que 16px — e nunca desfaz o zoom depois, deixando a tela deslocada.
   Não se resolve com `maximum-scale`, que também impediria a pessoa de ampliar
   por vontade própria: resolve-se dando 16px aos controles no celular. */

@media (max-width:768px){
  input,select,textarea,
  .control,.f2u-filter-input,.f2u-viagem-select,
  .f2u-field input,.f2u-field select,.f2u-field textarea{
    font-size:16px;
  }
}

/* ------------------------------------------ campo de dinheiro (f2u-form.js)
   O prefixo fica colado ao campo para não haver dúvida de qual moeda está
   sendo digitada — US$ e R$ convivem no mesmo formulário. */

.f2u-moeda{display:flex;align-items:stretch}
.f2u-moeda-prefixo{
  display:grid;place-items:center;flex:0 0 auto;
  padding:0 10px;
  background:var(--sunken);border:1px solid var(--line);border-right:0;
  border-radius:var(--r-sm) 0 0 var(--r-sm);
  color:var(--muted);font:600 12px/1 var(--mono);
}
.f2u-moeda .f2u-moeda-input{
  flex:1;min-width:0;
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  text-align:right;font-variant-numeric:tabular-nums;
}

/* --------------------------------------- seleção com busca (f2u-seletor.js)
   Só entra em lista longa. O select nativo continua no DOM como fonte da
   verdade; some da vista, não do documento. */

.f2u-seletor-oculto{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);border:0;
}
/* Mesma altura, mesmo padding e MESMO CORPO dos campos de digitar
   (`.f2u-field input`, 13px). O gatilho fica lado a lado com eles no
   formulário — Viagem e Categoria ao lado de Custo e Data — e 16px aqui fazia
   metade da grade parecer de outro tamanho. Os 16px vinham da regra do iOS
   contra zoom em campo pequeno, que vale para `<input>`; isto é botão, e
   botão o iOS não amplia. */
.f2u-seletor-trigger{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;min-height:40px;padding:9px 11px;
  background:var(--raised);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--text);font:500 13px/1.35 var(--sans);text-align:left;cursor:pointer;
}
.f2u-seletor-trigger:hover{border-color:var(--cyan-400)}
.f2u-seletor-trigger.is-vazio .f2u-seletor-valor{color:var(--subtle)}
.f2u-seletor-valor{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.f2u-seletor-seta{flex:none;color:var(--neutral-400);font-size:12px;line-height:1}

/* Acima do diálogo (60) e do controle de passo (70). */
.f2u-seletor-veu{
  position:fixed;inset:0;z-index:80;
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(8,26,42,.5);backdrop-filter:blur(2px);
}
.f2u-seletor-folha{
  display:flex;flex-direction:column;
  width:min(520px,100%);max-height:82dvh;
  padding-bottom:env(safe-area-inset-bottom, 0px);
  background:var(--raised);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  box-shadow:0 -8px 40px rgba(8,26,42,.35);
}
.f2u-seletor-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--line);
}
.f2u-seletor-head h3{margin:0;font:600 16px/1.2 var(--display);letter-spacing:-.01em}
.f2u-seletor-busca{
  margin:12px 16px 8px;padding:10px 12px;
  background:var(--surface,var(--raised));
  border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--text);font:500 16px/1.2 var(--sans);
}
.f2u-seletor-busca:focus-visible{border-color:var(--cyan-400)}
.f2u-seletor-lista{flex:1;overflow-y:auto;padding:0 8px 12px;-webkit-overflow-scrolling:touch}
.f2u-seletor-grupo{
  display:block;padding:12px 8px 6px;
  color:var(--subtle);font:600 9px/1 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;
}
.f2u-seletor-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;min-height:48px;padding:12px;      /* 48px: alvo de toque confortável */
  background:none;border:0;border-radius:var(--r-sm);
  color:var(--text);font:500 15px/1.3 var(--sans);text-align:left;cursor:pointer;
}
.f2u-seletor-item:hover,.f2u-seletor-item.is-ativo{background:var(--blue-50)}
.f2u-seletor-item>span:first-child{min-width:0;overflow-wrap:anywhere}
.f2u-seletor-item.is-atual{background:var(--cyan-50);font-weight:700;color:var(--blue-800)}
.f2u-seletor-item[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.f2u-seletor-check{color:var(--cyan-600);flex:none}
.f2u-seletor-vazio{padding:24px 12px;text-align:center;color:var(--muted)}
.f2u-seletor-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.f2u-cell-group{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;flex-wrap:wrap}
.f2u-cell-number{font-variant-numeric:tabular-nums}

@media (min-width:640px){
  .f2u-seletor-veu{align-items:center}
  .f2u-seletor-folha{border-radius:var(--r-lg);max-height:70vh}
}

/* ------------------------------------------- tabela de preços (38_precos)
   O alvo em dólar é a resposta que a tela existe para dar: destacado, com a
   conta visível ao lado para a pessoa confiar no número. */

.f2u-alvo{color:var(--blue-800);font-variant-numeric:tabular-nums}
.f2u-alvo-previa{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;
  padding:12px 14px;border-radius:var(--r-md);
  background:var(--cyan-50);border:1px solid var(--cyan-300);
}
.f2u-alvo-previa span{color:var(--muted);font:600 11px/1 var(--sans)}
.f2u-alvo-previa b{font:700 20px/1 var(--sans);color:var(--blue-800);font-variant-numeric:tabular-nums}
.f2u-alvo-previa small{
  width:100%;color:var(--subtle);font:500 11px/1.4 var(--mono);
}

/* ---------------------------------------- cotação de viagem (39_cotacao)
   Tela de balcão: usada em pé, dentro da loja, com uma mão. Os alvos de
   toque são grandes, o total fica sempre legível e nada exige rolar de
   volta para conferir. */

.f2u-cot-item{
  padding:14px;margin-bottom:12px;
  background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-md);
}
.f2u-cot-item-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.f2u-cot-num{font:600 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--subtle)}
.f2u-cot-remover{
  flex:none;width:32px;height:32px;border-radius:var(--r-sm);cursor:pointer;
  background:none;border:1px solid var(--line);color:var(--muted);font:600 15px/1 var(--sans);
}
.f2u-cot-remover:hover{border-color:var(--danger);color:var(--danger)}

/* Total do item: fecha o cartão, alinhado à direita como numa etiqueta. */
.f2u-cot-item-total{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);
}
.f2u-cot-item-total span{color:var(--subtle);font:600 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.f2u-cot-item-total b{font:700 17px/1 var(--sans);color:var(--blue-800);font-variant-numeric:tabular-nums}

.f2u-cot-vazio{
  padding:26px 14px;text-align:center;color:var(--muted);font-size:13px;
  border:1px dashed var(--line);border-radius:var(--r-md);
}

/* Desconto: o valor e a unidade são a mesma decisão, então dividem o campo. */
.f2u-cot-desconto{display:flex;align-items:stretch;gap:8px}
.f2u-cot-desconto > :first-child{flex:1;min-width:0;text-align:right;font-variant-numeric:tabular-nums}
.f2u-cot-seg{display:flex;flex:none;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.f2u-cot-seg button{
  padding:0 14px;min-height:38px;cursor:pointer;
  background:var(--raised);border:0;color:var(--muted);font:600 12px/1 var(--mono);
}
.f2u-cot-seg button + button{border-left:1px solid var(--line)}
.f2u-cot-seg button.is-active{background:var(--cyan-50);color:var(--blue-800)}

/* Resumo: a resposta da tela. Fica no fim, mas com peso de manchete. */
.f2u-cot-resumo{display:flex;flex-direction:column;gap:9px}
.f2u-cot-linha{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13px}
.f2u-cot-linha > span{color:var(--muted)}
.f2u-cot-linha > b{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.f2u-cot-linha.is-abate > b{color:var(--green-600)}
.f2u-cot-linha.is-total{
  margin-top:5px;padding-top:12px;border-top:1px solid var(--cyan-300);
}
.f2u-cot-linha.is-total > span{color:var(--blue-800);font-weight:600}
.f2u-cot-linha.is-total > b{font:700 26px/1 var(--display);letter-spacing:-.03em;color:var(--blue-800)}
.f2u-cot-linha.is-brl > b{font:700 17px/1 var(--sans);color:var(--text)}

/* ------------------------------------------------- <select> em toda parte
   Sem `appearance:none` o macOS e o iOS desenham o controle nativo e ignoram
   fundo, borda e raio: o campo sai com a cara do sistema, não a da marca.
   Devolver o desenho ao CSS obriga a repor a seta — vai como SVG embutido,
   porque a CSP das superfícies não busca arquivo externo. */

.f2u-field select,
select.control,
select.f2u-filter-input,
.f2u-viagem-select{
  appearance:none;-webkit-appearance:none;
  padding-right:30px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23545454' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;
  background-size:11px 7px;
}
/* Fundo é propriedade única aqui: o atalho `background` das regras acima
   apagaria a seta. */
.f2u-field select{background-color:var(--raised)}
select.control{background-color:var(--field)}
select.f2u-filter-input{background-color:var(--raised)}
.f2u-viagem-select{background-color:var(--raised)}

/* ----------------------------------------- ajustes lado a lado (39_cotacao)
   Duas caixas no computador, empilhadas no celular. `auto-fit` decide pela
   largura disponível, sem media query e sem número mágico de colunas. */
.f2u-cot-ajustes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px;align-items:start;
}
.f2u-cot-ajustes > .card{margin-bottom:0}

/* ------------------------------------------------- situação do investimento
   OK e Validar são o mesmo botão em dois estados, e o próprio rótulo é a
   informação. Verde para conferido, vermelho para "volte aqui" — a mesma
   leitura de longe que os KPIs já usam. */
.f2u-estado{
  padding:5px 12px;border-radius:999px;cursor:pointer;
  font:700 11.5px/1 var(--sans);letter-spacing:.02em;
  border:1px solid transparent;
}
.f2u-estado.is-ok{background:var(--green-50);border-color:var(--green-300);color:var(--green-800)}
.f2u-estado.is-ok:hover{background:var(--green-100)}
.f2u-estado.is-pendente{background:#FCEDED;border-color:#EFB4B4;color:#8E2727}
.f2u-estado.is-pendente:hover{background:#F8DEDE}
.f2u-estado:disabled{opacity:.6;cursor:progress}
/* No formulário o botão fica sozinho na largura do campo, não colado no texto. */
.f2u-field > .f2u-estado{align-self:flex-start}

/* ------------------------------------ detalhes em leitura (34_compras-referencia)
   Lista de pares rótulo/valor. Duas colunas quando cabe, uma no celular. */
.f2u-detalhes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px 20px}
.f2u-detalhe{display:flex;flex-direction:column;gap:2px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.f2u-detalhe > span{
  color:var(--subtle);font:600 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
}
.f2u-detalhe > b{font:600 13px/1.35 var(--sans);color:var(--text);overflow-wrap:anywhere}

/* --------------------------- o gatilho herda o contexto do select que cobriu
   O seletor entra em quatro contextos com medidas diferentes (formulário,
   filtro das telas antigas, filtro de tabela, barra de viagem). O select fica
   no DOM como fonte da verdade, então o irmão adjacente diz de onde o botão
   veio — e ele copia altura, borda e raio de lá, em vez de destoar. */
select.control.f2u-seletor-oculto + .f2u-seletor-trigger{
  min-height:44px;border-radius:10px;border-color:var(--line-strong);
  background:var(--field);font-size:14px;
}
select.f2u-filter-input.f2u-seletor-oculto + .f2u-seletor-trigger{
  min-height:38px;font-size:13px;
}
select.f2u-viagem-select.f2u-seletor-oculto + .f2u-seletor-trigger{
  min-height:34px;padding:6px 10px;
  border-color:var(--cyan-300);font:600 13px/1.2 var(--sans);
}
/* Dentro da caixa com "+", quem tem a borda é a linha. */
.f2u-select-com-novo > .f2u-seletor-trigger{border:0;background-color:transparent}
.f2u-seletor-trigger:disabled{opacity:.55;cursor:not-allowed}

/* Folha sem busca (lista curta): a lista encosta no cabeçalho. */
.f2u-seletor-folha > .f2u-seletor-lista:first-of-type{margin-top:0}

/* --------------------------------------- calendário próprio (f2u-calendario.js)
   O painel nativo de input[type=date] é do sistema e não aceita CSS. Este é o
   nosso, na folha do seletor, para o campo de data ter a mesma cara do resto. */
.f2u-data-icone{flex:none;color:var(--subtle);font-size:13px}
.f2u-cal-folha{
  max-width:340px;max-height:calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);
  overflow:hidden;
}
.f2u-cal-conteudo{min-height:0;overflow:auto;overscroll-behavior:contain;padding:12px 16px 16px}
.f2u-cal-ajuda{margin:0 0 10px;color:var(--subtle);font:500 12px/1.4 var(--sans)}
.f2u-cal-manual{margin-bottom:12px}
.f2u-cal-manual > label{display:block;margin-bottom:5px;color:var(--muted);font:600 12px/1 var(--sans)}
.f2u-cal-manual-linha{display:flex;gap:7px}
.f2u-cal-manual-linha input{
  flex:1;min-width:0;min-height:44px;padding:9px 10px;
  background:var(--raised);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--text);font:500 16px/1.2 var(--sans);
}
.f2u-cal-manual-linha input:focus-visible{border-color:var(--cyan-400);box-shadow:0 0 0 3px var(--cyan-100)}
.f2u-cal-erro{display:block;margin-top:5px;color:var(--danger);font:600 12px/1.35 var(--sans)}
.f2u-cal-barra{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 2px 12px}
.f2u-cal-mes{
  flex:1;text-align:center;
  font:600 15px/1 var(--display);letter-spacing:-.02em;color:var(--text);
}
.f2u-cal-nav{
  flex:none;width:34px;height:34px;border-radius:var(--r-sm);cursor:pointer;
  background:var(--raised);border:1px solid var(--line);color:var(--blue-800);font:600 17px/1 var(--sans);
}
.f2u-cal-nav:hover{border-color:var(--cyan-400);background:var(--cyan-50)}

.f2u-cal-grade{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.f2u-cal-dia-nome{
  display:grid;place-items:center;height:26px;
  color:var(--subtle);font:600 9.5px/1 var(--mono);letter-spacing:.1em;
}
.f2u-cal-dia{
  display:grid;place-items:center;height:40px;border-radius:var(--r-sm);cursor:pointer;
  background:none;border:1px solid transparent;
  color:var(--text);font:500 13.5px/1 var(--sans);font-variant-numeric:tabular-nums;
}
.f2u-cal-dia:hover{background:var(--cyan-50);border-color:var(--cyan-300)}
.f2u-cal-dia.is-fora{color:var(--neutral-400)}
/* Hoje se marca pela borda; o dia escolhido, pelo preenchimento — assim os
   dois convivem na mesma célula sem um esconder o outro. */
.f2u-cal-dia.is-hoje{border-color:var(--cyan-400);font-weight:700}
.f2u-cal-dia.is-atual{background:var(--blue-700);border-color:var(--blue-700);color:#fff;font-weight:700}
.f2u-cal-dia.is-atual:hover{background:var(--blue-800)}

.f2u-cal-foot{display:flex;justify-content:space-between;gap:10px;padding-top:14px}

@media (pointer:coarse){
  button,
  input,
  select,
  textarea,
  .f2u-seletor-trigger,
  .f2u-viagem-select,
  .f2u-nav-item{
    min-height:44px;
  }
  button,
  .f2u-add-novo,
  .f2u-dialog-close,
  .f2u-cal-nav,
  .f2u-cot-remover{
    min-width:44px;
  }
}

.f2u-table-wrap,.f2u-tabs,.f2u-nav-scroll{
  scrollbar-width:thin;
  scrollbar-color:var(--cyan-500) var(--blue-950);
  overscroll-behavior-inline:contain;
}