/* Blog. CSS plano a proposito, NO Tailwind: erpaisoftware.com y ai.reportman.es
   compilan su output.css escaneando su propio HTML, asi que cualquier clase que
   solo apareciera aqui se quedaria fuera del CSS compilado y el articulo saldria
   sin estilos. Esto, ademas, da la misma tipografia en los tres sitios.
   La cabecera y el pie NO se tocan: los pinta el CSS de cada web. */

/* NEGRO SOBRE BLANCO, Y NADA DE MODO OSCURO.
   Aqui habia un @media (prefers-color-scheme: dark) que ponia la tinta en gris claro y el fondo
   en «transparent». Los tres sitios son de tema claro FIJO --cero clases `dark:`, cero
   prefers-color-scheme, body en bg-gray-50--, asi que en cualquier movil o portatil puesto en
   modo oscuro el articulo salia en gris claro sobre fondo blanco: ilegible.
   El blog no puede tener un tema que su sitio no tiene. Y el blanco se declara EXPLICITO en vez
   de heredarse: asi el contraste del texto no depende de lo que haga el CSS del sitio ni de lo
   que cambie manana. */
.blog-articulo, .blog-indice {
  --tinta: #000000;
  --tenue: #4a5260;
  --fondo: #ffffff;
  --linea: #d9dde3;
  --enlace: #0b4f98;
  --aviso: #8f3309; --ok: #11562f;
  color-scheme: light;          /* ni los controles del navegador se ponen oscuros */
  max-width: 44rem;
  margin: 0 auto;
  padding: 2.5rem 1.15rem 4rem;
  color: var(--tinta);
  background: var(--fondo);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.blog-articulo h1, .blog-indice h1 { font-size: 2rem; line-height: 1.25; margin: 0 0 .5rem; }
.blog-articulo h2 { font-size: 1.4rem; line-height: 1.3; margin: 2.4rem 0 .6rem; }
.blog-articulo h3 { font-size: 1.15rem; margin: 1.8rem 0 .4rem; }
.blog-articulo p, .blog-indice p { margin: 0 0 1.1rem; }
.blog-articulo ul, .blog-articulo ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.blog-articulo li { margin: .35rem 0; }
.blog-articulo a, .blog-indice a { color: var(--enlace); }
.blog-articulo img { max-width: 100%; height: auto; border-radius: .5rem; }

.blog-fecha { color: var(--tenue); font-size: .9rem; margin: 0 0 2rem; }
.blog-volver { font-size: .9rem; margin: 0 0 1.5rem; }

.blog-articulo blockquote {
  margin: 1.4rem 0; padding: .2rem 0 .2rem 1.1rem;
  border-left: 3px solid var(--linea); color: var(--tenue);
}
.blog-articulo code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em; background: rgba(127,127,127,.14);
  padding: .12em .35em; border-radius: .25rem;
}
.blog-articulo pre {
  background: rgba(127,127,127,.12); padding: 1rem; border-radius: .5rem;
  overflow-x: auto; line-height: 1.5;
}
.blog-articulo pre code { background: none; padding: 0; }
.blog-articulo table { border-collapse: collapse; width: 100%; margin: 1.4rem 0; font-size: .95rem; }
.blog-articulo th, .blog-articulo td { border-bottom: 1px solid var(--linea); padding: .5rem .6rem; text-align: left; }

.blog-indice ul { list-style: none; margin: 2rem 0 0; padding: 0; }
.blog-indice li { padding: 1.4rem 0; border-top: 1px solid var(--linea); }
.blog-indice h2 { font-size: 1.25rem; margin: 0 0 .3rem; }
.blog-indice a { text-decoration: none; }
.blog-indice a:hover h2 { text-decoration: underline; }

/* ============================================================================
   FIRMA, PORTADA Y ESQUEMAS
   ========================================================================== */
