/* =========================================================
   TerraCloud · Login Premium
   Paleta: Verde bosque / Blanco puro / Toques amaderados
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=Inter:wght@300;400;500&display=swap');

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

:root {
  /* ── Verdes ── */
  --forest:       #1b3d28;
  --canopy:       #2a5c3f;
  --leaf:         #3d7a54;
  --sage:         #6aab81;
  --mist:         #d4e8db;
  --off-white:    #f7faf8;
  --white:        #ffffff;

  /* ── Madera ── */
  --walnut:       #6b4226;
  --teak:         #8b5e3c;
  --oak:          #c4956a;
  --oak-light:    #ddb88a;

  /* ── Texto ── */
  --text-dark:    #1a2e22;
  --text-mid:     #3f6650;
  --text-soft:    #7aab8a;

  /* ── Error ── */
  --red-soft:     rgba(180, 50, 50, .10);
  --red-border:   rgba(180, 50, 50, .30);
  --red-text:     #c0392b;

  /* ── Easings ── */
  --ease-expo:    cubic-bezier(.19, 1, .22, 1);
  --ease-spring:  cubic-bezier(.34, 1.56, .64, 1);
}

/* ─────────────────────────────────────────
   BASE
───────────────────────────────────────── */
html, body { height: 100%; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--off-white);
  color: var(--text-dark);
  display: grid;
  place-items: center;
  min-height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}


/* ─────────────────────────────────────────
   LUZ AMBIENTAL (sigue al cursor)
───────────────────────────────────────── */
.light-follow {
  position: fixed;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61, 122, 84, .10) 0%, transparent 65%);
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  transition: left .07s linear, top .07s linear;
  mix-blend-mode: multiply;
}

/* ─────────────────────────────────────────
   PARTÍCULAS
───────────────────────────────────────── */
.particles-wrap {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.ptcl {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  animation: rise-up linear infinite;
}
@keyframes rise-up {
  0%   { opacity: 0;   transform: translateY(0)      scale(1); }
  15%  { opacity: .50; }
  85%  { opacity: .25; }
  100% { opacity: 0;   transform: translateY(-200px) scale(.3); }
}

/* ─────────────────────────────────────────
   ESCENA DIVIDIDA  left | right
───────────────────────────────────────── */
.scene {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

/* ─────────────────────────────────────────
   PANEL IZQUIERDO — Verde bosque
───────────────────────────────────────── */
.panel-left {
  position: relative;
  background: var(--forest);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px;
  overflow: hidden;
}

/* Textura de veta de madera */
.panel-left::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(92deg, transparent 0px, rgba(139,94,60,.04) 1px, transparent 2px, transparent 18px),
    repeating-linear-gradient(88deg, transparent 0px, rgba(139,94,60,.03) 1px, transparent 2px, transparent 34px);
  pointer-events: none;
}

/* Franja de madera inferior */
.panel-left::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--walnut), var(--oak), var(--teak), var(--oak-light), var(--teak));
}

/* Orbs de brillo */
.orb-left {
  position: absolute;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61,122,84,.35) 0%, transparent 65%);
  top: -80px; right: -100px;
  pointer-events: none;
  animation: orb-breathe 7s ease-in-out infinite alternate;
}
.orb-left-2 {
  position: absolute;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,94,60,.20) 0%, transparent 65%);
  bottom: 60px; left: -60px;
  pointer-events: none;
  animation: orb-breathe 9s ease-in-out infinite alternate-reverse;
}
@keyframes orb-breathe {
  from { transform: scale(1)    translate(0,  0);    opacity: .70; }
  to   { transform: scale(1.12) translate(10px, 14px); opacity: 1; }
}

/* Contenido branding */
.left-brand   { position: relative; z-index: 2; }
.left-logo    { display: flex; align-items: center; gap: 12px; margin-bottom: 64px; }
.left-logo-mark {
  width: 40px; height: 40px;
  border: 1.5px solid rgba(196,149,106,.50);
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 20px;
  background: rgba(196,149,106,.10);
  box-shadow: 0 0 18px rgba(196,149,106,.15);
  flex-shrink: 0;
}
.left-logo-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px; font-weight: 600;
  color: var(--white); letter-spacing: .01em;
}
.left-logo-sub {
  font-size: 10px;
  color: rgba(196,149,106,.70);
  letter-spacing: .10em;
  text-transform: uppercase;
  margin-top: 2px;
}
.left-headline {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 600;
  color: var(--white);
  line-height: 1.18;
  letter-spacing: -.01em;
  margin-bottom: 18px;
}
.left-headline em { font-style: normal; color: var(--oak-light); }
.left-body {
  font-size: 14px;
  color: rgba(212,232,219,.65);
  line-height: 1.65;
  max-width: 300px;
}

