@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════════════
   YOUCON — Design System
   Dark cinematográfico. Superfícies em camadas, vidro estratégico,
   hierarquia executiva.

   COMO FUNCIONA: esta folha é carregada DEPOIS do <style> de cada
   tela, e redefine as MESMAS variáveis que o sistema já usa
   (--bg, --t, --gold, --s1...). Por isso o sistema inteiro muda de
   pele sem que nenhuma regra de componente precise ser reescrita.

   REGRA: aqui só entra aparência. Nada de layout que mova elemento
   de lugar, nada que mude comportamento. Só como as coisas parecem.
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. TOKENS  (os nomes são os que as telas já consomem)
   ───────────────────────────────────────────────────────────── */
:root:root{
  /* superfícies: neutros com viés levemente magenta, para o cinza
     conversar com o vermelho da marca em vez de brigar com ele */
  --bg:#0B0A0C;
  --s1:#16141A;        /* superfície base (cards)        */
  --s2:#1C1922;        /* superfície elevada             */
  --s3:#252029;        /* superfície destacada           */
  --surface:#16141A;  --surface2:#1C1922;  --surface3:#252029;

  /* texto */
  --t:#F3F0F5;         --text:#F3F0F5;
  --tm:#A29CA8;        --text-muted:#A29CA8;   --muted:#A29CA8;
  --td:#847D8C;        --text-dim:#847D8C;     --dim:#847D8C;

  /* bordas — SÓLIDAS de propósito: o sistema usa --b também como
     fundo em alguns pontos, e rgba deixaria esses elementos vazados */
  --b:#242029;         --border:#242029;       --lc:#242029;

  /* marca (a que o sistema já usa) */
  --gold:#E50914;      --accent:#E50914;
  --gd:rgba(229,9,20,.11);   --accent-dim:rgba(229,9,20,.11);
  --gb:rgba(229,9,20,.42);

  /* semânticas — mantidas, para não quebrar o vocabulário de status */
  --gn:#46D369;  --green:#46D369;  --gnd:rgba(70,211,105,.13);   --gnb:rgba(70,211,105,.28);
  --wn:#E8A838;  --warn:#E8A838;   --wnd:rgba(232,168,56,.13);   --wnb:rgba(232,168,56,.28);
  --rd:#FF5C47;  --danger:#FF5C47; --rdd:rgba(255,92,71,.13);    --rdb:rgba(255,92,71,.28);
  --bl:#5B9CF6;  --bld:rgba(91,156,246,.13);   --blb:rgba(91,156,246,.28);
  --pu:#B57CFF;  --pud:rgba(181,124,255,.13);

  /* raio e sombra */
  --r:12px;  --radius:12px;  --rs:9px;
  --sh:0 18px 44px -14px rgba(0,0,0,.72);

  /* ── tokens novos. prefixo yc- porque --s1..--s3 no sistema
        são SUPERFÍCIES, não espaçamento ── */
  --yc-brand-bright:#FF2A36;
  --yc-glass:rgba(30,26,35,.66);
  --yc-glass-strong:rgba(18,16,21,.88);
  --yc-hairline:rgba(255,255,255,.07);
  --yc-hairline-lit:rgba(255,255,255,.13);
  --yc-shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --yc-shadow-md:0 8px 24px -8px rgba(0,0,0,.6);
  --yc-shadow-brand:0 8px 24px -8px rgba(229,9,20,.42);
  --yc-blur-sm:blur(8px);  --yc-blur-md:blur(16px);  --yc-blur-lg:blur(28px);
  --yc-fast:150ms cubic-bezier(.4,0,.2,1);
  --yc-normal:220ms cubic-bezier(.4,0,.2,1);
  --yc-slow:320ms cubic-bezier(.16,1,.3,1);
  --yc-sp-1:4px;  --yc-sp-2:8px;  --yc-sp-3:12px; --yc-sp-4:16px;
  --yc-sp-5:20px; --yc-sp-6:24px; --yc-sp-8:32px; --yc-sp-10:40px;
}

/* ─────────────────────────────────────────────────────────────
   2. BASE — a luz da cena
   ───────────────────────────────────────────────────────────── */
