/* ==========================================================================
   2M Equipment — marca para webmail.2mequipment.com
   Se inyecta SOLO en ese dominio (map $host en /etc/nginx/conf.d/marca-por-dominio.conf),
   despues de brand.css y mail.css: redefine sus variables, no duplica la plantilla.
   Colores tomados del logo de 2mequipment.com: rojo #fd0000, negro y blanco.
   ========================================================================== */
:root {
  /* Oscuros: negro en lugar del azul noche */
  --ts-navy:   #141414;
  --ts-navy-2: #1f1f1f;
  --ts-navy-3: #161616;
  --ts-bg-0:   #0b0b0b;
  --ts-bg-1:   #141414;
  --ts-bg-2:   #1f1f1f;
  --ts-ink-dark: #141414;
  --ts-muted-dark: #6b6b6b;
  /* Acento: rojo de la marca. El vivo solo para fondos oscuros y botones;
     para texto sobre blanco se usa uno mas oscuro, que si tiene contraste suficiente. */
  --ts-cy:      #ff2b2b;
  --ts-cy-2:    #d31414;
  --ts-cy-ink:  #b31111;
  --ts-cy-wash: #fdecec;
  --ts-mg:      #ff2b2b;   /* el segundo color del fondo del acceso, tambien rojo */
}

/* ---------- Logo en la pantalla de acceso ---------- */
/* El monograma "TS" se sustituye por el logo, sobre una pastilla blanca (el logo lleva negro) */
#loginContent .sg-logo > .md-padding::before {
  content: "" !important;
  width: 104px !important;
  height: 104px !important;
  border-radius: 20px !important;
  background: #ffffff url("/techstudi-brand/2meq/logo.png") center / 74% no-repeat !important;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .8);
}
#loginContent .sg-logo > .md-padding::after { content: "2M Equipment" !important; }
body.main main[ui-view="login"] > md-content::after { content: "© 2M Equipment" !important; }

@media (max-width: 1279px) {
  #loginContent .sg-logo > .md-padding::before {
    width: 64px !important; height: 64px !important; border-radius: 14px !important;
  }
}

/* ---------- Chat (chat.css lleva los colores escritos a mano) ---------- */
#conversejs,
.conversejs[data-converse-theme],
converse-root[data-converse-theme] {
  --blue: #141414 !important;
  --blue-rgb: 20, 20, 20 !important;
  --dark-blue: #0b0b0b !important;
  --light-blue: #d31414 !important;
  --light-blue-rgb: 211, 20, 20 !important;
  --lighter-blue: #fdecec !important;
  --green: #d31414 !important;
  --green-rgb: 211, 20, 20 !important;
  --dark-green: #b31111 !important;
  --orange: #1f1f1f !important;
  --orange-rgb: 31, 31, 31 !important;
  --redder-orange: #1f1f1f !important;
  --background-color: #f5f5f5 !important;
  --background-color-rgb: 245, 245, 245 !important;
  --primary-color: #141414 !important;
  --secondary-color: #d31414 !important;
  --chat-color: #141414 !important;
  --chat-color-hover: #1f1f1f !important;
  --chat-rgb: 20, 20, 20 !important;
  --muc-color: #1f1f1f !important;
  --muc-color-hover: #141414 !important;
  --muc-rgb: 31, 31, 31 !important;
  --controlbox-color: #141414 !important;
  --heading-color: #141414 !important;
  --link-color: #b31111 !important;
}
#conversejs converse-chats.converse-overlayed .toggle-controlbox {
  background: linear-gradient(160deg, #1f1f1f, #141414) !important;
  box-shadow: 0 0 0 1px rgba(253, 0, 0, .3), 0 -6px 20px -8px rgba(0, 0, 0, .5);
}
#conversejs converse-chats.converse-overlayed .toggle-controlbox::before { background: #ff2b2b; }

/* ---------- Avatares de la lista de correo (gris azulado -> gris neutro) ---------- */
body[ng-app="SOGo.MailerUI"] sg-avatar-image .sg-icon-badge-container { background: #ededed; }
.sg-message-list-item.md-accent.md-bg.md-hue-2 sg-avatar-image .sg-icon-badge-container { background: #f6dede; }
.sg-message-list-item.md-accent.md-bg.md-hue-2 sg-avatar-image md-icon[ng-transclude] { color: #b07070 !important; }

/* ---------- Fondo del acceso: brand.css lleva el cian escrito a mano ---------- */
body.main main[ui-view="login"] {
  background-image:
    radial-gradient(60rem 40rem at 12% 8%, rgba(253, 0, 0, .16), transparent 60%),
    radial-gradient(50rem 36rem at 92% 96%, rgba(255, 90, 90, .10), transparent 60%),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) !important;
}
#loginContent {
  box-shadow: 0 0 0 1px rgba(253, 0, 0, .22), 0 40px 90px -30px rgba(0, 0, 0, .8) !important;
}
#loginContent .sg-logo {
  background:
    radial-gradient(28rem 20rem at 0% 0%, rgba(253, 0, 0, .18), transparent 70%),
    radial-gradient(22rem 18rem at 100% 100%, rgba(255, 90, 90, .12), transparent 70%),
    linear-gradient(160deg, var(--ts-bg-2), var(--ts-bg-1) 55%, var(--ts-bg-0)) !important;
}
main[ui-view="login"] sg-ripple { background-color: var(--ts-bg-0) !important; }