.blog-firma {
  margin: 2.6rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--linea);
  font-size: .88rem; color: var(--tenue);
}
.blog-portada { margin: 0 0 2.2rem; }
.blog-portada img {
  width: 100%; height: auto; display: block; border-radius: 10px;
  /* la imagen es blanca y el articulo tambien: sin borde no se sabe donde acaba */
  border: 1px solid var(--linea); background: #ffffff;
}
.blog-portada figcaption { font-size: .82rem; color: var(--tenue); margin-top: .5rem; }

/* EL ESQUEMA ES HTML, NO UNA IMAGEN, Y POR UNA RAZON: un SVG no se recoloca. Un esquema de dos
   columnas pensado para 760 px, visto en un movil de 360, se escala a menos de la mitad y el
   texto de 14 px queda en 6. Esto pasa solo a una columna.
   Son piezas REUTILIZABLES a proposito: todos los articulos usan las mismas y el blog parece
   una familia, no una coleccion de dibujos improvisados. */
.esq { margin: 2.4rem 0; }
.esq-titulo {
  font-size: 1rem; font-weight: 600; margin: 0 0 1rem;
  color: var(--tinta); letter-spacing: -.01em;
}
.esq-caja { border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; }
.esq-fila {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  padding: .95rem 1.1rem; border-top: 1px solid var(--linea);
}
.esq-fila:first-child { border-top: 0; }
.esq-que { flex: 1 1 14rem; min-width: 0; }
.esq-que b { display: block; font-weight: 600; font-size: .97rem; }
.esq-que span { display: block; color: var(--tenue); font-size: .85rem; margin-top: .15rem; }
.esq-marca {
  flex: 0 0 auto; font-size: .76rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: .3rem .6rem; border-radius: 5px;
  border: 1px solid currentColor;
}
.esq-aviso { color: var(--aviso); }
.esq-ok { color: var(--ok); }
/* VARIAS MARCAS EN LA MISMA FILA, para comparar una lista de cosas contra los MISMOS criterios.
   No es una tabla a proposito: una tabla de seis columnas en un movil de 360 px obliga a
   desplazar en horizontal, y aqui las marcas se reparten en dos lineas solas. Cada una dice de
   que habla, porque sin cabecera de columna un «si» suelto no significa nada. */
