:root{--bg:#0b1220;--panel:rgba(21,34,55,.76);--panel2:rgba(255,255,255,.055);--line:rgba(255,255,255,.10);--text:#edf3ff;--muted:#91a0b8;--accent:#65b9ff;--accent2:#8b9cff;--green:#45d6a0;--yellow:#f6c66b;--red:#ff7885;--shadow:0 18px 55px rgba(0,0,0,.24);--blur:blur(18px)}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 15% 0%,#1a3653 0,transparent 35%),radial-gradient(ellipse at 90% 25%,#292650 0,transparent 32%),linear-gradient(135deg,#0a1220,#101a2d 60%,#11182a);color:var(--text);font:14px 'DM Sans',sans-serif;min-height:100vh}
button,input,select,textarea{font:inherit}button{cursor:pointer}.app{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh;gap:18px;padding:18px}.sidebar,.glass,.topbar,.modal-card{background:var(--panel);border:1px solid var(--line);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--shadow)}
.sidebar{border-radius:24px;padding:20px 14px;display:flex;flex-direction:column;gap:22px;height:calc(100vh - 36px);position:sticky;top:18px}.brand{display:flex;gap:11px;align-items:center;padding:4px 8px}.brandmark{width:38px;height:38px;border-radius:13px;background:linear-gradient(135deg,#65b9ff,#7c83f6);display:grid;place-items:center;color:#071321;font-weight:900;font-family:Manrope;font-size:18px}.brand b{font:800 16px Manrope;letter-spacing:.3px}.brand small{display:block;color:var(--muted);font-size:10px;margin-top:2px}.nav-label{color:#71829e;text-transform:uppercase;letter-spacing:1.5px;font-size:10px;padding:0 12px;margin:3px 0 7px}.nav{display:grid;gap:5px}.nav button{border:0;background:transparent;color:#aebbd0;text-align:left;padding:11px 12px;border-radius:12px;display:flex;align-items:center;gap:12px;transition:.2s}.nav button:hover,.nav button.active{background:rgba(101,185,255,.13);color:#fff}.nav button.active{box-shadow:inset 3px 0 var(--accent)}.ico{width:19px;text-align:center;font-size:16px}.side-bottom{margin-top:auto}.user-mini{padding:12px;border:1px solid var(--line);border-radius:15px;display:flex;gap:10px;align-items:center}.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#65b9ff,#a68cff);display:grid;place-items:center;color:#071321;font-weight:800}.user-mini small{display:block;color:var(--muted);font-size:11px}
main{min-width:0}.topbar{border-radius:20px;padding:13px 18px;display:flex;align-items:center;gap:14px;justify-content:space-between;margin-bottom:20px}.welcome h1{font:700 19px Manrope;margin:0}.welcome p{margin:4px 0 0;color:var(--muted);font-size:12px}.top-actions{display:flex;align-items:center;gap:9px}.search{width:min(270px,24vw);background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:11px;padding:10px 12px;color:var(--text);outline:none}.btn{border:1px solid var(--line);background:rgba(255,255,255,.07);color:var(--text);padding:10px 13px;border-radius:11px;transition:.2s}.btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.13)}.btn.primary{background:linear-gradient(135deg,#65b9ff,#7d91ff);color:#081322;border:0;font-weight:800}.btn.danger{color:#ff9ba5}.content-head{display:flex;align-items:end;justify-content:space-between;margin:4px 0 16px;gap:12px}.content-head h2{font:800 23px Manrope;margin:0}.content-head p{color:var(--muted);margin:5px 0 0}.grid{display:grid;gap:14px}.kpis{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:14px}.glass{border-radius:19px;padding:17px;min-width:0}.kpi-top{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}.kpi-icon{width:31px;height:31px;border-radius:10px;background:rgba(101,185,255,.13);display:grid;place-items:center;color:var(--accent)}.kpi-value{font:800 25px Manrope;margin:12px 0 5px}.trend{font-size:11px;color:var(--green)}.trend.down{color:var(--red)}.dashboard-grid{grid-template-columns:1.25fr 1fr;margin-bottom:14px}.panel-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.panel-title h3{font:700 14px Manrope;margin:0}.muted{color:var(--muted)}.pipeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.stage{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:13px;padding:9px;min-width:0}.stage-head{font-size:11px;color:var(--muted);display:flex;justify-content:space-between;margin-bottom:9px}.deal{background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:10px;margin-bottom:7px}.deal b{display:block;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.deal small{color:var(--muted);font-size:10px}.deal strong{display:block;margin-top:7px;font-size:12px}.pill{display:inline-flex;align-items:center;border-radius:30px;padding:4px 8px;font-size:10px;background:rgba(101,185,255,.13);color:#9bd4ff}.pill.green{background:rgba(69,214,160,.13);color:#73e4b8}.pill.yellow{background:rgba(246,198,107,.13);color:#ffd68a}.pill.red{background:rgba(255,120,133,.13);color:#ff9ba5}.task{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.task:last-child{border:0}.task input{accent-color:var(--accent);width:16px;height:16px}.task-main{flex:1}.task-main b{font-size:12px}.task-main small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.task.done b{text-decoration:line-through;color:#71829e}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;white-space:nowrap}th{text-align:left;color:#8292ad;font-size:10px;text-transform:uppercase;letter-spacing:.8px;font-weight:600;padding:11px 10px;border-bottom:1px solid var(--line)}td{padding:13px 10px;border-bottom:1px solid rgba(255,255,255,.055);font-size:12px}tbody tr:hover{background:rgba(255,255,255,.035)}.person{display:flex;align-items:center;gap:9px}.person .avatar{width:29px;height:29px;font-size:10px}.empty{padding:28px;text-align:center;color:var(--muted)}.view{display:none}.view.active{display:block}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.field{display:grid;gap:6px}.field.full{grid-column:1/-1}.field label{font-size:11px;color:#9cabc1}.field input,.field select,.field textarea{width:100%;background:rgba(5,12,23,.42);border:1px solid var(--line);border-radius:10px;padding:11px;color:var(--text);outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(101,185,255,.12)}select option{background:#17243a}.modal{position:fixed;inset:0;background:rgba(2,7,15,.72);backdrop-filter:blur(8px);display:none;place-items:center;padding:18px;z-index:10}.modal.open{display:grid}.modal-card{width:min(620px,100%);max-height:90vh;overflow:auto;border-radius:22px;padding:22px}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.modal-head h3{font:800 18px Manrope;margin:0}.toast{position:fixed;bottom:22px;right:22px;background:#e9f5ff;color:#102033;padding:12px 16px;border-radius:12px;box-shadow:var(--shadow);display:none;z-index:20}.toolbar{display:flex;gap:8px;flex-wrap:wrap}.small-note{font-size:11px;color:var(--muted);line-height:1.6}.progress{height:6px;background:rgba(255,255,255,.09);border-radius:10px;overflow:hidden;margin-top:8px}.progress span{display:block;height:100%;background:linear-gradient(90deg,#65b9ff,#8b9cff)}.mobile-menu{display:none}
@media(max-width:1100px){.app{grid-template-columns:205px 1fr}.kpis{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}}
@media(max-width:760px){.app{display:block;padding:10px}.sidebar{position:fixed;z-index:15;left:10px;top:10px;bottom:10px;height:auto;width:250px;transform:translateX(-120%);transition:.25s}.sidebar.open{transform:translateX(0)}.mobile-menu{display:inline-flex}.topbar{padding:11px;gap:8px}.welcome h1{font-size:15px}.welcome p{display:none}.search{width:38vw}.top-actions .hide-mobile{display:none}.content-head h2{font-size:20px}.kpis{gap:9px}.glass{padding:13px}.kpi-value{font-size:21px}.pipeline{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Mejoras de diseño responsivo */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}
.table-wrap table{min-width:640px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.modal{padding:16px}
.modal-card{width:min(720px,92vw);max-height:90vh;overflow:auto}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.field{min-width:0}
.field input,.field select,.field textarea{width:100%}
.content-head{flex-wrap:wrap}
.topbar{flex-wrap:wrap}
.top-actions{flex-wrap:wrap}
@media (max-width:1024px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-grid{grid-template-columns:1fr}
  .pipeline{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .app{padding:8px;gap:8px}
  .topbar{border-radius:14px}
  .search{width:100%}
  .top-actions{width:100%;justify-content:space-between}
  .content-head h2{font-size:18px}
  .kpis{grid-template-columns:1fr}
  .pipeline{grid-template-columns:1fr}
  .glass{border-radius:14px;padding:12px}
  .modal-card{width:96vw}
  .btn{padding:9px 11px;font-size:13px}
}
@media (max-width:480px){
  .welcome h1{font-size:14px}
  .nav button{padding:9px 10px}
}