:root{
  /* Colores y Variables */
  --bg: #070D10; /* Un negro aún más profundo para el fondo */
  --card: #141A20; /* Color de la tarjeta, ligeramente más claro que el fondo */
  --muted: #9aa3a6; /* Texto secundario */
  --accent: #19c37d; /* Verde vibrante para el foco */
  --accent-dark: #14975d; /* Variante oscura para gradientes */
  --glass: rgba(255,255,255,0.06); /* Ligeramente más opaco para inputs */
  --radius: 12px; /* Redondeo uniforme */
  --text: #e9f1ef; /* Color principal del texto */
  --maxw: 1100px;
  
  /* Tipografía */
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Base y Body */
*, *::before, *::after {
  box-sizing: border-box;
}
html, body { 
  height: 100%; 
  margin: 0;
}
body {
  /* Gradiente con un toque sutil del acento para profundidad */
  background: linear-gradient(150deg, var(--bg) 0%, #0b0f12 70%, rgba(25, 195, 125, 0.02) 100%);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Navegacion y Marca */
.topbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 25px; /* Más padding para aire */
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), transparent);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.brand{
  font-weight: 800; /* Más énfasis */
  font-size: 1.2em;
  letter-spacing: 1px;
  color: var(--accent);
  /* Efecto de brillo sutil para resaltar la marca */
  text-shadow: 0 0 8px rgba(25, 195, 125, 0.4); 
}
.nav-actions .btn{margin-left:8px}

.container{
  max-width:var(--maxw);
  margin:22px auto;
  width:94%;
  flex:1;
}

/* Layout y Tarjetas */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border-radius:var(--radius);
  padding:20px;
  /* Sombra más sofisticada y menos opaca */
  box-shadow: 0 8px 30px rgba(0,0,0,0.5); 
  margin-bottom:20px;
  border:1px solid rgba(255,255,255,0.05);
}

/* Contenedor de Login (Mejoras Visuales) */
.center{
  max-width: 400px; /* Ligeramente más estrecho para enfocar */
  margin: 80px auto; /* Más margen superior para centrar verticalmente */
  text-align: center;
  padding: 30px; /* Más padding interno */
  background: var(--card);
  border-radius: var(--radius);
  /* Sombra con efecto "levantado" y un brillo sutil interno del acento */
  box-shadow: 0 10px 40px rgba(0,0,0,0.7), inset 0 0 12px rgba(25, 195, 125, 0.08); 
  border: 1px solid rgba(255,255,255,0.08);
}
.center h2{ /* Estilo para el título "Iniciar sesión" */
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--text);
}


/* Elementos de Formulario (Input Fields) */
.form input, .weather-actions input, select{
  width: 100%;
  padding: 14px 16px; /* Más padding */
  background: var(--glass);
  border: 1px solid rgba(255,255,255,0.08); /* Borde más visible */
  color: var(--text);
  border-radius: 10px;
  margin-bottom: 15px; /* Más espacio entre campos */
  outline: none;
  transition: border 0.2s ease, box-shadow 0.2s ease; /* Transiciones suaves */
}
/* Efecto Focus: Borde de color Accent */
.form input:focus {
  border: 1px solid var(--accent);
  box-shadow: 0 0 10px rgba(25, 195, 125, 0.4); /* Brillo al enfocar */
}
/* Placeholders más sutiles */
.form input::placeholder {
    color: color-mix(in srgb, var(--text) 50%, transparent); 
}

.form button{width:100%}
.muted{color:var(--muted)}
.small{font-size:13px}
.error{color:#ff6b6b}

/* Botones (Mejorados) */
.btn{
  padding: 10px 14px; /* Más padding vertical */
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease; /* Transiciones */
}
.btn.primary{
    background: linear-gradient(180deg, var(--accent), var(--accent-dark)); 
    color: var(--card); /* Color de texto que contrasta */
    /* Sombra que levanta el botón y le da un brillo de acento */
    box-shadow: 0 6px 20px rgba(20,160,100,0.4), 0 0 10px rgba(25, 195, 125, 0.6);
}
/* Efecto Hover: Ligeramente más claro y sombra más suave */
.btn.primary:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 95%, #fff), var(--accent));
    box-shadow: 0 4px 15px rgba(20,160,100,0.3);
}

.btn:active{transform:translateY(1px); box-shadow: none;}


/* Footer: Información de Versión y Copyright */
.footer{
    padding: 25px 18px 18px; /* Más espacio */
    text-align: center;
    color: var(--muted);
    border-top: 1px solid rgba(255,255,255,0.02);
    font-size: 13px;
}
.footer-info { /* Para la información de la demo */
    display: block;
    font-size: 11px;
    color: color-mix(in srgb, var(--muted) 80%, transparent); 
    margin-top: 4px;
    letter-spacing: 0.5px;
}


/* Otros estilos (manteniendo tu código original para no afectar otras secciones) */
.hidden{display:none}
.row{display:flex;align-items:center}
.row.between{justify-content:space-between}
.small-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:12px}
@media (max-width:900px){ .grid-2,.grid-3{grid-template-columns:1fr} }
.btn.ghost{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,0.03)}
.btn.outline{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}
.panel{background:rgba(255,255,255,0.02);padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.02)}
.small .panel{padding:8px}
.planter{padding:14px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.02)}
.planter-stats{display:flex;gap:10px;margin:8px 0}
.stat{flex:1;text-align:center}
.stat-value{font-weight:700;font-size:20px;color:var(--accent)}
.stat-label{font-size:13px;color:var(--muted)}
.weather-left{flex:1}
.weather-right{width:220px;padding-left:12px}
.city{font-size:20px;font-weight:700}
.temp{font-size:36px;font-weight:800;color:var(--accent)}
.desc{font-size:14px;margin-top:6px}
.events{padding-left:16px}
.row .controls{display:flex;gap:8px}
select, input[type=number]{max-width:160px}