/* ============================================================
   QuotePro Dealers — Roofing Experts · dashboard B2B
   Tema claro (oficina/tienda) + shell navy. Acento rojo escaso.
   ============================================================ */
:root{
  --red:#C8202B; --red-700:#a11a23; --navy:#1E2A3A; --navy-900:#141d29;
  --ink:#16202e; --ink-soft:#42505f; --muted:#76828f;
  --bg:#f5f6f8; --surface:#ffffff; --surface-2:#f0f2f5;
  --line:#e3e6eb; --line-soft:#eef0f3;
  --green:#12805c; --green-bg:#e7f4ee; --amber:#9a6a00; --amber-bg:#fbf2dd;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --r-sm:8px; --r:12px; --r-lg:16px;
  --shadow:0 1px 2px rgba(20,29,41,.04), 0 4px 16px rgba(20,29,41,.05);
  --shadow-lg:0 10px 40px rgba(20,29,41,.12);
  --disp:"Archivo",system-ui,sans-serif; --body:"Inter",system-ui,sans-serif;
  --sidebar-w:248px;
}
*{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{margin:0;height:100%;}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;}
h1,h2,h3,b,strong{font-family:var(--disp);}
button{font-family:var(--body);cursor:pointer;}
a{color:inherit;}
.accent{color:var(--red);}
.num{text-align:right;}

