/* =========================================
   AGENTIKO.TECH — Notas técnicas (rediseño 10-2026)
   Cubre notas.html (índice), las notas de notas/sifen/*.html y la ficha de
   autor (autor/javier-sempere.html). La base está en sitio.css.

   Idea: son artículos para leer con calma, con código y tablas. Una sola
   columna de ~66 caracteres, texto más grande que en el resto del sitio y
   todo lo accesorio (migas, fechas, fuentes) en segundo plano. Antes cada
   nota llevaba su propio <style> casi idéntico; ahora vive todo acá.
   ========================================= */

/* =========================================
   COLUMNA DE LECTURA (nota y autor)
   El tamaño de letra se fija en el contenedor para que los «ch» del ancho
   se midan con la letra del texto, no con la del body.
   ========================================= */
.nota, .autor {
  font-size: clamp(1.0625rem, .98rem + .25vw, 1.125rem);
  line-height: 1.7;
  padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3.5rem, 8vw, 5.5rem);
}
.nota .container, .autor .container { max-width: calc(66ch + 2 * var(--gutter)); }

/* Migas: discretas, una línea encima del título. */
.nota-migas, .autor-migas { font-size: .9rem; line-height: 1.5; color: var(--tinta-2); margin-bottom: 1.5rem; }
.nota-migas a, .autor-migas a { color: var(--tinta-2); text-underline-offset: .2em; }
.nota-migas a:hover, .autor-migas a:hover { color: var(--violeta); }

.nota h1, .autor h1 {
  font: 800 clamp(2rem, 4.6vw, 3rem)/1.06 var(--f-display);
  letter-spacing: -.03em; text-wrap: balance;
}
/* La ficha de autor conserva la etiqueta «Autor» encima del nombre. */
.autor .about-badge { margin-bottom: .5rem; }

/* Autor, fecha: cierra la cabecera con un filete fino. */
.nota-meta {
  margin-top: 1.25rem; padding-bottom: 1.5rem; margin-bottom: 2rem;
  border-bottom: 1px solid var(--linea);
  font-size: .95rem; line-height: 1.5; color: var(--tinta-2);
}
.nota-meta strong { font-weight: 600; color: var(--tinta); }
.nota-meta a { color: inherit; text-underline-offset: .2em; }
.nota-meta a:hover { color: var(--violeta); }

/* Respuesta corta: lo que lee quien llega con prisa desde un buscador. */
.nota-tldr {
  border-left: 3px solid var(--violeta); background: var(--papel-2);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 1.25rem 1.5rem; margin-bottom: 2.75rem;
}
.nota-tldr p { margin: 0 0 .85rem; text-wrap: pretty; }
.nota-tldr p:last-child { margin-bottom: 0; }
.nota-tldr strong { font-weight: 600; }

/* =========================================
   CUERPO DEL TEXTO
   ========================================= */
.nota-cuerpo h2, .autor h2 {
  font: 700 clamp(1.4rem, 1.1rem + 1vw, 1.75rem)/1.2 var(--f-display);
  letter-spacing: -.02em; text-wrap: balance;
  margin: 3.25rem 0 1rem; scroll-margin-top: 6rem;
}
.nota-cuerpo h3 {
  font: 700 1.2rem/1.3 var(--f-display); letter-spacing: -.01em;
  margin: 2.25rem 0 .6rem; scroll-margin-top: 6rem;
}
.nota-cuerpo p, .autor p { margin: 0 0 1.15rem; text-wrap: pretty; }
.nota-cuerpo ul, .nota-cuerpo ol, .autor ul { margin: .5rem 0 1.4rem; padding-left: 1.35rem; }
.nota-cuerpo ul, .autor ul { list-style: disc; }
.nota-cuerpo ol { list-style: decimal; }
.nota-cuerpo li, .autor li { margin-bottom: .55rem; padding-left: .2rem; }
.nota-cuerpo li::marker, .autor li::marker { color: var(--tinta-2); }
.nota-cuerpo strong, .autor strong { font-weight: 600; }

