/* =====================================================================
   tema.css — Módulo de Requisições · "Centro de Operações" (dark)
   Mesma linguagem visual do Estoque (carvão quente + verde-petróleo,
   Fraunces/Hanken/JetBrains Mono) + componentes próprios das
   requisições (status pill, trilho, kanban, trilha de auditoria).
   ===================================================================== */
:root{
    --bg-body:#121316; --bg-panel:#1c1e23; --surface:#1c1e23; --surface-2:#212429; --surface-3:#262a30;
    --ink:#ecedea; --text-main:#ecedea; --muted:#9fa29b; --text-muted:#9fa29b; --faint:#6d6f69;
    --line:rgba(255,255,255,.08); --line-soft:rgba(255,255,255,.05); --border-light:rgba(255,255,255,.08);
    --accent:#45cbb4; --accent-2:#2fb7a0; --accent-deep:#157d6e;
    --accent-soft:rgba(69,203,180,.12); --accent-line:rgba(69,203,180,.24); --accent-glow:rgba(69,203,180,.30);
    --pos:#4fc983; --pos-soft:rgba(79,201,131,.14);
    --warn:#e0925a; --warn-soft:rgba(224,146,90,.14);
    --danger:#f0795f; --danger-soft:rgba(240,121,95,.12);
    --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow-md:0 6px 18px rgba(0,0,0,.28); --shadow-lg:0 18px 44px rgba(0,0,0,.40);
    --radius-sm:10px; --radius-md:14px; --radius-lg:18px; --radius-xl:22px;
}
*{box-sizing:border-box;}
body{
    margin:0; padding:20px;
    font-family:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
    color:var(--text-main); background-color:var(--bg-body);
    background-image:
        radial-gradient(820px 460px at 6% -6%, rgba(69,203,180,.10), transparent 60%),
        radial-gradient(680px 420px at 100% 0%, rgba(224,146,90,.06), transparent 55%);
    background-attachment:fixed; background-repeat:no-repeat; position:relative; min-height:100vh;
}
body::before{
    content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:linear-gradient(rgba(255,255,255,.020) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.020) 1px, transparent 1px);
    background-size:46px 46px;
    -webkit-mask-image:radial-gradient(circle at 50% 20%, #000 0%, transparent 80%);
    mask-image:radial-gradient(circle at 50% 20%, #000 0%, transparent 80%);
}
body>*:not(script):not(style){position:relative; z-index:1;}
::selection{background:var(--accent-soft); color:#fff;}
*{scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent;}
*::-webkit-scrollbar{width:9px; height:9px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16); border-radius:999px; border:2px solid transparent; background-clip:padding-box;}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28); background-clip:padding-box;}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

.wrap{max-width:1180px; margin:0 auto;}

/* ---- Cabeçalho de página ---- */
.page-header{position:relative; padding-bottom:22px; margin-bottom:28px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap;}
.page-header h1{font-family:'Fraunces',serif; font-weight:600; font-size:1.95rem; letter-spacing:-.015em; color:var(--ink); line-height:1.1; margin:0;}
.page-header h1[data-eyebrow]::before{content:attr(data-eyebrow); display:block; font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:6px;}
.page-header p{color:var(--muted); margin:6px 0 0; font-size:14px;}
.ph-actions{display:flex; gap:10px; flex-wrap:wrap;}

/* ---- Painéis / cards ---- */
.painel,.card{background:linear-gradient(180deg,var(--surface-2),var(--surface)); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:24px;}
.painel-titulo{font-family:'Fraunces',serif; font-size:1.15rem; color:var(--ink); margin:0 0 4px; font-weight:600; display:flex; align-items:center; gap:10px;}
.painel-sub{color:var(--muted); font-size:13px; margin:0 0 20px;}
.grid{display:grid; gap:22px;}

