/* ═══════════════════════════════════════════════════
   VARIABLES — misma paleta que corporate-blue-theme
   ═══════════════════════════════════════════════════ */
:root {
  --o700: #C94F02;
  --o600: #E85D04;
  --o500: #F77F00;
  --o400: #FB9B3A;
  --o100: #FEE9D0;
  --o050: #FFF6EE;
  --b800: #0F3D7A;
  --b700: #1554A0;
  --b600: #1A6BC1;
  --b500: #2E86DE;
  --b400: #60A8E8;
  --b050: #EEF6FD;
  --surf: #FFFFFF;
  --bg:   #F0F2F5;
  --t1:   #1A1D23;
  --t2:   #3D4350;
  --t3:   #6B7385;
  --t4:   #9EA6B4;
  --bdr:  #E8EAEE;
  --bdr2: #D1D5DC;
  --err:  #DC2626;
  --tr:   .2s cubic-bezier(.4,0,.2,1);
}

/* ═══════════════════════════════════════════════════
   RESET BASE
   ═══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body.login-page {
  height: 100%;
  font-family: 'Poppins', sans-serif;
  background: var(--bg);
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════
   LAYOUT PRINCIPAL — dos columnas
   ═══════════════════════════════════════════════════ */
.lp-wrap {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════
   PANEL IZQUIERDO — slideshow
   ═══════════════════════════════════════════════════ */
.lp-slides {
  flex: 0 0 55%;
  position: relative;
  overflow: hidden;
  background: var(--b800);
}

/* Slides */
.slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 52px 56px;
  opacity: 0;
  transition: opacity .9s var(--tr), transform .9s var(--tr);
  transform: scale(1.03);
  z-index: 1;
}
.slide.active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}
.slide.exit {
  opacity: 0;
  transform: scale(.97);
  z-index: 1;
}

