/* ============================================================================
   Texto con formato hecho en el editor del panel («mini Word»).

   Por qué una hoja GLOBAL: ese HTML se pinta con MarkupString, y los .razor.css de cada
   página no llegan a él (el aislamiento de Blazor marca solo lo que escribe el propio
   .razor). Sin esto, un Título 2 o una lista numerada escritos en el panel salían con el
   aspecto por defecto del navegador.

   Dos niveles, a propósito:
   - Las clases rt-* (alineación, sangría, botón, imágenes, tabla, punto ECO) valen en
     cualquier sitio: las pone el editor y no chocan con nada de la web.
   - Los títulos, listas, citas y tablas SOLO se estilan dentro de .texto-rico, que es el
     contenedor de los textos con formato. Así no se mueve nada de lo que ya se ve en el
     resto de la web. Los párrafos NO se tocan: cada página ya tiene sus márgenes.
   ============================================================================ */

/* ── Alineación y sangría (clases del editor) ── */
.rt-izq { text-align: left; }
.rt-centro { text-align: center; }
.rt-der { text-align: right; }
.rt-just { text-align: justify; }
.rt-sangria-1 { margin-left: 2em; }
.rt-sangria-2 { margin-left: 4em; }
.rt-sangria-3 { margin-left: 6em; }

/* ── Enlace con aspecto de botón ── */
a.rt-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 22px;
    margin: .25em .5em .25em 0;
    background-color: var(--blanco, #fff);
    color: var(--primario, #3caa36);
    border: 1px solid var(--primario, #3caa36);
    border-radius: 6px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}
a.rt-boton:hover,
a.rt-boton:focus-visible {
    background-color: var(--primario, #3caa36);
    color: var(--blanco, #fff);
    text-decoration: none;
}

/* ── Imágenes dentro del texto ── */
img.rt-img-pequena,
img.rt-img-mediana,
img.rt-img-completa { max-width: 100%; height: auto; }
img.rt-img-pequena { width: 33%; }
img.rt-img-mediana { width: 50%; }
img.rt-img-completa { width: 100%; }
img.rt-img-izq { float: left; margin: .2em 1.2em .8em 0; }
img.rt-img-der { float: right; margin: .2em 0 .8em 1.2em; }
img.rt-img-centro { display: block; margin: .8em auto; }

@media (max-width: 600px) {
    /* En el móvil no hay sitio para el texto al lado: la imagen va sola y más grande. */
    img.rt-img-izq,
    img.rt-img-der { float: none; display: block; margin: .8em auto; }
    img.rt-img-pequena { width: 60%; }
    img.rt-img-mediana { width: 100%; }
}

/* ── Punto de lista con el sello ECO ── */
li.rt-eco { list-style: none; }
li.rt-eco::before {
    content: "ECO";
    display: inline-block;
    margin-right: .5em;
    padding: 1px 5px;
    background-color: var(--primario, #3caa36);
    color: var(--blanco, #fff);
    font-family: 'Nunito Sans', sans-serif;
    font-size: .7em;
    font-weight: 700;
    line-height: 1.4;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    vertical-align: .15em;
}

/* ── Tablas (el editor les pone rt-tabla) ── */
table.rt-tabla {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-size: .95em;
}
table.rt-tabla th,
table.rt-tabla td {
    border: 1px solid var(--grisgris-30, #e0e0e0);
    padding: 8px 10px;
    vertical-align: top;
    text-align: left;
}
table.rt-tabla th {
    background-color: var(--primaryprimary-10, #ebf6eb);
    font-weight: 700;
}
@media (max-width: 600px) {
    /* Una tabla ancha no puede romper la página: se desplaza ella sola. */
    table.rt-tabla { display: block; overflow-x: auto; }
}

/* ── Contenedor que antes era un <p> ──
   Los textos con formato no pueden ir dentro de un <p>: un título o una lista dentro de un
   párrafo el navegador lo parte al cargar la página. Así que su contenedor pasa a ser un
   <div>, y esta clase le da los mismos márgenes que Bootstrap le daba al <p>. */
.texto-p { margin-top: 0; margin-bottom: 1rem; }

/* ── Dentro de un texto con formato ──
   Solo lo que el editor puede meter y que hoy no hay en ningún texto: títulos, cita y
   tabla. Las listas, las líneas y los párrafos NO se tocan, a propósito: hay contenedores
   que ya tienen los suyos (los <hr> de las páginas de sostenibilidad, las listas de las
   condiciones de venta) y cambiarían de aspecto. */
.texto-rico:has(img.rt-img-izq, img.rt-img-der)::after { content: ""; display: table; clear: both; }
.texto-rico h2 { font-size: 1.5em; font-weight: 700; line-height: 1.25; margin: 1.1em 0 .5em; }
.texto-rico h3 { font-size: 1.25em; font-weight: 700; line-height: 1.3; margin: 1em 0 .45em; }
.texto-rico h4 { font-size: 1.08em; font-weight: 700; line-height: 1.35; margin: .9em 0 .4em; }
.texto-rico > h2:first-child,
.texto-rico > h3:first-child,
.texto-rico > h4:first-child { margin-top: 0; }
.texto-rico blockquote {
    margin: 1em 0;
    padding: .6em 1em;
    border-left: 4px solid var(--primario, #3caa36);
    background-color: var(--primaryprimary-10, #ebf6eb);
    font-style: italic;
}
/* Los enlaces normales NO se tocan: cada página ya los pinta a su manera. */