/* ============================================================================
   dian.css — Lector de normativa DIAN
   ----------------------------------------------------------------------------
   Toma el lenguaje del documento maestro de PasaTuPrueba (documentoestudioMC03):
   papel crema, tinta violeta muy oscura, acento dorado, Libre Franklin y una
   columna de lectura de 74 caracteres. La barra lateral oscura sostiene el
   índice, el buscador y el progreso, igual que allí.

   La norma se lee, no se ojea: por eso manda la tipografía y no la interfaz.
   ============================================================================ */

:root{
  --dn-paper:#faf8f3;   --dn-paper2:#eceadf;  --dn-card:#fffdf8;
  --dn-ink:#1c1a2e;     --dn-ink2:#5a566b;    --dn-ink3:#8a8496;
  --dn-acc:#a8790c;     --dn-accbg:#f4e7c8;
  --dn-nor:#1f5794;     --dn-norbg:#e6eef7;
  --dn-marca:#FF8A00;
  --dn-side:#1c1a2e;
  --dn-w:74ch;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --dn-paper:#14131c; --dn-paper2:#211f2c; --dn-card:#1a1826;
    --dn-ink:#efece4;   --dn-ink2:#b6b1c2;   --dn-ink3:#8a8496;
    --dn-acc:#d9a63a;   --dn-accbg:#2e2413;
    --dn-nor:#7fb2d6;   --dn-norbg:#16232e;
    --dn-side:#0f0e16;
  }
}
:root[data-theme="dark"]{
  --dn-paper:#14131c; --dn-paper2:#211f2c; --dn-card:#1a1826;
  --dn-ink:#efece4;   --dn-ink2:#b6b1c2;   --dn-ink3:#8a8496;
  --dn-acc:#d9a63a;   --dn-accbg:#2e2413;
  --dn-nor:#7fb2d6;   --dn-norbg:#16232e;
  --dn-side:#0f0e16;
}

body.dian-lector{ background:var(--dn-paper); color:var(--dn-ink);
  font-family:'Libre Franklin',system-ui,-apple-system,sans-serif; }

/* ── Estructura de dos columnas ──────────────────────────────────────────── */
/* El navbar de la web pública es fijo, de 72 px, abajo. */
:root{ --nav-alto:72px }
.dn{ display:grid;grid-template-columns:320px minmax(0,1fr);
     min-height:calc(100vh - var(--nav-alto));align-items:start }

