/* ===== Fuentes reales UPC ===== */
@font-face { font-family:'Public Sans'; font-weight:400; font-display:swap; src:url('fonts/publicsans-400.ttf') format('truetype'); }
@font-face { font-family:'Public Sans'; font-weight:700; font-display:swap; src:url('fonts/publicsans-700.ttf') format('truetype'); }
@font-face { font-family:'Solano Gothic'; font-weight:700; font-display:swap; src:url('fonts/solano-bold.ttf') format('truetype'); }

:root{
  --upc-red:#EC1B2E;
  --lavender:#D3C9EF;
  --bg:#F4F3F9;
  --slate:#3E4E63;
  --slate-dark:#35485C;
  --muted:#8A90A0;
  --link:#2F44C9;
  --nav-h:64px;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; min-height:100%; background:var(--bg); color:var(--slate);
  font-family:'Public Sans','Segoe UI',Helvetica,Arial,sans-serif;
  -webkit-user-select:none; user-select:none; overscroll-behavior:none; }

#app{ position:relative; min-height:100vh; }

/* ===== Pantallas ===== */
.screen{ min-height:100vh; }
[hidden]{ display:none !important; }
.tab-screen{ padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom)); }

/* ===== Barra inferior ===== */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:flex; background:#fff; border-top:1px solid #ECEAF2;
  box-shadow:0 -2px 10px rgba(60,66,87,.05);
}
.nav-item{
  flex:1; border:none; background:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:#5A6072; font-size:12px; font-weight:500; padding:6px 0;
}
.nav-item.active{ color:var(--upc-red); font-weight:700; }
.nav-item span{ line-height:1; }

