/* ===== ConfidentialAI, colores reales de la app (confidential_gpt) ===== */
/* Fuente: theme_helper.dart  ·  Primario #9D87D0 · Acento #7D67C0 · Dark #121212 */

:root {
  --cai-primary: #9D87D0;       /* lightCodeColorScheme.primary */
  --cai-accent: #7D67C0;        /* deepPurple400 (FAB, botones) */
  --cai-accent-dark: #5E4A9E;
  --cai-green: #43EE7D;         /* greenA200 */
  --cai-teal: #04FED1;          /* tealA400 */
  --cai-bg-light: #F6F7FB;      /* gray50 / primaryContainer */
  --cai-fill: #121212;          /* superficie dark / shadow */
  --cai-text: #1E1E1E;          /* onPrimaryContainer / onSurface */
}

/* ---- Modo claro ---- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--cai-primary);
  --md-primary-fg-color--light: #B6A4DD;
  --md-primary-fg-color--dark: var(--cai-accent);
  --md-accent-fg-color: var(--cai-accent);
  --md-typeset-a-color: var(--cai-accent);
  --md-default-bg-color: #ffffff;
  --md-default-fg-color: var(--cai-text);
}

/* ---- Modo oscuro (surface #121212) ---- */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--cai-accent);
  --md-primary-fg-color--light: var(--cai-primary);
  --md-primary-fg-color--dark: var(--cai-accent-dark);
  --md-accent-fg-color: var(--cai-primary);
  --md-typeset-a-color: var(--cai-primary);

  --md-default-bg-color: var(--cai-fill);   /* #121212 */
  --md-default-bg-color--light: #1c1c1c;
  --md-code-bg-color: #1c1c1c;
  --md-footer-bg-color: #0d0d0d;
}

/* Header con degradado de marca (primario → acento) */
.md-header,
.md-tabs {
  background: linear-gradient(90deg, var(--cai-accent-dark) 0%, var(--cai-accent) 45%, var(--cai-primary) 100%);
}

/* Botones destacados = acento morado de la app */
.md-typeset .md-button--primary {
  background-color: var(--cai-accent);
  border-color: var(--cai-accent);
  color: #fff;
}
.md-typeset .md-button--primary:hover {
  background-color: var(--cai-accent-dark);
  border-color: var(--cai-accent-dark);
}

/* Acentos verde/teal de la app para admoniciones tip/success */
[data-md-color-scheme] .md-typeset .admonition.tip,
[data-md-color-scheme] .md-typeset details.tip {
  border-color: var(--cai-teal);
}
[data-md-color-scheme] .md-typeset .tip > .admonition-title,
[data-md-color-scheme] .md-typeset .tip > summary {
  background-color: rgba(4, 254, 209, 0.12);
}

/* Logo (escudo de la app) sobre insignia blanca */
.md-header__button.md-logo {
  background: #fff;
  border-radius: 10px;
  padding: 4px;
  margin-right: .4rem;
  line-height: 0;
}
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.7rem;
  width: 1.7rem;
  object-fit: contain;
}

::selection {
  background: var(--cai-accent);
  color: #fff;
}

/* Selector de idioma: visible, con icono de globo en vez del 文A */
.md-header__option { display: block !important; }
.md-select > .md-header__button.md-icon > svg { display: none; }
.md-select > .md-header__button.md-icon::after {
  content: "🌐";
  font-size: 1.05rem;
  line-height: 1;
}

/* ===== Panel de Release notes (sustituye la TOC derecha) ===== */
.cai-relnotes__body { padding: .2rem .6rem 1rem; font-size: .72rem; }

