/* ─────────────────────────────────────────────────────────────
   Estilos configurables de la página de contenido libre (vista=libre).
   Las variables --plibre-* las genera MDPaginas a partir de los
   parámetros del admin (os/pages/libre.json). Cada valor lleva un
   fallback sensato para que la página se vea bien aunque no se configure.

   Este CSS solo se carga en páginas cuya vista es 'libre', por lo
   que no afecta al resto de páginas libres.
   ───────────────────────────────────────────────────────────── */

/* Fondo y espaciado de la página */
.pagina-libre {
    background-color: var(--plibre-pagina-fondo, transparent);
    padding-top: var(--plibre-padding-top, 3rem);
    padding-bottom: var(--plibre-padding-bottom, 3rem);
}

/* Ancho del contenido */
.pagina-libre .container {
    max-width: var(--plibre-container-max-width, 800px);
}

/* Caja que envuelve el contenido (título + texto) */
.pagina-libre__titulo,
.pagina-libre__contenido {
    background-color: var(--plibre-caja-fondo, transparent);
}
.pagina-libre .container {
    background-color: var(--plibre-caja-fondo, transparent);
    padding: var(--plibre-caja-padding, 0);
    border-radius: var(--plibre-caja-radio, 0);
    border: var(--plibre-caja-borde-grosor, 0px) solid var(--plibre-caja-borde-color, transparent);
    box-shadow: var(--plibre-caja-sombra, none);
}

/* Título de la página (h1) */
.pagina-libre__titulo {
    font-size: var(--plibre-titulo-tam, 2rem);
    font-weight: var(--plibre-titulo-peso, 700);
    color: var(--plibre-titulo-color, inherit);
    text-align: var(--plibre-titulo-align, left);
    font-family: var(--plibre-titulo-fuente, inherit);
    margin: 0 0 var(--plibre-titulo-margen, 2rem);
    line-height: 1.2;
}

/* Cuerpo del texto */
.pagina-libre__contenido {
    font-size: var(--plibre-texto-tam, 1rem);
    font-weight: var(--plibre-texto-peso, 400);
    color: var(--plibre-texto-color, inherit);
    text-align: var(--plibre-texto-align, left);
    font-family: var(--plibre-texto-fuente, inherit);
    line-height: var(--plibre-texto-interlineado, 1.7);
}
.pagina-libre__contenido p {
    margin: 0 0 1rem;
}

/* Encabezados del contenido (h1..h6 que escribe el editor). Usan el tamaño base
   configurable --plibre-h-tam; h1 y h2 se escalan un poco por jerarquía. */
.pagina-libre__contenido h1,
.pagina-libre__contenido h2,
.pagina-libre__contenido h3,
.pagina-libre__contenido h4,
.pagina-libre__contenido h5,
.pagina-libre__contenido h6 {
    font-size: var(--plibre-h-tam, 1.25rem);
    font-weight: var(--plibre-h-peso, 600);
    color: var(--plibre-h-color, inherit);
    font-family: var(--plibre-h-fuente, inherit);
    margin-top: var(--plibre-h-margen-top, 2rem);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}
.pagina-libre__contenido h1 { font-size: calc(var(--plibre-h-tam, 1.25rem) * 1.6); }
.pagina-libre__contenido h2 { font-size: calc(var(--plibre-h-tam, 1.25rem) * 1.25); }
.pagina-libre__contenido h1:first-child,
.pagina-libre__contenido h2:first-child,
.pagina-libre__contenido h3:first-child,
.pagina-libre__contenido h4:first-child {
    margin-top: 0;
}

/* Enlaces dentro del contenido */
.pagina-libre__contenido a {
    color: var(--plibre-link-color, var(--primary-color, #16a34a));
    text-decoration: var(--plibre-link-decoration, underline);
    transition: color 0.15s;
}
.pagina-libre__contenido a:hover {
    color: var(--plibre-link-hover-color, var(--plibre-link-color, var(--primary-color, #16a34a)));
}

/* Tablas dentro del contenido legal (por si el texto trae alguna) */
.pagina-libre__contenido table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.5rem;
}
.pagina-libre__contenido th,
.pagina-libre__contenido td {
    border: 1px solid var(--border-color, #e5e7eb);
    padding: 0.5rem 0.75rem;
    text-align: left;
    vertical-align: top;
}
.pagina-libre__contenido th {
    background: rgba(0, 0, 0, 0.04);
    font-weight: 600;
}

:root {
    --plibre-container-max-width: 1200px;
    --plibre-padding-top: 3rem;
    --plibre-padding-bottom: 3rem;
    --plibre-caja-padding: 0;
    --plibre-caja-radio: 0;
    --plibre-caja-borde-grosor: 0px;
    --plibre-caja-sombra: none;
    --plibre-titulo-tam: 2rem;
    --plibre-titulo-peso: 800;
    --plibre-titulo-color: var(--primary-color);
    --plibre-titulo-align: left;
    --plibre-titulo-fuente: var(--font-1);
    --plibre-titulo-margen: 2rem;
    --plibre-texto-tam: 1rem;
    --plibre-texto-peso: 400;
    --plibre-texto-color: var(--bg-black);
    --plibre-texto-align: left;
    --plibre-texto-fuente: var(--font-2);
    --plibre-texto-interlineado: 1.7;
    --plibre-h-tam: 1.25rem;
    --plibre-h-peso: 600;
    --plibre-h-color: var(--secondary-color);
    --plibre-h-fuente: var(--font-1);
    --plibre-h-margen-top: 2rem;
    --plibre-link-color: var(--primary-color);
    --plibre-link-hover-color: var(--primary-color);
    --plibre-link-decoration: none;
}