/* office.css — D48 Office view. EVERY rule is scoped to html.view-office (or
   the pre-paint html.view-office-pending): Phone mode renders exactly as before. */

html.view-office-pending .app > .screen{ visibility:hidden; }

/* View switch in the top bar (shown by office.js only with CONFIG.officeMode) */
.view-mode-wrap{ display:inline-flex; align-items:center; gap:6px; font-size:0.78rem; color:#fff; opacity:.92; margin-right:6px; }
.view-mode-wrap select{ font:inherit; font-size:0.78rem; padding:3px 6px; border-radius:6px; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.12); color:#fff; }
.view-mode-wrap select option{ color:#1c2a36; }

html.view-office{ --of-nav:212px; --of-bar:52px; --of-panel:min(46vw, 760px); --of-top:56px; }
html.view-office.office-nav-collapsed{ --of-nav:56px; }

/* phone screens: hidden on Office routes, shown (wider) on legacy routes */
html.view-office:not(.office-legacy) .app > .screen{ display:none !important; }
html.view-office.office-legacy #officeMain{ display:none; }
html.view-office .app > .screen.active{ margin-left:var(--of-nav); margin-top:var(--of-bar); }
html.view-office .app > .screen .main{ max-width:1440px; }
html.view-office .app > .screen .footer{ display:none; }

/* ---------- left nav ---------- */
html.view-office #officeNav{
  position:fixed; left:0; top:var(--of-top); bottom:0; width:var(--of-nav); z-index:45;
  background:#0b2f52; color:#dbe7f3; padding:10px 8px; box-sizing:border-box; overflow-y:auto;
  display:flex; flex-direction:column; gap:2px;
}
#officeNav, #officeTop, #officeMain, #officePanel{ display:none; }
html.view-office #officeNav, html.view-office #officeTop{ display:flex; }
html.view-office #officeMain{ display:block; }
.of-nav-collapse{ align-self:flex-end; background:transparent; border:0; color:#9fb7cf; font-size:1.2rem; cursor:pointer; padding:2px 8px; }
html.office-nav-collapsed .of-nav-collapse{ transform:rotate(180deg); align-self:center; }
.of-nav-link{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; color:#dbe7f3; text-decoration:none; font-size:0.9rem; white-space:nowrap; }
.of-nav-link:hover{ background:rgba(255,255,255,.08); }
.of-nav-link.on{ background:#1d6fb8; color:#fff; font-weight:600; }
.of-nav-dot{ width:8px; height:8px; border-radius:50%; background:currentColor; opacity:.55; flex:0 0 auto; }
html.office-nav-collapsed .of-nav-text{ display:none; }

/* ---------- top bar ---------- */
html.view-office #officeTop{
  position:fixed; top:var(--of-top); left:var(--of-nav); right:0; height:var(--of-bar); z-index:44;
  background:#fff; border-bottom:1px solid var(--border, #dbe4ee); box-sizing:border-box;
  align-items:center; gap:12px; padding:0 16px;
}
.of-search{ position:relative; flex:1 1 auto; max-width:720px; }
.of-search input{ width:100%; box-sizing:border-box; padding:8px 12px; font:inherit; font-size:0.9rem; border:1px solid var(--border, #dbe4ee); border-radius:8px; background:#f7f9fc; }
.of-search-drop{ display:none; position:absolute; top:calc(100% + 4px); left:0; right:0; background:#fff; border:1px solid var(--border, #dbe4ee); border-radius:10px; box-shadow:0 12px 30px rgba(13,59,102,.18); max-height:70vh; overflow:auto; z-index:60; padding:6px 0; }
.of-search-drop.open{ display:block; }
.of-drop-head{ font-size:0.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft, #4a5c6b); padding:6px 12px 2px; }
.of-drop-item{ display:block; padding:6px 12px; color:inherit; text-decoration:none; font-size:0.86rem; }
.of-drop-item:hover{ background:#eef4fb; }
.of-drop-empty{ padding:8px 12px; }
.of-market{ display:flex; gap:4px; }
.of-chip{ font:inherit; font-size:0.8rem; padding:5px 10px; border-radius:999px; border:1px solid var(--border, #dbe4ee); background:#fff; color:var(--ink, #1c2a36); cursor:pointer; }
.of-chip.on{ background:var(--navy, #0d3b66); color:#fff; border-color:var(--navy, #0d3b66); }
.of-new{ position:relative; margin-left:auto; }
.of-new-btn{ padding:7px 14px; }
.of-new-menu{ display:none; position:absolute; right:0; top:calc(100% + 4px); background:#fff; border:1px solid var(--border, #dbe4ee); border-radius:10px; box-shadow:0 12px 30px rgba(13,59,102,.18); min-width:190px; padding:6px; z-index:60; }
.of-new-menu.open{ display:block; }
.of-new-item{ display:block; width:100%; text-align:left; font:inherit; font-size:0.88rem; padding:8px 10px; border:0; background:transparent; border-radius:6px; cursor:pointer; }
.of-new-item:hover, .of-new-item:focus{ background:#eef4fb; outline:none; }

/* ---------- main ---------- */
html.view-office #officeMain{ margin-left:var(--of-nav); margin-top:var(--of-bar); padding:14px 18px 40px; box-sizing:border-box; min-height:calc(100vh - var(--of-top) - var(--of-bar)); font-size:0.88rem; }
html.view-office.office-panel-open #officeMain{ margin-right:var(--of-panel); }
.of-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.of-h1{ font-size:1.25rem; margin:0; color:var(--navy, #0d3b66); }
.of-asof{ color:var(--ink-soft, #4a5c6b); font-size:0.8rem; }
.of-refresh{ margin-left:auto; padding:5px 12px; font-size:0.82rem; }
.of-filters{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px; }
.of-filters input[type="search"], .of-filters input[type="date"], .of-filters select{ font:inherit; font-size:0.84rem; padding:5px 8px; border:1px solid var(--border, #dbe4ee); border-radius:7px; background:#fff; }
.of-filter-q{ min-width:260px; }
.of-check{ font-size:0.84rem; display:inline-flex; align-items:center; gap:4px; }
.of-filters .btn{ padding:5px 12px; font-size:0.82rem; }
.of-bulk{ margin-left:auto; }
.of-note-line{ color:var(--warn, #b8562f); font-size:0.8rem; margin-bottom:6px; }

/* KPI tiles */
.of-kpis{ display:grid; grid-template-columns:repeat(5, minmax(160px, 1fr)); gap:12px; }
.of-kpi{ display:block; background:#fff; border:1px solid var(--border, #dbe4ee); border-radius:12px; padding:14px 16px; text-decoration:none; color:inherit; }
.of-kpi:hover{ border-color:#1d6fb8; box-shadow:0 4px 16px rgba(13,59,102,.10); }
.of-kpi-label{ font-size:0.78rem; color:var(--ink-soft, #4a5c6b); text-transform:uppercase; letter-spacing:.04em; }
.of-kpi-value{ font-size:1.5rem; font-weight:700; color:var(--navy, #0d3b66); margin:4px 0 2px; }
.of-kpi-sub{ font-size:0.8rem; color:var(--ink-soft, #4a5c6b); }

/* dense tables (>= 25 rows at 1920x1080) */
.of-table-wrap{ background:#fff; border:1px solid var(--border, #dbe4ee); border-radius:10px; overflow:auto; }
.of-table{ width:100%; border-collapse:collapse; font-size:0.84rem; }
.of-table th{ position:sticky; top:0; background:#f4f7fb; text-align:left; font-weight:600; font-size:0.76rem; color:var(--ink-soft, #4a5c6b); padding:7px 8px; border-bottom:1px solid var(--border, #dbe4ee); white-space:nowrap; z-index:1; }
.of-table th.sortable{ cursor:pointer; user-select:none; }
.of-table th.asc::after{ content:" ▲"; font-size:0.65rem; }
.of-table th.desc::after{ content:" ▼"; font-size:0.65rem; }
.of-table td{ padding:5px 8px; border-bottom:1px solid #edf1f6; vertical-align:middle; white-space:nowrap; max-width:280px; overflow:hidden; text-overflow:ellipsis; line-height:1.25; }
.of-table td.name div{ overflow:hidden; text-overflow:ellipsis; }
.of-table td.site{ max-width:240px; }
.of-table tbody tr{ cursor:pointer; }
.of-table tbody tr:hover{ background:#f3f8fe; }
.of-table tbody tr.sel{ background:#e3eefb; }
.of-table .num{ text-align:right; font-variant-numeric:tabular-nums; }
.of-table.compact td{ padding:4px 6px; }
.of-strong{ font-weight:600; }
.of-dim{ color:var(--ink-soft, #4a5c6b); }
.of-red{ color:#b42318; font-weight:600; }
.of-badge{ display:inline-block; font-size:0.68rem; padding:1px 6px; border-radius:999px; margin-right:3px; border:1px solid; }
.of-badge.card{ color:#05603a; border-color:#abefc6; background:#ecfdf3; }
.of-badge.auto{ color:#1d3a7a; border-color:#c7d7fe; background:#eff4ff; }
.of-badge.exempt{ color:#93370d; border-color:#fedf89; background:#fffaeb; }
.of-status{ font-size:0.72rem; padding:1px 7px; border-radius:999px; background:#eef2f6; text-transform:capitalize; }
.of-status.paid{ background:#ecfdf3; color:#05603a; }
.of-status.overdue{ background:#fef3f2; color:#b42318; }
.of-status.sent{ background:#fff8e6; color:#8a5a00; }
.of-status.partially_paid{ background:#eff4ff; color:#1d3a7a; }
.of-status.draft{ background:#f2f4f7; color:#475467; }
.of-mkt{ font-size:0.68rem; color:var(--ink-soft, #4a5c6b); }
.of-row-icons{ position:relative; text-align:right; overflow:visible !important; }
.of-icon{ font:inherit; font-size:0.85rem; width:26px; height:24px; border:1px solid var(--border, #dbe4ee); border-radius:6px; background:#fff; cursor:pointer; margin-left:3px; padding:0; }
.of-icon:hover{ background:#eef4fb; }
.of-icon:disabled{ opacity:.4; cursor:not-allowed; }
.of-more-menu{ position:absolute; right:0; top:100%; background:#fff; border:1px solid var(--border, #dbe4ee); border-radius:8px; box-shadow:0 10px 24px rgba(13,59,102,.16); z-index:20; padding:4px; min-width:180px; text-align:left; }
.of-more-menu button{ display:block; width:100%; text-align:left; font:inherit; font-size:0.84rem; padding:6px 8px; border:0; background:transparent; border-radius:5px; cursor:pointer; }
.of-more-menu button:hover{ background:#eef4fb; }
.of-more-menu button:disabled{ opacity:.45; cursor:not-allowed; }

/* ---------- right side panel (split view) ---------- */
html.view-office.office-panel-open #officePanel{
  display:block; position:fixed; right:0; top:calc(var(--of-top) + var(--of-bar)); bottom:0; width:var(--of-panel); z-index:43;
  background:#fff; border-left:1px solid var(--border, #dbe4ee); box-shadow:-8px 0 24px rgba(13,59,102,.08);
  overflow-y:auto; padding:14px 18px 40px; box-sizing:border-box; font-size:0.88rem;
}
.of-p-close{ position:absolute; right:10px; top:8px; border:0; background:transparent; font-size:1.5rem; line-height:1; cursor:pointer; color:var(--ink-soft, #4a5c6b); }
.of-p-head{ margin-bottom:10px; padding-right:30px; }
.of-p-title{ font-size:1.15rem; font-weight:700; color:var(--navy, #0d3b66); }
.of-p-stats{ display:grid; grid-template-columns:repeat(5, 1fr); gap:8px; margin:8px 0 12px; }
.of-p-stat{ background:#f7f9fc; border:1px solid var(--border, #dbe4ee); border-radius:8px; padding:7px 9px; }
.of-p-stat.red .of-p-stat-v{ color:#b42318; }
.of-p-stat-l{ font-size:0.7rem; color:var(--ink-soft, #4a5c6b); text-transform:uppercase; letter-spacing:.04em; }
.of-p-stat-v{ font-weight:700; margin-top:2px; }
.of-p-actions{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; position:relative; }
.of-p-actions .btn{ padding:5px 12px; font-size:0.82rem; }
.of-p-sec{ border:1px solid var(--border, #dbe4ee); border-radius:10px; margin-bottom:8px; }
.of-p-sec > summary{ cursor:pointer; padding:8px 12px; font-weight:600; color:var(--navy, #0d3b66); }
.of-p-sec-body{ padding:4px 12px 12px; }
.of-p-block{ margin-bottom:10px; }
.of-p-sub{ font-size:0.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft, #4a5c6b); margin-bottom:3px; }
.of-note{ border-bottom:1px solid #edf1f6; padding:6px 0; white-space:pre-wrap; }

/* filters sit on one line (the dashboard's global input/select rules are full-width) */
html.view-office .of-filters input, html.view-office .of-filters select{ width:auto; margin:0; min-height:0; }
html.view-office .of-filters .of-filter-q{ width:280px; }
html.view-office .of-filters input[type="checkbox"]{ width:auto; }
html.view-office .of-table input[type="checkbox"]{ width:auto; margin:0; }
/* split view: drop the widest secondary columns so status + icons stay visible */
html.view-office.office-panel-open .of-table .col-site,
html.view-office.office-panel-open .of-table .col-sent,
html.view-office.office-panel-open .of-table .col-email{ display:none; }

/* the View switch is for desktops / tablets: on phone widths it would push the
   avatar out of the top bar, and Office is pointless there */
@media (max-width:639px){ .view-mode-wrap{ display:none !important; } }
/* denser rows: >= 25 rows visible at 1920x1080 */
html.view-office .of-table td{ padding:3px 8px; }
html.view-office .of-icon{ height:22px; width:24px; }
html.view-office .of-table td.sel input, html.view-office .of-table th input{ height:14px; }
/* D59: the shared invoice menu inside Office's row "More" dropdown and the invoice panel */
.of-more-menu .of-more-shared{ display:flex; flex-direction:column; align-items:stretch; margin:0; }
.of-more-menu .of-more-shared .btn{ margin:0 !important; text-align:left; border:0; border-radius:0; background:transparent; padding:7px 12px; font-size:0.85rem; }
.of-more-menu .of-more-shared .btn:hover{ background:var(--panel, #eef2f6); }
.of-p-actions .pay-row-actions{ display:flex; flex-wrap:wrap; gap:6px; margin:0; }
.of-p-actions .pay-row-actions .btn{ margin:0 !important; padding:6px 10px; font-size:0.82rem; }
/* D68: the manual link at the bottom of the Office nav */
.of-nav-manual{ margin-top:18px; opacity:.85; }

/* ===================== D72 step 1: the ServiceCore shell in the BRAND palette =====================
   (owner 2026-10-10: "que se vea exactamente ServiceCore, casi, pero con nuestros colores … sin las cosas que no
   usamos"). Office only — Phone keeps the navy look. Brand Blue #0072FF, Go Green #52CC30 (ONE primary button per
   screen), Deep Blue #0051B3 sidebar, Ink #0F172A text, Mist #F7F8F9 stripes; Montserrat for headings, system font
   for the dense tables. */
html.view-office{ --b-blue:#0072FF; --b-green:#52CC30; --b-deep:#0051B3; --b-ink:#0F172A; --b-mist:#F7F8F9; --b-line:#E3E8EE; --b-red:#C0392B; }
html.view-office body{ color:var(--b-ink); }
html.view-office .topbar{ background:var(--b-deep); }
html.view-office #officeNav{ background:var(--b-deep); color:#fff; }
html.view-office .of-nav-link{ color:#fff; font-weight:600; }
html.view-office .of-nav-link:hover{ background:rgba(255,255,255,.12); }
html.view-office .of-nav-link.on{ background:var(--b-blue); color:#fff; }
html.view-office .of-nav-ico{ width:18px; height:18px; flex:0 0 18px; color:#fff; opacity:.95; }
html.view-office .of-nav-collapse{ color:#cfe0ff; }
html.view-office .of-h1, html.view-office .of-p-title, html.view-office .of-kpi-value{ font-family:Montserrat, Arial, Helvetica, sans-serif; font-weight:800; color:var(--b-ink); }
html.view-office .of-h1{ font-size:1.35rem; }
html.view-office .of-table{ font-family:-apple-system, "Segoe UI", Roboto, Arial, sans-serif; color:var(--b-ink); }
html.view-office .of-table th{ background:#fff; color:#5B6B7F; border-bottom:2px solid var(--b-line); text-transform:uppercase; letter-spacing:.03em; }
html.view-office .of-table tbody tr:nth-child(even){ background:var(--b-mist); }
html.view-office .of-table tbody tr:hover{ background:#EAF3FF; }
html.view-office .of-table tbody tr.sel{ background:#DCEBFF; }
/* status chips: draft grey, sent blue, paid green, overdue red */
html.view-office .of-status{ font-weight:700; }
html.view-office .of-status.draft{ background:#EEF1F4; color:#4B5563; }
html.view-office .of-status.sent, html.view-office .of-status.partially_paid{ background:#E6F0FF; color:var(--b-deep); }
html.view-office .of-status.paid{ background:#E9F8E3; color:#2F7A1A; }
html.view-office .of-status.overdue{ background:#FBEAE8; color:var(--b-red); }
html.view-office .of-red{ color:var(--b-red); }
/* buttons: the one primary (+ New) is Go Green; the rest are Brand Blue outline */
html.view-office .of-new-btn{ background:var(--b-green) !important; border-color:var(--b-green) !important; color:#fff !important; font-weight:800; }
html.view-office #officeMain .btn-secondary, html.view-office #officePanel .btn-secondary, html.view-office .of-refresh{ background:#fff; color:var(--b-blue); border:1.5px solid var(--b-blue); }
html.view-office #officeMain .btn-secondary:hover, html.view-office #officePanel .btn-secondary:hover{ background:#EAF3FF; }
html.view-office .of-chip.on{ background:var(--b-blue); border-color:var(--b-blue); }
html.view-office .of-kpi:hover{ border-color:var(--b-blue); }
html.view-office .of-badge.card{ color:#2F7A1A; border-color:#BFE6B0; background:#F1FBEC; }
html.view-office .of-badge.auto{ color:var(--b-deep); border-color:#BFD6FF; background:#EEF5FF; }
/* the record panel: tabs (ServiceCore's customer page), not stacked sections */
html.view-office .of-tabs{ display:flex; gap:2px; border-bottom:2px solid var(--b-line); margin:4px 0 10px; flex-wrap:wrap; }
html.view-office .of-tab{ font:inherit; font-size:0.86rem; font-weight:700; padding:8px 12px; border:0; background:transparent; color:#5B6B7F; cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; }
html.view-office .of-tab.on{ color:var(--b-blue); border-bottom-color:var(--b-blue); }
html.view-office .of-tab:hover{ color:var(--b-ink); }
html.view-office .of-tab-pane{ display:none; }
html.view-office .of-tab-pane.on{ display:block; }
html.view-office .of-p-stat{ background:var(--b-mist); border-color:var(--b-line); }
/* D72 step 2: Invoices — summary tiles, the invoice record panel, ONE green per screen */
html.view-office .of-inv-tiles{ display:flex; flex-wrap:wrap; gap:8px; margin-left:auto; }
html.view-office .of-inv-tile{ font:inherit; text-align:left; cursor:pointer; display:flex; align-items:baseline; gap:6px; padding:5px 10px; border-radius:8px; }
html.view-office .of-inv-tile .of-kpi-label{ font-size:0.7rem; }
html.view-office .of-inv-tile .of-kpi-value{ font-size:1.05rem; margin:0; }
html.view-office .of-inv-tile .of-kpi-sub{ font-size:0.74rem; }
html.view-office .of-inv-tile.on{ border-color:var(--b-blue); box-shadow:inset 0 0 0 1.5px var(--b-blue); }
html.view-office .of-inv-tile.warn .of-kpi-value{ color:var(--b-red); }
html.view-office .of-kv{ display:flex; justify-content:space-between; gap:12px; padding:3px 0; border-bottom:1px dashed var(--b-line); font-size:0.88rem; }
html.view-office .of-kv-k{ color:#5B6B7F; }
html.view-office .of-terms{ white-space:pre-wrap; background:var(--b-mist); border:1px solid var(--b-line); border-radius:8px; padding:10px 12px; font-size:0.86rem; }
/* the only Go Green is the top bar's + New: every other filled button in Office is Brand Blue */
html.view-office #officeMain .btn:not(.btn-secondary), html.view-office #officePanel .btn:not(.btn-secondary){ background:var(--b-blue); color:#fff; border-color:var(--b-blue); }