/* ═══════════════════════════════════════════════════════════════
   SURIAPP – Login Page Styles (login.css)
   Paleta: violet #7B3FE4 · sky #29B6F6 · cyan #00E5FF
   Tipografía: Syne (headings 800w) + DM Sans (body)
   ═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
   1. VARIABLES GLOBALES
   ───────────────────────────────────────────────────────────── */
:root {
  /* Colores de marca */
  --violet: #7B3FE4;
  --sky:    #29B6F6;
  --cyan:   #00E5FF;
  --orange: #FF8F00;
  --gold:   #FFC107;

  /* Escala de fondos oscuros */
  --dark:  #0F1120;   /* fondo más oscuro (página) */
  --dark1: #141628;
  --dark2: #1A1D30;
  --dark3: #20233A;   /* fondo de inputs */
  --dark4: #272B42;

  /* Bordes */
  --border:  rgba(255, 255, 255, 0.08);
  --border2: rgba(255, 255, 255, 0.14);

  /* Texto */
  --text1: #F1F5F9;   /* blanco suave – títulos */
  --text2: #94A3B8;   /* gris claro  – párrafos */
  --text3: #475569;   /* gris oscuro – labels, subtítulos */
}


/* ─────────────────────────────────────────────────────────────
   2. RESET & BASE
   ───────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  font-family: 'DM Sans', sans-serif;
  background: var(--dark);
  color: var(--text2);
  min-height: 100vh;
  /* iOS Safari: permitir scroll cuando la card es más alta que la pantalla */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

h1, h2, h3, h4, h5 {
  font-family: 'Syne', sans-serif;
}


/* ─────────────────────────────────────────────────────────────
   3. FONDOS DECORATIVOS (fixed, detrás de todo)
   ───────────────────────────────────────────────────────────── */

/* Gradientes radiales que dan el efecto de luz ambiental */
.bg-mesh {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 55% at 5%  20%, rgba(123, 63, 228, 0.28) 0%, transparent 65%),
    radial-gradient(ellipse 55% 50% at 95% 80%, rgba(41,  182, 246, 0.22) 0%, transparent 65%),
    radial-gradient(ellipse 40% 35% at 55% 5%,  rgba(0,   229, 255, 0.10) 0%, transparent 60%),
    var(--dark);
}

/* Cuadrícula sutil sobre el fondo */
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 52px 52px;
}


/* ─────────────────────────────────────────────────────────────
   4. LAYOUT PRINCIPAL
   Dos paneles: izquierdo (branding) + derecho (formulario)
   ───────────────────────────────────────────────────────────── */
.page-wrap {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  /* dvh = dynamic viewport height, descuenta la barra del navegador en iOS */
  min-height: 100dvh;
  display: flex;
}


/* ─────────────────────────────────────────────────────────────
   5. PANEL IZQUIERDO (branding + features)
   Se oculta en mobile (< 992px)
   ───────────────────────────────────────────────────────────── */
.left-panel {
  flex: 1;
  min-width: 0;        /* permite que flex-shrink funcione */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 72px;
  overflow: hidden;    /* evita que el contenido empuje al right-panel */
}

/* Logo + nombre */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 56px;
}

.brand-text {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--text1);
}

/* "app" en azul sky */
.brand-text span { color: var(--sky); }

/* Título principal del panel */
.left-title {
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 800;
  color: var(--text1);
  line-height: 1.15;
  margin-bottom: 18px;
}

/* Parte degradada del título */
.left-title span {
  background: linear-gradient(135deg, var(--sky) 0%, #9B5FFF 60%, var(--cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.left-desc {
  font-size: 0.98rem;
  color: var(--text3);
  line-height: 1.8;
  max-width: 400px;
  margin-bottom: 48px;
}

/* Lista de características */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Cada item de la lista */
.feat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 13px;
  transition: border-color 0.2s;
}

.feat:hover { border-color: var(--border2); }

/* Ícono circular de cada feature */
.feat-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.feat-title {
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--text1);
}

.feat-sub {
  font-size: 0.76rem;
  color: var(--text3);
  margin-top: 1px;
}

/* Texto de pie del panel izquierdo */
.left-footer {
  margin-top: 48px;
  font-size: 0.78rem;
  color: var(--text3);
}

.left-footer a {
  color: var(--sky);
  text-decoration: none;
}


/* ─────────────────────────────────────────────────────────────
   6. PANEL DERECHO (contiene la tarjeta de login)
   ───────────────────────────────────────────────────────────── */