/* ---- Métricas ---- */
.metricas{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-bottom:26px;}
.metrica{background:linear-gradient(180deg,var(--surface-2),var(--surface)); border:1px solid var(--line); border-radius:var(--radius-md); padding:18px 20px; box-shadow:var(--shadow-sm); display:flex; align-items:center; gap:16px; text-decoration:none; color:inherit; transition:transform .15s ease, border-color .15s ease;}
a.metrica:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.16);}
.metrica .mi{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; background:var(--accent-soft); color:var(--accent);}
.metrica.is-warn .mi{background:var(--warn-soft); color:var(--warn);}
.metrica.is-danger .mi{background:var(--danger-soft); color:var(--danger);}
.metrica.is-pos .mi{background:var(--pos-soft); color:var(--pos);}
.metrica.is-info .mi{background:rgba(59,130,246,.14); color:#6ba5f5;}
.metrica .mv{font-family:'JetBrains Mono',monospace; font-size:1.6rem; font-weight:600; color:var(--ink); line-height:1;}
.metrica .mv.money{font-size:1.15rem; letter-spacing:-.01em;}
.metrica .ml{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-top:5px;}

/* ---- Formulários ---- */
.campo{margin-bottom:16px;}
.campo label{display:block; font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:7px;}
.campo label .opt{text-transform:none; letter-spacing:0; color:var(--faint); font-weight:500;}
.input,.select,textarea.input{width:100%; padding:12px 14px; background:var(--surface-3); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius-sm); font:500 15px 'Hanken Grotesk',sans-serif; outline:none; transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;}
textarea.input{resize:vertical; min-height:72px;}
.input:hover,.select:hover{border-color:rgba(255,255,255,.2);}
.input:focus,.select:focus,textarea.input:focus{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); background:#2b2f36;}
.select option{background:#1c1e23; color:var(--ink);}
.dica{font-size:12px; color:var(--faint); margin-top:6px;}
.linha-2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px 18px;}
.col-span{grid-column:1/-1;}

/* ---- Botões ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:12px 20px; border-radius:var(--radius-sm); border:none; cursor:pointer; font:700 14.5px 'Hanken Grotesk',sans-serif; text-decoration:none; transition:transform .15s ease, filter .2s ease, background-color .2s ease; white-space:nowrap;}
.btn i{font-size:18px;}
.btn-primary{background:linear-gradient(150deg,var(--accent),var(--accent-2)); color:#0c1714; box-shadow:0 6px 16px -6px var(--accent-glow);}
.btn-primary:hover{filter:brightness(1.06); transform:translateY(-1px);}
.btn-pos{background:linear-gradient(150deg,#4fc983,#2f9c64); color:#07140c; box-shadow:0 6px 16px -6px rgba(79,201,131,.4);}
.btn-pos:hover{filter:brightness(1.06); transform:translateY(-1px);}
.btn-neg{background:linear-gradient(150deg,#f0795f,#d85138); color:#1c0a06; box-shadow:0 6px 16px -6px rgba(240,121,95,.4);}
.btn-neg:hover{filter:brightness(1.06); transform:translateY(-1px);}
.btn-warn{background:linear-gradient(150deg,#e6a765,#d07c34); color:#1c0f04;}
.btn-warn:hover{filter:brightness(1.06); transform:translateY(-1px);}
.btn-ghost{background:var(--surface-3); color:var(--muted); border:1px solid var(--line); font-weight:600;}
.btn-ghost:hover{background:#2b2f36; color:var(--ink);}
.btn-bloco{width:100%;}
.btn-sm{padding:8px 13px; font-size:13px;}
.btn-lg{padding:13px 22px; font-size:14.5px;}

/* ---- Mensagens ---- */
.msg{display:flex; align-items:center; gap:11px; padding:14px 18px; border-radius:var(--radius-md); margin-bottom:22px; font-size:14px; font-weight:500; border:1px solid var(--line);}
.msg i{font-size:20px; flex-shrink:0;}
.msg-ok{background:var(--pos-soft); color:var(--pos); border-color:rgba(79,201,131,.3);}
.msg-erro{background:var(--danger-soft); color:var(--danger); border-color:rgba(240,121,95,.3);}
.msg-info{background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line);}

