/* ==========================================================================
   TechStudi — marca para la pantalla de acceso de SOGo
   Inyectado por nginx (sub_filter) en /etc/nginx/sites-available/webmail.conf.
   No modifica ficheros del paquete sogo: sobrevive a las actualizaciones.
   Paleta y tipografia tomadas de www.techstudi.com.
   ========================================================================== */
@import url("fonts.css");

:root {
  --ts-bg-0: #05101f;
  --ts-bg-1: #07182a;
  --ts-bg-2: #0c2238;
  --ts-ink: #e8f1ff;
  --ts-ink-2: #b8c6dc;
  --ts-ink-3: #8497b3;
  --ts-ink-dark: #0a1a2f;
  --ts-muted-dark: #5a6b82;
  --ts-cy: #00e5ff;
  --ts-cy-2: #00b4d8;
  --ts-mg: #ff3dcb;
  --ts-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --ts-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

/* ---------- Fondo ---------- */
body.main,
body.main main[ui-view="login"] {
  background-color: var(--ts-bg-0) !important;
}
body.main main[ui-view="login"] {
  background-image:
    radial-gradient(60rem 40rem at 12% 8%, rgba(0, 229, 255, .16), transparent 60%),
    radial-gradient(50rem 36rem at 92% 96%, rgba(255, 61, 203, .13), transparent 60%),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) !important;
  background-size: auto, auto, 44px 44px, 44px 44px !important;
  min-height: 100vh;
  align-items: center !important;
}
body.main main[ui-view="login"] > md-content {
  justify-content: center;
  padding: 24px;
}

/* ---------- Tarjeta ---------- */
#loginContent {
  flex: 0 0 auto !important;
  width: 100%;
  max-width: 940px;
  margin: 0 auto !important;
  background: transparent !important;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 229, 255, .18), 0 40px 90px -30px rgba(0, 0, 0, .75) !important;
}

/* ---------- Panel de marca ---------- */
#loginContent .sg-logo {
  position: relative;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 56px 52px;
  color: var(--ts-ink);
  background:
    radial-gradient(28rem 20rem at 0% 0%, rgba(0, 229, 255, .20), transparent 70%),
    radial-gradient(22rem 18rem at 100% 100%, rgba(255, 61, 203, .16), transparent 70%),
    linear-gradient(160deg, var(--ts-bg-2), var(--ts-bg-1) 55%, var(--ts-bg-0));
  border-right: 1px solid rgba(255, 255, 255, .06);
}
#loginContent .sg-logo img,
#loginContent .sg-logo .md-flex { display: none !important; }

#loginContent .sg-logo > .md-padding {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
}
/* Marca "TS" */
#loginContent .sg-logo > .md-padding::before {
  content: "TS";
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--ts-bg-0);
  color: var(--ts-cy);
  font: 700 28px/1 var(--ts-mono);
  letter-spacing: -.02em;
  box-shadow: 0 0 0 1px rgba(0, 229, 255, .45), 0 0 32px rgba(0, 229, 255, .30);
}
/* Nombre */
#loginContent .sg-logo > .md-padding::after {
  content: "TechStudi";
  margin-top: 28px;
  font: 700 46px/1.02 var(--ts-display);
  letter-spacing: -.03em;
  background: linear-gradient(90deg, #ffffff 0%, var(--ts-ink) 55%, var(--ts-cy) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
/* Subtitulo */
#loginContent .sg-logo::after {
  content: "Correo corporativo";
  margin-top: 12px;
  font: 500 17px/1.4 var(--ts-display);
  color: var(--ts-ink-2);
}
/* Linea de acento */
#loginContent .sg-logo::before {
  content: "● conexión cifrada";
  position: absolute;
  left: 52px;
  bottom: 30px;
  font: 500 11px/1 var(--ts-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ts-ink-3);
}

