/* ════ EGS TeK · Portal de trabajo · estilos compartidos ════ */
:root{
  --primary:#0d5c63; --primary-d:#0a4148; --primary-l:#14868f;
  --accent:#f4a340; --accent2:#e8902a;
  --bg:#f4f7f8; --card:#fff; --text:#16262b; --muted:#5a7b80; --border:#dde6e8;
  --success:#1a9a6a; --danger:#c84a3a; --warning:#d4860a;
  --shadow:0 2px 8px rgba(13,92,99,.06); --shadow-lg:0 10px 30px rgba(13,92,99,.15);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif;background:var(--bg);color:var(--text);min-height:100vh;padding-bottom:60px}

.wrap{max-width:920px;margin:0 auto;padding:0 0 30px}
.nav{background:linear-gradient(160deg,var(--primary),var(--primary-d));color:#fff;padding:18px 22px 14px;border-radius:0 0 20px 20px;box-shadow:var(--shadow-lg)}
.nav .top{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.nav .logo{width:42px;height:42px;background:rgba(255,255,255,.18);border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:22px}
.nav .ttl{flex:1}
.nav .ttl h1{font-size:18px;font-weight:800;letter-spacing:-.2px}
.nav .ttl .sub{font-size:11px;opacity:.85;margin-top:1px}
.nav .badge-rol{font-size:10.5px;font-weight:800;background:var(--accent);color:#16262b;padding:4px 10px;border-radius:10px}
.nav .badge-rol.team{background:rgba(255,255,255,.22);color:#fff}

.tabs{display:flex;gap:5px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:8px 14px;font-size:12.5px;font-weight:700;border-radius:10px;color:rgba(255,255,255,.7);text-decoration:none;white-space:nowrap;background:transparent;border:none;cursor:pointer;font-family:inherit}
.tab.active{background:#fff;color:var(--primary)}
.tab .e{margin-right:5px}

.body{padding:18px 16px 30px}

.section-h{font-size:13px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin:18px 4px 10px}
.section-h:first-child{margin-top:6px}

.card{background:var(--card);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow);margin-bottom:10px}
.card.flat{box-shadow:none;border:1.5px solid var(--border)}

.btn{padding:11px 18px;border-radius:11px;font-size:14px;font-weight:700;border:none;cursor:pointer;font-family:inherit;transition:.15s;display:inline-flex;align-items:center;gap:6px;justify-content:center}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-d)}
.btn-accent{background:var(--accent);color:#16262b}
.btn-accent:hover{background:var(--accent2)}
.btn-ghost{background:#eef4f5;color:var(--primary)}
.btn-danger{background:#fdeeee;color:var(--danger)}
.btn-sm{padding:6px 12px;font-size:12px;border-radius:8px}
.btn:disabled{opacity:.55;cursor:not-allowed}

input,textarea,select{width:100%;padding:11px 13px;border:1.5px solid var(--border);border-radius:11px;font-size:14px;background:#fafbfc;font-family:inherit;color:var(--text);outline:none;transition:.15s}
input:focus,textarea:focus,select:focus{border-color:var(--primary-l);background:#fff}
textarea{min-height:78px;resize:vertical;line-height:1.45}
label{display:block;font-size:11.5px;font-weight:700;color:var(--muted);margin:10px 2px 5px;text-transform:uppercase;letter-spacing:.3px}

/* ════ Dashboard / Progress ════ */
.hero-stat{background:linear-gradient(135deg,var(--primary),var(--primary-l));color:#fff;padding:22px 20px 24px;border-radius:18px;margin-bottom:14px;box-shadow:var(--shadow-lg)}
.hero-stat .label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;opacity:.85;margin-bottom:4px}
.hero-stat .pct{font-size:42px;font-weight:800;letter-spacing:-1.5px;line-height:1}
.hero-stat .pct .small{font-size:18px;opacity:.7;margin-left:3px}
.hero-stat .fase{font-size:14px;margin-top:7px;font-weight:600;opacity:.95}
.progress-big{height:13px;background:rgba(255,255,255,.2);border-radius:13px;overflow:hidden;margin-top:16px}
.progress-big span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#ffd190);border-radius:13px;transition:width .6s ease-out;box-shadow:0 0 12px rgba(244,163,64,.5)}

.kpi-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:14px}
.kpi{background:var(--card);border-radius:13px;padding:13px 9px;text-align:center;box-shadow:var(--shadow)}
.kpi .n{font-size:22px;font-weight:800;color:var(--primary)}
.kpi .n.warn{color:var(--accent2)}
.kpi .n.ok{color:var(--success)}
.kpi .l{font-size:10.5px;color:var(--muted);margin-top:2px;font-weight:600;line-height:1.2}

.milestone-list .milestone{display:flex;gap:11px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}
.milestone-list .milestone:last-child{border-bottom:none}
.milestone .dot{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;color:#fff;font-weight:800}
.milestone .dot.done{background:var(--success)}
.milestone .dot.curr{background:var(--accent);color:#16262b;box-shadow:0 0 0 4px rgba(244,163,64,.22)}
.milestone .dot.pend{background:var(--border);color:var(--muted)}
.milestone .tx{flex:1}
.milestone .tx h4{font-size:13.5px;font-weight:700}
.milestone .tx .m{font-size:11.5px;color:var(--muted);margin-top:1px}
.milestone .pct{font-size:11.5px;font-weight:800;color:var(--muted)}

/* ════ Chat ════ */
.chat-thread{padding:6px 0 14px;min-height:200px}
.msg{margin-bottom:12px;display:flex;flex-direction:column;max-width:78%}
.msg.me{margin-left:auto;align-items:flex-end}
.msg.them{margin-right:auto;align-items:flex-start}
.msg .who{font-size:11px;font-weight:700;color:var(--muted);margin-bottom:3px;padding:0 5px}
.msg .bubble{padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.4;word-wrap:break-word;white-space:pre-wrap}
.msg.me .bubble{background:var(--primary);color:#fff;border-bottom-right-radius:5px}
.msg.them .bubble{background:#fff;color:var(--text);border-bottom-left-radius:5px;box-shadow:var(--shadow)}
.msg.them.admin .bubble{background:#fff8e8;border:1px solid #f4d699}
.msg .time{font-size:10px;color:var(--muted);margin-top:3px;padding:0 5px}

.chat-input{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--border);padding:10px 12px;display:flex;gap:8px;z-index:50}
.chat-input textarea{min-height:42px;max-height:120px;border-radius:21px;padding:10px 16px;font-size:14px;flex:1;background:#f4f7f8}
.chat-input .send{background:var(--primary);color:#fff;border:none;width:44px;height:44px;border-radius:50%;font-size:18px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.chat-input .send:disabled{background:var(--border);cursor:not-allowed}
body.chat-page{padding-bottom:75px}

/* ════ Tareas ════ */
.task{display:flex;gap:11px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--border)}
.task:last-child{border-bottom:none}
.task .chk{width:22px;height:22px;border:2px solid var(--border);border-radius:6px;cursor:pointer;flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;background:#fff;color:#fff;font-size:14px;font-weight:800}
.task .chk.done{background:var(--success);border-color:var(--success)}
.task .chk.curr{border-color:var(--accent);background:rgba(244,163,64,.18);color:var(--accent2)}
.task .tx{flex:1}
.task .tx .t{font-size:14px;font-weight:600;line-height:1.4}
.task.is-done .tx .t{text-decoration:line-through;color:var(--muted)}
.task .tx .meta{font-size:11px;color:var(--muted);margin-top:3px;display:flex;gap:8px;flex-wrap:wrap}
.task .tx .meta .tag{padding:1px 7px;border-radius:7px;font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.3px}
.task .tx .meta .tag.alta{background:#fdeeee;color:var(--danger)}
.task .tx .meta .tag.media{background:#fff5e8;color:var(--warning)}
.task .tx .meta .tag.baja{background:#eef4f5;color:var(--muted)}
.task .tx .meta .tag.curso{background:rgba(244,163,64,.2);color:var(--accent2)}
.task .del{background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer;padding:4px;line-height:1}

.task-form{background:#eef4f5;border-radius:13px;padding:14px;margin-bottom:14px}

/* ════ Archivos ════ */
.file{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--border)}
.file:last-child{border-bottom:none}
.file .ic{width:42px;height:42px;border-radius:11px;background:#eef4f5;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.file .ic.pdf{background:#fdeeee;color:var(--danger)}
.file .ic.img{background:#e9f6ec;color:var(--success)}
.file .ic.doc{background:#e7eefb;color:#2a5bd1}
.file .tx{flex:1;min-width:0}
.file .tx .n{font-size:13.5px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file .tx .m{font-size:11px;color:var(--muted);margin-top:2px}
.file .actions{display:flex;gap:4px}

.upload-zone{border:2px dashed var(--border);border-radius:13px;padding:24px 14px;text-align:center;background:#fafbfc;margin-bottom:14px;cursor:pointer;transition:.2s}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--primary-l);background:#eef4f5}
.upload-zone .e{font-size:32px;display:block;margin-bottom:6px}
.upload-zone .t{font-size:13.5px;font-weight:700;color:var(--primary)}
.upload-zone .s{font-size:11.5px;color:var(--muted);margin-top:3px}
.upload-zone input{display:none}

.upload-progress{background:#eef4f5;border-radius:11px;padding:11px 14px;margin-bottom:10px;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:10px}
.upload-progress .sp{width:14px;height:14px;border:2.5px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}

/* ════ Versiones ════ */
.ver{position:relative;padding:13px 14px 13px 44px;border-left:2px solid var(--border);margin-left:14px;background:#fff;border-radius:0 12px 12px 0;margin-bottom:8px;box-shadow:var(--shadow)}
.ver::before{content:"";position:absolute;left:-7px;top:18px;width:12px;height:12px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 0 0 1.5px var(--accent)}
.ver.latest::before{background:var(--success);box-shadow:0 0 0 1.5px var(--success)}
.ver .top{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.ver .num{font-size:14px;font-weight:800;color:var(--primary)}
.ver .ts{font-size:11px;color:var(--muted)}
.ver .badge-new{font-size:9.5px;font-weight:800;background:var(--success);color:#fff;padding:2px 7px;border-radius:7px;text-transform:uppercase;letter-spacing:.3px}
.ver h4{font-size:14px;font-weight:700;margin-bottom:5px}
.ver .cambios{font-size:12.5px;color:var(--muted);line-height:1.5;white-space:pre-wrap}
.ver a.url{font-size:11.5px;color:var(--primary);text-decoration:none;display:inline-block;margin-top:7px;font-weight:600}
.ver a.url:hover{text-decoration:underline}

/* ════ Toast ════ */
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:var(--text);color:#fff;padding:11px 22px;border-radius:24px;font-size:13px;font-weight:600;opacity:0;transition:.3s;z-index:80;pointer-events:none;max-width:88%}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-8px)}
.toast.err{background:var(--danger)}
.toast.ok{background:var(--success)}

/* ════ Empty states ════ */
.empty{text-align:center;padding:34px 14px;color:var(--muted)}
.empty .e{font-size:42px;display:block;margin-bottom:8px;opacity:.6}
.empty .t{font-size:14px;font-weight:600;color:var(--text)}
.empty .s{font-size:12px;margin-top:4px}

/* ════ Avances (revelado controlado) ════ */
.avance{position:relative}
.avance.draft{border:1.5px dashed var(--accent2);background:#fffaf3}
.av-top{display:flex;align-items:center;gap:8px;justify-content:space-between}
.av-top h4{font-size:14.5px;font-weight:700;line-height:1.3}
.av-badge{font-size:10px;font-weight:800;padding:2px 8px;border-radius:8px;white-space:nowrap;flex-shrink:0}
.av-badge.oculto{background:#fff0d8;color:var(--accent2)}
.av-badge.vis{background:#e7f7ee;color:var(--success)}
.av-det{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.45;white-space:pre-wrap}
.av-url{display:inline-block;margin-top:7px;font-size:12px;color:var(--primary);text-decoration:none;font-weight:600}
.av-url:hover{text-decoration:underline}
.av-clave{font-size:12px;margin-top:5px;color:var(--text)}
.av-clave b{font-family:"SF Mono",ui-monospace,monospace;background:#eef4f5;padding:2px 7px;border-radius:6px;color:var(--primary)}
.av-actions{display:flex;gap:7px;margin-top:12px;flex-wrap:wrap}

/* ════ Accesos rápidos (admin) ════ */
.acc-row{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--border);text-decoration:none;color:inherit}
.acc-ic{font-size:23px;flex-shrink:0;width:30px;text-align:center}
.acc-tx{flex:1;min-width:0}
.acc-n{font-weight:700;font-size:13.5px;color:var(--text)}
.acc-u{font-size:11.5px;color:var(--muted);margin-top:1px}
.acc-pw{font-family:"SF Mono",ui-monospace,monospace;font-weight:800;color:var(--primary);background:#eef4f5;padding:4px 11px;border-radius:9px;font-size:13px;flex-shrink:0}

/* ════ Demo del campus (tarjeta destacada dashboard) ════ */
#demo-campus{margin-bottom:14px}
.demo-card{display:flex;align-items:center;gap:13px;background:linear-gradient(135deg,#f4a340,#e8902a);border-radius:15px;padding:15px 17px;box-shadow:var(--shadow-lg);text-decoration:none;color:#16262b}
.demo-card:hover{filter:brightness(1.03)}
.demo-ic{width:46px;height:46px;border-radius:13px;background:rgba(255,255,255,.32);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.demo-tx{flex:1;min-width:0}
.demo-lbl{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;opacity:.8}
.demo-url{font-size:15.5px;font-weight:800;margin-top:2px;word-break:break-all;line-height:1.2}
.demo-key{font-size:12.5px;font-weight:700;margin-top:4px}
.demo-go{background:#16262b;color:#fff;font-weight:800;font-size:13px;padding:10px 16px;border-radius:12px;flex-shrink:0}
.demo-draft{font-size:11.5px;color:var(--muted);background:#fffaf3;border:1px dashed var(--accent2);border-radius:10px;padding:9px 12px;margin-top:8px;line-height:1.55}
.demo-draft a{color:var(--primary);font-weight:700;text-decoration:none}
.demo-draft b{color:var(--text)}
.demo-empty{font-size:13px;color:var(--muted);background:#eef6f7;border-radius:12px;padding:14px 16px;text-align:center}

/* ════ Timeline · próximos pasos ════ */
.timeline{position:relative}
.tl-item{position:relative;display:flex;gap:12px;padding:8px 0;align-items:flex-start}
.tl-item:not(:last-child)::after{content:"";position:absolute;left:13px;top:31px;bottom:-8px;width:2px;background:var(--border)}
.tl-dot{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;z-index:1;background:var(--border);color:var(--muted)}
.tl-item.done .tl-dot{background:var(--success);color:#fff}
.tl-item.next .tl-dot{background:var(--accent);color:#16262b;box-shadow:0 0 0 4px rgba(244,163,64,.22)}
.tl-body{flex:1;padding-top:3px;min-width:0}
.tl-text{font-size:13.5px;font-weight:600;line-height:1.35}
.tl-item.done .tl-text{text-decoration:line-through;color:var(--muted);font-weight:500}
.tl-item.next .tl-text{color:var(--primary)}
.tl-meta{display:flex;gap:7px;align-items:center;margin-top:3px;flex-wrap:wrap}
.tl-when{font-size:11px;color:var(--muted);font-weight:600}
.tl-tag{font-size:9.5px;font-weight:800;background:var(--accent);color:#16262b;padding:2px 8px;border-radius:7px;letter-spacing:.3px}
.tl-actions{display:flex;gap:3px;flex-shrink:0}
.tl-actions button{background:none;border:none;cursor:pointer;font-size:13px;color:var(--muted);padding:4px 5px;border-radius:6px}
.tl-actions button:hover{background:#eef4f5}

/* ════ Webapp · tarjetas de acceso ════ */
.wapp{margin-bottom:12px}
.wapp-card{display:flex;align-items:center;gap:13px;background:var(--card);border-radius:14px;padding:16px;box-shadow:var(--shadow);text-decoration:none;color:inherit;border:1.5px solid transparent;transition:.15s}
.wapp-card:hover{border-color:var(--primary-l);box-shadow:var(--shadow-lg)}
.wapp.draft .wapp-card{border:1.5px dashed var(--accent2);background:#fffaf3}
.wapp-ic{width:46px;height:46px;border-radius:13px;background:#eef6f7;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.wapp-tx{flex:1;min-width:0}
.wapp-n{font-size:15px;font-weight:800;color:var(--text)}
.wapp-d{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4}
.wapp-u{font-size:11.5px;color:var(--primary-l);margin-top:4px;font-weight:600}
.wapp-go{background:var(--primary);color:#fff;font-weight:700;font-size:13px;padding:9px 15px;border-radius:11px;flex-shrink:0}
.wapp-key{font-size:12.5px;color:var(--muted);padding:8px 16px 0}
.wapp-key b{font-family:"SF Mono",ui-monospace,monospace;background:#eef4f5;padding:2px 8px;border-radius:6px;color:var(--primary)}

/* ════ OMC compliance banner ════ */
.omc-banner{position:fixed;bottom:0;left:0;right:0;background:#0d2a3a;color:#e8f0f5;
  padding:6px 14px;font-size:10.5px;text-align:center;z-index:60;
  border-top:1px solid #1a4a5e;line-height:1.4}
.omc-banner b{color:#f4a340}
body.chat-page .omc-banner{display:none}

@media(max-width:520px){
  .nav .ttl h1{font-size:16px}
  .hero-stat .pct{font-size:36px}
  .kpi .n{font-size:18px}
  .kpi .l{font-size:9.5px}
}