/* ==========================================================================
   PixaPrivacy — sistema visual
   --------------------------------------------------------------------------
   Sin build de Node: esta hoja se sirve tal cual. Ver docs/ARCHITECTURE.md §8

   DIRECCIÓN
   Ciberseguridad corporativa. Grafito, no negro puro. Un solo acento técnico
   (verde contenido) reservado a acciones primarias y estados positivos. La
   separación se consigue con superficie, borde y espacio — casi nunca con
   sombra. Lo «hacker» vive en el detalle monoespaciado (identificadores,
   hashes, señales), nunca en el fondo.

   TIPOGRAFÍA
   Pila del sistema. Este producto audita sitios por cargar recursos de
   terceros: pedirle la tipografía a un CDN sería contradecir en la propia
   interfaz lo que el informe recomienda. Si Inter está instalada se usa; si
   no, la pila degrada sin que se rompa nada.
   ========================================================================== */

:root {
  /* --------------------------------------------------------- Superficies */
  --bg:             #0d0f12;   /* fondo de la aplicación */
  --surface:        #13161b;   /* paneles principales */
  --surface-2:      #191d23;   /* paneles secundarios, cabeceras de tabla */
  --surface-3:      #1f242b;   /* hover, superficies elevadas */
  --line:           #252b33;   /* bordes y separadores */
  --line-soft:      #1c2128;   /* separadores internos */

  /* ------------------------------------------------------------- Texto */
  --ink:            #f4f5f7;
  --ink-soft:       #a7afba;
  --ink-faint:      #6f7883;

  /* ------------------------------------------------------------ Acento */
  --accent:         #8bbf45;
  --accent-bright:  #a3d45f;
  --accent-dim:     #5f8a2c;
  --accent-wash:    rgba(139, 191, 69, .12);
  --accent-line:    rgba(139, 191, 69, .32);

  /* ------------------------------------------------------------ Riesgo */
  --critical:       #ef6f66;
  --critical-wash:  rgba(214, 69, 60, .14);
  --critical-line:  rgba(214, 69, 60, .38);

  --high:           #e08d47;
  --high-wash:      rgba(194, 105, 30, .14);
  --high-line:      rgba(194, 105, 30, .38);

  --medium:         #d7b04a;
  --medium-wash:    rgba(199, 154, 30, .13);
  --medium-line:    rgba(199, 154, 30, .34);

  --low:            #8f9aa8;
  --low-wash:       rgba(143, 154, 168, .12);
  --low-line:       rgba(143, 154, 168, .28);

  --info:           #6ea8d8;
  --info-wash:      rgba(110, 168, 216, .12);
  --info-line:      rgba(110, 168, 216, .30);

  /* ------------------------------------------------------------ Formas */
  --r-sm:           6px;
  --r:              8px;
  --r-lg:           10px;

  --shadow:         0 1px 2px rgba(0, 0, 0, .35);
  --shadow-lift:    0 8px 28px rgba(0, 0, 0, .45);

  /* -------------------------------------------------------- Tipografía */
  --font: Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
          "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", "Cascadia Mono", "Cascadia Code",
          ui-monospace, Consolas, "Liberation Mono", monospace;

  /* ---------------------------------------------------------- Movimiento */
  --t: 160ms cubic-bezier(.4, 0, .2, 1);

  /* ------------------------------------------------------------- Medidas */
  --sidebar-w:      252px;
  --content-max:    1640px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv05" 1, "ss01" 1;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent-bright); }

h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 600; letter-spacing: -.014em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.02rem; }
h3 { font-size: .92rem; }

p { margin: 0 0 1rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }

::selection { background: var(--accent-wash); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Barras de desplazamiento discretas, del color de la superficie. */
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #2c333c; background-clip: content-box; }

/* ==========================================================================
   ESTRUCTURA
   ========================================================================== */

.app { display: flex; min-height: 100vh; }

/* --------------------------------------------------------------- Sidebar */

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--line-soft);
}

.sidebar__mark {
  width: 26px; height: 26px;
  flex: 0 0 26px;
  border-radius: var(--r-sm);
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  display: grid;
  place-items: center;
  color: var(--accent-bright);
}