.right-panel {
  width: 420px;
  min-width: 320px;
  max-width: 480px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 36px;
}


/* ─────────────────────────────────────────────────────────────
   7. TARJETA DE LOGIN
   ───────────────────────────────────────────────────────────── */
.login-card {
  width: 100%;
  background: rgba(18, 20, 38, 0.94);
  border: 1px solid var(--border2);
  border-radius: 22px;
  padding: 40px 36px;
  backdrop-filter: blur(22px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 40px 80px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: cardIn 0.5s ease both;
}

/* Animación de entrada de la tarjeta */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)     scale(1);   }
}

/* Logo dentro de la card (visible solo en mobile) */
.card-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}

/* Se oculta en desktop (el logo está en el panel izquierdo) */
.card-logo-mobile { display: none; }

.card-logo-text {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--text1);
}

.card-logo-text span { color: var(--sky); }

.card-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text1);
  margin-bottom: 5px;
}

.card-sub {
  font-size: 0.88rem;
  color: var(--text3);
  margin-bottom: 30px;
}


/* ─────────────────────────────────────────────────────────────
   8. CAMPOS DE FORMULARIO
   ───────────────────────────────────────────────────────────── */
.field       { margin-bottom: 16px; }

.field-label {
  display: block;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 7px;
}

/* Contenedor relativo para posicionar íconos */
.field-wrap  { position: relative; }

/* Ícono a la izquierda del input */
.field-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text3);
  font-size: 0.95rem;
  pointer-events: none;
  transition: color 0.2s;
}

/* Input principal */
.field-input {
  width: 100%;
  background: var(--dark3);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 12px 14px 12px 38px;
  color: var(--text1);
  font-size: 0.92rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.field-input::placeholder { color: var(--text3); }

/* Focus: borde violeta + glow */
.field-input:focus {
  border-color: rgba(123, 63, 228, 0.55);
  box-shadow: 0 0 0 3px rgba(123, 63, 228, 0.10);
}

/* Botón para mostrar/ocultar contraseña (ícono ojo) */
.toggle-pw {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  color: var(--text3);
  font-size: 0.95rem;
  cursor: pointer;
  transition: color 0.2s;
}

.toggle-pw:hover { color: var(--text2); }


/* ─────────────────────────────────────────────────────────────
   9. OPCIONES DEL FORMULARIO (recordarme + olvidé contraseña)
   ───────────────────────────────────────────────────────────── */
.field-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  margin-top: -4px;
}

.remember-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* Checkbox personalizado */
.check-box {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  border: 1.5px solid var(--border2);
  background: var(--dark3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
  font-size: 0.65rem;
  color: #fff;
}

/* Estado activo del checkbox */
.check-box.on {
  background: var(--violet);
  border-color: var(--violet);
}

.remember-label {
  font-size: 0.82rem;
  color: var(--text3);
  user-select: none;
}

.forgot-link {
  font-size: 0.82rem;
  color: var(--sky);
  text-decoration: none;
  transition: color 0.2s;
}

.forgot-link:hover { color: var(--cyan); }


/* ─────────────────────────────────────────────────────────────
   10. BOTÓN DE INGRESO
   ───────────────────────────────────────────────────────────── */
.btn-login {
  width: 100%;
  background: linear-gradient(135deg, var(--violet) 0%, var(--sky) 100%);
  color: #fff;
  border: none;
  border-radius: 11px;
  padding: 14px;
  font-family: 'Syne', sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.18s, box-shadow 0.2s;
  box-shadow: 0 8px 28px rgba(123, 63, 228, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  position: relative;
  overflow: hidden;
}

.btn-login:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(123, 63, 228, 0.45);
}

.btn-login:active   { transform: translateY(0); }
.btn-login:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* Spinner dentro del botón (visible mientras carga) */
.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: none;   /* oculto por defecto, JS lo muestra */
}

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


/* ─────────────────────────────────────────────────────────────
   11. CAJA DE ERROR / INFORMACIÓN
   ───────────────────────────────────────────────────────────── */
.error-box {
  display: none;          /* oculto por defecto */
  align-items: flex-start;
  gap: 10px;
  background: rgba(239, 68, 68, 0.09);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 0.85rem;
  color: #f87171;
  margin-bottom: 16px;
  animation: shake 0.3s ease;
}

/* Clase que lo hace visible */
.error-box.show { display: flex; }

/* Variante informativa (azul) para "recuperar contraseña" */
.error-box.info {
  background: rgba(41, 182, 246, 0.09);
  border-color: rgba(41, 182, 246, 0.25);
  color: var(--sky);
}

