/* Portal /docs. Usa los tokens y componentes del sistema (tokens/sistema.css, sistema.css). Sin cursivas. */
.d-cuerpo { font-size: 15px; background: var(--color-bg); }
.d-layout { display: grid; grid-template-columns: 272px minmax(0, 1fr) 232px; max-width: 1520px; margin: 0 auto; }
.d-layout.d-con-ejemplo { grid-template-columns: 272px minmax(0, 1fr) minmax(0, 520px); }

/* ---------- navegación lateral ---------- */
.d-lado { position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; padding: 20px 14px 80px 20px; border-right: 1px solid var(--color-line); font-size: 14px; scrollbar-width: thin; }
.d-lado h5 { font: 500 10.5px var(--font-mono); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-dim); margin: 22px 8px 6px; }
.d-lado a { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--radius-xs); color: var(--color-text); line-height: 1.35; }
.d-lado a:hover { background: var(--color-bg2); color: var(--color-ink); }
.d-lado a.on { background: var(--color-primario-soft); color: var(--color-primario-ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--color-primario); }
.d-lado .d-sub { font-size: 12px; font-weight: 600; color: var(--color-muted); margin: 12px 8px 2px; }
.d-op { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-buscar { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--color-line2); border-radius: var(--radius-sm); color: var(--color-muted); font-size: 13.5px; background: var(--color-bg); }
.d-buscar:hover { border-color: var(--color-ink); }
.d-buscar kbd { margin-left: auto; font: 11px var(--font-mono); border: 1px solid var(--color-line2); border-radius: 3px; padding: 0 5px; }
.d-verbo { flex: none; font: 600 9.5px var(--font-mono); letter-spacing: .03em; padding: 2px 5px; border-radius: 3px; background: var(--color-surface2); color: var(--color-muted); min-width: 34px; text-align: center; }
.d-verbo.get { background: var(--color-primario-soft); color: var(--color-primario-ink); }
.d-verbo.post { background: var(--color-accent-soft); color: var(--color-accent-ink); }
.d-verbo.plan { background: var(--color-surface2); color: var(--color-dim); }