.sidebar__name { display: block; font-size: .95rem; font-weight: 600; letter-spacing: -.02em; }
.sidebar__name em { font-style: normal; color: var(--ink-soft); font-weight: 500; }
.sidebar__tag {
  display: block;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .1em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

.sidebar__cta { padding: .85rem .85rem .35rem; }

.sidebar__nav { padding: .35rem .6rem 1rem; flex: 1; overflow-y: auto; }

.sidebar__section {
  padding: 1.05rem .55rem .35rem;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--ink-faint);
  font-weight: 600;
}

.sidebar__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .42rem .55rem;
  margin-bottom: 1px;
  border-radius: var(--r-sm);
  color: var(--ink-soft);
  font-size: .855rem;
  transition: background var(--t), color var(--t);
}
.sidebar__link svg { flex: 0 0 15px; opacity: .75; }
.sidebar__link:hover { background: var(--surface-2); color: var(--ink); }
.sidebar__link:hover svg { opacity: 1; }

/* Activo: indicador vertical + superficie apenas distinta. Sin bloque brillante. */
.sidebar__link[aria-current="page"] { background: var(--surface-2); color: var(--ink); font-weight: 500; }
.sidebar__link[aria-current="page"] svg { opacity: 1; color: var(--accent-bright); }
.sidebar__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 16px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
}

.sidebar__foot {
  padding: .8rem .95rem;
  border-top: 1px solid var(--line-soft);
  font-size: .8rem;
}
.sidebar__user { display: block; color: var(--ink); font-weight: 500; }
.sidebar__mail { display: block; color: var(--ink-faint); font-size: .75rem; word-break: break-all; }

/* ------------------------------------------------------------------ Main */

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  background: rgba(19, 22, 27, .82);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  padding: .7rem 1.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 52px;
}

.crumbs { display: flex; align-items: center; gap: .45rem; font-size: .84rem; color: var(--ink-faint); min-width: 0; }
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--ink); }
.crumbs span[aria-current] { color: var(--ink); font-weight: 500; }
.crumbs .sep { color: var(--line); }

.content { padding: 1.6rem; max-width: var(--content-max); width: 100%; }
.content--wide { max-width: none; }

/* ==========================================================================
   TARJETAS Y REJILLAS
   ========================================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 1.1rem;
}
.card--flat { background: transparent; }
.card--quiet { background: var(--surface-2); }

.card__head {
  padding: .8rem 1.05rem;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.card__head h2, .card__head h3 { margin: 0; }
.card__body { padding: 1.05rem; }
.card__body > :last-child { margin-bottom: 0; }
.card__foot { padding: .8rem 1.05rem; border-top: 1px solid var(--line-soft); }

.grid { display: grid; gap: 1.1rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1180px) { .grid--kpi, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .grid--kpi, .grid--4 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------- KPI */

.kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .95rem 1.05rem 1rem;
  min-width: 0;
}
.kpi__label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-faint);
  font-weight: 600;
  font-family: var(--mono);
}
.kpi__value {
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: -.03em;
  margin-top: .3rem;
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  gap: .25rem;
}
.kpi__value small { font-size: .95rem; font-weight: 500; color: var(--ink-faint); letter-spacing: 0; }
.kpi__hint { font-size: .78rem; color: var(--ink-faint); margin-top: .35rem; }
.kpi--critical .kpi__value { color: var(--critical); }
.kpi--high .kpi__value { color: var(--high); }
.kpi--medium .kpi__value { color: var(--medium); }
.kpi--ok .kpi__value { color: var(--accent-bright); }

/* Barra fina bajo el puntaje. Sin gráfico: una barra dice lo mismo. */
.meter {
  height: 4px;
  border-radius: 2px;
  background: var(--surface-3);
  overflow: hidden;
  margin-top: .6rem;
}
.meter__fill { height: 100%; border-radius: 2px; background: var(--accent); transition: width 600ms cubic-bezier(.4,0,.2,1); }
.meter__fill--critical { background: var(--critical); }
.meter__fill--high { background: var(--high); }
.meter__fill--medium { background: var(--medium); }

/* Escala de bloques monoespaciada: el guiño técnico del puntaje. */
.blocks { font-family: var(--mono); font-size: .8rem; letter-spacing: .06em; color: var(--accent); margin-top: .45rem; }
.blocks span { color: var(--surface-3); }

/* ==========================================================================
   TABLAS
   ========================================================================== */

.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }

