/* Login and Cuentas use the same internal palette and app shell. */
body.team-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: var(--bg);
}
body.team-login .login-wrap {
  width: min(100%, 440px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.team-login .brand-area { text-align: center; margin-bottom: 30px; }
body.team-login .brand-logo-wrap { display: flex; justify-content: center; margin-bottom: 14px; }
body.team-login .brand-logo { width: 148px; height: auto; }
body.team-login .brand-eyebrow {
  color: var(--text3);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
}
body.team-login .card {
  width: 100%;
  padding: 34px 34px 30px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow);
}
body.team-login .card-title {
  margin: 0 0 7px;
  color: var(--text);
  font: 600 27px/1.2 'Anybody', var(--font-display);
  letter-spacing: -.035em;
}
body.team-login .card-sub {
  margin: 0 0 26px;
  color: var(--text3);
  font-size: 14px;
  line-height: 1.5;
}
body.team-login .field { margin-bottom: 18px; }
/* "Mostrar" la contraseña (Pulido 1003): dentro del campo, a la derecha, con el alto del campo para tocarlo fácil. */
body.team-login .field-clave { position: relative; }
body.team-login .field-clave input { padding-right: 92px; }
body.team-login .ver-clave {
  position: absolute; right: 1px; bottom: 1px;
  min-width: 80px; min-height: 44px; padding: 0 12px;
  border: 0; border-radius: 0 7px 7px 0; background: transparent;
  color: var(--accent); font: 600 13px var(--font-sans); cursor: pointer;
}
body.team-login .ver-clave[aria-pressed="true"] { background: var(--accent-s); }
body.team-login .field label,
body.team-accounts .field label {
  display: block;
  margin-bottom: 7px;
  color: var(--text2);
  font-size: 12px;
  font-weight: 600;
}
body.team-login .field input,
body.team-accounts .field input,
body.team-accounts .field select,
body.team-accounts .reset input {
  width: 100%;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid var(--border-s);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font: 400 16px/1.35 var(--font-sans);
}
body.team-login .field input::placeholder,
body.team-accounts .field input::placeholder,
body.team-accounts .reset input::placeholder { color: var(--text3); }
body.team-login .field input:focus,
body.team-accounts .field input:focus,
body.team-accounts .field select:focus,
body.team-accounts .reset input:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-s);
  outline-offset: 1px;
}
body.team-login .btn,
body.team-accounts .btn {
  min-height: 44px;
  padding: 10px 17px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font: 600 14px/1.3 var(--font-sans);
  cursor: pointer;
}
body.team-login .btn:hover,
body.team-accounts .btn:hover { background: var(--accent2); }
body.team-login .btn:disabled,
body.team-accounts .btn:disabled,
body.team-accounts .btn-sec:disabled { opacity: .6; cursor: not-allowed; }
body.team-login .btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}
body.team-login .btn-arrow { width: 17px; height: 17px; }
body.team-login .error,
body.team-accounts .aviso {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 13px;
  margin-bottom: 17px;
  font-size: 13px;
  line-height: 1.45;
}
body.team-login .error { display: none; background: var(--red-s); color: var(--red); border-color: var(--red); }
body.team-login .client-link {
  margin: 23px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--text3);
  text-align: center;
  font-size: 13px;
}
body.team-login .client-link a { display: inline-flex; align-items: center; min-height: 32px; padding: 5px 2px; color: var(--accent2); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
body.team-login .footer { margin-top: 24px; text-align: center; }
body.team-login .footer-disclaimer { color: var(--text3); font-size: 11px; line-height: 1.4; }

body.team-accounts .wrap { width: 100%; max-width: 1250px; margin-inline: auto; }
body.team-accounts .volver {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin-bottom: 18px;
  color: var(--accent2);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
body.team-accounts .volver:hover { text-decoration: underline; text-underline-offset: 3px; }
body.team-accounts h1 {
  margin: 0 0 6px;
  color: var(--text);
  font: 600 30px/1.2 var(--font-display);
  letter-spacing: -.035em;
}
body.team-accounts .sub { margin: 0 0 26px; color: var(--text3); font-size: 14px; line-height: 1.5; }
body.team-accounts #panel {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(290px, 1fr);
  align-items: start;
  gap: 24px;
}
body.team-accounts .card {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow);
}
body.team-accounts .card-title {
  margin: 0 0 18px;
  color: var(--text);
  font: 600 18px/1.3 var(--font-display);
  letter-spacing: -.02em;
}
body.team-accounts .aviso { display: none; }
body.team-accounts .aviso.ok { display: block; color: var(--green); background: var(--green-s); border-color: var(--green); }
body.team-accounts .aviso.mal { display: block; color: var(--red); background: var(--red-s); border-color: var(--red); }
body.team-accounts .lista { list-style: none; margin: 0; padding: 0; }
body.team-accounts .cuenta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 16px;
  align-items: center;
  padding: 15px 0;
  border-top: 1px solid var(--border);
}
body.team-accounts .cuenta:first-child { border-top: 0; padding-top: 0; }
body.team-accounts .cuenta.inactiva .nombre,
body.team-accounts .cuenta.inactiva .email { opacity: .62; }
body.team-accounts .fila { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; min-width: 0; }
body.team-accounts .nombre { color: var(--text); font-size: 14px; font-weight: 600; }
body.team-accounts .email { grid-column: 1; min-width: 0; color: var(--text3); font-size: 12px; overflow-wrap: anywhere; }
body.team-accounts .chip {
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: var(--bg2);
  color: var(--text2);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
}
body.team-accounts .chip.off { background: var(--orange-s); color: var(--orange); border-color: var(--orange); }
body.team-accounts .acciones {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}
body.team-accounts .reset { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
body.team-accounts .reset input { flex: 1 1 185px; }
body.team-accounts .field { margin-bottom: 17px; }
body.team-accounts .ayuda { margin-top: 6px; color: var(--text3); font-size: 12px; line-height: 1.4; }
body.team-accounts .btn-sec {
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid var(--border-s);
  border-radius: 8px;
  background: var(--card);
  color: var(--text2);
  font: 600 12px/1.3 var(--font-sans);
  cursor: pointer;
  text-decoration: none;
}
body.team-accounts .btn-sec:hover { background: var(--bg2); color: var(--text); }
body.team-accounts .btn-sec.peligro { color: var(--red); }
body.team-accounts .botones { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 5px; }
body.team-accounts [hidden] { display: none !important; }
@media (max-width: 1100px) {
  body.team-accounts #panel { grid-template-columns: 1fr; }
  body.team-accounts .wrap { max-width: 760px; }
}
@media (max-width: 600px) {
  body.team-login { padding: 28px 16px; }
  body.team-login .card { padding: 27px 22px 25px; }
  body.team-login .card-title { font-size: 25px; }
  body.team-accounts .wrap { padding-inline: 16px; }
  body.team-accounts h1 { font-size: 27px; }
  body.team-accounts #panel { gap: 15px; }
  body.team-accounts .card { padding: 19px 17px; }
  body.team-accounts .cuenta,
  body.team-accounts .cuenta:first-child {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg);
  }
  body.team-accounts .cuenta + .cuenta { margin-top: 12px; }
  body.team-accounts .email,
  body.team-accounts .acciones,
  body.team-accounts .reset { grid-column: 1; grid-row: auto; }
  body.team-accounts .acciones { justify-content: flex-start; margin-top: 6px; }
  body.team-accounts .reset { padding-top: 2px; }
  body.team-accounts .btn,
  body.team-accounts .btn-sec { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  body.team-login *, body.team-accounts * { animation: none !important; transition: none !important; }
}