/* Cada versión como desplegable */
.cai-rel { border-bottom: 1px solid var(--md-default-fg-color--lightest, #e5e2ef); }
.cai-rel > summary {
  display: flex; align-items: baseline; gap: .4rem; cursor: pointer;
  padding: .4rem .1rem; list-style: none; user-select: none;
}
.cai-rel > summary::-webkit-details-marker { display: none; }
.cai-rel > summary::before {
  content: "›"; color: var(--cai-accent); font-weight: 700;
  transition: transform .15s ease; display: inline-block;
}
.cai-rel[open] > summary::before { transform: rotate(90deg); }
.cai-rel__v { font-weight: 700; color: var(--cai-accent); }
.cai-rel__d { color: var(--md-default-fg-color--light); font-size: .66rem; margin-left: auto; }
.cai-rel > p {
  margin: 0 0 .5rem .85rem; color: var(--md-default-fg-color--light); line-height: 1.35;
}

.cai-relnotes__link {
  display: inline-block; margin-top: 1rem; font-weight: 600;
  color: var(--cai-accent) !important;
}
.cai-relnotes__link:hover { color: var(--cai-accent-dark) !important; }

/* Enlace de descarga arriba del todo (estilo botón primario de la app) */
.cai-relnotes__link--top {
  display: block; margin: 0 0 .8rem; padding: .5rem .8rem;
  background-color: var(--cai-accent); color: #fff !important;
  border: none; border-radius: 6px; font-weight: 600;
  text-align: center; font-size: .76rem; line-height: 1.3;
}

/* Grupos de funciones / correcciones dentro de cada release */
.cai-rel__group { margin: .15rem 0 .5rem .85rem; }
.cai-rel__h { display: block; font-weight: 700; font-size: .68rem; margin: .2rem 0 .1rem; }
.cai-rel__h--feat { color: var(--cai-accent); }
.cai-rel__h--fix { color: var(--md-default-fg-color--light); }
.cai-rel__group ul { margin: 0 0 .2rem; padding-left: 1rem; }
.cai-rel__group li { line-height: 1.3; padding: .05rem 0; color: var(--md-default-fg-color--light); }

/* Mantener el título del sitio fijo al hacer scroll (no cambiar al de la sección) */
.md-header__topic[data-md-component="header-topic"] { display: none !important; }
.md-header__title .md-header__topic:first-child {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

/* ===== Cards de navegación atrás / adelante (sustituyen la barra Anterior/Siguiente) ===== */
.cai-pager {
  display: flex; gap: 1rem; margin: 2.5rem 0 1rem; flex-wrap: wrap;
}
.cai-next {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: .1rem;
  padding: .7rem .9rem;
  border: 1px solid var(--md-default-fg-color--lightest, #e5e2ef);
  border-radius: .5rem; text-decoration: none !important;
  transition: border-color .15s ease, background .15s ease;
}
.cai-next--prev { text-align: right; }
.cai-next:hover {
  border-color: var(--cai-accent);
  background: rgba(125,103,192,.05);
}
.cai-next__label {
  font-size: .62rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--md-default-fg-color--light);
}
.cai-next__title {
  font-size: .9rem; font-weight: 600; color: var(--cai-accent);
}
.cai-next--next .cai-next__title::after { content: " →"; }
.cai-next--prev .cai-next__title::before { content: "← "; }

/* ===== Botones con el estilo de la app (CustomizedButton de GPT-UI) ===== */
/* Primario relleno: morado #7D67C0, radio 6, sombra suave morado+negro */
.md-typeset .md-button--primary,
.cai-relnotes__link--top {
  background-color: var(--cai-accent);
  border: none;
  color: #fff !important;
  border-radius: 6px;
  font-weight: 600;
  box-shadow: 0 2px 5px rgba(125,103,192,.20), 0 2px 5px rgba(0,0,0,.15), 0 2px 5px rgba(0,0,0,.10);
}
.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus,
.cai-relnotes__link--top:hover {
  background-color: var(--cai-accent-dark);
  border: none;
  color: #fff !important;
  box-shadow: 0 3px 9px rgba(125,103,192,.30), 0 2px 6px rgba(0,0,0,.15);
}
/* Secundario contorneado: texto y borde morados */
.md-typeset .md-button {
  border: 1.5px solid var(--cai-accent);
  color: var(--cai-accent);
  border-radius: 6px;
  font-weight: 600;
}
.md-typeset .md-button:hover,
.md-typeset .md-button:focus {
  background-color: var(--cai-accent);
  border-color: var(--cai-accent);
  color: #fff;
}

/* Título "Release notes": fondo blanco opaco, por encima del contenido, sin sombra.
   Así queda visible y el botón/contenido pasa por detrás al hacer scroll. */
.cai-relnotes .md-nav__title {
  box-shadow: none !important;
  background-color: var(--md-default-bg-color) !important;
  position: sticky;
  top: 0;
  z-index: 3;
  padding-bottom: .4rem;
}

/* Buscador con el mismo redondeo (6px) que los botones, para armonía visual */
.md-search__form,
.md-search__input { border-radius: 6px; }

/* Buscador abierto: campo totalmente redondeado (sin panel vacío debajo) */
[data-md-toggle="search"]:checked ~ .md-header .md-search__form { border-radius: 6px; }
.md-search__output { border-radius: 6px; overflow: hidden; margin-top: .25rem; }
.md-search__inner { border-radius: 6px; }

/* Quitar el panel/rectángulo de resultados vacío ("Teclee para comenzar búsqueda").
   El texto guía va ahora como placeholder del cuadro de búsqueda. */
.md-search-result__meta { display: none; }

/* Todas las imagenes centradas */
.md-typeset img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Imagenes de pantallas de la app y web: sin borde, tamano reducido */
.md-typeset img[src*="screenshots/register"],
.md-typeset img[src*="screenshots/login"],
.md-typeset img[src*="screenshots/web-login"],
.md-typeset img[src*="screenshots/web-register"] {
  border: none !important;
  box-shadow: none !important;
  width: 300px;
}

.md-typeset img[src*="screenshots/auth-success"] {
  border: none !important;
  box-shadow: none !important;
  width: 220px;
}

.md-typeset img[src*="screenshots/google-"] {
  border: none !important;
  box-shadow: none !important;
  width: 480px;
}