/* ==========================================================================
   Identidad visual Buroclick aplicada a la documentación MkDocs de
   Gestión Civis. Misma paleta y tipografía que la web corporativa
   (buroclick.es) para que el cambio de sitio sea transparente.
   ========================================================================== */

:root {
  /* Paleta Buroclick */
  --bc-navy-950: #0b1734;
  --bc-navy-900: #102046;
  --bc-navy-800: #16285a;
  --bc-navy-700: #1d3270;
  --bc-navy-600: #243d8a;
  --bc-navy-500: #3a59b0;
  --bc-navy-50:  #f4f7fc;
  --bc-teal-600: #0e7490;
  --bc-teal-500: #14b8a6;
  --bc-teal-400: #2dd4bf;
  --bc-teal-100: #ccfbf1;
}

/* ── Cabecera: azul navy con gradiente ─────────────────────────────────── */
[data-md-color-primary="custom"] {
  --md-primary-fg-color:        var(--bc-navy-800);
  --md-primary-fg-color--light: var(--bc-navy-600);
  --md-primary-fg-color--dark:  var(--bc-navy-900);
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.78);
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color:         var(--bc-teal-600);
  --md-accent-fg-color--transparent: rgba(20, 184, 166, 0.1);
}

/* Cabecera con gradiente sutil (parecido al Hero corporativo) */
.md-header,
.md-tabs {
  background: linear-gradient(135deg, var(--bc-navy-900), var(--bc-navy-800)) !important;
  box-shadow: 0 2px 12px rgba(11, 23, 52, 0.18);
}

/* ── Modo oscuro ──────────────────────────────────────────────────────── */
[data-md-color-scheme="slate"] {
  --md-typeset-a-color: var(--bc-teal-400);
  --md-default-bg-color: #0b1734;
  --md-default-bg-color--light: #102046;
}
[data-md-color-scheme="slate"][data-md-color-primary="custom"] {
  --md-primary-fg-color: var(--bc-navy-950);
}

/* ── Logo Buroclick en la cabecera ─────────────────────────────────────── */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 3.9rem;
  width: auto;
}
.md-header__button.md-logo {
  padding: 0.2rem 0.6rem 0.2rem 0;
}

/* ── Tipografía: misma jerarquía que la web corporativa ─────────────────── */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  letter-spacing: -0.015em;
  color: var(--bc-navy-800);
  font-weight: 800;
}
[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4 {
  color: #fff;
}

.md-typeset h1 { font-size: 2.2rem; }
.md-typeset h2 { font-size: 1.6rem; margin-top: 2.4rem; }
.md-typeset h3 { font-size: 1.2rem; margin-top: 2rem; }

/* ── Título de la cabecera ──────────────────────────────────────────────── */
.md-header__title {
  font-weight: 600;
  letter-spacing: 0.2px;
}
.md-header__title .md-header__topic:first-child .md-ellipsis {
  white-space: normal;
  line-height: 1.12;
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
}

/* ── Enlaces y acentos ──────────────────────────────────────────────────── */
.md-typeset a {
  color: var(--bc-navy-700);
  font-weight: 600;
  transition: color .15s ease;
}
.md-typeset a:hover {
  color: var(--bc-teal-600);
  text-decoration: underline;
}

/* ── Admonitions: bordes redondeados y acentos Buroclick ──────────────── */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 14px !important;
  border-left-width: 0 !important;
  box-shadow: 0 4px 16px rgba(11, 23, 52, 0.06);
  overflow: hidden;
}
.md-typeset .admonition-title,
.md-typeset summary {
  font-weight: 700;
  letter-spacing: -0.005em;
}

.md-typeset .admonition.info,
.md-typeset details.info {
  border-color: var(--bc-navy-500) !important;
  background: linear-gradient(135deg, rgba(58, 89, 176, 0.08), rgba(58, 89, 176, 0.02));
}
.md-typeset .info > .admonition-title,
.md-typeset .info > summary {
  background: rgba(58, 89, 176, 0.12) !important;
}

.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: var(--bc-teal-500) !important;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.08), rgba(20, 184, 166, 0.02));
}
.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary {
  background: rgba(20, 184, 166, 0.14) !important;
}

/* ── Search ────────────────────────────────────────────────────────────── */
.md-search__form {
  background: rgba(255, 255, 255, 0.14) !important;
  border-radius: 10px;
}
.md-search__form:hover {
  background: rgba(255, 255, 255, 0.22) !important;
}

/* ── Tablas ────────────────────────────────────────────────────────────── */
.md-typeset table:not([class]) {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(11, 23, 52, 0.06);
  border: 1px solid var(--bc-navy-50);
}
.md-typeset table:not([class]) th {
  background: linear-gradient(135deg, var(--bc-navy-800), var(--bc-navy-700)) !important;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* ── Code blocks ───────────────────────────────────────────────────────── */
.md-typeset pre > code {
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(11, 23, 52, 0.08);
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.md-footer {
  background: var(--bc-navy-900) !important;
}
.md-footer-meta {
  background: var(--bc-navy-950) !important;
}

/* ── Botón "Volver a buroclick.es" (insertado vía main.html override) ──── */
.bc-back-to-corp {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  background: rgba(255, 255, 255, 0.14);
  color: #fff !important;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease;
}
.bc-back-to-corp:hover {
  background: rgba(255, 255, 255, 0.24);
  text-decoration: none;
}

.md-grid {
  max-width: 1280px;
}