th, td {
  text-align: left;
  padding: .6rem .95rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
th {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-faint);
  font-weight: 600;
  font-family: var(--mono);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
tbody tr { transition: background var(--t); }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.row-link { cursor: pointer; }

.dl { display: grid; grid-template-columns: minmax(130px, auto) 1fr; gap: .4rem 1.1rem; margin: 0; }
.dl dt { color: var(--ink-faint); font-size: .82rem; }
.dl dd { margin: 0; min-width: 0; }

/* Ficha técnica: pares clave/valor en monoespaciada, estilo salida de consola. */
.spec { display: grid; grid-template-columns: 132px 1fr; gap: .3rem .9rem; font-family: var(--mono); font-size: .78rem; }
.spec dt { color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }
.spec dd { margin: 0; color: var(--ink); word-break: break-word; }

/* ==========================================================================
   ETIQUETAS Y ESTADOS
   ========================================================================== */

.tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .1rem .45rem;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.tag--accent   { background: var(--accent-wash);   border-color: var(--accent-line);   color: var(--accent-bright); }
.tag--ok       { background: var(--accent-wash);   border-color: var(--accent-line);   color: var(--accent-bright); }
.tag--critical { background: var(--critical-wash); border-color: var(--critical-line); color: var(--critical); }
.tag--high     { background: var(--high-wash);     border-color: var(--high-line);     color: var(--high); }
.tag--medium   { background: var(--medium-wash);   border-color: var(--medium-line);   color: var(--medium); }
.tag--low      { background: var(--low-wash);      border-color: var(--low-line);      color: var(--low); }
.tag--info     { background: var(--info-wash);     border-color: var(--info-line);     color: var(--info); }
.tag--mono     { font-family: var(--mono); font-weight: 500; letter-spacing: .03em; }

/* Chip técnico: PASSIVE_MODE, RULESET 2026.09.2… */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  padding: .1rem .42rem;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: .67rem;
  letter-spacing: .05em;
  color: var(--ink-faint);
  text-transform: uppercase;
  white-space: nowrap;
}
.chip--live { color: var(--accent-bright); border-color: var(--accent-line); background: var(--accent-wash); }

/* La severidad no depende sólo del color: lleva marca y texto. */
.sev { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 600; white-space: nowrap; }
.sev::before { content: ""; width: 7px; height: 7px; border-radius: 2px; flex: 0 0 7px; }
.sev--critical { color: var(--critical); } .sev--critical::before { background: var(--critical); }
.sev--high     { color: var(--high); }     .sev--high::before     { background: var(--high); }
.sev--medium   { color: var(--medium); }   .sev--medium::before   { background: var(--medium); }
.sev--low      { color: var(--low); }      .sev--low::before      { background: var(--low); }
.sev--info     { color: var(--info); }     .sev--info::before     { background: var(--info); }

/* Punto de estado. */
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; background: var(--ink-faint); }
.dot--ok { background: var(--accent); }
.dot--run { background: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
.dot--warn { background: var(--medium); }
.dot--danger { background: var(--critical); }

@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--accent-wash); }
  50%      { opacity: .55; box-shadow: 0 0 0 4px transparent; }
}

/* ==========================================================================
   BOTONES
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .42rem .8rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: .84rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.btn:hover { background: var(--surface-3); border-color: #313943; color: var(--ink); }
.btn svg { flex: 0 0 15px; }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #101408;
  font-weight: 600;
}
.btn--primary:hover { background: var(--accent-bright); border-color: var(--accent-bright); color: #101408; }

.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--surface-2); }

.btn--link { border-color: transparent; background: transparent; color: var(--ink-soft); padding-left: 0; padding-right: 0; }
.btn--link:hover { background: transparent; color: var(--accent-bright); text-decoration: underline; }

.btn--lg { padding: .62rem 1.15rem; font-size: .92rem; }
.btn--block { display: flex; width: 100%; }
.btn--danger { color: var(--critical); border-color: var(--critical-line); background: var(--critical-wash); }
.btn--danger:hover { background: rgba(214, 69, 60, .2); border-color: var(--critical); color: var(--critical); }

.btn[disabled], .btn--disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

.btn-group { display: flex; gap: .45rem; flex-wrap: wrap; }

/* ==========================================================================
   FORMULARIOS
   ========================================================================== */