/* ---------- contenido ---------- */
.d-main { min-width: 0; padding: 28px clamp(24px, 4vw, 56px) 96px; }
.d-acciones { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.d-miga { font: 12px var(--font-mono); color: var(--color-dim); }
.d-miga a:hover { color: var(--color-ink); }
.d-botones { display: flex; gap: 6px; }
.d-botones a, .d-botones button { font: 12px var(--font-mono); color: var(--color-muted); border: 1px solid var(--color-line2); border-radius: var(--radius-sm); padding: 4px 9px; }
.d-botones a:hover, .d-botones button:hover { color: var(--color-ink); border-color: var(--color-ink); }
.d-texto { max-width: 780px; color: var(--color-text); line-height: 1.68; }
.d-texto h1 { font-family: var(--font-display); font-weight: 650; font-size: clamp(32px, 3.4vw, 42px); line-height: 1.08; letter-spacing: var(--tracking-title); color: var(--color-ink); margin: 6px 0 14px; text-wrap: balance; }
.d-texto h2 { font-family: var(--font-display); font-weight: 650; font-size: 24px; letter-spacing: -0.02em; color: var(--color-ink); margin: 48px 0 8px; scroll-margin-top: 84px; padding-top: 4px; }
.d-texto h3 { font-weight: 600; font-size: 17px; color: var(--color-ink); margin: 32px 0 6px; scroll-margin-top: 84px; letter-spacing: -0.01em; }
.d-texto h4 { font-weight: 600; font-size: 15px; color: var(--color-ink); margin: 22px 0 4px; }
.d-ancla { margin-left: 8px; color: var(--color-line2); font-weight: 400; opacity: 0; transition: opacity .15s; }
.d-texto :is(h2, h3):hover .d-ancla { opacity: 1; }
.d-texto p, .d-texto ul, .d-texto ol, .d-texto blockquote { margin-top: 12px; }
.d-texto ul, .d-texto ol { padding-left: 22px; }
.d-texto li { margin-top: 5px; }
.d-texto a:not(.m-btn):not(.d-ancla) { color: var(--color-primario-ink); text-decoration: underline; text-decoration-color: var(--color-line2); text-underline-offset: 3px; }
.d-texto a:not(.m-btn):not(.d-ancla):hover { text-decoration-color: var(--color-primario-ink); }
.d-texto strong { color: var(--color-ink); font-weight: 600; }
.d-texto :not(pre) > code { font: 13px var(--font-mono); background: var(--color-surface2); color: var(--color-ink); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.d-texto blockquote { border-left: 3px solid var(--color-line2); padding: 2px 0 2px 14px; color: var(--color-muted); }

/* avisos */
.d-aviso { margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-sm); font-size: 14.5px; line-height: 1.6; }
.d-aviso > :first-child { margin-top: 0; }
.d-aviso.nota { background: var(--color-primario-soft); box-shadow: inset 3px 0 0 var(--color-primario); color: var(--color-ink); }
.d-aviso.aviso { background: var(--color-accent-soft); box-shadow: inset 3px 0 0 var(--color-accent); color: var(--color-ink); }
.d-aviso code { background: rgba(255,255,255,.75) !important; }

/* tablas */
.d-tabla { margin-top: 14px; overflow-x: auto; border: 1px solid var(--color-line); border-radius: var(--radius-md); }
.d-tabla table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.d-tabla th { text-align: left; font: 500 10.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--color-dim); background: var(--color-bg2); padding: 9px 12px; border-bottom: 1px solid var(--color-line); white-space: nowrap; }
.d-tabla td { padding: 9px 12px; border-bottom: 1px solid var(--color-line); vertical-align: top; }
.d-tabla tr:last-child td { border-bottom: 0; }
.d-tabla td:not(:last-child) code { white-space: nowrap; }
.d-tabla td strong { display: inline-block; margin-left: 4px; font: 600 10.5px var(--font-mono); letter-spacing: .03em; text-transform: uppercase; color: var(--color-sube); }
.d-ruta { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 10px 14px; background: var(--color-bg2); border: 1px solid var(--color-line); border-radius: var(--radius-sm); overflow-x: auto; }
.d-ruta code { font: 13.5px var(--font-mono); color: var(--color-ink); white-space: nowrap; }
.d-ruta .d-verbo { font-size: 11px; }
.d-tabla .num { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* código */
.d-codigo, .d-pestanas { margin-top: 14px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-code-bg); border: 1px solid var(--color-deep-line); }
.d-codigo-h, .d-pestanas-h { display: flex; align-items: center; gap: 2px; padding: 6px 8px 6px 14px; border-bottom: 1px solid rgba(255,255,255,.08); font: 12px var(--font-mono); color: var(--color-code-dim); }
.d-pestanas-h { padding-left: 6px; }
.d-pestanas-h [role=tab] { font: 12.5px var(--font-sans); font-weight: 500; color: var(--color-code-dim); padding: 5px 10px; border-radius: 5px; }
.d-pestanas-h [role=tab][aria-selected=true] { background: rgba(255,255,255,.1); color: #fff; }
.d-copiar { margin-left: auto; font: 11.5px var(--font-mono); color: var(--color-code-dim); padding: 4px 8px; border-radius: 4px; border: 1px solid rgba(255,255,255,.12); }
.d-copiar:hover { color: #fff; border-color: rgba(255,255,255,.35); }
.d-codigo pre, .d-pestanas pre, .d-probar-r pre { margin: 0; padding: 14px 16px; overflow-x: auto; font: 12.75px/1.65 var(--font-mono); color: var(--color-code-text); max-height: 560px; }
.d-codigo code .k, .d-pestanas code .k, .d-probar-r code .k { color: var(--color-code-key); }
.d-codigo code .s, .d-pestanas code .s, .d-probar-r code .s { color: var(--color-code-str); }
.d-codigo code .n, .d-pestanas code .n, .d-probar-r code .n { color: var(--color-code-num); }

/* índice de la página */
.d-indice { position: sticky; top: 64px; align-self: start; max-height: calc(100vh - 64px); overflow-y: auto; padding: 32px 20px 40px 8px; font-size: 13px; }
.d-indice h5 { font: 500 10.5px var(--font-mono); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-dim); margin-bottom: 8px; }
.d-indice a { display: block; padding: 4px 0 4px 12px; color: var(--color-muted); border-left: 1px solid var(--color-line); line-height: 1.4; }
.d-indice a:hover, .d-indice a.on { color: var(--color-ink); border-left-color: var(--color-primario); }

/* columna de ejemplos (referencia) */
.d-ejemplo { position: sticky; top: 64px; align-self: start; max-height: calc(100vh - 64px); overflow-y: auto; padding: 24px 24px 60px 0; scrollbar-width: thin; }
.d-ejemplo h2 { font: 500 10.5px var(--font-mono); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-dim); margin: 6px 0 0; }
.d-ejemplo .d-codigo pre { max-height: 380px; }

