/*
 * Auditoria iFood — Alpha Assessoria
 * Portado do piloto (auditoria-ifood/styles/auditoria-ifood.css). Todas as classes usam o
 * prefixo `if-` para nunca colidir com css/styles.css (que já define .card/.btn/.field etc
 * com estilos diferentes). Variáveis de tema também prefixadas (--if-*).
 * Só os estilos de COMPONENTE foram portados — sidebar/topbar/app-shell do piloto não se
 * aplicam aqui porque o módulo vive dentro do shell de abas do próprio LIGOS.
 */

:root{
  --if-bg:#0A0A0B; --if-surface:#151517; --if-surface2:#1B1B1E; --if-surface-hover:#212124;
  --if-border:#242426; --if-border-soft:#1E1E20;
  --if-gold:#F5A623; --if-gold-soft:rgba(245,166,35,0.14);
  --if-text:#F2F2F3; --if-text-muted:#9A9AA3; --if-text-faint:#5F5F66;
  --if-green:#34D399; --if-green-soft:rgba(52,211,153,0.14);
  --if-red:#F87171; --if-red-soft:rgba(248,113,113,0.14);
  --if-r-sm:8px; --if-r-md:14px; --if-r-lg:20px;
  --if-shadow-card:0 1px 2px rgba(0,0,0,0.4), 0 10px 30px -12px rgba(0,0,0,0.55);
}
body.light .if-root{
  --if-bg:#F7F7F8; --if-surface:#FFFFFF; --if-surface2:#F1F1F3; --if-surface-hover:#E9E9EC;
  --if-border:#E3E3E6; --if-border-soft:#ECECEE;
  --if-text:#1A1A1C; --if-text-muted:#6B6B74; --if-text-faint:#9A9AA3;
  --if-shadow-card:0 1px 2px rgba(0,0,0,0.06), 0 10px 24px -14px rgba(0,0,0,0.18);
}