/* Fondo de cada slide — gradiente + patrón */
.slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
/* Slide 1 — Facturas: azul corporativo */
.slide-1 .slide-bg {
  background: linear-gradient(135deg, #0F3D7A 0%, #1A6BC1 40%, #2E86DE 70%, #60A8E8 100%);
}
/* Slide 2 — Recibos de Pago: verde + azul */
.slide-2 .slide-bg {
  background: linear-gradient(135deg, #064E3B 0%, #065F46 35%, #0F766E 70%, #0891B2 100%);
}
/* Slide 3 — Carta Porte: naranja intenso */
.slide-3 .slide-bg {
  background: linear-gradient(135deg, #7C2D12 0%, #C2410C 40%, #EA580C 70%, #F97316 100%);
}
/* Slide 4 — Nota de Credito: rojo/granate */
.slide-4 .slide-bg {
  background: linear-gradient(135deg, #7F1D1D 0%, #991B1B 35%, #B91C1C 65%, #DC2626 100%);
}
/* Slide 5 — Arrendamiento: azul pizarra */
.slide-5 .slide-bg {
  background: linear-gradient(135deg, #1E3A5F 0%, #1E40AF 40%, #2563EB 70%, #3B82F6 100%);
}
/* Slide 6 — Honorarios: violeta/indigo */
.slide-6 .slide-bg {
  background: linear-gradient(135deg, #312E81 0%, #4338CA 40%, #6366F1 70%, #818CF8 100%);
}
/* Slide 7 — Plataforma Flexible: naranja + azul */
.slide-7 .slide-bg {
  background: linear-gradient(135deg, #1A1D23 0%, #0F3D7A 40%, #E85D04 85%, #F77F00 100%);
}
/* Slide 8 — Importa/Exporta: verde esmeralda */
.slide-8 .slide-bg {
  background: linear-gradient(135deg, #064E3B 0%, #047857 40%, #059669 70%, #C94F02 100%);
}
/* Slide 9 — Sin costos: azul marino profundo */
.slide-9 .slide-bg {
  background: linear-gradient(135deg, #0F172A 0%, #0F3D7A 45%, #1A6BC1 75%, #F77F00 100%);
}

/* Patrón geométrico SVG encima del gradiente */
.slide-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M0 0h40v40H0V0zm40 40h40v40H40V40zm0-40h2l-2 2V0zm0 4l4-4h2l-6 6V4zm0 4l8-8h2L40 10V8zm0 4L52 0h2L40 14v-2zm0 4L56 0h2L40 18v-2zm0 4L60 0h2L40 22v-2zm0 4L64 0h2L40 26v-2zm0 4L68 0h2L40 30v-2zm0 4L72 0h2L40 34v-2zm0 4L76 0h2L40 38v-2zm0 4L80 0v2L42 40h-2zm4 0L80 4v2L46 40h-2zm4 0L80 8v2L50 40h-2zm4 0l28-28v2L54 40h-2zm4 0l24-24v2L58 40h-2zm4 0l20-20v2L62 40h-2zm4 0l16-16v2L66 40h-2zm4 0l12-12v2L70 40h-2zm4 0l8-8v2l-6 6h-2zm4 0l4-4v2l-2 2h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Overlay oscuro en la parte inferior para legibilidad del texto */
.slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(10,15,30,.75) 0%,
    rgba(10,15,30,.20) 50%,
    transparent 100%);
  z-index: 0;
}

/* Icono / ilustración flotante en el slide */
.slide-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  width: 220px;
  height: 220px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide-icon svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 20px 60px rgba(0,0,0,.35));
  animation: floatIcon 4s ease-in-out infinite;
}
@keyframes floatIcon {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* Texto del slide */
.slide-content {
  position: relative;
  z-index: 3;
}
.slide-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.9);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 50px;
  margin-bottom: 18px;
}
.slide-tag::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--o400);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(1.4); }
}
.slide-title {
  font-size: 32px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.25;
  margin-bottom: 14px;
  text-shadow: 0 2px 20px rgba(0,0,0,.3);
}
.slide-title span { color: var(--o400); }
.slide-desc {
  font-size: 13.5px;
  font-weight: 400;
  color: rgba(255,255,255,.75);
  line-height: 1.6;
  max-width: 380px;
}

/* Barra de features */
.slide-features {
  display: flex;
  gap: 10px 20px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.slide-feature {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,.80);
  font-size: 11.5px;
  font-weight: 500;
  flex: 0 0 auto;
  max-width: 100%;
}
/* Slides con muchas features (7,8,9): layout 2 columnas */
.slide-7 .slide-features,
.slide-8 .slide-features,
.slide-9 .slide-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  margin-top: 18px;
}
.slide-feature i {
  color: var(--o400);
  font-size: 12px;
  flex-shrink: 0;
}

/* Dots de navegación */
.slide-dots {
  position: absolute;
  bottom: 28px;
  right: 32px;
  display: flex;
  gap: 5px;
  z-index: 10;
  align-items: center;
}
.slide-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  border: none;
  cursor: pointer;
  transition: all .3s;
  padding: 0;
  flex-shrink: 0;
}
.slide-dot.active {
  background: var(--o400);
  width: 18px;
  border-radius: 3px;
}

/* Progress bar del slide */
.slide-progress {
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  background: var(--o500);
  z-index: 10;
  transition: width 5s linear;
  width: 0%;
}

/* Marca de agua en esquina superior */
.slide-brand {
  position: absolute;
  top: 32px;
  left: 40px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
}
.slide-brand img {
  height: 36px;
  filter: brightness(0) invert(1);
  opacity: .9;
}
.slide-brand-text {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  letter-spacing: -.01em;
}

/* ═══════════════════════════════════════════════════
   PANEL DERECHO — formulario
   ═══════════════════════════════════════════════════ */
.lp-form {
  flex: 0 0 45%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--surf);
  padding: 40px 52px;
  overflow-y: auto;
  position: relative;
}

/* Decoración esquina */
.lp-form::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--o050) 0%, transparent 70%);
  pointer-events: none;
}
.lp-form::after {
  content: '';
  position: absolute;
  bottom: -40px; left: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--b050) 0%, transparent 70%);
  pointer-events: none;
}