/* ============ BUTTONS ============ */
.btn{border:none;border-radius:var(--r-sm);padding:11px 18px;font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:8px;justify-content:center;transition:filter .15s,background .15s,border-color .15s,transform .05s;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--red);color:#fff;}
.btn-primary:hover{background:var(--red-700);}
.btn-block{width:100%;}
.btn-ghost{background:transparent;color:var(--ink-soft);border:1px solid var(--line);}
.btn-ghost:hover{border-color:var(--muted);color:var(--ink);}
.btn-sm{padding:7px 13px;font-size:13px;}
.icon-btn{background:transparent;border:none;width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;color:#aeb9c6;}
.icon-btn:hover{background:rgba(255,255,255,.08);color:#fff;}
.icon-btn svg{width:18px;height:18px;fill:currentColor;}

/* ============ LOGIN ============ */
.login{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;
  background:radial-gradient(120% 120% at 50% 0%, #243span 0%, #1E2A3A 40%, #0f1620 100%);
  background:radial-gradient(130% 120% at 50% -10%, #2b3b50 0%, var(--navy) 45%, #0e151f 100%);}
.login-card{background:var(--surface);border-radius:var(--r-lg);padding:36px 32px;width:100%;max-width:392px;text-align:center;box-shadow:var(--shadow-lg);}
.login-logo{height:42px;display:block;}
/* El logo oficial de Soffit (cuerpo blanco) necesita fondo oscuro: badge navy sobre la tarjeta clara */
.logo-badge{background:var(--navy);border-radius:14px;padding:13px 20px;margin:0 auto 16px;box-shadow:0 6px 18px rgba(20,29,41,.18);}
.login-title{font-size:26px;font-weight:800;margin:0 0 6px;letter-spacing:-.4px;}
.login-sub{font-size:13.5px;color:var(--muted);margin:0 0 22px;line-height:1.5;}
.login .field{text-align:left;}
.login-error{background:#fdecec;color:var(--red-700);font-size:13px;font-weight:600;border-radius:var(--r-sm);padding:9px 12px;margin:2px 0 0;}
.login-error[hidden]{display:none;}
.login-help{font-size:12.5px;color:var(--muted);margin:16px 0 0;}
.login-foot{color:#8aa0b8;font-size:12px;margin:0;}
/* Splash de carga: tapa el parpadeo del login mientras se verifica la sesión al refrescar */
.boot-splash{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:radial-gradient(130% 120% at 50% -10%, #2b3b50 0%, var(--navy) 45%, #0e151f 100%);}
.boot-splash img{height:46px;}
.boot-spin{width:26px;height:26px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:boot-rot .7s linear infinite;}
@keyframes boot-rot{to{transform:rotate(360deg);}}
.boot-splash[hidden]{display:none;}

/* ============ FIELDS ============ */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:13px;}
.field>span{font-size:12.5px;font-weight:600;color:var(--ink-soft);display:flex;justify-content:space-between;align-items:center;}
.field>span em{font-style:normal;font-family:var(--disp);font-weight:800;color:var(--red);}
.field input,.userform input{font-family:var(--body);font-size:15px;padding:11px 13px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);transition:border-color .15s,box-shadow .15s;width:100%;}
.field input:focus,.userform input:focus,.qty:focus,.priceedit:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(203,44,46,.12);}
.field small{font-size:12px;color:var(--muted);}

/* ============ APP SHELL ============ */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh;}
.qp-gate .app{display:none;}
body:not(.qp-gate) .login{display:none;}

/* Sidebar */
.sidebar{background:linear-gradient(180deg,var(--navy),var(--navy-900));color:#cdd7e2;display:flex;flex-direction:column;justify-content:space-between;position:sticky;top:0;height:100vh;padding:18px 14px;z-index:40;}
.side-brand{display:flex;align-items:center;gap:11px;padding:6px 8px 18px;}
.side-logo{height:34px;}
/* Brillo dorado que barre el logo (mismo gesto que en el S1), enmascarado a la silueta del logo */
.logo-shine{position:relative;display:inline-flex;line-height:0;}
.logo-shine::after{content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 38%,rgba(255,224,150,.95) 50%,rgba(212,175,55,.55) 57%,transparent 64%);
  background-size:250% 100%;
  -webkit-mask:url(logo.png) left center/contain no-repeat;mask:url(logo.png) left center/contain no-repeat;
  animation:logo-shine 4.5s linear infinite;pointer-events:none;}
@keyframes logo-shine{0%{background-position:130% 0;}100%{background-position:-130% 0;}}
.side-brandtext{display:flex;flex-direction:column;line-height:1.05;}
.side-brandtext b{font-size:17px;color:#fff;font-weight:800;}
.side-brandtext span{font-size:11px;color:var(--red);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;}
.side-nav{display:flex;flex-direction:column;gap:3px;}
.nav-item{display:flex;align-items:center;gap:11px;width:100%;background:transparent;border:none;color:#aab6c4;font-size:14.5px;font-weight:600;padding:10px 12px;border-radius:var(--r-sm);text-align:left;transition:background .15s,color .15s;}
.nav-item svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none;}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff;}
.nav-item.active{background:var(--red);color:#fff;box-shadow:0 6px 16px rgba(203,44,46,.35);}
.nav-item[hidden]{display:none;}
.side-user{display:flex;align-items:center;gap:10px;padding:12px 8px 4px;border-top:1px solid rgba(255,255,255,.08);}
.avatar{width:38px;height:38px;border-radius:10px;background:var(--red);color:#fff;display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:14px;flex:none;}
.side-user-meta{display:flex;flex-direction:column;min-width:0;flex:1;}
.side-user-meta b{font-size:13.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.side-user-meta span{font-size:11.5px;color:#8595a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar-scrim{display:none;}

/* Content */
.content{min-width:0;display:flex;flex-direction:column;}
.topbar{position:sticky;top:0;z-index:30;background:rgba(245,246,248,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:16px 28px;}
.topbar-titles{flex:1;min-width:0;}
.topbar h1{font-size:21px;font-weight:800;margin:0;letter-spacing:-.3px;}
.topbar p{margin:1px 0 0;font-size:13px;color:var(--muted);}
.role-chip{font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--line);}
.role-chip.admin{background:#fdecec;color:var(--red-700);border-color:#f6d4d4;}
.hamburger{display:none;background:transparent;border:1px solid var(--line);border-radius:var(--r-sm);width:38px;height:38px;place-items:center;color:var(--ink);}
.hamburger svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}

.views{padding:26px 28px 60px;max-width:1180px;width:100%;}
.view{display:none;animation:fade .25s ease;}
.view.active{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ============ PANELS / TABLES ============ */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:20px 22px;margin-bottom:20px;}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.panel-head h2{font-size:16px;margin:0;font-weight:700;}
.table-wrap{overflow-x:auto;margin:0 -22px -2px;padding:0 22px;}
table.data{width:100%;border-collapse:collapse;font-size:13.5px;}
table.data th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;padding:9px 12px;border-bottom:1.5px solid var(--line);white-space:nowrap;}
table.data td{padding:11px 12px;border-bottom:1px solid var(--line-soft);white-space:nowrap;}
table.data tbody tr:hover{background:var(--surface-2);}
table.data tbody tr:last-child td{border-bottom:none;}
.data .num,.lines .num{text-align:right;}
.empty{color:var(--muted);text-align:center;padding:26px 12px;font-size:13.5px;}

/* ============ KPIs ============ */
.hello{font-family:var(--disp);font-size:22px;font-weight:800;margin:0 0 18px;letter-spacing:-.3px;}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:22px;}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow);}
.kpi-label{font-size:12.5px;color:var(--muted);font-weight:600;}
.kpi-val{font-family:var(--disp);font-size:30px;font-weight:800;letter-spacing:-.5px;margin-top:6px;color:var(--ink);}
.kpi-foot{font-size:12px;color:var(--muted);margin-top:4px;}
.kpi.accent .kpi-val{color:var(--red);}

.dash-grid{display:grid;gap:20px;}

/* ============ CALCULADORA ============ */
.calc-grid{display:grid;grid-template-columns:1fr 320px;gap:22px;align-items:stretch;}
.calc-main{min-width:0;}
.measures{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.measures .field{margin-bottom:0;}
.slider-row{display:flex;align-items:center;gap:12px;}
.slider-row input[type=range]{flex:1;accent-color:var(--red);height:4px;}
.slider-row input[type=number]{width:78px;}
.thumbs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;}
.thumbs figure{margin:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--surface-2);}
.thumbs img{width:100%;height:120px;object-fit:cover;display:block;}
.thumbs figcaption{font-size:12px;color:var(--ink-soft);text-align:center;padding:7px;font-weight:600;}

.segmented{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
.seg{display:flex;flex-direction:column;gap:2px;align-items:flex-start;border:1.5px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:12px 14px;font-size:14.5px;font-weight:700;color:var(--ink);text-align:left;transition:border-color .15s,background .15s;}
.seg small{font-weight:500;font-size:12px;color:var(--muted);}
.seg:hover{border-color:var(--muted);}
.seg.sel{border-color:var(--red);background:#fdf2f2;}
.seg.sel small{color:var(--red-700);}

table.lines{width:100%;border-collapse:collapse;font-size:14px;}
table.lines th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700;padding:8px 6px;border-bottom:1.5px solid var(--line);}
table.lines td{padding:10px 6px;border-bottom:1px solid var(--line-soft);}
table.lines tfoot td{border-bottom:none;border-top:1.5px solid var(--line);padding-top:12px;font-weight:700;}
.qty{width:84px;padding:8px 10px;border:1.5px solid var(--line);border-radius:var(--r-sm);font-size:14px;font-weight:600;text-align:right;}
.price{color:var(--muted);white-space:nowrap;}
.priceedit{width:60px;padding:5px 7px;border:1.5px solid var(--line);border-radius:6px;font-size:13px;font-weight:600;text-align:right;}
.sub{font-weight:700;}
.total{color:var(--red);font-family:var(--disp);font-size:16px;font-weight:800;}
.hint{display:block;color:var(--muted);font-size:12px;margin-top:12px;}
.tag-pending{font-size:11.5px;font-weight:700;color:var(--amber);background:var(--amber-bg);padding:4px 10px;border-radius:999px;}

/* Resumen sticky */
.calc-summary{position:relative;}
.summary-sticky{position:sticky;top:92px;background:var(--navy);color:#fff;border-radius:var(--r);padding:22px;box-shadow:var(--shadow-lg);}
.summary-label{font-size:13px;color:#9fb0c2;font-weight:600;}
.summary-price{font-family:var(--disp);font-size:38px;font-weight:900;letter-spacing:-1px;margin:4px 0 16px;}
.summary-break{display:flex;flex-direction:column;gap:8px;padding:14px 0;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);}
.summary-break div{display:flex;justify-content:space-between;font-size:14px;}
.summary-break span{color:#9fb0c2;}
.summary-break b{font-family:var(--body);font-weight:700;}
.summary-note{font-size:12px;color:#8fa1b4;line-height:1.5;margin:14px 0 16px;}

/* ============ USERS ============ */
.userform{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;align-items:end;}
.userform .field{margin-bottom:0;}
.userform-actions{display:flex;align-items:center;gap:12px;grid-column:1/-1;}
.form-msg{font-size:13px;font-weight:600;}
.form-msg.ok{color:var(--green);}
.form-msg.err{color:var(--red-700);}
.badge{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;}
.badge.on{background:var(--green-bg);color:var(--green);}
.badge.off{background:#fdecec;color:var(--red-700);}
.acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap;}
.mini{background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:5px 11px;font-size:12.5px;font-weight:600;color:var(--ink-soft);}
.mini:hover{border-color:var(--navy);color:var(--ink);}
.mini.danger{color:var(--red-700);border-color:#f3d3d3;}
.mini.danger:hover{background:var(--red);color:#fff;border-color:var(--red);}
.mut{color:var(--muted);}
.head-actions{display:flex;gap:8px;}
.badge.type{background:var(--surface-2);color:var(--ink-soft);text-transform:capitalize;}

/* select */
select#umType,.field select{font-family:var(--body);font-size:15px;padding:11px 13px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);width:100%;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2376828f' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;}
.field select:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(203,44,46,.12);}

/* ============ MODAL ============ */
.modal{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:20px;}
.modal[hidden]{display:none;}
.modal-scrim{position:absolute;inset:0;background:rgba(15,22,32,.5);backdrop-filter:blur(2px);animation:fade .2s ease;}
.modal-card{position:relative;background:var(--surface);border-radius:var(--r-lg);width:100%;max-width:580px;max-height:92vh;overflow:auto;box-shadow:var(--shadow-lg);padding:24px 26px;animation:pop .22s cubic-bezier(.2,.9,.3,1);}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98);}to{opacity:1;transform:none;}}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.modal-head h2{font-size:18px;margin:0;font-weight:800;}
.modal-x{background:var(--surface-2);border:none;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--ink-soft);}
.modal-x:hover{background:#e7eaee;color:var(--ink);}
.modal-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.modal-grid .field{margin-bottom:0;}
.modal-grid .field-full{grid-column:1/-1;}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;}
.form-msg[hidden]{display:none;}

/* avatar uploader */
.avatar-field{display:flex;align-items:center;gap:16px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--line-soft);}
.avatar-up{position:relative;width:64px;height:64px;flex:none;}
.avatar-preview{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--line);}
.avatar-initial{width:64px;height:64px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:22px;}
.avatar-hint{font-size:12px;color:var(--muted);margin:6px 0 0;}
/* avatar en tabla */
.u-ava{display:inline-flex;align-items:center;gap:9px;}
.u-ava img{width:30px;height:30px;border-radius:50%;object-fit:cover;}
.u-ava .ini{width:30px;height:30px;border-radius:50%;background:var(--surface-2);color:var(--ink-soft);display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:12px;}
/* password con ver */
.pass-wrap{position:relative;display:flex;}
.pass-wrap input{flex:1;padding-right:52px;}
.pass-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:transparent;border:none;color:var(--red);font-size:12.5px;font-weight:700;padding:4px 8px;}
.pass-eye:hover{text-decoration:underline;}
.sidebar .avatar{overflow:hidden;}
.sidebar .avatar img{width:100%;height:100%;object-fit:cover;}

/* side-user como botón */
.side-user{width:100%;background:transparent;border:none;border-top:1px solid rgba(255,255,255,.08);cursor:pointer;text-align:left;}
.side-user:hover{background:rgba(255,255,255,.05);}

/* filtros */
.filters{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px;}
.flt{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600;color:var(--ink-soft);}
.flt select,.head-actions select{font-family:var(--body);font-size:14px;padding:9px 12px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);min-width:160px;}
.head-actions select{font-size:13px;padding:7px 10px;min-width:130px;}
.muted-note{font-size:12.5px;color:var(--muted);}

/* combobox de búsqueda (filtro Dealer) */
.combo{position:relative;min-width:200px;}
.combo-input{font-family:var(--body);font-size:14px;padding:9px 34px 9px 12px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);width:100%;}
.combo-input::placeholder{color:var(--muted);font-weight:500;}
.combo-input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(203,44,46,.12);}
.combo-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:var(--surface-2);border:none;width:24px;height:24px;border-radius:6px;display:grid;place-items:center;color:var(--ink-soft);}
.combo-clear:hover{background:#e7eaee;color:var(--ink);}
.combo-clear svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;}
.combo-list{position:absolute;z-index:20;top:calc(100% + 5px);left:0;right:0;max-height:260px;overflow-y:auto;margin:0;padding:5px;list-style:none;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);}
.combo-opt{padding:8px 11px;border-radius:6px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.combo-opt:hover,.combo-opt.active{background:var(--surface-2);}
.combo-opt[data-id="all"]{color:var(--ink-soft);font-weight:700;}
.combo-empty,.combo-more{padding:8px 11px;font-size:12.5px;color:var(--muted);}
.combo-more{border-top:1px solid var(--line-soft);margin-top:3px;}

/* barchart — ranking de dealers */
.barchart{display:flex;flex-direction:column;gap:6px;}
.bar-row{position:relative;display:grid;grid-template-columns:26px 30px minmax(96px,168px) 1fr auto;align-items:center;gap:11px;
  padding:7px 12px 7px 8px;border-radius:10px;border:1px solid transparent;
  transition:background .15s,border-color .15s,box-shadow .15s;outline:none;}
.bar-row:hover,.bar-row:focus-visible{background:var(--surface-2);border-color:var(--line);box-shadow:var(--shadow);}
.bar-row:focus-visible{box-shadow:0 0 0 3px rgba(203,44,46,.18);}

/* ranking */
.bd-rank{font-family:var(--disp);font-size:13px;font-weight:800;color:var(--muted);text-align:center;}
.bd-medal{font-size:16px;line-height:1;}
.bar-row.is-top .bd-rank:not(.bd-medal){color:var(--ink-soft);}

/* avatar / iniciales */
.bd-ava{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none;display:block;}
.bd-ini{display:grid;place-items:center;background:linear-gradient(155deg,#2b3b50,var(--navy));color:#fff;
  font-family:var(--disp);font-weight:800;font-size:11.5px;letter-spacing:.3px;}
.bar-row.is-top .bd-ini{background:linear-gradient(155deg,var(--red),var(--red-700));}

.bar-name{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* track + barra con degradado de marca */
.bar-track{position:relative;background:var(--surface-2);border-radius:7px;height:24px;overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(20,29,41,.05);}
.bar-fill{height:100%;width:0;min-width:4px;border-radius:7px;
  background:linear-gradient(90deg,var(--red),var(--red-700) 62%,#7c1a1c);
  box-shadow:0 1px 4px rgba(203,44,46,.32);
  transition:width .7s cubic-bezier(.22,.85,.3,1),filter .15s;}
.bar-row.is-top .bar-fill{background:linear-gradient(90deg,#e0353a,var(--red) 55%,var(--red-700));}
.bar-row:hover .bar-fill,.bar-row:focus-visible .bar-fill{filter:saturate(1.12) brightness(1.04);}
.bar-inline-val{position:absolute;top:50%;right:9px;transform:translateY(-50%);
  font-family:var(--disp);font-size:11.5px;font-weight:800;color:#fff;
  text-shadow:0 1px 2px rgba(20,29,41,.4);opacity:0;transition:opacity .2s .4s;pointer-events:none;}
.bar-row:hover .bar-inline-val,.bar-row:focus-visible .bar-inline-val{opacity:.92;}

.bar-val{font-size:14px;font-weight:800;font-family:var(--disp);white-space:nowrap;color:var(--ink);
  display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;min-width:78px;}
.bar-val small{color:var(--muted);font-weight:600;font-family:var(--body);font-size:11.5px;}

/* tooltip accesible (hover + foco teclado) */
.bar-row[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% - 2px);transform:translate(-50%,4px);
  background:var(--navy);color:#fff;font-size:12px;font-weight:600;font-family:var(--body);
  padding:6px 10px;border-radius:7px;white-space:nowrap;box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:15;}
.bar-row[data-tip]:hover::after,.bar-row[data-tip]:focus-visible::after{opacity:1;transform:translate(-50%,0);}
.barchart .empty{grid-column:1/-1;}
@media (prefers-reduced-motion:reduce){
  .bar-fill{transition:none !important;transition-delay:0s !important;}
  .logo-shine::after{animation:none !important;}
}

/* sortable headers */
table.sortable th[data-sort]{cursor:pointer;user-select:none;}
table.sortable th[data-sort]:hover{color:var(--ink);}
th.sorted-asc::after{content:" ▲";font-size:9px;color:var(--red);}
th.sorted-desc::after{content:" ▼";font-size:9px;color:var(--red);}

/* ============ RESPONSIVE ============ */
@media(max-width:1000px){
  .calc-grid{grid-template-columns:1fr;}
  .summary-sticky{position:static;}
}
@media(max-width:820px){
  .app{grid-template-columns:1fr;}
  .sidebar{position:fixed;left:0;top:0;width:var(--sidebar-w);transform:translateX(-100%);transition:transform .25s ease;box-shadow:var(--shadow-lg);}
  body.nav-open .sidebar{transform:none;}
  body.nav-open .sidebar-scrim{display:block;position:fixed;inset:0;background:rgba(15,22,32,.45);z-index:35;}
  .hamburger{display:grid;}
}
@media(max-width:560px){
  .measures,.thumbs,.segmented,.modal-grid{grid-template-columns:1fr;}
  .views{padding:18px 16px 50px;}
  .topbar{padding:14px 16px;}
  .panel{padding:16px;}
  .table-wrap{margin:0 -16px;padding:0 16px;}
  /* gráfica: en móvil ocultamos la columna de nombre (queda en el tooltip) */
  .bar-row{grid-template-columns:24px 28px 1fr auto;gap:9px;padding:6px 8px;}
  .bar-name{display:none;}
  .bar-val{min-width:64px;font-size:13px;}
}