:root{
  --bg:#ffffff;
  --ink:#111111;
  --muted:#6b6b6b;
  --line:#111111;

  --pill-radius:26px;

  --red:#b90000;
  --blue:#77d0f8;
  --orange:#f6b04c;

  --shadow: 0 12px 30px rgba(0,0,0,.10);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Nunito", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;
}

/* =========================
   ✅ LOGIN SCREEN
   ========================= */
.loginRoot{
  min-height:100vh;
  display:none;
  align-items:center;
  justify-content:center;
  padding:28px 18px;
}
.loginRoot.show{ display:flex; }

.loginCard{
  width:min(980px, 96vw);
  border:2px solid var(--line);
  border-radius:28px;
  padding:18px;
  background:#fff;
  box-shadow: var(--shadow);
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  align-items:stretch;
}

.loginLeft{
  border:2px solid rgba(0,0,0,.12);
  border-radius:24px;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.loginLogo{
  width:160px;height:160px;
  display:grid;place-items:center;
}
.loginLogo img{ width:140px;height:140px;object-fit:contain; }
.loginTitle{
  font-size:44px;
  font-weight:900;
  margin:0;
  line-height:1.05;
}
.loginSub{
  margin:0;
  color:#333;
  font-weight:900;
  font-size:18px;
  opacity:.9;
}

.loginRight{
  border:2px solid rgba(0,0,0,.12);
  border-radius:24px;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.tabs{
  display:flex;
  gap:10px;
  justify-content:center;
}
.tabBtn{
  border:2px solid var(--line);
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
  background:#fff;
  font-size:16px;
}
.tabBtn.active{ background:#f7f7f7; }

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.field label{
  font-weight:900;
  font-size:16px;
  color:#111;
}
.field input{
  border:2px solid var(--line);
  border-radius:18px;
  padding:12px 14px;
  font-size:16px;
  font-weight:800;
  outline:none;
}

.loginActions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:4px;
}
.btn{
  border:2px solid var(--line);
  border-radius:999px;
  padding:12px 18px;
  background:#fff;
  font-size:18px;
  font-weight:900;
  cursor:pointer;
}
.btn:active{ transform: translateY(1px); }
.btnPrimary{
  background:#111;
  color:#fff;
}
.btnGoogle{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.btnGoogle iconify-icon{ font-size:22px; }

.loginHint{
  text-align:center;
  font-weight:900;
  color:var(--muted);
  font-size:14px;
  margin-top:6px;
}

.divider{
  display:flex;
  align-items:center;
  gap:10px;
  margin:6px 0 2px;
  opacity:.85;
}
.divider .line{ height:2px; background:rgba(0,0,0,.15); flex:1; border-radius:999px; }
.divider .txt{ font-weight:900; font-size:14px; color:#333; }

@media (max-width: 980px){
  .loginCard{ grid-template-columns: 1fr; }
  .loginTitle{ font-size:38px; }
}

/* =========================
   APP LAYOUT
   ========================= */
.app{
  min-height:100vh;
  display:none; /* 🔒 se muestra sólo al estar logueado */
  grid-template-columns: 340px 1fr;
  gap:24px;
  padding:22px;
}
.app.show{ display:grid; }

.sidebar{
  border-right:2px solid rgba(0,0,0,.15);
  padding-right:22px;
}

.userCard{
  border:2px solid var(--line);
  border-radius:28px;
  padding:16px;
  display:grid;
  grid-template-columns:56px 1fr;
  gap:12px;
  align-items:center;
  margin-bottom:22px;
}

.userIcon{
  width:56px;height:56px;
  border-radius:999px;
  display:grid;place-items:center;
  overflow:hidden;
}
.userIcon img{ width:56px;height:56px;object-fit:contain; }

.userTitle{ line-height:1.1; }
.userTitle .hi{ font-size:30px; font-weight:900; }
.userTitle .sub{ margin-top:2px; font-size:10px; font-weight:800; }
.userTitle .logout{
  margin-top:6px;
  font-size:16px;
  color:#222;
  text-decoration:none;
  border-bottom:1px solid transparent;
  display:inline-block;
}
.userTitle .logout:hover{ border-bottom-color:#222; }

.serverPill{
  grid-column:1 / -1;
  margin-top:10px;
  border:2px solid var(--line);
  border-radius:999px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
  font-weight:900;
  font-size:12px;
  letter-spacing:.3px;
  text-transform:uppercase;
}
.serverPill iconify-icon{ font-size:20px; }

.nav{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:18px;
}
.navBtn{
  border:2px solid var(--line);
  border-radius:var(--pill-radius);
  background:#fff;
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:14px;
  font-size:20px;
  font-weight:800;
  cursor:pointer;
  transition: transform .06s ease, box-shadow .2s ease;
}
.navBtn:hover{ box-shadow: 0 10px 18px rgba(0,0,0,.06); }
.navBtn:active{ transform: translateY(1px); }
.navBtn .ico{
  width:44px;height:44px;
  border:2px solid var(--line);
  border-radius:18px;
  display:grid;place-items:center;
  background:#fff;
  flex:0 0 auto;
}
.navBtn .ico iconify-icon{ font-size:26px; }
.navBtn.active{ background:#f7f7f7; }

.main{ padding:8px 10px; position:relative; }

.centerLogo{
  width:160px;
  height:160px;
  margin:0 auto 18px;
  display:grid;
  place-items:center;
}
.centerLogo img{ width:140px;height:140px;object-fit:contain; }

.panel{
  border:2px solid var(--line);
  border-radius:28px;
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:18px;
  margin:18px auto;
  max-width:980px;
  background:#fff;
}
.panel .leftIcon{
  width:84px; height:84px;
  display:grid; place-items:center;
  flex:0 0 auto;
}
.panel .leftIcon img{ width:84px;height:84px;object-fit:contain; }
.panel .leftIcon iconify-icon{ font-size:70px; }
.panel .text{
  font-size:28px;
  font-weight:800;
  text-align:center;
  flex:1;
  line-height:1.2;
}
.bigTime{ font-size:44px; font-weight:900; letter-spacing:.8px; }

.screen{ display:none; padding:12px 10px 18px; }
.screen.active{ display:block; }

.screenTitle{
  font-size:74px;
  font-weight:900;
  text-align:center;
  margin:6px 0 18px;
}

.list{
  max-width:980px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.listItem{
  border:2px solid var(--line);
  border-radius:30px;
  padding:18px 22px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.listItem .left{ display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; }
.listItem .title{
  font-size:36px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.listItem .sub{ font-size:28px; font-weight:900; text-align:center; color:#111; }

.magPill{
  width:92px;height:92px;
  border-radius:999px;
  display:grid;place-items:center;
  font-size:42px;
  font-weight:900;
  background:#fff;
  flex:0 0 auto;
}

.configWrap{
  max-width:980px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.configRow{
  border:2px solid var(--line);
  border-radius:30px;
  padding:18px 22px;
  background:#fff;
  display:flex;
  align-items:center;
  gap:18px;
  justify-content:space-between;
}
.configRow .l{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:34px;
  font-weight:900;
}
.configRow .l iconify-icon{ font-size:44px; }
.configRow .r{ display:flex; align-items:center; gap:10px; }
select, button, input[type="checkbox"]{ font-family:inherit; }
select{
  border:2px solid var(--line);
  border-radius:999px;
  padding:10px 14px;
  font-size:18px;
  font-weight:900;
  background:#fff;
  cursor:pointer;
}
.toggle{ display:flex; align-items:center; gap:10px; font-size:18px; font-weight:900; }
.hint{ text-align:center; color:var(--muted); font-weight:900; margin-top:6px; }

.toast{
  position:fixed;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  background:#fff;
  border:2px solid var(--line);
  border-radius:999px;
  padding:12px 18px;
  display:flex;
  align-items:center;
  gap:10px;
  box-shadow: var(--shadow);
  z-index:9999;
  min-width:min(720px, calc(100vw - 24px));
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
}
.toast.show{ opacity:1; pointer-events:auto; }
.toast iconify-icon{ font-size:22px; }
.toast .tTitle{ font-weight:900; font-size:18px; margin-right:8px; white-space:nowrap; }
.toast .tBody{ font-weight:900; font-size:18px; color:#222; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Overlays */
.overlay{
  position:fixed;
  inset:0;
  z-index:10000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:32px 18px;
}
.overlay.show{ display:flex; }

.overlay.red{ background: var(--red); }
.overlay.blue{ background: var(--blue); }
.overlay.orange{ background: var(--orange); }

.alertWrap{
  width:min(1100px, 96vw);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10010;
  overflow:visible;
}

.alertCard{
  width:100%;
  border-radius:26px;
  background:#fff;
  padding:28px 28px 26px;
  text-align:center;
  box-shadow: var(--shadow);
  position:relative;
  z-index:10020;
  overflow:visible !important;
}

.badge{
  position:absolute;
  left:-70px;
  top:-70px;

  width:240px;
  height:240px;
  z-index:10099;
  pointer-events:none;
  display:grid;
  place-items:center;
}
.badgeOuter{
  width:240px;
  height:240px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background: transparent;
}

.badgeCore{
  width:155px;
  height:155px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background: var(--red);
  box-shadow: inset 0 0 0 10px rgba(255,255,255,.18);
}

.badgeLogo{
  width: 120px;
  height: 120px;
  object-fit: contain;
  display:block;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.12));
}

.overlay.red .badgeCore{ background: var(--red); }
.overlay.blue .badgeCore{ background: #68c6f4; }
.overlay.orange .badgeCore{ background: #f2a23a; }

.alertHeader{
  border-radius:20px;
  padding:18px;
  margin:0 auto 18px;
  width:100%;
  background:#fff;
  position:relative;
  z-index:10021;
}
.alertHeader .h1{
  font-size:68px;
  font-weight:900;
  margin:0;
  letter-spacing:2px;
  text-transform:uppercase;
}

.alertBodyBox{
  border-radius:20px;
  padding:22px 18px 22px;
  width:100%;
  background:#fff;
  position:relative;
  z-index:10021;
}

.alertMain{ font-size:74px; font-weight:900; margin:0 0 8px; line-height:1.0; }
.alertSub{ font-size:36px; font-weight:900; margin:0; opacity:.95; }
.eta{ font-size:86px; font-weight:900; margin:10px 0 8px; line-height:1; }
.epicenter{ font-size:34px; font-weight:900; margin:0; }
.smallNote{ margin-top:16px; font-size:20px; font-weight:900; color:#333; opacity:.9; }

.closeBtn{
  margin:18px auto 0;
  border:none;
  border-radius:18px;
  padding:18px 56px;
  font-size:56px;
  font-weight:900;
  cursor:pointer;
  background:#fff;
  box-shadow: 0 6px 0 rgba(0,0,0,.10);
  position:relative;
  z-index:10021;
}
.closeBtn:active{ transform: translateY(1px); box-shadow:0 5px 0 rgba(0,0,0,.10); }

.overlayFooter{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:14px;
  z-index:10001;
  font-weight:900;
  font-size:14px;
  color:rgba(255,255,255,.75);
  pointer-events:none;
  white-space:nowrap;
}

.overlay.red .alertHeader .h1,
.overlay.red .alertMain,
.overlay.red .alertSub,
.overlay.red .eta,
.overlay.red .epicenter,
.overlay.red .smallNote,
.overlay.red .closeBtn{ color: var(--red); }

.overlay.blue .alertHeader .h1,
.overlay.blue .alertMain,
.overlay.blue .alertSub,
.overlay.blue .eta,
.overlay.blue .epicenter,
.overlay.blue .smallNote,
.overlay.blue .closeBtn{ color: #68c6f4; }

.overlay.orange .alertHeader .h1,
.overlay.orange .alertMain,
.overlay.orange .alertSub,
.overlay.orange .eta,
.overlay.orange .epicenter,
.overlay.orange .smallNote,
.overlay.orange .closeBtn{ color: #f2a23a; }

@media (max-width: 980px){
  .app{ grid-template-columns: 1fr; }
  .sidebar{ border-right:none; border-bottom:2px solid rgba(0,0,0,.15); padding-right:0; padding-bottom:18px; }
  .screenTitle{ font-size:54px; }
  .panel .text{ font-size:22px; }
  .bigTime{ font-size:34px; }
  .badge{ display:none; }
  .alertHeader .h1{ font-size:48px; }
  .alertMain{ font-size:54px; }
  .eta{ font-size:66px; }
  .closeBtn{ font-size:44px; }
}