/* ==========================================================================
   contenido.css — CONTRATO DE RENDER del editor (idea del piloto v2)
   --------------------------------------------------------------------------
   FUENTE ÚNICA de la MAQUETACIÓN del contenido creado con el gfm-editor.
   Lo cargan A LA VEZ el editor (modo edición) y TODA vista pública que
   renderice ese contenido (páginas CMS, School, News). Así "Editar == Ver"
   por construcción y las columnas NO pueden volver a divergir (era "el
   problema de siempre": las reglas vivían duplicadas en editor.css y en
   style.css y se desincronizaban).

   Alcance: SOLO la maqueta estructural (flex del "cubo", imágenes, apilado
   móvil). El "chrome" de edición (bordes de bloque, etiquetas, hovers) sigue
   en editor.css y NO se sirve en público.

   Se aplica bajo la clase .contenido-editor (presente en el lienzo del editor
   y en cada contenedor de vista) para no filtrar a nada más. Valores
   autocontenidos con fallback: usan la variable del sitio si existe y, si no
   (p.ej. en el admin), caen a un valor equivalente — se ve igual en todos
   los contextos.
   ========================================================================== */

/* La BASE del contenido: NEGRA, con el texto en BLANCO (Manuel, 19-09-2026).
   «Me cuesta un poco leer sobre azules en blanco. […] su interior va en negro y el texto queda
   blanco. A no ser que se modifique dentro del editor. Su base será negra siempre.»
   Vale para todo lo que se escribe con el editor (páginas, School, News, Buscador) y para el
   propio lienzo del editor: se escribe sobre el mismo fondo en el que se va a leer. Un fondo o
   un color puestos DENTRO del editor (el estilo de un bloque o de un texto) mandan sobre esta
   base, porque van en el propio elemento. */
.contenido-editor {
    background-color: #000;
    color: #fff;
    padding: var(--space-lg, 1.5rem);
    border-radius: var(--radius-md, 10px);
}
/* En el lienzo, editor.css le da su propio color de texto: aquí manda la base. */
.editor-canvas.contenido-editor {
    background-color: #000;
    color: #fff;
}

.contenido-editor .flex-row {
    display: flex;
    flex-direction: row;
    gap: var(--space-lg, 1.5rem);
    width: 100%;
    margin-bottom: var(--space-lg, 1.5rem);
    align-items: stretch;
}
.contenido-editor .flex-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg, 1.5rem);
    width: 100%;
    margin-bottom: var(--space-lg, 1.5rem);
}
.contenido-editor .editor-block {
    flex: 1;
    min-width: 0;
}
.contenido-editor .editor-block > :first-child {
    margin-top: 0;
}

/* Imágenes del contenido: NUNCA desbordan su bloque/columna. */
.contenido-editor img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md, 10px);
}

/* Anidados: una fila dentro de una columna (y viceversa) también flexa. */
.contenido-editor .flex-row > .flex-col,
.contenido-editor .flex-col > .flex-row {
    flex: 1;
    min-width: 0;
}

/* Tablas del contenido: en un móvil NO ensanchan la página, se deslizan dentro de su sitio.
   `display: block` más `width: max-content` es el truco de siempre: las columnas siguen midiendo
   lo que pide su texto, pero la tabla ya es un bloque con scroll propio. Sin esto, una tabla de
   seis columnas (el catálogo de Robótica, una comparativa de News) empuja toda la página a lo
   ancho, y eso en un teléfono se nota en cada párrafo. */
.contenido-editor table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: var(--space-md, 1rem) 0;
}
.contenido-editor th,
.contenido-editor td {
    text-align: left;
    padding: 6px 10px;
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.15));
    vertical-align: top;
}
.contenido-editor th {
    font-weight: 600;
    background: rgba(255, 255, 255, 0.05);
}

/* Apilado en móvil (regla resuelta y probada). */
@media (max-width: 700px) {
    .contenido-editor .flex-row { flex-direction: column; }
}