/* Lista de características */
.feature-list  { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 14px; }
.feature-item  { display: flex; align-items: center; gap: 11px; font-size: 12.5px; color: rgba(212,232,219,.55); }
.feature-dot   { width: 6px; height: 6px; border-radius: 50%; background: var(--oak); flex-shrink: 0; box-shadow: 0 0 8px rgba(196,149,106,.50); }

/* SVG hoja decorativa */
.deco-leaves   { position: absolute; bottom: 40px; right: 30px; z-index: 1; opacity: .12; pointer-events: none; }

/* ─────────────────────────────────────────
   PANEL DERECHO — Blanco con madera
───────────────────────────────────────── */
.panel-right {
  position: relative;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  overflow: hidden;
}

/* Veta sutil en blanco */
.panel-right::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    91deg, transparent 0px, rgba(196,149,106,.025) 1px, transparent 2px, transparent 22px
  );
  pointer-events: none;
}

/* Franja de madera superior */
.panel-right::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--teak), var(--oak-light), var(--oak), var(--teak));
}

/* Patrón de puntos */
.right-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(61,122,84,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 100%);
  pointer-events: none;
}

/* ─────────────────────────────────────────
   TARJETA DE LOGIN
───────────────────────────────────────── */
.login-card {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 360px;
  animation: card-enter .85s var(--ease-expo) both;
  transform-style: preserve-3d;
  will-change: transform;
}
@keyframes card-enter {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Ceja de sección */
.section-eyebrow {
  font-size: 10.5px; font-weight: 500;
  color: var(--oak);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
  animation: item-enter .7s .10s var(--ease-expo) both;
}
.section-eyebrow::before {
  content: '';
  width: 20px; height: 1.5px;
  background: var(--oak);
  border-radius: 1px;
}

.login-card h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 28px; font-weight: 600;
  color: var(--text-dark);
  letter-spacing: -.02em; line-height: 1.1;
  margin-bottom: 6px;
  animation: item-enter .7s .16s var(--ease-expo) both;
}
.login-card .sub {
  font-size: 13px; color: var(--text-soft);
  margin-bottom: 32px; line-height: 1.5;
  animation: item-enter .7s .22s var(--ease-expo) both;
}

/* Divisor bicolor */
.divider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(61,122,84,.15) 40%,
    rgba(196,149,106,.20) 60%,
    transparent
  );
  margin-bottom: 28px;
  animation: item-enter .7s .24s var(--ease-expo) both;
}

/* ─────────────────────────────────────────
   ALERTA DE ERROR
───────────────────────────────────────── */
.alert {
  display: flex; align-items: center; gap: 9px;
  background: var(--red-soft);
  border: 1px solid var(--red-border);
  border-radius: 9px;
  padding: 11px 14px;
  font-size: 13px; color: var(--red-text);
  margin-bottom: 20px;
  animation: shake .45s var(--ease-spring);
}
.alert::before { content: '⚠'; font-size: 14px; }

@keyframes shake {
  0%, 100% { transform: translateX(0);  }
  20%       { transform: translateX(-5px); }
  40%       { transform: translateX( 5px); }
  60%       { transform: translateX(-3px); }
  80%       { transform: translateX( 3px); }
}

/* ─────────────────────────────────────────
   FORMULARIO
───────────────────────────────────────── */
form { display: flex; flex-direction: column; gap: 0; }

.field {
  display: flex; flex-direction: column; gap: 7px;
  margin-bottom: 16px;
  animation: item-enter .7s var(--ease-expo) both;
}
.field:nth-of-type(1) { animation-delay: .30s; }
.field:nth-of-type(2) { animation-delay: .38s; }

