/* TodoPinga · Los textos en Markdown (App\Services\Markdown): la bienvenida, la introducción del
   alquiler y sus términos y condiciones en la portada, y su vista previa en Panel › Página de inicio.
   Las mismas reglas en los dos sitios, para que la vista previa sea lo que sale en la web. Va después de
   branding.css (y de comun.css o panel.css): solo afecta a lo que está dentro de .md-content. */

.md-content { overflow-wrap: anywhere; }
.md-content > * { margin: 0; }
.md-content > * + * { margin-top: 1em; }

/* Títulos: más pequeños que los de las secciones de la página, que van por encima. */
.md-content :is(h2, h3, h4, h5, h6) { margin: 0; line-height: 1.25; letter-spacing: -0.01em; }
.md-content > :is(h2, h3, h4, h5, h6):not(:first-child) { margin-top: 1.4em; }
.md-content > :is(h2, h3, h4, h5, h6) + * { margin-top: .5em; }
.md-content h2 { font-size: 1.45rem; font-weight: var(--font-h2-weight); }
.md-content h3 { font-size: 1.2rem; font-weight: var(--font-h3-weight); }
.md-content :is(h4, h5, h6) { font-size: 1.05rem; font-weight: var(--font-h4-weight); color: var(--font-h4-color); }

.md-content :is(strong, b) { color: var(--font-textbold-color); }
.md-content del { opacity: .7; }
.md-content a { color: var(--brand-text-color); font-weight: var(--font-link-weight); border-bottom: 2px solid var(--brand-color-underline); transition: border-color var(--transition-interactive) ease; }
.md-content a:hover, .md-content a:focus-visible { border-bottom-color: var(--brand-color); }

/* Listas: branding.css las deja sin viñetas; aquí las llevan (en el naranja de la marca). */
.md-content :is(ul, ol) { padding-left: 1.4em; }
.md-content ul { list-style: disc; }
.md-content ul ul { list-style: circle; }
.md-content ol { list-style: decimal; }
.md-content li::marker { color: var(--brand-color); font-variant-numeric: normal; } /* las cifras de la marca (las tabulares de Circular parecen de máquina de escribir) */
.md-content li + li, .md-content li > :is(ul, ol) { margin-top: .35em; }
.md-content li > p { margin: 0; }
.md-content li > p + * { margin-top: .5em; }

.md-content blockquote { padding: .7em 1em; border-left: 4px solid var(--brand-color); border-radius: 0 12px 12px 0; background: var(--brand-color-soft); color: var(--font-textbold-color); }
.md-content blockquote > * + * { margin-top: .6em; }
.md-content hr { height: 0; border: 0; border-top: 1px solid var(--form-border-color); margin-block: 1.6em; }
.md-content code { padding: .1em .4em; border-radius: 6px; background: var(--surface-light-color-2); box-shadow: inset 0 0 0 1px var(--form-border-color); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: .88em; color: var(--font-textbold-color); }
.md-content pre { padding: 12px 14px; border-radius: 12px; background: var(--surface-light-color-2); overflow-x: auto; }
.md-content pre code { padding: 0; box-shadow: none; background: none; }

/* Tablas: con su desplazamiento propio si no caben (en el móvil), y una sombra en el borde derecho
   mientras quede tabla por ver (el degradado blanco «local» la tapa al llegar al final). */
.md-tabla {
  max-width: 100%; overflow-x: auto; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--form-border-color);
  background:
    linear-gradient(to left, var(--surface-light-color-1) 40%, rgba(255, 255, 255, 0)) 100% 0 / 36px 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .14), rgba(0, 0, 0, 0)) 100% 0 / 14px 100% no-repeat scroll,
    var(--surface-light-color-1);
}
.md-content table { width: 100%; border-collapse: collapse; font-size: var(--font-note-size); line-height: 1.45; overflow-wrap: normal; } /* se parte entre palabras, no dentro */
.md-content :is(th, td) { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--form-border-color); }
.md-content th { background: var(--surface-light-color-2); color: var(--font-textbold-color); font-weight: var(--font-p-bold-weight); white-space: nowrap; }
.md-content tbody tr:last-child td { border-bottom: 0; }
.md-content .md-centro { text-align: center; }
.md-content .md-derecha { text-align: right; }
/* Las columnas alineadas (los importes): nunca partidos en dos líneas («150,00 €», no «150,00 / €»). */
.md-content td:is(.md-centro, .md-derecha) { white-space: nowrap; }

/* En el móvil, la primera columna (el concepto) se queda fija al desplazar la tabla de lado, y los títulos
   de las columnas pueden partirse para que quepan más. */
@media (max-width: 599px) {
  .md-content :is(th, td) { padding: 8px 10px; }
  .md-content th { white-space: normal; min-width: 4.5rem; }
  .md-content :is(th, td):first-child { position: sticky; left: 0; z-index: 1; min-width: 8.5rem; background: var(--surface-light-color-1); box-shadow: inset -1px 0 0 var(--form-border-color); }
  .md-content th:first-child { background: var(--surface-light-color-2); }
}

/* La nota debajo de la tabla de tarifas (RentalPricing::tableHtml): cómo se cobran los días sin tramo propio. */
.md-content .md-nota { font-size: var(--font-note-size); line-height: var(--font-note-line-height); color: var(--font-note-color); }