body{
  font-family:Montserrat,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--t);
  background-color:var(--bg);
  /* luz ambiente pintada no próprio fundo (sem pseudo-elemento,
     para nunca competir com o conteúdo por z-index) */
  background-image:
    radial-gradient(1100px 520px at 14% -10%, rgba(229,9,20,.085), transparent 60%),
    radial-gradient(820px 420px at 92% 2%,   rgba(91,156,246,.05), transparent 58%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}

::selection{background:var(--gb);color:#fff}

*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--s3);border-radius:6px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#332C39;background-clip:content-box}

/* foco visível e elegante, em tudo que recebe teclado */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--yc-brand-bright);
  outline-offset:2px;
  border-radius:var(--rs);
}

/* ─────────────────────────────────────────────────────────────
   3. TIPOGRAFIA — hierarquia por peso e tracking, sem fonte nova
   ───────────────────────────────────────────────────────────── */
h1,h2,h3,h4{text-wrap:balance;letter-spacing:-.015em}
h1{font-weight:300}
h1 b,h1 strong{font-weight:600}
h2{font-weight:600}

/* rótulos de seção */
.lbl2,.lbl,.mini-lbl{
  font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--td);
}
.mini{color:var(--tm);font-size:12.5px;line-height:1.5}
.req{color:var(--gold)}

/* números grandes de indicador: peso leve, tracking negativo.
   é o que separa painel executivo de painel administrativo */
.sv,.stat-val,.kpi-val,.stat b{
  font-weight:200;letter-spacing:-.035em;line-height:1.05;
  font-variant-numeric:tabular-nums;
}

/* ─────────────────────────────────────────────────────────────
   4. BOTÕES — uma ação principal, as demais recuam
   ───────────────────────────────────────────────────────────── */
.btn{
  border-radius:var(--rs);
  font-weight:600;
  letter-spacing:.005em;
  padding:10px 18px;
  transition:background var(--yc-fast),border-color var(--yc-fast),
             color var(--yc-fast),transform var(--yc-fast),box-shadow var(--yc-fast);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn[disabled],.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* primária */
.btn.bp{background:var(--gold);color:#fff;box-shadow:var(--yc-shadow-brand)}
.btn.bp:hover{background:var(--yc-brand-bright)}

/* secundária / fantasma */
.btn.bg{background:rgba(255,255,255,.04);color:var(--tm);border:1px solid var(--yc-hairline)}
.btn.bg:hover{background:rgba(255,255,255,.09);color:var(--t);border-color:var(--yc-hairline-lit)}

/* acento */
.btn.ba{background:var(--gd);color:var(--gold);border:1px solid var(--gb)}
.btn.ba:hover{background:rgba(229,9,20,.19)}

.btn-ghost{background:transparent;color:var(--tm)}
.btn-ghost:hover{background:rgba(255,255,255,.05);color:var(--t)}

.bsm,.btn-sm{padding:8px 14px;font-size:12.5px}
.bxs{padding:5px 10px;font-size:11.5px;border-radius:var(--yc-sp-2)}

/* ─────────────────────────────────────────────────────────────
   5. CAMPOS — foco com glow discreto
   ───────────────────────────────────────────────────────────── */
.inp,input[type=text],input[type=number],input[type=date],input[type=email],
input[type=password],input[type=search],input[type=tel],select,textarea{
  background:#100E13;
  border:1px solid var(--yc-hairline);
  border-radius:var(--rs);
  color:var(--t);
  font-family:inherit;
  transition:border-color var(--yc-fast),box-shadow var(--yc-fast),background var(--yc-fast);
}
.inp:hover,input[type=text]:hover,input[type=number]:hover,input[type=date]:hover,
input[type=email]:hover,input[type=password]:hover,input[type=search]:hover,
input[type=tel]:hover,select:hover,textarea:hover{border-color:var(--yc-hairline-lit)}
.inp:focus,input[type=text]:focus,input[type=number]:focus,input[type=date]:focus,
input[type=email]:focus,input[type=password]:focus,input[type=search]:focus,
input[type=tel]:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--gb);
  box-shadow:0 0 0 3px var(--gd);
  background:var(--s1);
}
::placeholder{color:#4A4550}
label{color:var(--tm)}

/* ─────────────────────────────────────────────────────────────
   6. SUPERFÍCIES — card, painel, indicador
   ───────────────────────────────────────────────────────────── */
.card,.panel{
  background:linear-gradient(162deg,var(--s2),var(--s1));
  border:1px solid var(--yc-hairline);
  border-radius:var(--r);
  box-shadow:var(--yc-shadow-sm);
  transition:border-color var(--yc-normal),box-shadow var(--yc-normal),transform var(--yc-normal);
}
.card:hover{border-color:var(--yc-hairline-lit);box-shadow:var(--yc-shadow-md)}

.stat{
  background:linear-gradient(162deg,var(--s2),var(--s1));
  border:1px solid var(--yc-hairline);
  border-radius:var(--r);
  transition:border-color var(--yc-normal),transform var(--yc-normal),box-shadow var(--yc-normal);
}
.stat:hover{border-color:var(--yc-hairline-lit);transform:translateY(-2px);box-shadow:var(--yc-shadow-md)}

/* ─────────────────────────────────────────────────────────────
   7. BADGES — cor e texto sempre juntos, nunca só a cor
   ───────────────────────────────────────────────────────────── */
.badge{
  border-radius:999px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.01em;
  padding:4px 11px;
  border:1px solid transparent;
}

/* ─────────────────────────────────────────────────────────────
   8. TABELAS — deixa de parecer planilha
   ───────────────────────────────────────────────────────────── */
table{border-collapse:collapse}
thead th{
  font-size:11px;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--td);
  background:var(--s2);
  border-bottom:1px solid var(--yc-hairline);
  padding:12px 14px;
  text-align:left;
}
tbody td{
  padding:13px 14px;
  border-bottom:1px solid rgba(255,255,255,.045);
  font-size:13.5px;
}
tbody tr{transition:background var(--yc-fast)}
tbody tr:hover{background:rgba(255,255,255,.032)}
tbody tr:last-child td{border-bottom:none}