/* ===== PERFIL ===== */
.perfil-scroll{ min-height:100vh; }
.perfil-hero{ position:relative; }
.campus-illus{
  height:210px; background:#E7E3F6 center bottom/cover no-repeat;
  background-image:url('img/campus.svg');
}
.perfil-photo{ position:absolute; left:0; right:0; bottom:-46px; display:flex; justify-content:center; }
.photo-slot{
  width:132px; height:132px; border-radius:50%; overflow:hidden; background:#fff;
  border:4px solid #fff; box-shadow:0 6px 18px rgba(90,80,150,.16);
  display:flex; align-items:center; justify-content:center;
}
.photo-slot img{ width:100%; height:100%; object-fit:cover; }
.photo-slot.empty{ background:#EFEDF9; }
.photo-slot.empty::after{
  content:""; width:56%; height:56%;
  background:#c9c4e6; -webkit-mask:center/contain no-repeat; mask:center/contain no-repeat;
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 12c2.7 0 4.9-2.2 4.9-4.9S14.7 2.2 12 2.2 7.1 4.4 7.1 7.1 9.3 12 12 12zm0 2.4c-3.3 0-9.8 1.6-9.8 4.9v2.5h19.6v-2.5c0-3.3-6.5-4.9-9.8-4.9z'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 12c2.7 0 4.9-2.2 4.9-4.9S14.7 2.2 12 2.2 7.1 4.4 7.1 7.1 9.3 12 12 12zm0 2.4c-3.3 0-9.8 1.6-9.8 4.9v2.5h19.6v-2.5c0-3.3-6.5-4.9-9.8-4.9z'/></svg>");
}

.uname{
  margin:64px 20px 0; text-align:center; color:var(--upc-red);
  font-family:'Solano Gothic','Public Sans',sans-serif; font-weight:700;
  font-size:clamp(24px,7.2vw,30px); text-transform:uppercase; letter-spacing:.4px; line-height:1.05;
}
.career{ text-align:center; margin:6px 20px 0; color:var(--slate-dark);
  font-weight:700; font-size:clamp(17px,5vw,21px); }
.campus-line{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:12px;
  color:#4A5568; font-size:16px; }
.campus-line .pin{ fill:var(--upc-red); }

.email-pill{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:18px 18px 0; padding:12px 16px; background:#EDEFF3; border-radius:12px;
  color:#5A6478; font-size:16px;
}
.email-pill .copy-btn{ border:none; background:none; color:var(--upc-red); cursor:pointer; display:flex; padding:2px; }

.id-row{ text-align:center; margin-top:14px; font-size:16px; color:var(--muted); }
.id-row:first-of-type{ margin-top:20px; }
.id-row b{ color:var(--slate); font-weight:700; }

.divider{ border:none; border-top:1px solid #E3E1EC; margin:22px 22px; }

.tiu-btn{
  display:flex; align-items:center; gap:14px; width:calc(100% - 40px); margin:6px 20px 0;
  background:#fff; border:none; border-radius:16px; padding:18px 18px; cursor:pointer;
  box-shadow:0 6px 20px rgba(60,66,87,.10); color:#20242E;
}
.tiu-btn-ic{ color:#20242E; flex:0 0 auto; }
.tiu-btn-txt{ flex:1; text-align:left; font-family:'Solano Gothic','Public Sans',sans-serif;
  font-weight:700; font-size:20px; letter-spacing:.5px; text-transform:uppercase; }
.tiu-btn .chev{ color:var(--upc-red); flex:0 0 auto; }

.terms{ text-align:center; margin:26px 22px 0; color:#5A6072; font-size:15px; line-height:1.5; }
.terms a{ color:var(--link); font-weight:700; text-decoration:underline; }

.logout-btn{
  display:block; width:calc(100% - 40px); margin:26px 20px 30px;
  background:#fff; color:var(--upc-red); border:2px solid var(--upc-red);
  border-radius:14px; padding:15px; font-size:17px; font-weight:700; cursor:pointer;
  font-family:inherit;
}

/* ===== Placeholder (Inicio/Académico) ===== */
.placeholder{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; color:var(--muted); }
.ph-emoji{ font-size:56px; }
.placeholder h2{ margin:10px 0 6px; color:var(--slate); }

/* ===== AYUDA / Configuración ===== */
.cfg-scroll{ padding:calc(env(safe-area-inset-top) + 18px) 20px 30px; max-width:560px; margin:0 auto; }
.cfg-title{ margin:0; color:var(--slate); font-size:24px; }
.cfg-sub{ margin:4px 0 16px; color:var(--muted); font-size:14px; }
.cfg-photo-wrap{ display:flex; flex-direction:column; align-items:center; gap:12px; margin:6px 0 18px; }
.cfg-photo{ width:120px; height:120px; }
.cfg-photo-btn{ border:1.5px solid var(--upc-red); color:var(--upc-red); background:#fff; font-family:inherit;
  font-weight:700; font-size:15px; padding:9px 20px; border-radius:22px; cursor:pointer; }
.cfg-label{ display:block; font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin:14px 0 6px; }
.cfg-input{ width:100%; font-family:inherit; font-size:16px; color:var(--slate); padding:12px 14px; border:1.5px solid #E1DEF0; border-radius:12px; background:#fff; outline:none; }
.cfg-input:focus{ border-color:var(--upc-red); }
.cfg-hint{ margin-top:6px; font-size:12px; color:var(--muted); }
.cfg-hint b{ color:var(--upc-red); }
.cfg-save{ width:100%; margin-top:24px; background:var(--upc-red); color:#fff; border:none; font-family:inherit; font-size:17px; font-weight:700; padding:14px; border-radius:14px; cursor:pointer; }
.cfg-saved{ text-align:center; color:#1E9E5A; font-weight:700; margin-top:12px; }

/* ===== TIU VIRTUAL (sub-pantalla) ===== */
#screen-tiu{ position:fixed; inset:0; z-index:60; background:var(--bg); display:flex; flex-direction:column; overflow-x:hidden;
  padding-top:env(safe-area-inset-top); }
.tiu-lottie{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.tiu-lottie svg{ display:block; }
.tiu-header{ position:relative; z-index:2; display:flex; align-items:center; gap:12px; padding:16px 18px 14px; border-bottom:1px solid #E8E6F0; }
.tiu-back{ border:none; background:none; color:var(--upc-red); padding:2px; display:flex; cursor:pointer; }
.tiu-title{ font-size:16px; font-weight:700; letter-spacing:1.6px; line-height:1.35; color:#1B2029; }
.tiu-body{ position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center; padding:clamp(10px,2vh,18px) 16px 0; }
.tiu-clock{ background:var(--lavender); color:#14161C; font-size:clamp(30px,10vw,44px); font-weight:400; letter-spacing:.5px; padding:clamp(8px,1.4vh,12px) clamp(22px,7vw,32px); border-radius:16px; font-variant-numeric:tabular-nums; }
.tiu-date{ margin-top:clamp(8px,1.4vh,12px); font-size:clamp(13px,4.2vw,16px); color:#6E7480; }
.tiu-photo-wrap{ margin-top:clamp(14px,3vh,26px); }
.tiu-photo{ width:clamp(116px,36vw,150px); height:clamp(116px,36vw,150px); }
.tiu-card{ width:calc(100% - 28px); max-width:460px; margin:clamp(28px,5.5vh,52px) auto 0; background:#fff; border-radius:28px 28px 0 0; padding:clamp(20px,3vh,28px) clamp(18px,6vw,24px) clamp(22px,3.4vh,34px); text-align:center; box-shadow:0 -6px 26px rgba(60,66,87,.08); }
.tiu-name{ color:var(--upc-red); font-family:'Solano Gothic','Public Sans',sans-serif; font-size:clamp(26px,8.2vw,34px); font-weight:700; line-height:1.05; margin:0 0 clamp(10px,1.8vh,16px); text-transform:uppercase; letter-spacing:.5px; }
.tiu-field{ margin-bottom:clamp(6px,1.1vh,10px); }
.tiu-flabel{ font-size:clamp(13px,4vw,15px); color:var(--muted); }
.tiu-fvalue{ font-size:clamp(18px,5.6vw,22px); font-weight:700; color:var(--slate); letter-spacing:.3px; }
.tiu-career{ margin-top:clamp(12px,2.2vh,20px); font-size:clamp(15px,5vw,18px); font-weight:700; color:var(--slate-dark); }
.tiu-campus{ margin-top:clamp(5px,1vh,8px); font-size:clamp(14px,4.6vw,17px); color:#4A5568; display:flex; align-items:center; justify-content:center; gap:6px; }
.tiu-campus .pin{ fill:var(--upc-red); flex:0 0 auto; }