/* ==========================================================================
   MISAGI — Estilos del portal (sidebar, topbar, tarjetas)
   Generado al modularizar index.html (separación de responsabilidades).
   ========================================================================== */
/* ===================== PORTAL ===================== */
  .app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100dvh}
  .scrim-side{display:none}
  .side{position:sticky;top:0;height:100dvh;overflow:hidden;display:flex;flex-direction:column;color:#fff;background:linear-gradient(185deg,#0b1a2c 0%,#0a1626 60%,#081120 100%);border-right:1px solid rgba(255,255,255,.06)}
  .side-head{display:flex;align-items:center;gap:12px;padding:20px 20px 16px}
  .side-head .mark{width:38px;height:38px;border-radius:11px;background:#fff;display:grid;place-items:center;padding:6px;box-shadow:0 6px 16px rgba(0,0,0,.35)}
  .side-head .mark img{width:100%;height:100%;object-fit:contain}
  .side-head .wm{font-family:'Space Grotesk';font-weight:700;font-size:18px;letter-spacing:2px;line-height:1}
  .side-head .wm small{display:block;font-size:9.5px;letter-spacing:3px;opacity:.6;font-weight:500;margin-top:3px}
  .side-scroll{flex:1;overflow-y:auto;padding:6px 12px 14px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
  .side-scroll::-webkit-scrollbar{width:8px}
  .side-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:8px}
  .nav-group{margin-top:6px}
  .nav-group>.gl{display:flex;align-items:center;gap:9px;width:100%;border:none;background:none;cursor:pointer;color:rgba(255,255,255,.66);font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;padding:9px 12px;border-radius:9px;font-family:inherit}
  .nav-group>.gl:hover{background:rgba(255,255,255,.05);color:#fff}
  .nav-group>.gl .gico{width:15px;height:15px;opacity:.7;flex-shrink:0}
  .nav-group>.gl .glname{flex:1;text-align:left}
  .nav-group>.gl .gcount{font-size:9.5px;letter-spacing:0;background:rgba(255,255,255,.12);border-radius:10px;padding:1px 7px;flex-shrink:0}
  .nav-group>.gl .gchev{width:14px;height:14px;opacity:.55;transition:transform .2s;flex-shrink:0}
  .nav-group.open>.gl{color:#fff}
  .nav-group.open>.gl .gchev{transform:rotate(90deg)}
  .nav-group>.nav-sub{display:none;margin:2px 0 4px;padding-left:4px}
  .nav-group.open>.nav-sub{display:block}
  .nav-link{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:11px;border:none;background:none;cursor:pointer;color:rgba(255,255,255,.74);font-size:14px;font-weight:500;text-align:left;transition:background var(--ease),color var(--ease);text-decoration:none}
  .nav-link .ico{width:19px;height:19px;color:rgba(255,255,255,.55);transition:color var(--ease)}
  .nav-link:hover{background:rgba(255,255,255,.06);color:#fff}
  .nav-link:hover .ico{color:rgba(255,255,255,.85)}
  .nav-link.active{background:linear-gradient(90deg,rgba(31,158,87,.22),rgba(31,158,87,.08));color:#fff;box-shadow:inset 2px 0 0 var(--brand)}
  .nav-link.active .ico{color:#5fd896}
  .nav-link.disabled{opacity:.4;cursor:default}
  .side-foot{padding:12px;border-top:1px solid rgba(255,255,255,.07)}
  .side-links{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
  .side-links a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:9px;color:rgba(255,255,255,.6);font-size:12.5px;text-decoration:none;transition:background var(--ease),color var(--ease)}
  .side-links a:hover{background:rgba(255,255,255,.06);color:#fff}
  .side-links a .ico{width:15px;height:15px;opacity:.7}
  .userbox{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.05)}
  .userbox .av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--navy));display:grid;place-items:center;font-family:'Space Grotesk';font-weight:700;font-size:13px;flex-shrink:0;color:#fff}
  .userbox .meta{min-width:0;flex:1}
  .userbox .meta b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .userbox .meta span{display:block;font-size:11px;color:rgba(255,255,255,.5)}
  .userbox .out{background:none;border:none;color:rgba(255,255,255,.5);cursor:pointer;width:30px;height:30px;display:grid;place-items:center;border-radius:8px;transition:var(--ease)}
  .userbox .out:hover{background:rgba(255,255,255,.1);color:#fff}
  .userbox .out .ico{width:17px;height:17px}
  .main{min-width:0;display:flex;flex-direction:column}
  .topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;height:66px;padding:0 30px;background:rgba(255,255,255,.82);border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
  .crumb{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted)}
  .crumb b{color:var(--text);font-weight:600}
  .topbar .grow{flex:1}
  .search{position:relative;width:min(320px,34vw)}
  .search .ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--faint)}
  .search input{width:100%;height:40px;border:1px solid var(--border-2);border-radius:999px;padding:0 16px 0 38px;font-family:inherit;font-size:13.5px;background:#fff;transition:var(--ease)}
  .search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
  .icon-btn{width:40px;height:40px;border-radius:11px;border:1px solid var(--border-2);background:#fff;cursor:pointer;display:grid;place-items:center;color:var(--muted);transition:var(--ease)}
  .icon-btn:hover{border-color:var(--brand);color:var(--brand-d);background:var(--brand-soft)}
  .content{padding:30px 34px 56px;max-width:1320px;width:100%}
  .hero-greet{position:relative;overflow:hidden;border-radius:22px;padding:30px 220px 30px 32px;margin-bottom:30px;color:#fff;background:linear-gradient(120deg,#0c2138 0%,#0a1626 55%,#0b2e1d 130%);box-shadow:var(--shadow-lg)}
  .hero-greet::after{content:'';position:absolute;right:-60px;top:-60px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(31,158,87,.34),transparent 68%);pointer-events:none}
  .hero-greet .eyb{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#7fe0a6;font-weight:600;margin-bottom:10px}
  .hero-greet h1{font-size:32px;line-height:1.08;margin-bottom:8px}
  .hero-greet p{color:rgba(255,255,255,.72);font-size:14.5px;max-width:52ch}
  .hero-greet .when{position:absolute;right:32px;top:30px;text-align:right;font-size:12.5px;color:rgba(255,255,255,.6)}
  .hero-greet .when b{display:block;font-family:'Space Grotesk';font-size:18px;color:#fff;font-weight:600}
  @media(max-width:680px){.hero-greet{padding:26px 24px}.hero-greet .when{display:none}}
  .group-block{margin-bottom:34px}
  .group-block .gh{display:flex;align-items:center;gap:11px;margin-bottom:15px}
  .group-block .gh .gi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--ink);color:#fff}
  .group-block .gh .gi .ico{width:18px;height:18px}
  .group-block .gh h2{font-size:16px;color:var(--ink2)}
  .group-block .gh .count{font-size:11.5px;color:var(--faint);background:#fff;border:1px solid var(--border);border-radius:999px;padding:3px 10px}
  .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:16px}
  .app-card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:20px;box-shadow:var(--shadow-sm);cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:10px;min-height:142px;transition:var(--ease);color:inherit;text-decoration:none}
  a.app-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(31,158,87,.4)}
  .app-card.disabled{opacity:.6;cursor:default}
  .app-card .ai{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-d)}
  .app-card .ai .ico{width:21px;height:21px}
  .app-card .an{font-weight:700;font-size:15.5px;color:var(--text)}
  .app-card .ad{font-size:13px;color:var(--muted);flex:1;line-height:1.5}
  .app-card .go{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--brand-d);transition:gap var(--ease)}
  .app-card:hover .go{gap:10px}
  .app-card .go .ico{width:15px;height:15px}
  .app-card .soon{align-self:flex-start;padding:3px 11px;border-radius:999px;font-size:11.5px;font-weight:700;background:#eef1ee;color:var(--muted)}
  .empty-msg{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:22px;color:var(--muted)}
  .menu-btn{display:none}
  @media(max-width:860px){
    .app{grid-template-columns:1fr}
    .side{position:fixed;left:0;top:0;z-index:60;width:280px;transform:translateX(-102%);transition:transform var(--ease)}
    .app.open .side{transform:none}
    .scrim-side{position:fixed;inset:0;background:rgba(8,16,28,.5);z-index:55;opacity:0;pointer-events:none;transition:opacity var(--ease);display:block}
    .app.open .scrim-side{opacity:1;pointer-events:auto}
    .menu-btn{display:grid}
    .search{width:auto;flex:1}
  }