/* Login de dos paneles, con la misma tipografía y estructura que el resto
   de los accesos de Prodato, para que se vean como una sola familia.

   Los íconos van como SVG en línea: no hace falta una dependencia externa
   para cuatro íconos. */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --white: #ffffff;
  --bg-panel: #f0f4fc;
  --text-dark: #0f172a;
  --text-muted: #64748b;
  --border: #dde5f0;
  --blue-deep: #1e40af;
  --brand: #1d4ed8;
  --font-sans: "Plus Jakarta Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

body {
  font-family: var(--font-sans);
  min-height: 100dvh;
  display: flex;
  background: var(--bg-panel);
}

/* Los paneles ocupan la pantalla completa, pero si el contenido no entra
   (pantallas bajas, zoom del navegador, un cartel de error de más) la
   página tiene que poder desplazarse. Antes body llevaba overflow:hidden
   y el pie del formulario quedaba inalcanzable. */
.left,
.right {
  min-height: 100dvh;
  height: auto;
}

/* ── PANEL IZQUIERDO: el acceso ── */
.left {
  width: 50%;
  min-height: 100dvh;
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 64px;
  position: relative;
  z-index: 2;
}

.left-inner {
  width: 100%;
  max-width: 380px;
}

.logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
}

.logo-wrap img {
  width: 170px;
  height: auto;
}

.left h2 {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-dark);
  letter-spacing: -0.03em;
  text-align: center;
  margin-bottom: 18px;
}

/* ── Formulario de credenciales ── */
.form-group {
  margin-bottom: 14px;
}

.form-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.input-wrap {
  position: relative;
}

.form-input {
  width: 100%;
  height: 46px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0 14px;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--text-dark);
  background: var(--white);
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.form-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
}

.form-input::placeholder {
  color: #94a3b8;
}

.form-input:disabled {
  background: var(--bg-panel);
  color: var(--text-muted);
  cursor: not-allowed;
}

.input-wrap.con-boton .form-input {
  padding-right: 44px;
}

.toggle-clave {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 2px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
}

.btn-primary {
  width: 100%;
  height: 50px;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s, transform 0.15s;
  margin-top: 4px;
}

.btn-primary:hover:not(:disabled) {
  background: var(--blue-deep);
  transform: translateY(-1px);
}

.btn-primary:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

/* ── Separador ── */
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── Botón de Microsoft ── */
.btn-ms {
  width: 100%;
  height: 50px;
  border-radius: 12px;
  background: #111827;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
  margin-bottom: 16px;
}

.btn-ms:hover {
  background: #1e293b;
  transform: translateY(-1px);
}

.ms-logo {
  width: 18px;
  height: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  flex-shrink: 0;
}

.ms-logo span:nth-child(1) { background: #f25022; }
.ms-logo span:nth-child(2) { background: #7fba00; }
.ms-logo span:nth-child(3) { background: #00a4ef; }
.ms-logo span:nth-child(4) { background: #ffb900; }

.ms-off {
  padding: 14px;
  border-radius: 12px;
  border: 1px dashed var(--border);
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 0.82rem;
  text-align: center;
  margin-bottom: 16px;
}

.ms-note {
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 18px;
}

.security-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.72rem;
  color: #22c55e;
}

.security-note svg {
  flex-shrink: 0;
}

/* ── Alertas ── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid #fecaca;
  background: #fff1f2;
  color: #9f1239;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.82rem;
  line-height: 1.45;
  margin-bottom: 18px;
}

.alert-icon {
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
}

.alert-titulo {
  display: block;
  font-weight: 700;
  font-size: 0.86rem;
  margin-bottom: 2px;
}

/* Aviso: no es un error de quien entra, es información. */
.alert-aviso {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}

/* ── PANEL DERECHO: la marca ── */
.right {
  width: 50%;
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, #1e3a8a 0%, #1d4ed8 45%, #0ea5e9 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.right::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.18) 1px, transparent 1px);
  background-size: 28px 28px;
  z-index: 0;
}

.right::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-45deg,
      transparent,
      transparent 60px,
      rgba(255, 255, 255, 0.04) 60px,
      rgba(255, 255, 255, 0.04) 61px);
  z-index: 0;
}

.deco-circle {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
}

.deco-circle.c1 {
  width: 320px;
  height: 320px;
  background: rgba(255, 255, 255, 0.06);
  top: -80px;
  right: -80px;
}

.deco-circle.c2 {
  width: 220px;
  height: 220px;
  background: rgba(255, 255, 255, 0.05);
  bottom: -60px;
  left: -60px;
}

.deco-circle.c3 {
  width: 140px;
  height: 140px;
  background: rgba(255, 255, 255, 0.07);
  top: 40%;
  left: -40px;
}

.right-content {
  position: relative;
  z-index: 1;
  padding: 56px 64px;
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}

.right-title {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #fff;
  text-align: center;
  margin-bottom: 20px;
}

.right-title .dim {
  color: rgba(255, 255, 255, 0.5);
}

.right-sub {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  max-width: 320px;
  margin-bottom: 40px;
  text-align: center;
}

.feature-card {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  backdrop-filter: blur(12px);
  min-width: 300px;
  max-width: 340px;
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Respeta a quien pidió menos movimiento en el sistema. */
@media (prefers-reduced-motion: reduce) {
  .feature-card { animation: none; }
}

.card-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

.card-text {
  flex: 1;
}

.card-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}

.card-sub {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}

.card-check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #22c55e;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

@media (max-width: 860px) {
  body {
    flex-direction: column;
  }

  .left,
  .right {
    width: 100%;
    min-height: auto;
  }

  .right {
    min-height: 320px;
  }

  .left {
    padding: 40px 28px;
  }

  .right-content {
    padding: 40px 28px;
  }

  .right-title {
    font-size: 2.2rem;
  }
}