.field { margin-bottom: .95rem; }
.field label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .3rem; color: var(--ink-soft); }
.field .hint { font-size: .78rem; color: var(--ink-faint); margin-top: .3rem; }

input[type="text"], input[type="email"], input[type="password"], input[type="url"],
input[type="search"], input[type="number"], select, textarea {
  width: 100%;
  padding: .48rem .65rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: .875rem;
  background: var(--bg);
  color: var(--ink);
  transition: border-color var(--t), background var(--t);
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:hover, select:hover, textarea:hover { border-color: #313943; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-dim);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%236f7883' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  padding-right: 1.9rem;
}
textarea { min-height: 88px; resize: vertical; }

.error { color: var(--critical); font-size: .8rem; margin-top: .3rem; }

.radio-cards { display: grid; gap: .45rem; }
.radio-card {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .65rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color var(--t), background var(--t);
}
.radio-card:hover { border-color: var(--accent-line); background: var(--surface-3); }
.radio-card input { margin-top: .25rem; width: auto; accent-color: var(--accent); }
.radio-card strong { display: block; font-size: .87rem; }
.radio-card span { font-size: .8rem; color: var(--ink-faint); }

input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: auto; }

/* Barra de filtros de las tablas. */
.toolbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .7rem 1.05rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
  border-radius: var(--r) var(--r) 0 0;
}
.toolbar input[type="search"], .toolbar select { width: auto; min-width: 170px; background: var(--surface); }
.toolbar .spacer { flex: 1; }

/* ==========================================================================
   AVISOS
   ========================================================================== */

.notice {
  padding: .7rem .9rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  border-left: 2px solid var(--ink-faint);
  background: var(--surface-2);
  margin-bottom: 1.1rem;
  font-size: .86rem;
  color: var(--ink-soft);
}
.notice strong { color: var(--ink); }
.notice--ok     { border-left-color: var(--accent);   background: var(--accent-wash); }
.notice--warn   { border-left-color: var(--medium);   background: var(--medium-wash); }
.notice--danger { border-left-color: var(--critical); background: var(--critical-wash); }
.notice--info   { border-left-color: var(--info);     background: var(--info-wash); }

.empty { padding: 2.5rem 1.1rem; text-align: center; color: var(--ink-faint); }
.empty h3 { color: var(--ink); }

/* ==========================================================================
   UTILIDAD
   ========================================================================== */

.muted   { color: var(--ink-faint); }
.soft    { color: var(--ink-soft); }
.small   { font-size: .82rem; }
.tiny    { font-size: .74rem; }
.mono    { font-family: var(--mono); font-size: .82rem; letter-spacing: .01em; word-break: break-word; }
.mono-id { font-family: var(--mono); font-size: .76rem; letter-spacing: .04em; color: var(--ink-soft); text-transform: uppercase; }
.nowrap  { white-space: nowrap; }
.row     { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--top { align-items: flex-start; }
.stack > * + * { margin-top: .7rem; }
.mb0 { margin-bottom: 0; }
.mt0 { margin-top: 0; }
.gap-sm { gap: .35rem; }

.page-head { margin-bottom: 1.3rem; }
.page-head p { margin-bottom: 0; }
.page-head h1 { margin-bottom: .25rem; }

.section-title {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--ink-faint);
  font-weight: 600;
  font-family: var(--mono);
  margin: 1.9rem 0 .7rem;
}
.section-title:first-child { margin-top: 0; }

/* ==========================================================================
   PANTALLAS DE INVITADO
   ========================================================================== */

.guest {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background:
    radial-gradient(1100px 520px at 50% -12%, rgba(139, 191, 69, .05), transparent 62%),
    var(--bg);
}
.guest__panel { width: 100%; max-width: 400px; }
.guest__brand { text-align: center; margin-bottom: 1.3rem; }
.guest__brand strong { display: block; font-size: 1.28rem; letter-spacing: -.025em; }
.guest__brand strong em { font-style: normal; color: var(--ink-soft); font-weight: 500; }
.guest__brand span { font-family: var(--mono); font-size: .68rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .13em; }
.guest__foot { text-align: center; margin-top: 1rem; font-size: .84rem; color: var(--ink-faint); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1000px) {
  .app { flex-direction: column; }
  .sidebar {
    width: auto; flex: none; height: auto; position: static;
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .sidebar__nav { display: flex; flex-wrap: wrap; gap: .2rem; padding: .5rem .6rem; }
  .sidebar__section { display: none; }
  .sidebar__link[aria-current="page"]::before { display: none; }
  .sidebar__link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }
  .sidebar__cta { padding: .7rem .85rem 0; }
  .sidebar__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .content, .topbar { padding: 1.05rem; }
  .spec { grid-template-columns: 1fr; gap: 0 0; }
  .spec dd { margin-bottom: .5rem; }
}

