/* Complementos ao design system do protótipo: acesso, carregamento, erros, menus e ajustes de celular. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
a{color:var(--brass-700)}
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--gradient-accent);z-index:200;opacity:0;transition:width .3s var(--ease),opacity .3s}
.progress.on{width:72%;opacity:1;transition:width 8s cubic-bezier(.1,.6,.2,1),opacity .15s}
.progress.done{width:100%;opacity:0;transition:width .2s,opacity .4s .15s}

/* Acesso */
.gate{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);background:var(--surface-app)}
.gate-art{position:relative;overflow:hidden;background:var(--gradient-ink);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between}
.gate-art::before,.gate-art::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(214,172,99,.28);pointer-events:none}
.gate-art::before{width:560px;height:560px;right:-200px;bottom:-220px}
.gate-art::after{width:820px;height:820px;right:-330px;bottom:-350px;border-color:rgba(214,172,99,.14)}
.gate-art .brand-name{color:#fff;font-size:22px}.gate-art .brand-sub{color:var(--navy-200)}
.gate-art h2{color:#fff;font:300 40px/1.12 var(--font-display);max-width:15ch}
.gate-art h2 em{font-style:normal;color:var(--brass-400)}
.gate-art ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px;color:var(--navy-100);font-size:14px;max-width:44ch}
.gate-art li{display:flex;gap:10px;align-items:flex-start}.gate-art li .ico{color:var(--brass-400);margin-top:2px}
.gate-art small{color:var(--navy-200);font-size:12px;position:relative}
.gate-form{display:grid;place-items:center;padding:32px 20px}
.gate-card{width:100%;max-width:400px}
.gate-card h1{font:300 30px/1.15 var(--font-display);margin-bottom:6px}
.gate-card .lede{color:var(--text-muted);margin-bottom:22px}
.gate-card form{display:grid;gap:14px}
.gate-card .btn{height:42px;justify-content:center;width:100%}
.gate-card .input{height:42px;font-size:15px}
.gate-err{display:none;background:var(--red-100);color:var(--red-600);border-radius:var(--radius-md);padding:10px 12px;font-size:13px}
.gate-err.on{display:block}
.qr{display:grid;place-items:center;background:#fff;border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:12px}
.qr img{width:200px;height:200px;image-rendering:pixelated}
.code{font:500 15px var(--font-numeric);letter-spacing:.08em;background:var(--surface-sunken);border-radius:var(--radius-md);padding:8px 12px;word-break:break-all;text-align:center;user-select:all}
.otp{letter-spacing:.4em;text-align:center;font:500 22px var(--font-numeric)!important}

/* Barra superior e conta */
.persona{cursor:pointer;font:600 12px var(--font-sans);color:var(--text-strong)}
.persona:hover{border-color:var(--border-strong)}
.persona .pname{padding-right:4px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-scrim{display:none}
.callout a{font-weight:600}

/* Estados */
.toast.err{background:var(--red-600)}.toast.err .ico{color:#fff}
.derr{display:none}.derr.on{display:flex}.dialog .derr{margin-top:14px}
.dialog.wide{max-width:820px}
.btn.loading{opacity:.6;pointer-events:none}
.skeleton{border-radius:var(--radius-xl);background:linear-gradient(90deg,var(--neutral-100),var(--neutral-50),var(--neutral-100));background-size:200% 100%;animation:sk 1.2s linear infinite;min-height:120px}
@keyframes sk{to{background-position:-200% 0}}
.fatal-page{min-height:60vh;display:grid;place-items:center;text-align:center;padding:24px}
.more{display:flex;justify-content:center;margin-top:12px}
.field label .req{color:var(--red-500);margin-left:2px}
.field .err{display:none}.field.invalid .err{display:block}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23787B83' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:32px}
input[type=file].input{padding:7px 10px;height:auto}
.input:disabled{background:var(--surface-sunken);color:var(--text-muted)}
.li .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.kcard select.input{font-size:12px}
.pill-row{display:flex;gap:6px;flex-wrap:wrap}
.right .row{justify-content:flex-end}
.cal-nav{display:flex;align-items:center;gap:6px}
.tabbar{display:none}
.table-wrap{-webkit-overflow-scrolling:touch}
.tabs{scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}
.kanban{scroll-snap-type:x proximity}.kcol{scroll-snap-align:start}

@media (max-width:1180px){.gate-art h2{font-size:32px}}
@media (max-width:860px){
  .gate{grid-template-columns:1fr}
  .gate-art{padding:24px 20px;min-height:0}.gate-art h2,.gate-art ul,.gate-art small{display:none}
  .gate-form{align-items:start;padding-top:28px}
  .rail-scrim{display:block;position:fixed;inset:0;background:var(--surface-scrim);z-index:65;opacity:0;pointer-events:none;transition:opacity var(--dur-base)}
  .rail.open + .rail-scrim{opacity:1;pointer-events:auto}
  .rail{padding-bottom:24px}
  .content{padding-bottom:88px}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--border-default);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  .tabbar button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:var(--radius-md);font:600 10px var(--font-sans);color:var(--text-muted);position:relative;min-height:48px}
  .tabbar button[aria-current="page"]{color:var(--navy-900)}
  .tabbar button[aria-current="page"] .ico{color:var(--brass-600)}
  .tabbar .tb-n{position:absolute;top:2px;left:calc(50% + 6px);min-width:16px;height:16px;border-radius:8px;background:var(--red-500);color:#fff;font:600 10px/16px var(--font-numeric);padding:0 4px}
  .toast-wrap{left:12px;right:12px;bottom:84px}.toast{max-width:none}
  .scrim{padding:0;align-items:flex-end}
  .dialog,.dialog.wide{max-width:none;border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;padding:20px 16px calc(20px + env(safe-area-inset-bottom));max-height:92vh;overflow:auto;animation:sheet var(--dur-slow) var(--ease-out)}
  @keyframes sheet{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
  .dialog .foot{position:sticky;bottom:-20px;background:#fff;padding:12px 0 4px;margin-top:12px}
  .dialog .foot .btn{flex:1;justify-content:center;height:42px}
  .input,select.input{height:42px;font-size:16px}                /* evita zoom do iOS */
  .btn{height:40px}.btn.sm{height:34px}
  .chip{height:34px}
  .page-head .actions{width:100%}.page-head .actions .btn{flex:1;justify-content:center}
  .persona .pname{display:none}
  .top-actions .btn.primary span{display:none}
  .top-actions .btn.primary{padding:0 10px;font-size:13px;gap:0}
  .search input{font-size:16px}
  .cal .day{min-height:58px;padding:4px}.cal .ev{font-size:10px;padding:1px 4px}
  .stepper .step{min-width:96px}
  /* Tabelas viram cartões: cada linha é um bloco com rótulo por campo */
  .table-wrap{overflow:visible;margin:0}
  table.data{min-width:0;border-spacing:0;display:block}
  table.data thead{display:none}
  table.data tbody{display:grid;gap:8px}
  table.data tr{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:12px}
  table.data tr.sel{background:var(--surface-selected)}
  table.data td{display:block;padding:0;border:0!important;background:none!important;border-radius:0!important;min-width:0;text-align:left!important}
  table.data td:first-child{grid-column:1/-1}
  table.data td.wide{grid-column:1/-1}
  table.data td[data-l]::before{content:attr(data-l);display:block;font:600 10px var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--text-subtle);margin-bottom:2px}
  table.data td:first-child::before{display:none}
  table.data td.right .row{justify-content:flex-start}
  table.data td:empty{display:none}
}
@media (max-width:520px){.cal .ev{display:none}.cal .day .dots{display:flex}.fieldgrid{grid-template-columns:1fr 1fr}}
.cal .day .dots{display:none;gap:3px;flex-wrap:wrap;margin-top:auto}
.cal .day .dots i{width:6px;height:6px;border-radius:50%;background:var(--navy-500)}
.cal .day .dots i.fatal{background:var(--red-500)}.cal .day .dots i.aud{background:var(--brass-500)}
.cal .day{cursor:pointer}.cal .day.out{cursor:default}
@media print{.rail,.topbar,.tabbar,.toast-wrap,.actions{display:none!important}.shell{display:block}.card{box-shadow:none;break-inside:avoid}}

/* Ajustes de largura: nada estoura a tela */
.spread.wrap,.card-head{flex-wrap:wrap}
.filters{flex-wrap:wrap;min-width:0}
.cal{grid-template-columns:repeat(7,minmax(0,1fr))}
.cal .day{min-width:0;overflow:hidden}
.kcard{position:relative}
.li{min-width:0}.li .acts{flex:none}
.cell2{min-width:0}
.pub-text{overflow-wrap:anywhere}
.hbar>span:first-child{min-width:0}
@media (max-width:860px){
  .filters{width:100%}.filters .input{flex:1 1 140px;width:auto!important;min-width:0}
  .card-head .row.wrap{width:100%}
  .li{flex-wrap:wrap}.li .grow{flex:1 1 60%}
  .li .t{white-space:normal}
  .cal-nav{width:100%;justify-content:space-between}
  .fieldgrid{gap:12px 14px}
  .page-head{align-items:flex-start}
  .hero .figure{font-size:48px}
}
@media (max-width:860px){
  .g-hero .grid.g-2,.grid.g-4,.grid.g-3{grid-template-columns:1fr 1fr}
  .card.metric{padding:14px}.metric .m-value{font-size:22px;overflow-wrap:anywhere}.metric .m-label{font-size:11px}
  .grid.g-3>.btn{grid-column:1/-1}
}
@media (max-width:520px){.grid.g-4,.grid.g-3{grid-template-columns:1fr 1fr}.grid.g-3>.panel,.grid.g-3>.card.tight{grid-column:1/-1}}