/* ============================================================================
   Sistema V2 «cuaderno de estudio» — TresPixels Send
   Portado del libro de estilo TresPixels (PixelsGest, src/v2/tokens.css).
   Reglas de la casa que aquí se cumplen y NO se tocan:
     · Un idioma por función: antes de maquetar algo nuevo, se copia la clase
       que ya existe. No hay variantes por pantalla.
     · El color dice ESTADO, no tema.
     · Los controles miden 36 (o 28 en compacto). Altura FIJA, nunca padding
       vertical ni min-height. Con el dedo, el TOKEN sube a 44 — no las piezas.
     · Nunca el atajo `font:` con inherit (CSS inválido: el navegador tira la
       declaración entera y la pieza hereda 15px/400 en silencio).
     · --v2-line es SOLO decorativo. En cuanto un borde delimita algo pulsable
       o escribible, es --v2-edge.
   ========================================================================= */

/* La marca, y solo la marca, va en Sora 800 autoalojada. */
@font-face {
  font-family: "Sora";
  src: url("/assets/fonts/Sora-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

.v2root {
  /* Fondos y estructura */
  --v2-bg:          #ffffff;   /* fondo de página y de campo */
  --v2-side:        #f7f6f3;   /* raíl lateral, hover de fila */
  --v2-card:        #f7f6f3;   /* tarjetas, formularios, zebra */
  --v2-hover:       #efefed;   /* hover y fondo del destacado */
  --v2-line:        #ededeb;   /* separadores — SOLO decorativo */
  --v2-edge:        #8e8d8a;   /* borde de control — 3:1 sobre bg Y card */

  /* Tintas */
  --v2-ink:         #37352f;   /* principal */
  --v2-ink2:        #6d6c69;   /* secundaria (5,3:1) */
  --v2-mut:         #6b6a67;   /* rótulos y metadatos (5,4:1) */

  /* Acento y estados */
  --v2-accent:      #2383e2;   /* foco, iconos, bordes activos */
  --v2-accent-ink:  #1b6dbf;   /* botón primario y texto-enlace (contraste) */
  --v2-ok:          #548164;
  --v2-warn:        #c29343;
  --v2-crit:        #c4554d;

  /* Fondos suaves de aviso */
  --v2-co-y: #fbf3db;  --v2-co-r: #fdebec;  --v2-co-g: #edf3ec;  --v2-co-b: #e7f3f8;

  /* Píldoras: pareja fondo + tinta */
  --v2-pill-k: #edf3ec;  --v2-pill-kt: #41684f;   /* ok */
  --v2-pill-w: #fbf3db;  --v2-pill-wt: #8a6224;   /* aviso */
  --v2-pill-c: #fdebec;  --v2-pill-ct: #a63d36;   /* error */
  --v2-pill-a: #e7f3f8;  --v2-pill-at: #1b6dbf;   /* info */

  /* Controles */
  --v2-ctl:      36px;
  --v2-ctl-sm:   28px;
  --v2-ctl-fs:   13.5px;
  --v2-ctl-fs-sm: 12.5px;

  font-family: -apple-system, "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--v2-ink);
  background: var(--v2-bg);
}

.dark .v2root {
  --v2-bg: #191919;  --v2-side: #202020;  --v2-card: #232323;
  --v2-hover: #2c2c2c;  --v2-line: #2e2e2e;  --v2-edge: #6f6f6c;
  --v2-ink: #d4d4d1;  --v2-ink2: #9b9b98;  --v2-mut: #8a8a86;
  --v2-accent: #529cca;  --v2-accent-ink: #7fb8e0;
  --v2-ok: #6fa37f;  --v2-warn: #cfa65e;  --v2-crit: #de7a72;
  --v2-co-y: #383226;  --v2-co-r: #392a28;  --v2-co-g: #263229;  --v2-co-b: #243440;
  --v2-pill-k: #263229;  --v2-pill-kt: #6fa37f;
  --v2-pill-w: #383226;  --v2-pill-wt: #cfa65e;
  --v2-pill-c: #392a28;  --v2-pill-ct: #de7a72;
  --v2-pill-a: #243440;  --v2-pill-at: #7fb8e0;
}

/* Táctil: se mueve el TOKEN, no las piezas */
@media (pointer: coarse) {
  .v2root { --v2-ctl: 44px; --v2-ctl-sm: 44px; }
  .v2root input[type=checkbox], .v2root input[type=radio] { width: 22px; height: 22px; }
}

/* Foco de teclado: red de seguridad global. Jamás outline:none global. */
.v2root :focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
  .v2root *, .v2root *::before, .v2root *::after {
    transition: none !important; animation: none !important;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* Un `display` propio le gana al [hidden] del navegador y la pieza se queda a
   la vista aunque el JS la haya apagado. Esta línea cierra ese agujero. */
[hidden] { display: none !important; }
html, body { background: var(--v2-bg, #fff); }
body.v2root { min-height: 100dvh; }
a { color: inherit; }

/* ── Armazón ───────────────────────────────────────────────────────────────
   Esta app tiene tres pantallas, así que no lleva raíl lateral: el armazón se
   queda en topbar + escenario, con el mismo vocabulario del sistema.        */
.v2-topbar {
  display: flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 26px;
  border-bottom: 1px solid var(--v2-line);
  background: var(--v2-side);
}
.v2-topbar .sp { margin-left: auto; }
.v2-stage { padding: 26px 28px; }
.v2-page { max-width: 1160px; margin: 0 auto; }
@media (max-width: 820px) {
  .v2-topbar { padding: 0 16px; }
  .v2-stage { padding: 18px 16px; }
}

/* Marca: logo redondo + palabra en Sora 800. Sora no se usa para nada más. */
.v2-marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.v2-marca img { width: 28px; height: 28px; border-radius: 50%; display: block; }
.dark .v2-marca img { filter: invert(1); }
.v2-marca b {
  font-family: "Sora", -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 800; font-size: 15px; letter-spacing: 0.02em;
}
.v2-marca .mod { color: var(--v2-mut); font-size: 13px; font-weight: 400; }

/* ── Tipografía ───────────────────────────────────────────────────────────── */
.v2-h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; }
.v2-sub { font-size: 13px; font-weight: 400; color: var(--v2-mut); }
.v2-mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
.v2-num { font-variant-numeric: tabular-nums; }

/* ── Botón ─────────────────────────────────────────────────────────────────
   Una talla (36) y una compacta (28). No existe `.danger`: se compone. */
.v2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: var(--v2-ctl); padding: 0 12px;
  border: 1px solid var(--v2-edge); border-radius: 6px;
  background: var(--v2-bg); color: var(--v2-ink);
  font-family: inherit; font-size: var(--v2-ctl-fs); font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.v2-btn:hover { background: var(--v2-hover); }
.v2-btn svg { width: 15px; height: 15px; flex: none; }
.v2-btn.primary {
  background: var(--v2-accent-ink); border-color: var(--v2-accent-ink); color: #fff;
}
.dark .v2-btn.primary { color: #0f2231; }   /* inversión de tinta en oscuro */
.v2-btn.primary:hover { filter: brightness(1.08); }
.v2-btn.sm { height: var(--v2-ctl-sm); padding: 0 10px; font-size: var(--v2-ctl-fs-sm); }
.v2-btn.crit { color: var(--v2-crit); border-color: var(--v2-crit); }
.v2-btn.crit:hover { background: var(--v2-co-r); }
.v2-btn:disabled { opacity: .5; cursor: not-allowed; }
/* Un botón que despliega dice con el icono si está abierto: el + gira a ×. */
.v2-btn.despliega svg { transition: transform .18s ease; }
.v2-btn.despliega[aria-expanded="true"] svg { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .v2-btn.despliega svg { transition: none; } }

.v2-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--v2-ctl-sm); height: var(--v2-ctl-sm);
  border: 1px solid transparent; border-radius: 8px;
  background: var(--v2-side); color: var(--v2-ink); cursor: pointer;
}
.v2-iconbtn:hover { background: var(--v2-hover); }
.v2-iconbtn svg { width: 15px; height: 15px; }

/* ── Campo ─────────────────────────────────────────────────────────────────
   Altura fija por token. Nunca padding vertical, nunca min-height. */
.v2-input, .v2root input[type=text], .v2root input[type=url], .v2root input[type=password],
.v2root input[type=date], .v2root input[type=datetime-local], .v2root input[type=number],
.v2root select {
  height: var(--v2-ctl); width: 100%; padding: 0 10px;
  border: 1px solid var(--v2-edge); border-radius: 6px;
  background: var(--v2-bg); color: var(--v2-ink);
  font-family: inherit; font-size: var(--v2-ctl-fs); font-weight: 500; line-height: 1;
}
.v2root textarea {
  width: 100%; min-height: calc(var(--v2-ctl) * 2); padding: 8px 10px;
  border: 1px solid var(--v2-edge); border-radius: 6px;
  background: var(--v2-bg); color: var(--v2-ink);
  font-family: inherit; font-size: var(--v2-ctl-fs); font-weight: 500; line-height: 1.5;
  resize: vertical;
}
/* El select pierde la apariencia nativa o queda 4px por debajo de sus vecinos. */
.v2root select {
  appearance: none; -webkit-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6a67' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
}
.dark .v2root select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a86' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
}
.v2root input[type=date], .v2root input[type=datetime-local] { padding-right: 8px; }
.v2root input[type=date]::-webkit-datetime-edit,
.v2root input[type=datetime-local]::-webkit-datetime-edit { padding: 0; }
.dark .v2root input[type=date]::-webkit-calendar-picker-indicator,
.dark .v2root input[type=datetime-local]::-webkit-calendar-picker-indicator { filter: invert(.8); }
.v2root input[type=file] {
  height: var(--v2-ctl); width: 100%;
  border: 1px solid var(--v2-edge); border-radius: 6px;
  background: var(--v2-bg); color: var(--v2-ink2);
  font-family: inherit; font-size: var(--v2-ctl-fs-sm); line-height: 1;
}
.v2root input[type=file]::file-selector-button {
  height: calc(var(--v2-ctl) - 2px); margin-right: 10px; padding: 0 10px;
  border: 0; border-right: 1px solid var(--v2-line); border-radius: 5px 0 0 5px;
  background: var(--v2-side); color: var(--v2-ink);
  font-family: inherit; font-size: var(--v2-ctl-fs-sm); font-weight: 600; cursor: pointer;
}
.v2root input::placeholder, .v2root textarea::placeholder { color: var(--v2-mut); opacity: 1; }
.v2root input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--v2-accent); }
.v2-input.sm, .v2root select.sm { height: var(--v2-ctl-sm); font-size: var(--v2-ctl-fs-sm); }

