/* ═══════════════════════════════════════════════════════════════════════════
   NovaCore POS Desktop — Acceso y alta
   Composición a dos paneles: a la izquierda el formulario, a la derecha una
   pieza de marca. En un monitor ancho, un formulario centrado y solo deja
   dos tercios de pantalla vacíos.

   NOTA sobre el CDN de Hostinger: si una URL versionada (?v=hash) llega a
   pedirse ANTES de que el archivo nuevo termine de subirse, el CDN cachea esa
   respuesta vieja bajo esa URL exacta con `immutable, max-age=1 año` — y la
   sigue sirviendo así aunque el origen ya esté corregido, porque para el CDN
   esa URL "nunca cambia" por definición. La única salida es una URL que el
   CDN no haya visto nunca: cualquier cambio real de contenido (como este
   comentario) mueve el hash y fuerza justo eso.
   ═══════════════════════════════════════════════════════════════════════════ */

body.auth {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: auto;
}

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

/* ── Panel del formulario ─────────────────────────────────────────────────── */
.auth-form-side {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-8) var(--s-10);
  background: var(--bg-surface);
  overflow-y: auto;
  overflow-x: hidden;
}
/* Un toque de calidez detrás del formulario: sin esto el panel es blanco
   plano y se siente en blanco (nunca del brillo del logo/CTA de al lado). */
.auth-form-side::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -20%; left: -10%;
  width: 60%; height: 60%;
  background: radial-gradient(circle, var(--brand) 0%, transparent 70%);
  opacity: 0.05;
  pointer-events: none;
}
[data-theme="dark"] .auth-form-side::before { opacity: 0.08; }

.auth-topbar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.auth-logo { display: inline-flex; align-items: center; gap: var(--s-3); }
.auth-logo strong { font-size: var(--fs-lg); font-weight: var(--fw-semi); letter-spacing: var(--ls-tight); }
.auth-logo img {
  filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--brand) 45%, transparent));
  transition: transform var(--t-base) var(--ease-out);
}
.auth-logo:hover img { transform: scale(1.05) rotate(-2deg); }

.auth-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  margin: auto;
  padding: var(--s-8) 0;
  animation: rise var(--t-slow) var(--ease-out);
}

.auth-head { margin-bottom: var(--s-6); }
.auth-head h1 {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-tight);
}
.auth-head p { margin-top: var(--s-2); color: var(--fg-muted); font-size: var(--fs-sm); }

.auth-form { display: flex; flex-direction: column; gap: var(--s-4); }
.auth-form .input { height: 42px; }

/* El CTA principal del acceso se gana un degradado propio (el resto de la
   app usa `.btn-primary` liso a propósito, para no competir con el color de
   estado de las filas de una tabla; aquí, en cambio, es la única acción de
   la pantalla y puede sentirse más "de producto"). */
.auth-form .btn-primary {
  background: linear-gradient(135deg, var(--b-500, #f97316), var(--brand));
  box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--brand) 55%, transparent);
  border: none;
}
.auth-form .btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--b-500, #f97316), var(--brand-hover));
  box-shadow: 0 10px 26px -6px color-mix(in srgb, var(--brand) 65%, transparent);
  transform: translateY(-1px);
}
.auth-form .btn-primary:active:not(:disabled) { transform: translateY(0); }

.auth-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.auth-link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--brand);
  transition: color var(--t-fast) var(--ease);
}
.auth-link:hover { color: var(--brand-hover); text-decoration: underline; }

.auth-foot {
  margin-top: var(--s-6);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--fg-subtle);
}

/* Indicador de pasos del alta. */
.steps { display: flex; gap: var(--s-2); margin-bottom: var(--s-6); }
.step-seg {
  flex: 1;
  height: 3px;
  border-radius: var(--r-full);
  background: var(--border);
  overflow: hidden;
}
.step-seg > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brand);
  transition: width var(--t-slow) var(--ease-out);
}
.step-seg.done > i, .step-seg.current > i { width: 100%; }
.step-seg.current > i { background: var(--brand); }

