/* Complementos da aplicação sobre o fa.css do protótipo: responsivo, menus com botões, toasts e formulários. */
html,body{margin:0;padding:0}
body{background:#fafafa}
.fa{min-height:100vh}
.fa.light{color-scheme:light}
.fa.dark{color-scheme:dark}

/* Menus: itens que são botões (button_to) com a mesma aparência dos links */
details.menu .pop form{margin:0}
details.menu .pop .menu-item,.menu-item{display:flex;width:100%;align-items:center;gap:10px;padding:10px;border-radius:8px;color:var(--app-text);
  background:transparent;border:none;font-size:14px;cursor:pointer;text-align:left;font-family:inherit;text-decoration:none}
details.menu .pop .menu-item:hover{background:var(--app-subtle)}
details.menu .pop .menu-item[disabled]{cursor:default;opacity:1}
button.link{background:none;border:none;padding:0;cursor:pointer;font-family:inherit}
.btn[disabled],button[disabled].btn{opacity:.55;cursor:not-allowed}
.inline-form{display:inline}

/* Mensagens de sistema */
.flash-area{display:flex;flex-direction:column;gap:8px}
.flash-area:empty,.flash-area:not(:has(.alert)){display:none}
.toasts{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;gap:10px;max-width:360px}
.toasts .toast{position:relative;padding-bottom:16px}
.field_with_errors{display:contents}
.field-error{font-size:12px;color:var(--bad);font-weight:600}
.errors{list-style:none;margin:0;padding:0}

/* Portal: cabeçalho + navegação inferior no celular */
.portal-shell{display:flex;flex-direction:column;background:var(--app-bg)}
.portal-bar{padding:10px 32px;position:sticky;top:0;z-index:20}
.portal-nav{gap:4px;margin-left:16px}
.fa .nav a{padding:8px 12px;border-radius:8px;font-size:14px;font-weight:700;color:var(--app-muted);text-decoration:none}
.fa .nav a.on{background:var(--primary-100);color:var(--ink-tint)}
.portal-main{width:100%;max-width:1280px;margin:0 auto;padding:28px 32px 40px;display:flex;flex-direction:column;gap:24px;flex:1}
.portal-tabbar{display:none;position:sticky;bottom:0;z-index:20}
.page-narrow{width:100%;max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:18px}

/* Central e admin */
.app-shell{min-height:100vh}
.side{position:sticky;top:0;height:100vh;overflow-y:auto}
.search-box{position:relative;flex:1 1 320px;max-width:520px;margin:0}
.content{margin:0 auto}
dl.kv{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 10px;font-size:13px;line-height:18px;margin:0}
dl.kv dt{color:var(--app-muted)} dl.kv dd{font-weight:600;margin:0}
.tbl .tt{display:block;font-weight:700;color:var(--app-text);max-width:320px}
.tbl .org{display:block;font-size:12px;color:var(--app-faint);font-weight:400}
.tbl td form{display:inline}
.src{display:inline-flex;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border-radius:4px;padding:1px 5px;background:var(--info-bg);color:var(--info);margin-left:6px;vertical-align:1px}
.sel{height:40px;padding:0 10px;border:1px solid var(--app-line);border-radius:10px;background:var(--app-surface);color:var(--app-text);font-size:14px;font-family:inherit;width:100%}
.fa .tri .field label{font-size:12px;color:var(--app-muted);text-transform:uppercase;letter-spacing:.04em}
.fa .tri .field select,.fa .tri .field input{height:40px;font-size:14px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.empty{padding:28px;text-align:center;color:var(--app-faint);font-size:14px;background:var(--app-surface);border-radius:10px}
.attach-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.attach-list a{font-size:12px;font-weight:700;color:var(--ink-tint);text-decoration:none;display:inline-flex;gap:4px;align-items:center;background:var(--app-subtle);border-radius:9999px;padding:3px 10px}
.translated{margin-top:6px;padding-top:6px;border-top:1px dashed var(--app-line);font-size:14px;color:var(--app-muted)}
.qr svg{display:block;width:240px;height:240px;max-width:100%;border-radius:10px}
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;font-family:ui-monospace,monospace;font-size:15px}
.mask button.copy{display:inline-flex}
.mask [hidden]{display:none !important}
.composer textarea{font-family:inherit}
.otp{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.otp input{height:56px;text-align:center;font-size:22px;font-weight:800;border:1px solid var(--app-line);border-radius:10px;background:var(--app-surface);color:var(--app-text)}
.otp input:focus{outline:none;border-color:var(--primary-500);box-shadow:0 0 0 3px var(--primary-200)}
.swatch{width:40px;height:40px;border-radius:10px;border:1px solid var(--app-line)}
.scale{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));border-radius:8px;overflow:hidden;height:28px}
.hide-sm{display:inline}
.show-sm{display:none}

@media (max-width: 860px){
  .portal-bar{padding:8px 12px}
  .portal-nav{display:none}
  .portal-main{padding:16px 16px 24px}
  .portal-tabbar{display:grid}
  .hide-sm{display:none}
  .show-sm{display:inline-flex}
  .side{position:fixed;left:0;top:0;z-index:50;transform:translateX(-100%);transition:transform .2s;max-width:280px;width:280px}
  .app-shell.nav-open .side{transform:none;box-shadow:var(--shadow-pop)}
  .bar{padding:8px 12px}
  .content{padding:16px}
  .cols>.aside{flex-basis:100%}
  .grid2,.grid3,.grid4{grid-template-columns:minmax(0,1fr) !important}
  .toasts{left:12px;right:12px;max-width:none}
}

