/* assets/css/auth.css */

.pantalla-auth { 
  min-height: 100vh; 
  display: grid; 
  grid-template-columns: 1fr; 
}

@media (min-width: 860px) {
  .pantalla-auth { 
    grid-template-columns: 5fr 6fr; 
  }
}

.panel-marca {
  background: var(--graphite-900);
  color: var(--ink-on-graphite);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.panel-marca .wordmark { 
  font-size: var(--text-xl); 
  font-weight: 700; 
  letter-spacing: -0.01em; 
  margin-bottom: var(--space-3); 
}

.panel-marca .wordmark .mono { color: var(--signal-amber); }
.panel-marca p { color: var(--ink-on-graphite-muted); max-width: 34ch; font-size: var(--text-base); margin: 0; }
.panel-marca .diagrama-circuito { position: absolute; right: -60px; bottom: -60px; opacity: 0.5; pointer-events: none; }

.panel-formulario { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  padding: var(--space-6); 
  background: var(--paper); 
}

.tarjeta-formulario { 
  width: 100%; 
  max-width: 380px; 
}

.tarjeta-formulario h1 { font-size: var(--text-xl); margin-top: 0; margin-bottom: var(--space-1); }
.tarjeta-formulario .subtitulo { color: var(--ink-muted); font-size: var(--text-sm); margin-bottom: var(--space-5); }

.enlace-secundario { display: block; text-align: center; margin-top: var(--space-5); font-size: var(--text-sm); }

.mensaje-info { 
  background: var(--paper-raised); 
  border: 1px solid var(--line); 
  border-radius: var(--radius-sm); 
  padding: var(--space-4); 
  font-size: var(--text-sm); 
  color: var(--ink-muted); 
  margin-bottom: var(--space-4); 
}

/* Dispositivos móviles pequeños (< 576px) */
@media (max-width: 576px) {
  .panel-marca {
    padding: var(--space-6) var(--space-4);
  }
  .panel-formulario {
    padding: var(--space-4);
  }
}