/* ==========================================================================
   KVtools · Estilos propios del PORTAL del cliente
   Construye SOBRE styles.css (mismas variables de marca y componentes base).
   Solo CSS plano, sin frameworks. Marca: naranja #ff6a1a · azul #0947b3.

   Pantalla de acceso centrada, en tres pasos:
     1) Login   2) Código de un solo uso   3) Acceso autorizado (ticket).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Lienzo del portal (centrado vertical y horizontal)
   -------------------------------------------------------------------------- */
/* CENTRADO QUE NO RECORTA.
   Centrar con flex tiene una trampa conocida: cuando el contenido es MAS ANCHO (o
   mas alto) que el hueco, el sobrante se reparte por igual a los dos lados, y el
   trozo que se va por la IZQUIERDA queda INALCANZABLE — la barra de desplazamiento
   solo llega hasta el borde izquierdo del lienzo, no mas alla. Se veia en
   checkout.html con el movil al 150 % de zoom (250 px de maquetacion): la columna
   media 280 px y se comia 15 px por cada lado, incluidas las casillas de la
   izquierda de cada herramienta.
   'safe center' significa: centra mientras quepa; cuando NO quepa, alinea al
   principio (que es donde empieza el contenido) en vez de recortar. Va DESPUES de
   las lineas de siempre a proposito: el navegador que no entienda 'safe' se queda
   con la declaracion anterior y todo sigue como estaba. */
.portal-fondo {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: safe center;
  justify-content: safe center;
  padding: 24px;
  /* Acento de marca muy sutil sobre el fondo claro */
  background:
    radial-gradient(900px 500px at 100% -10%, rgba(255, 106, 26, .07), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(9, 71, 179, .07), transparent 60%),
    var(--kv-fondo);
}

.portal-caja {
  width: 100%;
  max-width: 430px;
  padding: 34px 32px 30px;
  box-shadow: var(--kv-sombra);
}

/* --------------------------------------------------------------------------
   Cabecera con marca + indicador de pasos
   -------------------------------------------------------------------------- */
.portal-cabecera { text-align: center; margin-bottom: 22px; }
.portal-cabecera .kv-marca { font-size: 26px; }

.portal-titulo { font-size: 19px; margin-top: 16px; }
.portal-sub {
  font-size: 14px;
  color: var(--kv-texto-suave);
  margin-top: 6px;
}

/* Pasos 1 · 2 · 3 (puntos guía) */
.portal-pasos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.portal-paso {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--kv-texto-tenue);
  background: var(--kv-fondo);
  border: 1px solid var(--kv-borde-fuerte);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* El numero del paso activo es texto blanco de 12px sobre naranja: con el
   naranja de marca daba 2,87:1 (ilegible al sol). Mismo criterio que el boton
   principal: aqui el naranja hace de FONDO DE TEXTO, asi que usa la variante
   --kv-naranja-cta (4,76:1). Ver la nota de tema.css. */
.portal-paso.es-activo {
  color: #fff;
  background: var(--kv-naranja-cta);
  border-color: var(--kv-naranja-cta);
}
.portal-paso.es-hecho {
  color: #fff;
  background: var(--kv-verde);
  border-color: var(--kv-verde);
}
.portal-paso-linea {
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--kv-borde-fuerte);
}
.portal-paso-linea.es-hecho { background: var(--kv-verde); }

/* --------------------------------------------------------------------------
   Avisos (error de validación / red / información)
   -------------------------------------------------------------------------- */
.portal-aviso {
  font-size: 13.5px;
  font-weight: 600;
  padding: 11px 13px;
  border-radius: var(--kv-radio-chico);
  margin-bottom: 16px;
  border: 1px solid transparent;
  text-align: center;
}
.portal-aviso-error {
  background: var(--kv-rojo-suave);
  color: var(--kv-rojo);
  border-color: rgba(210, 59, 59, .25);
}
.portal-aviso-info {
  background: var(--kv-amarillo-suave);
  color: var(--kv-amarillo);
  border-color: rgba(184, 134, 11, .25);
  text-align: left;
}

/* --------------------------------------------------------------------------
   Bloque del código demo recibido (paso 2)
   -------------------------------------------------------------------------- */
.portal-codigo-demo {
  margin: 4px 0 18px;
  padding: 14px 16px;
  border-radius: var(--kv-radio-chico);
  background: rgba(9, 71, 179, .06);
  border: 1px solid rgba(9, 71, 179, .16);
  text-align: center;
}
.portal-codigo-demo-rotulo {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--kv-texto-suave);
}
.portal-codigo-demo-valor {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--kv-azul);
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}
.portal-codigo-demo-nota {
  font-size: 12px;
  color: var(--kv-texto-tenue);
  margin-top: 6px;
}

/* Campo de código de un solo uso (6 dígitos) */
.portal-otp {
  letter-spacing: .55em;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--kv-azul);
  padding-left: calc(14px + .27em);
}

/* --------------------------------------------------------------------------
   Paso 3: acceso autorizado + ticket
   -------------------------------------------------------------------------- */
.portal-ok-icono {
  width: 56px; height: 56px;
  margin: 4px auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--kv-verde-suave);
  color: var(--kv-verde);
  font-size: 28px;
  font-weight: 800;
  border: 1px solid rgba(31, 157, 87, .25);
}

.portal-ticket {
  margin: 18px 0 8px;
  padding: 14px 16px;
  border-radius: var(--kv-radio-chico);
  background: var(--kv-fondo);
  border: 1px dashed var(--kv-borde-fuerte);
  text-align: left;
}
.portal-ticket-rotulo {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--kv-texto-suave);
  margin-bottom: 6px;
}
.portal-ticket-valor {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--kv-texto);
  word-break: break-all;
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Pie y enlaces auxiliares
   -------------------------------------------------------------------------- */
.portal-pie {
  margin-top: 22px;
  text-align: center;
  font-size: 13px;
  color: var(--kv-texto-tenue);
}
.portal-volver {
  background: none;
  border: none;
  color: var(--kv-azul);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.portal-volver:hover { text-decoration: underline; }

/* Texto pequeño de la caducidad del código/ticket */
.portal-caduca {
  text-align: center;
  font-size: 13px;
  color: var(--kv-texto-suave);
  margin-top: 4px;
}
.portal-caduca strong { color: var(--kv-naranja-oscuro); }

/* Spinner discreto dentro de los botones ocupados */
.portal-cargando {
  display: inline-block;
  width: 15px; height: 15px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: portal-giro .7s linear infinite;
}
@keyframes portal-giro { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 460px) {
  .portal-caja { padding: 28px 22px 24px; }
  .portal-codigo-demo-valor { font-size: 26px; }
}