/* ============================================================================
   Admin panel styles. Reuses tokens/buttons from styles.css.
   ========================================================================== */
.admin-body { background: var(--off); min-height: 100vh; }

/* Hide the panel until the session check confirms an authenticated admin
   (prevents a flash of the shell before redirecting to login). */
.admin-body:not(.authed):not(.admin-login-body) .admin-main { display: none; }

.admin-header-actions { display: flex; align-items: center; gap: 10px; }

/* ---- Login page ---- */
.admin-login-body { display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: 36px 32px; width: min(400px, 100%); box-shadow: var(--shadow-md); text-align: center;
}
.login-logo { height: 40px; margin-bottom: 18px; }
.login-card h1 { font-size: 20px; color: var(--navy); margin-bottom: 6px; }
.login-sub { font-size: 14px; color: var(--muted); margin-bottom: 22px; }
.login-card form { text-align: left; }
.login-card label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.login-card .admin-input { width: 100%; margin-bottom: 14px; }
.login-card .btn-primary { width: 100%; justify-content: center; }
.login-back { display: inline-block; margin-top: 18px; font-size: 13px; color: var(--muted); text-decoration: none; }
.login-back:hover { color: var(--blue); }

/* Override the global `header { position: fixed }` from styles.css so the
   admin header stays in normal flow and doesn't cover the tabs below it. */
.admin-header { position: static; background: var(--navy); color: var(--white); }
.admin-header-inner {
  max-width: 1100px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

/* Ogloba balance widget: always visible in the header, on every tab. */
.ogloba-balance-widget {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px; padding: 7px 8px 7px 16px; font-size: 13px;
}
.obw-label { color: rgba(255,255,255,.65); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .03em; }
.obw-value { font-weight: 700; font-family: 'Plus Jakarta Sans', sans-serif; }
.obw-value.obw-error { color: #fca5a5; font-weight: 600; }
.obw-refresh {
  border: none; background: rgba(255,255,255,.12); color: var(--white); cursor: pointer;
  width: 26px; height: 26px; border-radius: 50%; font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.obw-refresh:hover { background: rgba(255,255,255,.25); }
.obw-refresh:disabled { opacity: .6; cursor: default; }
.admin-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--white); }
.admin-logo img { height: 34px; }
.admin-logo span { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 15px; }
.admin-header .btn-outline { color: var(--white); border-color: rgba(255,255,255,.35); }
.admin-header .btn-outline:hover { background: rgba(255,255,255,.1); border-color: var(--white); color: var(--white); }

.admin-main { max-width: 1400px; margin: 0 auto; padding: 28px 24px 80px; }

/* flex-wrap: with 12 admin tabs (and 4 on mi-cuenta.html, which shares this class) a
   nowrap row ran past the viewport and made the whole page scroll sideways
   below ~1370px wide / on phones. Wrap onto extra rows instead. */
.admin-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.admin-tab {
  padding: 9px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer;
  border: 1.5px solid var(--border); background: var(--white); color: var(--muted); font-family: inherit;
  transition: all .2s; white-space: nowrap;
}
.admin-tab.active { background: var(--grad); color: var(--white); border-color: transparent; }

.admin-panel { display: none; }
.admin-panel.active { display: block; }
.admin-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.admin-panel-head h2 { font-size: 22px; color: var(--navy); margin-bottom: 4px; }
.admin-sub { font-size: 13px; color: var(--muted); max-width: 560px; }

.admin-empty { text-align: center; color: var(--muted); padding: 40px 16px; font-size: 14px; }
.admin-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); }

/* ---- Orders ---- */
/* Detail gets most of the room — it carries items, totals, payment proof, the
   Ogloba status block (cards + returns), delivery files, and status buttons,
   all of which used to force a lot of vertical scrolling in a narrow column. */
