/* ── Etendo Go — estilos ── */

/* ════════════════════════════════════════
   VARIABLES
════════════════════════════════════════ */

:root,
[data-md-color-scheme="default"] {
  /* Colores de marca */
  --etendo-yellow: #FFD000;
  --etendo-yellow-subtle: rgba(255, 208, 0, 0.12);

  /* Contenido */
  --etendo-text: #111827;
  --etendo-text-muted: #6B7280;
  --etendo-border: #E5E7EB;
  --etendo-bg-content: #FFFFFF;
  --etendo-bg-page: #F3F4F6;
  --etendo-bg-surface: #F9FAFB;
  --etendo-bg-search: rgba(255,255,255,0.12);
  --etendo-link: #2563EB;
  --etendo-link-hover: #1D4ED8;

  /* Sidebar gris claro como el producto */
  --etendo-sidebar-bg: #F3F4F6;
  --etendo-sidebar-text: #374151;
  --etendo-sidebar-muted: #9CA3AF;
  --etendo-sidebar-hover: rgba(0,0,0,0.05);
  --etendo-sidebar-border: rgba(0,0,0,0.06);
  --etendo-sidebar-scrollbar: #D1D5DB;

  --md-accent-fg-color: var(--etendo-yellow);
  --md-accent-fg-color--transparent: var(--etendo-yellow-subtle);
  --md-accent-bg-color: var(--etendo-text);
}

[data-md-color-scheme="slate"] {
  --etendo-yellow: #FFD000;
  --etendo-yellow-subtle: rgba(255, 208, 0, 0.10);

  --etendo-text: #F1F5F9;
  --etendo-text-muted: #94A3B8;
  --etendo-border: #2D3748;
  --etendo-bg-content: #161B22;
  --etendo-bg-page: #0D1117;
  --etendo-bg-surface: #1A1F2E;
  --etendo-bg-search: rgba(255,255,255,0.08);
  --etendo-link: #60A5FA;
  --etendo-link-hover: #93C5FD;

  /* Sidebar modo oscuro */
  --etendo-sidebar-bg: #1A1F2E;
  --etendo-sidebar-text: #CBD5E1;
  --etendo-sidebar-muted: #64748B;
  --etendo-sidebar-hover: rgba(255,255,255,0.05);
  --etendo-sidebar-border: rgba(255,255,255,0.06);
  --etendo-sidebar-scrollbar: rgba(255,255,255,0.12);

  --md-primary-fg-color: #1A1F2E;
  --md-primary-bg-color: #F1F5F9;
  --md-accent-fg-color: var(--etendo-yellow);
  --md-accent-fg-color--transparent: var(--etendo-yellow-subtle);
  --md-accent-bg-color: #0D1117;

  --md-default-bg-color: var(--etendo-bg-content);
  --md-default-fg-color: var(--etendo-text);
  --md-default-fg-color--light: var(--etendo-text-muted);
  --md-default-fg-color--lighter: var(--etendo-text-muted);
  --md-default-fg-color--lightest: var(--etendo-text-muted);
  --md-code-bg-color: #1E2433;
  --md-code-fg-color: #E2E8F0;
  --md-footer-bg-color: #0D1117;
  --md-footer-fg-color: var(--etendo-text-muted);
}

/* ════════════════════════════════════════
   LAYOUT — fondo gris exterior, contenido blanco
════════════════════════════════════════ */

body {
  background-color: var(--etendo-bg-page);
}

.md-main {
  background-color: var(--etendo-bg-page);
}

.md-content {
  background-color: var(--etendo-bg-content);
}

.md-content__inner {
  background-color: var(--etendo-bg-content);
  padding: 1.5rem 2rem 2rem;
  padding-bottom: 80vh;
}

/* Sidebar secundario (TOC) fondo gris como el exterior */
.md-sidebar--secondary,
.md-sidebar--secondary .md-sidebar__scrollwrap {
  background-color: var(--etendo-bg-page);
}

.md-sidebar--secondary .md-sidebar__inner {
  padding-top: 0.6rem;
}

/* ════════════════════════════════════════
   HEADER
════════════════════════════════════════ */

.md-header {
  box-shadow: none;
  border-bottom: 1px solid var(--etendo-border);
  background-color: var(--etendo-bg-content) !important;
  color: var(--etendo-text);
}

.md-header__title {
  color: var(--etendo-text);
}

/* Botones del header */
[data-md-color-scheme="default"] .md-header__button {
  color: var(--etendo-text-muted);
}