.esq-marcas { flex: 1 1 18rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.esq-dato {
  font-size: .78rem; padding: .25rem .55rem; border-radius: 5px;
  border: 1px solid var(--linea); color: var(--tenue); white-space: nowrap;
}
.esq-dato b { font-weight: 600; }
.esq-si { color: var(--ok); border-color: currentColor; }
.esq-no { color: var(--aviso); border-color: currentColor; }
/* La fila del ganador, marcada sin color de fondo fuerte: el blog es negro sobre blanco. */
.esq-destacada { background: #f4f7fb; }
.esq-nota {
  margin: .9rem 0 0; font-size: .89rem; color: var(--tenue);
  border-left: 3px solid var(--linea); padding-left: .9rem;
}
.blog-fuentes { font-size: .92rem; }
.blog-fuentes li { margin-bottom: .55rem; }

/* LA NOTA DE CIERRE: el unico sitio del articulo donde aparece el producto (regla 11). Se marca
   para que se vea de un golpe que esto ya no es el articulo, y sin pedirle al markdown mas que
   un «---»: el selector hermano se encarga del resto. */
.blog-articulo hr {
  border: 0; border-top: 1px solid var(--linea); margin: 2.8rem 0 1.5rem;
}
.blog-articulo hr + p {
  font-size: .93rem; color: var(--tenue);
  border-left: 3px solid var(--linea); padding-left: 1rem;
}

/* ============================================================================
   LINEA DE TIEMPO (.lt) — un hito, una flecha y otro hito, sobre un eje con marcas.
   EN HTML Y NO EN UN SVG, por lo mismo que el resto de esquemas: lleva texto, y un SVG
   con texto visto a 360 px deja las etiquetas en seis pixeles. Esto se recoloca.
   Rejilla de 3x3 en ancho y de una columna en movil, con la colocacion declarada hito a
   hito: asi el orden del HTML es el orden de lectura (caja, fecha, flecha, caja, fecha) y
   no hace falta reordenar nada para un lector de pantalla.
   ========================================================================== */
.lt {
  display: grid; grid-template-columns: 1fr auto 1fr;
  column-gap: .9rem; align-items: center; margin: .2rem 0 0;
}
.lt-caja {
  border: 2px solid currentColor; border-radius: 8px; padding: .65rem .5rem;
  font-weight: 700; font-size: .95rem; line-height: 1.25; text-align: center;
}
.lt-a { grid-row: 1; grid-column: 1; color: var(--aviso); }
.lt-b { grid-row: 1; grid-column: 3; color: var(--tenue); border-style: dashed; }
.lt-flecha {
  grid-row: 1; grid-column: 2; display: flex; flex-direction: column;
  align-items: center; color: var(--aviso); line-height: 1;
}
.lt-duda { font-size: 1.5rem; font-weight: 700; line-height: 1; }
/* LA FLECHA, DIBUJADA CON CSS Y NO CON EL CARACTER «->»: el glifo sale raquitico al lado del
   interrogante --lo vi al renderizar la pagina-- y ademas su grosor depende de la tipografia
   que tenga instalada quien lee. Asi mide lo que yo digo y pesa lo que debe. */
.lt-punta {
  display: block; position: relative; width: 3.6rem;
  border-top: 3px solid currentColor; margin: .55rem 0 0;
}
.lt-punta::after {
  content: ""; position: absolute; right: -1px; top: -7px;
  border-left: 12px solid currentColor;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
.lt-eje {
  grid-row: 2; grid-column: 1 / -1;
  border-top: 2px solid var(--linea); margin-top: 1rem;
}
.lt-fecha {
  grid-row: 3; font-size: .82rem; color: var(--tenue);
  text-align: center; padding-top: .6rem; position: relative;
}
.lt-fecha::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 2px; height: .55rem; background: var(--linea); transform: translateX(-50%);
}
.lt-fecha-a { grid-column: 1; }
.lt-fecha-b { grid-column: 3; }

/* En el movil el eje sobra: cada hito lleva su fecha debajo y la flecha gira. */
@media (max-width: 430px) {
  .lt { grid-template-columns: 1fr; row-gap: 0; }
  .lt-a { grid-row: 1; grid-column: 1; }
  .lt-fecha-a { grid-row: 2; grid-column: 1; }
  .lt-flecha { grid-row: 3; grid-column: 1; padding: .5rem 0; }
  .lt-punta {
    width: 0; height: 2.3rem; border-top: 0;
    border-left: 3px solid currentColor; margin: .55rem auto 0;
  }
  .lt-punta::after {
    right: auto; left: -7px; top: auto; bottom: -12px;
    border-left: 7px solid transparent; border-right: 7px solid transparent;
    border-top: 12px solid currentColor; border-bottom: 0;
  }
  .lt-b { grid-row: 4; grid-column: 1; }
  .lt-fecha-b { grid-row: 5; grid-column: 1; }
  .lt-eje { display: none; }
  .lt-fecha::before { display: none; }
  .lt-fecha { padding-top: .35rem; }
}

/* LA PESTANA DEL BLOG EN LOS SITIOS QUE NO PINTAN `.active`. En ai.reportman.es y en
   erpaisoftware.com la pestana encendida la marca su JavaScript con clases sueltas, y en el blog
   ese JavaScript no corre: pulsabas «Blog» y el menu no acusaba el golpe. Esto lo pinta con el
   azul que ya usan los dos para lo mismo --fondo blue-50, tinta blue-700-- asi que no parece una
   pieza del blog pegada encima, sino el menu del sitio haciendo lo que hace siempre.
   La pone el generador SOLO cuando la piel heredada no conoce la clase `active`. */
.blog-activa {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}