/* blog.css — tipografía de artículo del blog de MS Soluciones.
   Tokens de marca: ver paginas/ms-soluciones/_brand-spec.md §2.

   POR QUÉ ESTE ARCHIVO EXISTE, Y NO MÁS CLASES DE TAILWIND:
   site.css es un build COMPILADO de Tailwind (export de Next.js). Solo contiene las
   clases que el build original usó: medido con un extractor sobre site.css, son 417.
   Clases imprescindibles para texto largo — list-disc, pl-6, mb-6, space-y-6,
   text-[1.5rem], italic, object-cover — NO están ahí, y escribirlas en el HTML no
   produce ningún estilo. Regenerar site.css exigiría el proyecto Next original, que
   no vive en este repo (y editar el compilado a mano es la cicatriz
   reference_next_build_compilado_nao_editar_por_sed).
   Por eso: chrome (header, footer, grid, botones) con las utilidades que SÍ existen,
   y la tipografía del cuerpo del artículo aquí, en clases propias con prefijo .ms-.
   Nada de este archivo redefine una clase de Tailwind — no hay colisión posible. */

/* ---------- Medida de lectura ---------- */
.ms-prose {
  max-width: 43rem; /* ~70 caracteres por línea en 17px: medida cómoda para texto técnico */
  color: #2c3338;   /* graphite — nunca negro puro */
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* ---------- Jerarquía ---------- */
.ms-prose h2 {
  margin-top: 2.75rem;
  margin-bottom: 0.875rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #123c4c; /* petrol */
  scroll-margin-top: 5.5rem; /* el header es sticky: sin esto el ancla deja el título debajo */
}
.ms-prose h3 {
  margin-top: 2rem;
  margin-bottom: 0.625rem;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: #123c4c;
  scroll-margin-top: 5.5rem;
}
/* Filete ámbar bajo cada H2: el acento de marca en micro-dosis (_brand-spec §2). */
.ms-prose h2::after {
  content: "";
  display: block;
  width: 2.25rem;
  height: 3px;
  margin-top: 0.75rem;
  border-radius: 1px;
  background-color: #f2a93b;
}

/* ---------- Párrafos y listas ---------- */
.ms-prose p { margin-top: 0; margin-bottom: 1.125rem; }
.ms-prose > :first-child { margin-top: 0; }
.ms-prose ul,
.ms-prose ol { margin: 0 0 1.25rem; padding-left: 1.375rem; }
.ms-prose ul { list-style: disc; }
.ms-prose ol { list-style: decimal; }
.ms-prose li { margin-bottom: 0.5rem; padding-left: 0.125rem; }
.ms-prose li::marker { color: #19c2d8; } /* aqua: el punto de la lista es el detalle de color */
.ms-prose ul ul { margin: 0.5rem 0 0.25rem; list-style: circle; }
.ms-prose strong { font-weight: 700; color: #123c4c; }
.ms-prose a {
  color: #123c4c;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(25, 194, 216, 0.55);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.ms-prose a:hover { text-decoration-color: #19c2d8; }
.ms-prose a:focus-visible { outline: 2px solid #19c2d8; outline-offset: 2px; border-radius: 2px; }

/* ---------- Tablas (rangos de parámetros, costes) ---------- */
.ms-prose .ms-table-wrap { margin: 1.5rem 0; overflow-x: auto; } /* móvil: la tabla scrollea, no rompe la página */
.ms-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.ms-prose th,
.ms-prose td {
  padding: 0.625rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid #dee6e8;
  vertical-align: top;
}
.ms-prose th {
  font-weight: 600;
  color: #123c4c;
  background-color: #eef2f3; /* mist */
  white-space: nowrap;
}
.ms-prose tbody tr:last-child td { border-bottom: 0; }

/* ---------- Cajas de aviso ---------- */
.ms-note {
  margin: 1.75rem 0;
  padding: 1.125rem 1.25rem;
  border-radius: 14px;
  background-color: #eef2f3;
  border: 1px solid #dee6e8;
  font-size: 0.9375rem;
  line-height: 1.65;
}
.ms-note > :last-child { margin-bottom: 0; }
.ms-note--data { background-color: #d7f3f7; border-color: rgba(25, 194, 216, 0.35); }
/* Ámbar solo como filete lateral: nunca un área grande (_brand-spec §2). */
.ms-note--warn { background-color: #fbf0da; border-color: rgba(242, 169, 59, 0.4); border-left: 3px solid #f2a93b; }

.ms-prose blockquote {
  margin: 1.75rem 0;
  padding-left: 1.125rem;
  border-left: 3px solid #19c2d8;
  color: #5c6b72;
}
.ms-prose blockquote > :last-child { margin-bottom: 0; }

.ms-prose figure { margin: 1.75rem 0; }
.ms-prose figure img { display: block; width: 100%; height: auto; border-radius: 14px; }
.ms-prose figcaption { margin-top: 0.625rem; font-size: 0.875rem; color: #5c6b72; }

/* ---------- Índice del artículo ---------- */
.ms-toc ol { margin: 0; padding-left: 1.25rem; list-style: decimal; }
.ms-toc li { margin-bottom: 0.4375rem; }
.ms-toc li::marker { color: #5c6b72; font-variant-numeric: tabular-nums; }
.ms-toc a { color: #123c4c; font-size: 0.9375rem; text-decoration: none; }
.ms-toc a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Tarjeta de artículo en la listagem ---------- */
.ms-card { display: flex; flex-direction: column; height: 100%; }
.ms-card-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.ms-card-foot { margin-top: auto; }

/* Spans de rejilla que el build original NO generó. Comprobado contra site.css:
   md:col-span-4, -5 y -3 existen; md:col-span-8, -7 y -2 no, porque ninguna página
   del site original los usó. Sin esto, el bloque destacado del listado colapsa a una
   columna estrechísima y el texto se parte palabra por palabra (visto en captura).
   Mismo breakpoint (768px) y misma forma que las que sí están en el compilado. */
@media (min-width: 768px) {
  .ms-col-md-8 { grid-column: span 8 / span 8; }
  .ms-col-md-7 { grid-column: span 7 / span 7; }
  .ms-col-md-2 { grid-column: span 2 / span 2; }
}

/* El grid de 3 columnas del listado: md:grid-cols-2 y lg:grid-cols-3 no están en el
   compilado (solo existen grid-cols-12 y variantes puntuales). */
.ms-grid-cards { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .ms-grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ms-grid-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Impresión: el administrador de fincas imprime el artículo para la junta de vecinos. */
@media print {
  header, footer, .ms-no-print { display: none !important; }
  .ms-prose { max-width: none; font-size: 11pt; }
  .ms-prose a { text-decoration: none; color: #000; }
  .ms-prose h2, .ms-prose h3 { break-after: avoid; }
}