/* ════════════════════════════════════════════════════════════════
   INFORME DIFERENCIAL MENSUAL · Administració desktop
   Clean financial-dashboard look. Brand tokens from colors_and_type.css
   ═══════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bp-grey-50); }
.if-display { font-family: var(--bp-font-display); }

.if-page { min-height: 100vh; background: radial-gradient(120% 120% at 50% 0%, #F1EEE8 0%, #E7E3DB 100%); padding: 24px; display: flex; justify-content: center; }
.if-shell { width: 100%; max-width: 1560px; background: var(--bp-white); border: 1px solid #E0DCD4; border-radius: 12px;
  box-shadow: 0 24px 48px -16px rgba(20,14,6,0.22), 0 2px 6px rgba(20,14,6,0.06); position: relative; overflow: hidden; }

/* topbar */
.if-top { background: var(--bp-red); color: #fff; display: flex; align-items: center; gap: 24px; padding: 13px 24px; }
.if-top .brand { font-family: var(--bp-font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.if-top nav { display: flex; gap: 22px; flex: 1; }
.if-top nav a { font-family: var(--bp-font-display); font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(255,255,255,0.85); text-decoration: none; cursor: pointer; position: relative; }
.if-top nav a.on { color: #fff; }
.if-top nav a.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -17px; height: 2px; background: #fff; }
.if-top .who { font-family: var(--bp-font-display); font-weight: 700; font-size: 12px; }

/* header */
.if-head { padding: 22px 26px 18px; border-bottom: 1px solid var(--bp-grey-100); display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.if-hero { display: flex; align-items: stretch; gap: 0; border-bottom: 1px solid var(--bp-grey-100); }
.if-hero-main { flex: 1; padding: 28px 30px; display: flex; flex-direction: column; justify-content: center; }
.if-hero-main .if-monthsel { margin-top: 2px; }
.if-modeseg { display: inline-flex; border: 1.5px solid var(--bp-grey-200); border-radius: var(--bp-radius-pill); overflow: hidden; margin: 2px 0 10px; align-self: flex-start; }
.if-modeseg button { cursor: pointer; border: none; background: #fff; color: var(--bp-grey-700); font-family: var(--bp-font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.03em; padding: 6px 16px; transition: background 120ms; }
.if-modeseg button.on { background: var(--bp-ink); color: #fff; }
.if-rangerow { display: flex; align-items: center; gap: 12px; }
.if-monthsel.sm { font-size: 21px; padding-right: 28px; }
.if-rangearrow { font-family: var(--bp-font-display); font-weight: 700; font-size: 22px; color: var(--bp-grey-300); }
.if-hero-sub { font-family: var(--bp-font-body); font-size: 13px; color: var(--bp-grey-700); margin-top: 10px; }
.if-hero-sub b { font-family: var(--bp-font-display); color: var(--bp-ink); }
/* dark control panel */
.if-hero-side { width: 336px; flex-shrink: 0; background: var(--bp-ink); color: #fff; padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; justify-content: center; position: relative; }
.if-hero-side::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--bp-red); }
.if-scn-label { font-family: var(--bp-font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); display: flex; align-items: center; gap: 6px; }
.if-scn-label svg { width: 12px; height: 12px; color: #fff; opacity: 0.7; }
.if-scnsel { appearance: none; cursor: pointer; width: 100%; font-family: var(--bp-font-display); font-weight: 700; font-size: 13.5px; color: #fff; background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.28); border-radius: 7px; padding: 11px 32px 11px 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.if-scnsel option { color: var(--bp-ink); background: #fff; }
.if-btn.block { width: 100%; justify-content: center; }
.if-hero-side .if-btn.primary { background: var(--bp-red); border-color: var(--bp-red); color: #fff; padding: 13px 17px; }
.if-hero-side .if-btn.primary:hover { filter: brightness(1.08); background: var(--bp-red); }
.if-eyebrow { font-family: var(--bp-font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bp-red); margin-bottom: 4px; }
.if-monthsel { appearance: none; cursor: pointer; font-family: var(--bp-font-display); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; color: var(--bp-ink); border: none; background: transparent; padding: 2px 32px 2px 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231D1D1B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; }
.if-head-actions { margin-left: auto; display: flex; gap: 10px; }

/* buttons */
.if-btn { font-family: var(--bp-font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; padding: 11px 17px; border-radius: var(--bp-radius-pill); border: 1.5px solid var(--bp-ink); background: #fff; color: var(--bp-ink); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.if-btn:hover { background: var(--bp-ink); color: #fff; }
.if-btn svg { width: 15px; height: 15px; }
.if-btn.primary { background: var(--bp-ink); border-color: var(--bp-ink); color: #fff; }
.if-btn.primary:hover { background: #000; }
.if-btn.compare.on { background: #FFF2E0; border-color: #E89F00; color: #8A4A00; }
.if-btn:disabled { opacity: 0.6; cursor: progress; }
.if-spin { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: ifspin 0.6s linear infinite; }
@keyframes ifspin { to { transform: rotate(360deg); } }

/* summary cards */
.if-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; padding: 20px 26px; background: #FBFAF7; border-bottom: 1px solid var(--bp-grey-100); }
.if-card { background: #fff; padding: 16px 18px 17px; border: 1px solid var(--bp-grey-100); border-radius: 10px; position: relative; overflow: hidden; box-shadow: 0 1px 3px rgba(20,14,6,0.05); }
.if-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--bp-grey-200); }
.if-card .k { font-family: var(--bp-font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--bp-grey-500); }
.if-card .v { font-family: var(--bp-font-display); font-weight: 700; font-size: 31px; letter-spacing: -0.025em; color: var(--bp-ink); margin-top: 10px; line-height: 1; }
.if-card .v small { font-size: 15px; color: var(--bp-grey-500); font-weight: 700; }
.if-card .delta { display: inline-flex; align-items: center; gap: 3px; font-family: var(--bp-font-display); font-weight: 700; font-size: 11px; margin-top: 9px; }
.if-card .delta.up { color: #0E6B2E; } .if-card .delta.down { color: var(--bp-red); }
.if-card .delta svg { width: 12px; height: 12px; }
.if-card.up::before { background: #2E9E5B; } .if-card.down::before { background: var(--bp-red); }
/* hero stat card: Import total, filled ink */
.if-card.accent { background: var(--bp-ink); border-color: var(--bp-ink); box-shadow: 0 10px 24px -8px rgba(20,14,6,0.4); }
.if-card.accent::before { background: var(--bp-red); }
.if-card.accent .k { color: rgba(255,255,255,0.6); }
.if-card.accent .v { color: #fff; font-size: 28px; }
.if-card.accent .v small { color: rgba(255,255,255,0.6); }
.if-card.accent .delta.up { color: #6FDB96; }

/* secondary metrics strip */
.if-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 0 26px 20px; background: #FBFAF7; border-bottom: 1px solid var(--bp-grey-100); }
.if-metric { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--bp-grey-100); border-radius: 9px; padding: 12px 15px; }
.if-metric .mic { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--bp-cream); color: var(--bp-grey-700); }
.if-metric .mic svg { width: 17px; height: 17px; }
.if-metric .mic.up { background: #E6F4EA; color: #0E6B2E; } .if-metric .mic.amber { background: #FBF0DC; color: #B07400; } .if-metric .mic.blue { background: #E2EEF6; color: #0F62A5; }
.if-metric .mv { font-family: var(--bp-font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--bp-ink); line-height: 1; }
.if-metric .mv.up { color: #0E6B2E; } .if-metric .mv.down { color: var(--bp-red); } .if-metric .mv.amber { color: #B07400; }
.if-metric .mk { font-family: var(--bp-font-body); font-size: 11px; color: var(--bp-grey-700); line-height: 1.25; margin-top: 3px; }

/* view toggle (segmented) */
.if-seg { display: inline-flex; border: 1.5px solid var(--bp-grey-200); border-radius: var(--bp-radius-pill); overflow: hidden; }
.if-seg button { cursor: pointer; border: none; background: #fff; color: var(--bp-grey-700); font-family: var(--bp-font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.02em; padding: 8px 14px; }
.if-seg button.on { background: var(--bp-ink); color: #fff; }

/* main area */
.if-body { display: grid; grid-template-columns: 1fr 268px; }
.if-main { padding: 20px 26px 36px; min-width: 0; }
.if-rail { border-left: 1px solid var(--bp-grey-100); background: #FAFAF7; padding: 22px 20px; }

.if-tbl-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.if-tbl-head .n { font-family: var(--bp-font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--bp-ink); }
.if-tbl-head .c { font-family: var(--bp-font-display); font-weight: 700; font-size: 12px; color: var(--bp-grey-500); }
.if-tbl-hint { font-family: var(--bp-font-body); font-size: 12px; color: var(--bp-grey-700); margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.if-tbl-hint svg { width: 13px; height: 13px; color: var(--bp-red); }

/* table — single horizontal scrollbar only; page handles vertical */
.if-tbl-wrap { border: 1px solid var(--bp-grey-100); overflow-x: auto; overflow-y: visible; }
.if-tbl { width: 100%; border-collapse: collapse; min-width: 1180px; }
.if-tbl thead th { position: sticky; top: 0; z-index: 2; background: var(--bp-cream); text-align: left; cursor: pointer; user-select: none;
  font-family: var(--bp-font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--bp-grey-700); padding: 12px 16px; border-bottom: 1px solid var(--bp-grey-100); white-space: nowrap; }
.if-tbl thead th.r { text-align: right; }
.if-tbl thead th.on { color: var(--bp-ink); }
.if-tbl thead th .caret { margin-left: 5px; font-size: 8px; color: var(--bp-red); }
.if-tbl tbody tr { cursor: pointer; border-bottom: 1px solid var(--bp-grey-50); }
.if-tbl tbody tr:hover { background: var(--bp-cream); }
.if-tbl tbody tr.exception { background: #FFFBF2; }
.if-tbl tbody tr.exception:hover { background: #FFF6E6; }
.if-tbl tbody tr.discrepancy { background: #FFF8EC; }
.if-tbl tbody tr.discrepancy:hover { background: #FFF2DD; }
.if-tbl td { padding: 13px 16px; font-family: var(--bp-font-body); font-size: 13px; color: var(--bp-ink); vertical-align: middle; }
.if-tbl td.r { text-align: right; }
.if-tbl td.mono { font-family: var(--bp-font-mono); font-size: 12.5px; }
.if-name { font-family: var(--bp-font-display); font-weight: 700; font-size: 13.5px; color: var(--bp-ink); display: flex; align-items: center; gap: 8px; }
.if-name .note-ico { color: #8A4A00; display: inline-flex; position: relative; }
.if-name .note-ico svg { width: 15px; height: 15px; }
.if-code { font-family: var(--bp-font-mono); font-size: 11.5px; color: var(--bp-grey-700); white-space: nowrap; }
.if-catcell { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.if-catcell .cdot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.if-catcell .cl { font-family: var(--bp-font-body); font-size: 12.5px; color: var(--bp-grey-700); }
.if-sessions { font-family: var(--bp-font-mono); font-size: 12.5px; cursor: help; border-bottom: 1px dotted var(--bp-grey-300); }
.if-sessions .nb { font-family: var(--bp-font-display); font-weight: 700; color: var(--bp-ink); }
.if-sessions .np { color: var(--bp-grey-500); }
.if-unit { font-family: var(--bp-font-mono); font-size: 12.5px; color: var(--bp-ink); white-space: nowrap; }
.if-unit .parts { font-family: var(--bp-font-display); font-weight: 700; font-size: 10px; color: #1E7A3D; background: #E2F2E8; padding: 1px 5px; border-radius: 3px; margin-left: 6px; }
.if-unit .wbase { color: var(--bp-grey-500); text-decoration: line-through; font-size: 10.5px; margin-left: 5px; }
.if-delta { font-family: var(--bp-font-display); font-weight: 700; font-size: 13px; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; justify-content: flex-end; }
.if-delta.up { color: #0E6B2E; } .if-delta.down { color: var(--bp-red); } .if-delta.flat { color: var(--bp-grey-400); }
.if-delta svg { width: 13px; height: 13px; }

/* category group + subtotal rows */
.if-cat-row td { background: #F4F2EE; padding: 9px 16px; border-top: 2px solid var(--bp-grey-200); border-bottom: 1px solid var(--bp-grey-100); }
.if-cat-row .gh { display: inline-flex; align-items: center; gap: 9px; font-family: var(--bp-font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bp-ink); }
.if-cat-row .gh .cdot { width: 11px; height: 11px; border-radius: 50%; }
.if-cat-row .gh .gc { color: var(--bp-grey-500); font-size: 10px; letter-spacing: 0.06em; }
.if-subtotal td { background: #FBFAF7; padding: 10px 16px; border-bottom: 2px solid var(--bp-grey-200); font-family: var(--bp-font-display); font-weight: 700; font-size: 12px; color: var(--bp-grey-700); }
.if-subtotal td.r { text-align: right; }
.if-subtotal .sv { color: var(--bp-ink); font-size: 13px; }
.if-subtotal .slabel { letter-spacing: 0.04em; text-transform: uppercase; font-size: 10.5px; color: var(--bp-grey-500); }
.if-sub { font-family: var(--bp-font-body); font-size: 11.5px; color: var(--bp-grey-500); margin-top: 2px; }
.if-amount { font-family: var(--bp-font-display); font-weight: 700; font-size: 14px; color: var(--bp-ink); letter-spacing: -0.01em; }
.if-amount.zero { color: var(--bp-grey-500); }
.if-amount .strike { color: var(--bp-grey-500); text-decoration: line-through; font-size: 11px; font-weight: 400; margin-right: 6px; }

/* change-type badge */
.if-badge { font-family: var(--bp-font-display); font-weight: 700; font-size: 10px; letter-spacing: 0.03em; text-transform: uppercase; padding: 3px 9px; border-radius: 3px; display: inline-block; }
.if-badge.alta { background: #E6F4EA; color: #0E6B2E; }
.if-badge.baixa { background: #F6E2E1; color: #B5403C; }
.if-badge.canvi { background: #E2EEF6; color: #0F62A5; }
.if-badge.excepcio { background: #FFF2E0; color: #8A4A00; }
.if-tag { font-family: var(--bp-font-display); font-weight: 700; font-size: 9px; letter-spacing: 0.03em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; margin-left: 6px; white-space: nowrap; }
.if-tag.worker { background: #EDE4FB; color: #5E2DC6; }
.if-tag.recovered { background: #E2EEF6; color: #0F62A5; }
.if-tag.zero { background: var(--bp-grey-50); color: var(--bp-grey-700); border: 1px solid var(--bp-grey-200); }

/* tooltip */
.if-tip { position: fixed; z-index: 130; background: var(--bp-ink); color: #fff; padding: 8px 11px; max-width: 240px;
  font-family: var(--bp-font-body); font-size: 11.5px; line-height: 1.4; box-shadow: 0 8px 20px rgba(0,0,0,0.3); pointer-events: none; }

/* clickedu compare columns */
.if-cmp-col { display: none; }
.if-tbl.compare .if-cmp-col { display: table-cell; }
.if-cmp-cell { font-family: var(--bp-font-mono); font-size: 11.5px; white-space: nowrap; }
.if-cmp-cell .ar { color: var(--bp-grey-400); margin: 0 4px; }
.if-cmp-cell .df { font-family: var(--bp-font-display); font-weight: 700; color: #B85800; margin-left: 7px; }
.if-cmp-cell.ok { color: var(--bp-grey-300); }

/* discrepancy banner */
.if-cmp-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #FFF2E0; border: 1px solid #E89F00; margin-bottom: 14px; }
.if-cmp-banner.neutral { background: var(--bp-cream); border-color: #E6D9C4; }
.if-cmp-banner.neutral svg { color: var(--bp-red); }
.if-cmp-banner.neutral .t { color: #5A4A2E; }
.if-cmp-banner.neutral .t strong { color: var(--bp-ink); }
.if-cmp-banner svg { width: 18px; height: 18px; color: #8A4A00; flex-shrink: 0; }
.if-cmp-banner .t { flex: 1; font-family: var(--bp-font-display); font-weight: 700; font-size: 12.5px; color: #8A4A00; }
.if-cmp-banner .t strong { color: #5C3000; }
.if-cmp-banner button { background: none; border: none; cursor: pointer; color: #8A4A00; font-family: var(--bp-font-display); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }

/* empty state */
.if-empty { border: 1.5px dashed var(--bp-grey-200); background: #FAFAF7; padding: 54px 24px; text-align: center; }
.if-empty .ico { width: 46px; height: 46px; border-radius: 50%; background: var(--bp-cream); color: var(--bp-red); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.if-empty .t { font-family: var(--bp-font-display); font-weight: 700; font-size: 17px; color: var(--bp-ink); }
.if-empty .d { font-family: var(--bp-font-body); font-size: 13px; color: var(--bp-grey-700); margin-top: 5px; }

/* rail */
.if-rail-sec { margin-bottom: 24px; }
.if-rail-h { font-family: var(--bp-font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bp-grey-700); margin-bottom: 12px; }
.if-rule { background: #fff; border: 1px solid var(--bp-grey-100); padding: 14px; }
.if-rule .lead { font-family: var(--bp-font-body); font-size: 12px; color: var(--bp-grey-700); line-height: 1.45; margin-bottom: 12px; }
.if-rule .lead b { font-family: var(--bp-font-display); color: var(--bp-ink); }
.if-bill-group { margin-bottom: 12px; }
.if-bill-label { display: flex; align-items: center; gap: 6px; font-family: var(--bp-font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 7px; }
.if-bill-label.yes { color: #0E6B2E; } .if-bill-label.no { color: var(--bp-grey-500); }
.if-bill-label svg { width: 13px; height: 13px; }
.if-legend-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.if-legend-code { min-width: 32px; height: 21px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--bp-font-display); font-weight: 700; font-size: 10px; flex-shrink: 0; }
.if-legend-row .lt { font-family: var(--bp-font-body); font-size: 11.5px; color: var(--bp-grey-700); }

/* ── drawer ──────────────────────────────────────────────────────── */
.if-scrim { position: fixed; inset: 0; background: rgba(20,14,6,0.45); z-index: 100; }
.if-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 92vw; background: #fff; z-index: 101; box-shadow: -20px 0 60px rgba(0,0,0,0.25); display: flex; flex-direction: column; }
.if-drawer-head { padding: 22px 24px 16px; border-bottom: 1px solid var(--bp-grey-100); position: relative; }
.if-drawer-head .eb { font-family: var(--bp-font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bp-red); }
.if-drawer-head .ttl { font-family: var(--bp-font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; color: var(--bp-ink); margin-top: 4px; }
.if-drawer-head .sub { font-family: var(--bp-font-body); font-size: 12.5px; color: var(--bp-grey-700); margin-top: 5px; }
.if-drawer-close { position: absolute; top: 18px; right: 20px; background: none; border: none; cursor: pointer; color: var(--bp-grey-500); }
.if-drawer-close:hover { color: var(--bp-ink); }
.if-drawer-body { flex: 1; overflow-y: auto; padding: 20px 24px; }

.if-codegrid { display: flex; flex-direction: column; gap: 1px; background: var(--bp-grey-100); border: 1px solid var(--bp-grey-100); margin-top: 6px; }
.if-codegrid .gr-row { display: grid; grid-template-columns: 80px 1fr 70px; gap: 1px; background: var(--bp-grey-100); }
.if-codegrid .gr-cell { background: #fff; padding: 9px 12px; font-family: var(--bp-font-body); font-size: 12px; color: var(--bp-ink); display: flex; align-items: center; }
.if-codegrid .gr-head .gr-cell { background: var(--bp-cream); font-family: var(--bp-font-display); font-weight: 700; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bp-grey-700); }
.if-codegrid .gr-code { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 22px; padding: 0 6px; font-family: var(--bp-font-display); font-weight: 700; font-size: 10px; }
.if-codegrid .gr-bill { font-family: var(--bp-font-display); font-weight: 700; font-size: 11px; }
.if-codegrid .gr-bill.yes { color: #0E6B2E; } .if-codegrid .gr-bill.no { color: var(--bp-grey-500); }

.if-drawer-total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px; background: var(--bp-ink); color: #fff; margin-top: 14px; }
.if-drawer-total .k { font-family: var(--bp-font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.if-drawer-total .v { font-family: var(--bp-font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; }
.if-drawer-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-top: 14px; font-family: var(--bp-font-body); font-size: 12.5px; line-height: 1.45; }
.if-drawer-note.info { background: var(--bp-cream); border: 1px solid #E6D9C4; color: #5A4A2E; }
.if-drawer-note.warn { background: #FFF2E0; border: 1px solid #E89F00; color: #8A4A00; }
.if-drawer-note svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.if-drawer-note b { font-family: var(--bp-font-display); }

/* toast */
.if-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 120; background: var(--bp-ink); color: #fff; display: flex; align-items: flex-start; gap: 13px; padding: 14px 18px; box-shadow: 0 12px 30px rgba(0,0,0,0.3); max-width: 520px; }
.if-toast svg { width: 18px; height: 18px; color: #6FDB96; flex-shrink: 0; margin-top: 1px; }
.if-toast .msg { font-family: var(--bp-font-display); font-weight: 700; font-size: 13px; }
.if-toast .msg small { display: block; font-weight: 400; font-size: 11.5px; color: rgba(255,255,255,0.72); margin-top: 3px; font-family: var(--bp-font-body); line-height: 1.4; }