/* ============================================================
   login.css  –  estilos exclusivos de login.html
   ============================================================ */

.login-card,
.recovery-card {
  background: white;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 2.5rem 2rem;
  margin-top: 3rem;
}

.login-logo { text-align: center; margin-bottom: 2rem; }

.logo-circle {
  width: 72px; height: 72px;
  background: var(--color-principal);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: .75rem;
}
.logo-circle i  { color: white; font-size: 2rem; }
.login-logo h1  { font-size: 1.5rem; font-weight: 700; color: var(--color-principal); margin: 0; }
.login-logo p   { color: #888; font-size: .9rem; margin: .2rem 0 0; }

.link-forgot {
  color: var(--color-principal); font-size: .9rem; text-decoration: none;
}
.link-forgot:hover { text-decoration: underline; }

#login-error,
#recovery-msg {
  text-align: center;
  margin-top: .75rem;
  font-size: .88rem;
}

.tecnico-card {
  margin-top: 1.25rem;
  border: 1px solid var(--color-principal-palido, #f5c4a8);
  border-radius: 10px;
  overflow: hidden;
}
.tecnico-header {
  background: var(--color-principal);
  color: white;
  padding: .6rem 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .9rem;
}
.tecnico-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 1rem;
  border-top: 1px solid #f0f0f0;
  font-size: .9rem;
  color: #333;
}
.tecnico-row i { color: var(--color-principal); width: 1rem; text-align: center; }
.tecnico-row a { color: #333; text-decoration: none; }
.tecnico-row a:hover { text-decoration: underline; }