/* ============================================================
   DATANOMADLAB — UI-KIT WEB v1.0
   Capa de extensiones para la web. Requiere el design system
   oficial: 07-design-system/tokens.css + components.css.
   Todo usa tokens --dnl-*; los pocos valores nuevos se declaran
   aquí como tokens de extensión (regla del DS: primero el token,
   después el uso).
   ============================================================ */

:root {
  /* Tokens de extensión (superficies de evidencia sobre oscuro) */
  --dnl-term-text: #C4D4CE;
  --dnl-term-comment: #6E8781;
  --dnl-dark-text-soft: #DCE8E4;
}

/* ---------- Reset mínimo + layout ---------- */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
img, svg { max-width: 100%; height: auto; }
::selection { background: var(--dnl-amber); color: var(--dnl-ink); }

.dnl-wrap { max-width: var(--dnl-container); margin: 0 auto; padding: 0 var(--dnl-space-6); }
@media (max-width: 480px) { .dnl-wrap { padding: 0 var(--dnl-space-4); } }

/* Cuando la nav envuelve un .dnl-wrap, el gutter lo pone el wrap (evita padding doble) */
.dnl-nav:has(> .dnl-wrap) { padding-left: 0; padding-right: 0; }

.dnl-section { padding: var(--dnl-section-y) 0; }
.dnl-section--mist { background: var(--dnl-mist); }
.dnl-section--ink {
  background: var(--dnl-dark-bg);
  color: var(--dnl-dark-text-soft);
}
.dnl-section--ink .dnl-h1, .dnl-section--ink .dnl-h2, .dnl-section--ink .dnl-h3 { color: var(--dnl-white); }
.dnl-section--ink .dnl-muted, .dnl-section--ink .dnl-lead { color: var(--dnl-dark-muted); }
.dnl-section--ink .dnl-data { color: var(--dnl-mint); }
.dnl-section--ink .dnl-data--hallazgo { color: var(--dnl-amber); }

/* ---------- Tipos auxiliares ---------- */

.dnl-lead {
  color: var(--dnl-muted);
  font-size: var(--dnl-text-lg);
  max-width: 40rem;
}

/* Eyebrow de sección: label mono en verde (mint-dark en claro, mint en oscuro) */
.dnl-eyebrow {
  font-family: var(--dnl-font-mono);
  font-size: var(--dnl-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--dnl-tracking-mono-label);
  color: var(--dnl-mint-dark);
  margin-bottom: var(--dnl-space-3);
}
.dnl-section--ink .dnl-eyebrow { color: var(--dnl-mint); }

/* ---------- Marca: isotipo inline + wordmark ----------
   Siempre `datanomadlab`: minúsculas, sin espacios, "lab" en mint.
   El texto va DENTRO de .dnl-brand__word para que el gap del flex
   no separe "datanomad" de "lab". */

.dnl-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.dnl-brand__word {
  font-family: var(--dnl-font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: var(--dnl-tracking-display);
  color: var(--dnl-ink);
}
.dnl-brand__word .lab { color: var(--dnl-mint-dark); }
.dnl-brand--on-dark .dnl-brand__word { color: var(--dnl-white); }
.dnl-brand--on-dark .dnl-brand__word .lab { color: var(--dnl-mint); }

/* ---------- Textura de facturas (guía §4) ----------
   Solo fondos oscuros · opacidad ≤ 10–12% · nunca sobre el texto. */

.dnl-texture-invoice { position: relative; isolation: isolate; }
.dnl-texture-invoice::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='300' viewBox='0 0 560 300'%3E%3Cg font-family='IBM Plex Mono, monospace' font-size='13' fill='%239DB5AE'%3E%3Ctext x='16' y='36'%3E%244.612%3C/text%3E%3Ctext x='150' y='36'%3E1.2 TB%3C/text%3E%3Ctext x='268' y='36'%3E90d idle%3C/text%3E%3Ctext x='420' y='36'%3ESELECT *%3C/text%3E%3Ctext x='70' y='96'%3E%2431.400/mes%3C/text%3E%3Ctext x='260' y='96'%3Eon-demand%3C/text%3E%3Ctext x='420' y='96'%3E0/34 tests%3C/text%3E%3Ctext x='16' y='156'%3Eegress%3C/text%3E%3Ctext x='140' y='156'%3E%24515.000/a%C3%B1o%3C/text%3E%3Ctext x='340' y='156'%3Esin lifecycle%3C/text%3E%3Ctext x='40' y='216'%3E14 zombies%3C/text%3E%3Ctext x='220' y='216'%3E%246.950%3C/text%3E%3Ctext x='350' y='216'%3Esin partici%C3%B3n%3C/text%3E%3Ctext x='16' y='276'%3Escorecard 31/100%3C/text%3E%3Ctext x='250' y='276'%3Eread-only%3C/text%3E%3Ctext x='420' y='276'%3E%248.210%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-size: 560px 300px;
}