/* ─────────────────────────────────────────────────────────────
   9. MODAIS — o fundo desfoca, a superfície sobe
   ───────────────────────────────────────────────────────────── */
.ov,.overlay,.modal-ov{
  background:rgba(6,5,7,.72);
  backdrop-filter:var(--yc-blur-md);
  -webkit-backdrop-filter:var(--yc-blur-md);
}
.modal,.mbox,.modal-box{
  background:linear-gradient(165deg,var(--s2),var(--s1));
  border:1px solid var(--yc-hairline-lit);
  border-radius:16px;
  box-shadow:var(--sh);
  animation:ycRise var(--yc-slow) both;
}
.mh,.modal-head{border-bottom:1px solid var(--yc-hairline)}
.mf,.modal-foot{border-top:1px solid var(--yc-hairline)}
.mt,.modal-title{font-weight:600;letter-spacing:-.01em}

@keyframes ycRise{
  from{opacity:0;transform:translateY(12px) scale(.985)}
  to{opacity:1;transform:none}
}

/* ─────────────────────────────────────────────────────────────
   10. ABAS, VAZIOS, DIVERSOS
   ───────────────────────────────────────────────────────────── */
.tab{
  transition:color var(--yc-fast),border-color var(--yc-fast),background var(--yc-fast);
  font-weight:600;
}
.empty{color:var(--td);text-align:center;padding:48px 20px}

hr{border:none;border-top:1px solid var(--yc-hairline)}
a:not([class]){color:var(--gold);transition:color var(--yc-fast)}
a:not([class]):hover{color:var(--yc-brand-bright)}
code,pre{font-family:ui-monospace,Menlo,Consolas,monospace}

/* ─────────────────────────────────────────────────────────────
   11. RESPONSIVO — o sistema quase não tinha media query.
        Aqui o desktop não é encolhido, ele é reorganizado.
   ───────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .stats{grid-template-columns:repeat(2,1fr)!important}
  .r4{grid-template-columns:repeat(2,1fr)!important}
}
@media (max-width:820px){
  .r2,.r3,.r4{grid-template-columns:1fr!important}
  .stats{grid-template-columns:repeat(2,1fr)!important}
  .card,.panel{padding:18px}
  /* tabela larga rola dentro do próprio container, o corpo nunca rola de lado */
  .tbl-wrap,.table-wrap,.dtab-wrap,.mapa-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media (max-width:640px){
  .stats{grid-template-columns:1fr!important}
  .btn{padding:11px 16px}      /* área de toque confortável */
  .bxs{padding:7px 11px}
  .modal,.mbox,.modal-box{max-width:100%!important;margin:0;border-radius:14px}
  .ov,.overlay,.modal-ov{padding:14px}
  thead th{padding:10px 11px}
  tbody td{padding:11px}
  h1{font-size:24px}
}