/* ---- Tabela ---- */
.tabela-wrap{background:linear-gradient(180deg,var(--surface-2),var(--surface)); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); overflow:hidden;}
.tabela-scroll{overflow-x:auto;}
table.tabela{width:100%; border-collapse:separate; border-spacing:0; min-width:640px;}
table.tabela thead th{background-color:#11302b; color:#eafaf6; text-align:left; padding:14px 18px; font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap;}
table.tabela tbody td{padding:14px 18px; border-top:1px solid var(--line); font-size:14px; color:var(--ink); vertical-align:middle;}
table.tabela tbody tr.clic{cursor:pointer;}
table.tabela tbody tr.clic:hover td{background:rgba(255,255,255,.025);}
table.tabela .num{font-family:'JetBrains Mono',monospace; text-align:center; font-variant-numeric:tabular-nums;}
table.tabela .center{text-align:center;}
table.tabela .right{text-align:right;}
/* Linha de total no rodapé da tabela de itens. */
table.tabela tfoot td{padding:14px 18px; border-top:2px solid var(--accent-line); font-size:14px; color:var(--muted); background:rgba(255,255,255,.02);}
table.tabela tfoot .linha-total b{color:var(--ink); font-family:'JetBrains Mono',monospace; font-size:15px;}
/* Campo de valor em Real (prefixo R$ colado no input). */
.preco-in{display:flex; align-items:center; height:46px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-3); overflow:hidden; transition:border-color .18s ease, box-shadow .18s ease;}
.preco-in:focus-within{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft);}
.preco-in .cif{padding:0 4px 0 12px; font-size:13px; color:var(--faint); font-family:'JetBrains Mono',monospace;}
.preco-in input{width:104px; border:none; background:transparent; color:var(--ink); font:600 15px 'JetBrains Mono',monospace; padding:0 12px 0 4px; outline:none; text-align:right;}
.valor-forte{font-family:'JetBrains Mono',monospace; font-weight:700; color:var(--ink);}
.t-codigo{font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--accent);}
.t-nome{font-weight:600;}
.t-sub{font-size:12px; color:var(--muted);}
.t-vazia{text-align:center; padding:46px 20px; color:var(--muted);}
.quando{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--faint);}

/* ---- Prioridade ---- */
.prio-tag{font-size:12px; font-weight:700;}
.prio-normal{color:var(--muted);}
.prio-alta{color:var(--warn);}
.prio-urgente{color:var(--danger);}

/* ---- Barra de busca/filtros ---- */
.barra{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-bottom:22px;}
.barra .campo{margin-bottom:0;}
.barra .input,.barra .select{min-width:180px;}
.busca{position:relative; flex:1; min-width:220px;}
.busca i{position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--faint); font-size:18px;}
.busca .input{padding-left:40px;}

/* ===================================================================
   Componentes das REQUISIÇÕES
   =================================================================== */

/* Status pill (8 estados; cor via --c inline) */
.st{display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.01em; white-space:nowrap; color:var(--c,#94A3B8); background:color-mix(in srgb, var(--c,#94A3B8) 15%, transparent); border:1px solid color-mix(in srgb, var(--c,#94A3B8) 32%, transparent);}
.st::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--c,#94A3B8); flex:none;}
.st.lg{font-size:13.5px; padding:6px 15px;}
.st.mini{font-size:11px; padding:2px 9px;}

/* Toggle segmentado (prioridade) */
.optset{display:flex; gap:8px; flex-wrap:wrap;}
.optset .opt-btn{flex:1; min-width:100px; border:1px solid var(--line); background:var(--surface-3); color:var(--muted); border-radius:var(--radius-sm); padding:11px; font:600 13.5px 'Hanken Grotesk',sans-serif; cursor:pointer; transition:all .15s; display:flex; align-items:center; justify-content:center; gap:7px;}
.optset .opt-btn:hover{color:var(--ink);}
.optset .opt-btn.on[data-v=normal]{background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line);}
.optset .opt-btn.on[data-v=alta]{background:var(--warn-soft); color:var(--warn); border-color:rgba(224,146,90,.3);}
.optset .opt-btn.on[data-v=urgente]{background:var(--danger-soft); color:var(--danger); border-color:rgba(240,121,95,.3);}

/* Adição rápida de item */
.addrow{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; padding:16px; background:var(--surface-3); border:1px dashed var(--accent-line); border-radius:var(--radius-md); margin-bottom:16px;}
.addrow .busca{min-width:200px;}
.stepper{display:flex; align-items:stretch; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; background:var(--surface-3); height:46px;}
.stepper button{width:40px; border:none; background:transparent; color:var(--muted); font-size:20px; cursor:pointer;}
.stepper button:hover{background:rgba(255,255,255,.06); color:var(--ink);}
.stepper input{width:64px; border:none; background:transparent; color:var(--ink); text-align:center; font:600 15px 'JetBrains Mono',monospace; outline:none;}
.mini-thumb{width:30px; height:30px; border-radius:7px; background:var(--surface-3); border:1px solid var(--line); display:grid; place-items:center; color:var(--faint); font-size:16px; flex:none;}

/* Rodapé de formulário */
.form-foot{display:flex; align-items:center; gap:14px; margin-top:20px; flex-wrap:wrap;}
.form-foot .tot{font-family:'JetBrains Mono',monospace; font-size:14px; color:var(--muted);}
.form-foot .tot b{color:var(--ink);}
.form-foot .push{margin-left:auto; display:flex; gap:10px; flex-wrap:wrap;}

/* ---- Quadro (Kanban) ---- */
.quadro-scroll{overflow-x:auto; padding-bottom:6px;}
.quadro{display:grid; grid-template-columns:repeat(4,minmax(240px,1fr)); gap:16px; align-items:start;}
.kcol{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-lg); padding:14px; min-width:0;}
.kcol-h{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:14px; padding-bottom:11px; border-bottom:2px solid color-mix(in srgb, var(--c) 55%, transparent);}
.kcol-h .tt{font-weight:700; font-size:13px; color:var(--c); display:flex; gap:8px; align-items:center;}
.kcol-h .tt::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--c);}
.kcol-h .ct{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted); background:rgba(255,255,255,.06); padding:1px 9px; border-radius:999px;}
.kcard{display:block; text-decoration:none; color:inherit; background:linear-gradient(180deg,var(--surface-3),var(--surface-2)); border:1px solid var(--line); border-radius:var(--radius-md); padding:13px; margin-bottom:10px; cursor:pointer; transition:transform .12s, border-color .12s; border-left:3px solid var(--c);}
.kcard:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.2);}
.kcard .kno{font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--accent); margin-bottom:6px; display:flex; justify-content:space-between; align-items:center;}
.kcard .kit{font-weight:600; font-size:13.5px; line-height:1.3; margin-bottom:10px; color:var(--ink);}
.kcard .kwho{font-size:11.5px; color:var(--muted); display:flex; align-items:center; gap:6px; justify-content:space-between;}
.kcard .kwho .kvalor{font-family:'JetBrains Mono',monospace; font-weight:600; color:var(--ink); white-space:nowrap;}
.kcol-valor{font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; color:var(--c); text-align:right; margin:-8px 0 12px;}
.kcol-vazia{font-size:12.5px; color:var(--faint); text-align:center; padding:16px 8px;}

