/* Teamcore Login — "Mission Control" redesign (port del demo tc-login-demo).
 * Estructura compartida scopeada bajo .tc-login; el tema (dark) se maneja con
 * variables en .tc-login.theme-dark. Portado verbatim de
 * tc-login-demo/src/teamcore-login/login.css con dos cambios para tc-2.0:
 *   1. .tc-login se fija a viewport completo (position:fixed) para tapar el
 *      chrome de base.html (Bootstrap/body).
 *   2. --tc-font-sans = "Inter" (se carga via Google Fonts en el template).
 *
 * Reglas de performance (mantener):
 *  - animar solo transform / opacity (GPU)
 *  - NADA de filter / box-shadow / background-position / stroke-dashoffset animados
 *  - .anim-paused (toggle en visibilitychange) congela los loops si el tab no se ve
 *  - prefers-reduced-motion desactiva los loops decorativos
 *  - el glass del newsroom (backdrop-filter) es la UNICA excepcion intencional */

.tc-login {
  --tc-font-sans: "Inter";
  --tc-sans: var(--tc-font-sans), -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Nova design tokens (inline, sin depender de import global). */
  --white: #FFFFFF;
  --gray-10: #FAFAFA; --gray-20: #F6F6F6; --gray-30: #E8E8E8; --gray-40: #C6C6C6;
  --gray-50: #AEAEAE; --gray-60: #888888; --gray-70: #565656; --gray-80: #2C2C2C;
  --primary-70: #003670; --primary-60: #00509D; --primary-50: #006CC8; --primary-40: #1C8AEE;
  --fg-1: #2C2C2C; --fg-2: #2C2C2C;
  --success-50: #1BCC63;
  --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px;
  --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --shadow-card: 0 1px 2px rgba(4,13,22,.06), 0 4px 12px -2px rgba(4,13,22,.06);
  --shadow-modal: 0 16px 48px -8px rgba(4,13,22,.18);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* tc-2.0: overlay fijo a viewport completo sobre el chrome de base.html. */
  position: fixed;
  inset: 0;
  z-index: 1000;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  font-family: var(--tc-sans);
}
.tc-login * { box-sizing: border-box; }

