/**
 * CorpMVL / Matamoros — ajustes de marca sobre UI Zammad 7.2 (Vue desktop + móvil)
 * Fuente de verdad de colores: custom/frontend/tokens.css (build time)
 */

:root {
  --corpmvl-red: #e32027;
  --corpmvl-red-dark: #b8171d;
  --corpmvl-red-darker: #8a1115;
  --corpmvl-surface: #f5f0f0;
  --corpmvl-text: #3d3d3d;
  --corpmvl-muted: #5c5c5c;
  --corpmvl-border: #e8e0e0;
  --corpmvl-loading-logo: clamp(88px, 14vw, 120px);
  --corpmvl-loading-logo-h: clamp(75px, 12vw, 103px);

  /* UI legacy (wizard, login CoffeeScript) */
  --button-primary-background: var(--corpmvl-red-dark);
  --button-primary-background-active: var(--corpmvl-red-darker);
  --text-button-primary: var(--corpmvl-red-dark);
  --text-button-primary-active: var(--corpmvl-red-darker);
  --menu-background-active: var(--corpmvl-red-dark);
}

/* Login / páginas públicas */
body {
  accent-color: var(--corpmvl-red);
}

meta[name="theme-color"] {
  content: var(--corpmvl-red-dark);
}

/* Login / registro — banner logos Matamoros (SVG ~6000×720; ancho completo de tarjeta) */
.flex.min-h-screen.flex-col.items-center main > .flex.justify-center:first-child {
  width: calc(100% + 2.5rem);
  margin: -1.25rem -1.25rem 0.85rem;
  padding: 1rem 1.15rem 0.9rem;
  line-height: 0;
  background: linear-gradient(180deg, #eb2830 0%, #e32027 55%, #c41e24 100%);
  border-radius: 1.25rem 1.25rem 0 0;
}

.flex.min-h-screen.flex-col.items-center main > .flex.justify-center:first-child img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 3.25rem;
  max-height: 5rem !important;
  object-fit: contain;
  object-position: center;
}

/* Mobile login */
.flex.flex-col > .flex.justify-center.p-2 img {
  display: block;
  width: min(100%, 22rem) !important;
  max-width: none !important;
  max-height: 5rem !important;
  min-height: 3.25rem;
  height: auto !important;
  margin: 0 auto;
  object-fit: contain;
}

/* Fondo login — acento corporativo */
.flex.min-h-screen.flex-col.items-center.bg-neutral-950 {
  background: linear-gradient(160deg, #3d3d3d 0%, #2a2a2a 45%, #1a1a1a 100%) !important;
}

/* Pie “Powered by Zammad” — ocultar en UI corporativa */
footer a[href="https://zammad.org"],
.login a[href="https://zammad.org"],
.signup a[href="https://zammad.org"] {
  display: none !important;
}

/* Splash / loading legacy (init#index) — logo visible sin dominar la pantalla */
.splash {
  flex-direction: column;
  gap: 1rem;
}

.splash .icon-logo,
.splash .icon.icon-logo {
  width: var(--corpmvl-loading-logo) !important;
  height: var(--corpmvl-loading-logo-h) !important;
  margin: 0 !important;
}

.splash-title {
  font-size: clamp(1.25rem, 2.8vw, 1.5rem) !important;
  font-weight: 600;
  line-height: 1.4;
  color: var(--corpmvl-text, #3d3d3d);
  letter-spacing: 0.01em;
}

/* Vue desktop/mobile loading — mismo criterio de tamaño */
#loading-app .loading-animation {
  width: var(--corpmvl-loading-logo) !important;
  height: var(--corpmvl-loading-logo-h) !important;
  max-width: none;
  max-height: none;
}

#loading-app .loading-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

/* Wizard setup legacy (#getting_started) — logo corporativo */
.wizard-logo.icon-full-logo {
  width: min(320px, 90vw) !important;
  height: auto !important;
  max-height: 56px;
}

.wizard .btn--primary,
.wizard .btn.btn--primary {
  background: var(--corpmvl-red-dark) !important;
  border-color: var(--corpmvl-red-dark) !important;
}

.wizard .btn--primary:hover,
.wizard .btn--primary:focus {
  background: var(--corpmvl-red-darker) !important;
}

.wizard .u-highlight a,
.wizard-aside .u-highlight {
  color: var(--corpmvl-red) !important;
}

/* Menú inferior sidebar (avatar / admin) */
.bg-blue-900 {
  background-color: var(--corpmvl-red-dark) !important;
}

/* Knowledge base (Sprockets) */
.knowledge-base .header,
.knowledge-base-header {
  background-color: var(--corpmvl-red) !important;
}

.knowledge-base a,
.knowledge-base .header a {
  color: var(--corpmvl-red-dark);
}

/* Emails HTML inline (plantillas legacy) */
.email-header,
.mailer-logo {
  border-bottom: 3px solid var(--corpmvl-red);
}