/* ---- Detalhe: trilho de status ---- */
.det-meta{display:flex; gap:22px; flex-wrap:wrap; margin-top:14px;}
.det-meta .m{display:flex; flex-direction:column; gap:3px;}
.det-meta .m .k{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint);}
.det-meta .m .v{font-size:14px; font-weight:600;}
.trilho{display:flex; align-items:flex-start; gap:0; margin:26px 0; padding:22px 8px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-lg); overflow-x:auto;}
.etapa{flex:1; min-width:110px; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative;}
.etapa::before{content:""; position:absolute; top:15px; left:-50%; width:100%; height:2px; background:var(--line);}
.etapa:first-child::before{display:none;}
.etapa .eno{width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--surface-3); border:2px solid var(--line); color:var(--faint); font-family:'JetBrains Mono',monospace; font-size:13px; z-index:1; transition:all .2s;}
.etapa .elbl{font-size:12px; color:var(--faint); margin-top:9px; font-weight:600; max-width:120px;}
.etapa.done .eno{background:var(--accent-deep); border-color:var(--accent-2); color:#eafaf6;}
.etapa.done::before{background:var(--accent-2);}
.etapa.done .elbl{color:var(--muted);}
.etapa.atual .eno{background:linear-gradient(150deg,var(--accent),var(--accent-2)); border-color:var(--accent); color:#0c1714; box-shadow:0 0 0 5px var(--accent-soft), 0 0 22px var(--accent-glow);}
.etapa.atual .elbl{color:var(--accent); font-weight:700;}
.etapa.atual::before{background:var(--accent-2);}
.etapa.off .elbl{color:var(--danger);}

.det-grid{display:grid; grid-template-columns:1fr 320px; gap:22px; align-items:start;}

/* controles por item */
.item-off{opacity:.5;}
.item-off .t-nome{text-decoration:line-through;}
.chk{width:24px; height:24px; border-radius:7px; border:1.6px solid var(--line); background:var(--surface-3); display:grid; place-items:center; cursor:pointer; color:transparent; transition:all .15s;}
.chk.on{background:var(--pos); border-color:var(--pos); color:#07140c;}
.qty-in{width:70px; padding:7px; text-align:center; font-family:'JetBrains Mono',monospace; background:var(--surface-3); border:1px solid var(--line); border-radius:8px; color:var(--ink); outline:none;}
.qty-in:focus{border-color:var(--accent);}

/* trilha de auditoria */
.trilha{list-style:none; margin:0; padding:0; position:relative;}
.trilha::before{content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:var(--line);}
.trilha li{position:relative; padding:0 0 20px 30px;}
.trilha li:last-child{padding-bottom:0;}
.trilha .pt{position:absolute; left:3px; top:3px; width:14px; height:14px; border-radius:50%; background:var(--surface-3); border:2px solid var(--muted); z-index:1;}
.trilha li.t-ok .pt{border-color:var(--pos); background:var(--pos-soft);}
.trilha li.t-neg .pt{border-color:var(--danger); background:var(--danger-soft);}
.trilha li.t-go .pt{border-color:var(--accent); background:var(--accent-soft);}
.trilha li.t-wait .pt{border-color:#F59E0B; background:rgba(245,158,11,.16);}
.trilha .ev{font-size:13.5px; font-weight:600; line-height:1.35;}
.trilha .who{font-size:12px; color:var(--muted); margin-top:2px;}
.trilha .ts{font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--faint); margin-top:3px;}
.trilha .motivo{margin-top:7px; font-size:12.5px; color:var(--muted); background:var(--surface-3); border-left:2px solid var(--warn); padding:7px 11px; border-radius:0 8px 8px 0;}

/* barra de ações contextual */
.actionbar{margin-top:22px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:16px 20px; background:linear-gradient(180deg,rgba(28,30,35,.6),var(--surface-2)); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-md);}
.actionbar .ctx{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted);}
.actionbar .push{margin-left:auto; display:flex; gap:10px; flex-wrap:wrap;}
.info-line{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); margin-top:12px;}
.info-line i{color:var(--accent); font-size:16px;}