.error-box i { flex-shrink: 0; margin-top: 1px; }

/* Animación de vibración al aparecer */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-5px); }
  75%       { transform: translateX(5px); }
}


/* ─────────────────────────────────────────────────────────────
   12. TEXTO DE PIE DE LA TARJETA
   ───────────────────────────────────────────────────────────── */
.card-footer-text {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text3);
  margin-top: 22px;
  line-height: 1.7;
}

.card-footer-text a {
  color: var(--sky);
  text-decoration: none;
  font-weight: 600;
}


/* ─────────────────────────────────────────────────────────────
   13. OVERLAY DE ÉXITO (aparece al loguearse correctamente)
   ───────────────────────────────────────────────────────────── */
.success-overlay {
  display: none;           /* oculto por defecto */
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 12, 28, 0.96);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

/* Clase que muestra el overlay */
.success-overlay.show { display: flex; }

/* Ícono de check animado */
.success-icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), var(--sky));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #fff;
  animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.3); }
  to   { opacity: 1; transform: scale(1);   }
}

/* Textos del overlay (animados con delay escalonado) */
.success-title   { font-family: 'Syne', sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--text1); animation: fadeUp 0.45s ease 0.20s both; }
.success-company { font-size: 0.9rem;  color: var(--sky);   animation: fadeUp 0.45s ease 0.30s both; }
.success-sub     { font-size: 0.85rem; color: var(--text3); animation: fadeUp 0.45s ease 0.35s both; }

/* Barra de progreso que se llena antes de redirigir */
.progress-wrap {
  width: 180px;
  height: 3px;
  background: var(--dark3);
  border-radius: 2px;
  overflow: hidden;
  animation: fadeUp 0.45s ease 0.4s both;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--violet), var(--sky));
  animation: loadBar 1.6s ease 0.5s forwards;
}

@keyframes loadBar { to { width: 100%; } }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}


/* ─────────────────────────────────────────────────────────────
   14. RESPONSIVE COMPLETO
   ── Breakpoints:
      ≤ 1100px  Laptop pequeña (panel izquierdo más compacto)
      ≤  991px  Tablet / mobile — panel izquierdo se oculta
      ≤  575px  Móvil grande
      ≤  400px  Móvil pequeño
      ≤  360px  Móvil muy pequeño
   ───────────────────────────────────────────────────────────── */

/* ═══ LAPTOP PEQUEÑA ≤ 1100px ══════════════════════════════ */
@media (max-width: 1200px) {
  .left-panel  { padding: 48px 48px; }
  .right-panel { width: 380px; padding: 32px 28px; }
}