@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; }
  .card__head { flex-direction: column; align-items: flex-start; gap: .55rem; }
  .dl { grid-template-columns: 1fr; gap: .1rem; }
  .dl dd { margin-bottom: .55rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   PORTADA
   --------------------------------------------------------------------------
   Una sola cosa que hacer. El campo de destino manda; lo demás explica qué se
   va a mirar, sin cerrar el paso.
   ========================================================================== */

.landing { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }

.landing__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1.8rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand__mark {
  width: 27px; height: 27px; flex: 0 0 27px;
  border-radius: var(--r-sm);
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  display: grid; place-items: center;
  color: var(--accent-bright);
}
.brand__name { font-size: 1rem; font-weight: 600; letter-spacing: -.02em; }
.brand__name em { font-style: normal; color: var(--ink-soft); font-weight: 500; }

.hero {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2.5rem, 8vh, 5.5rem) 1.5rem 3rem;
  background:
    radial-gradient(1200px 560px at 50% -10%, rgba(139, 191, 69, .055), transparent 60%),
    linear-gradient(180deg, #101318 0%, var(--bg) 44%);
}
.hero__inner { width: 100%; max-width: 880px; text-align: center; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--mono);
  font-size: .69rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.5rem;
}

.hero h1 {
  font-size: clamp(1.9rem, 4.6vw, 3.05rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  margin-bottom: 1rem;
  font-weight: 600;
}
.hero h1 span { color: var(--ink-soft); }

.hero__lead {
  font-size: clamp(.95rem, 1.6vw, 1.06rem);
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 auto 2.2rem;
  line-height: 1.6;
}

/* -------------------------------------------------------- Campo destino */

.target { max-width: 700px; margin: 0 auto; text-align: left; }

.target__box {
  display: flex;
  align-items: stretch;
  gap: .5rem;
  padding: .5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--t), box-shadow var(--t);
}
.target__box:focus-within { border-color: var(--accent-dim); box-shadow: 0 0 0 4px var(--accent-wash); }

.target__prefix {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: 0 .5rem 0 .65rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--ink-faint);
  border-right: 1px solid var(--line);
  user-select: none;
}
.target__box:focus-within .target__prefix { color: var(--accent-bright); }

.target__box input[type="url"], .target__box input[type="text"] {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: var(--mono);
  font-size: .95rem;
  padding: .55rem .3rem;
  min-width: 0;
}
.target__box input:focus { box-shadow: none; background: transparent; }

.target__status {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: .7rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --------------------------------------------------------- Qué se analiza */

.scope { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-top: 2.6rem; }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin-top: 3rem;
  text-align: left;
}
.steps > div { background: var(--surface); padding: 1.1rem 1.15rem; }
.steps h3 { font-size: .88rem; margin-bottom: .3rem; }
.steps p { font-size: .82rem; color: var(--ink-faint); margin: 0; }
.steps .num { font-family: var(--mono); font-size: .68rem; color: var(--accent); letter-spacing: .1em; display: block; margin-bottom: .55rem; }

@media (max-width: 720px) { .steps { grid-template-columns: 1fr; } }

.landing__foot {
  border-top: 1px solid var(--line);
  padding: 1.1rem 1.8rem;
  font-size: .8rem;
  color: var(--ink-faint);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--surface);
}

/* ==========================================================================
   CONSOLA DE ESCANEO
   --------------------------------------------------------------------------
   Todo lo que aparece aquí sale de eventos que el auditor emitió de verdad.
   La estética es de consola; los datos no son decorativos.
   ========================================================================== */

.scan { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.1rem; align-items: start; }
@media (max-width: 1080px) { .scan { grid-template-columns: 1fr; } }