/* ─────────────────────────────────────────────────────────────
   12. ACESSIBILIDADE
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .btn:hover,.stat:hover{transform:none}
}

/* caixas de marcar seguem a marca */
input[type=checkbox],input[type=radio]{accent-color:var(--gold)}

/* ═══════════════════════════════════════════════════════════════════
   13. CAMADA CINEMATOGRÁFICA
   Tratamento tela a tela. Continua sendo só aparência: nenhuma regra
   aqui move elemento de lugar nem altera comportamento.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 13.1 SIDEBAR: navegação de streaming ────────────────────────
   Mantida na largura atual de propósito. Ela vive num flex com o
   iframe do módulo; recolher e expandir no hover redimensionaria o
   iframe a cada passada de mouse, e isso é comportamento, não estética. */
.sidebar{
  background:linear-gradient(180deg,var(--s2) 0%,var(--s1) 42%,#121016 100%);
  border-right:1px solid var(--yc-hairline);
  box-shadow:1px 0 0 rgba(0,0,0,.4);
}
.sb-logo{border-bottom:1px solid var(--yc-hairline)}
.sb-foot{border-top:1px solid var(--yc-hairline)}
.sb-nav::-webkit-scrollbar{width:6px}

/* itens: sem caixa em volta, o destaque vem da luz e de uma barra fina */
.mod-head{
  border-radius:var(--rs);
  font-weight:500;
  letter-spacing:.005em;
  position:relative;
  transition:color var(--yc-fast),background var(--yc-fast);
}
.mod-head:hover{background:rgba(255,255,255,.05);color:var(--t)}
.mod-head.active,.mod-head.open{color:var(--t);background:rgba(255,255,255,.055)}
.mod-head.active::before{
  content:'';position:absolute;left:-12px;top:9px;bottom:9px;width:3px;
  background:linear-gradient(180deg,var(--yc-brand-bright),var(--gold));
  border-radius:0 3px 3px 0;
}
.sub-item{
  border-radius:var(--yc-sp-2);
  transition:color var(--yc-fast),background var(--yc-fast);
}
.sub-item:hover{background:rgba(255,255,255,.04);color:var(--t)}
.sub-item.active{color:var(--t);background:rgba(229,9,20,.10)}
.sub-item.active .dot{background:var(--gold);box-shadow:0 0 8px var(--gb)}

/* identidade de quem está logado */
.user-av{
  background:linear-gradient(140deg,var(--gold),#8E0610);
  color:#fff;font-weight:700;letter-spacing:.02em;
  box-shadow:0 4px 14px -4px rgba(229,9,20,.55);
}
.user-name{font-weight:600;letter-spacing:-.005em}
.user-role{color:var(--td);font-size:11.5px}
.logout-btn{
  border-radius:var(--rs);
  border:1px solid var(--yc-hairline);
  background:rgba(255,255,255,.03);
  color:var(--tm);
  transition:all var(--yc-fast);
}
.logout-btn:hover{background:rgba(255,255,255,.08);color:var(--t);border-color:var(--yc-hairline-lit)}

/* ── 13.2 HOME: as obras como títulos ────────────────────────────
   Os cards já eram pôsteres 2/3. O que muda é a luz: o véu deixa de
   ser um corte duro e passa a dissolver, e o hover ganha profundidade. */
.obra-card{
  border-radius:var(--r);
  border:1px solid var(--yc-hairline);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.8);
}
/* o véu antigo cortava em 45%. agora dissolve em três tempos */
.obra-card .veil{
  background:
    linear-gradient(180deg,
      rgba(8,7,9,.15) 0%,
      rgba(8,7,9,0) 32%,
      rgba(8,7,9,.55) 62%,
      rgba(8,7,9,.93) 88%,
      #08070A 100%),
    radial-gradient(120% 80% at 50% 100%, rgba(229,9,20,.16), transparent 62%);
}
.obra-card .cover{transition:transform var(--yc-slow),filter var(--yc-slow)}
/* :not(.zooming) protege a animação de entrada da obra (escala 6x no clique) */
.obra-card:hover:not(.zooming) .cover{transform:scale(1.06);filter:saturate(1.08) brightness(1.04)}
.obra-card:hover:not(.zooming){
  border-color:var(--gb);
  box-shadow:0 26px 60px -18px rgba(0,0,0,.9), 0 0 0 1px var(--gb), 0 10px 40px -14px rgba(229,9,20,.42);
}
/* varredura de luz ao passar o mouse */
.obra-card::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.10) 50%,transparent 62%);
  transform:translateX(-100%);
  transition:transform 620ms cubic-bezier(.16,1,.3,1);
}
.obra-card:hover:not(.zooming)::after{transform:translateX(100%)}
.obra-card .info{z-index:3}
.obra-card .info .n{letter-spacing:-.02em;font-weight:700}
.obra-card .info .c{color:rgba(255,255,255,.72);letter-spacing:.01em}

