:root{
  --bg:#f5f8fc;--panel:#fff;--ink:#14213d;--muted:#73819a;--line:#e8edf5;
  --blue:#1769f3;--blue2:#0d5de9;--green:#22ad69;--orange:#ff9f1c;--purple:#7a5af8;--red:#ef4444;
  --shadow:0 10px 30px rgba(24,45,80,.055);--shadow2:0 16px 38px rgba(24,45,80,.08);--radius:18px;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink);font-size:14px}
a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}
.app-shell{min-height:100vh;display:grid;grid-template-columns:255px 1fr}
.sidebar{position:sticky;top:0;height:100vh;background:#fff;border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;z-index:30}
.brand{display:flex;align-items:center;gap:12px;padding:4px 6px 24px 4px;min-height:62px}
.brand-mark{display:grid;place-items:center;width:42px;height:46px;border-radius:13px;background:linear-gradient(145deg,#1977ff,#0d58d7);color:#fff;font-weight:900;box-shadow:0 10px 24px rgba(23,105,243,.22);font-size:18px}
.brand strong{font-size:18px;letter-spacing:-.02em;line-height:1.1}.brand small{display:block;color:var(--muted);font-size:10px;font-weight:500;margin-top:4px}
.sidebar nav{display:grid;gap:6px}.sidebar nav a{display:flex;align-items:center;gap:13px;padding:12px 13px;border-radius:11px;color:#33445e;font-size:14px;font-weight:500;transition:.18s ease}
.sidebar nav a span{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;text-align:center;font-size:16px;color:#64758c}
.sidebar nav a:hover{background:#f7faff;color:var(--blue);transform:translateX(1px)}
.sidebar nav a.active{background:#eaf3ff;color:var(--blue);box-shadow:inset 3px 0 0 var(--blue);font-weight:700}.sidebar nav a.active span{color:var(--blue);background:#dcebff}
.secure-box{margin-top:auto;border:1px solid var(--line);border-radius:16px;padding:14px;background:linear-gradient(180deg,#fbfdff,#f7fbff);display:grid;gap:7px;font-size:12px;box-shadow:0 8px 22px rgba(25,65,115,.03)}.secure-box b{display:flex;align-items:center;gap:6px}.secure-box small{color:var(--muted);line-height:1.5}
.main{min-width:0}.topbar{height:76px;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:20}
.global-search{width:min(500px,52vw);height:44px;border:1px solid #dfe7f2;border-radius:12px;display:flex;align-items:center;gap:10px;padding:0 12px;background:#fff;box-shadow:0 3px 12px rgba(25,55,95,.02)}.global-search input{border:0;outline:0;flex:1;background:transparent;color:var(--ink);font-size:13px}.global-search span{color:#6c7d94}.global-search kbd{margin-left:auto;background:#f5f7fb;color:#8a98ab;border:0;border-radius:7px;padding:4px 7px;font-size:11px}
.profile{display:flex;align-items:center;gap:10px}.profile .profile-copy{line-height:1.2}.profile strong{font-size:13px}.profile small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.profile>a{font-size:16px;color:var(--muted)}
.bell{position:relative;margin-right:10px;font-size:20px;color:#475a73}.bell b{position:absolute;right:-7px;top:-8px;background:var(--red);color:#fff;border-radius:99px;font-size:9px;padding:3px 5px;border:2px solid #fff}.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#eaf3ff;color:var(--blue);font-weight:800;border:1px solid #dbe9ff}.avatar.small{width:34px;height:34px;font-size:12px}.avatar.xl{width:60px;height:60px;font-size:17px}
.content{padding:34px 34px 24px;max-width:1680px;width:100%;margin:0 auto}.page-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px}.page-head h1{margin:0;font-size:30px;letter-spacing:-.04em;line-height:1.1}.page-head p{margin:7px 0 0;color:var(--muted);font-size:14px}.page-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:-58px;margin-bottom:22px}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:22px}.metric{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 18px;display:flex;align-items:center;gap:15px;box-shadow:var(--shadow);min-height:102px}.metric:after{content:"";position:absolute;width:92px;height:52px;border-radius:50%;right:-22px;bottom:-22px;background:linear-gradient(135deg,transparent,rgba(23,105,243,.04))}.metric i{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:21px;flex:0 0 50px}.metric.blue i{background:#e9f2ff;color:var(--blue)}.metric.green i{background:#e8f8ef;color:var(--green)}.metric.orange i{background:#fff2dc;color:var(--orange)}.metric.purple i{background:#f1ebff;color:var(--purple)}.metric.red i{background:#ffeded;color:var(--red)}.metric span,.metric small{display:block;color:var(--muted);font-size:11px}.metric strong{display:block;font-size:29px;margin:2px 0 3px;letter-spacing:-.04em}
.dash-grid{display:grid;grid-template-columns:1.02fr 1fr;gap:20px;margin-bottom:20px}.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:20px}.dash-grid>.card{min-height:410px}.card-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px}.card-head h2,.card h2{margin:0;font-size:17px;letter-spacing:-.015em}.card-head>a{font-size:12px;color:var(--blue);font-weight:700}.card-head>a:hover{text-decoration:underline}
.progress-row{display:grid;grid-template-columns:42px minmax(150px,1fr) minmax(140px,1.2fr) 52px;gap:12px;align-items:center;padding:15px 0;border-top:1px solid var(--line)}.progress-row:first-of-type{border-top:0}.progress-row:hover{background:#fbfdff}.progress-row small{display:block;color:var(--muted);font-size:11px;margin-top:4px}.client-bubble{width:34px;height:34px;border-radius:50%;background:#e9f2ff;color:var(--blue);display:grid;place-items:center;font-size:11px;font-weight:800}.client-bubble.lg{width:52px;height:52px;font-size:15px}.progress{height:7px;background:#edf1f7;border-radius:99px;overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--blue),#63a7ff);border-radius:99px}
.activity-row,.timeline-item{display:grid;grid-template-columns:38px 1fr auto;gap:11px;align-items:start;padding:13px 0;border-top:1px solid var(--line);font-size:13px}.activity-row:first-of-type{border-top:0}.activity-row b,.timeline-item b{color:#18304f}.activity-row small,.timeline-item p{display:block;margin:4px 0 0;color:var(--muted);font-size:11px;line-height:1.4}.activity-row time,.timeline-item time{font-size:10px;color:#8794a7;padding-top:4px;white-space:nowrap}.activity-icon{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#edf5ff;color:var(--blue);font-weight:700}.count-badge{background:var(--red);color:#fff;border-radius:99px;padding:2px 7px;font-size:10px;vertical-align:2px}
.empty{min-height:190px;display:grid;place-items:center;text-align:center;color:var(--muted);padding:24px}.empty-state{display:grid;justify-items:center;gap:8px}.empty-state .empty-icon{width:54px;height:54px;border-radius:16px;background:#f0f6ff;color:var(--blue);display:grid;place-items:center;font-size:24px}.empty-state b{color:#33445e}.empty-state small{max-width:330px;line-height:1.5}
.client-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.client-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;box-shadow:var(--shadow);transition:.18s}.client-card:hover{transform:translateY(-2px);box-shadow:var(--shadow2);border-color:#d7e6fb}.client-card h3{margin:0 0 4px;font-size:16px}.client-card p{margin:0;color:var(--muted);font-size:12px}.client-meta{display:flex;gap:12px;margin-top:12px;font-size:11px;color:#52627a}.breadcrumb{font-size:12px;color:var(--muted);margin:-10px 0 18px}.breadcrumb a{color:var(--blue)}
.files-layout{display:grid;grid-template-columns:250px 1fr;gap:16px}.folder-row{display:grid;grid-template-columns:24px 1fr auto 16px;gap:8px;align-items:center;padding:13px 2px;border-top:1px solid var(--line);font-size:13px}.folder-row:hover{color:var(--blue)}.folder-row em{font-style:normal;background:#f3f6fa;padding:3px 7px;border-radius:99px;color:var(--muted)}
.icon-btn{border:1px solid var(--line);background:#fff;border-radius:9px;min-width:32px;height:32px;display:inline-grid;place-items:center;color:#42536b;cursor:pointer;transition:.15s}.icon-btn:hover{border-color:#bfd5f5;color:var(--blue);background:#f6faff}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;padding:11px 16px;font-weight:700;cursor:pointer;transition:.15s}.btn:hover{transform:translateY(-1px)}.btn.primary{background:linear-gradient(180deg,var(--blue),var(--blue2));color:#fff;box-shadow:0 8px 18px rgba(20,111,245,.18)}.btn.ghost{background:#fff;color:#2c3e58;border:1px solid var(--line)}.btn.mini{padding:7px 10px;font-size:11px}.btn.wide{width:100%}.big-btn{height:52px;font-size:15px}
.table-wrap{overflow:auto;border:1px solid #eef2f7;border-radius:12px}table{width:100%;border-collapse:collapse;font-size:12px;background:#fff}th{color:#6c7a90;font-weight:600;text-align:left;background:#fbfcfe;padding:12px;border-bottom:1px solid var(--line);white-space:nowrap}td{padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:middle}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:#fcfdff}td small{display:block;color:var(--muted);margin-top:4px}.due{color:var(--red);font-weight:700}.file-name{display:flex;align-items:center;gap:10px;min-width:180px}.file-icon{width:31px;height:34px;border:1px solid #ffd5d5;background:#fff3f3;color:#ef4444;border-radius:7px;display:grid;place-items:center;font-size:8px;font-weight:900}.file-icon.xls,.file-icon.xlsx{border-color:#c6efd7;background:#effcf5;color:var(--green)}.row-actions{display:flex;gap:8px;align-items:center}.row-actions form{margin:0}.row-actions select,table select{padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#506079}.badge{display:inline-flex;padding:5px 8px;border-radius:7px;font-size:10px;font-weight:700;background:#eef2f6;color:#55657b}.badge.received,.badge.new{background:#eaf3ff;color:var(--blue)}.badge.reviewed{background:#fff5df;color:#c47a00}.badge.approved{background:#e9f8ef;color:#13804b}.badge.rejected{background:#ffeded;color:#d93030}.badge.pending{background:#fff3df;color:#c77900}.badge.role-admin{background:#eaf3ff;color:var(--blue)}.badge.role-auditor{background:#e9f8ef;color:#13804b}.badge.role-client{background:#fff1df;color:#c56d00}
.filters{display:grid;grid-template-columns:1.4fr repeat(2,1fr);gap:12px;margin-bottom:16px}.filters input,.filters select,.small-search{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff;outline:none}.small-search{width:280px}.form-card{max-width:900px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.full{grid-column:1/-1}label{display:grid;gap:7px;font-size:12px;font-weight:700;color:#405069}input,select,textarea{width:100%;border:1px solid #dfe6f0;border-radius:9px;padding:11px 12px;outline:none;background:#fff;color:var(--ink)}input:focus,select:focus,textarea:focus{border-color:#7fb1ff;box-shadow:0 0 0 3px #edf5ff}.check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.check{display:flex;align-items:center;gap:8px;padding:11px;background:#f8faff;border:1px solid var(--line);border-radius:9px}.check input,.remember input,.toggle-line input{width:auto}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.muted{color:var(--muted);font-size:12px}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px}.status-dot.on{background:var(--green)}.status-dot.off{background:#aab4c2}.user-cell{display:flex;align-items:center;gap:9px}.edit-user-head{display:flex;align-items:center;gap:14px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line)}.edit-user-head h2,.edit-user-head p{margin:0}.edit-user-head p{color:var(--muted);font-size:12px;margin-top:3px}.edit-user-head .badge{margin-left:auto}.toggle-line{display:flex;align-items:center;gap:8px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.settings-list>div{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-top:1px solid var(--line);font-size:13px}.settings-list span{color:var(--muted);text-align:right}.app-footer{display:flex;justify-content:space-between;color:#8b98aa;font-size:11px;padding:18px 0 0}.flash{padding:12px 14px;border-radius:10px;margin-bottom:16px}.flash.success{background:#e9f8ef;color:#147a4c}.flash.error{background:#ffeded;color:#bf3030}
.modal{position:fixed;inset:0;background:rgba(12,26,50,.34);display:none;align-items:center;justify-content:center;padding:20px;z-index:100}.modal.show{display:flex}.modal-card{position:relative;width:min(520px,100%);background:#fff;border-radius:18px;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.18)}.modal-card form{display:grid;gap:14px}.modal-x{position:absolute;right:14px;top:12px;border:0;background:transparent;font-size:24px;color:#8390a2;cursor:pointer}
.auth-page{min-height:100vh;background:#f8fbff;padding:0}.login-shell{min-height:100vh;display:grid;grid-template-columns:1fr 1.05fr}.login-info{padding:46px 6vw;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(145deg,#fff,#f1f6ff)}.login-logo{display:flex;align-items:center;gap:12px;font-size:20px}.login-info h1{font-size:34px;line-height:1.2;max-width:520px;margin:40px 0 18px}.login-info h1 span{color:var(--blue);display:block}.login-info>div>p{max-width:510px;color:var(--muted);line-height:1.65}.login-info ul{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:18px}.login-info li{display:flex;gap:14px}.login-info li i{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-style:normal}.login-info li i.blue{background:#e8f2ff;color:var(--blue)}.login-info li i.green{background:#e9f8ef;color:var(--green)}.login-info li i.purple{background:#f0eafd;color:var(--purple)}.login-info li small{display:block;color:var(--muted);max-width:330px;line-height:1.45;margin-top:3px}.login-illustration{font-size:60px;color:#fff;width:120px;height:120px;border-radius:34px;background:linear-gradient(145deg,#bcd8ff,#6da7ff);display:grid;place-items:center;box-shadow:0 20px 40px rgba(68,134,230,.18);margin:10px auto 0}.login-card{align-self:center;justify-self:center;width:min(550px,80%);background:#fff;border:1px solid var(--line);border-radius:18px;padding:44px;box-shadow:0 24px 70px rgba(30,65,110,.1)}.login-card-head{text-align:center;margin-bottom:30px}.login-card-head h2{font-size:28px;margin:14px 0 5px}.login-card-head p{color:var(--muted);margin:0}.login-card form{display:grid;gap:16px}.login-options{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}.remember{display:flex;align-items:center;gap:7px}.login-security{text-align:center;color:#71839a;font-size:12px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
@media(max-width:1200px){.app-shell{grid-template-columns:92px 1fr}.brand strong,.brand small{display:none}.brand{justify-content:center}.sidebar nav a{font-size:0;justify-content:center}.sidebar nav a span{font-size:16px}.secure-box{display:none}.metric-grid{grid-template-columns:repeat(2,1fr)}.client-grid{grid-template-columns:repeat(2,1fr)}.content{padding:28px 24px}}
@media(max-width:760px){.app-shell{display:block}.sidebar{height:auto;position:static;flex-direction:row;padding:10px;overflow:auto}.brand{display:none}.sidebar nav{display:flex}.sidebar nav a,.sidebar nav a.active{font-size:0;padding:10px}.sidebar nav a span,.sidebar nav a.active span{font-size:16px}.topbar{padding:0 14px;height:66px}.global-search{display:none}.profile .profile-copy{display:none}.content{padding:18px 14px}.page-head h1{font-size:25px}.page-actions{margin:0 0 16px}.metric-grid,.dash-grid,.client-grid,.settings-grid,.form-grid,.filters{grid-template-columns:1fr}.dash-grid>.card{min-height:auto}.files-layout{display:block}.folders-card{display:none}.progress-row{grid-template-columns:36px 1fr 50px}.progress{display:none}.check-grid{grid-template-columns:1fr}.login-card{width:92%;padding:28px}.app-footer{display:block;line-height:1.8}.small-search{width:100%}.card-head{align-items:flex-start;flex-direction:column}}


/* V2.2 - perfil, notificaciones, iconos y experiencia cliente */
.brand{align-items:center}
.brand-mark svg,.secure-icon svg,.sidebar nav a span svg,.search-icon svg,
.notification-btn svg,.profile-chevron svg,.logout-link svg{
    width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round
}
.brand-mark svg{width:23px;height:23px;stroke:#fff}
.brand-copy{display:flex;flex-direction:column;min-width:0}
.brand-copy strong{max-width:145px;white-space:normal}
.sidebar nav a span{width:22px;height:22px;display:grid;place-items:center;flex:0 0 22px}
.sidebar nav a span svg{width:18px;height:18px}
.secure-box{display:flex;align-items:flex-start;gap:10px}
.secure-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:#eaf3ff;color:var(--blue);flex:0 0 30px}
.secure-icon svg{width:17px;height:17px}
.top-actions{display:flex;align-items:center;gap:12px}
.notification-btn{position:relative;width:40px;height:40px;border:1px solid var(--line);border-radius:12px;display:grid;place-items:center;color:#52637b;background:#fff;transition:.18s ease}
.notification-btn:hover{border-color:#cbd8eb;background:#f8fbff;color:var(--blue)}
.notification-btn svg{width:20px;height:20px}
.notification-btn b{position:absolute;right:-5px;top:-6px;min-width:19px;height:19px;padding:0 4px;display:grid;place-items:center;background:#ef4444;color:#fff;border-radius:99px;font-size:9px;border:2px solid #fff;line-height:1}
.profile-menu{position:relative}
.profile-menu summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;padding:5px 7px;border-radius:12px;transition:.18s ease}
.profile-menu summary::-webkit-details-marker{display:none}
.profile-menu summary:hover{background:#f4f7fb}
.profile-chevron{display:grid;place-items:center;color:#7a8ba3}
.profile-chevron svg{width:16px;height:16px}
.profile-menu[open] .profile-chevron{transform:rotate(180deg)}
.profile-dropdown{position:absolute;right:0;top:calc(100% + 10px);width:220px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 45px rgba(24,52,88,.14);border-radius:15px;padding:10px;z-index:50}
.profile-dropdown-head{display:flex;align-items:center;gap:10px;padding:8px 8px 12px;border-bottom:1px solid var(--line)}
.profile-dropdown-head b{display:block;font-size:13px}
.profile-dropdown-head small{display:block;color:var(--muted);font-size:10px;margin-top:2px}
.logout-link{display:flex;align-items:center;gap:10px;margin-top:8px;padding:10px;border-radius:10px;color:#c73a46;font-size:13px;font-weight:700}
.logout-link:hover{background:#fff2f3}
.logout-link svg{width:18px;height:18px}
.empty-state{display:flex;min-height:150px;align-items:center;justify-content:center;flex-direction:column;text-align:center;color:var(--muted);gap:5px;padding:24px}
.empty-state b{color:var(--ink);font-size:14px}
.empty-state span{font-size:12px}
.empty-state.compact{min-height:110px}
.empty-table{padding:34px 16px;text-align:center;display:flex;flex-direction:column;gap:5px;color:var(--muted)}
.empty-table b{color:var(--ink)}
.modal-help{margin:-3px 0 18px;color:var(--muted);font-size:12px;line-height:1.5}
@media(max-width:760px){
    .top-actions{gap:6px}
    .notification-btn{width:38px;height:38px}
    .profile-menu .profile-copy{display:none}
    .profile-menu summary{gap:5px}
    .profile-dropdown{right:-4px;width:210px}
}