.scan__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  margin-bottom: 1.1rem;
}
.scan__title { display: flex; align-items: center; gap: .7rem; }
.scan__title h1 { font-size: 1rem; margin: 0; font-family: var(--mono); letter-spacing: .05em; text-transform: uppercase; }

.console { background: #0a0c0f; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.console__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem .85rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .69rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.console__body {
  height: 470px;
  overflow-y: auto;
  padding: .8rem .95rem 1.2rem;
  font-family: var(--mono);
  font-size: .775rem;
  line-height: 1.75;
}
@media (max-width: 640px) { .console__body { height: 340px; font-size: .72rem; } }

.ev { display: grid; grid-template-columns: 74px 108px minmax(0, 1fr); gap: .75rem; animation: ev-in 200ms cubic-bezier(.4, 0, .2, 1) both; }
@media (max-width: 640px) { .ev { grid-template-columns: 62px 92px minmax(0, 1fr); gap: .5rem; } }

@keyframes ev-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.ev__t { color: #4e5661; font-variant-numeric: tabular-nums; }
.ev__k { color: var(--ink-faint); letter-spacing: .06em; text-transform: uppercase; }
.ev__m { color: var(--ink-soft); word-break: break-word; }

.ev--ok       .ev__k { color: var(--accent); }
.ev--info     .ev__k { color: var(--info); }
.ev--warn     .ev__k { color: var(--medium); }
.ev--high     .ev__k { color: var(--high); }
.ev--critical .ev__k { color: var(--critical); }
.ev--ok .ev__m, .ev--critical .ev__m { color: var(--ink); }

.ev--sys .ev__m { color: var(--ink-faint); }
.ev--sys .ev__m::before { content: "> "; color: var(--accent-dim); }

.caret { display: inline-block; width: 7px; color: var(--accent); animation: blink 1.15s steps(1) infinite; }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* Glitch mínimo, sólo al cambiar de estado. 90 ms y se acabó. */
.glitch { animation: glitch 90ms steps(2) 1; }
@keyframes glitch {
  0%   { transform: translateX(0); opacity: 1; }
  50%  { transform: translateX(-1px); opacity: .72; }
  100% { transform: translateX(0); opacity: 1; }
}

/* -------------------------------------------------------------- Fases */

.phases { display: flex; flex-direction: column; }
.phase {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;
  padding: .55rem 1.05rem;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
}
.phase:last-child { border-bottom: 0; }
.phase__n { font-family: var(--mono); font-size: .7rem; color: var(--ink-faint); }
.phase__name { font-size: .82rem; color: var(--ink-soft); }
.phase__state { font-family: var(--mono); font-size: .65rem; letter-spacing: .09em; color: var(--ink-faint); }

.phase--done .phase__name { color: var(--ink); }
.phase--done .phase__state { color: var(--accent); }
.phase--done .phase__n { color: var(--accent-dim); }
.phase--running .phase__name { color: var(--ink); }
.phase--running .phase__state { color: var(--accent-bright); }
.phase--warn .phase__state { color: var(--medium); }
.phase--failed .phase__state { color: var(--critical); }

.phase--running::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: sweep 1.5s ease-in-out infinite;
}
@keyframes sweep { 0% { opacity: .15; } 50% { opacity: .8; } 100% { opacity: .15; } }