/* ── Barra lateral ───────────────────────────────────────────────────────── */
.dn-side{
  position:sticky;top:0;height:calc(100vh - var(--nav-alto));overflow-y:auto;background:var(--dn-side);color:#e8e6ef;
  display:flex;flex-direction:column;gap:0;
}
.dn-marca{ padding:22px 22px 16px;border-bottom:1px solid rgba(255,255,255,.09) }
.dn-marca .logo{ font-weight:900;font-size:15px;letter-spacing:-.01em;color:#fff }
.dn-marca .logo b{ color:var(--dn-marca) }
.dn-marca .tipo{ font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:3px }
.dn-stit{ padding:16px 22px 12px;font-size:14.5px;font-weight:700;line-height:1.35;color:#fff }
.dn-smeta{ padding:0 22px 14px;font-size:12px;color:rgba(255,255,255,.55);line-height:1.5 }

.dn-find{ padding:0 18px 14px }
.dn-find input{
  width:100%;padding:9px 12px;border-radius:9px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.07);color:#fff;font-family:inherit;font-size:13.5px;
}
.dn-find input::placeholder{ color:rgba(255,255,255,.45) }
.dn-find input:focus{ outline:2px solid var(--dn-acc);outline-offset:1px;border-color:transparent }

.dn-toc{ flex:1;padding:4px 10px 20px;font-size:13px }
.dn-toc details{ margin-bottom:2px }
.dn-toc summary{
  cursor:pointer;padding:7px 10px;border-radius:7px;color:rgba(255,255,255,.9);
  font-weight:700;list-style:none;display:flex;align-items:baseline;gap:8px;
}
.dn-toc summary::-webkit-details-marker{ display:none }
.dn-toc summary::before{ content:"▸";color:var(--dn-acc);font-size:11px;transition:transform .15s }
.dn-toc details[open] > summary::before{ transform:rotate(90deg) }
.dn-toc summary:hover{ background:rgba(255,255,255,.07) }
.dn-toc summary .n{ margin-left:auto;font-size:11px;color:rgba(255,255,255,.4);font-variant-numeric:tabular-nums }
.dn-toc .nivel2{ padding-left:14px }
.dn-toc a{
  display:flex;gap:8px;align-items:baseline;padding:6px 10px;border-radius:7px;
  color:rgba(255,255,255,.66);text-decoration:none;line-height:1.35;
}
.dn-toc a:hover{ background:rgba(255,255,255,.07);color:#fff }
.dn-toc a[aria-current="page"]{ background:var(--dn-acc);color:#fff;font-weight:700 }
.dn-toc a .n{ margin-left:auto;font-size:11px;opacity:.6;font-variant-numeric:tabular-nums }

.dn-sfoot{ padding:14px 22px 18px;border-top:1px solid rgba(255,255,255,.09);font-size:11.5px;color:rgba(255,255,255,.5) }
.dn-sfoot .bar{ height:4px;border-radius:2px;background:rgba(255,255,255,.14);margin-top:7px;overflow:hidden }
.dn-sfoot .bar i{ display:block;height:100%;background:var(--dn-acc) }

/* ── Zona de lectura ─────────────────────────────────────────────────────── */
.dn-main{ min-width:0 }
/* El logo del sitio flota arriba a la derecha: la barra le deja aire. */
.dn-top{
  position:sticky;top:0;z-index:5;padding-right:clamp(34px,20vw,270px);display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:12px 34px;background:color-mix(in srgb, var(--dn-paper) 92%, transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--dn-paper2);
}
.dn-crumb{ font-size:12.5px;color:var(--dn-ink3);flex:1;min-width:0 }
.dn-crumb b{ color:var(--dn-ink2);font-weight:600 }
.dn-volver{
  font-size:12.5px;font-weight:700;color:var(--dn-acc);text-decoration:none;
  padding:6px 12px;border:1px solid var(--dn-accbg);border-radius:8px;white-space:nowrap;
}
.dn-volver:hover{ background:var(--dn-accbg) }

.dn-wrap{ max-width:var(--dn-w);margin:0 auto;padding:34px 34px calc(var(--nav-alto) + 30px) }
.dn-kick{ font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--dn-acc) }
.dn-h1{ font-size:clamp(24px,3.2vw,34px);line-height:1.15;margin:10px 0 12px;font-weight:900;letter-spacing:-.02em;text-wrap:balance }
.dn-meta{ font-size:12.5px;color:var(--dn-ink3);margin-bottom:26px;line-height:1.6 }

/* ── El artículo ─────────────────────────────────────────────────────────── */
.dn-art{
  background:var(--dn-card);border:1px solid var(--dn-paper2);border-radius:12px;
  padding:24px 26px;margin:0 0 16px;scroll-margin-top:76px;
}
.dn-art:target,.dn-art.destacado{ border-color:var(--dn-acc);box-shadow:0 0 0 3px var(--dn-accbg) }
.dn-art > header{ display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px }
.dn-ident{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:700;
  color:#fff;background:var(--dn-acc);padding:3px 9px;border-radius:6px;white-space:nowrap;
}
.dn-art h3{ margin:0;font-size:15.5px;line-height:1.4;font-weight:800;color:var(--dn-ink);flex:1 1 220px;min-width:0 }
.dn-texto{ font-size:16px;line-height:1.72;color:var(--dn-ink2);white-space:pre-wrap;margin:0 }
.dn-texto mark{ background:var(--dn-accbg);color:var(--dn-ink);padding:0 2px;border-radius:2px }

/* ── Resultados de búsqueda ──────────────────────────────────────────────── */
.dn-hits{ display:grid;gap:10px;margin:0 0 24px }
.dn-hit{
  display:block;background:var(--dn-card);border:1px solid var(--dn-paper2);border-left:3px solid var(--dn-acc);
  border-radius:10px;padding:16px 18px;text-decoration:none;color:inherit;transition:.15s;
}
.dn-hit:hover{ border-color:var(--dn-acc);transform:translateX(2px) }
.dn-hit .cab{ display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px }
.dn-hit h4{ margin:0;font-size:14px;font-weight:800;line-height:1.35;flex:1 1 200px }
.dn-hit p{ margin:0;font-size:13.5px;line-height:1.6;color:var(--dn-ink3) }
.dn-hit .donde{ font-size:11.5px;color:var(--dn-ink3) }

.dn-vacio{ text-align:center;padding:52px 20px;border:1px dashed var(--dn-paper2);border-radius:12px;color:var(--dn-ink3) }
.dn-vacio h3{ margin:0 0 6px;color:var(--dn-ink) }

/* ── Índice de normas ────────────────────────────────────────────────────── */
.dn-normas{ display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;margin:30px 0 50px }
.dn-norma{
  display:flex;flex-direction:column;gap:9px;padding:26px;border-radius:14px;text-decoration:none;color:inherit;
  background:var(--dn-card);border:1px solid var(--dn-paper2);transition:.2s;position:relative;overflow:hidden;
}
.dn-norma::before{ content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--dn-acc) }
.dn-norma:hover{ transform:translateY(-2px);border-color:var(--dn-acc) }
.dn-norma .tipo{ font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--dn-acc) }
.dn-norma h3{ margin:0;font-size:18px;line-height:1.3 }
.dn-norma p{ margin:0;font-size:14px;line-height:1.55;color:var(--dn-ink3) }
.dn-norma .pie{ margin-top:auto;padding-top:12px;font-size:12px;color:var(--dn-ink3);font-variant-numeric:tabular-nums }
.dn-estado{ display:inline-block;padding:2px 8px;border-radius:5px;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase }
.dn-estado.completa{ background:#e3f0e8;color:#1f6b4a }
.dn-estado.parcial{ background:var(--dn-accbg);color:var(--dn-acc) }
.dn-estado.pendiente{ background:var(--dn-paper2);color:var(--dn-ink3) }

@media (max-width:900px){
  .dn{ grid-template-columns:1fr }
  .dn-side{ position:static;height:auto;max-height:none }
  .dn-toc{ max-height:340px;overflow-y:auto }
  .dn-wrap{ padding:24px 18px }
  .dn-top{ padding:10px 18px }
}

/* ── Párrafos y tablas dentro del artículo ───────────────────────────────── */
.dn-p{ font-size:16px;line-height:1.72;color:var(--dn-ink2);margin:0 0 14px;white-space:pre-wrap }
.dn-p:last-child{ margin-bottom:0 }
.dn-tabla-caja{ overflow-x:auto;margin:14px 0;border:1px solid var(--dn-paper2);border-radius:9px;background:var(--dn-paper) }
.dn-tabla{ width:100%;border-collapse:collapse;font-size:13.5px }
.dn-tabla th{
  text-align:left;padding:9px 12px;background:var(--dn-accbg);color:var(--dn-acc);
  font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  border-bottom:1px solid var(--dn-paper2);white-space:nowrap;
}
.dn-tabla td{ padding:9px 12px;border-bottom:1px solid var(--dn-paper2);vertical-align:top;color:var(--dn-ink2);line-height:1.5 }
.dn-tabla tr:last-child td{ border-bottom:0 }
.dn-tabla td.num{ font-variant-numeric:tabular-nums;white-space:nowrap }

/* ── De qué norma anterior viene el artículo (la 227 es compilatoria) ────── */
.dn-procede{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:0 0 14px;
  padding:10px 14px;border-left:3px solid var(--dn-acc);background:var(--dn-accbg);
  border-radius:0 9px 9px 0;font-size:13.5px;color:var(--dn-ink2);
}
.dn-procede span{
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--dn-acc);
}