/* ---------- Motivo de barras (guía §5) ----------
   Máx. una vez por pieza, cierre visual esquina derecha.
   <div class="dnl-bar-motif"><i class="top"></i><i class="b1"></i><i class="b2"></i><i class="b3"></i></div> */

.dnl-bar-motif {
  display: grid;
  grid-template-columns: repeat(3, 14px);
  gap: 8px;
  align-items: end;
  height: 72px;
  position: relative;
}
.dnl-bar-motif i { border-radius: 5px; display: block; }
.dnl-bar-motif .top {
  position: absolute; left: 0; top: 0;
  width: 14px; height: 15px;
  background: var(--dnl-amber); /* el hallazgo, despegándose de la factura */
}
.dnl-bar-motif .b1 { grid-column: 1; height: 38px; background: var(--dnl-deep); }
.dnl-bar-motif .b2 { grid-column: 2; height: 34px; background: var(--dnl-deep); opacity: .72; }
.dnl-bar-motif .b3 { grid-column: 3; height: 20px; background: var(--dnl-deep); opacity: .48; }
.dnl-section--ink .dnl-bar-motif .b1,
.dnl-section--ink .dnl-bar-motif .b2,
.dnl-section--ink .dnl-bar-motif .b3,
.dnl-footer .dnl-bar-motif .b1,
.dnl-footer .dnl-bar-motif .b2,
.dnl-footer .dnl-bar-motif .b3 { background: var(--dnl-mint); }

/* ---------- Teardown de factura (elemento firma) ---------- */

.dnl-teardown {
  background: var(--dnl-white);
  border: var(--dnl-border-w) solid var(--dnl-line);
  border-radius: var(--dnl-radius-lg);
  box-shadow: var(--dnl-shadow-lg);
  overflow: hidden;
}
.dnl-teardown__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--dnl-space-3);
  padding: 14px var(--dnl-space-5);
  border-bottom: var(--dnl-border-w) solid var(--dnl-line);
  background: var(--dnl-mist);
}
.dnl-teardown__src {
  font-family: var(--dnl-font-mono);
  font-size: var(--dnl-text-xs);
  color: var(--dnl-muted);
  letter-spacing: .06em;
}
.dnl-teardown__rows { padding: var(--dnl-space-2) 0; }
.dnl-teardown__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--dnl-space-3);
  padding: 11px var(--dnl-space-5);
  font-family: var(--dnl-font-mono);
  font-size: var(--dnl-text-sm);
  font-variant-numeric: tabular-nums;
  border-bottom: var(--dnl-border-w) dashed var(--dnl-line);
}
.dnl-teardown__row:last-child { border-bottom: none; }
.dnl-teardown__row .amt { color: var(--dnl-muted); }
.dnl-teardown__row--flag { background: var(--dnl-amber-soft); }
.dnl-teardown__row--flag .svc::before { content: "▲ "; color: var(--dnl-amber); font-size: .75em; }
.dnl-teardown__row--flag .amt { color: var(--dnl-amber-ink); font-weight: 600; }
.dnl-teardown__note {
  grid-column: 1 / -1;
  font-size: var(--dnl-text-xs);
  color: var(--dnl-amber-ink);
  padding-left: var(--dnl-space-4);
}
.dnl-teardown__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--dnl-space-3);
  padding: var(--dnl-space-4) var(--dnl-space-5);
  background: var(--dnl-dark-bg);
  color: var(--dnl-white);
}
.dnl-teardown__total .lbl { font-family: var(--dnl-font-mono); font-size: var(--dnl-text-xs); color: var(--dnl-dark-muted); }
.dnl-teardown__total .num {
  font-family: var(--dnl-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--dnl-mint);
}

