:root{
      --bg:#F4F5F7; --panel:#fff; --border:#E9E9EE;
      --text:#2B2B2B; --muted:#7C7C7C;
      --orange:#F28C00; --orange-2:#FFB25A;
      --p1:#778788; --p2:#77879A; --p3:#80AAAA; --p4:#D4D9C7;
      --p5:#C9CEC7; --p6:#CA8867; --p7:#F59870; --p8:#656F58;
      --p9:#F1E4DA; --p10:#CDA324; --p11:#E4CEB4; --p12:#C19EA4;
      --shadow:0 10px 25px rgba(15,20,35,.08);
      --shadow-soft:0 8px 18px rgba(15,20,35,.06);
      --radius:14px;

      /* Variables para Sidebar */
      --color-brand: #1b4e6b;
      --color-brand-light: #256080;
      --color-banner: #3a69a3;
      --color-accent: #ee9d2e;
      --color-accent-light: #f7b84b;
      --color-success: #388e3c;
      --color-text: #161719;
      --color-text-muted: #52555a;
      --color-text-light: #666666;
      --color-text-white: #ffffff;
      --color-white: #ffffff;
      --color-card-surface: #eaf1fb;
      --color-sidebar-bg: #f8f9fb;
      --color-body-bg: #f0f2f7;
      --color-border: #e4e4e7;
      --radius-xs: 4px;
      --radius-sm: 6px;
      --radius-md: 12px;
      --radius-lg: 15px;
      --radius-full: 9999px;
      --transition: 0.25s ease;
      --font-base: 'Poppins', 'Lato', 'Inter', ui-sans-serif, system-ui, sans-serif;
    }
    *{box-sizing:border-box}
    body{margin:0;font-family:Poppins,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--text);background:var(--bg);}
    .app{display:grid;grid-template-columns:260px 1fr;min-height:100vh;transition:grid-template-columns .3s ease;}
    .app.sidebar-collapsed{grid-template-columns:0px 1fr;}

    /* SIDEBAR */
    .sidebar{background:#fff;border-right:1px solid var(--border);padding:0;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;transition:transform .3s ease, width .3s ease, padding .3s ease;width:260px;}
    .app.sidebar-collapsed .sidebar{transform:translateX(-260px);padding:0;width:0;border-right:none;}
    .brand{display:flex;align-items:center;gap:10px;padding:6px 8px 14px;border-bottom:1px solid var(--border);margin-bottom:12px;}
    .brand img{height:40px;width:auto;}
    .nav{display:flex;flex-direction:column;gap:2px;padding:12px;flex:1;overflow-y:auto;}
    .nav .item{display:flex;align-items:center;justify-content:space-between;padding:10px 10px;border-radius:10px;color:#1f2430;font-weight:500;font-size:13px;cursor:pointer;transition:.15s;white-space:nowrap;}
    .nav .item:hover{background:#f6f7fb;}
    .nav .item.active{background:#fff7ec;border-left:4px solid var(--orange);padding-left:6px;}
    .nav .label{display:flex;gap:10px;align-items:center;}
    .dot{width:8px;height:8px;border-radius:99px;background:#cfd3da;}
    .item.active .dot{background:var(--orange);}
    .nav-section{font-size:10px;font-weight:700;color:#b0b4be;text-transform:uppercase;letter-spacing:.8px;padding:14px 10px 6px;white-space:nowrap;}
    /* Sidebar toggle button */
    .sidebar-toggle{width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.05);transition:.15s;flex:0 0 auto;}
    .sidebar-toggle:hover{border-color:rgba(242,140,0,.4);background:#fffbf5;}

    /* TOPBAR */
    .main{display:flex;flex-direction:column;min-width:0;}
    .topbar{height:56px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 18px;position:sticky;top:0;z-index:20;}
    .top-left{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;}
    .role-context{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:99px;font-size:11px;font-weight:700;border:1px solid transparent;}
    .top-links{display:flex;gap:22px;font-weight:500;color:#6b6f7a;}
    .top-links a{color:inherit;text-decoration:none;}
    .top-links a:hover{color:#2b2b2b;}
    .top-right{display:flex;align-items:center;gap:12px;}
    .icon-btn{width:34px;height:34px;border:1px solid var(--border);background:#fff;border-radius:10px;display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.03);cursor:pointer;position:relative;}
    .avatar{width:34px;height:34px;border-radius:99px;border:2px solid #fff;box-shadow:0 6px 18px rgba(0,0,0,.12);background:linear-gradient(135deg,var(--p3),var(--orange-2));cursor:pointer;position:relative;display:grid;place-items:center;font-weight:700;font-size:12px;color:#fff;}

    /* USER MENU */
    .user-menu{position:absolute;right:0;top:44px;width:300px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:10px;display:none;z-index:50;}
    .user-menu.open{display:block;}
    .user-menu .title{font-size:12px;color:var(--muted);margin:4px 6px 10px;}
    .user-opt{padding:10px;border-radius:12px;border:1px solid transparent;display:flex;align-items:center;gap:12px;cursor:pointer;}
    .user-opt:hover{background:#f6f7fb;border-color:#eef0f6;}
    .user-opt .uav{width:36px;height:36px;border-radius:99px;display:grid;place-items:center;font-weight:700;font-size:12px;color:#fff;flex:0 0 auto;}
    .user-opt .uinfo strong{font-size:13px;display:block;}
    .user-opt .uinfo span{font-size:11px;color:var(--muted);}
    .user-opt .role-badge{font-size:10px;padding:3px 8px;border-radius:99px;font-weight:700;margin-top:3px;display:inline-block;}

    /* CONTENT */
    .content{padding:18px;min-width:0;}
    .page-title{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:10px;}
    .page-title h1{margin:0;font-size:22px;letter-spacing:.2px;}
    .page-subtitle{font-size:12px;color:var(--muted);margin-top:2px;}

    /* TABS */
    .tabs{display:flex;gap:4px;align-items:center;border-bottom:1px solid var(--border);background:#fff;padding:10px 6px 0;border-radius:12px 12px 0 0;margin-bottom:0;}
    .tab{padding:12px 14px;color:#808595;font-size:12px;cursor:pointer;position:relative;user-select:none;border-radius:8px 8px 0 0;transition:.14s;}
    .tab:hover{color:#2b2b2b;background:#f8f9fc;}
    .tab.active{color:var(--orange);font-weight:600;background:#fff;}
    .tab.active:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--orange);border-radius:999px;}

    /* CARDS */
    .card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-soft);transform:translateY(8px);opacity:0;animation:cardIn .55s ease forwards;}
    .card.delay-1{animation-delay:.05s;}.card.delay-2{animation-delay:.10s;}.card.delay-3{animation-delay:.15s;}.card.delay-4{animation-delay:.20s;}
    @keyframes cardIn{to{transform:translateY(0);opacity:1;}}
    .card .hd{padding:14px 14px 8px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
    .card .hd h3{margin:0;font-size:13px;font-weight:700;}
    .card .bd{padding:0 14px 14px;}
    .card-flat{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-soft);overflow:hidden;}

    /* GRIDS */
    .grid{display:grid;grid-template-columns:1.35fr .95fr;gap:14px;align-items:start;}
    .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
    .grid-3{display:grid;grid-template-columns:1.05fr .95fr 1.2fr;gap:14px;}
    .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}

    /* KPI BLOCKS */
    .kpi{border:1px solid var(--border);border-radius:14px;padding:14px;background:#fff;box-shadow:0 6px 14px rgba(15,20,35,.04);display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px;}
    .kpi .t{font-size:12px;font-weight:700;}
    .kpi .v{font-size:20px;font-weight:700;color:#6b6f7a;}
    .kpi small{color:var(--muted);font-weight:500;}

    /* MINI KPI CARDS (row de 4) */
    .kpi-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px 16px;box-shadow:0 4px 12px rgba(15,20,35,.05);cursor:pointer;transition:.18s;}
    .kpi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
    .kpi-card .icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:18px;margin-bottom:8px;}
    .kpi-card .val{font-size:24px;font-weight:800;letter-spacing:-.5px;line-height:1;}
    .kpi-card .lbl{font-size:11px;color:var(--muted);font-weight:500;margin-top:4px;}
    .kpi-card .delta{font-size:10px;font-weight:700;margin-top:6px;display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:99px;}
    .delta-up{background:rgba(128,170,170,.15);color:#2a6464;}
    .delta-down{background:rgba(201,158,164,.15);color:#6a3d46;}

    /* PROGRESS BARS (skill gap) */
    .skill-row{padding:12px 0;border-bottom:1px solid #f1f2f7;}
    .skill-row:last-child{border-bottom:0;}
    .skill-top{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600;}
    .bar{height:10px;background:#eef0f6;border-radius:999px;overflow:hidden;margin-top:8px;position:relative;}
    .bar>i{display:block;height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--orange),var(--orange-2));box-shadow:0 10px 20px rgba(242,140,0,.22);animation:fillBar .9s ease forwards;}
    @keyframes fillBar{from{width:0%;}to{width:var(--w);}}
    .needle{position:absolute;top:-6px;width:2px;height:22px;background:#2b2b2b;opacity:.35;left:var(--n);}

    /* TABLES */
    table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;}
    th,td{text-align:left;padding:12px 10px;border-bottom:1px solid #f1f2f7;vertical-align:middle;}
    th{color:#6f7482;font-weight:600;background:#fbfbfe;}
    tr:last-child td{border-bottom:0;}
    .meta{color:var(--muted);font-size:11px;margin:2px 0 10px;}
    .row-anim{opacity:0;transform:translateY(6px);animation:rowIn .45s ease forwards;}
    @keyframes rowIn{to{opacity:1;transform:translateY(0);}}
    tr.clickable{cursor:pointer;}
    tr.clickable:hover td{background:#fafbff;}

    /* PILLS */
    .pill{display:inline-flex;align-items:center;justify-content:center;padding:5px 10px;border-radius:999px;font-size:11px;border:1px solid transparent;font-weight:600;}
    .pill.ok{background:rgba(128,170,170,.18);color:#2a6464;border-color:rgba(128,170,170,.35);}
    .pill.find{background:rgba(255,178,90,.26);color:#7a4a00;border-color:rgba(255,178,90,.40);}
    .pill.proc{background:rgba(212,217,199,.40);color:#4f5d3b;border-color:rgba(212,217,199,.65);}
    .pill.inact{background:rgba(193,158,164,.20);color:#6a3d46;border-color:rgba(193,158,164,.40);}
    .pill.warn{background:rgba(205,163,36,.20);color:#7a5800;border-color:rgba(205,163,36,.40);}
    .pill.info{background:rgba(119,135,154,.20);color:#2c3e50;border-color:rgba(119,135,154,.35);}

    /* BADGES MICRO */
    .badge-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:700;border:1px solid transparent;}
    .badge-chip.industrial{background:#E8F4FD;color:#0277BD;border-color:#B3D9F5;}
    .badge-chip.cloud{background:#FFF3E0;color:#E65100;border-color:#FFCC80;}
    .badge-chip.data{background:#E8F5E9;color:#1B5E20;border-color:#B8DFB8;}
    .badge-chip.software{background:#F3E8FF;color:#6A1B9A;border-color:#D7B8F0;}
    .badge-chip.mgmt{background:#FCE4EC;color:#880E4F;border-color:#F8BBD0;}
    .badge-chip.design{background:#E8F0FE;color:#1A237E;border-color:#C5CAE9;}

    /* BADGES GRID (catálogo) */
    .badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;}
    .badge-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px;transition:.18s;cursor:pointer;position:relative;}
    .badge-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:rgba(242,140,0,.3);}
    .badge-card img{width:60px;height:60px;object-fit:contain;display:block;margin:0 auto 8px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.12));}
    .badge-card .bname{font-size:12px;font-weight:700;text-align:center;color:#1F1F1F;line-height:1.3;margin-bottom:4px;}
    .badge-card .bissuer{font-size:10px;color:var(--muted);text-align:center;margin-bottom:8px;}
    .badge-card .bstats{display:flex;justify-content:center;gap:10px;font-size:10px;color:var(--muted);}
    .badge-verified{position:absolute;top:8px;right:8px;width:18px;height:18px;border-radius:50%;background:#1DB954;display:grid;place-items:center;font-size:9px;color:#fff;}

    /* TOOLBAR / SEARCH */
    .toolbar{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-left:auto;}
    .search{display:flex;align-items:center;gap:8px;border:1px solid var(--border);background:#fff;border-radius:12px;padding:8px 10px;width:240px;}
    .search input{border:0;outline:0;width:100%;font-family:inherit;font-size:12px;}
    .funnel{width:34px;height:34px;border-radius:10px;background:var(--orange);color:#fff;display:grid;place-items:center;border:0;cursor:pointer;box-shadow:0 10px 18px rgba(242,140,0,.18);}
    .btn{height:34px;border-radius:12px;border:1px solid var(--border);background:#fff;padding:0 12px;font-family:inherit;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.15s;}
    .btn:hover{border-color:rgba(242,140,0,.4);background:#fffbf5;}
    .btn.primary{border-color:rgba(242,140,0,.25);background:#fff7ec;}
    .btn.orange{background:var(--orange);color:#fff;border-color:var(--orange);font-weight:700;box-shadow:0 8px 18px rgba(242,140,0,.2);}
    .btn.orange:hover{filter:brightness(1.05);}

    /* FORM */
    .form-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:14px;align-items:start;}
    .field{margin:10px 0 12px;}
    .field label{display:block;font-size:12px;color:#6f7482;margin-bottom:6px;font-weight:600;}
    .inp,.ta{width:100%;border:1px solid var(--border);border-radius:12px;padding:10px 12px;font-family:inherit;font-size:12px;outline:none;background:#fff;}
    .ta{min-height:92px;resize:vertical;}
    .upload{border:1px dashed #d7d9e3;border-radius:12px;padding:12px;text-align:center;color:#6f7482;font-size:12px;background:#fff;}
    .chips{display:flex;gap:10px;padding:10px 12px 14px;flex-wrap:wrap;}
    .chip{background:rgba(128,170,170,.20);border:1px solid rgba(128,170,170,.35);color:#2a6464;font-size:11px;padding:7px 12px;border-radius:999px;}

    /* DONUT LABELS */
    .donut-box{position:relative;min-height:240px;}
    .donut-labels{position:absolute;inset:0;pointer-events:none;}
    .donut-tag{position:absolute;max-width:180px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:8px 10px;box-shadow:0 14px 22px rgba(15,20,35,.10);font-size:11px;line-height:1.25;color:#4b4f5c;transform:translateY(6px);opacity:0;animation:tagIn .55s ease forwards;}
    @keyframes tagIn{to{opacity:1;transform:translateY(0);}}
    .donut-tag b{display:block;font-size:12px;color:#2b2b2b;margin-bottom:2px;}
    .donut-tag .sub{color:var(--muted);font-size:10.5px;}
    .donut-tag .dotc{display:inline-block;width:10px;height:10px;border-radius:99px;margin-right:6px;vertical-align:-1px;border:1px solid rgba(0,0,0,.08);}
    .donut-tag.active{border-color:rgba(242,140,0,.35);box-shadow:0 18px 26px rgba(242,140,0,.14);transform:translateY(-2px);}

    /* MAP */
    .map{height:220px;border-radius:14px;border:1px solid var(--border);background:linear-gradient(180deg,#fff,#fbfbff);position:relative;overflow:hidden;}
    #mxMap{width:100%;height:100%;}

    /* CHARTS */
    canvas{width:100% !important;height:260px !important;}
    .small canvas{height:220px !important;}
    #chartColocacion{filter:drop-shadow(0 18px 24px rgba(15,20,35,.12));}

    /* PAGER */
    .pager{display:flex;justify-content:flex-end;gap:10px;padding-top:10px;align-items:center;color:#6f7482;font-size:12px;}
    .page{width:24px;height:24px;display:grid;place-items:center;border-radius:6px;border:1px solid transparent;cursor:pointer;}
    .page.active{background:rgba(0,140,255,.10);border-color:rgba(0,140,255,.18);color:#0b57d0;font-weight:700;}

    /* STUDENT PROFILE */
    .student-hero{background:linear-gradient(120deg,#1A1A2E,#0F3460);border-radius:14px;padding:24px;color:#fff;display:flex;gap:20px;align-items:flex-start;position:relative;overflow:hidden;margin-bottom:14px;}
    .student-hero::after{content:"";position:absolute;top:-40px;right:-40px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(242,140,0,.18),transparent 70%);}
    .student-photo{width:80px;height:80px;border-radius:14px;object-fit:cover;border:3px solid rgba(255,255,255,.25);flex:0 0 auto;box-shadow:0 8px 20px rgba(0,0,0,.3);}
    .student-info{flex:1;position:relative;z-index:1;}
    .student-name{font-size:20px;font-weight:900;letter-spacing:-.3px;}
    .student-role{font-size:12px;opacity:.7;margin-top:3px;}
    .student-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
    .schip{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:4px 12px;font-size:11px;}
    .student-completeness{margin-left:auto;position:relative;z-index:1;text-align:center;}

    /* PROGRESS RING */
    .ring-svg{width:60px;height:60px;}
    .ring-label{font-size:9px;opacity:.6;font-weight:600;margin-top:2px;}

    /* MICRO TRAYECTORIA */
    .tray-step{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid #f1f2f7;}
    .tray-step:last-child{border-bottom:0;}
    .tray-icon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:15px;flex:0 0 auto;border:1px solid var(--border);}
    .tray-icon.done{background:#E8F5E9;border-color:#B8DFB8;}
    .tray-icon.active{background:#FFF4E6;border-color:#FFD7AA;}
    .tray-icon.locked{background:#F3F4F6;border-color:#E8EAED;opacity:.5;}
    .tray-body{flex:1;}
    .tray-name{font-size:12px;font-weight:700;color:#1F1F1F;}
    .tray-meta{font-size:11px;color:var(--muted);margin-top:2px;}

    /* RADAR */
    canvas.radar-c{height:280px !important;}

    /* ALERT BOX */
    .alert{border-radius:12px;padding:12px 14px;font-size:12px;display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;}
    .alert-warn{background:#FFF8E1;border:1px solid #FFD54F;color:#7a5800;}
    .alert-info{background:#E8F4FD;border:1px solid #90CAF9;color:#0D47A1;}
    .alert-ok{background:#E8F5E9;border:1px solid #A5D6A7;color:#1B5E20;}

    /* TREND ARROWS */
    .up{color:#2a6464;font-weight:700;}
    .down{color:#6a3d46;font-weight:700;}

    /* MISC */
    .hidden{display:none !important;}
    .right-actions{display:flex;align-items:center;gap:10px;}
    .muted{color:var(--muted);}
    .divider{height:1px;background:var(--border);margin:12px 0;}
    .section-label{font-size:10px;font-weight:700;color:#b0b4be;text-transform:uppercase;letter-spacing:.7px;margin-bottom:8px;}
    .inline-flex{display:flex;align-items:center;gap:8px;}

    /* OVERLAY DETAIL */
    .overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;align-items:center;justify-content:center;backdrop-filter:blur(3px);}
    .overlay.open{display:flex;}
    .overlay-box{background:#fff;border-radius:20px;width:min(560px,94vw);box-shadow:0 24px 60px rgba(0,0,0,.2);overflow:hidden;animation:cardIn .22s ease both;}
    .overlay-hd{background:linear-gradient(135deg,#1A1A2E,#0F3460);padding:24px;color:#fff;position:relative;}
    .overlay-close{position:absolute;top:12px;right:14px;background:rgba(255,255,255,.15);border:0;color:#fff;border-radius:10px;width:28px;height:28px;cursor:pointer;display:grid;place-items:center;font-size:15px;}
    .overlay-body{padding:20px 22px;display:grid;gap:12px;}
    .overlay-footer{border-top:1px solid var(--border);padding:14px 22px;display:flex;justify-content:space-between;align-items:center;}

    /* TOAST */
    .toast-wrap{position:fixed;bottom:18px;right:18px;display:grid;gap:8px;z-index:999;pointer-events:none;}
    .toast{background:#111;color:#fff;padding:10px 14px;border-radius:12px;font-size:12px;box-shadow:var(--shadow);opacity:0;transform:translateY(8px);animation:toastIn .18s ease forwards,toastOut .22s ease forwards 2.4s;}
    @keyframes toastIn{to{opacity:1;transform:translateY(0);}}
    @keyframes toastOut{to{opacity:0;transform:translateY(6px);}}
    @keyframes spin{to{transform:rotate(360deg);}}

    @media(max-width:1120px){.app{grid-template-columns:240px 1fr;}.grid,.grid-3,.form-grid{grid-template-columns:1fr;}canvas{height:240px !important;}.grid-4{grid-template-columns:1fr 1fr;}}
    @media(max-width:860px){.sidebar{display:none;}.app{grid-template-columns:1fr;}.top-links{display:none;}.grid-4{grid-template-columns:1fr 1fr;}}

    /* ===== APPS LAUNCHER ===== */
    .apps-btn{
      width:34px;height:34px;
      border-radius:10px;
      border:1px solid var(--border,#E9E9EE);
      background:#fff;
      display:grid;place-items:center;
      cursor:pointer;
      position:relative;
      box-shadow:0 2px 8px rgba(0,0,0,.04);
      transition:.15s;
      user-select:none;
    }
    .apps-btn:hover{border-color:rgba(242,140,0,.45);box-shadow:0 4px 14px rgba(242,140,0,.14);}
    .apps-menu{
      position:absolute;
      top:42px;right:0;
      width:240px;
      background:#fff;
      border:1px solid var(--border,#E9E9EE);
      border-radius:16px;
      box-shadow:0 16px 40px rgba(15,20,35,.13);
      padding:8px;
      display:none;
      z-index:999;
      animation:appsMenuIn .18s ease both;
    }
    @keyframes appsMenuIn{from{opacity:0;transform:translateY(-6px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}}
    .apps-menu.open{display:block;}
    .apps-menu-title{font-size:10px;font-weight:700;color:#b0b4be;text-transform:uppercase;letter-spacing:.7px;padding:6px 10px 8px;}
    .apps-menu-item{
      display:flex;align-items:center;gap:11px;
      padding:9px 10px;
      border-radius:10px;
      cursor:pointer;
      transition:.13s;
      text-decoration:none;
      color:inherit;
      border:1px solid transparent;
    }
    .apps-menu-item:hover{background:#fff7ec;border-color:rgba(242,140,0,.2);}
    .apps-menu-item.current{background:rgba(242,140,0,.08);border-color:rgba(242,140,0,.25);}
    .apps-menu-item .aico{
      width:32px;height:32px;border-radius:9px;
      display:grid;place-items:center;font-size:16px;flex:0 0 auto;
    }
    .apps-menu-item .atext b{display:block;font-size:12px;font-weight:700;color:#1f2430;}
    .apps-menu-item .atext span{display:block;font-size:10px;color:#8a8d9a;margin-top:1px;}
    .apps-divider{height:1px;background:#f0f0f6;margin:4px 0;}

    /* Sidebar - Header and user wrap from styles.css */
    .sidebar__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      border-bottom: 1px solid var(--color-border);
      flex-shrink: 0;
    }
    .sidebar__logo {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .logo-icon {
      width: 32px;
      height: 32px;
      border-radius: var(--radius-full);
      background-color: var(--color-brand);
      color: var(--color-white);
      font-size: 12px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .logo-text {
      font-size: 18px;
      font-weight: 800;
      color: var(--color-brand);
      line-height: 1;
      letter-spacing: -0.02em;
    }
    .logo-accent {
      color: var(--color-accent);
    }
    .sidebar__close {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--color-text-muted);
      display: flex;
      align-items: center;
      padding: 4px;
      border-radius: var(--radius-sm);
      transition: color var(--transition);
    }
    .sidebar__close:hover {
      color: var(--color-text);
    }
    .sidebar__user-wrap {
      position: relative;
      flex-shrink: 0;
      border-top: 1px solid var(--color-border);
      margin-top: auto; /* Empuja el perfil de usuario al fondo */
    }
    .sidebar__user {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      width: 100%;
      background: none;
      border: none;
      cursor: pointer;
      text-align: left;
      transition: background-color var(--transition);
    }
    .sidebar__user:hover {
      background-color: #f0f6ff;
    }
    .user-avatar {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-full);
      object-fit: cover;
      flex-shrink: 0;
    }
    .user-info {
      flex: 1;
      min-width: 0;
      text-align: left;
    }
    .user-name {
      font-size: 12px;
      font-weight: 600;
      color: var(--color-text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .user-email {
      font-size: 11px;
      color: var(--color-text-light);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .user-chevron {
      flex-shrink: 0;
      color: var(--color-text-light);
      transition: transform var(--transition), color var(--transition);
    }
    .sidebar__user-wrap.is-open .user-chevron {
      transform: rotate(180deg);
      color: var(--color-accent);
    }
    .user-dropdown {
      position: absolute;
      bottom: calc(100% + 6px);
      left: 12px;
      right: 12px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      box-shadow: 0 4px 6px -4px rgba(0, 0, 0, .10), 0 10px 15px -3px rgba(0, 0, 0, .10);
      padding: 4px;
      z-index: 50;
      opacity: 0;
      pointer-events: none;
      transform: translateY(6px);
      transition: opacity var(--transition), transform var(--transition);
    }
    .sidebar__user-wrap.is-open .user-dropdown {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }
    .user-dropdown__item {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 8px 16px;
      height: 36px;
      background: none;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      font-family: var(--font-base);
      color: #0f172a;
      cursor: pointer;
      text-align: left;
      transition: background-color var(--transition), color var(--transition);
    }
    .user-dropdown__item:hover {
      background-color: #f0f6ff;
      color: var(--color-brand);
    }
    .user-dropdown__item svg {
      flex-shrink: 0;
      color: currentColor;
    }
    .user-dropdown__item--danger {
      color: #dc2626;
    }
    .user-dropdown__item--danger:hover {
      background-color: #fef2f2;
      color: #b91c1c;
    }
    .user-dropdown__divider {
      height: 1px;
      background-color: #e2e8f0;
      margin: 4px 16px;
    }

    /* Enlaces globales del sidebar */
    .sidebar__nav {
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      flex-shrink: 0;
    }
    .nav-link {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border-radius: var(--radius-md);
      font-size: 14px;
      font-weight: 500;
      color: var(--color-text-muted);
      transition: background-color var(--transition), color var(--transition);
    }
    .nav-link:hover {
      background-color: transparent;
      color: var(--color-accent);
    }
    .nav-link.active {
      background-color: transparent;
      color: var(--color-accent);
      font-weight: 600;
    }
    .nav-link.active .nav-icon,
    .nav-link:hover .nav-icon {
      color: var(--color-accent);
    }
    .nav-icon {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      color: var(--color-text-light);
      transition: color var(--transition);
    }

/* Home dashboard */
.home-dashboard {
  width: 100%;
  padding: 28px clamp(18px, 3vw, 34px);
}

.home-dashboard__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #d8dee8;
  margin-bottom: 18px;
}

.home-dashboard__title {
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.1;
  font-weight: 800;
  color: #182230;
  margin: 0;
}

.home-dashboard__subtitle {
  color: #667085;
  font-size: 13px;
  font-weight: 500;
  margin-top: 6px;
}

.home-dashboard__grid-4,
.home-dashboard__grid-2 {
  display: grid;
  gap: 14px;
}

.home-dashboard__grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 14px;
}

.home-dashboard__grid-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.home-kpi,
.home-card {
  background: #fff;
  border: 1px solid #dfe4ee;
  box-shadow: 0 12px 28px rgba(16, 24, 40, .05);
}

.home-kpi {
  min-height: 120px;
  border-radius: 14px;
  padding: 16px 18px;
}

.home-kpi__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 19px;
  margin-bottom: 8px;
}

.home-kpi__icon--micro,
.home-kpi__icon--vacancies {
  background: #fff4e6;
}

.home-kpi__icon--average,
.home-kpi__icon--users {
  background: #e8f5e9;
}

.home-kpi__icon--employment,
.home-kpi__icon--postulations {
  background: #e8f4fd;
}

.home-kpi__icon--company,
.home-kpi__icon--invitations {
  background: #f3e8ff;
}

.home-kpi__value {
  color: #111827;
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
}

.home-kpi__label {
  color: #4b5563;
  font-size: 12px;
  font-weight: 600;
  margin-top: 5px;
}

.home-kpi__delta {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #eaf7f6;
  color: #0f5f61;
  font-size: 10px;
  font-weight: 800;
  margin-top: 9px;
}

.home-card {
  border-radius: 14px;
  overflow: hidden;
}

.home-card__header {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 8px;
}

.home-card__title {
  color: #252b37;
  font-size: 14px;
  font-weight: 800;
  margin: 0;
}

.home-card__body {
  padding: 10px 16px 18px;
}

.home-card__button {
  border: 1px solid #ffc47a;
  background: #fff8ef;
  color: #6d3f00;
  border-radius: 10px;
  padding: 8px 13px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.home-donut {
  position: relative;
  min-height: 260px;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 210px;
  align-items: center;
  gap: 14px;
}

.home-donut__chart {
  width: 250px;
  height: 250px;
  justify-self: center;
}

.home-donut__chart canvas {
  height: 250px !important;
}

.home-donut__legend {
  display: grid;
  gap: 12px;
}

.home-donut__legend--left {
  justify-self: end;
}

.home-donut__legend--right {
  justify-self: start;
}

.home-legend-item {
  width: 152px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 11px;
  box-shadow: 0 12px 28px rgba(16, 24, 40, .06);
  background: #fff;
}

.home-legend-item__name {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #3f3f46;
  font-size: 12px;
  font-weight: 800;
}

.home-legend-item__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.home-legend-item__dot--hired {
  background: #80aaaa;
}

.home-legend-item__dot--process {
  background: #e1e5d8;
}

.home-legend-item__dot--inactive {
  background: #b9c2cc;
}

.home-legend-item__dot--student {
  background: #c19ea4;
}

.home-legend-item__dot--searching {
  background: #ffb25a;
}

.home-legend-item__dot--draft {
  background: #ffb25a;
}

.home-legend-item__dot--published {
  background: #80aaaa;
}

.home-legend-item__dot--closed {
  background: #c19ea4;
}

.home-legend-item__meta {
  color: #6b7280;
  font-size: 11px;
  line-height: 1.25;
  margin-top: 3px;
}

.home-skill-list {
  display: grid;
  gap: 20px;
}

.home-skill__top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #31343b;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 8px;
}

.home-skill__meta {
  color: #7a7f89;
  font-weight: 800;
  text-align: right;
}

.home-skill__bar {
  height: 10px;
  border-radius: 999px;
  background: #edf0f6;
  overflow: hidden;
}

.home-skill__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f28c00, #ffb25a);
}

.home-empty-state {
  border: 1px dashed #d8dee8;
  border-radius: 10px;
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
  padding: 18px;
  text-align: center;
}

@media (max-width: 1180px) {
  .home-dashboard__grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-dashboard__grid-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .home-dashboard {
    padding: 18px 14px;
  }

  .home-dashboard__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-dashboard__grid-4 {
    grid-template-columns: 1fr;
  }

  .home-donut {
    grid-template-columns: 1fr;
  }

  .home-donut__legend,
  .home-donut__legend--left,
  .home-donut__legend--right {
    justify-self: stretch;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-legend-item {
    width: auto;
  }
}

/* Keep the shared app layout intact when this dashboard stylesheet is loaded. */
body .sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--sidebar-width);
  z-index: 30;
  transform: translateX(-100%);
}

@media (min-width: 768px) {
  body .sidebar {
    transform: translateX(0);
  }
}

body .main-wrapper {
  margin-left: 0;
  min-height: auto;
  padding-bottom: 58px;
}

@media (min-width: 768px) {
  body .main-wrapper {
    margin-left: var(--sidebar-width);
  }
}

.home-dashboard {
  padding-top: 24px;
}