/* RHNUBE Auth — tokens y estilos base compartidos (MaterialM) */

:root {
  --color-primary: var(--rhnube-admin-primary);
  --color-primary-hover: var(--rhnube-admin-primary-hover);
  --color-cyan: var(--rhnube-admin-primary);
  --color-cyan-dark: var(--rhnube-admin-primary-hover);
  --color-info: var(--rhnube-portal-primary);
  --color-info-hover: var(--rhnube-portal-primary-hover);

  --bg: #f6f9fc;
  --color-deep: #2a3547;
  --color-deep-mid: #1f2a3d;
  --btn-shadow: rgba(var(--rhnube-admin-accent-rgb), 0.35) 0 4px 12px -3px;
  --glow: rgba(var(--rhnube-admin-accent-rgb), 0.1);
  --ring: rgba(var(--rhnube-admin-accent-rgb), 0.06);
  --on-bg: #2a3547;
  --on-bg-muted: #5a6a85;
  --on-bg-subtle: #7c8fac;
  --card-shadow: rgba(0, 0, 0, 0.08) 0 0 4px 0;
  --card-shadow-hover: rgba(0, 0, 0, 0.12) 0 9px 24px -6px;

  --color-text: #2a3547;
  --color-text-muted: #5a6a85;
  --color-text-subtle: #7c8fac;
  --color-link: var(--rhnube-admin-primary);
  --color-border: #ebf1f6;
  --color-surface: #ffffff;
  --color-input-bg: #eff4fa;

  --color-warning-bg: #fff8ec;
  --color-warning-border: #f0a020;
  --color-warning-text: #7a4a10;

  --radius-sm: 5px;
  --radius-md: 7px;

  --font: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-head: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-brand: "Plus Jakarta Sans", sans-serif;
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-text);
}

button,
input,
a,
select {
  font: inherit;
  color: inherit;
}

a {
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

/* Shell compartido (topbar + footer + layout) */
.auth-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--on-bg);
  font-family: var(--font);
}

.auth-shell__body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.auth-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 28px;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  box-shadow: rgba(0, 0, 0, 0.04) 0 1px 6px;
}

.auth-topbar__brand {
  display: inline-flex;
  align-items: center;
  color: var(--on-bg);
}

.auth-topbar__brand img {
  height: 32px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}

.auth-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px 24px 28px;
  font-size: 12.5px;
  color: var(--on-bg-subtle);
}

.auth-footer a {
  color: var(--on-bg-muted);
  font-weight: 500;
}

.auth-footer a:hover {
  color: var(--color-primary);
}

@media (max-width: 720px) {
  .auth-shell__body {
    padding: 24px 16px;
  }

  .auth-topbar {
    padding: 10px 16px;
  }

  .auth-topbar__brand img {
    height: 28px;
    max-width: 120px;
  }
}