/* =========================================================================
   Notas Universidad — tema Material personalizado (más llamativo)
   Paleta violeta/índigo con acento magenta, encabezado degradado,
   tarjetas con elevación y tipografía cuidada. Claro y oscuro.
   ========================================================================= */

:root {
  --nu-1: #6d28d9;   /* violeta */
  --nu-2: #4f46e5;   /* índigo */
  --nu-3: #db2777;   /* magenta acento */
  --md-primary-fg-color: var(--nu-1);
  --md-primary-fg-color--light: #8b5cf6;
  --md-primary-fg-color--dark: #5b21b6;
  --md-accent-fg-color: var(--nu-3);
  --md-typeset-a-color: #6d28d9;
}

[data-md-color-scheme="slate"] {
  --md-hue: 258;
  --md-primary-fg-color: #7c3aed;
  --md-accent-fg-color: #f472b6;
  --md-typeset-a-color: #a78bfa;
  --md-default-bg-color: hsl(258, 16%, 11%);
}

/* ---- Encabezado y pestañas con degradado ---- */
.md-header {
  background: linear-gradient(100deg, var(--nu-1) 0%, var(--nu-2) 55%, var(--nu-3) 130%);
  box-shadow: 0 2px 14px rgba(79, 70, 229, 0.28);
}
.md-tabs {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.md-header__title { font-weight: 700; letter-spacing: -0.01em; }

/* barra superior sutil también en oscuro */
[data-md-color-scheme="slate"] .md-header {
  background: linear-gradient(100deg, #4c1d95 0%, #3730a3 55%, #9d174d 130%);
}

/* ---- Tipografía ---- */
.md-typeset h1,
.md-typeset h2 {
  font-weight: 700;
  letter-spacing: -0.015em;
}
.md-typeset h1 {
  background: linear-gradient(95deg, var(--nu-1), var(--nu-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-md-color-scheme="slate"] .md-typeset h1 {
  background: linear-gradient(95deg, #a78bfa, #f472b6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.md-typeset h2 {
  padding-bottom: 0.3rem;
  border-bottom: 2px solid rgba(109, 40, 217, 0.18);
}

/* ---- Enlaces con subrayado animado ---- */
.md-typeset a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.2s ease;
}
.md-typeset a:hover { background-size: 100% 2px; }

/* ---- Tarjetas (grid cards) ---- */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  box-shadow: 0 6px 18px rgba(30, 20, 60, 0.06);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  transform: translateY(-4px);
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 14px 30px rgba(109, 40, 217, 0.18);
}
.md-typeset .grid.cards .twemoji,
.md-typeset .grid.cards svg {
  color: var(--md-primary-fg-color);
}

/* ---- Botones ---- */
.md-typeset .md-button {
  border-radius: 10px;
  border-width: 2px;
  font-weight: 600;
}
.md-typeset .md-button--primary {
  background: linear-gradient(100deg, var(--nu-1), var(--nu-2));
  border-color: transparent;
}

/* ---- Código y admoniciones redondeados ---- */
.md-typeset pre > code { border-radius: 10px; }
.md-typeset .admonition,
.md-typeset details {
  border-radius: 10px;
  border-left-width: 4px;
}

/* ---- Navegación activa ---- */
.md-nav__link--active,
.md-nav__item--active > .md-nav__link {
  font-weight: 700;
  color: var(--md-accent-fg-color);
}

/* ---- Footer ---- */
.md-footer-meta { background: rgba(0, 0, 0, 0.35); }