.nota-cuerpo a, .nota-verificado a, .autor-lead a, .autor p a, .autor li a {
  color: var(--violeta); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: .2em;
}
.nota-cuerpo a:hover, .nota-verificado a:hover, .autor-lead a:hover, .autor p a:hover, .autor li a:hover {
  color: var(--violeta-osc); text-decoration-thickness: 2px;
}
/* Los botones del cierre no heredan el subrayado de los enlaces del texto. */
.nota-cuerpo a.btn { text-decoration: none; }
.nota-cuerpo a.btn-primary { color: #fff; }
.nota-cuerpo a.btn-secondary { color: var(--tinta); }
.nota-cuerpo a.btn-secondary:hover { color: var(--papel); }

/* Cita textual de la normativa. Sin cursiva: la fuente no trae itálica
   propia y la sintética se lee peor. */
blockquote.cita {
  margin: 1.75rem 0; padding: .25rem 0 .25rem 1.4rem;
  border-left: 3px solid var(--linea);
}
blockquote.cita p { margin: 0; }
blockquote.cita cite { display: block; margin-top: .65rem; font-style: normal; font-size: .9rem; line-height: 1.5; color: var(--tinta-2); }

/* =========================================
   CÓDIGO Y XML
   Monoespaciada del sistema, sin cargar otra fuente. El bloque se desplaza
   solo; la página nunca.
   ========================================= */
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .86em; background: var(--papel-2); color: var(--tinta);
  padding: .1em .35em; border-radius: 4px;
  overflow-wrap: anywhere;
}
pre {
  margin: 1.5rem 0; padding: 1.1rem 1.25rem;
  background: var(--noche); color: var(--noche-texto);
  border-radius: var(--r);
  max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
pre:focus-visible { outline-offset: 2px; }
pre code {
  background: none; padding: 0; color: inherit; border-radius: 0;
  font-size: .84rem; line-height: 1.65; display: block; white-space: pre;
  overflow-wrap: normal;
}
/* .c comentario · .k lo que se señala (lo que falla) · .b la forma correcta.
   Además del color van en negrita, para no depender solo de él. */
pre code .c { color: var(--noche-2); }
pre code .k { color: #C9BEFF; font-weight: 600; }
pre code .b { color: #9BE3B4; font-weight: 600; }

/* =========================================
   TABLAS
   Filetes horizontales, cabecera en negrita sobre un filete de 2px. En
   móvil la tabla se desplaza dentro de su caja.
   ========================================= */
.tabla-wrap { margin: 1.75rem 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.datos { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .94rem; line-height: 1.55; }
table.datos th, table.datos td { text-align: left; vertical-align: top; padding: .75rem .9rem .75rem 0; }
table.datos th:last-child, table.datos td:last-child { padding-right: 0; }
table.datos th { font-weight: 700; border-bottom: 2px solid var(--tinta); }
table.datos td { border-bottom: 1px solid var(--linea); }
table.datos code { font-size: .84em; overflow-wrap: normal; }
table.datos tr.destacada td { background: var(--papel-2); }
table.datos tr.destacada td:first-child { box-shadow: inset 3px 0 0 var(--violeta); padding-left: .9rem; }
table.datos td.pasada { color: var(--tinta-2); }

/* =========================================
   AVISOS, CIERRE Y RELACIONADAS
   ========================================= */
.aviso {
  margin: 2rem 0; padding: 1.1rem 1.35rem;
  background: #fff; border: 1px solid var(--linea); border-left: 3px solid var(--tinta);
  border-radius: 0 var(--r) var(--r) 0;
}
.aviso p { margin: 0 0 .75rem; }
.aviso p:last-child { margin-bottom: 0; }
.aviso strong { font-weight: 700; }

.nota-cta, .autor-cta { margin-top: 2.5rem; display: flex; gap: .75rem; flex-wrap: wrap; }
.nota-cuerpo .nota-rel { margin: 2rem 0 0; font-size: .98rem; color: var(--tinta-2); }

.nota-cierre { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linea); }
.nota-verificado { font-size: .92rem; line-height: 1.6; color: var(--tinta-2); text-wrap: pretty; }
.nota-verificado + .nota-verificado { margin-top: 1rem; }
.nota-verificado strong { font-weight: 600; color: var(--tinta); }

/* =========================================
   AUTOR (lo que no comparte con la nota)
   ========================================= */
.autor .autor-lead { margin: 1.25rem 0 0; font-size: 1.12em; line-height: 1.6; color: var(--tinta-2); }
.autor .autor-lead strong { color: var(--tinta); }
.autor .autor-cargo { margin: .35rem 0 0; font-weight: 600; color: var(--tinta-2); }
.autor .autor-nota {
  margin: 3rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--linea);
  font-size: .92rem; color: var(--tinta-2);
}

/* =========================================
   ÍNDICE (notas.html)
   Como el índice de la home: una fila por nota con filetes, nada de
   tarjetas. Título grande a la izquierda, resumen y fecha a la derecha.
   ========================================= */
.notas { padding-bottom: clamp(3.5rem, 8vw, 6rem); }
.notas .pagina-cabecera h1 { max-width: 18ch; }
.notas-lead { margin-top: 1.1rem; max-width: 62ch; font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.6; color: var(--tinta-2); text-wrap: pretty; }
.notas-lead strong { color: var(--tinta); font-weight: 600; }
.notas-nota { margin-top: 1rem; max-width: 62ch; color: var(--tinta-2); text-wrap: pretty; }
.notas-nota a { color: var(--violeta); text-underline-offset: .2em; }
.notas-nota a:hover { color: var(--violeta-osc); }

.notas-riel {
  margin-top: clamp(1rem, 3vw, 2rem);
  font: 600 1rem/1.3 var(--f-display); color: var(--tinta-2);
  padding-bottom: .9rem; border-bottom: 2px solid var(--tinta);
}

.nota-card {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: .5rem clamp(1.5rem, 4vw, 3.5rem); align-items: baseline;
  padding: clamp(1.25rem, 2.4vw, 1.75rem) .75rem;
  margin: 0 -.75rem;
  border-bottom: 1px solid var(--linea);
  text-decoration: none; color: var(--tinta);
  transition: background-color .18s, color .18s;
}
.nota-card h2 {
  grid-row: span 2;
  font: 700 clamp(1.3rem, 2.4vw, 1.8rem)/1.15 var(--f-display);
  letter-spacing: -.02em; text-wrap: balance;
}
.nota-card p { color: var(--tinta-2); font-size: 1rem; line-height: 1.6; text-wrap: pretty; }
.nota-card .meta { font-size: .9rem; line-height: 1.45; }
.nota-card:hover, .nota-card:focus-visible { background: var(--tinta); color: var(--papel); outline-offset: 0; }
.nota-card:hover p, .nota-card:focus-visible p { color: var(--noche-2); }
.nota-card:hover code, .nota-card:focus-visible code { background: #2E2858; color: var(--noche-texto); }

@media (max-width: 760px) {
  .nota-card { grid-template-columns: 1fr; }
  .nota-card h2 { grid-row: auto; }
}

/* En preparación · Cómo corregimos: dos columnas calladas debajo de la lista. */
.notas-extra {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 2.5rem clamp(1.5rem, 4vw, 4rem);
}
.notas-proximas { border-top: 2px solid var(--tinta); padding-top: 1.1rem; }
.notas-proximas h2 { font: 700 1.2rem/1.25 var(--f-display); letter-spacing: -.01em; margin-bottom: .9rem; }
.notas-proximas li { position: relative; padding-left: 1.1rem; margin-bottom: .6rem; color: var(--tinta-2); font-size: .98rem; text-wrap: pretty; }
.notas-proximas li::before { content: ''; position: absolute; left: 0; top: .78em; width: .5rem; height: 1.5px; background: var(--violeta); }
.notas-proximas strong { color: var(--tinta); font-weight: 600; }
.notas-proximas a { color: var(--violeta); text-underline-offset: .2em; }
.notas-proximas a:hover { color: var(--violeta-osc); }
/* La política de corrección son párrafos, no una lista con viñetas. */
.notas-proximas--texto li { padding-left: 0; }
.notas-proximas--texto li::before { content: none; }