/* ── El grafo de citas ─────────────────────────────────────────────────────
   Va bajo el texto del artículo y responde de qué depende y quién depende de
   él. Lo que está cargado se enlaza; lo que no, se nombra y se marca, para
   que la ausencia se vea en vez de disfrazarse de enlace roto. */
.dn-grafo{
  margin:28px 0 8px;padding:20px 22px;border-radius:14px;
  background:var(--dn-paper2);border:1px solid rgba(0,0,0,.06);
}
:root[data-theme="dark"] .dn-grafo{ border-color:rgba(255,255,255,.07) }
:root[data-theme="dark"] .dn-gbloque + .dn-gbloque{ border-top-color:rgba(255,255,255,.08) }
:root[data-theme="dark"] .dn-nocarg{ border-color:rgba(255,255,255,.1) }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .dn-grafo{ border-color:rgba(255,255,255,.07) }
  :root:not([data-theme="light"]) .dn-gbloque + .dn-gbloque{ border-top-color:rgba(255,255,255,.08) }
  :root:not([data-theme="light"]) .dn-nocarg{ border-color:rgba(255,255,255,.1) }
}
.dn-gbloque + .dn-gbloque{ margin-top:18px;padding-top:16px;border-top:1px solid rgba(0,0,0,.07) }
.dn-glista{ list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:5px }
.dn-glista li{ font-size:13.5px;line-height:1.55;color:var(--dn-ink2) }
.dn-glista a{ color:var(--dn-nor);text-decoration:none;font-weight:600 }
.dn-glista a:hover{ text-decoration:underline }
.dn-glista .epi{ color:var(--dn-ink3);margin-left:6px }
.dn-nocarg{
  margin-left:7px;padding:1px 7px;border-radius:99px;font-size:11px;
  background:var(--dn-paper);color:var(--dn-ink3);border:1px solid rgba(0,0,0,.08);
}
.dn-gmas{ margin:8px 0 0;font-size:12.5px;color:var(--dn-ink3) }
@media (max-width:760px){ .dn-grafo{ padding:16px 14px } }

/* Paginación del texto de un anexo: los técnicos llegan a millones de
   caracteres y se leen por trozos. */
.dn-paginas{
  display:flex;align-items:center;justify-content:center;gap:16px;
  margin:22px 0 8px;font-size:13.5px;
}
.dn-paginas a{ color:var(--dn-nor);text-decoration:none;font-weight:600 }
.dn-paginas a:hover{ text-decoration:underline }
.dn-paginas .off{ color:var(--dn-ink3);opacity:.5 }
.dn-pnum{
  padding:3px 12px;border-radius:99px;background:var(--dn-paper2);
  color:var(--dn-ink2);font-variant-numeric:tabular-nums;
}