/* ════════════════════════════════════════
   SIDEBAR IZQUIERDO — oscuro como el producto
════════════════════════════════════════ */

.md-sidebar--primary,
.md-sidebar--primary .md-sidebar__scrollwrap {
  background-color: var(--etendo-sidebar-bg);
}

/* Título principal "ETENDO GO" — sin degradado blanco */
.md-sidebar--primary .md-nav__title {
  color: var(--etendo-sidebar-muted);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background-color: var(--etendo-sidebar-bg);
  border-bottom: none;
  box-shadow: none !important;
}

/* Secciones (labels no navegables) */
.md-sidebar--primary .md-nav__item--section > .md-nav__link {
  color: var(--etendo-sidebar-muted);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: default;
  pointer-events: none;
  background: none !important;
  border: none !important;
  padding-left: 0.75rem !important;
  margin-top: 1rem;
  margin-bottom: 0.15rem;
}

/* Links de página */
.md-sidebar--primary .md-nav__link {
  color: var(--etendo-sidebar-text);
  border-radius: 0;
  transition: background 0.12s, color 0.12s;
  padding: 0.38rem 0.75rem;
}

.md-sidebar--primary .md-nav__link:hover {
  color: var(--etendo-sidebar-text);
  background-color: var(--etendo-sidebar-hover);
}

/* Item activo: fondo amarillo, texto oscuro, sin radio */
.md-sidebar--primary .md-nav__item:not(.md-nav__item--section) > .md-nav__link--active,
.md-sidebar--primary .md-nav__item:not(.md-nav__item--section).md-nav__item--active > .md-nav__link {
  color: #111827 !important;
  font-weight: 600;
  background-color: var(--etendo-yellow) !important;
  border-radius: 0 !important;
  border: none !important;
}

/* Sin líneas conectoras — el producto no las muestra */
.md-sidebar--primary .md-nav--primary .md-nav__item--section .md-nav {
  border-left: none;
  margin-left: 0;
  padding-left: 0;
}

/* Scrollbar del sidebar */
.md-sidebar--primary .md-sidebar__scrollwrap {
  scrollbar-width: thin;
  scrollbar-color: var(--etendo-sidebar-scrollbar) transparent;
}

.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar {
  width: 4px;
}

.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
  background-color: var(--etendo-sidebar-scrollbar);
  border-radius: 2px;
}

.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-track {
  background: transparent;
}

/* ════════════════════════════════════════
   BÚSQUEDA
════════════════════════════════════════ */

.md-search__form {
  border-radius: 6px;
  background-color: var(--etendo-bg-search);
  border: 1px solid var(--etendo-sidebar-border);
  color: var(--etendo-sidebar-text);
}

.md-search__input {
  color: var(--etendo-sidebar-text);
}

.md-search__input::placeholder {
  color: var(--etendo-sidebar-muted);
}

/* Resultados de búsqueda */
.md-search-result {
  background-color: var(--etendo-bg-content);
}

/* ════════════════════════════════════════
   TOC DERECHO
════════════════════════════════════════ */

/* Título "Tabla de contenidos" — igual que secciones del sidebar */
.md-sidebar--secondary .md-nav__title {
  color: var(--etendo-sidebar-muted);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background-color: var(--etendo-bg-page);
  border-bottom: none;
  box-shadow: none !important;
  padding-left: 1rem;
  padding-top: 1.4rem;
}

.md-sidebar--secondary .md-nav__link {
  color: var(--etendo-text-muted);
  font-size: 0.75rem;
  border-radius: 0;
  transition: color 0.12s;
  padding-left: 1rem;
}

.md-sidebar--secondary .md-nav__link:hover {
  color: var(--etendo-text);
  background: none;
}

.md-nav--secondary .md-nav__link--active {
  color: var(--etendo-text) !important;
  border-left: 2px solid var(--etendo-yellow);
  padding-left: calc(1rem - 2px);
  background-color: transparent !important;
  font-weight: 600;
}

/* ════════════════════════════════════════
   BREADCRUMB (navigation.path)
════════════════════════════════════════ */

.md-path {
  color: var(--etendo-text-muted);
  font-size: 0.72rem;
}

.md-path__item::after {
  color: var(--etendo-border);
}

/* ════════════════════════════════════════
   TIPOGRAFÍA
════════════════════════════════════════ */

.md-typeset h1 {
  font-weight: 700;
  color: var(--etendo-text);
}

.md-typeset h2,
.md-typeset h3 {
  font-weight: 600;
  color: var(--etendo-text);
}