/* diálogo (motivo) */
dialog.modal{border:1px solid var(--line); background:linear-gradient(180deg,var(--surface-2),var(--surface)); color:var(--ink); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:24px; width:min(440px,92vw);}
dialog.modal::backdrop{background:rgba(0,0,0,.55);}
dialog.modal h3{font-family:'Fraunces',serif; margin:0 0 12px; font-size:1.2rem;}

/* ---- Guia ---- */
.flowmap{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:22px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-lg); overflow-x:auto;}
.flownode{display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; font-size:13px; font-weight:700; color:var(--c); background:color-mix(in srgb, var(--c) 14%, transparent); border:1px solid color-mix(in srgb, var(--c) 30%, transparent); white-space:nowrap;}
.flowarr{color:var(--faint); font-size:18px; flex:none;}
.flowbranch{width:100%; height:0; flex-basis:100%;}
.doc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px;}
.doc-status{border:1px solid var(--line); border-radius:var(--radius-md); padding:14px 15px; background:var(--surface-2); border-left:3px solid var(--c);}
.doc-status p{margin:8px 0 0; font-size:12.5px; color:var(--muted); line-height:1.45;}
.role-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px;}
.role-card{border:1px solid var(--line); border-radius:var(--radius-md); padding:18px; background:var(--surface-2);}
.role-card h4{margin:0 0 4px; font-family:'Fraunces',serif; font-size:1.05rem; display:flex; align-items:center; gap:9px;}
.role-card .tag{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:12px;}
.role-card ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px;}
.role-card li{font-size:13px; color:var(--muted); display:flex; gap:9px; line-height:1.4;}
.role-card li i{color:var(--accent); font-size:15px; margin-top:2px; flex:none;}
.sub-h{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin:34px 0 14px; display:flex; align-items:center; gap:12px;}
.sub-h::after{content:""; flex:1; height:1px; background:var(--line);}

/* ===================================================================
   Responsivo
   =================================================================== */
@media (max-width:1040px){ .det-grid{grid-template-columns:1fr;} }
@media (max-width:760px){
    body{padding:16px;}
    .page-header{align-items:stretch; gap:14px;}
    .page-header h1{font-size:1.6rem;}
    .page-header .btn{width:100%; justify-content:center;}
    .painel,.card{padding:18px;}
    .metricas{grid-template-columns:1fr 1fr; gap:12px;}
    .form-grid{grid-template-columns:1fr;}
}
@media (max-width:620px){
    .linha-2{grid-template-columns:1fr;}
    .grid{gap:16px;}
}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important;} }