/* ---------- Terminal (evidencia, no marketing) ---------- */

.dnl-term {
  background: var(--dnl-dark-bg);
  border-radius: var(--dnl-radius-lg);
  padding: var(--dnl-space-6);
  font-family: var(--dnl-font-mono);
  font-size: var(--dnl-text-sm);
  line-height: 1.8;
  color: var(--dnl-term-text);
  box-shadow: var(--dnl-shadow-lg);
}
.dnl-term .c { color: var(--dnl-term-comment); }
.dnl-term .g { color: var(--dnl-mint); }
.dnl-term .a { color: var(--dnl-amber); }

/* ---------- Scorecard de barras ---------- */

.dnl-dim-row {
  display: grid;
  grid-template-columns: 200px 1fr 52px;
  gap: var(--dnl-space-4);
  align-items: center;
  padding: 9px 0;
}
.dnl-dim-row .name { font-family: var(--dnl-font-mono); font-size: var(--dnl-text-sm); color: var(--dnl-ink); }
.dnl-dim-row .score { font-family: var(--dnl-font-mono); font-size: var(--dnl-text-sm); color: var(--dnl-muted); text-align: right; }

.dnl-bar { height: 8px; background: var(--dnl-mist); border-radius: var(--dnl-radius-pill); overflow: hidden; }
.dnl-bar i {
  display: block;
  height: 100%;
  border-radius: var(--dnl-radius-pill);
  background: var(--dnl-deep);
  width: 0;
  transition: width var(--dnl-duration-slow) var(--dnl-ease);
}
.dnl-bar i.low { background: var(--dnl-amber); } /* ámbar = ahí se fuga el dinero */

/* ---------- Price card (panel oscuro de oferta) ---------- */

.dnl-price-card {
  background: var(--dnl-dark-bg);
  color: var(--dnl-dark-text-soft);
  border-radius: var(--dnl-radius-xl);
  padding: var(--dnl-space-10);
}
.dnl-price-card .plan {
  font-family: var(--dnl-font-mono);
  font-size: var(--dnl-text-xs);
  letter-spacing: var(--dnl-tracking-mono-label);
  color: var(--dnl-dark-muted);
  text-transform: uppercase;
}
.dnl-price-card .price {
  font-family: var(--dnl-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--dnl-white);
  margin: var(--dnl-space-3) 0 var(--dnl-space-1);
}
.dnl-price-card .per { font-size: var(--dnl-text-sm); color: var(--dnl-dark-muted); }

.dnl-garantia {
  margin: var(--dnl-space-6) 0;
  padding: var(--dnl-space-5);
  border: var(--dnl-border-w) solid rgba(29, 181, 132, .4);
  border-radius: var(--dnl-radius-md);
  background: rgba(29, 181, 132, .08);
}
.dnl-garantia strong { color: var(--dnl-mint); display: block; margin-bottom: 6px; font-size: var(--dnl-text-base); }
.dnl-garantia p { font-size: var(--dnl-text-sm); color: var(--dnl-term-text); }

/* ---------- Listas con marca ---------- */

.dnl-list-title {
  font-family: var(--dnl-font-mono);
  font-size: var(--dnl-text-xs);
  letter-spacing: var(--dnl-tracking-mono-label);
  text-transform: uppercase;
  color: var(--dnl-muted);
  margin: var(--dnl-space-6) 0 var(--dnl-space-2);
}
.dnl-list--check li, .dnl-list--dash li {
  list-style: none;
  padding: 10px 0;
  border-bottom: var(--dnl-border-w) dashed var(--dnl-line);
  font-size: var(--dnl-text-base);
  display: flex;
  gap: var(--dnl-space-3);
}
.dnl-list--check li::before { content: "✓"; color: var(--dnl-mint-dark); font-weight: 700; flex-shrink: 0; }
.dnl-list--dash li::before { content: "—"; color: var(--dnl-muted); flex-shrink: 0; }

/* ---------- Accesibilidad ---------- */

:focus-visible { outline: none; box-shadow: var(--dnl-focus-ring); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}