@media (max-width: 1050px) {
  .left-panel  { padding: 40px 36px; }
  .right-panel { width: 360px; padding: 28px 24px; }
  .left-title  { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
}

/* ═══ TABLET / MOBILE ≤ 991px ══════════════════════════════ */
@media (max-width: 991px) {
  /* Layout: columna vertical (card arriba, features abajo) */
  .page-wrap {
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* Panel derecho (card de login): primero */
  .right-panel {
    width: 100%;
    max-width: 500px;
    min-height: auto;
    padding: 48px 24px 32px;
    justify-content: flex-start;
    align-items: center;
    order: 1;
  }

  /* Card */
  .login-card {
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
  }

  /* Mostrar logo dentro de la card */
  .card-logo-mobile { display: flex; }

  /* Panel izquierdo (features): segundo, debajo de la card */
  .left-panel {
    display: flex;
    order: 2;
    width: 100%;
    max-width: 500px;
    padding: 0 24px 48px;
    flex-direction: column;
    justify-content: flex-start;
  }

  /* Ocultar título, descripción y brand en mobile (ya están implícitos) */
  .brand       { display: none; }
  .left-title  { display: none; }
  .left-desc   { display: none; }

  /* Separador visual entre card y features */
  .feature-list {
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 24px;
    gap: 10px;
  }

  /* Features más compactos */
  .feat {
    padding: 12px 14px;
    border-radius: 12px;
  }

  /* Footer del panel izquierdo */
  .left-footer {
    margin-top: 20px;
    text-align: center;
  }

  /* Fondo centrado */
  .bg-mesh {
    background:
      radial-gradient(ellipse 80% 60% at 50% 10%, rgba(123, 63, 228, 0.28) 0%, transparent 65%),
      radial-gradient(ellipse 60% 50% at 50% 90%, rgba(41, 182, 246, 0.20) 0%, transparent 65%),
      var(--dark);
  }
}

/* ═══ MÓVIL GRANDE ≤ 575px ══════════════════════════════════ */
@media (max-width: 575px) {
  /* Padding exterior reducido con safe area para notch */
  .right-panel {
    padding: 28px 16px 40px;
    padding-top: max(28px, env(safe-area-inset-top));
    padding-bottom: max(40px, env(safe-area-inset-bottom));
  }

  /* Card ajustada */
  .login-card {
    padding: 28px 22px;
    border-radius: 18px;
    max-width: 100%;
  }

  /* Título de la card */
  .card-title { font-size: 1.25rem; }
  .card-sub   { font-size: 0.84rem; margin-bottom: 24px; }

  /* Inputs */
  .field-input {
    font-size: 0.88rem;
    padding: 11px 14px 11px 36px;
  }

  /* Opciones (recordarme + olvidé): apilar en columna si no cabe */
  .field-options {
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
  }

  /* Botón de ingreso */
  .btn-login { padding: 13px; font-size: 0.93rem; }

  /* Texto de pie */
  .card-footer-text { font-size: 0.75rem; margin-top: 18px; }

  /* Features de la lista (por si se muestran en tablet grande) */
  .feat { padding: 11px 14px; }
  .feat-title { font-size: 0.83rem; }
  .feat-sub   { font-size: 0.72rem; }

  /* Overlay de éxito más compacto */
  .success-icon  { width: 72px; height: 72px; font-size: 1.7rem; }
  .success-title { font-size: 1.1rem; }
}

/* ═══ MÓVIL PEQUEÑO ≤ 400px ═════════════════════════════════ */
@media (max-width: 400px) {
  .right-panel { padding: 20px 12px 20px; }

  .login-card {
    padding: 24px 18px;
    border-radius: 16px;
    /* En pantallas muy pequeñas: quitar sombra pesada */
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.04),
      0 20px 40px rgba(0, 0, 0, 0.45);
  }

  /* Logo mobile más pequeño */
  .card-logo       { margin-bottom: 22px; }
  .card-logo-text  { font-size: 1.1rem; }

  /* Campos */
  .field        { margin-bottom: 13px; }
  .field-label  { font-size: 0.68rem; margin-bottom: 5px; }
  .field-input  { padding: 10px 13px 10px 34px; font-size: 0.85rem; border-radius: 9px; }
  .field-icon   { left: 11px; font-size: 0.88rem; }
  .toggle-pw    { right: 10px; }

  /* Opciones */
  .field-options  { margin-bottom: 18px; }
  .remember-label { font-size: 0.78rem; }
  .forgot-link    { font-size: 0.78rem; }

  /* Botón */
  .btn-login { padding: 12px; font-size: 0.88rem; border-radius: 9px; }

  /* Error box */
  .error-box { font-size: 0.80rem; padding: 9px 12px; }

  /* Pie */
  .card-footer-text { font-size: 0.72rem; }
}

/* ═══ MÓVIL MUY PEQUEÑO ≤ 360px ════════════════════════════ */
@media (max-width: 360px) {
  .right-panel { padding: 16px 10px; }

  .login-card {
    padding: 20px 14px;
    border-radius: 14px;
  }

  .card-title  { font-size: 1.15rem; }
  .field-input { font-size: 0.82rem; }

  /* Comprimir opciones */
  .field-options  { flex-direction: column; align-items: flex-start; gap: 8px; }
  .forgot-link    { align-self: flex-end; }

  /* Overlay más pequeño */
  .success-icon  { width: 60px; height: 60px; font-size: 1.4rem; }
  .progress-wrap { width: 140px; }
}

/* ═══ SOPORTE NOTCH/SAFE AREA iOS ══════════════════════════ */
@media (max-width: 991px) {
  .right-panel {
    padding-top: max(48px, env(safe-area-inset-top));
  }
  .left-panel {
    padding-bottom: max(48px, env(safe-area-inset-bottom));
  }
}

/* ═══ SOPORTE PARA LANDSCAPE EN MOBILE ══════════════════════ */
@media (max-height: 500px) and (max-width: 991px) {
  .right-panel  { padding: 16px 24px; min-height: auto; }
  .login-card   { padding: 20px 24px; }
  .card-logo    { margin-bottom: 16px; }
  .card-title   { font-size: 1.1rem; }
  .card-sub     { margin-bottom: 16px; }
  .field        { margin-bottom: 10px; }
  .field-options { margin-bottom: 14px; }

  /* Ocultar el logo mobile en landscape para ganar espacio */
  .card-logo { display: none !important; }
}