.step-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: var(--s-2);
}

/* Medidor de robustez de la contraseña. */
.pw-meter { display: flex; gap: 4px; margin-top: 6px; }
.pw-meter i {
  flex: 1;
  height: 3px;
  border-radius: var(--r-full);
  background: var(--border);
  transition: background-color var(--t-base) var(--ease);
}
.pw-meter.l1 i:nth-child(1) { background: var(--dan); }
.pw-meter.l2 i:nth-child(-n+2) { background: var(--warn); }
.pw-meter.l3 i:nth-child(-n+3) { background: var(--info); }
.pw-meter.l4 i { background: var(--ok); }

/* ── Acceso social (Google / Facebook) ────────────────────────────────────
   Separador con leyenda + dos botones neutros con el logotipo de marca. Se
   apoyan en los tokens semánticos, así que responden al tema claro/oscuro. */
.auth-sep {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-5) 0;
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
}
.auth-sep::before,
.auth-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-social { display: flex; gap: var(--s-3); }

.btn-social {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 44px;
  padding: 0 var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  color: var(--fg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.btn-social:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.btn-social:active { transform: translateY(0); box-shadow: none; }
.btn-social:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.btn-social .soc-ico { display: inline-flex; }
.btn-social .soc-ico svg { display: block; }

/* Sello de estado de la página de aterrizaje del login social (oauth.html). */
.oauth-badge {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-lg);
  background: var(--brand-soft);
  color: var(--brand);
}
.oauth-badge.oauth-brand { background: var(--brand-soft); color: var(--brand); }
.oauth-badge.oauth-ok    { background: var(--ok-soft);    color: var(--ok); }
.oauth-badge.oauth-dan   { background: var(--dan-soft);   color: var(--dan); }

/* ── Panel de marca ───────────────────────────────────────────────────────
   Fondo compuesto solo con degradados: cero imágenes, cero peticiones, y
   escala perfecto en cualquier resolución. */
.auth-brand-side {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--s-16) var(--s-12);
  overflow: hidden;
  color: #fff;
  /* Naranja de marca fundiéndose en el marrón oscuro de la APK. */
  background:
    radial-gradient(120% 90% at 12% 8%, rgba(249, 115, 22, 0.55) 0%, transparent 55%),
    radial-gradient(100% 80% at 92% 96%, rgba(234, 88, 12, 0.4) 0%, transparent 52%),
    linear-gradient(150deg, #7c2d12 0%, #431a09 45%, #1c1917 100%);
}

/* Retícula tenue: da profundidad sin competir con el texto. */
.auth-brand-side::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(75% 65% at 50% 45%, #000 0%, transparent 100%);
}

.brand-content { position: relative; max-width: 480px; animation: rise-lg 0.7s var(--ease-out) both; }
.brand-content .eyebrow { color: rgba(255, 255, 255, 0.6); }
.brand-content h2 {
  margin-top: var(--s-3);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-semi);
  line-height: 1.15;
  letter-spacing: var(--ls-tight);
}
.brand-content > p {
  margin-top: var(--s-4);
  font-size: var(--fs-lg);
  line-height: var(--lh-base);
  color: rgba(255, 255, 255, 0.72);
}

.brand-points { margin-top: var(--s-8); display: flex; flex-direction: column; gap: var(--s-4); }
.brand-point { display: flex; align-items: flex-start; gap: var(--s-3); }
.brand-point .bp-ico {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.brand-point strong { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.brand-point span { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.6); }

/* Tarjeta flotante con una cifra: transmite «esto es un producto real» sin
   fotos de interfaz falsas. */
.brand-card {
  position: relative;
  margin-top: var(--s-10);
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(12px);
  animation: rise-lg 0.9s var(--ease-out) both;
}
.brand-card .bc-label {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.brand-card .bc-value {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semi);
  font-variant-numeric: tabular-nums;
  margin-top: var(--s-1);
}
.brand-card .bc-bars { display: flex; align-items: flex-end; gap: 5px; height: 46px; margin-top: var(--s-4); }
.brand-card .bc-bars i {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.25));
  animation: grow-bar 0.9s var(--ease-out) both;
}
@keyframes grow-bar { from { transform: scaleY(0); transform-origin: bottom; } to { transform: none; } }

