/* ============================================================
   Moncada — Portal del cliente / Admin · sistema visual compartido
   ============================================================ */
:root{
  --bg: oklch(0.972 0.005 80);
  --bg-2: oklch(0.955 0.011 78);
  --card: oklch(1 0 0);
  --black: oklch(0.17 0.004 60);
  --black-2: oklch(0.215 0.005 60);
  --black-3: oklch(0.255 0.006 65);
  --ink: oklch(0.24 0.005 60);
  --muted: oklch(0.50 0.008 60);
  --gold: oklch(0.76 0.105 80);
  --gold-deep: oklch(0.62 0.10 72);
  --gold-bright: oklch(0.82 0.11 84);
  --green: oklch(0.62 0.13 150);
  --blue: oklch(0.58 0.10 245);
  --red: oklch(0.60 0.15 28);
  --line: oklch(0.89 0.008 80);
  --line-soft: oklch(0.93 0.006 80);
  --line-dark: oklch(0.33 0.01 70);
  --r: 14px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Archivo',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:'Spectral',Georgia,serif;font-weight:600;color:var(--black);line-height:1.14;letter-spacing:-.01em;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
button{font-family:inherit;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;font-weight:600;font-size:14.5px;padding:12px 22px;border-radius:999px;transition:.22s;cursor:pointer;border:none;}
.btn-gold{background:var(--gold);color:var(--black);}
.btn-gold:hover{background:var(--gold-bright);transform:translateY(-2px);box-shadow:0 12px 26px -12px oklch(0.62 0.10 72 / .6);}
.btn-ghost{background:transparent;color:var(--black);border:1.5px solid var(--line);}
.btn-ghost:hover{border-color:var(--black);background:var(--bg-2);}
.btn-dark{background:var(--black);color:#fff;}
.btn-dark:hover{background:var(--black-3);}
.btn-wa{background:var(--green);color:#fff;}
.btn-wa:hover{filter:brightness(1.07);transform:translateY(-2px);}
.btn-sm{padding:9px 16px;font-size:13.5px;}
.btn-block{width:100%;}

/* ---------- APP SHELL ---------- */
.app{display:grid;grid-template-columns:264px 1fr;min-height:100vh;}
.side{background:var(--black);color:oklch(0.82 0.01 70);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:22px 16px;}
.side-brand{display:flex;align-items:center;gap:11px;padding:6px 8px 22px;}
.side-brand img{height:40px;border-radius:8px;}
.side-brand b{font-family:'Spectral',serif;font-size:16px;color:#fff;line-height:1;}
.side-brand span{display:block;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-top:2px;}
.side-nav{display:flex;flex-direction:column;gap:3px;flex:1;overflow:auto;}
.side-nav .sn-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:oklch(0.55 0.01 70);font-weight:600;padding:14px 12px 6px;}
.side-link{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;font-size:14.5px;font-weight:500;color:oklch(0.82 0.01 70);cursor:pointer;transition:.18s;border:none;background:none;width:100%;text-align:left;}
.side-link:hover{background:var(--black-2);color:#fff;}
.side-link.active{background:var(--gold);color:var(--black);font-weight:600;}
.side-link svg{flex-shrink:0;}
.side-link .badge{margin-left:auto;background:var(--red);color:#fff;font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;}
.side-link.active .badge{background:var(--black);color:#fff;}
.side-user{display:flex;align-items:center;gap:11px;padding:12px;border-top:1px solid var(--line-dark);margin-top:8px;}
.side-user .av{width:38px;height:38px;border-radius:50%;background:var(--gold);color:var(--black);display:grid;place-items:center;font-family:'Spectral',serif;font-weight:600;font-size:15px;flex-shrink:0;}
.side-user b{font-size:13.5px;color:#fff;display:block;line-height:1.2;}
.side-user span{font-size:12px;color:oklch(0.6 0.01 70);}
.side-user a{margin-left:auto;color:oklch(0.6 0.01 70);transition:.2s;}
.side-user a:hover{color:var(--gold);}

/* ---------- MAIN ---------- */
.main{display:flex;flex-direction:column;min-width:0;}
.topbar{height:74px;background:oklch(1 0 0 / .8);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 32px;position:sticky;top:0;z-index:20;}
.topbar h1{font-size:23px;}
.topbar .tb-sub{font-size:13px;color:var(--muted);font-weight:400;font-family:'Archivo';}
.tb-right{display:flex;align-items:center;gap:12px;}
.tb-icon{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;color:var(--ink);cursor:pointer;transition:.2s;position:relative;}
.tb-icon:hover{border-color:var(--black);}
.tb-icon .dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--red);border:2px solid var(--card);}
.content{padding:32px;max-width:1180px;width:100%;}

/* sections */
.view{display:none;}
.view.active{display:block;animation:fade .35s ease;}
@keyframes fade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* cards */
.card{background:var(--card);border:1px solid var(--line-soft);border-radius:18px;padding:26px;}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.card-h h2{font-size:19px;}
.card-h .link{font-size:13.5px;font-weight:600;color:var(--gold-deep);cursor:pointer;display:inline-flex;align-items:center;gap:5px;}
.grid-2{display:grid;grid-template-columns:1.55fr 1fr;gap:22px;align-items:start;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.stack{display:flex;flex-direction:column;gap:22px;}
.row{display:flex;gap:22px;align-items:start;}

.muted{color:var(--muted);}
.mini{font-size:13px;color:var(--muted);}
.sectiontitle{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:14px;}

/* welcome banner */
.welcome{background:var(--black);color:#fff;border-radius:20px;padding:32px 34px;position:relative;overflow:hidden;}
.welcome::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 45% 90% at 88% 10%, oklch(0.76 0.105 80 / .16), transparent 60%);}
.welcome > *{position:relative;}
.welcome .greet{color:var(--gold);font-weight:600;font-size:14px;}
.welcome h2{color:#fff;font-size:clamp(24px,3vw,32px);margin-top:6px;}
.welcome p{color:oklch(0.82 0.01 70);font-size:15.5px;margin-top:10px;max-width:560px;}
.welcome .w-actions{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap;}

/* stat tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.tile{background:var(--card);border:1px solid var(--line-soft);border-radius:14px;padding:20px;}
.tile .ti{width:40px;height:40px;border-radius:10px;background:var(--bg-2);color:var(--gold-deep);display:grid;place-items:center;margin-bottom:14px;}
.tile b{font-family:'Spectral',serif;font-size:24px;color:var(--black);display:block;line-height:1;}
.tile span{font-size:13px;color:var(--muted);}

/* timeline */
.timeline{display:flex;flex-direction:column;margin-top:6px;}
.tl{display:flex;gap:16px;padding-bottom:22px;}
.tl:last-child{padding-bottom:0;}
.tl-rail{display:flex;flex-direction:column;align-items:center;}
.tl-dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--line);background:#fff;color:var(--muted);font-weight:700;font-size:13px;z-index:1;}
.tl-ln{width:2px;flex:1;background:var(--line);margin:3px 0;}
.tl:last-child .tl-ln{display:none;}
.tl.done .tl-dot{background:var(--green);border-color:var(--green);color:#fff;}
.tl.done .tl-ln{background:var(--green);}
.tl.cur .tl-dot{background:var(--gold);border-color:var(--gold);color:var(--black);box-shadow:0 0 0 6px oklch(0.76 0.105 80 / .18);}
.tl-b b{font-size:15px;color:var(--black);display:block;}
.tl:not(.done):not(.cur) .tl-b b{color:var(--muted);}
.tl-b span{font-size:13.5px;color:var(--muted);}
.tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 10px;border-radius:999px;margin-top:5px;}
.tag.gold{background:oklch(0.76 0.105 80 / .18);color:var(--gold-deep);}
.tag.green{background:oklch(0.62 0.13 150 / .15);color:var(--green);}
.tag.blue{background:oklch(0.58 0.10 245 / .14);color:var(--blue);}
.tag.gray{background:var(--bg-2);color:var(--muted);}

/* product cards */
.prod{display:flex;gap:16px;align-items:flex-start;padding:20px;border:1px solid var(--line-soft);border-radius:14px;background:var(--card);transition:.2s;}
.prod:hover{border-color:var(--line);box-shadow:0 16px 40px -30px oklch(0.17 0.004 60 / .4);}
.prod .pic{width:50px;height:50px;border-radius:12px;background:var(--black);color:var(--gold);display:grid;place-items:center;flex-shrink:0;}
.prod b{font-size:16px;color:var(--black);display:block;}
.prod .pmeta{font-size:13.5px;color:var(--muted);margin-top:2px;}
.prod .pright{margin-left:auto;text-align:right;flex-shrink:0;}

/* list rows */
.lrow{display:flex;gap:14px;align-items:center;padding:15px 18px;border:1px solid var(--line-soft);border-radius:12px;background:var(--card);}
.lrow + .lrow{margin-top:10px;}
.lrow .li{width:40px;height:40px;border-radius:10px;background:var(--bg-2);color:var(--gold-deep);display:grid;place-items:center;flex-shrink:0;}
.lrow b{font-size:15px;color:var(--black);display:block;line-height:1.3;}
.lrow span{font-size:13px;color:var(--muted);}
.lrow .la{margin-left:auto;display:flex;gap:8px;align-items:center;flex-shrink:0;}

/* table */
.tbl{width:100%;border-collapse:collapse;}
.tbl th{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:12px 14px;border-bottom:1px solid var(--line);}
.tbl td{padding:15px 14px;border-bottom:1px solid var(--line-soft);font-size:14.5px;color:var(--ink);}
.tbl tr:last-child td{border-bottom:none;}
.tbl b{color:var(--black);}

/* academia */
.course{border:1px solid var(--line-soft);border-radius:16px;overflow:hidden;background:var(--card);transition:.2s;display:flex;flex-direction:column;}
.course:hover{box-shadow:0 20px 46px -32px oklch(0.17 0.004 60 / .45);transform:translateY(-4px);}
.course .ch{height:120px;background:var(--black);position:relative;display:grid;place-items:center;color:var(--gold);}
.course .ch .num{position:absolute;top:12px;left:14px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:oklch(0.7 0.01 70);}
.course .cb{padding:20px;flex:1;display:flex;flex-direction:column;}
.course h3{font-size:18px;}
.course .cd{font-size:13.5px;color:var(--muted);margin:6px 0 14px;flex:1;}
.course .cprog{height:7px;border-radius:999px;background:var(--bg-2);overflow:hidden;}
.course .cprog i{display:block;height:100%;background:var(--gold);}
.course .cmeta{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-top:9px;}

/* progress bar generic */
.bar{height:8px;border-radius:999px;background:var(--bg-2);overflow:hidden;}
.bar i{display:block;height:100%;background:var(--gold);}

/* advisor card */
.advisor{display:flex;gap:14px;align-items:center;}
.advisor .av{width:54px;height:54px;border-radius:50%;background:var(--black);color:var(--gold);display:grid;place-items:center;font-family:'Spectral',serif;font-size:20px;font-weight:600;flex-shrink:0;overflow:hidden;}
.advisor b{font-size:15.5px;color:var(--black);display:block;}
.advisor span{font-size:13px;color:var(--muted);}

/* chat */
.chat{display:flex;flex-direction:column;height:520px;}
.chat-msgs{flex:1;overflow:auto;display:flex;flex-direction:column;gap:14px;padding:6px 2px;}
.msg{max-width:74%;padding:13px 16px;border-radius:16px;font-size:14.5px;line-height:1.5;}
.msg.them{background:var(--bg-2);color:var(--ink);border-bottom-left-radius:5px;align-self:flex-start;}
.msg.me{background:var(--black);color:#fff;border-bottom-right-radius:5px;align-self:flex-end;}
.msg .t{display:block;font-size:11px;opacity:.6;margin-top:5px;}
.chat-in{display:flex;gap:10px;margin-top:14px;}
.chat-in input{flex:1;font-family:inherit;font-size:14.5px;padding:13px 16px;border:1.5px solid var(--line);border-radius:999px;background:var(--bg);outline:none;}
.chat-in input:focus{border-color:var(--gold);}
.chat-in button{width:48px;height:48px;border-radius:50%;background:var(--gold);color:var(--black);border:none;cursor:pointer;display:grid;place-items:center;flex-shrink:0;transition:.2s;}
.chat-in button:hover{background:var(--gold-bright);}

/* upload dropzone */
.drop{border:2px dashed var(--line);border-radius:14px;padding:30px;text-align:center;color:var(--muted);transition:.2s;cursor:pointer;}
.drop:hover{border-color:var(--gold);background:oklch(0.76 0.105 80 / .04);}
.drop .di{width:52px;height:52px;border-radius:12px;background:var(--bg-2);color:var(--gold-deep);display:grid;place-items:center;margin:0 auto 12px;}

/* fields */
.field{margin-bottom:16px;}
.field label{font-size:13px;font-weight:600;color:var(--black);display:block;margin-bottom:7px;}
.field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:15px;padding:13px 15px;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);transition:.2s;outline:none;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 4px oklch(0.76 0.105 80 / .15);background:#fff;}

/* mobile sidebar toggle */
.menu-btn{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--card);cursor:pointer;align-items:center;justify-content:center;}
.side-scrim{display:none;}

@media(max-width:1024px){
  .grid-2{grid-template-columns:1fr;}
  .tiles{grid-template-columns:1fr 1fr;}
  .grid-3{grid-template-columns:1fr 1fr;}
}
@media(max-width:860px){
  .app{grid-template-columns:1fr;}
  .side{position:fixed;left:0;top:0;z-index:60;width:280px;transform:translateX(-100%);transition:transform .3s;}
  .side.open{transform:none;}
  .side-scrim.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:55;}
  .menu-btn{display:inline-flex;}
  .content{padding:22px 18px;}
  .topbar{padding:0 18px;}
}
@media(max-width:560px){
  .tiles,.grid-3{grid-template-columns:1fr;}
  .topbar h1{font-size:19px;}
  .row{flex-direction:column;}
}