.md-typeset a {
  color: var(--etendo-link);
}

.md-typeset a:hover {
  color: var(--etendo-link-hover);
}

/* ════════════════════════════════════════
   LOGO
════════════════════════════════════════ */

.md-header__button.md-logo img {
  height: 1.8rem;
  width: auto;
}

/* ════════════════════════════════════════
   CÓDIGO
════════════════════════════════════════ */

.md-typeset pre > code {
  border-radius: 6px;
}

[data-md-color-scheme="slate"] .md-typeset code {
  background-color: #1E2433;
  color: #E2E8F0;
}

/* ════════════════════════════════════════
   ADMONITIONS (modo oscuro)
════════════════════════════════════════ */

[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details {
  background-color: var(--etendo-bg-surface);
  border-color: var(--etendo-border);
}

/* ════════════════════════════════════════
   TABLAS (modo oscuro)
════════════════════════════════════════ */

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: var(--etendo-bg-surface);
  color: var(--etendo-text);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) td {
  border-color: var(--etendo-border);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:hover {
  background-color: var(--etendo-bg-surface);
}

/* ════════════════════════════════════════
   HOME PAGE
════════════════════════════════════════ */

.etendo-home__hero {
  position: relative;
  overflow: hidden;
  background-color: var(--etendo-bg-surface);
  border-bottom: 1px solid var(--etendo-border);
  padding: 7rem 2rem 6rem;
  text-align: center;
}

.etendo-home__hero-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  max-width: 700px;
  height: auto;
  opacity: 0.1;
  pointer-events: none;
  user-select: none;
}

.etendo-home__hero-inner {
  position: relative;
  z-index: 1;
}

.etendo-home__logo {
  height: 3rem !important;
  width: auto !important;
  max-width: 200px !important;
  margin-bottom: 2rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.etendo-home__title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--etendo-text);
  margin: 0 0 1rem;
  line-height: 1.2;
}

.etendo-home__subtitle {
  font-size: 1.05rem;
  color: var(--etendo-text-muted);
  max-width: 520px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}

.etendo-home__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.etendo-home__sections {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3.5rem 2rem 4rem;
}

.etendo-home__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.etendo-home__card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background-color: var(--etendo-bg-content);
  border: 1px solid var(--etendo-border);
  border-radius: 8px;
  text-decoration: none !important;
  color: var(--etendo-text-muted);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.etendo-home__card:hover {
  border-color: var(--etendo-yellow);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
  text-decoration: none !important;
}

.etendo-home__card-icon {
  width: 2rem;
  height: 2rem;
  color: var(--etendo-yellow);
  margin-bottom: 0.875rem;
  flex-shrink: 0;
}

.etendo-home__card-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.etendo-home__card h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--etendo-text);
  margin: 0 0 0.4rem;
}

.etendo-home__card p {
  font-size: 0.825rem;
  color: var(--etendo-text-muted);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .etendo-home__grid { grid-template-columns: repeat(2, 1fr); }
  .etendo-home__title { font-size: 1.75rem; }
}

@media (max-width: 480px) {
  .etendo-home__grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════
   BOTONES
════════════════════════════════════════ */

.md-typeset .md-button {
  border-color: var(--etendo-border);
  color: var(--etendo-text);
  border-radius: 4px;
}

.md-typeset .md-button:hover,
.md-typeset .md-button:focus {
  border-color: var(--etendo-text-muted);
  color: var(--etendo-text);
  background-color: var(--etendo-bg-surface);
}

.md-typeset .md-button--primary,
[data-md-color-primary="white"] .md-button--primary,
[data-md-color-primary="custom"] .md-button--primary {
  background-color: var(--etendo-yellow);
  border-color: var(--etendo-yellow);
  color: #111827;
  border-radius: 4px;
}

.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus,
[data-md-color-primary="white"] .md-button--primary:hover,
[data-md-color-primary="custom"] .md-button--primary:hover {
  background-color: #E6BB00;
  border-color: #E6BB00;
  color: #111827;
}

[data-md-color-scheme="slate"] .md-typeset .md-button {
  border-color: var(--etendo-border);
  color: var(--etendo-text);
}

[data-md-color-scheme="slate"] .md-typeset .md-button:hover {
  background-color: var(--etendo-bg-surface);
  color: var(--etendo-text);
}

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */

.md-footer {
  background-color: var(--etendo-sidebar-bg);
  color: var(--etendo-sidebar-text);
}

[data-md-color-scheme="default"] .md-footer {
  color: var(--etendo-text-muted);
}