/* ==========================================================================
   Textos legales (aviso legal, cookies, protección de datos)

   Estas tres páginas son documentos redactados: cientos de <h2>, <p>, <ul> y
   <strong> escritos a mano que no se pueden ir etiquetando uno a uno con
   utilidades de Tailwind. Se les da estilo por descendencia desde .legal-prose,
   que es el único sitio del panel donde se estiliza HTML sin clases.

   Fichero aparte y cargado sólo en esas tres páginas (block head_extra), para
   no meter reglas de elemento en admin.css, donde afectarían a todo.
   ========================================================================== */

.legal-prose {
    /* Un documento para leer sí lleva ancho de lectura: una línea de 200
       caracteres se sigue mal. Es la excepción a la regla de ancho completo. */
    max-width: 72ch;
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.75;
}

.legal-prose h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.legal-prose h2:first-child {
    margin-top: 0;
}

.legal-prose h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 1.5rem 0 0.5rem;
}

.legal-prose h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 1.25rem 0 0.5rem;
}

.legal-prose p {
    margin: 0 0 1rem;
}

.legal-prose strong {
    color: var(--color-text-primary);
    font-weight: 600;
}

.legal-prose ul,
.legal-prose ol {
    margin: 0 0 1rem;
    padding-left: 1.5rem;
}

.legal-prose ul {
    list-style: disc;
}

.legal-prose ol {
    list-style: decimal;
}

.legal-prose li {
    margin-bottom: 0.4rem;
}

.legal-prose a {
    color: var(--color-primary-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-prose a:hover {
    color: var(--color-primary-hover);
}

.legal-prose table {
    width: 100%;
    margin: 0 0 1.5rem;
    border-collapse: collapse;
    font-size: 14px;
}

.legal-prose th,
.legal-prose td {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

.legal-prose th {
    background: var(--color-panel-sunken);
    color: var(--color-text-primary);
    font-weight: 600;
}

/* Las plantillas antiguas traen text-justify de Bootstrap; justificar sin
   partición de palabras deja ríos blancos, así que se anula. */
.legal-prose .text-justify {
    text-align: left;
}