/* =============================================================================
   Route58 — paleta de marca para MkDocs Material
   Aplicada sobre el tema "default" (light) y "slate" (dark) de Material.
   ============================================================================= */

:root {
  /* Tokens de la marca Route58 (Fusion58) */
  --r58-gold: #e0a458;
  --r58-gold-soft: rgba(224, 164, 88, 0.12);
  --r58-gold-glow: rgba(224, 164, 88, 0.45);
  --r58-orange: #FF8C2C;
  --r58-teal: #5ba89a;
  --r58-teal-bright: #6FD7C2;
  --r58-blue: #4F8EE8;
  --r58-alarm: #ef4444;
  --r58-dark-bg: #0d0c0a;
  --r58-dark-surface: #1a1816;
  --r58-cream: #fbf8f3;

  /* Overrides de variables Material para el modo claro */
  --md-primary-fg-color: var(--r58-gold);
  --md-primary-fg-color--light: var(--r58-orange);
  --md-primary-fg-color--dark: #b78742;
  --md-accent-fg-color: var(--r58-teal);
  --md-accent-fg-color--transparent: rgba(91, 168, 154, 0.12);

  /* Tipografía */
  --md-text-font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --md-code-font-family: "JetBrains Mono", "SF Mono", Monaco, monospace;
}

/* ---------- Modo oscuro (slate) ---------- */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--r58-dark-bg);
  --md-default-fg-color: rgba(255, 255, 255, 0.92);
  --md-default-fg-color--light: rgba(255, 255, 255, 0.7);
  --md-default-fg-color--lighter: rgba(255, 255, 255, 0.45);
  --md-code-bg-color: #14120f;
  --md-primary-fg-color: var(--r58-gold);
  --md-accent-fg-color: var(--r58-teal-bright);
}

/* ---------- Header sticky con glow ---------- */
.md-header {
  background: linear-gradient(180deg, var(--r58-dark-bg) 0%, rgba(13, 12, 10, 0.92) 100%);
  border-bottom: 1px solid rgba(224, 164, 88, 0.18);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}
.md-header__title {
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* ---------- Tabs (Cliente / Administrador / Desarrollo / Arquitectura) ---------- */
.md-tabs {
  background: rgba(13, 12, 10, 0.98);
  border-bottom: 1px solid rgba(224, 164, 88, 0.12);
}
.md-tabs__link {
  font-weight: 600;
  letter-spacing: 0.3px;
  opacity: 0.78;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.md-tabs__link:hover,
.md-tabs__link--active {
  opacity: 1;
  color: var(--r58-gold);
}

/* ---------- Sidebar nav ---------- */
.md-nav__link--active {
  color: var(--r58-gold) !important;
  font-weight: 600;
}

/* ---------- Botones y CTAs ---------- */
.md-button {
  border-radius: 8px !important;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.md-button--primary {
  background: linear-gradient(135deg, var(--r58-gold) 0%, var(--r58-orange) 100%) !important;
  color: #1a1816 !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(224, 164, 88, 0.3);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.md-button--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(224, 164, 88, 0.45);
}

/* ---------- Code blocks con accent gold ---------- */
.highlight pre {
  border-left: 3px solid var(--r58-gold);
}

/* ---------- Admonitions (notas, advertencias) con paleta marca ---------- */
.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: var(--r58-blue);
}
.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: var(--r58-teal);
}
.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: var(--r58-orange);
}
.md-typeset .admonition.danger,
.md-typeset details.danger {
  border-color: var(--r58-alarm);
}

/* ---------- Imágenes: borde sutil + sombra para que las capturas resalten ---------- */
.md-typeset img:not(.emojione):not(.twemoji):not(.gemoji) {
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(224, 164, 88, 0.12);
  max-width: 100%;
  height: auto;
}
[data-md-color-scheme="slate"] .md-typeset img:not(.emojione):not(.twemoji):not(.gemoji) {
  border-color: rgba(224, 164, 88, 0.22);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
}

/* ---------- Tablas: header gold soft ---------- */
.md-typeset table:not([class]) th {
  background: var(--r58-gold-soft);
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* ---------- Mermaid: centrar diagramas + fondo transparente ---------- */
.mermaid {
  text-align: center;
  margin: 1.5em 0;
}

/* ---------- Hero del index page (custom) ---------- */
.r58-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3em 1em 2em;
  text-align: center;
}
.r58-hero__title {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, var(--r58-gold) 0%, var(--r58-orange) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0.3em 0 0.2em;
}
.r58-hero__subtitle {
  font-size: 1.15rem;
  opacity: 0.78;
  max-width: 640px;
  line-height: 1.55;
}
.r58-hero__cta {
  margin-top: 2em;
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------- Cards para las 4 secciones ---------- */
.r58-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25em;
  margin: 2em 0;
}
.r58-card {
  display: block;
  padding: 1.5em 1.4em;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.005));
  border: 1px solid rgba(224, 164, 88, 0.14);
  transition: transform 0.18s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none !important;
  color: inherit !important;
}
.r58-card:hover {
  transform: translateY(-2px);
  border-color: var(--r58-gold);
  box-shadow: 0 10px 24px rgba(224, 164, 88, 0.12);
}
.r58-card__icon {
  font-size: 1.8em;
  margin-bottom: 0.4em;
}
.r58-card__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--r58-gold);
  margin-bottom: 0.3em;
}
.r58-card__desc {
  font-size: 0.92rem;
  opacity: 0.78;
  line-height: 1.5;
}

/* ---------- Footer ---------- */
.md-footer {
  background: var(--r58-dark-bg);
  border-top: 1px solid rgba(224, 164, 88, 0.12);
}
.md-copyright {
  opacity: 0.65;
}

/* ---------- Search input glow gold ---------- */
[data-md-toggle="search"]:checked ~ .md-header .md-search__input,
.md-search__input:focus-within {
  background-color: rgba(224, 164, 88, 0.08);
  outline: 1px solid var(--r58-gold);
}