/* ================================================
   INICIO / LOGIN — FINCA CAFETERA — CARD STYLE v3.0
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root {
  --g-950: #011a12; --g-900: #022c22; --g-800: #064e3b;
  --g-700: #065f46; --g-600: #047857; --g-500: #059669;
  --g-400: #10b981; --g-300: #34d399; --g-200: #6ee7b7;
  --g-100: #a7f3d0; --g-50:  #d1fae5; --g-25:  #ecfdf5;
  --gold:  #d4a843;
  --page-bg: #dff0e8; --card-bg: #ffffff;
  --tx-dark: #011a12; --tx-mid: #065f46; --tx-soft: #6b7280;
  --border: rgba(5,150,105,0.18);
  --sh-card: 0 32px 80px rgba(2,33,18,0.22), 0 8px 24px rgba(2,33,18,0.14);
  --sh-em:   0 8px 28px rgba(5,150,105,0.30);
  --transition: all 0.30s cubic-bezier(0.25,0.46,0.45,0.94);
}

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

html, body {
  height:100%; width:100%;
  font-family:'DM Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  color:var(--tx-dark);
}

body {
  background: var(--page-bg);
  background-image:
    radial-gradient(ellipse 70% 60% at 15% 0%,  rgba(5,150,105,0.15) 0%, transparent 55%),
    radial-gradient(ellipse 55% 65% at 88% 100%, rgba(16,185,129,0.10) 0%, transparent 55%);
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; padding:24px;
  overflow:hidden; position:relative;
}

body::before {
  content:''; position:fixed; top:-25%; left:-20%;
  width:650px; height:650px; border-radius:50%;
  background:radial-gradient(circle, rgba(16,185,129,0.12) 0%, transparent 65%);
  animation:drift 16s ease-in-out infinite; pointer-events:none;
}
body::after {
  content:''; position:fixed; bottom:-20%; right:-15%;
  width:550px; height:550px; border-radius:50%;
  background:radial-gradient(circle, rgba(5,150,105,0.09) 0%, transparent 65%);
  animation:drift 20s ease-in-out infinite reverse; pointer-events:none;
}

.contenedor_padre {
  display:flex; width:100%; max-width:920px; min-height:580px;
  border-radius:26px; overflow:hidden;
  box-shadow:var(--sh-card);
  position:relative; z-index:1;
  animation:cardIn 0.75s cubic-bezier(0.34,1.25,0.64,1) both;
}

#carrusel {
  width:42%; min-height:580px;
  position:relative; overflow:hidden;
  background:var(--g-950); flex-shrink:0;
}

.carousel-inner2 {
  display:flex; width:100%; height:100%;
  transition:transform 1.1s cubic-bezier(0.45,0,0.55,1);
}
.slide {
  min-width:100%; height:100%;
  object-fit:cover;
  filter:brightness(0.50) saturate(1.1);
}

#carrusel::before {
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(175deg,rgba(1,26,18,0.60) 0%,rgba(4,120,87,0.20) 50%,rgba(1,26,18,0.75) 100%);
  pointer-events:none;
}

.left-content {
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column;
  justify-content:space-between; padding:30px 26px;
}

.left-badge {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(16,185,129,0.16); border:1px solid rgba(52,211,153,0.28);
  border-radius:99px; padding:5px 14px;
  font-size:10px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--g-200); backdrop-filter:blur(12px);
  align-self:flex-start; animation:fadeInDown 0.7s ease-out 0.25s backwards;
}
.left-badge span {
  width:6px; height:6px; border-radius:50%;
  background:var(--g-300); box-shadow:0 0 8px var(--g-300); flex-shrink:0;
}

.left-bottom { animation:fadeInUp 0.7s ease-out 0.35s backwards; }

.left-logo-row {
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.left-logo-row img {
  width:44px; height:44px;
  filter:brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}
.left-logo-row .brand {
  font-family:'Syne',sans-serif; font-size:12px; font-weight:700;
  color:rgba(255,255,255,0.80); letter-spacing:0.20em; text-transform:uppercase;
}

.left-title {
  font-family:'Syne',sans-serif; font-size:25px; font-weight:800;
  color:#fff; line-height:1.2;
  text-shadow:0 2px 18px rgba(1,26,18,0.55); margin-bottom:8px;
}
.left-sub {
  font-size:11px; font-weight:400; color:rgba(255,255,255,0.55);
  letter-spacing:0.18em; text-transform:uppercase; margin-bottom:20px;
}

.dot-row { display:flex; gap:6px; align-items:center; }
.dot {
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,0.28); cursor:pointer;
  transition:var(--transition); border:none;
}
.dot.active {
  width:22px; height:7px; border-radius:4px;
  background:var(--g-300); box-shadow:0 0 10px rgba(52,211,153,0.55);
}
.dot:hover { background:rgba(255,255,255,0.55); }

.login {
  flex:1; display:flex; flex-direction:column; justify-content:center;
  padding:50px 46px; background:var(--card-bg); position:relative; overflow:hidden;
}
.login::before {
  content:''; position:absolute; top:-70px; right:-70px;
  width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle,rgba(16,185,129,0.06) 0%,transparent 65%); pointer-events:none;
}
.login::after {
  content:''; position:absolute; bottom:-60px; left:-60px;
  width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle,rgba(5,150,105,0.05) 0%,transparent 65%);
  pointer-events:none; animation:drift 14s ease-in-out infinite reverse;
}

#centrarlogo {
  display:flex; align-items:center; gap:10px; margin-bottom:22px;
  position:relative; z-index:1; animation:fadeInDown 0.6s ease-out 0.1s backwards;
}
#imglogo {
  width:38px; height:38px;
  filter:drop-shadow(0 2px 8px rgba(5,150,105,0.22)); transition:var(--transition);
}
#imglogo:hover { transform:scale(1.10) rotate(4deg); }

.letras {
  font-family:'Syne',sans-serif; font-size:12px; font-weight:700;
  color:var(--g-600); letter-spacing:0.18em; text-transform:uppercase;
}

.login-welcome {
  font-family:'Syne',sans-serif; font-size:26px; font-weight:800;
  color:var(--tx-dark); line-height:1.2; letter-spacing:-0.01em; margin-bottom:6px;
  position:relative; z-index:1; animation:fadeInUp 0.6s ease-out 0.15s backwards;
}
.login-sub {
  font-size:13px; color:var(--tx-soft); font-weight:400; margin-bottom:28px;
  position:relative; z-index:1; animation:fadeInUp 0.6s ease-out 0.20s backwards;
}

/* Mensajes de error Django */
.messages { list-style:none; margin-bottom:14px; padding:0; }
.messages li {
  padding:10px 14px; border-radius:8px; font-size:13px; font-weight:500;
  background:#fef2f2; color:#dc2626; border:1px solid #fecaca; margin-bottom:6px;
}

