/* ============================================================
   TrainingBoutique · Dashboard de Leads
   Fiel a trainingboutique.es (bundle Astro)
   --bg-dark:#242424 · --accent:#bdad98 · --green:#4b5951 · --bg-soft:#f7f7f5
   Serif Libre Baskerville · Sans Raleway
   ============================================================ */
:root{
  --dark:#242424; --dark-2:#2b2b2b; --dark-3:#3a3a3a;
  --text:#242424; --ink-soft:#5b544c; --muted:#948d80;
  --soft:#f7f7f5; --paper:#ffffff; --cream:#f2eadf;
  --accent:#bdad98; --accent-d:#a2896a; --accent-dd:#8a7358; --accent-soft:#e9deca;
  --green:#4b5951; --green-l:#5a665f;
  --line:#e7e2d9; --line-2:#eee9e1;

  /* estados (sobrios, en línea con la marca) */
  --st-nuevo:#3a5a99; --st-contactado:#7a6cae; --st-espera:#c2912f;
  --st-cita:#4b7d63; --st-venta:#2f6b45; --st-perdido:#a8544c;

  --shadow:0 1px 3px rgba(36,36,36,.06),0 12px 32px rgba(36,36,36,.06);
  --shadow-lg:0 24px 60px rgba(36,36,36,.24);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Raleway',-apple-system,Segoe UI,Roboto,sans-serif;
  background:#242424;
  background-image:linear-gradient(135deg,#242424 0%,#262826 52%,#2f3a33 100%);
  background-attachment:fixed;
  color:var(--text);-webkit-font-smoothing:antialiased}
.hidden{display:none!important}
.muted{color:var(--muted)}
h1,h2,h3{font-family:'Libre Baskerville',Georgia,serif;font-weight:700}

/* ===== Botones (pills, como la web) ===== */
.btn{font-family:'Raleway',sans-serif;font-weight:500;font-size:14px;border:0;border-radius:999px;
  padding:13px 22px;cursor:pointer;transition:transform .24s cubic-bezier(.2,.65,.2,1),background-color .24s,color .24s}
.btn:hover{transform:translateY(-1px)}
.btn-block{width:100%;margin-top:14px}
.btn-dark{background:var(--dark);color:#fff}
.btn-dark:hover{background:#000}
.btn-light{background:#fff;color:var(--dark)}
.btn-light:hover{background:var(--cream)}
.btn-gold{background:var(--accent);color:var(--dark)}
.btn-gold:hover{background:var(--accent-d);color:#fff}
.btn-sm{padding:8px 16px;font-size:13px}

/* ===== Cabecera (idéntica a la web) ===== */
.tb-header{background:var(--dark);border-bottom:1px solid rgba(255,255,255,.1);
  position:sticky;top:0;z-index:30}
.tb-header-inner{max-width:1400px;margin:0 auto;padding:0 32px;height:80px;display:flex;
  align-items:center;justify-content:space-between;position:relative}
.tb-header-left,.tb-header-right{display:flex;align-items:center;gap:6px}
.tb-sep{width:1px;height:24px;background:rgba(255,255,255,.18);margin:0 6px;flex:0 0 auto}
.tb-nav{display:flex;align-items:center;gap:2px}
.tb-link{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;
  color:#fff;font-size:14px;font-weight:500}
.tb-link.has-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.nav-link{font-family:'Raleway',sans-serif;border:0;background:transparent;cursor:pointer;
  color:rgba(255,255,255,.6);transition:color .2s,background .2s}
.nav-link:hover{background:#ffffff12;color:#fff}
.nav-link.is-active{color:#fff}
.nav-link.is-active::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);
  display:inline-block}
.tb-header-logo{display:block;flex:0 0 auto}
.tb-header-logo img{height:26px;display:block}
.tb-user{color:rgba(255,255,255,.82);font-size:14px;font-weight:500;padding:0 6px;white-space:nowrap}
.tb-nav .nav-link{white-space:nowrap}
.tb-icon-btn{background:transparent;border:0;color:#fff;font-size:16px;line-height:1;cursor:pointer;
  width:40px;height:40px;border-radius:999px;transition:background .25s,color .2s;
  display:inline-flex;align-items:center;justify-content:center}
.tb-icon-btn:hover{background:#ffffff1a}
.tb-icon-btn svg{display:block}
#navConfigGear:hover svg{transform:rotate(40deg);transition:transform .3s}
.tb-icon-btn.gear-active{background:rgba(189,173,152,.18);color:var(--accent)}
.tb-cta{font-family:'Raleway',sans-serif;display:inline-flex;align-items:center;color:#fff;font-size:13px;
  font-weight:500;padding:12px 20px;border-radius:999px;background:var(--dark-3);border:0;cursor:pointer;
  transition:background .25s}
.tb-cta:hover{background:var(--green)}

/* ===== Hero (franja oscura, como la home) ===== */
.hero{position:relative;background:transparent;color:#fff}
.hero-overlay{display:none}
.hero-inner{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:34px 24px 40px;text-align:center}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;
  border:1px solid rgba(255,255,255,.2);border-radius:999px;backdrop-filter:blur(8px);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#fff;font-weight:500}
.hero-title{font-size:clamp(30px,4.2vw,44px);line-height:1.05;font-weight:400;margin:16px 0 4px;
  letter-spacing:.005em}
.hero-title em{font-style:italic;color:var(--accent)}

/* stats como "burbujas" glass (idéntico a home-hero-stat) */
.hero-stats{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;
  max-width:940px;margin-left:auto;margin-right:auto}
.kpi{text-align:center;background:#ffffff0f;border:1px solid rgba(255,255,255,.14);border-radius:16px;
  padding:18px 12px 15px;backdrop-filter:blur(6px)}
.kpi .v{font-family:'Libre Baskerville',serif;font-size:clamp(28px,3.4vw,38px);line-height:1;color:var(--cream)}
.kpi .l{margin-top:9px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#ffffffd1;font-weight:500}
.kpi .s{margin-top:4px;font-size:10.5px;color:#ffffff9c;letter-spacing:.02em}
.kpi.accent .v{color:#fff}
.kpi.good .v{color:var(--accent)}
.kpi.warn{border-color:rgba(194,145,47,.5)}
.kpi.warn .v{color:#e7b968}

.container{max-width:1240px;margin:0 auto;padding:28px 24px 40px}

/* ===== Layout 2 col ===== */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:22px}
@media(max-width:860px){.grid-2{grid-template-columns:1fr}}

/* ===== Colas de acción (Por contactar / A la espera) ===== */
.queue-card .card-head h2{display:flex;align-items:center;gap:10px}
.queue-hint{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:600}
.qbadge{font-family:'Raleway',sans-serif;font-size:12px;font-weight:700;color:#fff;background:var(--accent);
  border-radius:999px;padding:2px 11px;min-width:26px;text-align:center;line-height:1.6}
.queue-list{display:flex;flex-direction:column;gap:2px;max-height:296px;overflow:auto;margin:-4px -6px}
.queue-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;
  border-radius:12px;cursor:pointer;transition:background .12s}
.queue-item:hover{background:#faf7f1}
.queue-info{min-width:0}
.queue-name{font-weight:600;font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.queue-phone{font-size:12.5px;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums}
.queue-wa{flex:0 0 auto;background:var(--accent);color:var(--dark);font-size:12px;font-weight:600;
  padding:7px 14px;border-radius:999px;text-decoration:none;transition:.2s}
.queue-wa:hover{background:var(--accent-d);color:#fff}
.queue-empty{padding:26px;text-align:center;color:var(--muted);font-size:13px}

/* ===== Cards ===== */
.card{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);
  border:1px solid var(--line-2);padding:22px 24px}
.card.no-pad{padding:0;overflow:hidden}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.card-head h2{font-size:18px;margin:0;color:var(--text)}

/* ===== Funnel ===== */
.funnel{display:flex;flex-direction:column;gap:12px}
.funnel-row{display:grid;grid-template-columns:116px 1fr 38px;align-items:center;gap:14px}
.funnel-row .name{font-size:13px;font-weight:600;color:var(--ink-soft)}
.funnel-row .track{background:var(--soft);border-radius:999px;overflow:hidden;height:22px}
.funnel-row .bar{height:100%;border-radius:999px;min-width:2px;transition:width .5s ease}
.funnel-row .num{font-size:14px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}

/* ===== Mini table centros ===== */
.mini-table{width:100%;border-collapse:collapse;font-size:13.5px}
.mini-table th,.mini-table td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line)}
.mini-table thead th{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:600}
.mini-table tbody tr:last-child td{border-bottom:0}
.mini-table td.num,.mini-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.mini-table td.name{font-weight:600}

/* ===== Filtros ===== */
.filters{display:flex;flex-wrap:wrap;gap:11px;align-items:center;margin-bottom:16px}
.input{font-family:inherit;font-size:13.5px;padding:12px 14px;border:1px solid var(--line);
  border-radius:999px;background:var(--paper);color:var(--text);transition:.15s}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(189,173,152,.22)}
select.input{cursor:pointer;border-radius:999px}
#search{flex:1;min-width:230px}
.count{margin-left:auto;font-size:12.5px;color:rgba(255,255,255,.6);font-weight:600}

/* ===== Leads table ===== */
.table-scroll{overflow-x:auto}
.leads-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:860px}
.leads-table thead th{background:var(--soft);text-align:left;padding:13px 16px;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:600;
  position:sticky;top:0;border-bottom:1px solid var(--line)}
.leads-table td{padding:13px 16px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.leads-table tbody tr{transition:background .12s}
.leads-table tbody tr:hover td{background:#faf7f1}
.leads-table tbody tr:last-child td{border-bottom:0}
.leads-table .nm{font-weight:600;color:var(--text)}
.contact-links{display:flex;gap:10px;font-size:12.5px}
.contact-links a{color:var(--accent-dd);text-decoration:none;font-weight:600}
.contact-links a:hover{color:var(--text);text-decoration:underline}

.estado-sel{font-family:'Raleway',sans-serif;font-weight:600;font-size:11.5px;border:0;border-radius:999px;
  padding:7px 26px 7px 14px;color:#fff;cursor:pointer;appearance:none;
  background-position:right 10px center;background-repeat:no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E")}

.prio{font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.prio::before{content:"";width:7px;height:7px;border-radius:50%}
.prio-Alta{color:var(--st-perdido)} .prio-Alta::before{background:var(--st-perdido)}
.prio-Media{color:var(--st-espera)} .prio-Media::before{background:var(--st-espera)}
.prio-Baja{color:var(--muted)} .prio-Baja::before{background:var(--muted)}

.empty{padding:48px;text-align:center;color:var(--muted);font-size:14px}
.app-foot{text-align:center;color:rgba(255,255,255,.4);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;margin-top:30px}

/* ===== Login ===== */
.login-wrap{min-height:100vh;display:grid;place-items:center;
  background:radial-gradient(130% 100% at 50% -10%,#2f3a33 0%,#242424 55%)}
.login-inner{width:min(400px,92vw);display:flex;flex-direction:column;align-items:center}
.login-logo{height:30px;width:auto;margin-bottom:22px}
.login-inner .hero-badge{margin-bottom:22px}
.login-card{background:var(--paper);width:100%;padding:34px 32px 32px;border-radius:18px;
  box-shadow:0 30px 70px rgba(0,0,0,.42)}
.login-card h1{font-size:24px;font-weight:400;margin:0 0 18px;text-align:center}
.login-card h1 em{font-style:italic;color:var(--accent-d)}
.login-card label{display:block;font-size:10.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.11em;color:var(--ink-soft);margin:16px 0 7px}
.login-card input{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:12px;
  font-family:inherit;font-size:15px;background:var(--soft);transition:.15s}
.login-card input:focus{outline:none;border-color:var(--accent);background:#fff;
  box-shadow:0 0 0 3px rgba(189,173,152,.25)}
.login-error{color:var(--st-perdido);font-size:13px;margin-top:12px;text-align:center}

/* ===== Rendimiento ===== */
.sect-head{margin:6px 0 16px}
.sect-head h2{font-size:22px;margin:0;color:#f4efe6}
.sect-sub{display:block;font-size:12.5px;color:var(--muted);margin-top:4px}
.sect-head .sect-sub{color:rgba(255,255,255,.55)}
.channels{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-bottom:26px}
.channel-card{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px 22px;position:relative}
.channel-card.is-best{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow)}
.channel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.channel-name{font-weight:700;font-size:15px;color:var(--text)}
.channel-flag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  background:var(--accent);color:var(--dark);padding:4px 10px;border-radius:999px}
.channel-big{display:flex;align-items:baseline;gap:10px}
.channel-pct{font-family:'Libre Baskerville',serif;font-size:40px;line-height:1;color:var(--text)}
.channel-pct-l{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.channel-bar{height:8px;background:var(--soft);border-radius:999px;overflow:hidden;margin:14px 0 12px}
.channel-bar-fill{height:100%;background:var(--green);border-radius:999px}
.channel-stats{display:flex;gap:16px;font-size:12.5px;color:var(--muted)}
.channel-stats b{color:var(--text);font-weight:700}

.perf-card{margin-bottom:20px}
.perf-head{padding:20px 24px 14px}
.perf-head h2{font-size:18px;margin:0}
.perf-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:680px}
.perf-table thead th{background:var(--soft);text-align:left;padding:12px 16px;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line)}
.perf-table th.num,.perf-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.perf-table td{padding:12px 16px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.perf-table tbody tr:last-child td{border-bottom:0}
.perf-row{border-left:3px solid transparent}
.perf-row.rec-boost td:first-child{box-shadow:inset 3px 0 0 var(--st-venta)}
.perf-row.rec-cut td:first-child{box-shadow:inset 3px 0 0 var(--st-perdido)}
.perf-row:hover td{background:#faf7f1}
.pname{font-weight:600;color:var(--text);max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv{display:flex;align-items:center;gap:10px;min-width:120px}
.conv-bar{flex:1;height:7px;background:var(--soft);border-radius:999px;overflow:hidden;min-width:60px}
.conv-fill{height:100%;background:var(--accent-d);border-radius:999px}
.conv span{font-weight:700;font-variant-numeric:tabular-nums;font-size:12.5px;min-width:38px;text-align:right}
.rec{font-size:11px;font-weight:700;padding:5px 12px;border-radius:999px;white-space:nowrap}
.rec-boost{background:#e5f0e8;color:#2f6b45}
.rec-cut{background:#f6e6e4;color:#a8544c}
.rec-keep{background:#efe9df;color:#8a7358}
.rec-watch{background:#eeeae3;color:#948d80}
.perf-note{font-size:12px;color:rgba(255,255,255,.5);line-height:1.6;margin:8px 4px 0}
.perf-note b{color:rgba(255,255,255,.8)}
/* Fila de campaña/anuncio desplegable → leads que le corresponden */
.perf-row.perf-clickable{cursor:pointer}
.perf-caret{display:inline-block;color:var(--accent-d);font-size:10px;margin-right:5px;transition:transform .18s}
.perf-row.open .perf-caret{transform:rotate(90deg)}
.perf-row.open td{background:#f6f1e8}
.perf-detail td{padding:0 16px 4px!important;background:#faf7f1}
.perf-leads{display:flex;flex-direction:column;gap:2px;padding:6px 0 10px;max-height:340px;overflow:auto}
.perf-leads.muted{color:var(--muted);font-size:13px;padding:14px 0}
.pl-row{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;cursor:pointer;
  background:var(--paper);border:1px solid var(--line-2);transition:border-color .15s,box-shadow .15s}
.pl-row:hover{border-color:var(--accent);box-shadow:0 3px 12px -6px rgba(0,0,0,.25)}
.pl-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.pl-name{font-weight:600;color:var(--text);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-estado{font-size:11.5px;font-weight:600;color:var(--ink-soft);white-space:nowrap}
.pl-centro{font-size:12px;color:var(--muted);white-space:nowrap}
.pl-tel{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.pl-wa{flex:0 0 auto;font-size:11.5px;font-weight:600;color:var(--accent-dd);text-decoration:none;
  border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.pl-wa:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
@media(max-width:640px){.pl-centro,.pl-tel{display:none}}

/* ===== Contabilidad ===== */
.contab-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.contab-kpis{margin-top:0;padding-top:0;border-top:0;margin-bottom:24px}
/* Botón ghost claro (visible sobre el fondo oscuro: filtros, cabeceras) */
.btn-ghost-light{background:#ffffff14;border:1px solid rgba(255,255,255,.24);color:#fff;box-shadow:none}
.btn-ghost-light:hover{background:#ffffff26;border-color:rgba(255,255,255,.42);color:#fff}

/* Leads «Nuevo» estancados (>24 h sin gestionar) */
.leads-table tr.lead-stale td{background:rgba(168,84,76,.07)}
.leads-table tr.lead-stale td:first-child{box-shadow:inset 3px 0 0 var(--st-perdido)}
.queue-item.q-stale{background:rgba(168,84,76,.06)}

/* Renovaciones */
.renov-venc td{background:rgba(168,84,76,.07)}
.renov-pronto td{background:rgba(194,145,47,.06)}
.renov-badge{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  background:var(--st-perdido);color:#fff;padding:2px 8px;border-radius:999px;margin-left:6px}
.renov-badge.pronto{background:var(--st-espera)}
.renov-row{cursor:pointer}
.perf-table tbody tr.renov-row:hover td{background:#faf7f1}
#renovTable{min-width:920px}
.renov-fp{display:flex;align-items:center;gap:12px;margin:16px 0 4px}
.renov-fp label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.renov-fp .input{max-width:240px}

.contab-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.contab-custom{display:inline-flex;align-items:center;gap:8px}
.contab-custom .input{padding:10px 12px}
.contab-dash{color:rgba(255,255,255,.5);font-weight:600}
@media(max-width:600px){.contab-controls{width:100%}.contab-controls .input{flex:1;min-width:0}}
.months{display:flex;flex-direction:column;gap:11px}
.funnel-row.wide{grid-template-columns:132px 1fr 104px}
.funnel-row.wide .name{white-space:normal;line-height:1.25}
.funnel-row.wide .num{width:auto}
@media(max-width:600px){ .funnel-row.wide{grid-template-columns:96px 1fr 88px} }

/* ===== Sábados ===== */
.sat-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.year-switch{display:flex;align-items:center;gap:10px;color:#fff}
.year-switch span{font-family:'Libre Baskerville',serif;font-size:20px;min-width:56px;text-align:center}
.roster-add{display:flex;gap:10px;margin-bottom:14px}
.roster-add .input{max-width:280px}
.roster-list{display:flex;flex-wrap:wrap;gap:8px}
.roster-chip{display:inline-flex;align-items:center;gap:8px;background:var(--soft);border:1px solid var(--line);
  border-radius:999px;padding:7px 8px 7px 14px;font-size:13.5px;font-weight:600;color:var(--text)}
.roster-x{border:0;background:var(--line);color:var(--ink-soft);width:20px;height:20px;border-radius:50%;
  cursor:pointer;font-size:15px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.roster-x:hover{background:var(--st-perdido);color:#fff}

/* Permisos por perfil */
.perms-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
.perms-table thead th{background:var(--soft);text-align:center;padding:12px 14px;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line)}
.perms-table thead th:first-child{text-align:left}
.perms-table td{padding:12px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.perms-table tbody tr:last-child td{border-bottom:0}
.perms-table td.c{text-align:center}
.perm-name b{display:block;font-weight:600;color:var(--text)}
.perm-sub{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.perm-sel{font-family:inherit;font-size:12.5px;font-weight:600;padding:6px 8px;border-radius:8px;
  border:1px solid var(--line);background:var(--paper);color:var(--text);cursor:pointer;min-width:104px}
.perm-sel.lvl-none{color:var(--muted);background:var(--soft)}
.perm-sel.lvl-read{color:#3a5a99;border-color:#c3d0e6;background:#eef3fb}
.perm-sel.lvl-edit{color:#2f6b45;border-color:#bcd9c6;background:#eaf6ee}

.sat-card{margin-bottom:16px}
.sat-month{display:flex;flex-direction:column}
.sat-row{display:flex;align-items:center;gap:16px;padding:11px 4px;border-bottom:1px solid var(--line-2)}
.sat-row:last-child{border-bottom:0}
.sat-date{flex:0 0 84px;font-size:14px;color:var(--ink-soft)}
.sat-date b{color:var(--text)}
.sat-chips{display:flex;flex-wrap:wrap;gap:8px}
.sat-chip{font-family:'Raleway',sans-serif;font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;transition:.15s}
.sat-chip:hover{border-color:var(--accent);color:var(--ink-soft)}
.sat-chip.on{background:var(--green);border-color:var(--green);color:#fff}
.sat-chip.on:hover{background:var(--green-l)}
.sat-chip.ro{cursor:default;opacity:.9}
.sat-chip.ro:hover{border-color:var(--line);color:var(--muted)}
.sat-chip.on.ro:hover{background:var(--green);color:#fff}

/* nav con scroll si hay muchas pestañas */
.tb-nav{overflow-x:auto;scrollbar-width:none}
.tb-nav::-webkit-scrollbar{display:none}

/* ===== Bajas (comisiones) ===== */
.baja-form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.baja-field{display:flex;flex-direction:column;gap:6px}
.baja-field label{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-soft)}
.baja-field:first-child{flex:1;min-width:220px}
.baja-field .input{width:100%}
.baja-search{position:relative;z-index:5}
.baja-results{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 18px 40px -14px rgba(0,0,0,.45);z-index:60;max-height:240px;overflow:auto}
/* La tarjeta de alta de factura debe apilarse por encima de la lista de facturas
   para que el desplegable de clientes no quede tapado por la tarjeta de abajo */
#facturaAddCard{position:relative;z-index:20}
.baja-result{padding:10px 13px;font-size:13.5px;cursor:pointer;border-bottom:1px solid var(--line-2)}
.baja-result:last-child{border-bottom:0}
.baja-result:hover{background:var(--taupe-xl)}

/* ===== Subidor de datos ===== */
.upload-card{margin-bottom:24px}
.upload-drop{border:2px dashed var(--line);border-radius:14px;padding:26px 20px;text-align:center;
  background:var(--soft);transition:.15s}
.upload-drop.over{border-color:var(--accent);background:var(--taupe-xl)}
.upload-drop p{margin:0 0 6px;font-size:14px;color:var(--ink-soft)}
.upload-drop .sect-sub{color:var(--muted)}
.upload-list{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.up-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line-2);
  border-radius:12px;background:#fff}
.up-name{flex:1;min-width:180px;font-weight:600;font-size:13px;color:var(--text);word-break:break-all}
.up-row .input{padding:8px 10px;font-size:13px}
.up-status{font-size:12.5px;font-weight:600;min-width:90px}
.up-status.ok{color:var(--st-venta)}
.up-status.err{color:var(--st-perdido)}

/* ===== Necesidades: navegación con alerta ===== */
.nav-alert{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  padding:0 5px;margin-left:7px;border-radius:999px;background:var(--st-perdido);color:#fff;
  font-size:11px;font-weight:700;font-family:'Raleway',sans-serif}

.needs-banner{background:#f6e6e4;border:1px solid #e6c3bd;color:#a8544c;border-radius:14px;
  padding:12px 16px;margin-bottom:20px;font-size:13px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.needs-banner b{margin-right:4px}
.low-chip{background:#fff;border:1px solid #e6c3bd;border-radius:999px;padding:4px 11px;font-weight:600;font-size:12px}

/* Inventario — manager (lista) */
.inv-list{display:flex;flex-direction:column}
.inv-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 6px;
  border-bottom:1px solid var(--line-2)}
.inv-row:last-child{border-bottom:0}
.inv-row.low{background:#fdf3f1;margin:0 -24px;padding-left:24px;padding-right:24px}
.inv-name{font-weight:600;font-size:15px;color:var(--text)}
.inv-right{display:flex;align-items:center;gap:12px}
.reponer{background:var(--st-perdido);color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;padding:4px 11px;border-radius:999px}

/* Inventario — admin (matriz) */
.inv-matrix{width:100%;border-collapse:collapse;font-size:13.5px;min-width:620px}
.inv-matrix thead th{background:var(--soft);padding:13px 14px;text-align:left;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line)}
.inv-matrix th.c,.inv-matrix td.c{text-align:center}
.inv-matrix td{padding:11px 14px;border-bottom:1px solid var(--line-2)}
.inv-matrix tbody tr:last-child td{border-bottom:0}
.inv-matrix .inv-prod{font-weight:600;color:var(--text)}
.inv-matrix td.low{background:#fdf3f1}

.unit-sel{font-family:'Raleway',sans-serif;font-size:13.5px;font-weight:600;padding:7px 12px;
  border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--text);cursor:pointer;min-width:64px}
.unit-sel:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(189,173,152,.22)}
.unit-sel.low{border-color:var(--st-perdido);color:var(--st-perdido);background:#fdf3f1}

/* Mantenimiento */
.maint-add{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.maint-add select.input{min-width:140px}
.maint-text{flex:1;min-width:220px;min-height:46px;resize:vertical;border-radius:14px;font-family:inherit;
  padding:12px 14px;font-size:14px}
.maint-item{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:15px 20px;
  border-bottom:1px solid var(--line-2)}
.maint-item:last-child{border-bottom:0}
.maint-item.done{opacity:.6}
.maint-item.done .maint-texto{text-decoration:line-through}
.maint-main{min-width:0}
.maint-center{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent-dd);background:var(--soft);padding:3px 10px;border-radius:999px;margin-bottom:6px}
.maint-texto{font-size:14px;color:var(--text);line-height:1.5}
.maint-meta{font-size:11.5px;color:var(--muted);margin-top:5px}
.maint-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
.maint-badge{font-size:11px;font-weight:700;padding:4px 11px;border-radius:999px}
.maint-badge.pend{background:#fdeede;color:#c2912f}
.maint-badge.ok{background:#e5f0e8;color:#2f6b45}
.maint-del{background:transparent;color:var(--muted);border:1px solid var(--line)}
.maint-del:hover{color:var(--st-perdido);border-color:var(--st-perdido)}

/* ===== Modal ===== */
.modal-wrap{position:fixed;inset:0;background:rgba(36,36,36,.5);backdrop-filter:blur(3px);
  display:grid;place-items:center;z-index:50;padding:20px}
.modal{background:var(--paper);border-radius:18px;width:min(700px,96vw);max-height:90vh;
  overflow:auto;position:relative;box-shadow:var(--shadow-lg)}
.modal-close{position:absolute;top:14px;right:16px;background:transparent;border:0;font-size:26px;
  line-height:1;cursor:pointer;color:var(--muted);z-index:2}
.modal-close:hover{color:var(--text)}
.modal-body{padding:30px 32px}
.modal h2{margin:0 0 3px;font-size:24px;font-weight:400}
.modal .sub{color:var(--muted);font-size:12px;margin-bottom:20px;letter-spacing:.08em;
  text-transform:uppercase;font-weight:500}
.info-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;font-size:13px;color:var(--ink-soft);
  background:var(--soft);border:1px solid var(--line-2);border-radius:14px;padding:14px 16px;margin-bottom:22px}
.info-row b{color:var(--text);font-weight:600}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.form-grid .full{grid-column:1/-1}
.field label{display:block;font-size:10.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-soft);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:11px 13px;border:1px solid var(--line);
  border-radius:12px;font-family:inherit;font-size:13.5px;background:var(--paper);color:var(--text);transition:.15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(189,173,152,.22)}
.field textarea{resize:vertical;min-height:68px}
.modal-actions{display:flex;gap:11px;justify-content:flex-end;margin-top:24px;flex-wrap:wrap}

.timeline{margin-top:26px;border-top:1px solid var(--line);padding-top:20px}
.timeline h3{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
  margin:0 0 14px;font-family:'Raleway',sans-serif;font-weight:700}
.note-add{display:flex;gap:9px;margin-bottom:16px}
.note-add input{flex:1}
.tl-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:13px}
.tl-item:last-child{border-bottom:0}
.tl-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:6px;flex:0 0 auto;
  box-shadow:0 0 0 3px var(--accent-soft)}
.tl-item .when{color:var(--muted);font-size:11.5px;margin-top:2px}

.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--dark);color:#fff;
  padding:13px 22px;border-radius:999px;font-size:13.5px;font-weight:600;z-index:80;
  box-shadow:var(--shadow-lg);border:1px solid rgba(189,173,152,.3)}

@media(max-width:600px){
  .form-grid{grid-template-columns:1fr}
  .container{padding:18px 14px 30px}
  .tb-header-inner{height:64px;padding:0 12px}
  .tb-header-logo{display:none}
  .tb-sep{display:none}
  .tb-user{display:none}
  .tb-nav{gap:0}
  .nav-link{padding:9px 11px;font-size:13px}
  .modal-body{padding:24px 20px}
}

/* ============================================================
   PASE DE PROFUNDIDAD (v22)
   Sombras en capas, degradados sutiles, brillo taupe y elevación.
   Mantiene la identidad TB (cremas + serif) pero con volumen.
   ============================================================ */
:root{
  --shadow:0 1px 2px rgba(20,18,16,.05), 0 10px 24px -8px rgba(20,18,16,.10), 0 30px 60px -26px rgba(20,18,16,.20);
  --shadow-lg:0 40px 90px -22px rgba(0,0,0,.55), 0 8px 24px -8px rgba(0,0,0,.4);
  --ring-top:inset 0 1px 0 rgba(255,255,255,.9);
}

/* Fondo: focos de luz en vez de un plano liso */
body{
  background:
    radial-gradient(1150px 620px at 80% -10%, rgba(189,173,152,.16), transparent 60%),
    radial-gradient(920px 640px at 4% 112%, rgba(75,89,81,.24), transparent 62%),
    linear-gradient(155deg,#201f1e 0%,#242625 46%,#2b332e 100%);
  background-attachment:fixed;
}

/* Cabecera con volumen y sombra proyectada */
.tb-header{
  background:linear-gradient(180deg,#2c2c2c,#232323);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 16px 36px -20px rgba(0,0,0,.85);
}

/* Hero: halo de luz taupe detrás del título */
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(660px 280px at 50% 6%, rgba(189,173,152,.18), transparent 70%);
}
.hero-inner{position:relative;z-index:2}

/* Burbujas KPI del hero: cristal con brillo superior y elevación */
.kpi{
  background:linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.045));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 20px 42px -22px rgba(0,0,0,.7);
  transition:transform .28s cubic-bezier(.2,.65,.2,1), box-shadow .28s;
}
.kpi:hover{transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 28px 54px -20px rgba(0,0,0,.75)}

/* Tarjetas: degradado sutil + reborde superior claro + sombra en capas */
.card, .channel-card{
  background:linear-gradient(180deg,#ffffff 0%,#fbf8f2 100%);
  border:1px solid rgba(36,36,36,.06);
  box-shadow:var(--ring-top), var(--shadow);
  transition:transform .28s cubic-bezier(.2,.65,.2,1), box-shadow .28s;
}
.card:not(.no-pad):hover, .channel-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--ring-top), 0 2px 4px rgba(20,18,16,.05),
    0 20px 42px -12px rgba(20,18,16,.18), 0 44px 84px -34px rgba(20,18,16,.24);
}
.channel-card.is-best{box-shadow:0 0 0 1px var(--accent), var(--ring-top), var(--shadow)}
.channel-card.is-best:hover{box-shadow:0 0 0 1px var(--accent), var(--ring-top),
  0 20px 42px -12px rgba(20,18,16,.2), 0 44px 84px -34px rgba(20,18,16,.26)}

/* Inputs con hundido sutil (dan sensación de tallado) */
.input{box-shadow:inset 0 1px 2px rgba(36,36,36,.06)}
.input:focus{box-shadow:inset 0 1px 2px rgba(36,36,36,.05), 0 0 0 3px rgba(189,173,152,.24)}

/* Botones con degradado, brillo y sombra */
.btn-gold{background:linear-gradient(180deg,#c8b7a0,#b6a488);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 8px 18px -8px rgba(138,115,88,.7)}
.btn-gold:hover{background:linear-gradient(180deg,#b6a488,#a2896a);color:#fff}
.btn-dark{background:linear-gradient(180deg,#333,#242424);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px -10px rgba(0,0,0,.75)}
.btn-light{box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 20px -8px rgba(20,18,16,.35)}
.btn-primary{background:linear-gradient(180deg,#586a60,#465448);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 10px 24px -10px rgba(30,44,36,.75)}
.btn-primary:hover{background:linear-gradient(180deg,#4f5f56,#3c4a3f)}
.btn:active{transform:translateY(0)}

/* Colas y tarjetas de contacto: reborde claro para separarlas del fondo */
.channel-bar-fill{background:linear-gradient(90deg,var(--green-l),var(--green))}

/* Modal más elevado y con fondo desenfocado */
.modal{box-shadow:var(--shadow-lg)}
.modal-wrap{background:rgba(20,18,16,.55);backdrop-filter:blur(5px)}

/* Selector de permisos: leve profundidad */
.perm-sel{box-shadow:inset 0 1px 1px rgba(36,36,36,.05)}

/* ============================================================
   LAYOUT v32 — barra lateral de iconos + topbar (estilo panel)
   ============================================================ */
:root{ --side-w:78px; --top-h:62px; }

/* Neutraliza restos del nav horizontal antiguo */
.tb-header{display:none}
.nav-link.is-active::before{display:none!important}

/* ---- Barra superior ---- */
.tb-topbar{position:fixed;top:0;left:0;right:0;height:var(--top-h);z-index:45;
  display:flex;align-items:center;justify-content:space-between;padding:0 22px;
  background:linear-gradient(180deg,#2c2c2c,#232323);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.05),0 12px 30px -18px rgba(0,0,0,.85)}
.tb-topbar-logo{display:flex;align-items:center}
.tb-topbar-logo img{height:24px;display:block}
.tb-topbar-right{display:flex;align-items:center;gap:10px}

/* ---- Barra lateral (rail) ---- */
.tb-side{position:fixed;top:var(--top-h);left:0;bottom:0;width:var(--side-w);z-index:40;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:14px 0 16px;background:linear-gradient(180deg,#242424,#1e1e1e);
  border-right:1px solid rgba(255,255,255,.06)}
.tb-side-nav{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.tb-side .nav-link,.tb-side-gear{position:relative;width:48px;height:48px;border:0;background:transparent;
  border-radius:14px;color:rgba(255,255,255,.74);cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:background .2s,color .2s;padding:0;font-family:inherit}
.tb-side .nav-ic{width:22px;height:22px;display:block;shape-rendering:geometricPrecision}
.tb-side .nav-link:hover,.tb-side-gear:hover{background:#ffffff14;color:#fff}
.tb-side .nav-link.is-active{background:linear-gradient(180deg,rgba(189,173,152,.30),rgba(189,173,152,.15));
  color:var(--cream);box-shadow:inset 0 0 0 1px rgba(189,173,152,.42)}
.tb-side-gear.gear-active{background:rgba(189,173,152,.2);color:var(--accent)}
#navConfigGear:hover .nav-ic{transform:rotate(35deg);transition:transform .3s}
/* Tooltip lateral */
.tb-side .nav-link::after,.tb-side-gear::after{content:attr(data-label);position:absolute;left:58px;
  white-space:nowrap;background:#111;color:#fff;font-size:12px;font-weight:500;padding:6px 10px;
  border-radius:8px;opacity:0;pointer-events:none;transform:translateX(-4px);transition:.15s;z-index:60;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.7)}
.tb-side .nav-link:hover::after,.tb-side-gear:hover::after{opacity:1;transform:translateX(0)}
/* Badge de alerta sobre el icono */
.tb-side .nav-alert{position:absolute;top:5px;right:5px;margin:0;min-width:16px;height:16px;
  padding:0 4px;font-size:10px}

/* ---- Zona principal ---- */
.tb-main{margin-left:var(--side-w);padding-top:var(--top-h)}
.crumb{display:flex;align-items:center;gap:8px;max-width:1240px;margin:0 auto;padding:16px 24px 0;
  font-size:12px;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.45)}
.crumb-root{color:rgba(255,255,255,.6)}
.crumb-sep{color:rgba(255,255,255,.3);font-size:14px}
#crumbView{color:var(--accent)}

/* Modal por encima de topbar/sidebar */
.modal-wrap{z-index:200}

/* ---- Responsive: rail pasa a barra inferior ---- */
@media(max-width:760px){
  .tb-side{top:auto;bottom:0;left:0;right:0;width:auto;height:60px;flex-direction:row;
    padding:0 6px;border-right:0;border-top:1px solid rgba(255,255,255,.08)}
  .tb-side-nav{flex-direction:row;gap:4px;overflow-x:auto;height:100%;align-items:center;
    justify-content:flex-start}
  .tb-side .nav-link,.tb-side-gear{width:44px;height:44px;flex:0 0 auto}
  .tb-side .nav-link::after,.tb-side-gear::after{display:none}
  .tb-main{margin-left:0;padding-bottom:66px}
  .tb-topbar{padding:0 14px}
}

/* ============================================================
   v33 — Burbujas KPI con más carácter + acento en cabeceras
   ============================================================ */
.kpi{position:relative;overflow:hidden;border-radius:18px;border:1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(130px 70px at 100% 0%, rgba(189,173,152,.18), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 22px 44px -22px rgba(0,0,0,.72)}
/* Línea de acento superior */
.kpi::before{content:"";position:absolute;top:0;left:16px;right:16px;height:2px;border-radius:0 0 2px 2px;
  background:linear-gradient(90deg,transparent,rgba(189,173,152,.8),transparent)}
/* Brillo suave en la esquina */
.kpi::after{content:"";position:absolute;right:-34px;bottom:-42px;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(189,173,152,.13),transparent 70%);pointer-events:none}
.kpi .v{position:relative;text-shadow:0 2px 14px rgba(189,173,152,.22)}
.kpi .l,.kpi .s{position:relative}
.kpi:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 28px 54px -20px rgba(0,0,0,.78)}
/* Acentos por tipo */
.kpi.good::before{background:linear-gradient(90deg,transparent,rgba(47,107,69,.9),transparent)}
.kpi.good::after{background:radial-gradient(circle,rgba(75,125,99,.18),transparent 70%)}
.kpi.warn{border-color:rgba(194,145,47,.42)}
.kpi.warn::before{background:linear-gradient(90deg,transparent,rgba(194,145,47,.95),transparent)}
.kpi.warn::after{background:radial-gradient(circle,rgba(194,145,47,.16),transparent 70%)}
.kpi.accent::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent)}

/* Cabeceras de tarjeta con marcador de acento (barra taupe→verde) */
.card-head h2{display:inline-flex;align-items:center;gap:10px}
.card-head h2::before{content:"";width:4px;height:15px;border-radius:2px;flex:0 0 auto;
  background:linear-gradient(180deg,var(--accent),var(--green))}

/* ============================================================
   v34 — Tarjetas blancas con más estilo (brillo de esquina + cabecera con línea)
   ============================================================ */
.card,.channel-card{position:relative}
.card::after,.channel-card::after{content:"";position:absolute;top:0;right:0;width:190px;height:130px;z-index:0;
  pointer-events:none;border-top-right-radius:var(--radius);
  background:radial-gradient(170px 130px at 100% 0%, rgba(189,173,152,.12), transparent 70%)}
.card>*,.channel-card>*{position:relative;z-index:1}
/* Cabecera con línea divisoria sutil */
.card-head{border-bottom:1px solid var(--line-2);padding-bottom:13px;margin-bottom:15px}
.card-head h2{font-size:17px;letter-spacing:.005em}

/* ============================================================
   v35 — Icono en la burbuja KPI + acento en cabeceras de sección
   ============================================================ */
.kpi-ic{margin:0 auto 9px;width:34px;height:34px;border-radius:10px;z-index:2;position:relative;
  display:flex;align-items:center;justify-content:center;color:var(--accent);
  background:rgba(189,173,152,.15);border:1px solid rgba(189,173,152,.24)}
.kpi-ic svg{width:16px;height:16px;display:block}
.kpi.good .kpi-ic{color:#84c79c;background:rgba(75,125,99,.18);border-color:rgba(75,125,99,.32)}
.kpi.warn .kpi-ic{color:#e7b968;background:rgba(194,145,47,.16);border-color:rgba(194,145,47,.34)}
.kpi.accent .kpi-ic{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.24)}

/* Cabeceras de sección (títulos "Rendimiento…") con marcador de acento */
.sect-head h2{display:inline-flex;align-items:center;gap:11px}
.sect-head h2::before{content:"";width:4px;height:18px;border-radius:2px;flex:0 0 auto;
  background:linear-gradient(180deg,var(--accent),var(--green))}

/* ============================================================
   v37 — Burbuja KPI horizontal: icono a la izquierda, texto a la derecha
   ============================================================ */
.hero-stats{grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
.kpi{display:flex;align-items:center;gap:13px;text-align:left;padding:15px 16px}
.kpi-ic{flex:0 0 auto;margin:0;width:40px;height:40px;border-radius:12px}
.kpi-ic svg{width:19px;height:19px}
.kpi-body{min-width:0;flex:1}
.kpi .v{font-size:clamp(23px,2.6vw,30px);margin:0}
.kpi .l{margin-top:5px;text-align:left}
.kpi .s{text-align:left}
/* la línea de acento superior estorba en horizontal: la quitamos */
.kpi::before{display:none}

/* ============================================================
   v38 — Facturas
   ============================================================ */
.factura-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.factura-form .input{flex:1;min-width:140px}
.factura-form .btn{flex:0 0 auto}
.fact-file{display:flex;align-items:center;gap:10px}
.fact-link{color:var(--accent-dd);font-weight:600;text-decoration:none}
.fact-link:hover{text-decoration:underline}
.fact-up{display:inline-flex;align-items:center;cursor:pointer;background:var(--soft);border:1px solid var(--line);
  color:var(--ink-soft);border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:600;transition:.15s}
.fact-up:hover{border-color:var(--accent);color:var(--text)}
.fact-estado{display:inline-block;font-size:11px;font-weight:700;padding:3px 11px;border-radius:999px}
.fact-estado.pend{background:#f4efe9;color:var(--accent-dd)}
.fact-estado.ok{background:#e7f2ea;color:#2f6b45}
.fact-acts{display:flex;gap:8px;align-items:center}
.fact-acts .is-disabled{opacity:.55}
#facturasTable{min-width:860px}

/* v39 — Facturas: fila clicable + indicador de archivo */
.fact-row{cursor:pointer}
.perf-table tbody tr.fact-row:hover td{background:#faf7f1}
.fact-yes{color:#2f6b45;font-weight:600;font-size:12.5px}

/* ============================================================
   v40 — Pantalla de Inicio (resumen)
   ============================================================ */
.ini-card{margin-bottom:20px}
.ini-count{display:inline-block;margin-left:10px;font-size:12px;font-weight:700;padding:2px 10px;
  border-radius:999px;background:var(--soft);color:var(--accent-dd);vertical-align:middle}
.ini-count.week{background:#eef3fb;color:#3a5a99}
.ini-count.next{background:#fff4e5;color:#c2912f}
.ini-count.past{background:#fbece9;color:#a8544c}
.estado-mini{display:inline-block;color:#fff;font-size:10px;font-weight:700;padding:3px 9px;border-radius:999px}

/* ============================================================
   v42 — Separación entre tarjetas + Bolsa de horas
   ============================================================ */
.card{margin-bottom:18px}
.grid-2>.card{margin-bottom:0}
.crumb{display:none}
.horas-inp{max-width:110px;text-align:right;font-variant-numeric:tabular-nums}

/* v43 — Bolsa de horas: resumen anual */
#horasYearTable{min-width:860px;font-size:13px}
#horasYearTable th,#horasYearTable td{padding:10px 12px}
.hy-total td{background:var(--soft);font-weight:600}

/* ============================================================
   v44 — Subpestañas + Gráficos de Contabilidad (SVG)
   ============================================================ */
.subtabs{display:inline-flex;gap:4px;background:#ffffff12;border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:4px;margin-bottom:20px}
.subtab{font-family:'Raleway',sans-serif;border:0;background:transparent;color:rgba(255,255,255,.62);
  font-size:13px;font-weight:600;padding:8px 20px;border-radius:999px;cursor:pointer;transition:.2s}
.subtab.is-active{background:var(--accent);color:var(--dark)}
.subtab:hover:not(.is-active){color:#fff}

.chart-wrap{width:100%}
.chart-svg{width:100%;height:auto;display:block;overflow:visible}
.chart-grid{stroke:var(--line-2);stroke-width:1}
.chart-axis{fill:var(--muted);font-size:10px;font-family:'Raleway',sans-serif}

.donut-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.donut-svg{width:180px;height:180px;flex:0 0 auto}
.donut-total{fill:var(--text);font-family:'Libre Baskerville',serif;font-size:19px}
.donut-sub{fill:var(--muted);font-size:9.5px;text-transform:uppercase;letter-spacing:.09em}
.donut-legend{flex:1;min-width:190px;display:flex;flex-direction:column;gap:10px}
.dl-item{display:flex;align-items:center;gap:10px;font-size:13px}
.dl-dot{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.dl-label{color:var(--text);font-weight:600;flex:1;min-width:0}
.dl-val{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

.chart-bars{display:flex;flex-direction:column;gap:12px}
.cb-row{display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:14px}
.cb-label{font-size:13px;font-weight:600;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-track{height:22px;background:var(--soft);border-radius:999px;overflow:hidden}
.cb-bar{height:100%;border-radius:999px;min-width:2px;transition:width .5s ease}
.cb-val{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
@media(max-width:560px){.cb-row{grid-template-columns:110px 1fr}.cb-val{grid-column:2;text-align:left;font-size:12px}}

/* ============================================================
   v45 — Gráficos profesionales (tooltip, hover, sombras)
   ============================================================ */
.chart-wrap{position:relative}
.chart-line{filter:drop-shadow(0 4px 7px rgba(75,125,99,.22))}
.chart-guide{stroke:#bdad98;stroke-width:1;stroke-dasharray:3 4}
.chart-hoverdot{fill:#fff;stroke-width:2.5}
.chart-svg .cbar{transition:opacity .15s;cursor:pointer}
.chart-svg .cbar.on{opacity:.82}
.donut-track{stroke:var(--line-2)}
.darc{transition:stroke-width .18s cubic-bezier(.2,.65,.2,1);cursor:pointer}
.chart-tip{position:absolute;transform:translate(-50%,-140%);background:#242424;color:#fff;
  font-size:13px;font-weight:600;padding:8px 12px;border-radius:10px;pointer-events:none;white-space:nowrap;
  opacity:0;transition:opacity .12s;z-index:5;box-shadow:0 10px 26px -10px rgba(0,0,0,.6);font-variant-numeric:tabular-nums}
.chart-tip.show{opacity:1}
.chart-tip b{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#bdad98;margin-bottom:2px}
.chart-tip::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#242424}
.dl-item{justify-content:flex-start}
.dl-pct{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums;min-width:40px;text-align:right}

/* ============================================================
   v46 — Geolocalización (mapa de calor)
   ============================================================ */
.geo-filters{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.geo-check{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:rgba(255,255,255,.82);cursor:pointer}
.geo-check input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
#geoMap{width:100%;height:560px;background:#eee9e1}
.geo-legend{padding:14px 20px;font-size:12.5px;color:var(--ink-soft);border-top:1px solid var(--line-2);line-height:1.6}
.geo-legend .gl-scale i{display:inline-block;width:16px;height:11px;border-radius:2px;margin:0 1px;vertical-align:middle}
/* Leaflet: que los controles no tapen la barra lateral/topbar */
.leaflet-pane,.leaflet-top,.leaflet-bottom{z-index:20 !important}
.leaflet-popup-content{font-family:'Raleway',sans-serif;font-size:13px}
.leaflet-container{font-family:'Raleway',sans-serif}

/* ============================================================
   v53 — Vault de contraseñas (zero-knowledge)
   ============================================================ */
.vault-gate{max-width:520px;margin:0 auto 18px;text-align:center;padding:34px 30px}
.vault-h{font-size:20px;margin:0 0 10px;color:var(--text)}
.vault-p{font-size:13.5px;color:var(--ink-soft);line-height:1.65;margin:0 0 22px}
.vault-p b{color:var(--text)}
.vault-form{display:flex;flex-direction:column;gap:11px}
.vault-form .input{width:100%;text-align:center}
.vault-err{margin-top:12px;font-size:13px;font-weight:600;color:#a8544c}

.vault-bar{display:flex;gap:12px;align-items:center;margin-bottom:16px}
.vault-bar .input{flex:1}
#vaultTools{display:flex;gap:9px}

.vault-list{display:flex;flex-direction:column;gap:8px}
.vi-row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;cursor:pointer;
  background:var(--paper);border:1px solid var(--line-2);transition:border-color .15s,box-shadow .15s}
.vi-row:hover{border-color:var(--accent);box-shadow:0 4px 14px -8px rgba(0,0,0,.3)}
.vi-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.vi-title{font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vi-sub{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vi-btn{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--accent-dd);background:transparent;
  border:1px solid var(--line);border-radius:999px;padding:6px 13px;cursor:pointer;text-decoration:none;
  font-family:inherit;transition:.15s}
.vi-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.vi-pwfield{display:flex;gap:8px;align-items:center}
.vi-pwfield input{flex:1;min-width:0}

.vault-log{display:flex;flex-direction:column;gap:1px;max-height:280px;overflow:auto}
.vlog-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line-2);font-size:13px}
.vlog-row:last-child{border-bottom:0}
.vlog-who{font-weight:600;color:var(--text)}
.vlog-act{color:var(--ink-soft);flex:1}
.vlog-when{color:var(--muted);font-size:12px;white-space:nowrap}
@media(max-width:560px){.vault-bar{flex-direction:column;align-items:stretch}}

/* ============================================================
   v54 — Facturas a la gestoría (gastos recibidos)
   ============================================================ */
.gasto-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.gk{background:var(--paper);border:1px solid var(--line-2);border-radius:16px;padding:18px 20px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:4px}
.gk-v{font-family:'Libre Baskerville',serif;font-size:24px;color:var(--text);font-variant-numeric:tabular-nums}
.gk-l{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:600}
.gk.is-pend .gk-v{color:#a8544c}

.gasto-drop{border:2px dashed var(--line);border-radius:16px;padding:38px 24px;text-align:center;
  cursor:pointer;transition:.18s;display:flex;flex-direction:column;align-items:center;gap:9px;
  color:var(--ink-soft);background:var(--soft)}
.gasto-drop:hover,.gasto-drop.is-over{border-color:var(--accent);background:var(--cream)}
.gasto-drop svg{width:38px;height:38px;color:var(--accent-d)}
.gasto-drop b{font-size:15px;color:var(--text)}
.gasto-drop span{font-size:12.5px;color:var(--muted);max-width:520px;line-height:1.6}
.gasto-hint{font-size:12.5px;font-weight:600;color:var(--accent-dd);min-height:16px}

.gasto-filters{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:18px 20px;
  border-bottom:1px solid var(--line-2)}
.gasto-filters .input{flex:0 1 auto}
#gastoBuscar{flex:1;min-width:220px}
.gasto-dt{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em}
.gasto-dt .input{padding:8px 12px;font-size:13px}

.gasto-nif{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:2px}
.gasto-warn td{background:rgba(168,84,76,.05)}
.gasto-warn td:first-child{box-shadow:inset 3px 0 0 var(--st-perdido)}
.gasto-flag{color:#a8544c;font-weight:700;cursor:help}

.gasto-estado{font-size:11.5px;font-weight:700;padding:6px 13px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;font-family:inherit;white-space:nowrap;transition:.15s}
.gasto-estado.is-pend{background:#fbece9;color:#a8544c;border-color:#f0d5d0}
.gasto-estado.is-pend:hover{background:#a8544c;color:#fff}
.gasto-estado.is-ok{background:#e5f0e8;color:#2f6b45;border-color:#cfe3d6}
.gasto-estado.is-ok:hover{background:#2f6b45;color:#fff}

.gasto-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 4px}
.gasto-chips-l{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.gasto-chip{font-size:12px;font-weight:600;font-family:inherit;background:var(--soft);color:var(--accent-dd);
  border:1px solid var(--line);border-radius:999px;padding:5px 12px;cursor:pointer;font-variant-numeric:tabular-nums}
.gasto-chip:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

.gasto-check{margin-top:14px;padding:11px 14px;border-radius:11px;font-size:13px;font-weight:600}
.gasto-check.is-ok{background:#e5f0e8;color:#2f6b45}
.gasto-check.is-bad{background:#fbece9;color:#a8544c}
.gasto-check.is-none{background:var(--soft);color:var(--muted)}
.sub.gasto-manual{color:#a8544c}
@media(max-width:700px){.gasto-kpis{grid-template-columns:1fr}}

/* ============================================================
   v55 — Rail agrupado por categorías (ya no cabían 13 iconos)
   ============================================================ */
.tb-side-nav{gap:6px;overflow:visible}
.tb-side .nav-link,.tb-side-gear,.nav-gbtn{width:44px;height:44px}

.nav-group{position:relative;width:100%;display:flex;justify-content:center}
.nav-group.hidden{display:none}
.nav-gbtn{position:relative;border:0;background:transparent;border-radius:14px;padding:0;
  color:rgba(255,255,255,.74);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s;font-family:inherit}
.nav-gbtn .nav-ic{width:22px;height:22px;display:block;shape-rendering:geometricPrecision}
.nav-gbtn:hover{background:#ffffff14;color:#fff}
.nav-group.is-active .nav-gbtn{background:linear-gradient(180deg,rgba(189,173,152,.30),rgba(189,173,152,.15));
  color:var(--cream);box-shadow:inset 0 0 0 1px rgba(189,173,152,.42)}
.nav-group.is-open .nav-gbtn{background:#ffffff1f;color:#fff}

/* Punto de aviso agregado del grupo (algún hijo tiene badge) */
.nav-gdot{position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;
  background:var(--st-perdido);box-shadow:0 0 0 2px #232323}
.nav-gdot.hidden{display:none}

/* Tooltip del botón de grupo (mismo estilo que el resto del rail) */
.nav-gbtn::after{content:attr(data-label);position:absolute;left:58px;white-space:nowrap;background:#111;
  color:#fff;font-size:12px;font-weight:500;padding:6px 10px;border-radius:8px;opacity:0;pointer-events:none;
  transform:translateX(-4px);transition:.15s;z-index:60;box-shadow:0 8px 20px -8px rgba(0,0,0,.7)}
.nav-gbtn:hover::after{opacity:1;transform:translateX(0)}
.nav-group.is-open .nav-gbtn::after{opacity:0}

/* Panel desplegable */
.nav-fly{position:absolute;left:var(--side-w);top:-6px;min-width:212px;padding:8px;border-radius:14px;
  background:linear-gradient(180deg,#2c2c2c,#232323);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 22px 50px -18px rgba(0,0,0,.85);z-index:70;
  opacity:0;visibility:hidden;transform:translateX(-6px);transition:opacity .15s,transform .15s,visibility .15s}
.nav-group.is-open .nav-fly{opacity:1;visibility:visible;transform:translateX(0)}
.nav-fly-h{font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;
  color:rgba(255,255,255,.42);padding:6px 10px 8px}

/* Los items dentro del panel: fila con icono + texto (no el cuadrado del rail) */
.tb-side .nav-fly .nav-link{width:100%;height:auto;justify-content:flex-start;gap:11px;
  padding:9px 10px;border-radius:10px;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.8)}
.tb-side .nav-fly .nav-link .nav-ic{width:18px;height:18px;flex:0 0 auto}
.nav-fly .nav-tx{white-space:nowrap}
.tb-side .nav-fly .nav-link:hover{background:#ffffff14;color:#fff}
.tb-side .nav-fly .nav-link.is-active{background:linear-gradient(180deg,rgba(189,173,152,.30),rgba(189,173,152,.15));
  color:var(--cream);box-shadow:inset 0 0 0 1px rgba(189,173,152,.42)}
.tb-side .nav-fly .nav-link.hidden{display:none}
/* Dentro del panel no queremos el tooltip flotante ni el badge en esquina */
.tb-side .nav-fly .nav-link::after{display:none}
.tb-side .nav-fly .nav-alert{position:static;margin-left:auto}
@media(max-width:760px){.nav-fly{min-width:186px}}

/* En móvil el rail es una barra inferior: el panel debe abrirse HACIA ARRIBA.
   Además hay que quitar el overflow-x:auto del nav, o recortaría el desplegable. */
@media(max-width:760px){
  .tb-side-nav{overflow:visible;justify-content:center}
  .nav-group{width:auto;flex:0 0 auto}
  .nav-gbtn::after{display:none}
  .nav-fly{left:50%;right:auto;top:auto;bottom:54px;margin-left:-106px;transform:translateY(6px)}
  .nav-group.is-open .nav-fly{transform:translateY(0)}
}

/* ============================================================
   v59 — "A revisar": la factura no lleva el CIF de la sociedad
   ============================================================ */
.gasto-kpis{grid-template-columns:repeat(4,1fr)}
.gk.is-rev .gk-v{color:#a8544c}

.gasto-aviso{margin:14px 0 4px;padding:13px 15px;border-radius:12px;font-size:13px;line-height:1.6;
  background:#fbece9;color:#8a3f38;border:1px solid #f0d5d0}
.gasto-aviso b{color:#7a352f}
.gasto-aviso-ok{display:flex;align-items:center;gap:8px;margin-top:10px;font-weight:600;cursor:pointer}
.gasto-aviso-ok input{width:16px;height:16px;cursor:pointer}

.gasto-badge-rev{display:inline-block;margin-left:7px;font-size:9.5px;font-weight:800;letter-spacing:.07em;
  background:#a8544c;color:#fff;padding:2px 7px;border-radius:999px;vertical-align:middle;cursor:help}
.gasto-rev td{background:rgba(168,84,76,.09)}
.gasto-rev td:first-child{box-shadow:inset 3px 0 0 #a8544c}

.gasto-chk{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink-soft);
  white-space:nowrap;cursor:pointer}
.gasto-chk input{width:16px;height:16px;cursor:pointer}
@media(max-width:700px){.gasto-kpis{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   v60 — Gastos: 2 pestañas, selección múltiple, 3 estados, preview
   ============================================================ */
#gastoSubtabs{margin-bottom:16px}
.subtab-n{display:inline-block;margin-left:7px;font-size:11px;font-weight:700;padding:1px 8px;
  border-radius:999px;background:var(--soft);color:var(--accent-dd)}
.subtab.is-active .subtab-n{background:var(--accent);color:#fff}
.subtab-n.is-rev{background:#fbece9;color:#a8544c}
.subtab.is-active .subtab-n.is-rev{background:#a8544c;color:#fff}

/* Selección */
.perf-table th.gsel,.perf-table td.gsel{width:34px;padding-left:16px;padding-right:0}
.gsel input{width:16px;height:16px;cursor:pointer}
.perf-table tr.is-sel td{background:#f4efe6}
.perf-table td.gacc{width:40px;text-align:right;padding-right:16px}
.gasto-del{background:transparent;border:0;color:var(--muted);font-size:15px;line-height:1;cursor:pointer;
  padding:5px 7px;border-radius:8px;font-family:inherit;transition:.15s}
.gasto-del:hover{background:#fbece9;color:#a8544c}

.gasto-bulk{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 20px;
  background:var(--cream);border-bottom:1px solid var(--line)}
.gasto-bulk #gastoBulkN{font-weight:700;font-size:13px;color:var(--text)}
.gasto-bulk .input{padding:8px 12px;font-size:13px}

/* Estado con tres opciones */
select.gasto-estado{-webkit-appearance:none;appearance:none;padding:6px 26px 6px 13px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23666' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:9px}
select.gasto-estado.is-pago{background-color:#fff4e5;color:#8a6420;border-color:#f0e0c4}
select.gasto-estado.is-pago:hover{background-color:#c2912f;color:#fff}

/* Ficha en dos columnas: la factura a la izquierda */
.modal-ancho .modal{width:min(1180px,96vw)}
.gasto-cols{display:block}
.gasto-cols.has-prev{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:24px;align-items:start}
.gasto-prev{position:sticky;top:0;display:flex;flex-direction:column;gap:9px}
.gasto-prev object{width:100%;height:min(66vh,620px);border:1px solid var(--line);border-radius:12px;
  background:#fff;display:block}
.gasto-prev-err{padding:40px 24px;text-align:center;color:var(--muted);font-size:13px;line-height:2.4}
.gasto-prev img{width:100%;height:min(66vh,620px);object-fit:contain;border:1px solid var(--line);
  border-radius:12px;background:var(--soft);display:block}
.gasto-prev-pie{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.gasto-prev-nom{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.gasto-prev-open{font-size:12px;font-weight:600;color:var(--accent-dd);text-decoration:none;margin-left:auto}
.gasto-prev-open:hover{text-decoration:underline}
.gasto-pane{min-width:0}
.gasto-cols.has-prev .form-grid{grid-template-columns:1fr 1fr}
@media(max-width:900px){
  .gasto-cols.has-prev{grid-template-columns:1fr}
  .gasto-prev{position:static}
  .gasto-prev object,.gasto-prev img{height:52vh}
}

/* ============================================================
   v62 — Restyle estilo WEMOOV (colores TrainingBoutique):
   KPIs y tarjetas con línea de acento superior, más limpios
   ============================================================ */

/* --- Burbujas KPI: tarjeta clara con línea de acento arriba (firma WEMOOV) --- */
.kpi{
  background:var(--paper);
  border:1px solid var(--line-2);
  border-radius:15px;
  box-shadow:0 1px 2px rgba(36,36,36,.04), 0 18px 36px -24px rgba(36,36,36,.4);
  position:relative; overflow:hidden;
  padding:16px 19px;
  transition:transform .2s cubic-bezier(.2,.65,.2,1), box-shadow .2s;
}
.kpi::before{        /* línea de acento superior a todo el ancho */
  content:""; position:absolute; top:0; left:0; right:0; height:3px; display:block;
  background:linear-gradient(90deg,var(--accent),var(--green)); opacity:1;
}
.kpi::after{display:none}   /* fuera el brillo de esquina, buscamos limpieza */
.kpi:hover{transform:translateY(-2px);
  box-shadow:0 2px 5px rgba(36,36,36,.06), 0 24px 44px -22px rgba(36,36,36,.45)}
.kpi .v{color:var(--text); text-shadow:none; font-size:clamp(23px,2.5vw,29px); letter-spacing:-.01em}
.kpi .l{color:var(--muted); letter-spacing:.085em}
.kpi .s{color:var(--accent-dd)}
.kpi-ic{color:var(--accent-dd); background:var(--accent-soft); border-color:transparent}

/* Acentos por tipo: línea superior + valor + icono */
.kpi.good::before{background:linear-gradient(90deg,var(--green),var(--st-venta))}
.kpi.good .v{color:var(--st-venta)}
.kpi.good .kpi-ic{color:var(--st-venta); background:rgba(47,107,69,.1)}
.kpi.warn{border-color:var(--line-2)}
.kpi.warn::before{background:linear-gradient(90deg,#d6a244,var(--st-espera))}
.kpi.warn .v{color:#b07d1e}
.kpi.warn .kpi-ic{color:var(--st-espera); background:rgba(194,145,47,.12)}
.kpi.accent::before{background:linear-gradient(90deg,var(--accent),var(--accent-dd))}
.kpi.accent .v{color:var(--text)}

/* Separador del bloque hero: en tono claro, ya no sobre cristal */
.hero-stats{border-top:1px solid rgba(255,255,255,.14)}

/* --- Gastos .gk: mismo lenguaje que los KPI --- */
.gk{border:1px solid var(--line-2); border-radius:15px; padding:17px 20px; position:relative; overflow:hidden;
  box-shadow:0 1px 2px rgba(36,36,36,.04), 0 18px 36px -24px rgba(36,36,36,.4)}
.gk::before{content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--accent),var(--green))}
.gk-v{font-size:26px;letter-spacing:-.01em}
.gk-l{letter-spacing:.085em}
.gk.is-pend::before,.gk.is-rev::before{background:linear-gradient(90deg,#d6a244,var(--st-perdido))}

/* --- Tarjetas de contenido: más limpias (sin glow de esquina) --- */
.card::after,.channel-card::after{display:none}
.card,.channel-card{box-shadow:0 1px 2px rgba(36,36,36,.04), 0 20px 44px -28px rgba(36,36,36,.34);
  border-color:var(--line-2)}
.card-head h2{font-size:16px;letter-spacing:.005em}

/* ============================================================
   v63 — TEMA OSCURO estilo CRM-Planner de WEMOOV (dark-on-dark),
   con los colores cálidos de TrainingBoutique. Todo el bloque es
   un override al final: revertir = borrar de aquí abajo.
   ============================================================ */
:root{
  --text:#efe7d9; --ink-soft:#cabfac; --muted:#a0977f;
  --paper:#26241f;      /* superficie de tarjeta (panel) */
  --soft:#2d2a24;       /* cabeceras de tabla, inputs, tracks */
  --cream:#332f28;      /* hover / superficies elevadas */
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.055);
  --accent-soft:rgba(189,173,152,.15);
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 20px 44px -22px rgba(0,0,0,.66);
  --shadow-lg:0 34px 80px -26px rgba(0,0,0,.75);
}
/* Fondo de página: casi negro cálido con halo taupe/verde muy suave */
body{
  background:
    radial-gradient(1000px 600px at 84% -10%, rgba(189,173,152,.09), transparent 60%),
    radial-gradient(850px 520px at -6% 108%, rgba(75,89,81,.11), transparent 55%),
    #1a1815;
  background-attachment:fixed;
}

/* Superficies que estaban en blanco puro */
.baja-results{background:var(--paper)}
.sat-chip{background:var(--soft);color:var(--ink-soft)}
.login-card{border:1px solid var(--line)}

/* Inputs oscuros */
.input::placeholder{color:var(--muted)}
input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.72)}

/* Hovers de fila / selección → oscuros */
.queue-item:hover,
.leads-table tbody tr:hover td,
.perf-row:hover td,
.perf-detail td,
.perf-table tbody tr.renov-row:hover td,
.perf-table tbody tr.fact-row:hover td{background:rgba(255,255,255,.045)}
.perf-row.open td{background:rgba(255,255,255,.06)}
.perf-table tr.is-sel td{background:rgba(189,173,152,.12)}

/* Pastillas de estado: fondo translúcido del tono + texto claro del tono */
.rec-boost,.maint-badge.ok,.gasto-check.is-ok{background:rgba(47,107,69,.2);color:#74c493}
.rec-cut,.gasto-check.is-bad,.subtab-n.is-rev{background:rgba(168,84,76,.2);color:#e08e83}
.rec-keep{background:rgba(189,173,152,.16);color:#c9b99e}
.rec-watch,.gasto-check.is-none{background:rgba(255,255,255,.06);color:#a49b8b}
.perm-sel.lvl-read{color:#8fabdd;border-color:rgba(58,90,153,.42);background:rgba(58,90,153,.18)}
.needs-banner{background:rgba(168,84,76,.15);border-color:rgba(168,84,76,.4);color:#e08e83}

.ini-count{background:rgba(255,255,255,.08);color:var(--accent)}
.ini-count.week{background:rgba(58,90,153,.22);color:#8fabdd}
.ini-count.next{background:rgba(194,145,47,.2);color:#e0b25e}
.ini-count.past{background:rgba(168,84,76,.22);color:#e08e83}

/* Selector de estado de gastos + flecha clara */
select.gasto-estado{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a99' stroke-width='1.6'/%3E%3C/svg%3E")}
.gasto-estado.is-pend{background-color:rgba(168,84,76,.2);color:#e08e83;border-color:rgba(168,84,76,.38)}
.gasto-estado.is-ok{background-color:rgba(47,107,69,.2);color:#74c493;border-color:rgba(47,107,69,.38)}
select.gasto-estado.is-pago{background-color:rgba(194,145,47,.2);color:#e0b25e;border-color:rgba(194,145,47,.38)}

.gasto-aviso{background:rgba(168,84,76,.14);border-color:rgba(168,84,76,.35);color:#e6a79d}
.gasto-aviso b{color:#f0c3ba}
.subtab-n{background:rgba(255,255,255,.08);color:var(--accent)}
.gasto-del:hover{background:rgba(168,84,76,.18);color:#e08e83}

/* KPIs oscuros: la línea de acento se mantiene; valores/iconos con tonos claros */
.kpi.good .v,.gk.is-ok .gk-v{color:#74c493}
.kpi.warn .v{color:#e0b25e}
.kpi.good .kpi-ic{color:#74c493;background:rgba(47,107,69,.16)}
.kpi.warn .kpi-ic{color:#e0b25e;background:rgba(194,145,47,.16)}
.gk.is-pend .gk-v,.gk.is-rev .gk-v{color:#e08e83}

/* Cabeceras de sección y tarjeta: texto claro */
.card-head h2{color:var(--text)}

/* v63 (cont.) — tarjetas de contenido a panel oscuro */
:root{ --ring-top:inset 0 1px 0 rgba(255,255,255,.05); }
.card, .channel-card{
  background:linear-gradient(180deg,#2b2822 0%,#252219 100%) !important;
  border:1px solid var(--line-2);
}
.login-card input:focus{background:var(--soft)}

/* ============================================================
   v64 — Sin línea de acento en los KPI. Solo un borde de hilo
   claro en TODAS las tarjetas y KPIs, como el CRM-Planner.
   ============================================================ */
.kpi::before,.gk::before{display:none !important}
.kpi,.gk,.card,.channel-card{border:1px solid rgba(255,255,255,.11) !important}
.kpi.warn,.kpi.good,.kpi.accent{border-color:rgba(255,255,255,.11) !important}

/* ============================================================
   v65 — Quitar el separador superior de la fila de KPIs
   (la línea que cruzaba por encima de todas las tarjetas).
   ============================================================ */
.hero-stats{border-top:0 !important}

/* v66 — Prueba de conexión con Timp (Configuración) */
.timp-result{margin-top:14px}
.timp-msg{padding:11px 14px;border-radius:11px;font-size:13.5px;font-weight:600}
.timp-msg.ok{background:rgba(47,107,69,.2);color:#74c493}
.timp-msg.err{background:rgba(168,84,76,.2);color:#e08e83}
.timp-sede{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 14px;margin-top:8px;border:1px solid var(--line-2);border-radius:11px;background:var(--soft)}
.timp-sede-n{font-weight:600;color:var(--text)}
.timp-uuid{font-size:11.5px;color:var(--muted);font-family:monospace;user-select:all}

/* v69 — Sincronización con Timp (barra de progreso) */
.timp-sync{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.timp-sync-prog{margin-top:10px}
.timp-bar{height:7px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:8px}
.timp-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--green));transition:width .2s}

/* v72 — "Vienen hoy y les toca renovar" (Inicio) */
#inicioHoy{margin-bottom:18px}
.hoy-list{display:flex;flex-direction:column;gap:2px}
.hoy-row{display:flex;align-items:center;gap:16px;padding:11px 4px;border-bottom:1px solid var(--line-2)}
.hoy-row:last-child{border-bottom:0}
.hoy-hora{flex:0 0 auto;min-width:58px;font-variant-numeric:tabular-nums;font-weight:800;font-size:16px;
  color:var(--accent);font-family:'Libre Baskerville',serif}
.hoy-info{min-width:0;display:flex;flex-direction:column;gap:2px}
.hoy-nombre{font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hoy-sub{font-size:12.5px;color:var(--muted)}

/* v74 — botón ↻ girando mientras fuerza la sincronización con Timp */
.tb-icon-btn.is-spinning{animation:tb-spin .8s linear infinite;opacity:.7;cursor:progress}
@keyframes tb-spin{to{transform:rotate(360deg)}}

/* v78 — Parte diario */
.parte-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:720px){.parte-grid{grid-template-columns:1fr}}
.parte-field{display:flex;flex-direction:column;gap:3px}
.parte-lbl{font-weight:700;font-size:.92rem}
.parte-hint{font-size:.76rem;color:var(--muted);margin-bottom:3px}
.parte-ta{resize:vertical;min-height:92px;line-height:1.45;font:inherit;width:100%}
.parte-actions{display:flex;align-items:center;gap:12px;margin-top:16px}
.parte-saved{font-size:.85rem;color:var(--muted)}
.parte-res{margin-bottom:12px}
.parte-res-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.parte-res-date{background:none;border:0;padding:0;cursor:pointer;font-weight:800;font-size:1rem;color:var(--text);text-transform:capitalize;border-bottom:1.5px dashed var(--line)}
.parte-res-date:hover{color:var(--brand,#c8102e)}
.parte-res-centro{font-size:.72rem}
.parte-res-by{font-size:.76rem;color:var(--muted)}
.parte-res-body{display:flex;flex-direction:column;gap:8px}
.parte-sec{display:flex;flex-direction:column;gap:1px}
.parte-sec-lbl{font-size:.7rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.parte-sec-tx{white-space:pre-wrap;line-height:1.45;font-size:.92rem}
.parte-sec-tx mark{background:rgba(255,209,102,.38);color:inherit;border-radius:3px;padding:0 2px}

/* v79 — Profesionales + badges */
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.72rem;font-weight:700;
  background:rgba(189,173,152,.22);border:1px solid var(--line);color:var(--text);white-space:nowrap}
.btn-danger{background:rgba(200,60,60,.14);border:1px solid rgba(200,60,60,.4);color:#e06a6a}
.btn-danger:hover:not(:disabled){background:rgba(200,60,60,.24)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.pro-create{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pro-create .input{min-width:160px}
.pro-create #proNombre{flex:1;min-width:200px}
.pro-preview{flex-basis:100%;font-size:.8rem;color:var(--muted)}
.pro-add-out{flex-basis:100%;font-size:.88rem;min-height:1.1em}
.pro-ok{color:#4b7d63}.pro-err{color:#c25a4c}
.pro-legend{margin-bottom:18px}
.pro-legend-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pro-legend-list li{display:flex;gap:9px;align-items:baseline;font-size:.9rem;line-height:1.4}
.pro-legend-list .badge{flex:0 0 auto;min-width:74px;text-align:center}
tr.pro-inactive{opacity:.5}
.pro-actions-cell{white-space:nowrap;display:flex;gap:6px}
#prosTable .input{min-width:130px;padding:5px 8px}

/* v80 — matriz de permisos por rol */
.rp-table th{font-size:.74rem;white-space:nowrap}
.rp-table td{padding:6px 5px}
.rp-sel{min-width:104px;padding:5px 7px;font-size:.82rem}
.rp-sel.lvl-none{opacity:.6}
.rp-sel.lvl-read{border-color:rgba(120,150,200,.5)}
.rp-sel.lvl-edit{border-color:rgba(75,125,99,.6);background:rgba(75,125,99,.08)}

/* ================================================================
   BOOTIX · tema por sociedad (multiempresa).
   Las variables --accent* / --bx-bg* / --bx-display / --bx-body las fija
   app.js (aplicarTemaEmpresa) al elegir empresa en el selector, sobre
   document.documentElement (inline → gana a este :root). Aquí van los
   VALORES POR DEFECTO (The Bootix Group), que también valen para el login.
   Este bloque va el ÚLTIMO: gana por orden de origen al tema de base.
   ================================================================ */
:root{
  --accent:#c9a96a; --accent-d:#b3925c; --accent-dd:#8a7358; --accent-soft:#eaddc3;
  --bx-bg1:#0a0a0b; --bx-bg2:#1a1408;
  --bx-display:'Space Grotesk',system-ui,sans-serif;
  --bx-body:'Inter',-apple-system,Segoe UI,Roboto,sans-serif;
}
/* StretchPro (fuente propia de WEMOOV) autohospedada para su tema */
@font-face{
  font-family:'StretchPro';
  src:url('fonts/StretchPro.otf') format('opentype');
  font-weight:normal;font-style:normal;font-display:swap;
}
body{
  background:var(--bx-bg1);
  background-image:linear-gradient(135deg,var(--bx-bg1) 0%,var(--bx-bg2) 100%);
  font-family:var(--bx-body);
  transition:background-color .5s ease;
}
/* Titulares de sección y cuerpo → fuente de CUERPO de la marca (legible siempre).
   El titular de MARCA (display) se reserva al hero y al login, que es donde luce. */
h1,h2,h3{font-family:var(--bx-body)}
.hero-title,.login-card h1{font-family:var(--bx-display)}
.login-wrap{background:radial-gradient(130% 100% at 50% -10%,var(--bx-bg2) 0%,var(--bx-bg1) 55%)}
.hero-title em,.login-card h1 em{color:var(--accent)}
/* WEMOOV: StretchPro es muy ancha → achico el hero para que no desborde */
:root[data-empresa="B72847502"] .hero-title{font-size:clamp(1.7rem,3.6vw,2.9rem);letter-spacing:.01em}

/* Marca en la barra superior — SIEMPRE en la tipografía del grupo (Space Grotesk),
   no cambia por sociedad: es el nombre del holding y así nunca desborda la barra. */
.bx-brand{gap:11px;text-decoration:none}
.bx-mark{height:26px;width:26px;display:block;border-radius:7px}
.bx-word{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.14em;color:#fff;white-space:nowrap}
.bx-login-mark{height:52px!important;width:52px}

/* Selector de sociedad activa */
.bx-empresa{display:inline-flex;align-items:center;gap:9px;padding:5px 8px 5px 14px;
  background:rgba(255,255,255,.06);border:1px solid var(--accent);border-radius:999px;
  transition:border-color .4s ease}
.bx-empresa-lbl{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent)}
#empresaSel{font-family:var(--bx-body);font-size:13px;font-weight:600;color:#fff;
  background:transparent;border:0;outline:none;cursor:pointer;padding:4px 22px 4px 4px;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 4px center;background-size:11px}
#empresaSel option{color:#242424;background:#fff}

/* Rail y acentos: usan --accent (cambian con la empresa) */
.tb-side .nav-link.is-active,.tb-side .nav-fly .nav-link.is-active{
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 30%,transparent),color-mix(in srgb,var(--accent) 12%,transparent))}
.tb-icon-btn.gear-active{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.tb-cta:hover{background:var(--bx-bg2)}

@media (max-width:720px){
  .bx-word{display:none}
  .bx-empresa-lbl{display:none}
  .bx-empresa{padding:5px 6px 5px 12px}
}

/* ================================================================
   BOOTIX · logo de marca en el hero + propagación del color de marca
   a los componentes que estaban hardcodeados (botón principal, filas
   seleccionadas, KPIs de facturas). Va el ÚLTIMO: gana por orden.
   ================================================================ */
.bx-emp-logo{display:block;margin:0 auto 16px;max-width:230px;object-fit:contain;object-position:center}
.bx-emp-logo.invert{filter:invert(1) brightness(2.2)}

/* Botón principal (Guardar, Añadir, Abrir…) → color de la marca activa */
.btn-gold{
  background:linear-gradient(180deg,var(--accent),var(--accent-d))!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),
    0 8px 18px -8px color-mix(in srgb,var(--accent) 65%,transparent)!important;
}
.btn-gold:hover{background:linear-gradient(180deg,var(--accent-d),var(--accent-dd))!important;color:#fff!important}

/* Fila seleccionada en la tabla → tinte de marca */
.perf-table tr.is-sel td{background:color-mix(in srgb,var(--accent) 16%,transparent)!important}

/* KPIs de facturas (.gk): barra de acento superior con el color de marca.
   Los estados semánticos (pendiente/a validar) mantienen ámbar/rojo. */
.gk{position:relative;overflow:hidden}
.gk::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;display:block!important;
  background:linear-gradient(90deg,var(--accent),var(--accent-dd));
}
.gk.is-pend::before,.gk.is-rev::before{
  background:linear-gradient(90deg,#d6a244,var(--st-perdido))!important;
}
/* Exportar CSV: borde de marca al pasar por encima */
.btn-ghost-light:hover{border-color:var(--accent)!important}

/* ================================================================
   BOOTIX · TARJETAS teñidas con el color de la marca activa.
   Antes todas las tarjetas (KPIs, importar, tabla) salían del mismo
   gris en cualquier empresa. Ahora la superficie usa el oscuro de
   marca (--bx-bg2) y el borde su acento → cada empresa "se nota".
   ================================================================ */
.card, .gk, .channel-card{
  background:var(--bx-bg2) !important;
  border:1px solid color-mix(in srgb, var(--accent) 24%, rgba(255,255,255,.06)) !important;
}
/* KPIs: además, un halo de acento muy suave para reforzar el color */
.gk{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
    var(--bx-bg2) !important;
}
/* Zona de importar: borde discontinuo y relleno con el color de la marca (siempre) */
.gasto-drop{
  border-color:color-mix(in srgb, var(--accent) 42%, transparent) !important;
  background:color-mix(in srgb, var(--accent) 6%, transparent) !important;
}
.gasto-drop:hover, .gasto-drop.is-over{
  border-color:var(--accent) !important;
  background:color-mix(in srgb, var(--accent) 13%, transparent) !important;
}
/* Cabecera de la tabla: tinte de marca en vez del gris neutro */
.perf-table thead th{
  background:color-mix(in srgb, var(--accent) 12%, var(--bx-bg2)) !important;
}

/* ================================================================
   BOOTIX · ajustes finales
   - Sin barra de acento superior en las tarjetas KPI.
   - Icono del rail izquierdo en el color de la marca (antes usaba
     --cream = marrón oscuro en tema oscuro → no se veía).
   ================================================================ */
.gk::before{display:none !important}
.tb-side .nav-link.is-active,
.tb-side .nav-link.is-active .nav-ic,
.tb-side-gear.gear-active,
.tb-side-gear.gear-active .nav-ic{color:var(--accent) !important}

/* ================================================================
   BOOTIX · selector de EMPRESA en la ficha de revisión (bandeja única).
   La sociedad detectada por CIF viene pre-elegida; se confirma o corrige.
   ================================================================ */
.gasto-empresa-box{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:2px 0 18px;
  padding:13px 16px;border-radius:12px;
  border:1px solid color-mix(in srgb, var(--accent) 34%, rgba(255,255,255,.12));
  background:color-mix(in srgb, var(--accent) 9%, transparent)}
.gasto-empresa-l{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.gasto-empresa-sel{flex:1;min-width:190px;font-size:14px;font-weight:600;padding:9px 12px;border-radius:9px;
  background:var(--soft);color:var(--text);border:1px solid rgba(255,255,255,.2);cursor:pointer}
.gasto-empresa-sel option{color:#242424;background:#fff}
.gasto-empresa-hint{font-size:12px;color:var(--muted)}
.gasto-empresa-box.is-auto{border-color:color-mix(in srgb, var(--accent) 55%, transparent)}
.gasto-empresa-box.is-auto .gasto-empresa-hint{color:#74c493;font-weight:600}

/* ================================================================
   BOOTIX · Bandeja de entrada (subida única para todas las sociedades),
   separada visualmente del listado por empresa.
   ================================================================ */
.bx-inbox{margin-bottom:22px}
.bx-inbox-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.bx-inbox-title{font-size:19px;margin:0 0 4px}
.bx-inbox-badge{flex:0 0 auto;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:6px 13px;border-radius:999px;white-space:nowrap;
  color:var(--accent);
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 42%, transparent)}
/* Separador visual entre la bandeja (global) y el listado (de una empresa) */
.gasto-list-head{padding-top:6px;border-top:1px solid rgba(255,255,255,.08);margin-top:4px}
.gasto-list-head h2 #gastoEmpNombre{color:var(--accent)}
@media(max-width:640px){.bx-inbox-head{flex-direction:column;gap:10px}}

/* ================================================================
   BOOTIX · Escáner (pestaña aparte): cola "por validar" + badge.
   ================================================================ */
.escaner-badge{color:var(--muted);background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.16)!important}
.escaner-hay .escaner-badge{color:#e08e83;background:rgba(168,84,76,.18);
  border-color:rgba(168,84,76,.42)!important}
.escaner-list{display:flex;flex-direction:column;gap:10px}
.escaner-empty{padding:22px;text-align:center;color:var(--muted);font-size:13.5px}
.escaner-item{display:flex;align-items:center;gap:14px;padding:13px 15px;border-radius:12px;
  background:color-mix(in srgb, var(--accent) 6%, transparent);border:1px solid rgba(255,255,255,.10)}
.escaner-item-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.escaner-item-main b{font-size:14px;color:var(--text)}
.escaner-item-sub{font-size:12px;color:var(--muted)}
.escaner-item-motivo{font-size:11.5px;color:#e0b25e}
.escaner-emp-badge{flex:0 0 auto;font-size:11px;font-weight:700;padding:4px 11px;border-radius:999px;white-space:nowrap;
  color:var(--accent);background:color-mix(in srgb, var(--accent) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent)}
.escaner-emp-badge.none{color:#e08e83;background:rgba(168,84,76,.18);border-color:rgba(168,84,76,.42)}
@media(max-width:640px){.escaner-item{flex-wrap:wrap}}

/* ================================================================
   BOOTIX · Configuración → gestión de usuarios (mínima).
   ================================================================ */
.usr-create{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.usr-create .input{flex:1;min-width:190px}
.usr-create #usrRol{flex:0 0 auto;min-width:170px}
.usr-create #usrAddBtn{flex:0 0 auto}
.usr-out{margin-top:12px;font-size:13px;min-height:1em}
.perf-table code{font-size:12.5px;color:var(--muted)}

/* ================================================================
   BOOTIX · Contraseñas → filtro por empresa (chips con color de marca)
   + badge de empresa en cada fila.
   ================================================================ */
.vault-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.vault-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;cursor:pointer;
  font-family:var(--bx-body);font-size:12.5px;font-weight:600;color:var(--muted);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);transition:.15s}
.vault-chip:hover{color:#fff;border-color:rgba(255,255,255,.30)}
.vault-chip.is-active{color:#fff;border-color:var(--chip,#a8a8b0);
  background:color-mix(in srgb, var(--chip,#a8a8b0) 22%, transparent)}
.vch-dot{width:9px;height:9px;border-radius:50%;background:var(--chip,#a8a8b0);flex:0 0 auto}
.vch-n{font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;
  background:rgba(255,255,255,.10);color:inherit}
.vault-chip.is-active .vch-n{background:color-mix(in srgb, var(--chip,#a8a8b0) 40%, transparent)}
.vi-emp{display:inline-block;margin-left:9px;font-size:10.5px;font-weight:700;letter-spacing:.02em;
  padding:2px 9px;border-radius:999px;vertical-align:middle;
  color:var(--chip,#a8a8b0);background:color-mix(in srgb, var(--chip,#a8a8b0) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--chip,#a8a8b0) 42%, transparent)}

/* ================================================================
   BOOTIX · Escáner → modo "subir y validar después"
   ================================================================ */
.bx-later{display:flex;align-items:flex-start;gap:10px;margin:0 0 16px;padding:11px 14px;border-radius:11px;
  cursor:pointer;font-size:12.5px;line-height:1.5;color:var(--muted);
  background:color-mix(in srgb, var(--accent) 6%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 26%, rgba(255,255,255,.10))}
.bx-later:hover{border-color:color-mix(in srgb, var(--accent) 45%, transparent)}
.bx-later input{margin-top:2px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.bx-later b{color:var(--text)}

/* ================================================================
   BOOTIX · alerta de factura duplicada (mismo nº + mismo proveedor)
   ================================================================ */
.gasto-dup{margin-top:12px;padding:11px 14px;border-radius:11px;font-size:12.5px;line-height:1.55;
  color:#e0b25e;background:rgba(194,145,47,.14);border:1px solid rgba(194,145,47,.42)}
.gasto-dup b{color:#f0cd86}

/* Los números de los KPI estaban clavados en serif (Libre Baskerville) en TODAS las marcas.
   Ahora siguen la tipografía de la sociedad activa, como el resto. */
.gk-v{font-family:var(--bx-body)}

/* ================================================================
   BOOTIX · estado de la factura en la ficha (Pendiente / Pendiente
   de pago / Contabilizado). Colores semánticos, no de marca.
   ================================================================ */
.gasto-estado-box{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 18px;
  padding:12px 16px;border-radius:12px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035)}
.gasto-estado-seg{display:inline-flex;gap:6px;flex-wrap:wrap}
.ge-btn{font-family:var(--bx-body);font-size:12.5px;font-weight:700;padding:7px 15px;border-radius:999px;
  cursor:pointer;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);
  color:var(--muted);transition:.15s}
.ge-btn:hover{color:#fff;border-color:rgba(255,255,255,.34)}
.ge-btn.is-active.ge-pend{background:rgba(168,84,76,.24);color:#e08e83;border-color:rgba(168,84,76,.52)}
.ge-btn.is-active.ge-pago{background:rgba(194,145,47,.24);color:#e0b25e;border-color:rgba(194,145,47,.52)}
.ge-btn.is-active.ge-ok{background:rgba(47,107,69,.28);color:#74c493;border-color:rgba(47,107,69,.55)}
.gasto-estado-info{font-size:11.5px;color:var(--muted)}

/* ================================================================
   BOOTIX · Nóminas (histórico de barras + fila total de la tabla)
   ================================================================ */
.nom-total td{border-top:2px solid color-mix(in srgb, var(--accent) 40%, rgba(255,255,255,.2))!important;
  background:color-mix(in srgb, var(--accent) 7%, transparent)}
.nom-bars{display:flex;gap:14px;align-items:flex-end;overflow-x:auto;padding:6px 2px 2px;min-height:190px}
.nom-bar-col{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;
  min-width:62px;opacity:.82;transition:.15s}
.nom-bar-col:hover{opacity:1}
.nom-bar-col.is-active{opacity:1}
.nom-bar-v{font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap}
.nom-bar-col.is-active .nom-bar-v{color:var(--accent)}
.nom-bar{width:38px;border-radius:8px 8px 0 0;
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, var(--accent) 22%, transparent));
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);border-bottom:0}
.nom-bar-col.is-active .nom-bar{background:linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 45%, transparent))}
.nom-bar-l{font-size:11px;color:var(--muted);text-transform:capitalize}

/* ===================== BUSINESS ANALYTICS ===================== */
.an-empty{background:var(--paper);border:1px dashed var(--line);border-radius:var(--radius);
  padding:48px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:20px}
.an-empty svg{width:40px;height:40px;color:var(--accent-d);opacity:.7}
.an-empty b{font-size:15px;color:var(--text)}
.an-empty span{font-size:12.5px;color:var(--muted)}

.an-diag{margin:4px 0 20px;border-left:4px solid var(--accent);background:linear-gradient(180deg,var(--paper),var(--soft))}
.an-diag[data-tono="bien"]{border-left-color:#2f9e6f}
.an-diag[data-tono="medio"]{border-left-color:#c9902a}
.an-diag[data-tono="mal"]{border-left-color:#c4443a}
.an-diag-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.an-diag-badge{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:#fff;
  background:var(--accent-d);padding:4px 11px;border-radius:999px}
.an-diag[data-tono="bien"] .an-diag-badge{background:#2f9e6f}
.an-diag[data-tono="medio"] .an-diag-badge{background:#c9902a}
.an-diag[data-tono="mal"] .an-diag-badge{background:#c4443a}
.an-diag-head h2{font-size:21px;margin:0}
.an-diag-sub{font-size:13px;color:var(--ink-soft);margin:8px 0 0}

.an-charts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:8px}
.an-chart{padding:18px 20px}
.an-chart-t{font-size:14px;font-weight:700;color:var(--text)}
.an-chart-s{font-size:11.5px;color:var(--muted);margin-bottom:8px}
.an-chart svg{width:100%;height:auto;display:block}
.an-bar-a{fill:var(--accent)}
.an-bar-b{fill:var(--line);}
.an-bar-neg{fill:#d06055}
.an-axis{stroke:var(--line);stroke-width:1}
.an-blab{fill:var(--text);font-size:11px;font-weight:700;font-family:inherit}
.an-xlab{fill:var(--muted);font-size:11px;font-family:inherit}
.an-leg{display:flex;gap:16px;font-size:11px;color:var(--muted);margin-top:8px}
.an-leg span{display:inline-flex;align-items:center;gap:6px}
.an-leg i{width:10px;height:10px;border-radius:2px;display:inline-block}
.an-leg i.an-bar-a{background:var(--accent)}
.an-leg i.an-bar-b{background:var(--line)}

.an-diag-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.an-col h3{font-size:13px;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.an-col h3 span{font-size:11px;font-weight:700;color:#fff;background:var(--muted);border-radius:999px;
  min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.an-col ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px}
.an-col li{font-size:12.5px;color:var(--ink-soft);line-height:1.5}
.an-col .an-none{font-size:12.5px;color:var(--muted);margin:0}
.an-col-ok h3 span{background:#2f9e6f}
.an-col-bad h3 span{background:#c4443a}
.an-col-rec h3 span{background:var(--accent-d)}
.an-col-ok{border-top:3px solid #2f9e6f}
.an-col-bad{border-top:3px solid #c4443a}
.an-col-rec{border-top:3px solid var(--accent-d)}

.an-sem{font-size:12px;font-weight:600;white-space:nowrap}
.an-sem.ok{color:#2f9e6f} .an-sem.mid{color:#c9902a} .an-sem.bad{color:#c4443a}
#anRatios td,#anEstados td{padding:11px 16px}
#anEstados tr.an-tot td{font-weight:700;background:var(--soft)}
#anEstados tr.an-sub td:first-child{padding-left:22px}
#anEstados tr.an-sec td{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  font-weight:700;background:var(--cream);padding-top:10px;padding-bottom:10px}
#anEstados .up{color:#2f9e6f;font-weight:600} #anEstados .down{color:#c4443a;font-weight:600}
.an-footnote{font-size:11.5px;color:var(--muted);margin-top:14px;line-height:1.6}

@media(max-width:860px){.an-charts,.an-diag-cols{grid-template-columns:1fr}}

/* ---- Analista IA (chat) ---- */
.an-ask{margin:16px 0 20px;border:1px solid var(--line-2)}
.an-ask-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.an-ask-head svg{width:26px;height:26px;color:var(--accent);flex:0 0 auto}
.an-ask-head h2{font-size:17px;margin:0}
.an-ask-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.an-chip{font-family:inherit;font-size:12px;color:var(--text);background:var(--soft);
  border:1px solid var(--line);border-radius:999px;padding:7px 13px;cursor:pointer;transition:.15s}
.an-chip:hover{border-color:var(--accent);background:var(--cream)}
.an-ask-bar{display:flex;gap:10px}
.an-ask-bar .input{flex:1}
.an-ask-bar .btn{flex:0 0 auto;white-space:nowrap}
.an-ask-answer{margin-top:16px;border-top:1px solid var(--line-2);padding-top:16px}
.an-ask-q{font-weight:700;color:var(--text);font-size:14px;margin-bottom:10px}
.an-ask-q::before{content:"“";opacity:.5} .an-ask-q::after{content:"”";opacity:.5}
.an-ask-loading{color:var(--muted);font-size:13px;font-style:italic}
.an-ask-loading::after{content:"";animation:andots 1.2s steps(4,end) infinite}
@keyframes andots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.an-ask-a{font-size:13.5px;color:var(--ink-soft);line-height:1.65}
.an-ask-a p{margin:0 0 9px} .an-ask-a b{color:var(--text)}
.an-ask-a ul{margin:0 0 9px;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.an-ask-err{font-size:13px;color:#c4443a;background:rgba(196,68,58,.08);border-radius:10px;padding:12px 14px}

/* ---- Desglose por cuenta ---- */
#anDesglose td{padding:11px 16px}
#anDesglose tr.an-alza td{background:rgba(196,68,58,.06)}
#anDesglose tr.an-alza td:first-child{box-shadow:inset 3px 0 0 #c4443a}
.an-barcell{width:120px}
.an-minibar{display:inline-block;height:9px;border-radius:5px;background:var(--accent);min-width:2px;vertical-align:middle}

/* Hilo del analista con memoria: scroll y separación entre turnos */
.an-ask-answer{max-height:480px;overflow-y:auto}
.an-ask-answer .an-ask-q + .an-ask-a{margin-top:2px}
.an-ask-answer .an-ask-a + .an-ask-q{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line-2)}

/* ---- Periodo parcial / ritmo mensual ---- */
.an-selectors{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.an-partial{background:rgba(201,144,42,.10);border:1px solid rgba(201,144,42,.35);border-radius:12px;
  padding:12px 16px;margin:2px 0 16px;font-size:12.5px;color:var(--ink-soft);line-height:1.55}
.an-partial b{color:var(--text)}
.an-mes{font-size:9px;color:var(--muted);margin-left:2px;font-weight:600}

.gk-sub{display:block;font-size:10.5px;color:var(--muted);margin-top:5px;font-weight:600}

/* ---- Chips de preguntas integrados con la marca activa (--accent por empresa) ---- */
.an-chip{
  font-family:var(--bx-body,inherit);
  color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius:999px;padding:8px 15px;font-size:12px;font-weight:600;letter-spacing:.01em;
  cursor:pointer;transition:background .16s,color .16s,transform .12s,border-color .16s}
.an-chip:hover{background:var(--accent);border-color:var(--accent);color:var(--bx-bg1,#0a0a0b);transform:translateY(-1px)}
.an-chip:active{transform:translateY(0)}

/* ---- Borrar preguntas / limpiar conversación ---- */
.an-ask-head{position:relative}
.an-ask-clear{margin-left:auto;display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  font-family:inherit;font-size:11.5px;font-weight:600;color:var(--muted);background:transparent;
  border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer;transition:.15s}
.an-ask-clear svg{width:14px;height:14px}
.an-ask-clear:hover{color:#c4443a;border-color:color-mix(in srgb,#c4443a 45%,transparent);background:color-mix(in srgb,#c4443a 8%,transparent)}
.an-turn + .an-turn{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line-2)}
.an-ask-q{position:relative;padding-right:26px}
.an-ask-q::before,.an-ask-q::after{content:none}
.an-turn-del{position:absolute;top:-3px;right:-2px;width:22px;height:22px;line-height:1;
  border:none;background:transparent;color:var(--muted);font-size:18px;cursor:pointer;border-radius:7px;
  opacity:0;transition:.15s}
.an-turn:hover .an-turn-del{opacity:1}
.an-turn-del:hover{color:#c4443a;background:color-mix(in srgb,#c4443a 12%,transparent)}

/* ---- Escáner: desglose de IVA + confianza de la lectura IA ---- */
.gasto-desglose{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0 2px}
.gasto-desglose-l{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;width:100%}
.gasto-desglose-chip{font-size:12px;font-variant-numeric:tabular-nums;color:var(--text);background:var(--soft);
  border:1px solid var(--line);border-radius:999px;padding:5px 11px}
.gasto-conf{display:inline-block;font-size:11px;font-weight:700;border-radius:999px;padding:2px 9px;margin:0 2px}
.gasto-conf.conf-alta{background:rgba(47,158,111,.14);color:#2f9e6f}
.gasto-conf.conf-media{background:rgba(201,144,42,.16);color:#b7791f}
.gasto-conf.conf-baja{background:rgba(196,68,58,.14);color:#c4443a}

/* ---- Escáner: reescaneo con IA de la cola ---- */
.escaner-head-right{display:flex;align-items:center;gap:12px}
.escaner-rescan-prog{font-size:12.5px;color:var(--accent-dd);background:var(--cream);border:1px solid var(--line);
  border-radius:10px;padding:10px 14px;margin-bottom:12px;font-variant-numeric:tabular-nums}

/* ---- Auditoría de lectura ---- */
.audit-resumen{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 16px}
.audit-chip{background:var(--soft);border:1px solid var(--line-2);border-radius:12px;padding:9px 14px;min-width:84px;text-align:center}
.audit-chip b{display:block;font-size:19px;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.1}
.audit-chip span{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.audit-chip.bad{border-color:#e2b3ae;background:rgba(196,68,58,.07)} .audit-chip.bad b{color:#c4443a}
.audit-chip.mid{border-color:#e6cfa0} .audit-chip.mid b{color:#b7791f}
.audit-chip.ok b{color:#2f9e6f}
.audit-row{cursor:pointer} .audit-row:hover td{background:var(--cream)}
.audit-row.is-risk td{background:rgba(196,68,58,.05)}
.au-ok{color:#2f9e6f;font-weight:700} .au-bad{color:#c4443a;font-weight:700}

/* ===== Igualdad retributiva (bx41) ===== */
.rr-actions{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.rr-tabs{margin:4px 0 18px}
.rr-bar{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.rr-aviso{border-radius:12px;padding:11px 15px;margin-bottom:10px;font-size:13px;line-height:1.5;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:var(--text)}
.rr-aviso.rr-bad{border-color:rgba(224,142,131,.5);background:rgba(168,84,76,.18)}
.rr-aviso.rr-warn{border-color:rgba(214,162,68,.45);background:rgba(194,145,47,.14)}
.rr-nota{font-size:12px;color:var(--muted);margin:10px 2px 0}
.rr-t{font-size:12.5px;min-width:980px}
.rr-t td,.rr-t thead th{padding:8px 11px}
.rr-t th.l,.rr-t td.l{text-align:left}
.rr-t tr.g td.l{font-weight:600}
.rr-t tr.br td{background:color-mix(in srgb,var(--accent) 9%,transparent);font-weight:700}
.rr-t tr.tot td{background:color-mix(in srgb,var(--accent) 16%,transparent);font-weight:700}
.rr-t .mini{font-size:11px;font-weight:400;color:var(--muted)}
.rr-chip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.rr-chip.ok{background:rgba(75,125,99,.25);color:#8fd0ab}.rr-chip.media{background:rgba(194,145,47,.22);color:#e6bd6a}
.rr-chip.alta{background:rgba(168,84,76,.26);color:#f0a096}.rr-chip.sc{background:rgba(255,255,255,.08);color:var(--muted)}
.rr-edit td{padding:5px 6px}.rr-edit .rr-nom{white-space:nowrap;font-weight:600}
.rr-edit tr.rr-pend td:first-child{box-shadow:inset 3px 0 0 #d6a244}
.rr-in{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:8px;color:var(--text);font:inherit;font-size:12px;padding:5px 7px;min-width:96px;max-width:190px}
.rr-in:focus{outline:none;border-color:var(--accent)}
select.rr-in option{color:#111}
.rr-txt h3{margin:0 0 2px;font-family:var(--bx-display);font-size:17px}
.rr-txt textarea{width:100%;margin-top:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:12px;color:var(--text);font:13.5px/1.55 var(--bx-body);padding:12px 14px;resize:vertical}
.rr-txt textarea:focus{outline:none;border-color:var(--accent)}
.rr-txt-foot{display:flex;gap:12px;align-items:center;margin-top:10px}.rr-saved{font-size:12px;color:var(--muted)}
.rr-acc{white-space:nowrap;text-align:right}