/* ==========================================================================
   HUB Financiero · tema común (Hernagro, Autónomo, Personal, Dashboard)
   Mismo menú, tipografía y componentes en los cuatro módulos.
   Cada módulo fija su color con <html data-mod="empresa|autonomo|personal|dashboard">
   ========================================================================== */

/* ---- Tonos por módulo -------------------------------------------------- */
html[data-mod="empresa"]  {--d:#153D2B;--m:#1F5A3A;--a:#9BCB3C;--soft:#EAF2DC;--st:#2B5A12;--muted:#9DBBA8;--stx:#B9D0C0;--page:#F3F5F1;--bdr:#DCE4DA;--tab:#E3E9E1;--hd:#14392A}
html[data-mod="autonomo"] {--d:#0F3B49;--m:#1B5E73;--a:#7CC6DC;--soft:#DDEEF4;--st:#124456;--muted:#9CC3CF;--stx:#BCD6DE;--page:#F1F5F6;--bdr:#D6E2E6;--tab:#DCE8EC;--hd:#0F3B49}
html[data-mod="personal"] {--d:#2D1F4D;--m:#5A3E93;--a:#C2ADF2;--soft:#ECE6F8;--st:#41296F;--muted:#B3A5D3;--stx:#CFC4E6;--page:#F4F2F8;--bdr:#E0DAEE;--tab:#E8E3F2;--hd:#2D1F4D}
html[data-mod="dashboard"]{--d:#1F2D33;--m:#2F4750;--a:#F0B64A;--soft:#F9ECCF;--st:#6B4A00;--muted:#9FB2B9;--stx:#C3D0D5;--page:#F2F4F5;--bdr:#DCE3E6;--tab:#E3E8EA;--hd:#1F2D33}

/* ---- Tokens de la aplicación (claro) ------------------------------------ */
html[data-mod]:not([data-theme="dark"]){
  --bg:var(--page);--s1:#ffffff;
  --s2:color-mix(in srgb,var(--page) 55%,#ffffff);--s3:var(--tab);
  --bd:var(--bdr);--bd2:color-mix(in srgb,var(--bdr) 65%,#6f8576);
  --acc:var(--m);--adim:color-mix(in srgb,var(--m) 10%,transparent);
  --gr:#2E7D32;--rd:#C0392B;--bl:#1A6AAD;
  --tx:#1B2A22;--tm:#4E6056;--td:#6B7C71;--ts:var(--hd);
  --sb:var(--d);
}
/* ---- Tokens (oscuro) ---------------------------------------------------- */
html[data-mod][data-theme="dark"]{
  --bg:#101916;--s1:#17221D;--s2:#1C2923;--s3:#22312A;
  --bd:#2C3D34;--bd2:#3A4F44;
  --acc:var(--a);--adim:color-mix(in srgb,var(--a) 16%,transparent);
  --gr:#6FD08C;--rd:#E5786B;--bl:#6FB1E8;
  --tx:#DCE8E0;--tm:#9DB3A6;--td:#7F988A;--ts:#EAF3ED;--hd:#EAF3ED;
  --sb:#0C1411;
}
/* ---- Tipografía común --------------------------------------------------- */
html[data-mod]{
  --fsh:'Montserrat',sans-serif;
  --fm:'Source Sans 3',sans-serif;
  --fb:'Source Sans 3',sans-serif;
}
html[data-mod] body{font-family:var(--fb);font-size:14px;-webkit-font-smoothing:antialiased}
html[data-mod] table,html[data-mod] td,html[data-mod] input,html[data-mod] select,html[data-mod] textarea{font-variant-numeric:tabular-nums}

/* ---- Menú lateral ------------------------------------------------------- */
.sb{background:var(--sb);border-right:0;color:#E8F0EA}
.sb .logo{display:none}
.sb nav{padding:4px 10px 8px}
.sb .ns{font-family:var(--fb);font-size:11px;font-weight:700;letter-spacing:1.4px;color:var(--muted);padding:14px 10px 4px;margin-top:0}
.sb .ni{font-family:var(--fb);font-size:14.5px;font-weight:600;text-transform:none;letter-spacing:0;color:#E3EDE6;border-left:0;border-radius:10px;padding:9px 10px;gap:11px;margin-bottom:2px;min-height:40px}
.sb .ni:hover{background:rgba(255,255,255,.08);color:#fff}
.sb .ni.act{background:var(--m);color:#fff;border-left:0}
.sb .ni .ic{width:18px;height:18px;font-size:0;display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}
.sb .ni.act .ic{color:var(--a)}
.sb .ni .ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sb-foot{font-family:var(--fb);font-size:13px;line-height:1.5;color:var(--stx);border-top:1px solid rgba(255,255,255,.14);padding:14px 16px 16px}
.sb-foot strong{color:#fff}
.sb-foot button[onclick*="_syncUp"]{background:var(--a)!important;color:#14201C!important;border-radius:10px!important;min-height:44px;font-family:var(--fb)!important;font-size:14px!important;font-weight:700!important;letter-spacing:0!important}
.dm-toggle{font-family:var(--fb);font-size:13px;color:#E8F0EA;border:1px solid rgba(255,255,255,.28);border-radius:10px;min-height:44px;background:transparent}
.dm-toggle:hover{border-color:var(--a);color:var(--a)}

/* ---- Cabecera del menú (logo + módulos + datos) ------------------------- */
#hub-top{padding:24px 16px 8px;display:flex;flex-direction:column;gap:16px}
.hub-brand{display:flex;align-items:center;gap:12px;padding:0 6px}
.hub-brand svg{flex:0 0 44px;width:44px;height:44px}
.hub-wm{font-family:'Montserrat',sans-serif;font-weight:800;font-size:20px;letter-spacing:1.2px;color:#fff;line-height:1}
.hub-wm span{color:var(--a)}
.hub-sw{display:flex;flex-direction:column;gap:3px;padding:14px 0;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.hub-sw-l{font-family:var(--fb);font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);padding:0 10px 5px}
.hub-sw a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;font-family:var(--fb);font-size:14.5px;font-weight:600;color:#D5E4D9;text-decoration:none;min-height:40px}
.hub-sw a:hover{background:rgba(255,255,255,.08);color:#fff}
.hub-sw a.on{background:rgba(255,255,255,.16);color:#fff;font-weight:700}
.hub-dot{width:10px;height:10px;border-radius:50%;flex:0 0 10px}
.hub-dot[data-m="dashboard"]{background:#F0B64A;box-shadow:0 0 0 2px #2F4750}
.hub-dot[data-m="empresa"]{background:#9BCB3C;box-shadow:0 0 0 2px #1F5A3A}
.hub-dot[data-m="autonomo"]{background:#7CC6DC;box-shadow:0 0 0 2px #1B5E73}
.hub-dot[data-m="personal"]{background:#C2ADF2;box-shadow:0 0 0 2px #5A3E93}
.hub-ent{background:rgba(255,255,255,.07);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:3px;font-family:var(--fb)}
.hub-ent b{font-weight:700;font-size:15px;color:#fff}
.hub-ent span{font-size:13px;color:var(--stx);overflow-wrap:anywhere}

/* ---- Componentes (solo escritorio: el móvil conserva sus tamaños) -------- */
.panel,.kcard,.modal,.gm-card,.dz{border-radius:16px}
.panel{border-color:var(--bd)}
.phead{border-radius:16px 16px 0 0}
.ph{border-bottom:1px solid var(--bd)}
.pt{font-family:var(--fsh);font-weight:700;text-transform:none;letter-spacing:-.3px;color:var(--hd)}
html[data-theme="dark"] .pt{color:var(--ts)}
.yr-sel{font-family:var(--fsh);font-weight:700;text-transform:none;color:var(--acc);border-bottom-color:color-mix(in srgb,var(--acc) 45%,transparent)}
.pbadge{border-radius:999px;background:var(--adim);border-color:transparent;color:var(--acc);font-family:var(--fb);font-weight:600}
.ptitle,.mtitle,.clbl,.ml,.dz-text,.gm-tab{font-family:var(--fsh);text-transform:none;letter-spacing:0}
.kcard{border:1px solid var(--bd);border-top:1px solid var(--bd)}
.kcard.am,.kcard.gr,.kcard.bl,.kcard.rd{border-top-color:var(--bd)}
.kl{font-family:var(--fb);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--tm)}
.kv{font-family:var(--fsh);font-weight:700;letter-spacing:-.3px}
.km{font-family:var(--fb);font-size:13px;color:var(--td)}
.btn{font-family:var(--fb);font-weight:700;text-transform:none;letter-spacing:0;border-radius:10px;font-size:14px;min-height:38px;padding:7px 14px}
.btn-acc{background:var(--acc);border-color:var(--acc);color:#fff}
html[data-theme="dark"] .btn-acc{color:#14201C}
.btn-acc:hover{filter:brightness(1.1);background:var(--acc);color:#fff}
html[data-theme="dark"] .btn-acc:hover{color:#14201C}
.btn-edit{border-radius:8px}
thead th{font-family:var(--fb);font-weight:700;letter-spacing:.8px}
.fld label{font-family:var(--fb);font-weight:700;letter-spacing:.8px}
.fld input,.fld select,.fld textarea,.sb-input input,.sel-box select{font-family:var(--fb);border-radius:8px}
.fld input:focus,.fld select:focus{background:var(--s1)}
.tag,.cam,.pgb,.ci,.ci-inl,.hint,.ps,.pg-info,.alr,.stl,.prog-sub,.cdet,.dz-sub,.ai-tag,.pbadge2{font-family:var(--fb)}
.tag{border-radius:999px;padding:2px 9px;font-size:11px;font-weight:700}
.alr{border-radius:8px}
.mhead,.mfoot{background:var(--s2)}
.toast{font-family:var(--fb);border-radius:10px}

@media (min-width:769px){
  .sb{width:272px}
  .pt{font-size:28px}
  .yr-sel{font-size:28px}
  .kv{font-size:25px}
  .kl,.km{font-size:13px}
  .ps{font-size:13px}
  .hint,.pg-info{font-size:12.5px}
  td{font-size:13.5px;padding:9px 10px}
  thead th{font-size:11.5px}
  .ci,.ci-inl{font-size:13.5px}
  .fld label{font-size:11.5px}
  .fld input,.fld select,.fld textarea{font-size:14px}
  .sb-input input,.sel-box select{font-size:13.5px}
  .alr{font-size:13.5px}
  .stl{font-size:11.5px}
  .tag{font-size:11.5px}
  .ptitle{font-size:15px}
  .mtitle{font-size:17px}
  .clbl,.ml{font-size:14px}
  .pbadge{font-size:12px;padding:4px 12px}
}

/* Avisos legibles en modo oscuro */
html[data-theme="dark"] .ai2,html[data-theme="dark"] .ag,html[data-theme="dark"] .aw{color:var(--tx)}

@media (max-width:768px){
  #hub-top{padding-top:68px}
}

/* ---- Tokens extra ------------------------------------------------------- */
html[data-mod]{--card:var(--s1)}
.kcard{border-top-width:1px}
.sb-foot label{color:var(--stx);font-family:var(--fb);font-size:13px}
.sb-foot #sync-st{margin-left:0;font-family:var(--fb);font-size:13px;color:var(--stx)}
.sb-foot #sync-st.ok{color:var(--a)}
.sb-foot #sync-st.err{color:#FF9C90}
.sb-foot #sync-st.warn{color:#F0B64A}
.sb-foot select{border-radius:8px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;padding:5px 8px;font-size:13px}
.sb-foot select option{color:#1B2A22}
.sb-foot .btn{min-height:40px}
.sb-foot .row2{display:flex;gap:8px}
.sb-foot .row2 .btn{flex:1;justify-content:center}

/* ---- Estructura lateral para módulos que no la tenían (Personal, Dashboard) */
html[data-base] .lay{display:flex;min-height:100vh}
html[data-base] .sb{width:272px;flex-shrink:0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
html[data-base] .sb nav{flex:1;display:block;background:none;border:0;padding:4px 10px 8px}
html[data-base] .sb .ni{display:flex;align-items:center;cursor:pointer;user-select:none}
html[data-base] .sb-foot{display:flex;flex-direction:column;gap:10px}
html[data-base] .main{flex:1;min-width:0;padding:26px 34px 40px}
html[data-base] .hamb{display:none;position:fixed;top:10px;left:10px;z-index:1100;background:var(--s1);border:1px solid var(--bd);width:44px;height:44px;border-radius:10px;cursor:pointer;align-items:center;justify-content:center;font-size:20px;color:var(--tx)}
html[data-base] .sb-overlay{display:none;position:fixed;inset:0;background:rgba(10,20,40,.45);z-index:999}
html[data-base] .sb-overlay.open{display:block}
@media (max-width:768px){
  html[data-base] .hamb{display:flex}
  html[data-base] .lay{flex-direction:column}
  html[data-base] .sb{position:fixed;top:0;left:0;height:100vh;z-index:1000;transform:translateX(-100%);transition:transform .25s ease;box-shadow:2px 0 12px rgba(0,0,0,.2)}
  html[data-base] .sb.open{transform:translateX(0)}
  html[data-base] .main{padding:64px 14px 24px;width:100%}
}

/* ---- Dashboard ---------------------------------------------------------- */
html[data-mod="dashboard"] .card{border:1px solid var(--bd);border-top:1px solid var(--bd);border-radius:16px}
html[data-mod="dashboard"] .card.auto,html[data-mod="dashboard"] .card.emp,html[data-mod="dashboard"] .card.per,html[data-mod="dashboard"] .card.hac{border-top-color:var(--bd)}
html[data-mod="dashboard"] .big{font-family:var(--fsh);letter-spacing:-.3px}
html[data-mod="dashboard"] .card .lbl{font-family:var(--fb);text-transform:none;letter-spacing:0;font-size:13px}
html[data-mod="dashboard"] h2.sec{font-family:var(--fb);color:var(--tm);font-size:12px}
html[data-mod="dashboard"] .chip.auto{background:#1B5E73}
html[data-mod="dashboard"] .chip.emp{background:#1F5A3A}
html[data-mod="dashboard"] .sub,html[data-mod="dashboard"] .note,html[data-mod="dashboard"] .muted,html[data-mod="dashboard"] .row .v{font-family:var(--fb)}
html[data-mod="dashboard"] .row .v{font-variant-numeric:tabular-nums}
html[data-mod="dashboard"] .chart .bx{background:var(--m)}
html[data-theme="dark"][data-mod="dashboard"] .chart .bx{background:var(--a)}
html[data-mod="dashboard"] .wrap{max-width:1240px;padding:0}
.mc{background:var(--s1);border:1px solid var(--bd);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.mc i{display:block;height:8px;background:var(--mc)}
.mc div.in{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px}
.mc .nm{display:flex;align-items:center;gap:8px;font-family:var(--fsh);font-weight:700;font-size:15px;color:var(--tx)}
.mc .nm b{width:10px;height:10px;border-radius:50%;background:var(--mc)}
.mc .lb{font-size:13px;color:var(--tm)}
.mc .bg{font-family:var(--fsh);font-weight:700;font-size:25px;color:var(--tx);letter-spacing:-.3px}
.mc .sb2{font-size:13px;font-weight:600;color:var(--tm)}
.mc a.open{display:flex;align-items:center;justify-content:center;margin-top:8px;min-height:44px;border-radius:10px;background:var(--mc);color:#fff;font-weight:700;font-size:14px;text-decoration:none}
.mc a.open:hover{filter:brightness(1.12)}
.mc.emp{--mc:#1F5A3A}.mc.auto{--mc:#1B5E73}.mc.per{--mc:#5A3E93}