/* Branding FuncionalMarket: color de marca esmeralda (#10B981) sobre el tema Material.
   Es el DEFAULT; cada portal puede sobrescribir estos colores por la URL del enlace
   (?marca=...), que el script de overrides/main.html aplica como inline-style en <html>. */
:root {
  --md-primary-fg-color:        #10B981;
  --md-primary-fg-color--light: #34D399;
  --md-primary-fg-color--dark:  #059669;
  --md-accent-fg-color:         #059669;
  --fm-brand:                   #10B981;
}

/* Logo un poco más grande en el header. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.9rem;
}

/* Slogan del portal: línea pequeña bajo el nombre, en el header. Más pequeña y
   separada del nombre. */
.fm-slogan {
  font-size: .52rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .02em;
  opacity: .8;
  margin-top: .22rem;
}

/* Home tematizada: logo del portal justo debajo del título "Manual del portal de <nombre>".
   Protegido con max-width/max-height para que un logo grande no desborde la página. */
.md-typeset .fm-home-logo-wrap {
  margin: .3rem 0 1.4rem;
}
.md-typeset .fm-home-logo-wrap .fm-home-logo {
  max-width: 240px !important;
  max-height: 120px !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Tarjeta del acceso en "Cómo iniciar sesión": replica el look de la pantalla de login del
   portal — franja BLANCA con el logo (como el header del dashboard) sobre cuerpo con el
   degradado OSCURO tematizado con el color del portal. */
.md-typeset .fm-login-card {
  max-width: 340px;
  margin: 1rem 0 1.6rem;
  border-radius: .85rem;
  overflow: hidden;
  border: 1px solid rgba(2, 6, 23, .12);
  box-shadow: 0 8px 26px rgba(2, 6, 23, .20);
}
.md-typeset .fm-login-card-head {
  background: #fff;
  text-align: center;
  padding: 1rem;
  border-bottom: 1px solid rgba(2, 6, 23, .08);
}
.md-typeset .fm-login-card-head img {
  max-width: 70% !important;
  max-height: 64px !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.md-typeset .fm-login-card-body {
  background:
    radial-gradient(125% 145% at 50% 0%,
      color-mix(in srgb, var(--md-primary-fg-color) 42%, #0b1220) 0%, #0b1220 72%);
  color: #e2e8f0;
  text-align: center;
  padding: 1.1rem 1rem 1.35rem;
}
.md-typeset .fm-login-card-eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .62rem;
  font-weight: 600;
  opacity: .85;
}
.md-typeset .fm-login-card-slogan {
  display: block;
  margin-top: .35rem;
  font-size: .95rem;
}

/* Acentos de marca en títulos: siguen el color del portal (tono oscuro del tema). */
.md-typeset h1,
.md-typeset h2 {
  color: var(--md-primary-fg-color--dark);
}

/* Capturas de pantalla con marco suave para que se distingan del texto. */
.md-typeset img[src*="/img/"] {
  border: 1px solid #e2e8f0;
  border-radius: .5rem;
  box-shadow: 0 1px 4px rgba(2, 6, 23, .06);
}

/* Footer tematizado del portal (logo + nombre + redes + sitio web), arriba del footer de
   Material. Fondo en el tono oscuro del color del portal. */
.fm-portal-footer {
  background: var(--md-primary-fg-color--dark, #0b1220);
  color: #fff;
}
.fm-portal-footer .fm-pf-inner {
  max-width: 61rem;
  margin: 0 auto;
  padding: 1rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 1rem 1.4rem;
  flex-wrap: wrap;
  justify-content: space-between;
}
.fm-portal-footer .fm-pf-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .95rem;
}
.fm-portal-footer .fm-pf-logo {
  height: 1.9rem;
  width: auto;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  background: #fff;
  padding: .15rem .3rem;
  border-radius: .3rem;
}
.fm-portal-footer .fm-pf-redes { display: flex; gap: .65rem; }
.fm-portal-footer .fm-pf-red {
  color: #fff;
  opacity: .82;
  font-size: 1.2rem;
  line-height: 1;
  transition: opacity .15s;
}
.fm-portal-footer .fm-pf-red:hover { opacity: 1; }
.fm-portal-footer .fm-pf-sitio a {
  color: #fff;
  opacity: .92;
  text-decoration: underline;
  text-underline-offset: 2px;
}