.admin-orders-layout { display: grid; grid-template-columns: 0.85fr 1.6fr; gap: 20px; align-items: start; }
.admin-orders-list { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.order-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .15s;
}
.order-row:last-child { border-bottom: none; }
.order-row:hover { background: var(--off); }
.order-row.active { background: rgba(29,111,232,.06); }
.order-row-main { min-width: 0; }
.order-row-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 700; color: var(--navy); }
.order-row-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Status badge */
.status-badge {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  white-space: nowrap;
}
.status-payment_not_confirmed { background: rgba(220,38,38,.10); color: #dc2626; }
.status-payment_confirmed { background: rgba(29,111,232,.12); color: var(--blue); }
.status-partial_delivery { background: rgba(234,179,8,.15); color: #b45309; }
.status-full_delivery { background: rgba(34,197,94,.14); color: #16a34a; }
/* Redemption-only status (house_bono_redemptions.status) — a redemption is
   pre-paid, so this is its starting state, same "actively in hand" meaning
   as payment_confirmed above, hence the same color. */
.status-in_progress { background: rgba(29,111,232,.12); color: var(--blue); }

/* Order detail */
.admin-order-detail { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; position: sticky; top: 20px; }
.detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.detail-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 18px; font-weight: 800; color: var(--navy); }
.detail-date { font-size: 12px; color: var(--muted); margin-bottom: 18px; }
/* Scrolls after ~10 rows instead of stretching the page for large orders. */
.detail-items { margin-bottom: 18px; max-height: 620px; overflow-y: auto; }
.detail-item { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.detail-item-name { font-size: 14px; font-weight: 600; color: var(--navy); }
.detail-item-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.detail-item-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.detail-item-total { font-size: 14px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.detail-totals { display: flex; flex-direction: column; gap: 4px; padding: 6px 0 18px; }
.detail-total-row { display: flex; justify-content: space-between; }
.detail-total-row .label { font-size: 13px; color: var(--muted); }
.detail-total-row .value { font-size: 17px; font-weight: 800; color: var(--navy); font-family: 'Plus Jakarta Sans', sans-serif; }

.detail-status-block { border-top: 1px solid var(--border); padding-top: 18px; }
.detail-status-block h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 12px; }
.status-options { display: flex; flex-wrap: wrap; gap: 8px; }
.status-option {
  padding: 9px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1.5px solid var(--border); background: var(--white); color: var(--navy); font-family: inherit; transition: all .15s;
}
.status-option:hover { border-color: var(--blue); }
.status-option.current { background: var(--grad); color: var(--white); border-color: transparent; }
.status-option:disabled { opacity: .6; cursor: default; }

/* ---- Catalog / sync ---- */
.sync-result {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px 20px; margin-bottom: 20px; font-size: 14px; color: var(--navy);
}
.sync-result.error { border-color: #dc2626; color: #dc2626; }
.sync-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.sync-chip { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--off); color: var(--navy); }
.sync-chip b { color: var(--blue); }

.admin-products { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
/* Configuración's box holds raw form fields, not list rows (which carry
   their own internal padding) — without this the labels/inputs sit flush
   against the box edges and get clipped by overflow:hidden. */
#panel-settings .admin-products { padding: 20px 22px; overflow: visible; }
.admin-product-row { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.admin-product-row:last-child { border-bottom: none; }
.admin-product-row.is-off { background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(13,27,62,.02) 8px, rgba(13,27,62,.02) 16px); opacity: .72; }
.admin-product-logo { width: 40px; height: 40px; border-radius: 8px; background: var(--off); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.admin-product-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.admin-product-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--navy); }
.admin-product-detail { font-size: 12px; color: var(--muted); margin-top: 3px; word-break: break-word; }
.admin-product-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }

/* Source / category badges */
.src-badge { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.src-ogloba { background: rgba(29,111,232,.12); color: var(--blue); }
.src-local { background: rgba(139,92,246,.14); color: #7c3aed; }
.src-gone { background: rgba(220,38,38,.10); color: #dc2626; }
.cat-badge { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--off); color: var(--navy); }
.cat-badge.cat-none { color: var(--muted); font-style: italic; font-weight: 500; }

.admin-product-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.icon-btn { width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--white); color: var(--navy); cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.icon-btn:hover { border-color: var(--blue); color: var(--blue); }
.icon-btn.danger:hover { border-color: #dc2626; color: #dc2626; }

/* Toggle switch */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; cursor: pointer; inset: 0; background: var(--border); border-radius: 999px; transition: .2s; }
.switch .slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: var(--white); border-radius: 50%; transition: .2s; }
.switch input:checked + .slider { background: #16a34a; }
.switch input:checked + .slider::before { transform: translateX(18px); }

/* Catalog toolbar + inputs */
.admin-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.catalog-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.admin-input { padding: 9px 13px; border-radius: 9px; border: 1.5px solid var(--border); font-size: 14px; font-family: inherit; color: var(--text); background: var(--white); transition: border-color .2s; }
.admin-input:focus { outline: none; border-color: var(--blue); }
#catalog-search { flex: 1; min-width: 200px; }
.filter-bar { align-items: center; }
.filter-bar .fb-search { flex: 1; min-width: 200px; }
.filter-bar .fb-dates { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--muted); }
.filter-bar .fb-dates label { display: flex; align-items: center; gap: 6px; }
.filter-bar .fb-dates .admin-input { padding: 7px 10px; }
.filter-bar .fb-count { font-size: 13px; color: var(--muted); margin-left: auto; }

/* Product / brand / coverage form modal — wider than the plain confirm modal,
   and scrolls internally (sticky title + sticky footer) instead of stretching
   past the viewport on long forms (bono form: categories + marca + value
   fields + terms can add up to more than a screenful). */
/* Compound selector (.admin-modal.admin-modal-lg): .admin-modal alone also sets
   width/padding, and a single-class selector has the SAME specificity as this
   one used to have — whichever rule came later in the file would silently win.
   Compounding both classes here guarantees this always overrides, regardless
   of source order. */
.admin-modal.admin-modal-lg {
  width: min(760px, 94vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.admin-modal-lg > h3 {
  flex-shrink: 0; position: sticky; top: 0; z-index: 2;
  background: var(--white); margin: 0; padding: 26px 28px 14px;
  border-bottom: 1px solid var(--border);
}
.admin-modal-lg > .pf-body {
  overflow-y: auto; padding: 18px 28px; min-height: 0;
}
.admin-modal-lg > .admin-modal-err {
  flex-shrink: 0; margin: 0 28px;
}
.admin-modal-lg > .admin-modal-foot {
  flex-shrink: 0; position: sticky; bottom: 0; z-index: 2;
  background: var(--white); padding: 14px 28px 24px;
  border-top: 1px solid var(--border); margin-top: 4px;
}
.form-note { font-size: 12.5px; color: #b45309; background: rgba(234,179,8,.12); padding: 10px 12px; border-radius: 9px; margin-bottom: 16px; }
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.pf-field { display: flex; flex-direction: column; gap: 5px; }
.pf-field label { font-size: 12px; font-weight: 600; color: var(--muted); }
.pf-field .admin-input { width: 100%; }
.pf-value-block { border-top: 1px solid var(--border); padding-top: 14px; margin-bottom: 6px; }
.pf-check { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--navy); margin: 8px 0 14px; cursor: pointer; }
.pf-check input { width: 16px; height: 16px; }
@media (max-width: 700px) { .pf-grid { grid-template-columns: 1fr; } }

.pf-password-row { display: flex; gap: 8px; }
.pf-password-row .admin-input { flex: 1; }
.coverage-io {
  background: var(--white); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px 20px; margin-bottom: 22px;
}
.coverage-io h3 { margin: 0 0 6px; font-size: 16px; color: var(--navy); }
.coverage-io-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.coverage-io-actions input[type="file"] { font-size: 13px; }
.pf-cov-group { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px; }
.pf-cov-group-title { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.admin-product-row.selectable { cursor: pointer; }
.admin-product-row.selectable:hover { background: var(--off); }
.admin-product-row.selectable.active { background: rgba(29,111,232,.06); }
.client-detail-head { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.client-detail-head h3 { margin: 0 0 4px; font-size: 18px; color: var(--navy); }
.client-detail-head .admin-sub { margin: 0; }
.pf-checklist {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 4px 12px; margin-bottom: 14px;
}
.pf-checklist .pf-check { margin: 0; font-weight: 500; font-size: 13px; }
.support-upload-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.support-upload-row input[type="file"] { font-size: 13px; max-width: 100%; }

.spin { display: inline-block; animation: adminspin .8s linear infinite; }
@keyframes adminspin { to { transform: rotate(360deg); } }

/* ---- Detail: notice banner + status hint ---- */
.detail-notice { font-size: 13px; padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; }
.detail-notice.ok { background: rgba(34,197,94,.12); color: #16a34a; }
.detail-notice.warn { background: rgba(234,179,8,.15); color: #b45309; }
.status-hint { font-size: 12px; color: var(--muted); margin-top: 10px; }
.status-option.status-provider { border-color: var(--blue); color: var(--blue); }
.status-option.status-provider.current { background: var(--grad); color: var(--white); border-color: transparent; }
.btn-sm { padding: 7px 14px; font-size: 13px; }

/* ---- Ogloba status block ---- */
.ogloba-block { border-top: 1px solid var(--border); margin-top: 18px; padding-top: 16px; }
.ogloba-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.ogloba-head h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ogloba-empty { font-size: 13px; color: var(--muted); background: var(--off); padding: 12px 14px; border-radius: 10px; }

.provider-group { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.pg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pg-currency { font-size: 12px; font-weight: 800; color: var(--navy); background: var(--off); padding: 2px 8px; border-radius: 6px; }
.pg-orderno { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--muted); }
.ogloba-status-badge { margin-left: auto; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(29,111,232,.12); color: var(--blue); }
.ogloba-status-badge.ogs-042 { background: rgba(34,197,94,.14); color: #16a34a; }
.ogloba-status-badge.ogs-041, .ogloba-status-badge.ogs-043 { background: rgba(234,179,8,.15); color: #b45309; }

.pg-error { font-size: 12.5px; color: #dc2626; margin-top: 8px; }
/* Scrolls after ~10 cards instead of stretching the page for large orders. */
.pg-cards { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; }
.pg-cards-pending { font-size: 12px; color: var(--muted); margin-top: 8px; }
.pg-card { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; background: var(--off); padding: 8px 10px; border-radius: 8px; }
.pg-card-num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; color: var(--navy); }
.pg-card-pin { color: var(--muted); }
.pg-card-amt { font-weight: 700; color: var(--navy); }
.pg-card-links { margin-left: auto; display: flex; gap: 8px; }
.pg-card-links a { font-size: 12px; font-weight: 600; color: var(--blue); text-decoration: none; }
.pg-card-links a:hover { text-decoration: underline; }

/* Returns — part (or all) of a currency group wasn't deliverable and Ogloba
   refunded it to the merchant's balance instead. Kept visually distinct
   (amber, "money" framing) from the green "cards ready" status, and placed at
   the top of the provider group so it can't be missed while processing. */
.pg-return-block {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  background: rgba(234,179,8,.1); border: 1px solid rgba(234,179,8,.35);
}
.pg-return-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.pg-return-row + .pg-return-row { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(234,179,8,.4); }
.pg-return-icon { font-size: 14px; }
.pg-return-amount { font-weight: 800; color: #b45309; }
.pg-return-badge { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: rgba(234,179,8,.22); color: #92400e; }
.pg-return-badge.ret-06 { background: rgba(34,197,94,.16); color: #16a34a; }
.pg-return-badge.ret-02 { background: rgba(220,38,38,.12); color: #dc2626; }
.pg-return-meta { color: var(--muted); font-size: 12px; }

/* ---- Confirmation modal ---- */
.admin-modal-overlay {
  position: fixed; inset: 0; background: rgba(13,27,62,.55); z-index: 1200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; visibility: hidden; transition: opacity .2s;
}
.admin-modal-overlay.open { opacity: 1; visibility: visible; }
.admin-modal {
  background: var(--white); border-radius: var(--r-xl); width: min(460px, 100%);
  padding: 26px 28px; box-shadow: var(--shadow-md); transform: translateY(10px); transition: transform .2s;
}
.admin-modal-overlay.open .admin-modal { transform: translateY(0); }
.admin-modal h3 { font-size: 19px; color: var(--navy); margin-bottom: 12px; }
.admin-modal p { font-size: 14px; color: var(--text); line-height: 1.6; margin-bottom: 18px; }
.admin-modal-err { color: #dc2626; font-size: 13px; margin-bottom: 12px; }
.admin-modal-foot { display: flex; gap: 12px; }
.admin-modal-foot .btn { flex: 1; justify-content: center; }

@media (max-width: 800px) {
  .admin-orders-layout { grid-template-columns: 1fr; }
  .admin-order-detail { position: static; }
}

/* ---- Report dashboards (admin "Reportes" tab + client account summary) ---- */
.report-section { margin-bottom: 32px; }
.report-section h3 { font-size: 15px; color: var(--navy); margin-bottom: 4px; }
.report-section .admin-sub { margin-bottom: 16px; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-tile {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 18px 20px; box-shadow: var(--shadow);
}
.stat-tile .label { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.stat-tile .value { font-size: 23px; font-weight: 800; color: var(--navy); font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -.01em; }
.stat-tile .delta { font-size: 12px; margin-top: 6px; font-weight: 600; color: var(--muted); }
.stat-tile .delta.up { color: #16a34a; }
.stat-tile .delta.down { color: #dc2626; }

.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 16px; }
.chart-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 18px 20px 14px; box-shadow: var(--shadow);
}
.chart-card h4 { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 2px; }
.chart-card .sub { font-size: 12px; color: var(--muted); margin: 2px 0 12px; }
.chart-card svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 11.5px; color: var(--text); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

.viz-tooltip {
  position: fixed; pointer-events: none; z-index: 60; opacity: 0; transform: translateY(2px);
  background: var(--navy); color: var(--white); font-size: 11.5px; font-weight: 600;
  padding: 6px 9px; border-radius: 7px; white-space: nowrap; transition: opacity .1s;
}
.viz-tooltip.show { opacity: 1; }

/* New-request form + delete */
.of-line { display: grid; grid-template-columns: 1.4fr 1.4fr 70px 110px 70px 36px; gap: 8px; margin-bottom: 8px; align-items: center; }
.of-line .admin-input { width: 100%; min-width: 0; }
.of-lines-head { margin: 4px 0 8px; }
.of-totals { margin-top: 14px; display: grid; gap: 6px; }
.of-total-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; padding: 8px 10px; background: var(--off); border-radius: 8px; }
@media (max-width: 700px) { .of-line { grid-template-columns: 1fr 1fr; } .of-line .of-prod, .of-line .of-name { grid-column: 1 / -1; } }
.detail-danger { margin-top: 22px; padding-top: 14px; border-top: 1px dashed var(--border); }
.danger-btn { color: #b91c1c; border-color: #fecaca; }
.danger-btn:hover { background: #fee2e2; }

/* Bono form: image preview + single-choice pill switches */
.pf-image-preview { display: block; max-height: 90px; max-width: 160px; border-radius: 8px; margin-bottom: 8px; border: 1px solid var(--border); object-fit: contain; }
.pf-seg { display: inline-flex; border: 1.5px solid var(--border); border-radius: 9px; overflow: hidden; }
.pf-seg label { cursor: pointer; margin: 0; }
.pf-seg input { position: absolute; opacity: 0; pointer-events: none; }
.pf-seg span { display: block; padding: 8px 14px; font-size: 14px; background: var(--white); color: var(--text); }
.pf-seg input:checked + span { background: var(--blue); color: #fff; }
.pf-seg input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: -2px; }