.show-sm-flex{display:none}
.hide-sm-block{display:flex}
.article p{margin:0}
@media (max-width: 860px){
  .show-sm-flex{display:flex}
  .hide-sm-block{display:none}
}

/* A20: triagem, prazos e compositor com nota interna */
.fa dl.tri{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px 10px;align-items:center;font-size:13px;margin:0}
.fa dl.tri dt{color:var(--app-muted)}
.fa dl.tri dd{margin:0}
.fa dl.tri select,.fa dl.tri input{width:100%;height:36px;border:1px solid var(--app-line);border-radius:8px;background:var(--app-surface);color:var(--app-text);font-size:13px;padding:0 8px;font-family:inherit}
.fa .clock{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;padding:6px 0;border-bottom:1px solid var(--app-line)}
.fa .clock:last-child{border-bottom:none}
.fa .composer .vis{display:none}
.fa .composer:has(.mode-note:checked) .vis{display:flex}
.fa .composer:has(.mode-note:checked){background:var(--note-bg);border-color:var(--note-line);border-style:dashed}
.fa .composer:has(.mode-note:checked) .public-only{display:none}
.canned-pop{max-height:320px;overflow:auto}

/* A22 e A30 */
.fa label.team{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--app-line);border-radius:10px;background:var(--app-surface);cursor:pointer}
.fa label.team:has(input:checked){border-color:var(--primary-500);box-shadow:0 0 0 2px var(--primary-200)}
.fa label.team input{margin-top:3px;accent-color:var(--primary-600)}
.fa .ref-item{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:10px;background:var(--app-surface);border:1px solid var(--app-line);text-decoration:none;color:inherit}
.fa .ref-item.on{border-color:var(--primary-500);box-shadow:0 0 0 2px var(--primary-200)}

/* Administração (M*) */
.fa .tree a .k{margin-left:auto;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--app-faint)}
.fa .tree .d4{padding-left:88px} .fa .tree .d5{padding-left:108px}
.fa .kv3{display:grid;grid-template-columns:160px minmax(0,1fr);gap:10px 14px;font-size:14px;margin:0}
.fa .kv3 dt{color:var(--app-muted)} .fa .kv3 dd{font-weight:600;margin:0}
.fa .prod{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--app-line);border-radius:10px;font-size:14px}
.fa .live{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--ok)}
.fa .live::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px var(--ok-bg)}
.fa .panel{background:var(--app-surface);border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.fa .mini{width:100%;border-collapse:collapse;font-size:13px}
.fa .mini th{text-align:left;font-size:11px;color:var(--app-faint);text-transform:uppercase;letter-spacing:.04em;padding:6px 8px;border-bottom:1px solid var(--app-line)}
.fa .mini td{padding:8px;border-bottom:1px solid var(--app-line)}
.fa .mini tr:last-child td{border-bottom:none}
.fa .mini td.n{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.fa .vs{display:grid;grid-template-columns:130px minmax(0,1fr) 110px;gap:10px;align-items:center;font-size:13px}
.fa .vs .track{height:10px;border-radius:9999px;background:var(--app-subtle);position:relative}
.fa .vs .track i{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--app-text)}
.fa .vs .track b{display:block;height:100%;border-radius:9999px}
.fa .tree .t{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--app-faint);padding:10px 10px 2px}
.fa .q{display:grid;grid-template-columns:minmax(0,1fr) 130px minmax(0,1fr) 90px;gap:8px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--app-line);font-size:13px}
.fa .q input,.fa .q select{height:36px;font-size:13px}
.fa .tbl input.cell{width:110px;height:36px;border:1px solid var(--app-line);border-radius:8px;background:var(--app-surface);color:var(--app-text);font-size:14px;padding:0 10px;font-variant-numeric:tabular-nums}
.fa .tbl input.chg{border-color:var(--primary-500);background:var(--primary-50)}
.fa .pol{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--app-line);border-radius:10px;background:var(--app-surface);text-decoration:none;color:inherit}
.fa .pol.on{border-color:var(--primary-500);box-shadow:0 0 0 2px var(--primary-200)}
.fa .act{display:inline-flex;font-size:12px;font-weight:700;border-radius:6px;padding:2px 8px;background:var(--app-subtle);color:var(--app-text);white-space:nowrap}
.fa .act.sec{background:var(--bad-bg);color:var(--bad)}
.fa .act.imp{background:var(--warn-bg);color:var(--warn)}
.fa .dom{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--app-line);font-size:14px}
.token-box{font-family:ui-monospace,monospace;word-break:break-all;background:var(--app-subtle);padding:10px;border-radius:8px}

/* Botões que são links: a regra ".fa a" do protótipo não pode vencer a cor do botão */
.fa a.btn-primary,.fa button.btn-primary{color:var(--on-cta)}
.fa a.btn-brand{color:var(--on-primary)}
.fa a.btn-danger,.fa button.btn-danger{color:#fff}
.fa .tbl td:nth-child(3){min-width:260px}
.fa .tbl .tt{max-width:340px}
.portal-bar>a{text-decoration:none}