.if-root{ font-size:14px; }
.if-btn{
  display:inline-flex; align-items:center; gap:7px; background:var(--if-surface2); color:var(--if-text);
  border:1px solid var(--if-border); padding:9px 14px; border-radius:9px; font-size:12.5px; font-weight:600;
  cursor:pointer; transition:background .15s, transform .1s;
}
.if-btn svg{width:14px; height:14px;}
.if-btn:hover{background:var(--if-surface-hover);}
.if-btn:active{transform:scale(0.97);}
.if-btn.if-primary{background:var(--if-gold); color:#231802; border-color:var(--if-gold);}
.if-btn.if-primary:hover{background:#ffb640;}
.if-btn:disabled{opacity:.55; cursor:default;}

.if-subnav{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px;}
.if-subnav-btn{
  display:inline-flex; align-items:center; gap:7px; background:transparent; color:var(--if-text-muted);
  border:1px solid var(--if-border); padding:8px 16px; border-radius:20px; font-size:12.5px; font-weight:700;
  cursor:pointer; transition:background .15s, color .15s;
}
.if-subnav-btn:hover{background:var(--if-surface2); color:var(--if-text);}
.if-subnav-btn.if-active{background:var(--if-gold-soft); color:var(--if-gold); border-color:transparent;}

.if-toolbar{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:18px;}
.if-toolbar .if-sub{color:var(--if-text-muted); font-size:12.5px;}
.if-actions{display:flex; gap:8px; flex-wrap:wrap;}

h2.if-sect{
  font-size:12px; text-transform:uppercase; letter-spacing:1.6px; color:var(--if-text-faint);
  font-weight:700; margin:34px 0 14px;
}
h2.if-sect:first-child{margin-top:0;}

/* ---------- KPI CARDS ---------- */
.if-kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.if-kpi{
  background:var(--if-surface); border:1px solid var(--if-border); border-radius:var(--if-r-md); padding:20px;
  box-shadow:var(--if-shadow-card); position:relative; overflow:hidden;
}
.if-kpi .if-icon{width:32px; height:32px; border-radius:9px; background:var(--if-gold-soft); color:var(--if-gold); display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.if-kpi .if-icon svg{width:16px; height:16px;}
.if-kpi .if-val{font-size:25px; font-weight:600; color:var(--if-text); line-height:1.15;}
.if-kpi .if-lbl{font-size:11.5px; color:var(--if-text-muted); margin-top:6px;}

/* ---------- SELO CARD ---------- */
.if-selo-card{position:relative; border-radius:var(--if-r-lg); overflow:hidden; margin-top:18px; background:linear-gradient(160deg,#1c1c1f,#101011 65%); border:1px solid var(--if-border); box-shadow:var(--if-shadow-card);}
.if-selo-topbar{display:flex; justify-content:space-between; align-items:center; padding:13px 22px; font-size:11px; letter-spacing:2px; font-weight:800;}
.if-selo-card.if-ouro .if-selo-topbar{background:linear-gradient(90deg,#8a6a1c,#F5D67A 45%,#8a6a1c); color:#3a2600;}
.if-selo-card.if-prata .if-selo-topbar{background:linear-gradient(90deg,#8d8d8d,#EDEDED 45%,#8d8d8d); color:#242424;}
.if-selo-card.if-bronze .if-selo-topbar{background:linear-gradient(90deg,#6b3f1c,#D89A63 45%,#6b3f1c); color:#2a1500;}
.if-selo-tierpill{background:rgba(0,0,0,0.35); padding:4px 14px; border-radius:20px;}
.if-selo-body{display:flex; align-items:center; gap:28px; padding:28px 26px; flex-wrap:wrap;}
.if-selo-badge-wrap{position:relative; flex-shrink:0; width:112px; text-align:center;}
.if-selo-crown{position:absolute; left:50%; transform:translateX(-50%); margin-top:-44px;}
.if-selo-badge{width:112px; height:112px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--if-surface2); margin-top:14px;}
.if-selo-badge.if-ouro{border:3px solid #F5D67A; box-shadow:0 0 22px rgba(245,214,122,0.4) inset, 0 0 20px rgba(245,166,35,0.35);}
.if-selo-badge.if-prata{border:3px solid #E4E4E4; box-shadow:0 0 22px rgba(228,228,228,0.32) inset, 0 0 20px rgba(200,200,200,0.28);}
.if-selo-badge.if-bronze{border:3px solid #D89A63; box-shadow:0 0 22px rgba(216,154,99,0.32) inset, 0 0 20px rgba(184,110,50,0.28);}
.if-selo-badge svg{width:54px; height:54px;}
.if-selo-tiername{margin-top:11px; font-weight:600; font-size:15px;}
.if-selo-tiername.if-ouro{color:#F5D67A;} .if-selo-tiername.if-prata{color:#E4E4E4;} .if-selo-tiername.if-bronze{color:#D89A63;}
.if-selo-info{flex:1; min-width:240px;}
.if-selo-info .if-selo-title{font-size:19px; font-weight:600; color:var(--if-text);}
.if-selo-info .if-selo-desc{color:var(--if-text-muted); font-size:13px; margin-top:7px; max-width:620px; line-height:1.55;}
.if-selo-stats{display:flex; border-top:1px solid rgba(255,255,255,0.06); background:rgba(0,0,0,0.28);}
.if-selo-stats .if-stat{flex:1; text-align:center; padding:15px 8px; border-right:1px solid rgba(255,255,255,0.06);}
.if-selo-stats .if-stat:last-child{border-right:none;}
.if-selo-stats .if-stat .if-v{font-weight:600; font-size:17px; color:var(--if-gold);}
.if-selo-stats .if-stat .if-l{font-size:10px; color:var(--if-text-faint); margin-top:4px; letter-spacing:0.6px;}

/* ---------- BENCH TABLE ---------- */
.if-bench-group-row td{background:var(--if-surface2); color:var(--if-gold); font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:1.3px; padding:9px 16px !important; border-top:1px solid var(--if-border) !important;}
.if-bench-wrap{background:var(--if-surface); border:1px solid var(--if-border); border-radius:var(--if-r-md); overflow:hidden; box-shadow:var(--if-shadow-card);}
table.if-bench{width:100%; border-collapse:collapse; font-size:13px;}
table.if-bench th{background:var(--if-surface2); color:var(--if-text-faint); text-align:left; padding:12px 16px; font-size:10.5px; text-transform:uppercase; letter-spacing:1px; font-weight:700;}
table.if-bench td{padding:14px 16px; border-top:1px solid var(--if-border-soft); vertical-align:middle;}
table.if-bench tr:hover td{background:var(--if-surface2);}
.if-crit-name{font-weight:600; color:var(--if-text);}
.if-crit-months{color:var(--if-text-faint); font-size:11.5px; margin-top:2px;}
.if-cmp-cell{white-space:nowrap;}
.if-cmp-val{font-variant-numeric:tabular-nums;}
.if-delta{font-size:11px; font-weight:700; display:inline-block; margin-left:7px; white-space:nowrap;}
.if-delta.if-up{color:var(--if-green);}
.if-delta.if-down{color:var(--if-red);}
.if-delta.if-flat{color:var(--if-text-faint);}
.if-force-wrap{width:168px;}
.if-force-track{position:relative; height:9px; border-radius:20px; background:var(--if-surface2); margin-top:2px;}
.if-force-fill{position:absolute; left:0; top:0; height:100%; border-radius:20px;}
.if-force-fill.if-ok{background:var(--if-green);} .if-force-fill.if-bad{background:var(--if-red);} .if-force-fill.if-na{background:var(--if-text-faint);}
.if-force-marker{position:absolute; top:-3px; width:2px; height:15px; background:rgba(255,255,255,0.6); border-radius:1px;}
.if-force-band{position:absolute; top:0; height:100%; background:rgba(52,211,153,0.22); border-radius:20px;}
.if-force-labels{display:flex; justify-content:space-between; margin-top:6px; font-size:10.5px; color:var(--if-text-faint);}
.if-force-labels .if-cur{font-weight:700;}
.if-force-labels .if-cur.if-ok{color:var(--if-green);} .if-force-labels .if-cur.if-bad{color:var(--if-red);} .if-force-labels .if-cur.if-na{color:var(--if-text-faint);}

.if-chart-card{background:var(--if-surface); border:1px solid var(--if-border); border-radius:var(--if-r-md); padding:20px 22px; margin-bottom:16px; box-shadow:var(--if-shadow-card);}
.if-chart-card h3{margin:0 0 4px; font-size:15px; font-weight:700; color:var(--if-text);}
.if-chart-card .if-chart-note{font-size:11.5px; color:var(--if-text-faint); margin-bottom:14px;}
.if-chart-legend{display:flex; gap:20px; flex-wrap:wrap; font-size:11.5px; color:var(--if-text-muted); margin-bottom:14px; align-items:center;}
.if-chart-legend .if-dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:middle;}
.if-chart-legend .if-dash{display:inline-block; width:16px; height:0; border-top:2px dashed var(--if-text-faint); margin-right:6px; vertical-align:middle;}
.if-status-chip{display:inline-flex; align-items:center; gap:6px; font-weight:700; padding:5px 11px; border-radius:20px; font-size:11px;}
.if-status-chip svg{width:12px; height:12px;}
.if-status-chip.if-ok{color:var(--if-green); background:var(--if-green-soft);}
.if-status-chip.if-bad{color:var(--if-red); background:var(--if-red-soft);}
.if-status-chip.if-na{color:var(--if-text-faint); background:rgba(255,255,255,0.05);}

/* ---------- PLANO DE AÇÃO ---------- */
.if-plan-card{background:var(--if-surface); border:1px solid var(--if-border); border-radius:var(--if-r-md); padding:20px 22px; margin-bottom:14px; box-shadow:var(--if-shadow-card); display:flex; gap:16px;}
.if-plan-icon{width:38px; height:38px; border-radius:10px; background:var(--if-gold-soft); color:var(--if-gold); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.if-plan-icon svg{width:18px; height:18px;}
.if-plan-card h3{margin:0 0 3px; font-size:15.5px; font-weight:700; color:var(--if-text);}
.if-plan-card .if-where{color:var(--if-gold); font-size:11.5px; font-weight:600; margin-bottom:10px;}
.if-plan-card ul{margin:0; padding-left:18px; font-size:13px; color:var(--if-text-muted); line-height:1.6;}
.if-plan-card ol{margin:0 0 12px; padding-left:20px; font-size:13px; color:var(--if-text-muted); line-height:1.7;}
.if-plan-card ol li{margin-bottom:5px;}
.if-plan-card .if-diagnostico{color:var(--if-text); font-size:13px; margin:2px 0 14px; line-height:1.6; background:rgba(255,255,255,0.03); padding:11px 13px; border-radius:8px;}
.if-plan-card .if-passo-label{font-size:10.5px; text-transform:uppercase; letter-spacing:1.1px; color:var(--if-gold); font-weight:800; margin-bottom:8px;}
.if-plan-card .if-monitor{margin-top:10px; font-size:12px; color:var(--if-text); background:var(--if-surface2); padding:10px 12px; border-radius:8px;}
.if-plan-meta{display:flex; gap:8px; margin:6px 0 14px; flex-wrap:wrap; align-items:center;}
.if-tag-mini{font-size:10px; font-weight:800; padding:4px 11px; border-radius:20px; text-transform:uppercase; letter-spacing:0.5px;}
.if-tag-mini.if-alta{background:rgba(248,113,113,0.16); color:var(--if-red);}
.if-tag-mini.if-media{background:rgba(245,166,35,0.16); color:var(--if-gold);}
.if-tag-mini.if-baixa{background:rgba(52,211,153,0.16); color:var(--if-green);}
.if-tag-mini.if-prazo{background:var(--if-surface2); color:var(--if-text-muted);}
.if-plan-card .if-impact{margin-top:12px; font-size:12px; color:var(--if-text); background:var(--if-surface2); padding:10px 12px; border-radius:8px;}
.if-tip-card{background:linear-gradient(135deg, rgba(245,166,35,0.10), var(--if-surface) 55%); border-color:rgba(245,166,35,0.35);}
.if-tip-icon{background:var(--if-gold) !important; color:#231802 !important;}
.if-tip-tag{font-size:10.5px; letter-spacing:1.3px; color:var(--if-gold); font-weight:800; margin-bottom:5px; text-transform:uppercase;}
.if-empty-note{color:var(--if-text-muted); font-size:13px; padding:30px; text-align:center; border:1px dashed var(--if-border); border-radius:var(--if-r-md);}
.if-task-btn{margin-top:4px;}
.if-task-btn.if-done{color:var(--if-green); border-color:var(--if-green-soft); background:var(--if-green-soft); cursor:default;}

/* ---------- FORM ---------- */
.if-store-row{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:8px;}
.if-field{display:flex; flex-direction:column; gap:5px;}
.if-field label{font-size:11px; color:var(--if-text-muted); font-weight:600;}
.if-field input[type=text],.if-field input[type=month]{background:var(--if-surface); border:1px solid var(--if-border); color:var(--if-text); padding:9px 11px; border-radius:8px; font-size:13.5px; width:240px;}
.if-card-block{background:var(--if-surface); border:1px solid var(--if-border); border-radius:var(--if-r-md); padding:22px 24px; margin-bottom:16px; box-shadow:var(--if-shadow-card);}
.if-card-block-head{display:flex; align-items:center; gap:11px; margin-bottom:16px;}
.if-card-block-head h3{margin:0; font-size:14.5px; font-weight:700;}
.if-card-block-head .if-hint{color:var(--if-text-faint); font-size:11.5px; margin-left:auto;}

table.if-form-table{width:100%; border-collapse:collapse; font-size:13px;}
table.if-form-table th, table.if-form-table td{padding:8px 10px; border-bottom:1px solid var(--if-border-soft); text-align:left;}
table.if-form-table th{color:var(--if-text-faint); font-weight:normal; font-size:11px; text-transform:uppercase; letter-spacing:0.6px;}
table.if-form-table td.if-label{color:var(--if-text-muted); width:36%; font-size:12.5px;}
table.if-form-table input{width:100%; background:var(--if-surface2); border:1px solid var(--if-border); color:var(--if-text); padding:7px 9px; border-radius:7px; font-size:13px; transition:border-color .15s, box-shadow .15s;}
table.if-form-table input:focus{outline:none; border-color:var(--if-gold); box-shadow:0 0 0 3px var(--if-gold-soft);}
.if-month-head input{background:transparent; border:none; color:var(--if-gold); font-weight:700; font-size:12.5px; width:100%; text-align:center; border-bottom:1px dashed var(--if-border); padding:5px;}
.if-month-head input:focus{outline:none; border-bottom:1.5px solid var(--if-gold);}

.if-quarter-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px;}
table.if-log-table{width:100%; border-collapse:collapse; font-size:13px; margin-bottom:10px;}
table.if-log-table th{color:var(--if-text-faint); font-weight:normal; font-size:11px; text-transform:uppercase; letter-spacing:0.6px; text-align:left; padding:6px 8px;}
table.if-log-table td{padding:5px 8px; border-bottom:1px solid var(--if-border-soft);}
table.if-log-table input{width:100%; background:var(--if-surface2); border:1px solid var(--if-border); color:var(--if-text); padding:7px 9px; border-radius:7px; font-size:13px;}
table.if-log-table input:focus{outline:none; border-color:var(--if-gold); box-shadow:0 0 0 3px var(--if-gold-soft);}
.if-row-remove-btn{background:transparent; border:1px solid var(--if-border); color:var(--if-text-faint); width:26px; height:26px; border-radius:7px; cursor:pointer; font-size:15px; line-height:1;}
.if-row-remove-btn:hover{background:var(--if-red-soft); color:var(--if-red); border-color:var(--if-red);}
.if-log-diag-title{font-size:10.5px; text-transform:uppercase; letter-spacing:1.1px; color:var(--if-gold); font-weight:800; margin:14px 0 8px;}
.if-log-ok{font-size:12.5px; color:var(--if-green); background:var(--if-green-soft); padding:9px 11px; border-radius:8px;}
table.if-log-suggest{width:100%; border-collapse:collapse; font-size:12.5px; margin-top:8px;}
table.if-log-suggest th{color:var(--if-text-faint); font-weight:normal; font-size:10.5px; text-transform:uppercase; letter-spacing:0.5px; text-align:left; padding:7px 8px; border-bottom:1px solid var(--if-border);}
table.if-log-suggest td{padding:7px 8px; border-bottom:1px solid var(--if-border-soft); color:var(--if-text-muted);}
table.if-log-suggest td.if-changed{color:var(--if-gold); font-weight:700;}
table.if-log-suggest td.if-reason{color:var(--if-text-faint); font-size:11.5px;}
.if-log-suggest-note{font-size:11px; color:var(--if-text-faint); margin-top:8px; font-style:italic;}
.if-log-tip{display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--if-text); background:linear-gradient(135deg, rgba(245,166,35,0.10), var(--if-surface2) 55%); border:1px solid rgba(245,166,35,0.3); padding:11px 13px; border-radius:9px; margin-top:14px;}
.if-log-tip svg{width:15px; height:15px; color:var(--if-gold); flex-shrink:0; margin-top:1px;}
.if-qbox label{display:block; font-size:11.5px; color:var(--if-text-muted); margin-bottom:7px; font-weight:600;}
.if-qbox input{width:100%; background:var(--if-surface2); border:1px solid var(--if-border); color:var(--if-text); padding:9px 10px; border-radius:8px; font-size:13.5px;}
.if-qbox input:focus{outline:none; border-color:var(--if-gold); box-shadow:0 0 0 3px var(--if-gold-soft);}

.if-history-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border-radius:8px; background:var(--if-surface2); margin-bottom:6px; font-size:12.5px; color:var(--if-text-muted);}
.if-history-row .if-view-btn{color:var(--if-gold); cursor:pointer; font-weight:700; background:none; border:none; font-size:12px;}
.if-blocked-note{color:var(--if-text-muted); font-size:13px; padding:40px 30px; text-align:center; border:1px dashed var(--if-border); border-radius:var(--if-r-md); background:var(--if-surface);}

/* ---------- COMPARATIVO MENSAL — rolagem horizontal (linha do tempo pode ter muitos meses) ---------- */
.if-cmp-wrap{background:var(--if-surface); border:1px solid var(--if-border); border-radius:var(--if-r-md); box-shadow:var(--if-shadow-card); overflow-x:auto;}
table.if-cmp-table{width:auto; min-width:100%;}
table.if-cmp-table th, table.if-cmp-table td{white-space:nowrap;}
table.if-cmp-table th:first-child, table.if-cmp-table td:first-child{position:sticky; left:0; background:var(--if-surface); z-index:1; white-space:normal;}
table.if-cmp-table th:first-child{background:var(--if-surface2);}

/* ---------- EXPORTAR PDF ---------- */
.if-print-area{display:none;}
.if-print-title{font-size:19px; font-weight:700; margin:0 0 18px;}
.if-print-break{page-break-before:always;}

@media (max-width:980px){ .if-kpi-grid{grid-template-columns:repeat(2,1fr);} }

@media print{
  html, body{height:auto !important; background:#fff;}
  /* css/styles.css força TODA .tab-content a display:block+page-break-before:always na impressão
     (pensado pra imprimir 1 aba de cada vez) — isso gerava 1 página em branco por aba do sistema
     antes de chegar na Auditoria iFood. body.if-printing (setado por _ifExportPdfGeneric antes do
     print, removido depois) restringe a impressão só ao container desta aba. */
  body.if-printing .tab-content{display:none !important;}
  body.if-printing #content_auditoria_ifood{display:block !important; page-break-before:auto !important;}
  /* #globalTopbar (seletor de período/conta) fica fora de qualquer .tab-content — sem isso ele
     vazava no topo da 1ª página impressa. */
  body.if-printing #globalTopbar, body.if-printing header{display:none !important;}
  #ifScreenArea{display:none !important;}
  #ifPrintArea{display:block !important;}

  /* Todo componente (.if-kpi, .if-selo-card, .if-plan-card, gráficos SVG etc.) já lê cor pelos
     tokens --if-* — redefinindo os tokens pra uma paleta clara aqui, tudo dentro de #ifPrintArea
     fica legível automaticamente, sem precisar sobrescrever cada elemento (o bug anterior: só o
     TEXTO virava escuro, o FUNDO continuava no tema escuro original → texto quase invisível). */
  #ifPrintArea{
    --if-bg:#fff; --if-surface:#fff; --if-surface2:#f4f4f5; --if-surface-hover:#eee;
    --if-border:#ddd; --if-border-soft:#eee;
    --if-gold:#a86a08; --if-gold-soft:rgba(168,106,8,0.12);
    --if-text:#111; --if-text-muted:#444; --if-text-faint:#777;
    --if-green:#0a8a4a; --if-green-soft:rgba(10,138,74,0.12);
    --if-red:#c0262b; --if-red-soft:rgba(192,38,43,0.12);
    --if-shadow-card:none;
    color:#111; background:#fff;
  }
  .if-print-title{color:#111; font-size:19px; font-weight:700;}
  .if-kpi, .if-bench-wrap, .if-cmp-wrap, .if-plan-card, .if-card-block, .if-selo-card, .if-chart-card{
    border-color:#ddd !important; box-shadow:none !important; break-inside:avoid; page-break-inside:avoid;
  }
  .if-cmp-wrap{overflow-x:visible !important;}
  table.if-cmp-table th:first-child, table.if-cmp-table td:first-child{position:static !important; background:#f4f4f5 !important;}
  table.if-bench tr:hover td{background:none !important;}
  h2.if-sect{break-after:avoid; page-break-after:avoid;}
}