:root{
  --navy:#073b83;--blue:#0b6fe8;--text:#0e2a55;--muted:#6d809d;--line:#dce6f1;
  --page:#f4f7fb;--card:#fff;--green:#10aa5b;--orange:#ff9600;--red:#ff3448;
  --purple:#7039ec;--cyan:#1aa9bd;
}
*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:"Segoe UI",Arial,sans-serif;color:var(--text);background:var(--page)}
button,a{font:inherit}.app-shell{display:grid;grid-template-columns:205px 1fr;min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;width:205px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:10}
.brand{height:68px;background:linear-gradient(135deg,#073c88,#092e69);color:#fff;display:flex;align-items:center;gap:10px;padding:0 18px;font-size:18px}
.brand span{font-size:22px}.sidebar nav{padding:10px 9px;overflow:auto;flex:1}
.sidebar nav a{display:flex;align-items:center;gap:12px;padding:9px 12px;margin:2px 0;border-radius:6px;color:#17325c;text-decoration:none;cursor:pointer;font-size:13px}
.sidebar nav a.active{background:linear-gradient(90deg,#0d72e9,#0760ce);color:#fff;font-weight:600}
.sidebar nav hr{border:0;border-top:1px solid #e4ebf4;margin:8px 6px}.connection{padding:16px 18px 20px;border-top:1px solid #eef2f7;font-size:11px;line-height:1.6}.connection b{display:block;margin-bottom:5px}.connection small{display:block}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ff9b00;margin-right:6px}.dot.online{background:#12b768}.dot.error{background:#ff3448}
main{grid-column:2;min-width:0}.topbar{height:58px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 20px;position:sticky;top:0;z-index:8}.hamburger,.icon-btn,.date-button,.panel-head button{border:0;background:transparent;color:var(--text);cursor:pointer}.hamburger{font-size:21px;margin-right:22px}.top-spacer{flex:1}.icon-btn{font-size:16px;margin:0 6px;position:relative}.icon-btn em{position:absolute;top:-6px;right:-5px;background:#f22;color:white;border-radius:9px;font-style:normal;font-size:9px;padding:1px 5px}.user{display:flex;align-items:center;gap:9px;margin-left:16px}.avatar{width:34px;height:34px;border-radius:50%;background:#e8eef7;display:grid;place-items:center;font-size:11px;font-weight:700}.user small{display:block;color:var(--muted);font-size:10px}.content{padding:18px 20px 16px}.welcome{display:flex;align-items:center;margin-bottom:14px}.welcome h1{margin:0 0 3px;font-size:22px}.welcome p{margin:0;color:#536b8d}.welcome>div:first-child{flex:1}.date-button{background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 13px;display:flex;gap:9px;align-items:center}
.kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-bottom:10px}.kpi-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;grid-template-columns:44px 1fr;gap:10px;min-height:98px}.kpi-icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:20px;font-weight:600}.kpi-card small{color:#31486a;font-size:10px;font-weight:600}.kpi-card strong{display:block;font-size:22px;font-weight:700;margin:4px 0}.trend{font-size:10px}.trend.up{color:var(--green)}.trend.warn{color:var(--orange)}.trend.down{color:var(--green)}
.dashboard-grid{display:grid;gap:10px;margin-bottom:10px}.top-row{grid-template-columns:1.35fr 1fr .9fr}.middle-row{grid-template-columns:1.25fr .86fr .88fr}.bottom-row{grid-template-columns:1.25fr 1fr}.panel{background:#fff;border:1px solid var(--line);border-radius:10px;min-width:0;overflow:hidden}.panel-head{height:48px;display:flex;align-items:center;padding:0 16px}.panel-head h2{font-size:13px;margin:0;flex:1}.panel-head a{font-size:10px;color:var(--blue);cursor:pointer}.panel-head button{border:1px solid var(--line);padding:6px 9px;border-radius:6px;font-size:10px}.legend{text-align:center;font-size:10px;margin:-5px 0 3px}.legend span{margin:0 10px}.blue{color:#0878ec}.green{color:#10aa5b}.orange{color:#ff9600}.red{color:#ff3448}
#sales-line-chart{height:225px;width:100%;padding:5px 15px 12px}.chart-grid{stroke:#e6edf6;stroke-width:1}.chart-axis{fill:#657a98;font-size:11px}.chart-line{fill:none;stroke-width:3}.chart-line.billed{stroke:#0878ec}.chart-line.collected{stroke:#10aa5b}.chart-line.pending{stroke:#ff9600}
.doc-row,.alert-row,.task-row{display:grid;align-items:center;border-top:1px solid #edf1f6;padding:10px 14px;font-size:11px}.doc-row{grid-template-columns:28px 1fr auto auto;gap:9px}.doc-icon{width:22px;height:22px;border-radius:6px;background:#0878ec;color:#fff;display:grid;place-items:center}.doc-main b{display:block}.doc-main small{display:block;color:#556d90}.doc-amount{font-weight:600;margin-right:8px}.status{padding:3px 7px;border-radius:5px;font-size:9px;font-weight:600}.status.facturado,.status.aceptado{background:#def5e8;color:#10864c}.status.pendiente{background:#fff0d1;color:#c87800}.status.en-curso{background:#dfeeff;color:#136acc}.status.nuevo{background:#e9efff;color:#3569c8}
.alert-row{grid-template-columns:25px 1fr 12px;gap:10px;padding:13px 15px}.alert-dot{font-size:18px}.alert-row b{display:block}.alert-row small{display:block;color:#647998;margin-top:3px}.alert-row .arrow{font-size:18px}.task-row{grid-template-columns:18px 1fr auto;gap:6px}.task-row input{accent-color:var(--blue)}.task-row time{color:#f35}.bar-chart{height:185px;padding:15px 18px 12px;display:flex;align-items:flex-end;gap:13px;border-top:1px solid #f4f7fa}.bar-group{flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px;position:relative;padding-bottom:20px}.bar{width:8px;border-radius:2px 2px 0 0}.bar.billed{background:#0878ec}.bar.collected{background:#10aa5b}.bar-group label{position:absolute;bottom:0;font-size:9px;color:#536c8d}
.donut-wrap{height:195px;display:flex;align-items:center;justify-content:center;gap:30px}.donut{width:124px;height:124px;border-radius:50%;background:conic-gradient(#10aa5b 0 62%,#ff3348 62% 100%);position:relative}.donut:after{content:"";position:absolute;inset:25px;background:#fff;border-radius:50%}.finance-values{display:grid;grid-template-columns:auto;gap:2px;font-size:11px}.finance-values b{font-size:18px;margin-bottom:6px}.finance-values strong{font-size:17px}.finance-values small{margin-top:3px}.agenda-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 14px 14px}.agenda-cards article{border:1px solid var(--line);border-radius:8px;padding:10px;display:grid;grid-template-columns:38px 1fr;grid-template-rows:22px 18px 18px;column-gap:7px;min-width:0}.agenda-cards b{font-size:21px}.agenda-cards small{grid-column:1;grid-row:2;color:#5d7596;font-size:9px}.agenda-cards span{grid-column:2;grid-row:1;font-size:10px}.agenda-cards strong{grid-column:2;grid-row:2;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.agenda-cards em{grid-column:2;grid-row:3;font-style:normal;font-size:8px;color:#567093;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quick-actions{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:0 14px 14px}.quick-actions button{height:83px;border:1px solid var(--line);background:#fff;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#233d66;cursor:pointer}.quick-actions i{font-style:normal;font-size:20px}.quick-actions span{font-size:9px}.qblue{color:#0878ec}.qgreen{color:#10aa5b}.qpurple{color:#7139ed}.qorange{color:#ff9600}.qred{color:#ff3448}.qcyan{color:#10a8ba}
.login-overlay{position:fixed;inset:0;background:rgba(8,29,61,.82);z-index:50;display:grid;place-items:center}.login-overlay.hidden{display:none}.login-card{background:#fff;width:350px;border-radius:16px;padding:28px;box-shadow:0 30px 80px rgba(0,0,0,.25)}.brand-mark{width:48px;height:48px;border-radius:12px;background:#0a62d1;color:#fff;display:grid;place-items:center;font-size:24px}.login-card h1{font-size:22px;margin:14px 0 2px}.login-card p{margin:0 0 20px;color:#73839a}.login-card label{display:block;font-size:11px;font-weight:600;margin:10px 0}.login-card input{display:block;width:100%;padding:11px;margin-top:5px;border:1px solid #cfdcea;border-radius:7px}.login-card button{width:100%;border:0;background:#0878ec;color:#fff;padding:12px;border-radius:7px;font-weight:700;margin-top:12px;cursor:pointer}#login-error{color:#d52d42;font-size:11px;margin-top:8px}
.login-link-btn{width:100%;border:0;background:transparent;color:#0878ec;padding:8px;font-size:12px;font-weight:600;margin-top:6px;cursor:pointer;text-decoration:underline}
#forgot-password-modal{z-index:60}
#forgot-password-message{font-size:12px;margin-top:8px}
#forgot-password-message.ok{color:#12A150;font-weight:600}
#forgot-password-message.error{color:#d52d42}
@media(max-width:1200px){.kpi-grid{grid-template-columns:repeat(3,1fr)}.top-row,.middle-row{grid-template-columns:1fr 1fr}.alerts-panel,.finance-panel{grid-column:span 2}.bottom-row{grid-template-columns:1fr}.quick-actions{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.app-shell{grid-template-columns:70px 1fr}.sidebar{width:70px}.brand strong,.sidebar nav span,.connection{display:none}.brand{padding:0;justify-content:center}.sidebar nav a{justify-content:center;font-size:18px}.kpi-grid{grid-template-columns:1fr 1fr}.top-row,.middle-row{grid-template-columns:1fr}.alerts-panel,.finance-panel{grid-column:auto}.agenda-cards{grid-template-columns:1fr 1fr}}


.hidden{display:none!important}
.module-view{min-height:calc(100vh - 96px)}
.module-head{display:flex;justify-content:space-between;align-items:flex-end;margin:3px 0 14px}
.module-head h1{font-size:23px;margin:3px 0 2px}.module-head p{margin:0;color:var(--muted);font-size:12px}
.breadcrumb{font-size:10px;color:#7790ad}.module-actions{display:flex;gap:8px}
.btn{border:1px solid transparent;border-radius:6px;padding:9px 14px;font-weight:700;font-size:11px;cursor:pointer}
.btn.success{background:#e8f8ef;border-color:#8dd9ad;color:#078b43}
.btn.primary{background:#1477F2;border-color:#1477F2;color:#fff}
.btn.primary:hover{background:#0c5fd0;border-color:#0c5fd0}
.btn.secondary{background:#f6f9fd;border-color:#cfdeed;color:#173d70}
.btn.danger{background:#fff0f2;border-color:#ffb5bf;color:#d72f45}
.module-kpis{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:10px;margin-bottom:10px}
.module-mini-kpi{background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px 15px}
.module-mini-kpi small{display:block;color:var(--muted);font-size:10px}.module-mini-kpi strong{font-size:19px;display:block;margin-top:3px}
.module-card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.module-toolbar{display:flex;align-items:center;gap:12px;padding:12px;border-bottom:1px solid var(--line)}
.module-toolbar input{width:min(390px,45vw);padding:9px 11px;border:1px solid #cddceb;border-radius:6px;outline:none}
.module-toolbar input:focus{border-color:#1680ef}.module-toolbar #module-count{font-size:10px;color:#5d7696}.sync-note{margin-left:auto;color:#0d8e4a;font-size:10px}
.records-wrap{overflow:auto;max-height:calc(100vh - 275px);min-height:420px}
.records-table{border-collapse:collapse;width:100%;font-size:11px}.records-table th{position:sticky;top:0;background:#f4f8fc;color:#345172;text-align:left;padding:10px 12px;border-bottom:1px solid #dce6f1;font-size:9px;z-index:1}
.records-table td{padding:11px 12px;border-bottom:1px solid #edf2f7;color:#17365f;white-space:nowrap}.records-table tr:hover td{background:#f8fbff}
.records-table td.main-cell{font-weight:700;color:#0869d8}.records-table td.wrap{white-space:normal;min-width:200px}
.row-actions{display:flex;gap:6px}.row-actions button{border:0;background:transparent;cursor:pointer;font-size:10px;font-weight:700;padding:4px 6px}.row-edit{color:#0878ec}.row-delete{color:#e23448}
.empty-records{text-align:center!important;padding:55px!important;color:#7d90aa!important}
.record-modal{position:fixed;inset:0;background:rgba(8,30,62,.48);display:grid;place-items:center;z-index:80;padding:20px}
.record-dialog{width:min(860px,96vw);max-height:90vh;overflow:auto;background:#fff;border-radius:13px;box-shadow:0 24px 80px rgba(5,29,65,.28)}
.record-dialog-head{display:flex;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}.record-dialog-head>div{flex:1}.record-dialog-head small{font-size:9px;color:#0878ec;font-weight:700}.record-dialog-head h2{font-size:18px;margin:2px 0}.record-dialog-head button{border:0;background:transparent;font-size:24px;color:#526c8c;cursor:pointer}
.record-fields{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:18px}.field-group{display:flex;flex-direction:column;gap:5px}.field-group.wide{grid-column:span 2}.field-group label{font-size:9px;font-weight:600;color:#244669}.field-group input,.field-group select,.field-group textarea{border:1px solid #cbdbea;border-radius:6px;padding:9px 10px;font:inherit;color:#15345c;background:#fff}.field-group textarea{min-height:78px;resize:vertical}
.record-dialog-actions{display:flex;justify-content:flex-end;gap:8px;padding:13px 18px;border-top:1px solid var(--line)}
@media(max-width:900px){.module-kpis{grid-template-columns:1fr 1fr}.record-fields{grid-template-columns:1fr}.field-group.wide{grid-column:auto}.sync-note{display:none}}

/* Ficha de cliente Online alineada con la jerarquía Desktop */
.record-dialog.client-dialog{width:min(1180px,98vw);max-height:94vh;border-radius:12px}
.client-dialog .record-dialog-head{padding:12px 16px;background:#fff}
.client-dialog #record-form{background:#f7f9fc}
.client-hero{display:grid;grid-template-columns:54px minmax(220px,1fr) auto minmax(180px,1fr) minmax(150px,.7fr) minmax(150px,.7fr);gap:8px;align-items:center;background:#fff;border:1px solid #cbdceb;border-radius:11px;margin:10px 12px 0;padding:10px 12px}
.client-avatar{width:48px;height:48px;border-radius:50%;background:#1379ef;color:#fff;display:grid;place-items:center;font-size:18px;font-weight:700}
.client-identity strong{display:block;font-size:16px;color:#123b73}.client-identity small{display:block;color:#6e819a;margin-top:3px}
.client-status{background:#e3f7ec;color:#138649;font-size:10px;font-weight:700;padding:5px 9px;border-radius:3px;align-self:start}
.client-contact-box{display:flex;align-items:center;gap:8px;background:#eaf3fd;border:1px solid #cbdceb;min-height:50px;padding:6px 9px}.client-contact-box b{width:30px;height:30px;background:#1477f2;color:#fff;display:grid;place-items:center;font-size:15px}.client-contact-box.green b{background:#10a957}.client-contact-box span{min-width:0;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.client-contact-box small{display:block;font-size:8px;color:#547090;margin-bottom:2px}
.client-tabs{display:grid;grid-template-columns:repeat(11,1fr);margin:8px 12px 0;background:#fff;border-bottom:1px solid #cbdceb}.client-tab{border:0;background:#fff;padding:8px 3px 7px;color:#123b73;cursor:pointer;border-bottom:3px solid transparent;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:8px}.client-tab b{font-size:14px;color:#1477f2}.client-tab.active{background:#eef5ff;border-bottom-color:#1477f2;font-weight:700}.client-tab:nth-child(2) b,.client-tab:nth-child(9) b{color:#10a957}.client-tab:nth-child(4) b,.client-tab:nth-child(8) b{color:#f29800}.client-tab:nth-child(6) b{color:#ff3448}.client-tab:nth-child(10) b{color:#6f38ed}
.client-dialog #record-fields{padding:10px 12px 12px;display:grid;grid-template-columns:1.1fr .9fr;gap:10px;min-height:290px}
.client-section{background:#fff;border:1px solid #cbdceb;border-radius:3px;align-self:start}.client-section.wide{grid-column:1/-1}.client-section h3{margin:0;background:#eaf3fd;padding:8px 10px;font-size:10px;color:#123b73}.client-inner{padding:10px!important;display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:10px!important}.client-inner .field-group.wide{grid-column:1/-1}.client-inner .field-group label{font-size:8px;color:#355271}.client-inner .field-group input,.client-inner .field-group select,.client-inner .field-group textarea{min-height:34px;border-color:#c5d9ed}
.client-placeholder{grid-column:1/-1;background:#fff;border:1px solid #cbdceb;min-height:230px;padding:18px}.client-placeholder h3{font-size:13px;margin:0 0 7px}.client-placeholder p{color:#697f9e;font-size:11px;max-width:720px;line-height:1.55}
.client-balance{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.client-balance article{background:#fff;border:1px solid #cbdceb;border-radius:8px;padding:18px}.client-balance small{display:block;color:#617996}.client-balance strong{display:block;font-size:24px;margin-top:6px}
.client-dialog .record-dialog-actions{background:#fff;padding:10px 12px}
@media(max-width:1100px){.client-hero{grid-template-columns:48px 1fr auto}.client-contact-box{display:none}.client-tabs{overflow-x:auto;display:flex}.client-tab{min-width:82px}.client-dialog #record-fields{grid-template-columns:1fr}.client-section{grid-column:1/-1}}


/* 4.16.336 · Clientes Online: ficha amplia y jerarquía Desktop */
.record-modal.client-mode,
.record-modal.provider-mode,
.record-modal.provider-mode{
  padding:10px;
  align-items:stretch;
}
.record-modal.client-mode .record-dialog,
.record-modal.provider-mode .record-dialog,
.record-modal.provider-mode .record-dialog{
  width:calc(100vw - 34px);
  height:calc(100vh - 34px);
  max-width:none;
  max-height:none;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.record-modal.client-mode .record-dialog-head,
.record-modal.provider-mode .record-dialog-head,
.record-modal.provider-mode .record-dialog-head{
  min-height:62px;
  padding:12px 18px;
  flex:0 0 auto;
}
.record-modal.client-mode .record-dialog-head small,
.record-modal.provider-mode .record-dialog-head small,
.record-modal.provider-mode .record-dialog-head small{
  font-size:10px;
  letter-spacing:.2px;
}
.record-modal.client-mode .record-dialog-head h2,
.record-modal.provider-mode .record-dialog-head h2,
.record-modal.provider-mode .record-dialog-head h2{
  font-size:22px;
  margin:2px 0 0;
}
.record-modal.client-mode #record-form,
.record-modal.provider-mode #record-form{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
}
.record-modal.client-mode #record-fields,
.record-modal.provider-mode #record-fields{
  display:block;
  padding:0;
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
}
/* 4.17.042 · La regla .client-section{overflow:hidden} de más abajo (pensada
   para redondear esquinas en otro contexto de tarjeta) recortaba en silencio
   cualquier campo que sobrepasara la altura de fila auto-calculada por la
   rejilla — invisible mientras cada sección tenía pocos campos, evidente en
   cuanto se añadieron más filas. Aquí se anula solo para la ficha de
   cliente/proveedor. */
.record-modal.client-mode .client-section,
.record-modal.provider-mode .client-section,
#record-modal.client-mode .client-section,
#record-modal.provider-mode .client-section{
  overflow:visible!important;
}
.record-modal.client-mode .record-dialog-actions,
.record-modal.provider-mode .record-dialog-actions,
.record-modal.provider-mode .record-dialog-actions{
  flex:0 0 auto;
  padding:12px 18px;
}

/* Cabecera cliente */
.client-dialog{
  display:flex;
  flex-direction:column;
  min-height:100%;
  background:#fff;
}
.client-hero{
  display:grid;
  grid-template-columns:minmax(300px,1fr) auto minmax(230px,300px) minmax(180px,220px) minmax(180px,220px);
  align-items:center;
  gap:10px;
  margin:10px 12px 8px;
  padding:12px 14px;
  border:1px solid #cfe0f1;
  border-radius:9px;
  background:#fff;
}
.client-identity{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  min-width:0;
}
.client-avatar{
  width:52px;
  height:52px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#1477f2;
  color:#fff;
  font-size:22px;
  font-weight:700;
  flex:0 0 auto;
}
.client-identity h3{
  margin:0 0 3px;
  font-size:18px;
  color:#123b73;
}
.client-identity p{
  margin:0;
  font-size:11px;
  color:#6c819c;
}
.client-status{
  padding:5px 12px;
  border-radius:3px;
  background:#e6f8ed;
  color:#0b8c47;
  font-size:10px;
  font-weight:700;
}
.client-quick{
  min-height:52px;
  border:1px solid #cfe0f1;
  background:#eef5fc;
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  padding:5px 8px;
}
.client-quick .qicon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  background:#1477f2;
  color:#fff;
  font-size:17px;
}
.client-quick.phone .qicon,
.client-quick.whatsapp .qicon{
  background:#10a957;
}
.client-quick small{
  display:block;
  font-size:8px;
  color:#617995;
  text-transform:uppercase;
}
.client-quick strong{
  display:block;
  margin-top:2px;
  font-size:10px;
  color:#123b73;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.client-quick.phone strong,
.client-quick.whatsapp strong{
  color:#10a957;
}

/* Menú horizontal: más alto y títulos más grandes */
.client-tabs{
  display:grid;
  grid-template-columns:repeat(11,minmax(84px,1fr));
  border-top:1px solid #dbe6f1;
  border-bottom:1px solid #dbe6f1;
  background:#fff;
  padding:0 12px;
  flex:0 0 auto;
}
.client-tab{
  min-height:68px;
  border:0;
  border-bottom:3px solid transparent;
  background:#fff;
  color:#17365f;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:11px;
  font-weight:600;
  padding:7px 6px 6px;
}
.client-tab .tab-icon{
  font-size:18px;
  line-height:1;
  font-weight:700;
}
.client-tab .tab-label{
  font-size:11px;
  line-height:1.15;
  white-space:nowrap;
}
.client-tab.active{
  color:#096fe7;
  border-bottom-color:#1477f2;
  background:#f6faff;
}

/* Contenido de pestañas */
.client-tab-content{
  padding:10px 12px 18px;
  flex:1 1 auto;
}
.client-general-grid{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:12px;
  min-height:360px;
}
.client-section{
  border:1px solid #cfe0f1;
  border-radius:4px;
  background:#fff;
  overflow:hidden;
}
.client-section-title{
  min-height:34px;
  display:flex;
  align-items:center;
  padding:0 12px;
  background:#eaf3fd;
  color:#123b73;
  font-size:12px;
  font-weight:700;
}
.client-section-body{
  padding:13px;
}
.client-section .field-group label{
  font-size:10px;
}
.client-section .field-group input,
.client-section .field-group select,
.client-section .field-group textarea{
  min-height:38px;
  font-size:13px;
}
.client-section .field-group textarea{
  min-height:76px;
}

@media(max-width:1200px){
  .client-hero{
    grid-template-columns:minmax(260px,1fr) auto repeat(3,minmax(150px,1fr));
  }
  .client-tabs{
    overflow-x:auto;
    display:flex;
  }
  .client-tab{
    min-width:102px;
    flex:0 0 102px;
  }
}
@media(max-width:900px){
.record-modal.client-mode .record-dialog,
.record-modal.provider-mode .record-dialog,
.record-modal.provider-mode .record-dialog{
    width:calc(100vw - 12px);
    height:calc(100vh - 12px);
  }
  .client-hero{
    grid-template-columns:1fr 1fr;
  }
  .client-identity{
    grid-column:1 / -1;
  }
  .client-general-grid{
    grid-template-columns:1fr;
  }
}


/* 4.16.336 · ficha amplia real */
#record-modal.client-mode,
#record-modal.provider-mode{
  padding:8px!important;
  align-items:stretch!important;
  justify-items:stretch!important;
}
#record-modal.client-mode .record-dialog.client-dialog,
#record-modal.provider-mode .record-dialog.client-dialog{
  width:calc(100vw - 16px)!important;
  height:calc(100vh - 16px)!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  border-radius:10px!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
#record-modal.client-mode .record-dialog-head,
#record-modal.provider-mode .record-dialog-head,
#record-modal.provider-mode .record-dialog-head{
  min-height:62px!important;
  padding:12px 18px!important;
  flex:0 0 auto!important;
}
#record-modal.client-mode .record-dialog-head h2,
#record-modal.provider-mode .record-dialog-head h2,
#record-modal.provider-mode .record-dialog-head h2{
  font-size:22px!important;
}
#record-modal.client-mode #record-form,
#record-modal.provider-mode #record-form{
  flex:1 1 auto!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  background:#fff!important;
}
#record-modal.client-mode #client-hero,
#record-modal.provider-mode #client-hero{
  flex:0 0 auto!important;
}
#record-modal.client-mode .client-hero,
#record-modal.provider-mode .client-hero{
  grid-template-columns:58px minmax(260px,1.45fr) auto minmax(235px,1fr) minmax(190px,.8fr) minmax(190px,.8fr)!important;
  min-height:72px!important;
  padding:10px 14px!important;
  margin:10px 12px 0!important;
}
#record-modal.client-mode .client-avatar,
#record-modal.provider-mode .client-avatar{
  width:54px!important;
  height:54px!important;
  font-size:21px!important;
}
#record-modal.client-mode .client-identity strong,
#record-modal.provider-mode .client-identity strong{
  font-size:18px!important;
}
#record-modal.client-mode .client-identity small,
#record-modal.provider-mode .client-identity small{
  font-size:11px!important;
}
#record-modal.client-mode .client-status,
#record-modal.provider-mode .client-status{
  font-size:11px!important;
  padding:6px 12px!important;
}
#record-modal.client-mode .client-contact-box,
#record-modal.provider-mode .client-contact-box{
  min-height:54px!important;
}
#record-modal.client-mode .client-contact-box b,
#record-modal.provider-mode .client-contact-box b{
  width:36px!important;
  height:36px!important;
  font-size:17px!important;
}
#record-modal.client-mode .client-contact-box small,
#record-modal.provider-mode .client-contact-box small{
  font-size:9px!important;
}
#record-modal.client-mode .client-contact-box span,
#record-modal.provider-mode .client-contact-box span{
  font-size:11px!important;
}

/* menú horizontal */
#record-modal.client-mode .client-tabs,
#record-modal.provider-mode .client-tabs,
#record-modal.provider-mode .client-tabs{
  min-height:72px!important;
  margin:8px 12px 0!important;
  grid-template-columns:repeat(11,minmax(92px,1fr))!important;
}
#record-modal.client-mode .client-tab,
#record-modal.provider-mode .client-tab,
#record-modal.provider-mode .client-tab{
  min-height:72px!important;
  padding:8px 5px 7px!important;
  gap:6px!important;
  font-size:11px!important;
  font-weight:600!important;
}
#record-modal.client-mode .client-tab b,
#record-modal.provider-mode .client-tab b,
#record-modal.provider-mode .client-tab b{
  font-size:18px!important;
  line-height:1!important;
}
#record-modal.client-mode .client-tab span,
#record-modal.provider-mode .client-tab span,
#record-modal.provider-mode .client-tab span{
  font-size:11px!important;
  line-height:1.15!important;
  font-weight:600!important;
  white-space:nowrap!important;
}
#record-modal.client-mode .client-tab.active,
#record-modal.provider-mode .client-tab.active,
#record-modal.provider-mode .client-tab.active{
  font-weight:700!important;
}

/* contenido */
#record-modal.client-mode #record-fields,
#record-modal.provider-mode #record-fields{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:auto!important;
  padding:12px!important;
  grid-template-columns:1.15fr 1fr!important;
  align-content:start!important;
}
#record-modal.client-mode .client-section h3,
#record-modal.provider-mode .client-section h3{
  font-size:12px!important;
  padding:10px 12px!important;
}
#record-modal.client-mode .client-inner,
#record-modal.provider-mode .client-inner{
  padding:13px!important;
  gap:12px!important;
}
#record-modal.client-mode .client-inner .field-group label,
#record-modal.provider-mode .client-inner .field-group label{
  font-size:10px!important;
}
#record-modal.client-mode .client-inner input,
#record-modal.provider-mode .client-inner input,
#record-modal.client-mode .client-inner select,
#record-modal.provider-mode .client-inner select,
#record-modal.client-mode .client-inner textarea,
#record-modal.provider-mode .client-inner textarea{
  min-height:40px!important;
  font-size:13px!important;
}
#record-modal.client-mode .record-dialog-actions,
#record-modal.provider-mode .record-dialog-actions,
#record-modal.provider-mode .record-dialog-actions{
  flex:0 0 auto!important;
  padding:12px 18px!important;
}

@media(max-width:1250px){
#record-modal.client-mode .client-tabs,
#record-modal.provider-mode .client-tabs,
#record-modal.provider-mode .client-tabs{
    display:flex!important;
    overflow-x:auto!important;
  }
#record-modal.client-mode .client-tab,
#record-modal.provider-mode .client-tab,
#record-modal.provider-mode .client-tab{
    flex:0 0 108px!important;
    min-width:108px!important;
  }
}


/* 4.16.337 · KPI Clientes y selección de filas */
.module-kpis{
  grid-template-columns:repeat(5,minmax(165px,1fr));
}
.module-mini-kpi.with-icon{
  min-height:92px;
  display:grid;
  grid-template-columns:52px 1fr;
  align-items:center;
  gap:12px;
  padding:13px 14px;
}
.module-kpi-icon{
  width:48px;
  height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:21px;
  font-weight:700;
}
.module-kpi-icon.blue{background:#1477f2}
.module-kpi-icon.green{background:#10b25d}
.module-kpi-icon.red{background:#ff3448}
.module-kpi-icon.orange{background:#ff9800}
.module-kpi-icon.purple{background:#6f38ed}
.module-kpi-icon.cyan{background:#18a9bd}
.module-kpi-copy small{
  display:block;
  font-size:10px;
  color:#355270;
}
.module-kpi-copy strong{
  display:block;
  margin:3px 0 2px;
  font-size:20px;
  color:#0c2d59;
}
.module-kpi-copy span{
  display:block;
  font-size:9px;
  color:#7286a1;
}

/* Interacción del listado */
.records-table tbody tr.record-row{
  cursor:pointer;
  transition:background .12s ease, box-shadow .12s ease;
}
.records-table tbody tr.record-row:hover td{
  background:#eef6ff!important;
}
.records-table tbody tr.record-row.selected td{
  background:#dfeeff!important;
}
.records-table tbody tr.record-row.selected{
  box-shadow:inset 3px 0 0 #1477f2;
}
.records-table tbody tr.record-row.selected td.main-cell{
  color:#075fc9;
}
.records-table tbody tr.record-row td{
  user-select:none;
}

@media(max-width:1200px){
  .module-kpis{grid-template-columns:repeat(3,minmax(160px,1fr))}
}


/* 4.16.338 · Clientes Online toma Desktop como patrón visual */
.module-head{
  align-items:center;
}
.module-head .breadcrumb{
  font-size:9px;
  color:#6c84a3;
}
.module-head h1{
  font-size:22px;
  font-weight:700;
  color:#12345f;
}
.module-head p{
  font-size:11px;
}

/* KPI Desktop */
.module-kpis{
  gap:12px;
}
.module-mini-kpi.with-icon{
  min-height:88px;
  border-radius:14px;
  border:1px solid #d7e3ef;
  box-shadow:0 1px 2px rgba(34,67,104,.04);
  grid-template-columns:58px 1fr;
}
.module-kpi-icon{
  width:44px;
  height:44px;
  font-size:20px;
}
.module-kpi-copy small{
  font-size:10px;
  font-weight:600;
  text-transform:none;
}
.module-kpi-copy strong{
  font-size:22px;
  font-weight:700;
}
.module-kpi-copy span{
  font-size:9px;
}

/* Barra del cliente seleccionado */
.client-selected-bar{
  min-height:78px;
  background:#fff;
  border:1px solid #cfe0f0;
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 14px;
  margin-bottom:10px;
}
.client-selected-bar.empty{
  min-height:52px;
}
.client-selected-empty{
  color:#8193aa;
  font-size:10px;
}
.client-selected-main{
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  flex:1;
}
.client-selected-avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  background:#dceeff;
  border:1px solid #9fcbff;
  color:#1477f2;
  display:grid;
  place-items:center;
  font-size:14px;
  font-weight:700;
}
.client-selected-copy{
  min-width:0;
}
.client-selected-copy strong{
  display:block;
  font-size:17px;
  color:#10335f;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.client-selected-copy span{
  display:block;
  margin-top:6px;
  color:#587191;
  font-size:10px;
}
.client-selected-actions{
  display:flex;
  gap:6px;
}
.client-selected-actions button{
  min-width:106px;
  height:40px;
  background:#fff;
  border:1px solid #b9d3ef;
  color:#0869d9;
  font-weight:700;
  cursor:pointer;
}
.client-selected-actions button:nth-child(3){
  color:#e88700;
  border-color:#f2c88b;
  background:#fffaf2;
}
.client-selected-actions button:nth-child(4){
  color:#6f38ed;
  border-color:#cfbdf7;
  background:#fbf8ff;
}
.client-selected-actions button:nth-child(5){
  color:#07984d;
  border-color:#99ddb6;
  background:#f5fff8;
}
.client-selected-actions button span{
  margin-left:6px;
}

/* Toolbar desktop */
.client-desktop-toolbar{
  min-height:58px;
  background:#fff;
  border-bottom:1px solid #e1e9f2;
  padding:8px 12px;
}
.client-filter-label,
.client-search-label{
  display:flex;
  align-items:center;
  gap:8px;
  color:#355270;
  font-size:9px;
}
.client-filter-label select{
  width:170px;
  min-height:34px;
  border:1px solid #cbdceb;
  border-radius:6px;
  background:#fff;
  padding:0 10px;
  color:#17365f;
  font-weight:600;
}
.client-search-label{
  flex:1;
}
.client-search-label input{
  width:100%;
  min-height:34px;
}
.client-toolbar-actions{
  margin-left:auto;
  display:flex;
  gap:7px;
}
.btn.orange{
  background:#fff8ef;
  border-color:#f3bd7b;
  color:#e77b00;
}
.client-toolbar-actions .btn{
  min-width:108px;
  height:36px;
}

/* Tabla como Desktop */
.records-table{
  font-size:10px;
}
.records-table th{
  background:#eff5fb;
  color:#21446e;
  padding:11px 12px;
}
.records-table td{
  padding:12px;
}
.records-table tbody tr:nth-child(even) td{
  background:#f9fbfd;
}
.records-table tbody tr.record-row:hover td{
  background:#eaf4ff!important;
}
.records-table tbody tr.record-row.selected td{
  background:#d9ebff!important;
}
.client-status-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 9px;
  border-radius:12px;
  font-size:9px;
  font-weight:700;
}
.client-status-badge.active{
  background:#e3f7e9;
  color:#07964a;
}
.client-status-badge.inactive{
  background:#ffe8ec;
  color:#d72f45;
}
.client-row-actions{
  gap:4px;
}
.client-row-actions button{
  min-width:38px;
  height:34px;
  border:1px solid #bdd4eb;
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.client-row-actions .row-view,
.client-row-actions .row-edit{
  color:#0878ec;
}
.client-row-actions .row-delete{
  color:#ff3448;
}
.client-row-actions small{
  display:block;
  font-size:7px;
  margin-top:4px;
}

/* Tabla ocupa altura útil como Desktop */
.records-wrap{
  min-height:440px;
  max-height:calc(100vh - 405px);
}
.module-card{
  border-radius:0;
}

@media(max-width:1280px){
  .client-selected-actions button{
    min-width:86px;
  }
  .client-selected-copy span{
    white-space:normal;
  }
}


/* 4.16.339 · Clientes visual WFERP corregido */
.wf-svg-icon{
  display:block;
  flex:0 0 auto;
}
.module-kpi-icon .wf-svg-icon{
  width:27px;
  height:27px;
}

/* Oculta acciones redundantes superiores en Clientes */
.module-actions.hidden{
  display:none!important;
}

/* Botones WFERP */
.wf-action-btn{
  height:38px;
  min-width:112px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:0;
  border:1px solid;
  background:#fff;
  font-size:10px;
  font-weight:700;
  cursor:pointer;
}
.wf-action-btn.success{
  color:#078b43;
  border-color:#8ed7ad;
  background:#eefaf3;
}
.wf-action-btn.primary{
  color:#086fe7;
  border-color:#9fc9f5;
  background:#f3f8ff;
}
.wf-action-btn.orange{
  color:#e77b00;
  border-color:#efbd7f;
  background:#fff8ef;
}
.wf-action-btn.danger{
  color:#e23448;
  border-color:#f2aab5;
  background:#fff4f6;
}
.wf-action-btn:hover{
  filter:brightness(.985);
}
.wf-action-btn.purple{
  color:#7546ef;
  border-color:#c1acf6;
  background:#f5f1ff;
}
.wf-action-bar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex-wrap:wrap;
}
.wf-action-bar .wf-action-btn .wf-svg-icon{
  width:17px;
  height:17px;
}

/* Barra cliente seleccionado: SVG WFERP */
.client-selected-actions button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.client-selected-actions .wf-svg-icon{
  width:17px;
  height:17px;
}

/* Avatar listado */
.client-list-name{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:200px;
}
.client-list-avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#1477f2;
  color:#fff;
  font-weight:700;
  font-size:10px;
  flex:0 0 auto;
}
.client-list-name strong{
  color:#12365f;
  font-size:10px;
  text-transform:uppercase;
}

/* Alterna colores de avatar sin imágenes externas */
.records-table tbody tr:nth-child(4n+2) .client-list-avatar{background:#6f48ef}
.records-table tbody tr:nth-child(4n+3) .client-list-avatar{background:#15a7d7}
.records-table tbody tr:nth-child(4n+4) .client-list-avatar{background:#ed4592}

/* acciones de fila vectoriales */
.client-row-actions button{
  min-width:36px;
  min-height:36px;
  padding:3px;
}
.client-row-actions .wf-svg-icon{
  width:15px;
  height:15px;
}
.client-row-actions small{
  font-size:7px;
}

/* Ajuste de tabla para que avatar + nombre tengan aire */
.records-table th:first-child,
.records-table td:first-child{
  min-width:245px;
}

/* Filtros al estilo Desktop */
.client-desktop-toolbar{
  gap:10px;
}
.client-filter-label select,
.client-search-label input{
  border-radius:4px;
}


/* 4.16.340 · Motor tipográfico WFERP Online */
:root{
  --wf-label-size:12px;       /* Segoe UI 9 pt */
  --wf-data-size:13.333px;    /* Segoe UI 10 pt */
}
#module-view,
#record-modal{
  font-family:"Segoe UI",Arial,sans-serif;
}

/* Etiquetas / títulos de campos: 9 pt normal */
#record-modal .field-group label,
.client-filter-label,
.client-search-label,
.records-table th{
  font-family:"Segoe UI",Arial,sans-serif!important;
  font-size:var(--wf-label-size)!important;
  font-weight:400!important;
}

/* Datos, inputs y desplegables: 10 pt Semibold */
#record-modal .field-group input,
#record-modal .field-group select,
#record-modal .field-group textarea,
.client-filter-label select,
.client-search-label input,
.records-table td{
  font-family:"Segoe UI Semibold","Segoe UI",Arial,sans-serif!important;
  font-size:var(--wf-data-size)!important;
  font-weight:600!important;
}
/* El texto de ejemplo (placeholder) debe distinguirse claramente de un dato
   real ya escrito: mas claro, normal (no semibold) y en cursiva. */
#record-modal .field-group input::placeholder{
  font-family:"Segoe UI",Arial,sans-serif!important;
  font-weight:400!important;
  font-style:italic!important;
  color:#9fb0c3!important;
  opacity:1!important;
}
.records-table td.main-cell,
.client-list-name strong{
  font-family:"Segoe UI Semibold","Segoe UI",Arial,sans-serif!important;
  font-size:var(--wf-data-size)!important;
  font-weight:600!important;
}

/* Guía visual 4.17.037: cabecera de tabla 10px semibold, filas 11px
   regular. Selector más específico (table.records-table, no solo
   .records-table) para ganar sin tocar las etiquetas/campos de
   formularios modales, que comparten regla con la tabla arriba. */
table.records-table th{
  font-family:"Segoe UI Semibold","Segoe UI",Arial,sans-serif!important;
  font-size:10px!important;
  font-weight:600!important;
}
table.records-table td{
  font-family:"Segoe UI",Arial,sans-serif!important;
  font-size:11px!important;
  font-weight:400!important;
}

/* Avatar visible y proporcionado con datos 10 pt */
.client-list-avatar{
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  font-family:"Segoe UI Semibold","Segoe UI",Arial,sans-serif!important;
  font-size:11px!important;
  font-weight:600!important;
}
.client-list-name{
  min-width:230px!important;
}

/* ---- Veri*Factu (ficha de factura, pestaña Facturae/Veri*Factu) ---- */
.budget-readonly-pill{display:inline-block;padding:6px 12px;border-radius:8px;background:#edf5fd;color:#123b73;font-weight:600;font-size:13px;}
.verifactu-result{margin-top:14px;padding:14px;border:1px solid #d7e5f3;border-radius:10px;background:#fbfdff;display:flex;flex-wrap:wrap;gap:18px;align-items:center;}
.verifactu-result code{display:block;font-size:12px;word-break:break-all;background:#f1f6fb;padding:6px 8px;border-radius:6px;margin-top:4px;}
.verifactu-qr{display:flex;flex-direction:column;align-items:center;gap:4px;}
.verifactu-qr img{border:1px solid #d7e5f3;border-radius:6px;}

/* ---- Aviso de cambios sin guardar (GUARDAR CAMBIOS parpadeante) ---- */
#record-head-save.is-dirty{
  background:#12B95B;
  color:#fff;
  animation:wf-save-blink 0.9s steps(1,end) infinite;
  border-color:#0a7a3e!important;
}
@keyframes wf-save-blink{
  /* Los "!important" dentro de @keyframes no son validos en CSS y algunos
     navegadores los ignoran de forma inconsistente (por eso la animacion
     se "asignaba" correctamente pero no se veia el cambio de color real).
     Las animaciones CSS ya tienen prioridad de cascada sobre las reglas
     normales del elemento, asi que no hacen falta aqui. */
  0%,49%{background:#12B95B; color:#fff;}
  50%,100%{background:#e8f8ef; color:#078b43;}
}