.lp-inner {
  width: 100%;
  max-width: 360px;
  position: relative;
  z-index: 1;
}

/* Logo en formulario */
.lp-logo {
  text-align: center;
  margin-bottom: 36px;
}
.lp-logo img {
  height: 44px;
  display: block;
  margin: 0 auto 12px;
}
.lp-logo-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -.02em;
}
.lp-logo-title span { color: var(--o500); }
.lp-logo-sub {
  font-size: 13px;
  color: var(--t3);
  margin-top: 4px;
}

/* Separador */
.lp-divider {
  width: 40px; height: 3px;
  background: linear-gradient(90deg, var(--o600), var(--o400));
  border-radius: 2px;
  margin: 0 auto 32px;
}

/* Formulario */
.lp-group {
  margin-bottom: 18px;
}
.lp-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--t2);
  margin-bottom: 7px;
  letter-spacing: .02em;
}
.lp-field {
  position: relative;
}
.lp-field i {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--t4);
  font-size: 14px;
  transition: color var(--tr);
  pointer-events: none;
}
.lp-input {
  width: 100%;
  height: 42px;
  padding: 0 14px 0 38px;
  border: 1px solid var(--bdr2);
  border-radius: 4px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  color: var(--t1);
  background: var(--surf);
  transition: border-color var(--tr), box-shadow var(--tr);
  outline: none;
}
.lp-input:focus {
  border-color: var(--o400);
  box-shadow: 0 0 0 3px rgba(247,127,0,.12);
}
.lp-input:focus + i,
.lp-field:focus-within i { color: var(--o500); }
/* Icono después del input (ojo contraseña) */
.lp-field .lp-toggle-pw {
  left: auto;
  right: 13px;
  cursor: pointer;
  pointer-events: all;
  z-index: 2;
}

/* Remember + Forgot */
.lp-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.lp-check {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}
.lp-check input[type="checkbox"] {
  width: 15px; height: 15px;
  accent-color: var(--o500);
  cursor: pointer;
}
.lp-check span {
  font-size: 12px;
  color: var(--t3);
}
.lp-forgot {
  font-size: 12px;
  font-weight: 500;
  color: var(--b500);
  text-decoration: none;
  transition: color var(--tr);
}
.lp-forgot:hover { color: var(--b700); }

/* Botón submit */
.lp-btn {
  width: 100%;
  height: 44px;
  background: linear-gradient(135deg, var(--o600) 0%, var(--o500) 100%);
  border: none;
  border-radius: 4px;
  color: #FFFFFF;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: all var(--tr);
  box-shadow: 0 3px 14px rgba(232,93,4,.25);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.lp-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--o700) 0%, var(--o600) 100%);
  opacity: 0;
  transition: opacity var(--tr);
}
.lp-btn:hover::before { opacity: 1; }
.lp-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(232,93,4,.35); }
.lp-btn:active { transform: translateY(0); }
.lp-btn span, .lp-btn i { position: relative; z-index: 1; }

/* Errores */
.lp-errors {
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  border-left: 3px solid var(--err);
  border-radius: 4px;
  padding: 10px 14px;
  margin-bottom: 18px;
}
.lp-errors p {
  font-size: 12px;
  color: #7F1D1D;
  margin: 0;
  line-height: 1.5;
}

/* Footer del form */
.lp-footer {
  margin-top: 28px;
  text-align: center;
  font-size: 11.5px;
  color: var(--t4);
}
.lp-footer strong { color: var(--t3); }

/* Loading spinner en el botón */
.lp-btn .spinner {
  display: none;
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.lp-btn.loading .spinner  { display: block; }
.lp-btn.loading .btn-text { display: none; }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .lp-slides { display: none; }
  .lp-form   { flex: 1; padding: 40px 28px; }
  html, body.login-page { overflow: auto; }
}
@media (max-width: 480px) {
  .lp-form   { padding: 32px 20px; }
  .lp-inner  { max-width: 100%; }
}