/* pie de página */
.d-pie-nav { max-width: 780px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--color-line); }
.d-pie-nav a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--color-line); border-radius: var(--radius-md); color: var(--color-ink); font-weight: 600; }
.d-pie-nav a:hover { border-color: var(--color-ink); }
.d-legal { max-width: 780px; margin-top: 28px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; }
.d-legal a { color: var(--color-muted); }
.d-legal a:hover { color: var(--color-ink); }
.d-pie-nav small { font: 11px var(--font-mono); color: var(--color-dim); font-weight: 400; }
.d-pie-nav .d-sig { text-align: right; grid-column: 2; }

/* ---------- Pruébalo ---------- */
.d-probar { margin-top: 18px; border: 1px solid var(--color-line2); border-radius: var(--radius-md); background: var(--color-bg); overflow: hidden; box-shadow: 0 18px 40px -30px rgba(15,42,34,.45); }
.d-probar-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--color-bg2); border-bottom: 1px solid var(--color-line); font-size: 13px; flex-wrap: wrap; }
.d-probar-h b { color: var(--color-ink); }
.d-probar-h code { font: 12px var(--font-mono); color: var(--color-ink); }
.d-sandbox { margin-left: auto; font: 10.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--color-primario-ink); background: var(--color-primario-soft); padding: 2px 7px; border-radius: 999px; }
.d-probar-c { padding: 12px; display: grid; gap: 10px; }
.d-probar-c label { display: grid; gap: 4px; font-size: 13px; }
.d-probar-c label span { color: var(--color-ink); }
.d-probar-c label small { color: var(--color-dim); font: 11px var(--font-mono); }
.d-probar-c .req { color: var(--color-sube); font-style: normal; }
.d-probar-c input, .d-probar-c select, .d-probar-c textarea { width: 100%; font: 13px var(--font-mono); padding: 7px 9px; border: 1px solid var(--color-line2); border-radius: var(--radius-xs); background: #fff; color: var(--color-ink); }
.d-probar-c input:focus, .d-probar-c select:focus, .d-probar-c textarea:focus { outline: 2px solid var(--color-focus); outline-offset: 0; }
.d-probar-b { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--color-muted); }
.d-probar-b > span { margin-left: 8px; }
.d-chip { font: 12px var(--font-mono); padding: 4px 8px; border: 1px solid var(--color-line2); border-radius: 999px; color: var(--color-text); }
.d-chip:hover { border-color: var(--color-ink); }
.d-probar-r { border-top: 1px solid var(--color-line); background: var(--color-code-bg); }
.d-probar-estado { padding: 8px 14px; font: 12px var(--font-mono); color: var(--color-code-dim); border-bottom: 1px solid rgba(255,255,255,.08); }
.d-status { display: inline-block; padding: 1px 7px; border-radius: 4px; font-weight: 600; }
.d-status.ok { background: #1d6b52; color: #fff; }
.d-status.mal { background: #8c2a20; color: #fff; }
.d-probar-r pre { max-height: 420px; }

/* ---------- cobertura en vivo ---------- */
.d-cobertura-viva { margin-top: 16px; }
.d-cob-cab { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--color-muted); }
.d-sintetico, .d-real { font: 600 10.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.d-sintetico { background: var(--color-accent-soft); color: var(--color-accent-ink); }
.d-real { background: var(--color-primario-soft); color: var(--color-primario-ink); }
.d-cob-totales { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 14px; border-top: 2px solid var(--color-ink); }
.d-cob-totales div { padding: 12px 10px 12px 0; border-bottom: 1px solid var(--color-line); }
.d-cob-totales b { display: block; font: 500 24px var(--font-num); letter-spacing: -0.03em; color: var(--color-ink); }
.d-cob-totales span { font-size: 12.5px; color: var(--color-muted); }
.d-cob-cats, .d-cob-nota { font-size: 13.5px; color: var(--color-muted); }

/* ---------- búsqueda ---------- */
.d-modal { position: fixed; inset: 0; z-index: 100; background: rgba(11,36,29,.45); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px; }
.d-modal[hidden] { display: none; }
.d-modal-caja { width: min(680px, 100%); background: var(--color-bg); border-radius: var(--radius-lg); box-shadow: 0 30px 80px -20px rgba(0,0,0,.45); overflow: hidden; }
.d-modal-caja input { width: 100%; border: 0; border-bottom: 1px solid var(--color-line); padding: 16px 18px; font-size: 17px; outline: none; }
.d-resultados { max-height: 55vh; overflow-y: auto; padding: 6px; }
.d-resultados a { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); }
.d-resultados a.on, .d-resultados a:hover { background: var(--color-primario-soft); }
.d-resultados b { color: var(--color-ink); font-weight: 600; }
.d-resultados small { font: 11px var(--font-mono); color: var(--color-dim); }
.d-resultados span { font-size: 13px; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-vacio { padding: 14px; color: var(--color-muted); font-size: 14px; }
.d-modal-pie { padding: 8px 14px; border-top: 1px solid var(--color-line); font: 11.5px var(--font-mono); color: var(--color-dim); }

/* ---------- responsive ---------- */
.d-barra-movil { display: none; }
@media (max-width: 1280px) {
  .d-layout { grid-template-columns: 252px minmax(0, 1fr); }
  .d-indice { display: none; }
  .d-layout.d-con-ejemplo { grid-template-columns: 252px minmax(0, 1fr); }
  .d-layout.d-con-ejemplo .d-ejemplo { grid-column: 2; position: static; max-height: none; padding: 0 clamp(24px, 4vw, 56px) 80px; max-width: 880px; }
  .d-layout.d-con-ejemplo .d-main { padding-bottom: 24px; }
  .d-layout.d-con-ejemplo .d-pie-nav { display: none; }
}
@media (max-width: 860px) {
  .d-layout, .d-layout.d-con-ejemplo { grid-template-columns: 1fr; }
  .d-layout.d-con-ejemplo .d-ejemplo { grid-column: 1; }
  .d-barra-movil { display: flex; gap: 8px; position: sticky; top: 64px; z-index: 40; padding: 8px 16px; background: rgba(255,255,255,.95); border-bottom: 1px solid var(--color-line); }
  .d-barra-movil button { font-size: 13.5px; font-weight: 600; padding: 7px 12px; border: 1px solid var(--color-line2); border-radius: var(--radius-sm); }
  .d-lado { display: none; position: fixed; top: 112px; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--color-bg); height: auto; border-right: 0; }
  .d-menu-abierto .d-lado { display: block; }
  .d-main { padding: 20px 18px 60px; }
  .d-cob-totales { grid-template-columns: repeat(3, 1fr); }
  .d-pie-nav { grid-template-columns: 1fr; }
  /* En móvil las tablas se apilan: cada fila es una tarjeta con la etiqueta de cada columna. */
  .d-tabla { border: 0; }
  .d-tabla thead { display: none; }
  .d-tabla table, .d-tabla tbody, .d-tabla tr, .d-tabla td { display: block; }
  .d-tabla tr { border: 1px solid var(--color-line); border-radius: var(--radius-sm); margin-bottom: 8px; padding: 6px 0; }
  .d-tabla td { border: 0; padding: 4px 12px; }
  .d-tabla td[data-l]:not([data-l=""])::before { content: attr(data-l); display: block; font: 500 10px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--color-dim); }
  .d-tabla td:not(:last-child) code { white-space: normal; }
  .d-tabla .num { text-align: left; }
  .d-pie-nav .d-sig { grid-column: 1; }
}