/* SERPROMAG Gestión V0.12 · Stripe/Qonto-inspired independent visual system */
:root{--pro-bg:#f7f8fb;--pro-paper:#fff;--pro-ink:#1e293b;--pro-muted:#657286;--pro-stroke:#e6eaf0;--pro-primary:#235b99;--pro-navy:#111b2a;--pro-magenta:#9f498e;--pro-shadow:0 4px 18px rgba(18,31,55,.035);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--pro-ink);background:var(--pro-bg)}
body{background:var(--pro-bg);color:var(--pro-ink)}
.shell{background:var(--pro-bg);min-height:100svh}
.sidebar{background:linear-gradient(180deg,#101928 0%,#151f31 100%);width:246px;min-width:246px;padding:27px 16px 19px;gap:5px;border-right:1px solid #263348;box-shadow:1px 0 20px rgba(20,30,50,.03)}
.sidebar .brand{padding:0 10px 27px;margin-bottom:21px;border-bottom:1px solid rgba(240,247,255,.095);display:flex;flex-direction:row;align-items:center;gap:11px}
.sidebar .brand-logo{width:42px;height:42px;max-width:42px;object-fit:contain;background:#fff;padding:4px;border-radius:11px;flex-shrink:0}
.sidebar .brand-wordmark{font-size:14px;color:#f7f9fc;letter-spacing:.08em;font-weight:850}
.sidebar .brand small{font-size:8px;color:#9aacc5;letter-spacing:.17em;line-height:1.7;margin-top:3px}
.nav-caption{color:#647894;font-size:9px;font-weight:800;letter-spacing:.14em;padding:16px 12px 6px}
.sidebar .nav{font-size:12.5px;padding:10px 11px;color:#aebbd0;border-radius:8px;font-weight:540;min-height:40px;letter-spacing:0}
.sidebar .nav:hover{background:#1c2a3d;color:#fff}.sidebar .nav.active{background:#24354d;color:#fff;box-shadow:inset 3px 0 0 #78b5e2;font-weight:710}
.sidebar .foot{margin-top:auto;color:#93a5bd;padding:18px 10px 3px;font-size:10px;border-top:1px solid rgba(240,247,255,.1);line-height:1.9}.sidebar .foot strong{color:#edf5ff}
main{padding:0 36px 50px;max-width:none;min-width:0}
.head{position:sticky;top:0;z-index:20;margin:0 -36px 27px;padding:15px 36px;display:flex;align-items:center;background:rgba(247,248,251,.96);border-bottom:1px solid #e8ebf1;backdrop-filter:blur(15px);min-height:88px}
.head .header-path{font-size:9px;font-weight:830;letter-spacing:.12em;color:#8d98a8;margin-bottom:6px}.header-path span{padding:0 6px;color:#b6c0cb}
.head h1{font-size:21px;letter-spacing:-.035em;font-weight:760;margin-bottom:2px;color:#1a2533}.head .muted{font-size:12px;color:#778397}
.header-actions{display:flex;align-items:center;gap:12px}.status-badge{display:inline-flex;align-items:center;gap:8px;border:1px solid #dfe9e1;background:#f8fcf9;color:#4e7860;border-radius:999px;padding:7px 12px;font-size:11px;box-shadow:none;white-space:nowrap}.status-badge i{display:inline-block;width:7px;height:7px;background:#56aa75;border-radius:50%}
.profile-chip{display:flex;align-items:center;gap:8px;border:1px solid var(--pro-stroke);border-radius:10px;background:#fff;color:#2b3747;padding:6px 11px 6px 6px;text-align:left;font-size:11px;font-weight:690;box-shadow:0 1px 3px #16294207;min-width:110px}.profile-chip small{display:block;color:#7d8a9a;font-size:9px;font-weight:550;margin-top:2px}.profile-avatar{background:#e9ecf6;color:#425c93;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-weight:800}
.card{background:var(--pro-paper);border:1px solid var(--pro-stroke);border-radius:13px;box-shadow:var(--pro-shadow);padding:19px}
.btn{background:#245d9f;border-color:#245d9f;color:#fff;border-radius:8px;font-size:12px;padding:10px 14px;font-weight:670;box-shadow:0 2px 5px #245d9f12}.btn:hover:not(:disabled){background:#1c4f89}.btn.secondary{background:#fff;color:#435269;border-color:#dae1e9}.btn.secondary:hover{background:#f4f7fa}.btn:disabled{opacity:.65;cursor:not-allowed}
.muted{color:var(--pro-muted)}h2{color:#1e293b;font-weight:730}
input,select,textarea{background:#fff;color:#253448;border-color:#dce3eb;transition:border .15s,box-shadow .15s;border-radius:8px}input:focus,select:focus,textarea:focus{border-color:#7199ce;outline:0;box-shadow:0 0 0 3px rgba(38,93,159,.08)}
label{color:#526175;font-weight:660}
.note{background:#f4f7fc;color:#526077;border-color:#dce6f3;border-left:3px solid #4c80bf}
.list{width:100%;background:#fff;border:1px solid #e8ebf1;border-radius:10px;overflow:hidden}.list th{background:#fafbfd;color:#818d9e;font-size:11px;font-weight:680}.list td{font-size:12px;color:#314058}.list th,.list td{padding:13px 12px;border-bottom:1px solid #edf0f4}.list tbody tr:hover{background:#fafcff}
.pill{background:#f2f5f9;border:1px solid #e5eaf1;color:#506074}
/* Overview home */
.overview-welcome{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:0 0 24px;padding:2px 0 4px}
.overview-eyebrow{color:#74839a;font-weight:750;font-size:10px;letter-spacing:.12em;text-transform:uppercase}.period-dot{color:#a7b2c2;padding:0 5px}
.overview-welcome h2{font-size:26px;letter-spacing:-.045em;margin:10px 0 7px;color:#1d2838;line-height:1.18}
.overview-welcome p{font-size:13px;color:#657489;margin:0;line-height:1.55}.overview-cta{display:flex;gap:8px;white-space:nowrap}
.overview-cards.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.overview-card{min-height:150px;padding:19px 20px 17px;position:relative;overflow:hidden}.overview-card:nth-child(2):before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#a65d98}.overview-card .num{font-size:32px;font-weight:770;color:#1c2737;margin:19px 0 4px;letter-spacing:-.055em}
.overview-label{display:flex;align-items:center;justify-content:space-between;gap:9px;color:#647389;font-size:12px;font-weight:645}.metric-symbol{width:27px;height:27px;display:grid;place-items:center;border-radius:8px;background:#f1f4f9;color:#547bb1;font-size:16px;font-weight:500}
.overview-card:nth-child(2) .metric-symbol{background:#fbf1fa;color:#a65d98}.metric-description{font-size:10.5px;color:#8894a5}
.overview-content-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(295px,.9fr);gap:14px;margin-top:14px;align-items:stretch}.overview-right{display:flex;flex-direction:column;gap:14px}
.overview-panel{padding:19px 20px}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px}.panel-kicker{color:#9b91ac;font-size:9px;font-weight:800;letter-spacing:.15em;margin-bottom:6px}.panel-head h2{font-size:15px;margin:0;color:#253448;letter-spacing:-.025em}.small-link{border:0;background:none;padding:5px;color:#2b619e;cursor:pointer;font-size:11px;font-weight:720;text-align:left;white-space:nowrap}.small-link:hover{text-decoration:underline}
.overview-table{border:none;border-radius:0;box-shadow:none}.overview-table th:first-child,.overview-table td:first-child{padding-left:0}.overview-table th:last-child,.overview-table td:last-child{padding-right:0}.overview-table th{background:#fff;border-bottom:1px solid #e8ecf2;padding-top:7px;padding-bottom:11px}.overview-table tr:last-child td{border-bottom:0}
.progress-wrap{min-width:72px;display:flex;flex-direction:column;gap:6px;font-size:11px;color:#687789}.progress-track{height:5px;border-radius:20px;background:#edf1f6;overflow:hidden}.progress-track i{display:block;background:#6191c0;height:100%;border-radius:20px}
.state-label{display:inline-flex;align-items:center;border-radius:18px;font-size:10px;font-weight:690;padding:5px 8px;background:#f1f4f7;color:#677286;white-space:nowrap}.state-label.green{background:#e6f6ee;color:#287f54}.state-label.amber{background:#fef4e5;color:#a16d22}
.overview-list{display:flex;flex-direction:column}.overview-line{display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid #f0f2f5}.overview-line:last-child{border:0}.overview-line>span:nth-child(2){min-width:0;flex:1}.overview-line strong{display:block;font-size:11.5px;font-weight:690;color:#2f3c4e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.overview-line small{display:block;color:#8b98a8;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}.overview-line time{font-size:10px;color:#8994a5;white-space:nowrap}
.date-square{background:#f1f5fa;border:1px solid #e6ebf2;color:#28629d;min-width:36px;height:40px;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:15px;font-weight:800}.date-square small{color:#8797a9!important;font-size:9px!important;margin:0!important}.activity-icon{height:29px;width:29px;border:1px solid #e7ebf1;background:#f5f7fa;border-radius:9px;display:grid;place-items:center;font-size:14px;color:#7287a2;flex-shrink:0}
.overview-empty{padding:24px 4px;color:#8995a5;font-size:12px;line-height:1.65;text-align:left}.quick-card{flex:1}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.quick-action{background:#fafbfd;border:1px solid #e6ebf1;padding:11px 10px;display:flex;align-items:center;gap:9px;text-align:left;border-radius:9px;color:#49586e;font-size:11px;font-weight:650}.quick-action span{color:#3c75b1;background:#eaf2fb;width:25px;height:25px;display:grid;place-items:center;border-radius:6px;font-size:15px}.quick-action:hover{background:#f3f7fb;border-color:#ccdbed}
.overview-lower{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(295px,.9fr);gap:14px;margin-top:14px}.stats-line{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f0f2f5;color:#647185;font-size:11.5px}.stats-line strong{font-size:12px;color:#253448}.inline-quiet{display:flex;align-items:center;gap:7px;margin-top:14px;font-size:10px;color:#8a95a5}.quiet-dot{width:6px;height:6px;border-radius:50%;background:#d8aa59}
.table-scroll{overflow-x:auto;width:100%}
/* Login: shows until a successful credential + membership check */
.login-gate{background:radial-gradient(circle at 24% 20%,#203856 0,transparent 38%),linear-gradient(135deg,#111c2e,#18263b 55%,#101b2d);padding:22px;z-index:199;min-height:100svh;display:grid;place-items:center}
.login-panel{background:#fff;color:#26374a;border:1px solid #dae3ee;border-radius:19px;padding:29px 32px 26px;width:min(100%,450px);box-shadow:0 22px 90px rgba(3,12,24,.3);position:relative}
.login-panel .brand{padding:0!important;margin:0 0 21px;display:flex;flex-direction:column;gap:7px;align-items:center}.login-panel .brand-logo{display:block;object-fit:contain;width:min(75%,195px);max-height:160px;height:auto;background:#fff;padding:8px;border-radius:11px}
.login-panel .brand-wordmark{display:none}.login-panel .muted{margin:0 0 22px;text-align:center;color:#657589;font-size:12px;line-height:1.7}.login-panel label{color:#394a5f;font-size:11px}.login-panel input{background:#fbfcfe;padding:12px 13px;border:1px solid #d9e2ec;color:#253346;border-radius:9px}.login-panel .field{margin-bottom:15px}.login-panel .btn{font-size:13px;padding:12px 15px;margin-top:5px}.login-help{font-size:10.5px;color:#8290a3;text-align:center;margin:13px 0 4px;line-height:1.55}.login-powered{border-top:1px solid #edf1f5;padding-top:18px;margin-top:17px;font-size:10px;color:#8a98a8;text-align:center}.login-powered span{padding:0 3px}.login-powered b{color:#32649e;letter-spacing:.06em}.login-panel #loginError{min-height:12px;margin-top:13px;color:#b44559;font-size:11px;text-align:center}
.brand-intro{z-index:210}.intro-skip{font-size:12px;cursor:pointer}
/* Responsive desktop / tablet / phone */
@media(max-width:1200px){main{padding:0 23px 40px}.head{margin:0 -23px 26px;padding:15px 23px}.sidebar{width:219px;min-width:219px}.overview-cards.cards{gap:10px}.overview-content-grid,.overview-lower{grid-template-columns:minmax(0,1.25fr) minmax(260px,.9fr)}}
@media(max-width:920px){.overview-content-grid,.overview-lower{grid-template-columns:1fr}.overview-right{display:grid;grid-template-columns:1fr 1fr}.overview-cards.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.overview-welcome h2{font-size:22px}}
@media(max-width:760px){.shell{display:block}.sidebar{position:relative;height:auto;width:100%;min-width:0;padding:10px 12px;display:flex;flex-direction:row;align-items:center;gap:6px;overflow:auto;border-right:0;border-bottom:1px solid #27384b}.sidebar .brand{padding:0 12px 0 0;margin:0 7px 0 0;border:0;min-width:137px;gap:7px}.sidebar .brand-logo{height:33px;width:33px;max-width:33px}.sidebar .brand-wordmark{font-size:11px}.sidebar .brand small{font-size:7px}.sidebar .nav{font-size:11px;min-height:36px;white-space:nowrap;padding:8px 10px}.nav-caption{display:none}.sidebar .foot{display:none}main{padding:0 14px 28px}.head{position:relative;top:auto;padding:14px;margin:0 -14px 24px;min-height:70px}.header-actions{gap:6px}.head h1{font-size:19px}.head .muted,.header-path{font-size:10px}.status-badge{display:none}.profile-chip{padding:5px;min-width:38px}.profile-chip span:last-child{display:none}.overview-welcome{display:block}.overview-welcome h2{font-size:22px}.overview-cta{margin-top:17px}.overview-cards.cards{gap:9px;grid-template-columns:1fr 1fr}.overview-card{min-height:130px;padding:13px}.overview-card .num{font-size:27px;margin-top:14px}.overview-label{font-size:10px}.metric-symbol{font-size:13px;width:24px;height:24px}.metric-description{font-size:9px}.overview-content-grid,.overview-lower{grid-template-columns:1fr}.overview-right{display:flex}.overview-panel{padding:15px}.table-scroll{overflow:auto}.overview-table{min-width:510px}.overview-welcome p{font-size:12px}.login-panel{padding:24px 20px 20px}.login-panel .brand-logo{max-height:130px}.grid{grid-template-columns:1fr}.cards:not(.overview-cards){grid-template-columns:1fr 1fr}.formgrid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
/* V0.12 mobile overflow correction: keep wide process tables inside their scroll container. */
.overview-process,.overview-right,.overview-lower>.overview-panel,.overview-content-grid>.overview-panel{min-width:0}
.table-scroll{max-width:100%;min-width:0;overflow-x:auto}
.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.quick-action{min-width:0}
@media(max-width:920px){.overview-content-grid,.overview-lower{grid-template-columns:minmax(0,1fr)}.overview-right{min-width:0}}
@media(max-width:760px){.overview-process,.overview-panel{max-width:100%;overflow:hidden}.overview-content-grid,.overview-lower{display:grid;grid-template-columns:minmax(0,1fr)}.overview-right{display:flex;min-width:0}.overview-table{min-width:510px}.quick-action{font-size:10px;gap:6px;padding:10px 7px}.quick-action span{flex-shrink:0}}