/* =====================================================================
   Login — panel de vulnerabilidades
   Sin fuentes externas: la CSP de la app solo permite recursos propios.
   ===================================================================== */

:root {
  --ink:        #0f1b2a;
  --ink-soft:   #17273a;
  --ink-line:   #24384f;
  --paper:      #f5f7fa;
  --white:      #ffffff;
  --accent:     #e4572e;
  --accent-dk:  #c1441f;
  --gray:       #55636f;
  --gray-soft:  #8b98a5;
  --ice:        #a9bacb;

  --sev-critica: #b3261e;
  --sev-alta:    #e4572e;
  --sev-media:   #c98a00;
  --sev-baja:    #3a7ca5;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
}

.shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}

/* ---------------------------------------------------------------- side */
.side {
  background: var(--ink);
  color: var(--white);
  padding: 3.5rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  position: relative;
  overflow: hidden;
}

.side::after {                       /* halo tenue, sin gradiente de plantilla */
  content: "";
  position: absolute;
  width: 30rem; height: 30rem;
  right: -12rem; top: -8rem;
  border-radius: 50%;
  background: var(--ink-soft);
  opacity: .75;
}

.side > * { position: relative; z-index: 1; }

.side__eyebrow {
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ice);
}

.side__title {
  margin: 0;
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.015em;
}

/* La lista imita una salida de escáner: es el vocabulario del producto. */
.side__scan { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }

.side__scan li {
  display: grid;
  grid-template-columns: .5rem auto 1fr;
  align-items: center;
  gap: .75rem;
  padding: .5rem .85rem;
  background: rgba(255, 255, 255, .045);
  border-left: 2px solid var(--ink-line);
  font-size: .82rem;
}

.side__scan code { font-family: var(--mono); color: var(--white); }
.side__scan em    { font-style: normal; color: var(--gray-soft); }

.sev { width: .5rem; height: .5rem; border-radius: 50%; display: block; }
.sev--critica { background: var(--sev-critica); }
.sev--alta    { background: var(--sev-alta); }
.sev--media   { background: var(--sev-media); }
.sev--baja    { background: var(--sev-baja); }

.side__foot { margin: 0; font-size: .78rem; color: var(--gray-soft); }

/* --------------------------------------------------------------- panel */
.panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
}

.card {
  width: 100%;
  max-width: 24rem;
  background: var(--white);
  border: 1px solid #e2e8ef;
  border-radius: 10px;
  padding: 2.25rem 2rem;
  box-shadow: 0 18px 40px -28px rgba(15, 27, 42, .55);
}

.card__title { margin: 0 0 .35rem; font-size: 1.4rem; letter-spacing: -.01em; }
.card__sub   { margin: 0 0 1.75rem; font-size: .88rem; color: var(--gray); }

.field { display: block; margin-bottom: 1.1rem; }

.field__label {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: .4rem;
}

.field input {
  width: 100%;
  padding: .7rem .8rem;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: #fbfcfd;
  border: 1px solid #cfd8e3;
  border-radius: 6px;
}

.field input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  background: var(--white);
}

.error {
  margin: 0 0 1rem;
  padding: .6rem .75rem;
  font-size: .84rem;
  color: #7a1f16;
  background: #fdecea;
  border-left: 3px solid var(--sev-critica);
  border-radius: 4px;
}

.btn {
  width: 100%;
  padding: .75rem 1rem;
  font: inherit;
  font-weight: 600;
  color: var(--white);
  background: var(--accent);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
}

.btn:hover:not(:disabled) { background: var(--accent-dk); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn:disabled { opacity: .65; cursor: progress; }

.btn__spin { display: none; width: 1rem; height: 1rem; border: 2px solid rgba(255,255,255,.45);
             border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.btn.is-busy .btn__spin { display: block; }

@keyframes spin { to { transform: rotate(360deg); } }

.card__foot { margin: 1.5rem 0 0; font-size: .78rem; color: var(--gray-soft); text-align: center; }

/* ---------------------------------------------------------- responsive */
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side  { padding: 2.5rem 1.5rem; gap: 1.5rem; }
  .side__scan li:nth-child(n+3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .btn__spin { animation-duration: 2s; }
  * { transition: none !important; }
}

/* ------------------------------------------------------------------ pie */
.pie {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1.1rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
}
.pie__marcas { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; justify-content: center; }
.pie__m { font-size: .82rem; color: var(--gray); }
.pie__m b { color: var(--ink); }
.pie__sep { width: 1px; height: .9rem; background: #cfd8e3; }
.pie__txt { margin: 0; font-size: .72rem; color: var(--gray-soft); }

/* en la mitad oscura del login el pie tiene que leerse claro */
@media (min-width: 861px) {
  .pie { left: 50%; }
}