/* ───────── theme variables ───────── */
.tc-login.theme-dark {
  color: #EAF1FB;
  background: radial-gradient(115% 95% at 50% 40%, #0A3A72 0%, #021A40 44%, #00112b 100%);
  --tc-scrim: none;
  --tc-dots: rgba(120,170,255,0.10);
  --tc-land-fill: rgba(123,176,255,0.055); --tc-land-stroke: rgba(123,176,255,0.17);
  --tc-arc: rgba(95,170,255,0.62);
  --tc-mklbl-fill: #D3E0F5; --tc-mklbl-stroke: rgba(0,14,34,0.7); --tc-mklbl-weight: 500;
  --tc-tele-num: #fff; --tc-tele-cap: #9FB6DC; --tc-tele-stat: #fff; --tc-tele-statlbl: #8FA6CC;
  --tc-link: #A7BBDA; --tc-link-hover-bg: rgba(255,255,255,0.06); --tc-link-hover-color: #fff;
  --tc-cta-color: #fff; --tc-cta-border: rgba(255,255,255,0.22); --tc-cta-hover-bg: rgba(255,255,255,0.07);
  --tc-card-shadow: var(--shadow-modal);
  --tc-pill-bg: rgba(8,26,58,0.92); --tc-pill-border: rgba(120,170,255,0.18);
  --tc-pill-shadow: 0 12px 30px -10px rgba(0,0,0,0.55); --tc-pill-title: #EAF1FB; --tc-pill-sub: #8FA6CC;
  /* newsroom (dark glass) */
  --tc-nr-width: 474px; --tc-nr-right: 44px; --tc-nr-bottom: 40px;
  --tc-nr-cover-h: 204px; --tc-nr-stack-h: 392px; --tc-nr-stack-h-nocover: 152px;
  --tc-nr-title-size: 17.5px; --tc-nr-body-pad: 18px 20px;
  --tc-nr-watermark-size: 178px; --tc-nr-watermark-op: 0.24; --tc-nr-dotgrid-op: 0.20;
  --tc-nr-eyebrow: #7FB0F2; --tc-nr-eyebrow-size: 11.5px;
  --tc-nr-all: #A7BBDA; --tc-nr-all-hover: #fff;
  --tc-nr-card-bg: rgba(9,24,52,0.60); --tc-nr-card-border: rgba(120,170,255,0.22);
  --tc-nr-card-radius: var(--radius-xl); --tc-nr-card-shadow: 0 26px 64px -20px rgba(0,0,0,0.7);
  --tc-nr-card-backdrop: blur(16px) saturate(140%);
  --tc-nr-cover-bg: transparent; --tc-nr-cover-border: rgba(120,170,255,0.16);
  --tc-nr-title: #EAF1FB; --tc-nr-date: #9FB6DC; --tc-nr-more: #7FB0F2;
  --tc-nr-dot: rgba(255,255,255,0.24); --tc-nr-dot-on: #6FA8F5;
  --tc-nr-prog-track: rgba(255,255,255,0.10); --tc-nr-prog-fill: #6FA8F5;
}

/* ───────── live network ───────── */
.tc-login .net { position: absolute; inset: 0; z-index: 1; }
.tc-login .dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--tc-dots) 1.2px, transparent 1.4px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(72% 70% at 50% 47%, #000 22%, transparent 80%);
          mask-image: radial-gradient(72% 70% at 50% 47%, #000 22%, transparent 80%);
}
.tc-login .map-stage { position: absolute; left: 50%; top: 51%; transform: translate(-50%,-50%);
  height: min(90vh, 820px); aspect-ratio: 214 / 285; z-index: 0; pointer-events: none; }
.tc-login .map-stage svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tc-login .map-land path { fill: var(--tc-land-fill); stroke: var(--tc-land-stroke); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
/* perf: arcos punteados estaticos — sin re-raster por frame ni stroke-dashoffset. */
.tc-login .map-arc { fill: none; stroke: var(--tc-arc); stroke-width: 1.3; vector-effect: non-scaling-stroke;
  stroke-linecap: round; stroke-dasharray: 1.4 7; }
/* perf: sin drop-shadow filter — halo blanco separa el dot del mapa. */
.tc-login .mk-dot { stroke: #ffffff; stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.tc-login .mk-ring { transform-box: fill-box; transform-origin: center;
  animation: tcl-mkpulse 30s var(--ease-standard) infinite; }
@keyframes tcl-mkpulse {
  0% { transform: scale(1); opacity: .9; }
  6% { transform: scale(4.2); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}
.tc-login .mk-lbl { fill: var(--tc-mklbl-fill); font-family: var(--tc-sans); font-size: 4.6px; font-weight: var(--tc-mklbl-weight);
  paint-order: stroke; stroke: var(--tc-mklbl-stroke); stroke-width: 1.1px; }

/* ───────── floating insight pills ───────── */
.tc-login .pill {
  position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px;
  background: var(--tc-pill-bg); border: 1px solid var(--tc-pill-border);
  border-radius: var(--radius-lg); padding: 11px 15px 11px 12px;
  box-shadow: var(--tc-pill-shadow); max-width: 290px;
  animation: tcl-float 10s ease-in-out infinite;
  transition: opacity .6s var(--ease-standard);
}
@keyframes tcl-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.tc-login .pill .ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.tc-login .pill .ic svg { width: 17px; height: 17px; }
.tc-login .pill .t { display: block; font-size: 13px; font-weight: var(--fw-semibold); color: var(--tc-pill-title); line-height: 1.3; }
.tc-login .pill .s { display: block; font-size: 11.5px; color: var(--tc-pill-sub); margin-top: 2px; }

/* ───────── live telemetry (top-right) ───────── */
.tc-login .telemetry { position: absolute; top: 92px; right: 56px; z-index: 5; text-align: right; }
.tc-login .telemetry .big { font-size: 46px; font-weight: var(--fw-medium); letter-spacing: -0.02em; color: var(--tc-tele-num);
  display: flex; align-items: baseline; gap: 8px; justify-content: flex-end; }
.tc-login .telemetry .big .live { width: 9px; height: 9px; border-radius: 50%; background: var(--success-50);
  box-shadow: 0 0 0 0 rgba(27,204,99,.6); animation: tcl-lp 4.5s infinite; align-self: center; }
@keyframes tcl-lp { 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.tc-login .telemetry .cap { font-size: 13.5px; color: var(--tc-tele-cap); margin-top: 4px; }
.tc-login .telemetry .row { display: flex; gap: 22px; justify-content: flex-end; margin-top: 16px; }
.tc-login .telemetry .row .n { font-size: 19px; font-weight: var(--fw-semibold); color: var(--tc-tele-stat); }
.tc-login .telemetry .row .l { font-size: 11.5px; color: var(--tc-tele-statlbl); }

/* ───────── top bar ───────── */
.tc-login .top { position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; padding: 26px 40px; }
.tc-login .top img { height: 55px; }
.tc-login .top .links { display: flex; align-items: center; gap: 6px; }
.tc-login .top .links a { font-size: 14px; color: var(--tc-link); padding: 8px 13px; border-radius: 8px; cursor: pointer; text-decoration: none; transition: background .18s, color .18s; }
.tc-login .top .links a:hover { background: var(--tc-link-hover-bg); color: var(--tc-link-hover-color); }
.tc-login .top .cta { font-size: 14px; font-weight: var(--fw-medium); color: var(--tc-cta-color); padding: 8px 16px;
  border: 1px solid var(--tc-cta-border); border-radius: 8px; display: inline-flex; gap: 7px; align-items: center; cursor: pointer; text-decoration: none; transition: background .18s; }
.tc-login .top .cta:hover { background: var(--tc-cta-hover-bg); text-decoration: none; }

/* ───────── left scrim + sign-in card ───────── */
.tc-login .scrim-l { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--tc-scrim); }
.tc-login .signin { position: absolute; z-index: 8; left: max(56px, 6vw); top: 50%; transform: translateY(-50%);
  width: 396px; max-width: calc(100vw - 80px);
  background: var(--white); border: 1px solid var(--gray-30); border-radius: var(--radius-xl);
  box-shadow: var(--tc-card-shadow); padding: 34px 36px 30px; }
.tc-login .signin h1 { font-size: clamp(25px, 3vw, 33px); line-height: 1.12; font-weight: var(--fw-medium); letter-spacing: -0.02em; margin: 0; color: var(--primary-70); }
.tc-login.hl-gradient .signin h1 { background: linear-gradient(118deg, #00509D 0%, #006CC8 34%, #008BA1 78%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.tc-login .signin .sub { font-size: 14.5px; line-height: 1.5; color: var(--gray-60); margin: 11px 0 0; max-width: 330px; }

.tc-login form { margin-top: 26px; display: flex; flex-direction: column; gap: 16px; }
.tc-login .field label { font-size: 13.5px; font-weight: var(--fw-medium); color: var(--fg-2); display: block; margin-bottom: 7px; }
.tc-login .iw { position: relative; display: flex; align-items: center; }
.tc-login .iw input { width: 100%; height: 48px; padding: 0 14px; font-family: var(--tc-sans); font-size: 15px; color: var(--fg-1);
  background: var(--white); border: 1px solid var(--gray-30); border-radius: 10px; outline: none;
  transition: border-color .18s, box-shadow .18s; }
.tc-login .iw input::placeholder { color: var(--gray-50); }
.tc-login .iw input:focus { border-color: var(--primary-50); box-shadow: 0 0 0 3px rgba(0,108,200,0.15); }
.tc-login .iw .eye { position: absolute; right: 10px; background: none; border: 0; color: var(--gray-50); cursor: pointer; padding: 6px; display: inline-flex; }
.tc-login .iw .eye:hover { color: var(--gray-70); }
.tc-login .forgot { align-self: flex-end; font-size: 13.5px; color: var(--primary-50); cursor: pointer; background: none; border: 0; padding: 0; font-family: var(--tc-sans); text-decoration: none; }
.tc-login .forgot:hover { text-decoration: underline; }
.tc-login .submit { height: 50px; border: 0; border-radius: 10px; background: var(--primary-50); color: #fff;
  font-family: var(--tc-sans); font-size: 16px; font-weight: var(--fw-medium); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; transition: background .18s, transform .12s; }
.tc-login .submit:hover { background: var(--primary-60); }
.tc-login .submit:active { transform: translateY(1px); }
.tc-login .oauth-sep { display: flex; align-items: center; gap: 14px; margin: 6px 0 2px; color: var(--gray-50); font-size: 12px; }
.tc-login .oauth-sep::before, .tc-login .oauth-sep::after { content: ""; flex: 1; height: 1px; background: var(--gray-30); }
.tc-login .btn-sso { height: 50px; border: 1px solid var(--gray-30); border-radius: 10px; background: var(--white);
  color: var(--fg-1); font-family: var(--tc-sans); font-size: 15px; font-weight: var(--fw-medium); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 11px; transition: background .18s, border-color .18s; text-decoration: none; }
.tc-login .btn-sso:hover { background: var(--gray-10); border-color: var(--gray-40); }
.tc-login .btn-sso:disabled { opacity: 0.6; cursor: default; }
.tc-login .btn-sso svg { width: 18px; height: 18px; }

.tc-login .channels { margin-top: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 12.5px; color: var(--gray-60); }
.tc-login .chip-row { display: flex; gap: 10px; flex-wrap: wrap; }
.tc-login .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  background: var(--gray-10); border: 1px solid var(--gray-30); color: var(--fg-2); font-weight: var(--fw-medium); }
.tc-login .chip i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.tc-login .newhere { margin-top: 20px; font-size: 13.5px; color: var(--gray-60); }
.tc-login .newhere a { color: var(--primary-50); font-weight: var(--fw-medium); cursor: pointer; text-decoration: none; }
.tc-login .newhere a:hover { text-decoration: underline; }

/* 2FA: ayuda de reenvio bajo el campo de codigo. */
.tc-login .twofa-help { font-size: 13px; color: var(--gray-60); margin-top: 2px; }
.tc-login .twofa-help a { color: var(--primary-50); text-decoration: none; }
.tc-login .twofa-help a:hover { text-decoration: underline; }

/* ───────── newsroom — marketing content carousel ───────── */
.tc-login .newsroom { position: absolute; right: var(--tc-nr-right); bottom: var(--tc-nr-bottom); z-index: 9; width: var(--tc-nr-width); max-width: calc(100vw - 80px); }
.tc-login .nr-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 12px; }
.tc-login .nr-eyebrow { font-size: var(--tc-nr-eyebrow-size); font-weight: var(--fw-bold); letter-spacing: .14em; text-transform: uppercase; color: var(--tc-nr-eyebrow); display: flex; align-items: center; gap: 8px; }
.tc-login .nr-eyebrow .lp { width: 7px; height: 7px; border-radius: 50%; background: var(--success-50); box-shadow: 0 0 0 0 rgba(27,204,99,.6); animation: tcl-lp 4.5s infinite; }
.tc-login .nr-all { font-size: 12.5px; color: var(--tc-nr-all); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.tc-login .nr-all:hover { color: var(--tc-nr-all-hover); }

.tc-login .nr-stack { position: relative; height: var(--tc-nr-stack-h-nocover); }
.tc-login .newsroom.covers .nr-stack { height: var(--tc-nr-stack-h); }
.tc-login .nr-card { position: absolute; inset: 0; background: var(--tc-nr-card-bg); border: 1px solid var(--tc-nr-card-border);
  border-radius: var(--tc-nr-card-radius); box-shadow: var(--tc-nr-card-shadow); overflow: hidden;
  -webkit-backdrop-filter: var(--tc-nr-card-backdrop); backdrop-filter: var(--tc-nr-card-backdrop);
  opacity: 0; visibility: hidden; transform: translateY(7px);
  transition: opacity .5s var(--ease-standard), transform .5s var(--ease-standard); }
.tc-login .nr-card.active { opacity: 1; visibility: visible; transform: none; }
.tc-login .nr-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }
.tc-login .nr-cover { position: relative; height: 0; overflow: hidden; display: none; background: var(--tc-nr-cover-bg);
  border-bottom: 1px solid var(--tc-nr-cover-border); }
.tc-login .newsroom.covers .nr-cover { display: block; height: var(--tc-nr-cover-h); }
.tc-login .nr-cover.has-img { background-size: cover; background-position: center; background-repeat: no-repeat; }
.tc-login .nr-cover .nr-watermark { position: absolute; right: -14px; bottom: -22px; opacity: var(--tc-nr-watermark-op); }
.tc-login .nr-cover .nr-watermark svg { width: var(--tc-nr-watermark-size); height: var(--tc-nr-watermark-size); }
.tc-login .nr-cover .nr-dotgrid { position: absolute; inset: 0;
  background-image: radial-gradient(currentColor 1px, transparent 1.3px); background-size: 16px 16px; opacity: var(--tc-nr-dotgrid-op); }
.tc-login .nr-body { padding: var(--tc-nr-body-pad); display: flex; flex-direction: column; flex: 1; }
.tc-login .nr-meta { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.tc-login .nr-src { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: var(--fw-semibold);
  padding: 3px 9px; border-radius: var(--radius-pill); }
.tc-login .nr-src svg { width: 13px; height: 13px; }
.tc-login .nr-date { font-size: 12px; color: var(--tc-nr-date); }
.tc-login .nr-title { font-size: var(--tc-nr-title-size); line-height: 1.32; font-weight: var(--fw-medium); color: var(--tc-nr-title); margin: 0; text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tc-login .nr-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 13px; }
.tc-login .nr-more { font-size: 13.5px; font-weight: var(--fw-medium); color: var(--tc-nr-more); display: inline-flex; align-items: center; gap: 5px; transition: gap .18s var(--ease-standard); }
.tc-login .nr-card:hover .nr-more { gap: 9px; }
.tc-login .nr-dots { display: flex; gap: 6px; }
.tc-login .nr-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tc-nr-dot); cursor: pointer; padding: 0; border: 0; transition: width .2s var(--ease-standard), background .2s; }
.tc-login .nr-dot.on { background: var(--tc-nr-dot-on); width: 17px; border-radius: 3px; }
.tc-login .nr-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--tc-nr-prog-track); overflow: hidden; }
.tc-login .nr-progress i { display: block; height: 100%; background: var(--tc-nr-prog-fill); transform-origin: left; transform: scaleX(0); }
.tc-login .nr-card.active .nr-progress i { animation: tcl-nrfill var(--nr-dur, 7s) linear forwards; }
.tc-login .newsroom.paused .nr-card.active .nr-progress i { animation-play-state: paused; }
@keyframes tcl-nrfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* perf: congelar todos los loops decorativos cuando el tab esta en background. */
.tc-login.anim-paused, .tc-login.anim-paused * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .tc-login .mk-ring, .tc-login .pill, .tc-login .telemetry .big .live,
  .tc-login .nr-eyebrow .lp, .tc-login .nr-card.active .nr-progress i { animation: none !important; }
}

/* ───────── responsive ───────── */
@media (max-width: 1180px) {
  .tc-login .pills { display: none; }
}
@media (max-width: 1100px) {
  .tc-login .newsroom { width: 344px; right: 28px; bottom: 28px; }
  .tc-login .newsroom.covers .nr-cover { height: 152px; }
  .tc-login .newsroom.covers .nr-stack { height: 326px; }
  .tc-login .nr-title { font-size: 16px; }
}
@media (max-width: 880px) {
  .tc-login { height: auto; min-height: 100vh; padding-bottom: 48px; overflow-y: auto; }
  .tc-login .scrim-l { background: none; }
  .tc-login .signin { position: relative; z-index: 8; left: auto; right: auto; top: auto; transform: none;
    margin: 92px auto 0; width: calc(100vw - 40px); max-width: 392px; }
  .tc-login .telemetry, .tc-login .top .links { display: none; }
  .tc-login .map-stage { position: fixed; top: auto; bottom: -6%; left: 50%; transform: translateX(-50%); height: 52vh; opacity: 0.55; }
  .tc-login .newsroom { position: relative; right: auto; bottom: auto; left: auto; margin: 26px auto 0; width: calc(100vw - 40px); max-width: 392px; }
}