/* ==========================================================================
   Padrão visual do painel (camada por cima de app.css; para voltar ao visual antigo,
   é só tirar a linha de css/ui.css do index.html).
   Tudo nasce dos tokens abaixo: raio, altura de controle, sombra, foco e escala de texto.
   ========================================================================== */
:root{
  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-pill:999px;
  --h-ctl:36px; --h-ctl-sm:30px;
  --ring:0 0 0 3px rgba(47,128,200,.20);
  --sh-1:0 1px 2px rgba(20,50,90,.06);
  --sh-2:0 2px 6px rgba(20,50,90,.07),0 8px 24px rgba(20,50,90,.06);
  --sh-3:0 12px 40px rgba(15,40,75,.22);
  --line-2:#c7d8ea; --ink-2:#34495e;
  --fs-xs:11.5px; --fs-sm:12.5px; --fs-md:14px; --fs-lg:16px;
  --ease:cubic-bezier(.2,.7,.3,1);
}
html,body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-size:var(--fs-md);line-height:1.5}
:focus{outline:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-sm)}
::selection{background:#cfe3f7}

/* ---------- tipografia ---------- */
h1,h2,h3{letter-spacing:-.01em}
.topbar h1{font-size:26px;line-height:1.2}
.topbar .hello{font-size:13px}
.card h2,.modal h2{font-size:17px;line-height:1.3}
.card .sub{font-size:var(--fs-sm);margin-bottom:14px}
.small{font-size:var(--fs-sm)} .tiny{font-size:var(--fs-xs)}
.big{font-size:26px;line-height:1.15}
.sect h4{font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:var(--h-ctl);padding:7px 14px;border-radius:var(--r-md);
  border:1px solid var(--line-2);background:#fff;color:var(--ink);
  font-size:13px;font-weight:500;line-height:1.25;text-align:center;
  box-shadow:var(--sh-1);text-decoration:none;
  transition:background .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease),transform .08s var(--ease);
}
.btn:hover{background:#f2f7fd;border-color:#a9c3de}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn:focus-visible{outline:none;box-shadow:var(--ring);border-color:var(--brand)}
.btn.pri{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(36,104,166,.35)}
.btn.pri:hover{background:var(--brand-d);border-color:var(--brand-d)}
.btn.pri:focus-visible{box-shadow:var(--ring)}
.btn.danger{color:var(--red);border-color:#e9c4be;background:#fff}
.btn.danger:hover{background:var(--red-soft);border-color:#dfa59d}
.btn.sm{min-height:var(--h-ctl-sm);padding:4px 11px;font-size:12px;border-radius:var(--r-sm)}
.btn.chip{border-radius:var(--r-pill);background:#eef4fb;border-color:transparent;box-shadow:none}
.btn.chip:hover{background:#e0ecf8}
.btn.chip.on{background:var(--brand);color:#fff}
.btn[disabled],.btn.is-disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
.btn.is-loading,.btn[aria-busy="true"]{position:relative;color:transparent!important;pointer-events:none}
.btn.is-loading::after,.btn[aria-busy="true"]::after{content:'';position:absolute;width:14px;height:14px;border:2px solid var(--line-2);border-top-color:var(--brand);border-radius:50%;animation:ui-spin .7s linear infinite}
.btn.pri.is-loading::after{border-color:rgba(255,255,255,.4);border-top-color:#fff}
@keyframes ui-spin{to{transform:rotate(360deg)}}
.cria-btn{border-radius:var(--r-pill);box-shadow:0 8px 24px rgba(30,90,170,.35);transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.cria-btn:hover{transform:translateY(-1px)}

/* ---------- campos: texto, número, data, busca, seleção, área de texto ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
select,textarea{
  min-height:var(--h-ctl);padding:7px 12px;border:1px solid var(--line-2);border-radius:var(--r-md);
  background-color:#fff;color:var(--ink);font-size:13px;line-height:1.3;box-shadow:var(--sh-1);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease),background-color .15s var(--ease);
}
input::placeholder,textarea::placeholder{color:#8a9db1}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):hover,select:hover,textarea:hover{border-color:#a9c3de}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
input:disabled,select:disabled,textarea:disabled{background:#f1f5f9;color:#8a9db1;cursor:not-allowed;box-shadow:none}
input[aria-invalid="true"],input.invalid,select.invalid,textarea.invalid,.field.err input,.field.err select,.field.err textarea{border-color:var(--red);box-shadow:0 0 0 3px rgba(192,57,43,.14)}
textarea{min-height:90px;line-height:1.45}
/* seleção sem a aparência do navegador */
select{
  -webkit-appearance:none;appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%235f748a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px;
}
select[multiple]{background-image:none;padding-right:12px}
/* número: sem as setinhas quadradas do navegador (as setas do teclado continuam) */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=date],input[type=month],input[type=time],input[type=datetime-local]{min-width:150px;cursor:text}
input[type=date]::-webkit-calendar-picker-indicator,input[type=month]::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer;border-radius:6px;padding:2px}
input[type=date]::-webkit-calendar-picker-indicator:hover,input[type=month]::-webkit-calendar-picker-indicator:hover{opacity:1;background:#eaf2fb}
input[type=search]{-webkit-appearance:none;appearance:none}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
input[type=file]{font-size:13px;color:var(--muted)}
input[type=file]::file-selector-button{min-height:var(--h-ctl-sm);padding:0 12px;margin-right:10px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:#fff;color:var(--ink);font-weight:500;cursor:pointer;box-shadow:var(--sh-1)}
input[type=file]::file-selector-button:hover{background:#f2f7fd}
input[type=checkbox],input[type=radio]{width:16px;height:16px;accent-color:var(--brand);cursor:pointer;vertical-align:-3px;margin:0 6px 0 0}
input[type=range]{accent-color:var(--brand)}
label:has(>input[type=checkbox]),label:has(>input[type=radio]){cursor:pointer}

/* rótulo + campo */
.field{gap:5px;font-size:var(--fs-xs);font-weight:500;color:var(--muted);letter-spacing:.01em}
.field input,.field select,.field textarea{font-size:13px;font-weight:400}
.filters{gap:10px 12px}
.search input{width:340px;border-radius:var(--r-pill);padding:0 16px;min-height:40px}
.cria-in textarea{border-radius:var(--r-md);min-height:44px}

/* ---------- abas e seletores segmentados ---------- */
.seg{background:#e6eef8;border-radius:var(--r-md);padding:3px;gap:2px;box-shadow:inset 0 0 0 1px rgba(20,50,90,.04)}
.seg button{min-height:30px;padding:0 13px;border-radius:var(--r-sm);font-size:13px;font-weight:500;color:var(--ink-2);transition:background .15s var(--ease),color .15s var(--ease),box-shadow .15s var(--ease)}
.seg button:hover:not(.on){background:rgba(255,255,255,.55)}
.seg button.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(20,50,90,.14)}
.seg button:focus-visible{outline:none;box-shadow:var(--ring)}
.tabs{gap:2px;margin-bottom:16px}
.tabs a{padding:9px 14px;border-radius:var(--r-sm) var(--r-sm) 0 0;font-size:13px;font-weight:500;transition:color .15s var(--ease),background .15s var(--ease)}
.tabs a:hover{background:rgba(47,128,200,.07);color:var(--ink)}
.tabs a.on{color:var(--brand-d);font-weight:600;border-bottom:2px solid var(--brand)}

/* ---------- cartões, seções, avisos ---------- */
.card{border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh-1);border-color:#d3e1ef}
.kpi:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
.kpi{transition:box-shadow .15s var(--ease),transform .15s var(--ease)}
.card .card{box-shadow:none;background:#f8fbfe}
.grid{gap:16px}
.banner{border-radius:var(--r-md);padding:10px 14px;border:1px solid transparent}
.banner.info{border-color:#c9dcf1} .banner.warn{border-color:#f1d9a5} .banner.demo{border-color:#ecd37a}
.empty{border-radius:var(--r-lg);background:#f8fbfe;border-color:var(--line-2);padding:28px 22px}
.signals{background:#fff}
.pill{border-radius:var(--r-pill);padding:2px 9px;font-size:var(--fs-xs);font-weight:600;line-height:1.5}
.badge-demo{border-radius:var(--r-pill)}
.prob{border-radius:var(--r-md);padding:12px}
.comment{border-radius:var(--r-sm);background:#f6faff}
pre.txt{border-radius:var(--r-md);background:#f6faff}
.tcard{border-radius:var(--r-md);padding:12px;box-shadow:var(--sh-1);transition:box-shadow .15s var(--ease),transform .15s var(--ease)}
.tcard:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}

/* ---------- tabelas e listas ---------- */
.tbl{font-size:13px}
.tbl th{font-size:var(--fs-xs);font-weight:600;color:var(--muted);text-transform:none;letter-spacing:.02em;padding:9px 10px;border-bottom:1px solid var(--line-2);background:#f8fbfe}
.tbl th:first-child{border-top-left-radius:var(--r-sm)} .tbl th:last-child{border-top-right-radius:var(--r-sm)}
.tbl td{padding:10px;border-bottom:1px solid #e8f0f8;vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.click:hover td,.tbl tbody tr:hover td{background:#f4f9fe}
.list-item{padding:12px 10px;border-radius:var(--r-sm);transition:background .12s var(--ease)}
.list-item:hover{background:#f4f9fe}
.bar{height:8px;border-radius:var(--r-pill);background:#e4eef8}
.bar>i{border-radius:var(--r-pill)}
.dist{grid-template-columns:48px 1fr 76px}

/* ---------- navegação lateral ---------- */
.nav a{padding:9px 12px;border-radius:var(--r-md);font-size:13px;font-weight:500;transition:background .15s var(--ease),color .15s var(--ease)}
.nav a:hover{background:rgba(255,255,255,.55)}
.nav a.on{background:var(--brand);color:#fff;box-shadow:0 2px 8px rgba(36,104,166,.32)}
.nav .n{border-radius:var(--r-pill);font-weight:700}
.nav .sep{background:#b4d0ea;margin:10px 8px}

/* ---------- janelas, avisos flutuantes ---------- */
.overlay{background:rgba(15,34,56,.48)}
.modal{border-radius:var(--r-xl);padding:24px;box-shadow:var(--sh-3)}
.toast{border-radius:var(--r-md);box-shadow:var(--sh-3);font-size:13px}
.cria-panel{box-shadow:-12px 0 44px rgba(15,40,75,.18)}
.cria-panel header{padding:16px 18px}
.msg{border-radius:14px;line-height:1.5}

/* ---------- rolagem discreta ---------- */
*{scrollbar-width:thin;scrollbar-color:#bcd0e4 transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#bcd0e4;border-radius:var(--r-pill);border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#9fb9d2;background-clip:content-box;border:2px solid transparent}
::-webkit-scrollbar-track{background:transparent}

/* ---------- telas pequenas e acessibilidade ---------- */
@media (max-width:820px){
  .card{padding:14px}
  .topbar h1{font-size:22px}
  .modal{padding:18px;border-radius:var(--r-lg)}
  .btn{min-height:40px}
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select{min-height:40px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.card{box-shadow:none}}


/* tabelas: palavras inteiras (sem quebrar letra a letra); se faltar espaço, o cartão rola para o lado */
.card table.tbl td,.card table.tbl th{overflow-wrap:break-word;word-break:normal}
.tbl th{white-space:nowrap}
.card:has(table.tbl):not(:has(.scroll-top)){overflow-x:auto}
.modal:has(table.tbl):not(:has(.scroll-top)){overflow-x:auto}

/* números de destaque em quadros (Ritmo de reservas, Datas especiais…) */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:16px}
.tile{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px;min-width:0}
.tile .big{font-size:22px;margin:2px 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* tabelas de números: linhas compactas, números alinhados */
.card table.tbl td{padding:9px 10px}
.card table.tbl td .tiny{line-height:1.35}
.card table.tbl td.r{white-space:nowrap}

/* qualquer fileira de números grandes vira quadros lado a lado (sem mexer nas telas) */
.row:has(> div > .big){display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px!important;align-items:stretch;margin-bottom:14px}
.row:has(> div > .big) > div{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px;min-width:0}
.row:has(> div > .big) .big{font-size:22px;margin-bottom:2px}

/* tabelas de acompanhamento e de padrão: colunas com largura de verdade, blocos de alerta com respiro */
.ac-tbl td,.pb-sin{vertical-align:top}
.ac-tbl td{padding:16px 12px}
.ac-col1{white-space:nowrap;min-width:150px}
.ac-col2{min-width:420px;max-width:720px}
.ac-col3{white-space:nowrap;min-width:170px}
.ac-col4{min-width:200px}
.ac-col4 input{width:100%}
.alerta{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg);margin-bottom:8px}
.alerta:last-child{margin-bottom:0}
.alerta-t{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.alerta-d{margin-top:4px;font-size:var(--fs-sm);color:var(--muted);line-height:1.45;overflow-wrap:break-word}
.pb-sin{min-width:380px;max-width:560px}
.pb-sin .alerta .alerta-d{margin-top:6px}
.aj{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line)}

/* filtros pequenos (Precificação, Performance): a seta fica sempre fora do texto, mesmo em linha apertada */
select.mini{font-size:12px;height:26px;min-height:26px;padding:0 30px 0 10px;width:auto;min-width:max-content;max-width:none;flex:none;background-position:right 10px center;text-overflow:ellipsis}
input.mini:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=x]){font-size:12px;height:26px;min-height:26px;padding:0 8px;flex:none}

/* a regra .field select do app.css apagava a seta e o espaço dela nos campos de seleção: devolve a seta e afasta o texto */
.field select:not([multiple]){-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%235f748a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px}

/* padrão de filtros pequenos em todo o sistema */
.filters{align-items:center;gap:6px 8px}
.filters .field{flex-direction:row;align-items:center;gap:6px;font-size:12px;white-space:nowrap}
.filters .field select,
.filters .field input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=x]){height:26px;min-height:26px;font-size:12px;padding:0 10px;width:auto;min-width:0;flex:none;border-radius:8px}
.filters .field select:not([multiple]){padding-right:30px;background-position:right 10px center}
.filters .field input[type=date]{padding:0 8px}
.filters .field input[type=checkbox]{margin:0}
.filters .btn{min-height:26px;padding:0 10px;font-size:12px}
.filters .seg button{min-height:24px;padding:0 10px;font-size:12px}

/* menu suspenso de Avaliações */
.nav .subnav{margin:0 0 4px 18px;padding-left:8px;border-left:1px solid #b4d0ea}
.nav a.sub{font-size:13px;padding:6px 10px;font-weight:500}
.nav .caret{margin-left:6px;padding:0 4px;opacity:.7;cursor:pointer}

/* ---------- celular (até 820px): menu lateral que abre pelo botão ☰, tabelas em cartões, janelas em tela cheia ---------- */
.menu-btn{display:none}
@media (max-width:820px){
  .shell{display:block}
  .side{position:fixed;top:0;left:0;bottom:0;width:260px;height:100%;z-index:70;transform:translateX(-105%);transition:transform .2s ease;flex-direction:column;flex-wrap:nowrap;overflow:auto;padding-top:calc(14px + env(safe-area-inset-top,0px))}
  .side.aberto{transform:none;box-shadow:0 0 40px rgba(15,34,56,.35)}
  .side .nav{display:block}
  .side .brand{display:block}
  .menu-fundo{position:fixed;inset:0;background:rgba(15,34,56,.4);z-index:69}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;min-width:42px;min-height:40px;font-size:20px;margin-right:4px}
  .main{padding:10px 12px 90px}
  .topbar{gap:8px;margin-bottom:10px}
  .topbar > div:first-child{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .topbar h1{font-size:20px}
  .topbar .hello,.topbar .meta{display:none}
  .topbar > div:last-child{width:100%}
  .search{flex-wrap:wrap}
  .search input{flex:1;min-width:0;width:auto}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .g2,.g3,.g5{grid-template-columns:1fr}
  .overlay{padding:0}
  .modal,.modal.wide{max-width:none;min-height:100%;border-radius:0;padding:14px 14px 40px}
  .filters{gap:6px}
  .filters select,.filters select.mini,.filters input.mini{min-width:0!important;max-width:100%}
  .filters select{max-width:calc(50% - 4px)}
  .filterbar .row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
  /* tabelas: cada linha vira um cartão; o nome da coluna aparece antes do valor */
  table.tbl:not(.nocard),table.tbl:not(.nocard) tbody,table.tbl:not(.nocard) tr,table.tbl:not(.nocard) td{display:block;width:100%}
  table.tbl:not(.nocard) tr:has(> th){display:none}
  table.tbl:not(.nocard) tr{border:1px solid var(--line);border-radius:12px;padding:6px 10px;margin:0 0 8px;background:#fff;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px 12px}
  table.tbl:not(.nocard) tr > td:first-child{grid-column:1 / -1}
  table.tbl:not(.nocard) tr > td[colspan]{grid-column:1 / -1}
  table.tbl:not(.nocard) tr:has(> th){display:none!important}
  table.tbl:not(.nocard) td{border:0;padding:3px 0;text-align:left!important}
  table.tbl:not(.nocard) td[data-l]:not([data-l=""])::before{content:attr(data-l);display:block;font-size:11px;color:var(--muted);font-weight:600}
  table.tbl:not(.nocard) td:empty{display:none}
  .scroll-top{overflow:visible}
}