/* ------------------------------------------------------- Panel de estado */

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-soft); }
.stats > div { background: var(--surface); padding: .7rem .9rem; }
.stats__label { font-family: var(--mono); font-size: .63rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); }
.stats__value { font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stats__value--critical { color: var(--critical); }
.stats__value--high { color: var(--high); }

/* Árbol de rutas descubiertas. Texto, no telaraña. */
.tree { font-family: var(--mono); font-size: .74rem; line-height: 1.65; color: var(--ink-soft); margin: 0; white-space: pre; overflow-x: auto; }
.tree .b { color: var(--ink-faint); }
.tree .root { color: var(--accent-bright); }

/* ==========================================================================
   HALLAZGOS
   ========================================================================== */

.findings td.id { font-family: var(--mono); font-size: .74rem; color: var(--ink-faint); letter-spacing: .03em; white-space: nowrap; }
.findings td.title { font-weight: 500; min-width: 240px; }
.findings tr[aria-expanded="true"] { background: var(--surface-2); }
.findings .caret-cell { width: 26px; color: var(--ink-faint); }
.findings .caret-cell svg { transition: transform var(--t); }
.findings tr[aria-expanded="true"] .caret-cell svg { transform: rotate(90deg); }

.detail-row > td { padding: 0; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.detail { padding: 1.1rem 1.15rem 1.3rem; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.4rem; }
@media (max-width: 900px) { .detail { grid-template-columns: 1fr; gap: 1rem; } }

.detail h4 {
  font-family: var(--mono);
  font-size: .67rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 .4rem;
  font-weight: 600;
}
.detail section + section { margin-top: 1.15rem; }
.detail p { margin: 0 0 .5rem; font-size: .86rem; color: var(--ink-soft); }
.detail p:last-child { margin-bottom: 0; }

/* Bloque de evidencia con aire de salida de herramienta. */
.evidence { background: #0a0c0f; border: 1px solid var(--line); border-radius: var(--r-sm); padding: .7rem .85rem; }
.evidence + .evidence { margin-top: .45rem; }
.evidence__head {
  font-family: var(--mono);
  font-size: .67rem;
  letter-spacing: .08em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: .5rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--line-soft);
}
.evidence__head b { color: var(--accent-dim); font-weight: 600; }

/* Distinción visual entre obligación y buena práctica. Nunca se confunden. */
.basis { border: 1px solid var(--line); border-left: 2px solid var(--ink-faint); border-radius: var(--r-sm); padding: .6rem .8rem; background: var(--surface); }
.basis--normative { border-left-color: var(--info); background: var(--info-wash); }
.basis__kind {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-faint);
  display: block;
  margin-bottom: .25rem;
}
.basis--normative .basis__kind { color: var(--info); }
.basis__ref { font-size: .84rem; color: var(--ink); }

/* ==========================================================================
   DIAGNÓSTICO Y PLAN
   ========================================================================== */

.diagnosis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.4rem;
  align-items: center;
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-faint);
  border-radius: var(--r);
  background: var(--surface);
  margin-bottom: 1.1rem;
}
.diagnosis--danger { border-left-color: var(--critical); }
.diagnosis--warn { border-left-color: var(--medium); }
.diagnosis--brand { border-left-color: var(--info); }
.diagnosis--ok { border-left-color: var(--accent); }

.diagnosis__label { font-family: var(--mono); font-size: .67rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.diagnosis__verdict { font-size: 1.32rem; font-weight: 600; letter-spacing: -.022em; margin: .15rem 0 .4rem; }
.diagnosis--danger .diagnosis__verdict { color: var(--critical); }
.diagnosis--warn .diagnosis__verdict { color: var(--medium); }
.diagnosis--ok .diagnosis__verdict { color: var(--accent-bright); }
.diagnosis p { margin: 0; font-size: .87rem; color: var(--ink-soft); max-width: 76ch; }

@media (max-width: 780px) { .diagnosis { grid-template-columns: 1fr; align-items: flex-start; } }

/* Módulos del plan. */
.module { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .62rem 1.05rem; border-bottom: 1px solid var(--line-soft); }
.module:last-child { border-bottom: 0; }
.module__check { color: var(--accent); display: flex; }
.module__check--optional { color: var(--ink-faint); }
.module__name { font-size: .87rem; }
.module__key { font-family: var(--mono); font-size: .7rem; color: var(--ink-faint); }

/* Recomendaciones: lista numerada por prioridad, sin tarjetas. */
.priorities { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.priorities li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: .85rem; align-items: baseline; padding: .72rem 1.05rem; border-bottom: 1px solid var(--line-soft); }
.priorities li:last-child { border-bottom: 0; }
.priorities li::before {
  counter-increment: p;
  content: counter(p, decimal-leading-zero);
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--ink-faint);
}
.priorities strong { font-weight: 500; font-size: .89rem; }
.priorities .why { display: block; font-size: .8rem; color: var(--ink-faint); margin-top: .12rem; }

/* Listado de informes: una fila por informe, no cuatro cajas iguales. */
.report-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: .85rem; align-items: center; padding: .8rem 1.05rem; border-bottom: 1px solid var(--line-soft); color: var(--ink); }
.report-row:last-child { border-bottom: 0; }
.report-row:hover { background: var(--surface-2); color: var(--ink); }
.report-row svg { color: var(--ink-faint); }
.report-row:hover svg { color: var(--accent-bright); }
.report-row strong { display: block; font-size: .88rem; font-weight: 500; }
.report-row span { display: block; font-size: .8rem; color: var(--ink-faint); }