/* ── 13.3 INDICADORES: hierarquia sem mexer na grade ─────────────
   A grade tem entre 3 e 5 cartões dependendo da tela; mudar o span
   quebraria o encaixe. A hierarquia vem da luz e da tipografia. */
.stat{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,.035), transparent 58%),
    linear-gradient(162deg,var(--s2),var(--s1));
  position:relative;
  overflow:hidden;
}
/* fio de luz no topo, como em superfície de vidro */
.stat::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
}
/* o primeiro indicador é o principal: recebe a marca */
.stats .stat:first-child{
  background:
    radial-gradient(130% 110% at 0% 0%, rgba(229,9,20,.10), transparent 60%),
    linear-gradient(162deg,var(--s2),var(--s1));
  border-color:rgba(229,9,20,.20);
}
.stats .stat:first-child::before{
  background:linear-gradient(90deg,transparent,var(--gb),transparent);
}
.stats .stat:first-child .sv{color:#fff}

/* rótulo e valor */
.sl{
  font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--td);
}
.sv{
  font-size:clamp(22px,2.4vw,30px);
  font-weight:200;letter-spacing:-.035em;line-height:1.08;
  margin-top:6px;
  font-variant-numeric:tabular-nums;
}
.ss{color:var(--tm);font-size:12px}

/* ── 13.4 SUPERFÍCIES: profundidade ──────────────────────────────── */
.card,.panel{
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.03), transparent 55%),
    linear-gradient(162deg,var(--s2),var(--s1));
  position:relative;
}
.card::before,.panel::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;border-radius:var(--r) var(--r) 0 0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.11),transparent);
  pointer-events:none;
}

/* ── 13.5 TABELAS: cabeçalho que acompanha a rolagem ─────────────── */
thead th{position:sticky;top:0;z-index:2;backdrop-filter:var(--yc-blur-sm);-webkit-backdrop-filter:var(--yc-blur-sm)}

/* ── 13.6 ABAS: sublinhado da marca ──────────────────────────────── */
.tab{position:relative;color:var(--tm)}
.tab:hover{color:var(--t)}
.tab.active,.tab.on{color:var(--t)}
.tab.active::after,.tab.on::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--gold),var(--yc-brand-bright));
  border-radius:2px 2px 0 0;
}

/* ── 13.7 ENTRADA DA TELA: aparição suave, uma vez só ────────────── */
@keyframes ycFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.stats,.card,.panel{animation:ycFadeUp 380ms cubic-bezier(.16,1,.3,1) backwards}
.obra-card{animation:ycFadeUp 460ms cubic-bezier(.16,1,.3,1) backwards}

@media (prefers-reduced-motion:reduce){
  .stats,.card,.panel,.obra-card{animation:none}
  .obra-card:hover:not(.zooming) .cover{transform:none}
  .obra-card::after{display:none}
}

/* ═══════════════════════════════════════════════════════════════════
   14. O CELULAR — a casca do sistema
   Achado da auditoria: .layout e um flex de duas colunas com
   height:100vh e a sidebar em 240px FIXOS, e a media query que existia
   so cuidava da tela de escolha de obra. Num aparelho de 360px sobravam
   ~120px para o modulo, o que torna o sistema inutilizavel no campo.
   Aqui a casca deixa de ser duas colunas e passa a ser duas faixas:
   o menu em cima com rolagem propria, o modulo embaixo com o resto.
   Nao e o desktop encolhido, e outro arranjo.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:760px){
  #shell{height:auto;min-height:100dvh}
  .layout{
    flex-direction:column;
    height:auto;
    min-height:100dvh;
  }
  .sidebar{
    width:100%;
    flex:0 0 auto;
    max-height:34dvh;
    overflow-y:auto;
    border-right:none;
    border-bottom:1px solid var(--yc-hairline);
    box-shadow:0 1px 0 rgba(0,0,0,.5);
  }
  /* a marca ocupa menos altura, o menu ganha espaco */
  .sb-logo{padding:12px 16px 10px}
  .sb-nav{padding:8px 10px}
  .mod-head{padding:9px 10px}
  .sb-foot{padding:10px 12px}
  .user-role{display:none}          /* o cargo cabe no desktop, no celular rouba linha */

  .frame-wrap{flex:1 1 auto;min-height:66dvh}
  .frame-wrap iframe,#module-frame{min-height:66dvh}

  /* respiro dos blocos centrados: 40px de cada lado comem 1/4 de um 360 */
  .selobra,.login-box,.obra-empty,.box,.conv-card{padding:22px 18px}
  .obra-screen{padding:16px 12px}
  .empty,.loading{padding:32px 16px}
}