/* ---------- Panel del formulario ---------- */
#loginContent .sg-login {
  background: #ffffff !important;
  color: var(--ts-ink-dark) !important;
  display: flex;
  align-items: center;
}
#loginContent .sg-login-content {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 48px 40px 40px !important;
}
#loginContent .sg-login-content form::before {
  content: "Iniciar sesión";
  order: -2;
  display: block;
  margin: 0 0 6px 2px;
  font: 700 28px/1.15 var(--ts-display);
  letter-spacing: -.02em;
  color: var(--ts-ink-dark);
}
#loginContent .sg-login-content form::after {
  content: "Usa tu dirección de correo completa";
  order: -1;
  display: block;
  margin: 0 0 28px 2px;
  font-size: 14px;
  color: var(--ts-muted-dark);
}

#loginContent md-input-container label,
#loginContent md-input-container .md-placeholder,
#loginContent md-select .md-select-value,
#loginContent md-select .md-select-value.md-select-placeholder {
  color: var(--ts-muted-dark) !important;
}
#loginContent md-input-container .md-input,
#loginContent md-select .md-select-value {
  color: var(--ts-ink-dark) !important;
  border-bottom-color: rgba(10, 26, 47, .18) !important;
}
#loginContent md-icon {
  color: rgba(10, 26, 47, .55) !important;
}
#loginContent md-input-container.md-input-focused label { color: var(--ts-cy-2) !important; }
#loginContent md-input-container.md-input-focused .md-input,
#loginContent md-select:focus .md-select-value {
  border-bottom-color: var(--ts-cy-2) !important;
}
#loginContent md-input-container.md-input-focused md-icon { color: var(--ts-cy-2) !important; }
#loginContent md-input-container.md-input-invalid label { color: #d93a73 !important; }

/* Interruptor "Recordar usuario" */
#loginContent md-switch .md-label { color: var(--ts-ink-dark) !important; }
#loginContent md-switch .md-bar { background-color: rgba(10, 26, 47, .22) !important; }
#loginContent md-switch .md-thumb { background-color: #fafafa !important; }
#loginContent md-switch.md-checked .md-bar { background-color: rgba(0, 180, 216, .45) !important; }
#loginContent md-switch.md-checked .md-thumb { background-color: var(--ts-cy-2) !important; }

/* Boton "acerca de SOGo": fuera */
#loginContent .sg-login-content .md-icon-button { visibility: hidden; }

/* Boton de entrar */
#loginContent .md-fab.md-accent {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--ts-cy), var(--ts-cy-2)) !important;
  box-shadow: 0 10px 28px -8px rgba(0, 180, 216, .7) !important;
}
#loginContent .md-fab.md-accent md-icon { color: var(--ts-bg-0) !important; }
#loginContent .md-fab.md-accent[disabled] {
  background: rgba(10, 26, 47, .08) !important;
  box-shadow: none !important;
}
#loginContent .md-fab.md-accent[disabled] md-icon { color: rgba(10, 26, 47, .30) !important; }

/* Transicion al entrar (circulo que llena la pantalla) */
main[ui-view="login"] sg-ripple { background-color: var(--ts-bg-0) !important; }

/* Pie */
body.main main[ui-view="login"] > md-content::after {
  content: "© TechStudi · Custom Software Engineering";
  display: block;
  text-align: center;
  margin-top: 22px;
  font: 500 11px/1 var(--ts-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ts-ink-3);
  opacity: .8;
}

/* ---------- Movil ---------- */
@media (max-width: 1279px) {
  body.main main[ui-view="login"] > md-content { padding: 16px; }
  #loginContent { max-width: 480px; border-radius: 18px; }
  #loginContent .sg-logo {
    padding: 32px 28px 30px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
  }
  #loginContent .sg-logo > .md-padding { flex-direction: row; align-items: center; }
  #loginContent .sg-logo > .md-padding::before { width: 48px; height: 48px; font-size: 21px; border-radius: 12px; }
  #loginContent .sg-logo > .md-padding::after { margin: 0 0 0 16px; font-size: 32px; }
  #loginContent .sg-logo::after { margin-top: 14px; font-size: 15px; }
  #loginContent .sg-logo::before { display: none; }
  #loginContent .sg-login-content { padding: 30px 26px 26px !important; }
  #loginContent .sg-login-content form::before { font-size: 24px; }
  #loginContent .sg-login-content form::after { margin-bottom: 20px; }
}