.field label {
  font-size: 11px; font-weight: 500;
  color: var(--text-mid);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Wrapper con icono y barra de madera */
.input-wrap { position: relative; }

.input-icon {
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  font-size: 15px; pointer-events: none;
  opacity: .35; transition: opacity .25s;
}
.input-wrap:focus-within .input-icon { opacity: .75; }

input[type="email"],
input[type="password"] {
  width: 100%;
  padding: 13px 13px 13px 40px;
  background: var(--off-white);
  border: 1.5px solid rgba(61,122,84,.15);
  border-radius: 10px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  color: var(--text-dark);
  outline: none;
  caret-color: var(--leaf);
  transition: border-color .25s, background .25s, box-shadow .25s;
}
input::placeholder { color: #b0c4b8; font-size: 13px; }
input:focus {
  border-color: var(--sage);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(106,171,129,.12), 0 0 16px rgba(61,122,84,.06);
}

/* Barra amaderada que aparece al hacer focus */
.input-bar {
  position: absolute;
  bottom: 0; left: 10px; right: 10px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, var(--teak), var(--oak), var(--sage));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .30s var(--ease-expo);
  pointer-events: none;
}
.input-wrap:focus-within .input-bar { transform: scaleX(1); }

/* Botón ojo para contraseña */
.eye-toggle {
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  color: #a0b8a8; font-size: 16px;
  cursor: pointer; padding: 4px;
  transition: color .2s; line-height: 1;
}
.eye-toggle:hover { color: var(--leaf); }

/* Fila recordar / olvidé */
.meta-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
  animation: item-enter .7s .44s var(--ease-expo) both;
}
.remember {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--text-soft);
  cursor: default; user-select: none;
}
.remember input[type="checkbox"] {
  width: 15px; height: 15px;
  accent-color: var(--leaf); cursor: pointer;
}
.forgot {
  font-size: 12.5px; color: var(--teak);
  text-decoration: none; opacity: .8;
  transition: opacity .2s, color .2s; cursor: pointer;
}
.forgot:hover { opacity: 1; color: var(--walnut); }

/* ─────────────────────────────────────────
   BOTÓN ENVIAR
───────────────────────────────────────── */
.btn-submit {
  width: 100%; padding: 14px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px; font-weight: 600;
  letter-spacing: .02em;
  color: var(--white);
  background: linear-gradient(135deg, var(--canopy) 0%, var(--forest) 100%);
  border: none; border-radius: 10px;
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .18s var(--ease-spring), box-shadow .25s;
  box-shadow: 0 4px 20px rgba(27,61,40,.30), 0 1px 0 rgba(255,255,255,.08) inset;
  animation: item-enter .7s .50s var(--ease-expo) both;
}

/* Borde superior amaderado */
.btn-submit::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--teak), var(--oak-light), var(--oak), var(--teak));
  opacity: .60;
}

/* Shimmer al hover */
.btn-submit::after {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  transform: skewX(-18deg);
  transition: none;
}
.btn-submit:hover::after { left: 160%; transition: left .50s ease; }
.btn-submit:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 8px 32px rgba(27,61,40,.40), 0 1px 0 rgba(255,255,255,.12) inset;
}
.btn-submit:active {
  transform: translateY(0) scale(.99);
  box-shadow: 0 2px 10px rgba(27,61,40,.25);
}

/* Estado cargando */
.btn-submit.loading { color: transparent; pointer-events: none; }
.btn-submit.loading::after { display: none; }
.btn-submit.loading .btn-spinner { display: block; }

.btn-spinner {
  display: none;
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.25);
  border-top-color: var(--white);
  border-radius: 50%;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ─────────────────────────────────────────
   PIE DE TARJETA
───────────────────────────────────────── */
.card-footer {
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid rgba(196,149,106,.18);
  display: flex; align-items: center; justify-content: center; gap: 20px;
  animation: item-enter .7s .58s var(--ease-expo) both;
}
.badge {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; color: #9ab8a4; letter-spacing: .04em;
}
.badge-dot {
  width: 5px; height: 5px;
  background: var(--sage); border-radius: 50%;
  box-shadow: 0 0 6px rgba(106,171,129,.60);
  animation: pulse-dot 2.2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%       { opacity: .45; transform: scale(.70); }
}

.version-tag {
  position: absolute; bottom: 14px; right: 18px;
  font-size: 9.5px; color: #c4d4c8; letter-spacing: .06em;
}

/* ─────────────────────────────────────────
   ANIMACIONES DE ENTRADA
───────────────────────────────────────── */
@keyframes item-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ─────────────────────────────────────────
   RESPONSIVE — MÓVIL
───────────────────────────────────────── */
@media (max-width: 680px) {
  .scene { grid-template-columns: 1fr; }
  .panel-left { display: none; }
  .panel-right { padding: 40px 28px; }
  .login-card { max-width: 100%; }
}

/* ─────────────────────────────────────────
   MOVIMIENTO REDUCIDO
───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}