/* CuentaClara visual system — electric blue, ink navy and a warm paper canvas. */
:root {
  --ink: #171a2f;
  --ink-2: #272d4a;
  --muted: #737992;
  --line: #e3e6f0;
  --paper: #ffffff;
  --canvas: #faf8f4;
  --blue: #4f5bff;
  --blue-dark: #3542df;
  --blue-wash: #e9ecff;
  --yellow: #f5c451;
  --green: #2b9a71;
  --red: #c96569;
  --shadow: 0 24px 65px rgba(23, 26, 47, .11);
  --radius: 18px;
}
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=DM+Sans:wght@400;500;600;700&display=swap');
html { background: var(--canvas); }
body { background: radial-gradient(circle at 90% -10%, rgba(79,91,255,.12), transparent 26rem), radial-gradient(circle at 15% 105%, rgba(245,196,81,.10), transparent 25rem), var(--canvas); color: var(--ink); font-family:'DM Sans',sans-serif; letter-spacing:-.012em; }
body:before { content:''; position:fixed; inset:0; pointer-events:none; opacity:.24; background-image:radial-gradient(#a6acc1 .6px, transparent .6px); background-size:15px 15px; mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 64%); }
.sidebar { width:274px; padding:28px 16px 20px; background:linear-gradient(155deg,#171a2f 0%,#1b2140 58%,#232a50 100%); box-shadow:16px 0 42px rgba(23,26,47,.16); overflow:hidden; }
.sidebar:after { content:''; position:absolute; width:250px; height:250px; right:-145px; bottom:80px; border:1px solid rgba(122,135,255,.23); border-radius:48% 52% 65% 35%; transform:rotate(26deg); pointer-events:none; }
.brand { font-family:'Bricolage Grotesque',sans-serif; font-size:23px; letter-spacing:-1.4px; padding:0 11px 29px; }
.brand span span,.mobile-brand span { color:#8c98ff; }
.brand-mark { width:31px; height:31px; border-radius:10px; background:var(--blue); color:#fff; box-shadow:0 0 0 5px rgba(79,91,255,.14),0 10px 24px rgba(0,0,0,.24); }
.workspace { border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.07); border-radius:13px; padding:12px 11px; margin:0 1px 28px; backdrop-filter:blur(12px); }
.workspace strong { font-family:'Bricolage Grotesque',sans-serif; font-size:13px; letter-spacing:-.2px; }
.workspace small,.user small { letter-spacing:.95px; font-size:9px; }
.nav-item { height:44px; border-radius:10px; gap:12px; padding:0 12px; position:relative; transition:background .2s,color .2s,transform .2s; }
.nav-item span { font-size:16px; }
.nav-item:hover { background:rgba(255,255,255,.09); transform:translateX(3px); }
.nav-item.active { background:rgba(103,116,255,.25); box-shadow:inset 3px 0 var(--yellow),0 10px 25px rgba(0,0,0,.1); }
.nav-item.active span { color:var(--yellow); }
.nav-item.active:after { content:''; position:absolute; right:12px; width:5px; height:5px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 4px rgba(245,196,81,.12); }
.user { border-top-color:rgba(255,255,255,.14); padding-top:17px; }
.main { margin-left:274px; width:calc(100% - 274px); }
.topbar { height:78px; padding:0 42px; border-bottom-color:rgba(212,216,232,.78); background:rgba(255,255,255,.78); box-shadow:0 1px 0 rgba(23,26,47,.035); }
#breadcrumb { font-family:'Bricolage Grotesque',sans-serif; font-size:13px; color:#68708a; letter-spacing:-.15px; }
.sync-pill { border-color:#d9e0ff; background:#f0f2ff; color:#4c59c8; padding:7px 11px; }
.sync-pill i { background:#4f5bff; box-shadow:0 0 0 3px rgba(79,91,255,.13); }
.sync-pill.offline { border-color:#e1e3ea; background:#f7f7fa; color:#737992; }.sync-pill.offline i { background:#9aa1b4; box-shadow:0 0 0 3px rgba(154,161,180,.14); }
.new-button { border-radius:999px; padding:11px 18px; font-weight:700; background:var(--blue); box-shadow:0 9px 22px rgba(79,91,255,.25); transition:transform .2s,box-shadow .2s,background .2s; }
.new-button:hover { transform:translateY(-2px); background:var(--blue-dark); box-shadow:0 14px 27px rgba(79,91,255,.31); }
.view { max-width:1530px; padding:44px 46px 72px; animation:view-in .35s ease both; }
@keyframes view-in { from{opacity:0;transform:translateY(7px)} to{opacity:1;transform:none} }
.page-head { margin-bottom:30px; }
.page-head h1 { font-family:'Bricolage Grotesque',sans-serif; font-size:34px; letter-spacing:-1.8px; line-height:1; }
.page-head p { margin-top:10px; color:#737992; font-size:13px; }
.date-picker,.filter { border-radius:999px; border-color:#dfe2ee; background:rgba(255,255,255,.8); padding:10px 15px; }
.metrics { gap:17px; margin-bottom:30px; }
.metric,.card { border-color:rgba(218,222,236,.9); border-radius:var(--radius); box-shadow:0 7px 22px rgba(23,26,47,.045); transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; }
.metric:hover,.card:hover { transform:translateY(-3px); border-color:#c6cdf7; box-shadow:var(--shadow); }
.metric { min-height:142px; padding:21px; overflow:hidden; }
.metric:before { content:''; position:absolute; inset:auto -16px -33px auto; width:108px; height:108px; border-radius:50%; background:rgba(229,232,255,.72); }
.metric:nth-child(2):before { background:rgba(224,236,255,.72); }.metric:nth-child(3):before { background:rgba(255,243,213,.75); }.metric:nth-child(4):before { background:rgba(252,226,224,.65); }
.metric-label { font-size:11px; letter-spacing:.18px; }.metric-value { font-family:'Bricolage Grotesque',sans-serif; font-size:29px; letter-spacing:-1.6px; margin:14px 0 8px; position:relative; }.metric-foot { font-size:11px; position:relative; }.metric-icon { width:34px; height:34px; border-radius:11px; font-size:15px; box-shadow:0 4px 10px rgba(79,91,255,.10); background:var(--blue-wash); color:var(--blue); }.metric-icon.gold { background:#fff4d8; color:#b88622; }.metric-icon.red { background:#ffebea; color:#b96063; }
.dashboard-grid { gap:20px; }.card-head { padding:22px 23px 16px; }.card-head h2 { font-family:'Bricolage Grotesque',sans-serif; font-size:16px; letter-spacing:-.5px; }.card-head .text-btn,.card-head a { color:var(--blue); text-decoration:underline; text-decoration-color:#c7cdfd; text-underline-offset:4px; }
.chart-card { min-height:365px; }.chart { height:255px; padding:9px 25px 18px; gap:19px; background:linear-gradient(to bottom,transparent 24%,#eef0f8 25%,transparent 26%,transparent 49%,#eef0f8 50%,transparent 51%,transparent 74%,#eef0f8 75%,transparent 76%); }.bar { max-width:31px; border-radius:8px 8px 3px 3px; background:linear-gradient(180deg,#a9b3ff,#7280f5); transition:height .55s cubic-bezier(.2,.8,.2,1),transform .2s; }.bar.highlight { background:linear-gradient(180deg,#6874ff,#3542df); box-shadow:0 8px 18px rgba(79,91,255,.25); }.barwrap:hover .bar { filter:saturate(1.2); transform:scaleX(1.1); }.bar-label { font-size:10px; }.card-footer { padding:14px 23px; border-top:1px solid #edf0f8; }.due-list { padding:0 23px; }.due-item { padding:16px 0; }.initial { border-radius:11px; background:var(--blue-wash); color:var(--blue); }.due-item b { font-family:'Bricolage Grotesque',sans-serif; font-size:13px; }.due-amount { font-family:'DM Sans',sans-serif; font-weight:700; }.quick-actions { padding:0 23px 23px; gap:12px; }.quick { border-color:#e1e4ef; background:#fbfbfe; border-radius:11px; padding:14px; transition:background .2s,transform .2s; }.quick:hover { background:#f0f2ff; transform:translateY(-2px); }.quick strong { font-size:20px; color:var(--blue); }
.toolbar { padding:0 23px 18px; align-items:center; }.search { border-radius:999px; padding:10px 14px; background:rgba(255,255,255,.8); }.search:focus,.filter:focus,.field input:focus,.field select:focus,.field textarea:focus { border-color:#8290ff; box-shadow:0 0 0 4px rgba(79,91,255,.13); }
th { background:#f8f8fc; padding:13px 23px; letter-spacing:1px; }td { padding:17px 23px; height:70px; }tbody tr { transition:background .16s; }tbody tr:hover { background:#fbfbff; }.doc-number { color:var(--blue); font-weight:600; }.status { padding:5px 9px; border-radius:999px; font-size:10px; }.status.paid,.status.accepted { background:#e6f6ec; color:#31805a; }.status.partial,.status.sent { background:#fff3d8; color:#9a7024; }.status.overdue,.status.rejected { background:#fbe8e8; color:#b35e63; }
.modal { border:1px solid #dde1f3; border-radius:20px; box-shadow:0 30px 100px rgba(23,26,47,.24); }.modal-head { background:linear-gradient(135deg,#fff,#f8f8ff); }.modal-head h2 { font-family:'Bricolage Grotesque',sans-serif; font-size:23px; }.field input,.field select,.field textarea { border-color:#dde1ee; border-radius:10px; }.line-items { border-color:#e0e3ef; border-radius:12px; }.line-header { background:#f6f7fc; }.secondary { border-radius:999px; }.toast { border-radius:999px; padding:13px 17px; background:var(--ink); box-shadow:0 14px 35px rgba(23,26,47,.22); }
+@media(max-width:1100px){.sidebar{width:238px}.main{margin-left:238px;width:calc(100% - 238px)}.topbar{padding:0 28px}.view{padding-left:30px;padding-right:30px}.metric-value{font-size:25px}}
+@media(max-width:650px){.sidebar{display:none}.main{margin-left:0;width:100%}.topbar{height:64px;padding:0 17px}.view{padding:28px 16px 52px}.page-head h1{font-size:29px}.metrics{gap:10px}.metric{min-height:116px;padding:15px}.metric-value{font-size:20px;margin-top:11px}.metric-label{font-size:10px}.metric-foot{font-size:10px}.metric:before{width:72px;height:72px;bottom:-24px;right:-20px}.chart{height:205px;gap:10px;padding-left:17px;padding-right:17px}.bar{max-width:23px}.card-head,.due-list{padding-left:17px;padding-right:17px}.quick-actions{padding-left:17px;padding-right:17px}.toolbar{padding-left:14px;padding-right:14px}th,td{padding-left:12px;padding-right:12px}}
/* Tablet breakpoint: preserve the product canvas instead of squeezing four metrics. */
@media (max-width: 900px) and (min-width: 651px) {
  .sidebar { width: 76px; padding: 24px 8px; }
  .brand { padding: 0 10px 26px; }
  .brand > span:last-child, .workspace > div, .workspace-dot, .workspace .icon-btn { display: none; }
  .workspace { border: 0; padding: 0; margin: 0 0 18px; background: transparent; justify-content: center; }
  .workspace:before { content: '✓'; display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; background: var(--blue); color: #fff; font-weight: 700; }
  .nav-item { justify-content: center; padding: 0; font-size: 0; }
  .nav-item span { font-size: 18px; }
  .nav-item.active:after { right: 8px; }
  .user { justify-content: center; margin-left: 0; margin-right: 0; }
  .user > div:not(.avatar), .more { display: none; }
  .main { margin-left: 76px; width: calc(100% - 76px); }
  .topbar { padding-left: 24px; padding-right: 24px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
}
/* Alegre-inspired line icon language: simple, rounded, quiet and consistent. */
.icon-sprite { position:absolute; width:0; height:0; overflow:hidden; }
.nav-icon, .nav-icon svg, .ui-icon, .help-btn svg, .notification svg, .new-button > svg { display:inline-flex; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.nav-icon { width:19px; height:19px; flex:0 0 19px; color:#aab4dc; }
.nav-item.active .nav-icon { color:var(--yellow); }
.metric-icon { display:grid; place-items:center; }
.metric-icon .ui-icon { width:18px; height:18px; }
.quick strong { display:grid; place-items:center; width:22px; height:22px; }
.quick strong .ui-icon { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.help-btn svg, .notification svg { width:17px; height:17px; color:#69718d; }
.new-button > svg { width:16px; height:16px; vertical-align:-3px; }

.mobile-nav-toggle { display:none; border:1px solid #dbe2f0; background:#fff; color:var(--navy); border-radius:10px; width:38px; height:38px; place-items:center; cursor:pointer; box-shadow:0 4px 12px rgba(23,26,47,.06); }
.mobile-nav-toggle svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:650px) {
  .mobile-nav-toggle { display:grid; }
  body.nav-open .sidebar { display:flex; position:fixed; z-index:30; inset:0 auto 0 0; width:274px; box-shadow:16px 0 36px rgba(23,26,47,.18); }
  body.nav-open .sidebar .brand > span:last-child,
  body.nav-open .sidebar .workspace,
  body.nav-open .sidebar .user > div:not(.avatar),
  body.nav-open .sidebar .more { display:block; }
  body.nav-open .sidebar .workspace { display:flex; }
  body.nav-open .sidebar .nav-item { justify-content:flex-start; padding:0 12px; font-size:13.5px; }
  body.nav-open .sidebar .nav-item span { font-size:16px; }
  body.nav-open .sidebar .user { justify-content:flex-start; margin-left:12px; margin-right:12px; }
  .topbar { gap:10px; }
  .topbar .breadcrumb { flex:1; }
}

/* Operational tables: one action language across every document view. */
.table-card{overflow:hidden}.toolbar{display:flex;flex-wrap:wrap;gap:10px}.toolbar .search{min-height:44px;flex:1 1 240px}.toolbar .filter{min-height:44px}.row-menu,.row-action{min-width:44px;min-height:44px;border-radius:10px}.row-action{padding:0 12px;border:1px solid #cbd2ff;background:var(--blue-wash);color:var(--blue);font-weight:650}.row-action:hover{background:#dfe3ff}.row-menu:hover{background:#f0f2ff}.status{display:inline-flex;align-items:center;gap:6px;min-height:28px;font-weight:600}.status:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75}.empty{min-height:140px;display:flex;align-items:center;justify-content:center;gap:6px;text-align:center}.empty b{display:block}.modal-foot{gap:10px}.modal-foot button{min-height:44px}.secondary:active,.row-menu:active,.row-action:active,.quick:active{transform:translateY(1px)}
@media(max-width:650px){.table-card{overflow-x:auto}.table-card table{min-width:680px}.toolbar{position:sticky;left:0}.row-actions{white-space:nowrap}}