.formulario { display:flex; flex-direction:column; gap:14px; position:relative; z-index:1; }
.formulario label {
  display:block; font-size:12px; font-weight:600;
  color:var(--tx-mid); margin-bottom:5px; letter-spacing:0.03em;
}
.formulario input {
  width:100%; padding:13px 15px; font-size:14px;
  font-family:'DM Sans',sans-serif;
  border:1.5px solid var(--border); border-radius:10px;
  background:#f6fdfb; color:var(--tx-dark);
  transition:var(--transition); outline:none;
  box-shadow:inset 0 1px 3px rgba(5,150,105,0.03);
}
.formulario input::placeholder { color:#adb5bd; font-weight:300; }
.formulario input:focus {
  border-color:var(--g-500); background:#fff;
  box-shadow:0 0 0 3px rgba(16,185,129,0.13);
}

.formulario button, #ingresoBoton {
  width:100%; padding:15px;
  font-family:'DM Sans',sans-serif; font-size:14px; font-weight:700;
  letter-spacing:0.05em; color:#fff;
  background:linear-gradient(135deg, var(--g-500) 0%, var(--g-800) 100%);
  border:none; border-radius:11px; cursor:pointer;
  transition:var(--transition); position:relative; overflow:hidden;
  box-shadow:var(--sh-em); margin-top:4px;
}
.formulario button::before, #ingresoBoton::before {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.16),transparent);
  transition:left 0.55s ease;
}
.formulario button:hover::before, #ingresoBoton:hover::before { left:100%; }
.formulario button::after, #ingresoBoton::after {
  content:''; position:absolute; inset:-3px; border-radius:14px;
  border:2px solid rgba(16,185,129,0.35);
  animation:pulseRing 2.5s ease-out infinite; pointer-events:none;
}
.formulario button:hover, #ingresoBoton:hover {
  transform:translateY(-2px);
  box-shadow:0 14px 38px rgba(5,150,105,0.38);
  background:linear-gradient(135deg, var(--g-400) 0%, var(--g-700) 100%);
}
.formulario button:active, #ingresoBoton:active { transform:translateY(0) scale(0.98); }

@keyframes cardIn    { from{opacity:0;transform:translateY(28px) scale(0.97)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes fadeInUp   { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInDown { from{opacity:0;transform:translateY(-14px)} to{opacity:1;transform:translateY(0)} }
@keyframes drift { 0%,100%{transform:translate(0,0)} 33%{transform:translate(18px,-14px)} 66%{transform:translate(-10px,10px)} }
@keyframes pulseRing { 0%{opacity:0.8;transform:scale(1)} 100%{opacity:0;transform:scale(1.08)} }

::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--g-25); border-radius:3px; }
::-webkit-scrollbar-thumb { background:var(--g-300); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--g-500); }

@media (max-width:680px) {
  body { padding:0; align-items:stretch; }
  .contenedor_padre { flex-direction:column; border-radius:0; max-width:100%; min-height:100vh; }
  #carrusel { width:100%; min-height:220px; }
  .login { padding:32px 22px; }
}