/* ── Respuesta a pantallas menores ────────────────────────────────────────
   Por debajo de 1024px el panel de marca deja de aportar y se retira: el
   formulario ocupa todo y se lee mejor. */
@media (max-width: 1024px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-brand-side { display: none; }
  .auth-form-side { padding: var(--s-6); }
}

@media (max-width: 480px) {
  .auth-form-side { padding: var(--s-4) var(--s-4) var(--s-6); }
  .auth-head h1 { font-size: var(--fs-2xl); }
  /* El formulario no necesita tanto espacio vertical en móvil. */
  .auth-box { padding: var(--s-5) 0; }
  /* Los botones de formulario se vuelven táctiles en móvil. */
  .auth-form .input { height: 48px; font-size: var(--fs-md); }
  .auth-form .btn-primary { height: 52px; font-size: var(--fs-md); border-radius: var(--r-lg); }
  .auth-row { flex-direction: column; align-items: flex-start; gap: var(--s-2); }

  /* ── Acceso social en móvil ─────────────────────────────────────────────
     En escritorio, dos botones lado a lado caben con holgura. En un
     teléfono esa misma pareja se aplasta a la mitad del ancho y se ve como
     un elemento menor — justo debajo de un "Iniciar sesión" de 52px que sí
     ocupa todo el ancho. Se iguala la proporción: un botón por fila, del
     mismo peso visual que el primario (un punto menos alto, para que la
     jerarquía —contraseña primero, social después— se siga notando). */
  .auth-social { flex-direction: column; gap: var(--s-3); }
  .btn-social {
    /* En fila, `flex: 1` reparte el ANCHO entre los dos botones — pero al
       apilarlos en columna, ese mismo `flex: 1` pasa a repartir el ALTO del
       contenedor entre ambos (la mitad cada uno), aplastándolos a ~22px pase
       lo que diga `height`. `flex: none` los devuelve a su alto natural. */
    flex: none;
    height: 50px;
    gap: var(--s-3);
    padding: 0 var(--s-4);
    border-radius: var(--r-lg);
    font-size: var(--fs-md);
    box-shadow: var(--shadow-xs);
  }
  .btn-social .soc-ico svg { width: 20px; height: 20px; }
  /* La pantalla táctil no dispara :hover — sin esto, tocar el botón no daba
     ninguna señal hasta que la navegación ya había arrancado. */
  .btn-social:active {
    transform: scale(0.97);
    background: var(--bg-hover);
    border-color: var(--border-strong);
    box-shadow: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Centro de instalación (apk.html)
   Lista de plataformas, pensada para crecer: hoy una fila activa (Android),
   mañana las que se agreguen en js/pages/apk.js. Una tarjeta "próxima" usa el
   mismo molde que una disponible —mismo icono, mismo texto— solo que atenuada
   y sin botón, para que sumar una plataforma real el día de mañana no
   requiera inventar un estado visual nuevo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* apk.html no trae panel de marca (.auth-brand-side): es una sola tarea
   centrada, no una decisión que valga media pantalla de argumento de venta.
   Sin esto, `.auth-layout` seguiría reservando su segunda columna aunque esté
   vacía, y el formulario quedaría descentrado a la izquierda en escritorio. */
.installer-layout { grid-template-columns: 1fr; }
.installer-layout .auth-form-side { align-items: center; }

.installer-head { text-align: center; }
.installer-badge-app {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin: 0 auto var(--s-5);
  border-radius: var(--r-xl);
  background: linear-gradient(155deg, var(--brand-soft), transparent);
  border: 1px solid var(--border);
  color: var(--brand);
}
.installer-head .eyebrow { display: flex; justify-content: center; }
.installer-head h1 { margin-top: var(--s-1); }
.installer-head > p:last-child {
  margin: var(--s-3) auto 0;
  max-width: 36ch;
  color: var(--fg-muted);
}

.installer-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-top: var(--s-7);
}

.installer-card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.installer-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  color: var(--fg-subtle);
}
.installer-icon svg { width: 22px; height: 22px; display: block; }

