/* ============================================================================
   Licita Radar — tema de marca para el manual (Material for MkDocs)
   Los valores espejan frontend/landing/styles/tokens.css (LicitaColors).
   Mantener en sincronía si la marca cambia.
   ========================================================================== */

:root {
  --lr-green:        #2ecc8a;
  --lr-green-bright: #35d696;
  --lr-green-dark:   #26b87a;
  --lr-teal:         #1a6464;
  --lr-navy:         #0e2d3d;
  --lr-gray:         #8fa8b8;
  --lr-warning:      #e8a020;

  /* Superficies oscuras (mirror LicitaColors dark*) */
  --lr-bg:           #091820;
  --lr-surface:      #0e2230;
  --lr-surface-alt:  #122840;
  --lr-border:       #2a4a5c;
  --lr-text:         #e8f5f0;
  --lr-text-2:       #9abbc8;
}

/* ── Primario (encabezado / barra superior) — navy en ambos esquemas ─────── */
[data-md-color-primary="custom"] {
  --md-primary-fg-color:        var(--lr-navy);
  --md-primary-fg-color--light: var(--lr-teal);
  --md-primary-fg-color--dark:  #0a2230;
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.75);
}

/* ── Acento (interacción / hover) — verde de marca ──────────────────────── */
[data-md-color-accent="custom"] {
  --md-accent-fg-color:         var(--lr-green);
  --md-accent-fg-color--transparent: rgba(46, 204, 138, 0.1);
}

/* ── Enlaces del cuerpo en verde de marca (ambos esquemas) ──────────────── */
.md-typeset a {
  color: var(--lr-green-dark);
}
.md-typeset a:hover {
  color: var(--lr-green-bright);
}

/* ── Esquema OSCURO: alinear superficies con la app ─────────────────────── */
[data-md-color-scheme="slate"] {
  --md-default-bg-color:        var(--lr-bg);
  --md-default-fg-color:        var(--lr-text);
  --md-default-fg-color--light: var(--lr-text-2);
  --md-code-bg-color:           #0b1c26;
  --md-typeset-a-color:         var(--lr-green-bright);
}
[data-md-color-scheme="slate"] .md-typeset a {
  color: var(--lr-green-bright);
}
[data-md-color-scheme="slate"] .md-header {
  border-bottom: 1px solid rgba(46, 204, 138, 0.18);
}
/* Barras lateral/contenido un punto por encima del fondo, como la app */
[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__link:focus,
[data-md-color-scheme="slate"] .md-nav__link:hover {
  color: var(--lr-green-bright);
}

/* ── Botón de búsqueda / acento en foco ─────────────────────────────────── */
.md-search__input:focus,
.md-search__input:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

/* ── Bloques de admonition: darles el verde de marca en "note/tip" ──────── */
.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: var(--lr-green);
}
.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background-color: rgba(46, 204, 138, 0.12);
}
.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before {
  background-color: var(--lr-green);
}

/* ── Tarjetas de la página de inicio ────────────────────────────────────── */
.lr-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.lr-card {
  display: block;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px;
  text-decoration: none !important;
  transition: border-color 160ms ease, transform 160ms ease;
}
.lr-card:hover {
  border-color: var(--lr-green);
  transform: translateY(-2px);
}
.lr-card__title {
  display: block;
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--md-default-fg-color);
}
.lr-card__body {
  display: block;
  margin: 0;
  font-size: 0.82rem;
  color: var(--md-default-fg-color--light);
}

/* ── Capturas de pantalla ───────────────────────────────────────────────── */
.md-typeset img.shot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 10px;
  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.6);
  margin: 0.4rem 0;
}
.md-typeset figure {
  margin: 1.4rem 0;
}
.md-typeset figcaption {
  font-size: 0.78rem;
  color: var(--md-default-fg-color--light);
  margin-top: 0.35rem;
}

/* ── Píldoras de rol (SUPER_ADMIN, etc.) usadas en el texto ─────────────── */
.lr-badge {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(46, 204, 138, 0.15);
  color: var(--lr-green-dark);
  vertical-align: middle;
}
[data-md-color-scheme="slate"] .lr-badge {
  color: var(--lr-green-bright);
}

/* ── Etiqueta de audiencia (a quién va dirigida cada página) ────────────── */
.md-typeset p.audience {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.75rem;
  margin: -0.2rem 0 1.2rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid transparent;
}
/* Todos los usuarios — verde de marca */
.md-typeset p.audience--all {
  background: rgba(46, 204, 138, 0.12);
  color: var(--lr-green-dark);
  border-color: rgba(46, 204, 138, 0.38);
}
[data-md-color-scheme="slate"] .md-typeset p.audience--all { color: var(--lr-green-bright); }
/* Administradores de empresa — azul/teal */
.md-typeset p.audience--admin {
  background: rgba(46, 134, 171, 0.14);
  color: #1c6a89;
  border-color: rgba(46, 134, 171, 0.42);
}
[data-md-color-scheme="slate"] .md-typeset p.audience--admin { color: #5fb6d6; }
/* Super Admin — ámbar */
.md-typeset p.audience--super {
  background: rgba(232, 160, 32, 0.15);
  color: #9a680c;
  border-color: rgba(232, 160, 32, 0.45);
}
[data-md-color-scheme="slate"] .md-typeset p.audience--super { color: var(--lr-warning); }