/* Estado de una comprobación de privacidad. */
.check { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: .65rem; align-items: center; padding: .55rem 1.05rem; border-bottom: 1px solid var(--line-soft); font-size: .85rem; }
.check:last-child { border-bottom: 0; }
.check__icon { display: flex; }
.check--present .check__icon { color: var(--accent); }
.check--absent .check__icon { color: var(--critical); }
.check--unknown .check__icon { color: var(--ink-faint); }
.check__note { font-size: .78rem; color: var(--ink-faint); }

/* Fila de dato personal detectado. */
.data-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .55rem 1.05rem; border-bottom: 1px solid var(--line-soft); }
.data-row:last-child { border-bottom: 0; }
.data-row__name { font-size: .86rem; }
.data-row__fields { font-family: var(--mono); font-size: .72rem; color: var(--ink-faint); display: block; margin-top: .1rem; word-break: break-word; }

/* ==========================================================================
   NOMBRES ANTERIORES AL REDISEÑO
   --------------------------------------------------------------------------
   Catorce pantallas que no cambiaron de estructura siguen usando los nombres
   de clase de antes. Darles aquí el aspecto nuevo cuesta doce reglas; ir a
   renombrar la clase en catorce archivos cuesta catorce ocasiones de romper
   una vista que hoy funciona. Esto no es deuda escondida: es la lista, en un
   sitio, de lo que queda por renombrar cuando se toque cada pantalla.
   ========================================================================== */

/* El indicador se llamaba `.stat`. */
.card.stat { padding: .95rem 1.05rem 1rem; }
.stat__label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-faint);
  font-weight: 600;
  font-family: var(--mono);
}
.stat__value {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -.03em;
  margin-top: .3rem;
  line-height: 1.1;
}
.stat__hint { font-size: .78rem; color: var(--ink-faint); margin-top: .35rem; }

/* Los tonos de etiqueta se llamaban por su papel, no por su severidad. */
.tag--brand  { background: var(--accent-wash);   border-color: var(--accent-line);   color: var(--accent-bright); }
.tag--warn   { background: var(--medium-wash);   border-color: var(--medium-line);   color: var(--medium); }
.tag--danger { background: var(--critical-wash); border-color: var(--critical-line); color: var(--critical); }

/* ==========================================================================
   MÓVIL
   --------------------------------------------------------------------------
   El campo de destino es lo único que hay que hacer en la portada: en un
   teléfono se apila para que la dirección se lea entera y el botón tenga el
   ancho completo, en vez de tres elementos peleándose por 390 px.
   ========================================================================== */

@media (max-width: 620px) {
  .target__box { flex-direction: column; gap: .35rem; padding: .6rem; }
  .target__prefix { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 .45rem; }
  .target__box input[type="url"], .target__box input[type="text"] { padding: .45rem .1rem; font-size: 1rem; }
  .target__box .btn { width: 100%; }
  .target__status { flex-wrap: wrap; row-gap: .2rem; }

  .landing__nav { padding: .75rem 1rem; }
  .hero { padding: 2.2rem 1rem 2.4rem; }
  .scope { margin-top: 1.9rem; }
  .steps { margin-top: 2rem; }
  .landing__foot { padding: 1rem; }

  /* En la consola, la columna de la clave se coloca sobre el mensaje: a 390 px
     tres columnas monoespaciadas dejan al mensaje sin sitio. */
  .ev { grid-template-columns: 64px minmax(0, 1fr); row-gap: 0; }
  .ev__m { grid-column: 1 / -1; padding-left: 64px; }

  .scan__head { padding: .8rem .9rem; }
  .stats { grid-template-columns: 1fr 1fr; }

  .diagnosis { padding: 1rem; }
  .diagnosis__verdict { font-size: 1.15rem; }

  .priorities li, .module, .check, .data-row { grid-template-columns: 1fr; gap: .3rem; }
  .priorities li::before { display: none; }

  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar input[type="search"], .toolbar select { width: 100%; min-width: 0; }
  .toolbar .spacer { display: none; }

  .kpi__value { font-size: 1.6rem; }
}