.installer-badge {
  flex: none;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-subtle);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  padding: 4px var(--s-3);
  border-radius: var(--r-full);
}

/* ── La plataforma disponible: "vitrina" arriba + su propia acción abajo ────
   Se gana su color de marca (--marca, puesto inline desde apk.js) en el
   borde, el icono y el botón — es la única a la que se le promete algo. */
.installer-card.is-disponible {
  border-color: color-mix(in srgb, var(--marca, var(--brand)) 30%, var(--border));
}
.installer-card.is-disponible:hover {
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--marca, var(--brand)) 55%, var(--border));
}
.installer-card.is-disponible .installer-icon {
  background: color-mix(in srgb, var(--marca, var(--brand)) 14%, transparent);
  color: var(--marca, var(--brand));
}

.installer-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-1);
  padding: var(--s-6) var(--s-5) var(--s-5);
  background: color-mix(in srgb, var(--marca, var(--brand)) 6%, transparent);
}
.installer-icon-lg { width: 64px; height: 64px; border-radius: var(--r-lg); }
.installer-icon-lg svg { width: 34px; height: 34px; }

.installer-name-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.installer-name-row strong { font-size: var(--fs-lg); font-weight: var(--fw-semi); }
.installer-version {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  color: var(--fg-subtle);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  padding: 2px var(--s-2);
  border-radius: var(--r-full);
}
.installer-specs { font-size: var(--fs-xs); color: var(--fg-subtle); }

.installer-action { padding: var(--s-5); border-top: 1px solid var(--border); }
.installer-action-titulo {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--fg);
  text-align: center;
  margin-bottom: var(--s-3);
}
.installer-download {
  width: 100%;
  height: 48px;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  background: var(--marca, var(--brand));
  border-color: transparent;
  color: #fff;
}
.installer-download:hover { background: color-mix(in srgb, var(--marca, var(--brand)) 88%, black); }
.installer-cta-ico { display: inline-flex; }
.installer-cta-ico svg { display: block; }
.installer-action-nota {
  margin-top: var(--s-3);
  font-size: var(--fs-2xs);
  line-height: 1.5;
  color: var(--fg-faint);
  text-align: center;
}

/* ── Las que aún no existen: fila compacta, sin prometer una fecha ── */
.installer-card.is-proximamente {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  opacity: 0.7;
}
.installer-card.is-proximamente:hover { opacity: 0.9; }

.installer-info { flex: 1; min-width: 0; }
.installer-info .installer-name-row { justify-content: flex-start; margin-top: 0; }
.installer-info strong { font-size: var(--fs-md); font-weight: var(--fw-semi); }
.installer-subtitulo { font-size: var(--fs-xs); color: var(--fg-subtle); }
.installer-info .installer-badge { margin-left: auto; }
.installer-detalle { margin-top: 2px; font-size: var(--fs-xs); color: var(--fg-subtle); }

.installer-nota {
  margin-top: var(--s-7);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
}
.installer-nota a { color: var(--brand); font-weight: var(--fw-medium); text-decoration: none; }
.installer-nota a:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .installer-top { padding: var(--s-5) var(--s-4) var(--s-4); }
  .installer-action { padding: var(--s-4); }
  .installer-card.is-proximamente { padding: var(--s-3) var(--s-4); }
}

@media (max-width: 380px) {
  .auth-form-side { padding: var(--s-3) var(--s-3) var(--s-5); }
}