@charset "utf-8";
/* =====================================================================
 * Dicionário de Alimentos — NI Platform
 * Arquivo dono : plugin/assets/css/ni-dicionario.css
 * Carregado por: class-dicionario-frontend-module.php
 *               via add_action('wp_enqueue_scripts') + has_shortcode()
 * Tokens base  : ni-tokens.css (carregado antes, priority 0 no wp_head)
 * Deploy       : MaintenanceDeployModule → LiteSpeed Purge CSS/JS
 * Mudança visual: editar ESTE arquivo, não o PHP
 * Última atualização: 07/05/2026 (D5.2-A)
 * ===================================================================== */

/* ── BASE / WRAPPER ─────────────────────────────────────────────────── */
.nid{font-family:'Space Grotesk',sans-serif;color:#1a1a1a;max-width:1200px;margin:0 auto}
.nid h1,.nid h2,.nid h3{font-family:'Outfit',sans-serif}

/* ── HERO / TOPO — card claro (decisão D5.2-A) ─────────────────────── */
.nid-hero{background:linear-gradient(135deg,#123622 0%,#1F8A4C 100%);padding:32px 24px;text-align:center;border-radius:var(--ni-radius-xl);margin-bottom:20px;box-shadow:var(--ni-shadow-sm)}
body:not(.ni-lov-page) .nid-hero .brand{color:#96D2A0!important;font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase}
body:not(.ni-lov-page) .nid-hero h2{color:#fff!important;font-size:26px!important;margin:8px 0 6px!important;font-family:var(--font-h);font-weight:800!important;border-bottom:none!important;padding-bottom:0!important}
body:not(.ni-lov-page) .nid-hero h2::after{display:none!important}
body:not(.ni-lov-page) .nid-hero p{color:rgba(255,255,255,0.85)!important;font-size:13px}

/* ── BUSCA ───────────────────────────────────────────────────────────── */
.nid-search{max-width:500px;margin:0 auto 16px;position:relative}
.nid-search input{width:100%;padding:12px 16px 12px 42px;border:1.5px solid #D8DED9;border-radius:12px;font-size:14px;font-family:'Space Grotesk';outline:none}
.nid-search input:focus{border-color:#2E8B57;box-shadow:0 0 0 3px rgba(46,139,87,.1)}
.nid-search::before{content:'🔍';position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:16px}

/* ── FILTROS / CATEGORIAS ────────────────────────────────────────────── */
.nid-cats{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.nid-cat{padding:5px 12px;border-radius:20px;border:1px solid #D8DED9;background:#fff;cursor:pointer;font-size:11px;font-weight:600;color:#677367;transition:.2s}
.nid-cat:hover,.nid-cat.on{background:#121F17;color:#fff;border-color:#121F17}

/* ── GRID + CARDS ───────────────────────────────────────────────────── */
.nid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:30px}
.nid-card{background:#fff;border:1px solid #D8DED9;border-radius:14px;padding:14px;cursor:pointer;transition:.2s;text-align:center;position:relative}
.nid-card:hover{border-color:#2E8B57;box-shadow:0 4px 20px -4px rgba(46,139,87,.15);transform:translateY(-2px)}
.nid-card .em{font-size:32px;display:block;margin-bottom:6px}
.nid-card .nm{font-family:'Outfit';font-weight:700;font-size:13px;color:#121F17}
.nid-card .kc{font-size:11px;color:#2E8B57;font-weight:600;margin-top:2px}
.nid-card .tg{position:absolute;top:6px;right:6px;font-size:8px;padding:2px 6px;border-radius:8px;background:#F9FAF7;color:#677367;font-weight:600}
.nid-card .ck{position:absolute;top:6px;left:6px;width:20px;height:20px;border-radius:6px;border:2px solid #D8DED9;background:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;transition:.2s}
.nid-card .ck.on{background:#2E8B57;border-color:#2E8B57;color:#fff}
.nid-cnt{text-align:center;margin-bottom:14px;font-size:12px;color:#677367}

/* ── BARRA FLUTUANTE ─────────────────────────────────────────────────── */
.nid-bar{position:fixed;bottom:0;left:0;right:0;background:#121F17;padding:12px 16px;display:none;align-items:center;justify-content:center;gap:10px;z-index:100000;box-shadow:0 -4px 20px rgba(0,0,0,.3)}
.nid-bar.vis{display:flex;flex-wrap:wrap}
.nid-chip{background:#1A2E21;color:#fff;padding:5px 10px;border-radius:8px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:5px}
.nid-chip .x{cursor:pointer;color:#f87171;font-weight:800}
.nid-cmp-btn{background:#2E8B57;color:#fff;border:none;padding:10px 24px;border-radius:10px;font-family:'Outfit';font-weight:700;font-size:14px;cursor:pointer}
.nid-cmp-btn:hover{background:#257A4B}
.nid-cmp-btn:disabled{opacity:.5}

/* ── MODAL / OVERLAY ─────────────────────────────────────────────────── */
.nid-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;display:none;align-items:center;justify-content:center;padding:16px}
.nid-overlay.vis{display:flex}
.nid-modal{background:#fff;border-radius:16px;max-width:900px;width:100%;max-height:90vh;overflow-y:auto}
/* Modal header — permanece escuro (design intencional) */
.nid-mh{background:#121F17;padding:20px;border-radius:16px 16px 0 0;display:flex;align-items:center;gap:14px}
.nid-mh .em{font-size:40px}
.nid-mh h2{color:#fff;font-size:20px;font-weight:700}
.nid-mh .ct{color:#2E8B57;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
/* DICIONARIO-CSS-FIXES-0: id-specificity vence .nir-modal h2; .ct clareado para WCAG AA */
#nid-cm .nid-mh h2,#nid-cc2 .nid-mh h2{color:#fff!important}
#nid-cm .nid-mh .ct,#nid-cc2 .nid-mh .ct{color:#4ade80!important}
.nid-mh .cls{margin-left:auto;color:#fff;font-size:22px;cursor:pointer;background:none;border:none;padding:6px}
.nid-mb{padding:20px}

/* ── TABELA NUTRICIONAL ──────────────────────────────────────────────── */
.nid-nr{display:flex;align-items:center;padding:8px 0;border-bottom:1px solid #f0f0f0}
.nid-nr:last-child{border:none}
.nid-nl{width:110px;font-weight:600;font-size:12px;color:#121F17}
.nid-nbw{flex:1;height:16px;background:#f0f0f0;border-radius:8px;margin:0 10px;overflow:hidden}
.nid-nb{height:100%;border-radius:8px;transition:.4s}
.nid-nv{width:55px;text-align:right;font-weight:700;font-size:12px}
.nid-ben{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.nid-bt{background:#f0fdf4;color:#2E8B57;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600}
.nid-tip{background:#F9FAF7;padding:14px;border-radius:10px;border-left:4px solid #2E8B57;margin-top:16px}
.nid-tip p{font-size:13px;color:#555;margin:4px 0 0}

/* ── COMPARAÇÃO ──────────────────────────────────────────────────────── */
.nid-cg{display:grid;overflow-x:auto}
.nid-cg.c2{grid-template-columns:110px 1fr 1fr}
.nid-cg.c3{grid-template-columns:110px 1fr 1fr 1fr}
.nid-cc{padding:10px 12px;border-bottom:1px solid #f0f0f0;font-size:13px;display:flex;align-items:center}
.nid-cc.hd{background:#121F17;color:#fff;font-weight:700;font-family:'Outfit';border:none;justify-content:center;text-align:center;flex-direction:column}
.nid-cc.hd .em{font-size:28px;margin-bottom:2px}
.nid-cc.lb{font-weight:700;color:#121F17;font-size:12px;background:#F9FAF7}
.nid-cc.win{background:#f0fdf4;font-weight:700;color:#2E8B57}
.nid-cc .mb{height:6px;border-radius:3px;margin-left:8px;flex:1;background:#f0f0f0;overflow:hidden}
.nid-cc .mf{height:100%;border-radius:3px}

/* ── RESPONSIVIDADE ──────────────────────────────────────────────────── */
@media(max-width:768px){
  .nid-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
  .nid-card{padding:10px}.nid-card .em{font-size:26px}
  .nid-cg.c3{grid-template-columns:80px 1fr 1fr 1fr}
  .nid-cc{padding:6px 8px;font-size:11px}
}

/* ============================================================
   DM-2 — fullscreen_css (tabs Consulta/Compare/Prontas)
   Mechanical copy from class-dicionario-module.php L176-181
   Added by DICIONARIO-CSS-B1 — inline DM-2 still present (redundancy)
   ============================================================ */
.page-id-780 .wp-block-post-title{display:none!important}
.nid-tabs{display:flex;gap:10px;justify-content:center;margin:18px auto 20px;max-width:380px}
.nid-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:12px;font-family:Outfit,sans-serif;font-weight:700;font-size:15px;cursor:pointer;transition:all .25s;border:2px solid #D8DED9;background:#fff;color:#677367;user-select:none}
.nid-tab:hover{border-color:#2E8B57;color:#2E8B57}
.nid-tab.on{background:#2E8B57;color:#fff;border-color:#2E8B57;box-shadow:0 4px 16px rgba(46,139,87,.3)}
@media(min-width:769px){.nid-tabs{max-width:420px;margin:22px auto 24px}.nid-tab{padding:14px 28px;font-size:16px;border-radius:14px}}

/* ============================================================
   .nid-header rules — DICIONARIO-CSS-C0
   Added to enable safe removal of DM-1 inline (DICIONARIO-C).
   Copied mechanically from class-dicionario-module.php DM-1 L23-L26.
   ============================================================ */
.nid-header{background:#121F17;padding:24px;text-align:center;border-radius:14px;margin-bottom:20px}
.nid-header .brand{color:#2E8B57;font-size:11px;font-weight:800;letter-spacing:2px}
.nid-header h2{color:#fff;font-size:24px;margin:6px 0 4px}
.nid-header p{color:#94a3b8;font-size:13px}

/* ============================================================
   DICIONARIO-D1: externaliza lacunas DM-3 (cards prontas + tabs mobile)
   Added to enable safe removal of DM-3 inline (future DICIONARIO-D).
   Copied mechanically from class-dicionario-module.php DM-3 (L281-L333).
   ============================================================ */
.nid-cpr-card {
    background: #fff;
    border: 1px solid #D8DED9;
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
    text-decoration: none;
    color: #121F17;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    transition: all 0.2s;
}
.nid-cpr-card:hover {
    border-color: #2E8B57;
    box-shadow: 0 4px 12px rgba(46,139,87,0.12);
    transform: translateY(-1px);
    text-decoration: none;
}
.nid-cpr-card .cpr-name {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 13px;
}
/* Fix 3 tabs on mobile */
.nid-tabs {
    max-width: 100% !important;
    gap: 8px !important;
    padding: 0 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: center !important;
}
.nid-tab {
    padding: 12px 16px !important;
    font-size: 14px !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
}
@media(max-width:480px) {
    .nid-tabs { gap: 6px !important; padding: 0 12px !important; }
    .nid-tab { padding: 11px 10px !important; font-size: 13px !important; }
}
.nid-cpr-card .cpr-vs {
    color: #E8913A;
    font-weight: 800;
    font-size: 11px;
}

/* ──────────────────────────────────────────────────────────────────────
 * MODAL-Z-FIX-1 — Modal Dicionário como padrão de referência
 * ──────────────────────────────────────────────────────────────────────
 * Garante que os modais full-screen do Dicionário renderizem POR CIMA
 * de qualquer elemento fixed do viewport e que esses elementos não
 * cubram conteúdo do modal enquanto ele estiver visível.
 *
 * Modais alvo:
 *   #nid-cm — Comparador (até 3 alimentos)
 *   #nid-fm — Detalhes do alimento (clique em card da aba Consulta)
 *
 * O JS `fixNidFull(ovId, mcId)` em class-dicionario-module.php injeta
 * inline `style.cssText` com `z-index:9999` no overlay. O !important
 * abaixo vence esse inline (regra do Cascade: declaração !important em
 * stylesheet > element.style sem !important).
 *
 * Cascata de z-index efetiva quando modal está .vis:
 *   .ni-sticky-banner (FPV)  ........ z  99980
 *   .nid-bar (compare bar)   ........ z 100000
 *   #nid-cm.vis / #nid-fm.vis ....... z 100001  ← garantido aqui
 *
 * Os elementos fixed que ocupam bottom do viewport são escondidos
 * (display:none) enquanto o modal está aberto, para que o conteúdo
 * inferior do modal (ex: row "Benefícios") não fique coberto.
 *
 * Padrão para futuros modais full-screen do plugin:
 *   1. overlay.vis com z-index ≥ 100001
 *   2. body:has(overlay.vis) → display:none em .ni-sticky-banner,
 *      #niStickyBanner e qualquer .*-bar fixed no bottom
 *
 * Compat :has(): Safari 15.4+, Chrome 105+, Firefox 121+ (≥95% global).
 * Fallback para browsers sem :has(): o item 1 sozinho ja garante que o
 * modal fica POR CIMA e usuario consegue scrollar via overflow-y:auto.
 * ─────────────────────────────────────────────────────────────────── */
#nid-cm.vis, #nid-fm.vis { z-index: 100001 !important; }

body:has(#nid-cm.vis) .nid-bar,
body:has(#nid-cm.vis) .ni-sticky-banner,
body:has(#nid-cm.vis) #niStickyBanner,
body:has(#nid-fm.vis) .nid-bar,
body:has(#nid-fm.vis) .ni-sticky-banner,
body:has(#nid-fm.vis) #niStickyBanner {
  display: none !important;
}