/* Anti-zoom iOS: Safari amplía la página al enfocar campos < 16px. */
@media (max-width: 820px) {
  .v2root input, .v2root select, .v2root textarea { font-size: 16px; }
}

.v2-field { display: flex; flex-direction: column; gap: 5px; }
.v2-field > label { font-size: 12px; font-weight: 600; color: var(--v2-mut); }
.v2-field .pie { font-size: 12px; color: var(--v2-mut); }

/* Rótulo del campo que manda en la pantalla. La banda destacada es única
   (§3), así que un campo principal se distingue por la VOZ del rótulo —su
   cuerpo, su peso y su tinta—, nunca por un filete propio. */
.v2-field.principal { gap: 7px; }
.v2-field.principal > label {
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 800; color: var(--v2-ink); letter-spacing: -0.005em;
}
.v2-field.principal > label > .ic { display: flex; opacity: .8; }
.v2-field.principal > label > .ic svg { width: 15px; height: 15px; }
/* Y el de un campo que cuelga de otro: media voz, no un tamaño a mano. */
.v2-field.menor > label { font-size: 11.5px; }

/* Los campos de una fila se alinean por ARRIBA: alineados por abajo, un pie
   de dos líneas en una columna hunde el rótulo de la vecina. */
.v2-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 16px; align-items: start; }
.v2-grid.ancha { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.v2-full { grid-column: 1 / -1; }

/* Casilla con texto: ocupa banda de control sin ser un control. */
.v2-cajahueca {
  display: flex; align-items: center; gap: 9px;
  min-height: var(--v2-ctl); font-size: var(--v2-ctl-fs);
}
.v2-cajahueca label { cursor: pointer; }

/* ── Formulario ────────────────────────────────────────────────────────────── */
.v2-form { background: var(--v2-card); border-radius: 10px; padding: 18px; }

/* ── El destacado — la pieza firma ─────────────────────────────────────────
   Una geometría, una tipografía, un eje de variación: el color del filete,
   y dice ESTADO. Nunca se escribe un filete de estos a mano. */
.v2-secthead {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 12px;
  border: 0; border-left: 3px solid var(--v2-accent);
  border-radius: 7px;
  background: var(--v2-hover);
  color: var(--v2-ink);
  font-family: inherit; font-size: 13.5px; font-weight: 800;
  line-height: 1.45; letter-spacing: 0; text-transform: none;
  text-align: left;
  margin: 14px 0 6px;
}
.v2-secthead.ok      { border-left-color: var(--v2-ok); }
.v2-secthead.warn    { border-left-color: var(--v2-warn); }
.v2-secthead.crit    { border-left-color: var(--v2-crit); }
.v2-secthead.neutral { border-left-color: var(--v2-mut); background: var(--v2-card); color: var(--v2-ink2); }
.v2-secthead .ic { opacity: .85; display: flex; }
.v2-secthead .ic svg { width: 16px; height: 16px; }
.v2-secthead .n {
  margin-left: auto; padding: 1px 8px; border-radius: 10px;
  background: rgba(125, 125, 125, .16);
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.v2-secthead .act { margin-left: auto; display: flex; gap: 6px; }
.v2-secthead .act + .n { margin-left: 0; }

/* ── Chip ──────────────────────────────────────────────────────────────────── */
.v2-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
  background: var(--v2-hover); color: var(--v2-ink);
  white-space: nowrap;
}
.v2-chip.acc  { background: var(--v2-pill-a); color: var(--v2-pill-at); }
.v2-chip.ok   { background: var(--v2-pill-k); color: var(--v2-pill-kt); }
.v2-chip.warn { background: var(--v2-pill-w); color: var(--v2-pill-wt); }
.v2-chip.crit { background: var(--v2-pill-c); color: var(--v2-pill-ct); }
.v2-chip.neutral { background: var(--v2-hover); color: var(--v2-ink2); }
.v2-chip svg { width: 12px; height: 12px; }

/* ── Aviso ─────────────────────────────────────────────────────────────────── */
.v2-callout {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: 8px;
  font-size: 13.5px; line-height: 1.5;
}
.v2-callout svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.v2-callout.b    { background: var(--v2-co-b); color: var(--v2-ink); }
.v2-callout.b svg    { color: var(--v2-accent-ink); }
.v2-callout.y    { background: var(--v2-co-y); }
.v2-callout.y svg    { color: var(--v2-warn); }
.v2-callout.r    { background: var(--v2-co-r); }
.v2-callout.r svg    { color: var(--v2-crit); }
.v2-callout.g-ok { background: var(--v2-co-g); }
.v2-callout.g-ok svg { color: var(--v2-ok); }

/* ── Tabla ─────────────────────────────────────────────────────────────────── */
.v2-tblwrap { overflow-x: auto; }
.v2-tbl { width: 100%; border-collapse: collapse; }
.v2-tbl th {
  padding: 8px 10px; text-align: left;
  border-bottom: 1px solid var(--v2-line);
  font-size: 12px; font-weight: 600; color: var(--v2-mut); white-space: nowrap;
}
.v2-tbl td {
  padding: 9px 10px; border-bottom: 1px solid var(--v2-line);
  font-size: 13.5px; vertical-align: middle;
}
.v2-tbl tbody tr:hover { background: var(--v2-side); }
.v2-tbl tbody tr:last-child td { border-bottom: 0; }
.v2-tbl .acciones { display: flex; gap: 6px; justify-content: flex-end; }
.v2-tbl .acciones form { display: inline-flex; }

/* ── Cifras de resumen ─────────────────────────────────────────────────────── */
.v2-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.v2-stat {
  background: var(--v2-card); border: 1px solid transparent; border-radius: 8px;
  padding: 12px 14px;
}
.v2-stat .r { font-size: 12px; font-weight: 600; color: var(--v2-mut); }
.v2-stat .c { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.v2-stat .n { font-size: 11.5px; color: var(--v2-mut); }

/* ── Pares clave/valor ─────────────────────────────────────────────────────── */
.v2-props { display: flex; flex-direction: column; }
.v2-kv {
  display: flex; gap: 16px; justify-content: space-between; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid var(--v2-line); font-size: 13px;
}
.v2-kv:last-child { border-bottom: 0; }
.v2-kv .k { color: var(--v2-mut); }
.v2-kv .v { text-align: right; }

/* ── Tarjeta ───────────────────────────────────────────────────────────────── */
.v2-card { background: var(--v2-card); border: 1px solid transparent; border-radius: 8px; padding: 16px; }

/* ── Enlace copiable ───────────────────────────────────────────────────────── */
.v2-copiar { display: flex; gap: 8px; align-items: center; }
.v2-copiar .url {
  flex: 1; min-width: 0; height: var(--v2-ctl);
  display: flex; align-items: center; padding: 0 10px;
  border: 1px solid var(--v2-edge); border-radius: 6px; background: var(--v2-bg);
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px;
  color: var(--v2-ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Puerta: la entrada del panel. Las páginas del cliente van con su propia
   piel en public/entrega.css. */
.puerta { max-width: 460px; margin: 0 auto; padding: 60px 24px; text-align: center; }
.puerta img.logo { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px; display: block; }
.dark .puerta img.logo { filter: invert(1); }
.puerta h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; }
.puerta p { color: var(--v2-ink2); font-size: 14px; margin-top: 8px; }
.puerta form { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.puerta .err { color: var(--v2-crit); font-size: 13px; }

/* Progreso de subida. Una cifra que se lee desde la puerta, el detalle
   debajo y un carril que se mueve mientras hay tráfico —quieto significa
   parado—. El color dice ESTADO: acento mientras sube, aviso si se cortó y
   reintenta, verde al cerrar, rojo si se rinde. */
.v2-progreso { margin-top: 12px; }
.v2-progreso .cifra { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.v2-progreso .pct {
  font-size: 22px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--v2-accent-ink);
}
.v2-progreso .pct span { font-size: 13px; font-weight: 700; color: var(--v2-mut); }
.v2-progreso .det { font-size: 12.5px; color: var(--v2-mut); font-variant-numeric: tabular-nums; }

.barra { height: 8px; border-radius: 999px; background: var(--v2-hover); overflow: hidden; margin: 9px 0 0; }
.barra span {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background-color: var(--v2-accent-ink);
  background-image: linear-gradient(115deg, rgba(255, 255, 255, .28) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, .28) 75%, transparent 75%);
  background-size: 22px 22px;
  animation: v2-avance 900ms linear infinite;
  transition: width .25s ease;
}
@keyframes v2-avance { to { background-position: 22px 0; } }

/* Fase sin cifra honesta (crear la entrega, cerrar el lote): el carril se
   recorre de lado a lado en vez de inventarse un porcentaje. */
.v2-progreso.espera .pct { color: var(--v2-mut); }
.v2-progreso.espera .barra span {
  width: 34%; animation: v2-vaiven 1.15s ease-in-out infinite;
}
@keyframes v2-vaiven { from { margin-left: -34%; } to { margin-left: 100%; } }

.v2-progreso.avisa .pct { color: var(--v2-warn); }
.v2-progreso.avisa .barra span { background-color: var(--v2-warn); }
.v2-progreso.ok .pct { color: var(--v2-ok); }
.v2-progreso.ok .barra span { background-color: var(--v2-ok); background-image: none; animation: none; }
.v2-progreso.mal .pct { color: var(--v2-crit); }
.v2-progreso.mal .det { color: var(--v2-crit); }
.v2-progreso.mal .barra span { background-color: var(--v2-crit); background-image: none; animation: none; }

/* Quien pide menos movimiento ve la barra quieta; la cifra sigue contando. */
@media (prefers-reduced-motion: reduce) {
  .barra span { animation: none; }
  .v2-progreso.espera .barra span { animation: none; }
}

/* ── Utilidades ────────────────────────────────────────────────────────────── */
.fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fila.sp { justify-content: space-between; }
.sp-auto { margin-left: auto; }
.mt6 { margin-top: 6px } .mt10 { margin-top: 10px } .mt14 { margin-top: 14px }
.mt18 { margin-top: 18px } .mt26 { margin-top: 26px }
.mut { color: var(--v2-mut); }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Un enlace dentro de una tabla o de una tarjeta no se subraya en reposo: la
   fila entera ya se comporta como zona pulsable. Al pasar por encima, sí. */
.v2-tbl a, .v2-card a.v2-btn, .v2-marca { text-decoration: none; }
.v2-tbl a:hover { text-decoration: underline; }
.v2-kv a, .v2-callout a { color: var(--v2-accent-ink); }