/* aparelhos bem estreitos: o menu encolhe mais para o conteudo respirar */
@media (max-width:420px){
  .sidebar{max-height:30dvh}
  .frame-wrap,.frame-wrap iframe,#module-frame{min-height:70dvh}
  .sb-logo{padding:10px 14px 8px}
}

/* ═══════════════════════════════════════════════════════════════════
   15. CORREÇÕES DE REGRESSÃO
   Achados da auditoria das 22 telas. Tudo aqui conserta algo que a
   própria folha compartilhada tinha piorado.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 15.1 O modal de Aprovações virou um painel opaco em tela cheia ──
   `.modal` é a CAIXA em 7 telas, mas em aprovacoes.html é o FUNDO
   (position:fixed;inset:0). A folha pintou o fundo como se fosse caixa:
   o contexto da solicitação sumia atrás de um painel com borda colada
   nas beiradas. Aqui o fundo volta a ser véu e a caixa recebe a superfície. */
#modal-rec,
.modal:has(> .box){
  background:rgba(6,5,7,.72);
  backdrop-filter:var(--yc-blur-md);
  -webkit-backdrop-filter:var(--yc-blur-md);
  border:0;
  border-radius:0;
  box-shadow:none;
  animation:none;
}
#modal-rec > .box,
.modal > .box{
  background:linear-gradient(165deg,var(--s2),var(--s1));
  border:1px solid var(--yc-hairline-lit);
  border-radius:16px;
  box-shadow:var(--sh);
  animation:ycRise var(--yc-slow) backwards;
}

/* ── 15.2 Campos sem atributo type ficavam com o visual antigo ──
   São 121 no sistema. Seletores por tipo não alcançam `<input>` puro,
   então campos vizinhos apareciam com fundo e raio diferentes. */
input:not([type]),
input[type=url],
input[type=month],
input[type=time],
input[type=week],
input[type=datetime-local]{
  background:#100E13;
  border:1px solid var(--yc-hairline);
  border-radius:var(--rs);
  color:var(--t);
  font-family:inherit;
  transition:border-color var(--yc-fast),box-shadow var(--yc-fast),background var(--yc-fast);
}
input:not([type]):hover{border-color:var(--yc-hairline-lit)}
input:not([type]):focus{
  outline:none;border-color:var(--gb);
  box-shadow:0 0 0 3px var(--gd);background:var(--s1);
}

/* ── 15.3 Listas que se refazem a cada tecla não podem reanimar ──
   A busca reconstrói a lista inteira via innerHTML; cada caractere
   recriava os cartões e disparava a aparição de novo, fazendo a tela
   piscar. Pior no celular, com o teclado aberto. */
#lista .card,
.list > .card{animation:none}

/* ── 15.4 O iframe do módulo ditava a largura mínima da tela ──
   Item flex sem min-width:0 assume a largura intrínseca do conteúdo
   (300px no iframe). Somado à sidebar, o layout não descia de ~540px,
   e como o corpo é overflow:hidden a faixa direita ficava inalcançável. */
.layout{max-width:100%}
.frame-wrap{min-width:0}

/* ── 15.5 A altura real do celular ──
   100vh no celular é a altura COM a barra do navegador recolhida, então
   o rodapé da sidebar (Trocar obra e Sair) ficava fora de alcance, sem
   rolagem para chegar nele. */
@supports (height:100dvh){
  @media (max-width:760px){
    body{height:auto;min-height:100dvh;overflow-y:auto}
  }
}