/* Theme Name: TT5 Grupo Scout Description: Tema hijo de Twenty Twenty-Five para una Grupo Scout. Author: Antonio Fuentes Larrosa Template: twentytwentyfive Version: 1.0.0 Text Domain: tt5-grupo-scout */ /* Elimina el padding para toda la pagina, si este parametro no se define el navegador aplica padding: 8px al body por defecto*/ body { padding: 0 !important; } /* Red de seguridad (16/08/2026): #wpadminbar (la barra negra de WordPress, solo visible para Administrador — ver sw_ocultar_barra_admin_no_admin() en functions.php) puede quedar más ancha que la pantalla tras rotar un móvil real, por un bug de Chrome Android con elementos `position:fixed` — ver js/forzar-recalculo-orientacion.js, que intenta corregirlo por JS. Esta regla es el respaldo si el JS no llega a tiempo: por mucho que la barra intente medir mal su ancho, nunca podrá desbordar ni provocar scroll horizontal en el resto de la página. */ #wpadminbar { max-width: 100vw; overflow: hidden; } /* Candado general (16/08/2026): tras arreglar el desbordamiento de #wpadminbar, apareció el MISMO síntoma (hueco vacío a la derecha, scroll horizontal posible) en otro sitio de la página al girar un móvil real — confirmado que no es un elemento suelto con un fallo propio, es la misma familia de bug de Chrome Android (medidas de layout que se quedan mal calculadas tras rotar) apareciendo en sitios distintos cada vez. En vez de seguir cazando elemento por elemento, se corta de raíz a nivel de documento: si por lo que sea algo mide más que el viewport, que quede recortado en vez de generar scroll horizontal y hueco vacío. No debería ocultar ningún desbordamiento "real" de maquetación en escritorio (ese se ve y se prueba de otra forma, sin rotación de móvil), así que el riesgo de esconder un bug distinto es bajo. */ html { overflow-x: hidden; } /* Aire lateral mínimo garantizado en TODO el sitio (14/08/2026, a petición expresa): algunos bloques (la cabecera, con su Relleno puesto a 0 a propósito — trampa #11 de CLAUDE.md) no participan del margen global de la plantilla, así que sin esto se quedan pegados al borde de la pantalla y sus esquinas redondeadas se ven "mordidas". Se pone en el body, no en cada elemento por separado, para no tener que tocar el ancho/margen propio de cada uno (frágil: cambiar el margin de la cabecera de "auto" a un valor fijo la descentraba en pantallas anchas). Efecto secundario aceptado: el contenido, que ya tenía su propio aire, gana unos px más — imperceptible, nunca menos aire que antes. Reducido de 8px (var(--espacio-sm)) a 4px el 19/08/2026, a petición expresa ("en un móvil el espacio es oro... ya veremos si es necesario dar más aire en pantallas grandes") — valor suelto en vez de la variable compartida, para no afectar a los demás sitios que usan --espacio-sm (gaps de controles, etc.). Si en pantallas grandes hiciera falta más separación, sería el primer sitio a revisar. */ body { padding-left: 4px !important; padding-right: 4px !important; box-sizing: border-box; } /* ========================================================================== 1. VARIABLES GLOBALES (SETTINGS) --scout-global-base: #2e7d32; --scout-global-base: #572d8b; ========================================================================== */ :root { /* Color principal */ --scout-global-base: #622599; /* Cálculos automáticos de la paleta corporativa */ --scout-global-fondo: color-mix(in srgb, var(--scout-global-base), white 90%); --scout-global-borde: color-mix(in srgb, var(--scout-global-base), white 70%); --scout-global-oscuro: color-mix(in srgb, var(--scout-global-base), black 20%); --scout-global-texto: color-mix(in srgb, var(--scout-global-base), black 80%); /* Colores de las Secciones Educativas (Mapeo por Slug) */ --color-colonia: #58AAEB; /* Azul */ --color-manada: #FBBF24; /* Amarillo */ --color-scout: #34D399; /* Verde */ --color-esculta: #8C6F35; /* Marron */ --color-clan-rover: #D4482C; /* Rojo */ --color-kanguros: #F472B6; /* Rosa */ --color-grupo: #6B7280; /* Gris */ --color-scouters: #4682B4; /* Azul acero */ --color-asde-exmu-mundo: #6C4E94; /* Morado */ --color-publico: #0EA5E9; /* Azul cielo - contenido visible para todos */ /* --color-metadatos: REGLA DE "FOLIO Y BLOQUE" El folio exterior de una página (el marco de la tarjeta: .entry-content, .scout-formulario-wrapper, paneles) es SIEMPRE blanco. Dentro de ese folio, los bloques de datos estructurados o de formulario (metadatos de evento, campos ACF, formulario de inscripción) van en este gris, para separarse visualmente de la prosa/narrativa. No se usa para páginas enteras ni para cajas de aviso (esas usan .scout-alerta). Aclarado el 19/08/2026, en dos pasos el mismo día — 1º #DDDDDD → #EAEAEA ("un poco más claros"), 2º #EAEAEA → #FAFAFA ("debería ser el mismo gris en todos estos casos... un #fafafa estaría bien"), para que coincida exactamente con la caja de "Datos de Evento" que ve una familia en la ficha pública del evento — esa caja vive en la plantilla "single-evento" del Editor del Sitio (no en un archivo), con su gris puesto a mano como color de bloque; el ajuste a #FAFAFA para ESA caja está en css/shortcode-datos-evento.css (no usa esta variable, al no ser CSS de este archivo lo que la pinta), pero con el mismo valor final para que las dos vistas — la de gestión del Scouter y la pública de la familia — usen literalmente el mismo gris. */ --color-metadatos: #FAFAFA; /* Gris */ /* Configuración de UI Global */ --radio-tarjeta: 12px; /* tarjetas grandes: contenedores de página */ --radio-aviso: 8px; /* cajas intermedias: alertas, mensajes, paneles secundarios */ --radio-boton: 6px; /* botones, inputs, selects, controles */ --radio-badge: 20px; /* etiquetas/badges/chips de estado (siempre en forma de pastilla) */ --sombra-tarjeta: none; /* antes: 0 2px 4px rgba(0, 0, 0, 0.06), 0 10px 24px rgba(0, 0, 0, 0.12) */ --sombra-hover: 0 4px 8px rgba(0, 0, 0, 0.10), 0 18px 38px rgba(0, 0, 0, 0.22); --transicion-suave: all 0.3s ease; /* Escala de espaciado (14/08/2026) — antes no existía ninguna norma: cada componente ponía su propio número de padding/margin suelto (25px aquí, 30px allá, 20px, 16px...) sin relación entre sí. Norma a partir de ahora: usar SIEMPRE una de estas 5 variables en CSS/PHP nuevo, en vez de escribir un píxel suelto. No se ha retrocedido a tocar el CSS ya existente (sería un cambio grande y aparte) — esto aplica hacia delante, para que no se siga sumando caos. */ --espacio-xs: 4px; /* separación mínima: gap entre icono y su texto, entre badges */ --espacio-sm: 8px; /* gap entre controles pequeños en fila (botones, campos cortos) */ --espacio-md: 16px; /* padding interior de cajas medianas (alertas, celdas de tabla) */ --espacio-lg: 24px; /* separación entre bloques de una página (pestañas, secciones) */ --espacio-xl: 32px; /* padding de las tarjetas grandes que envuelven una página entera */ /* Ritmo vertical de plantilla (19/08/2026) — el único hueco que separa borde de pantalla ↔ cabecera ↔ menú ↔ contenido ↔ pie, IGUAL en todas las páginas del sitio (css/navegacion.css: margin-top de .cabecera-logo-titulo, margin-bottom de nav.menu-principal-nuevo, margin-top de .pie-pagina-452). Antes era el mismo número (20px) escrito tres veces por separado, sin relación entre sí — cualquier contenedor de página que además pusiera su PROPIO margen superior (.scout-formulario-wrapper, la caja "Administrador — estas acciones solo las ves tú" de shortcode-calendario.php...) se sumaba a este ritmo en vez de respetarlo, duplicando el hueco justo debajo del menú en varias páginas (encontrado y corregido el 19/08/2026). Norma a partir de ahora: el contenido de una página nunca debe poner su propio margin-top para separarse del menú — ese hueco lo pone SIEMPRE el propio menú (margin-bottom), una sola vez. */ --scout-ritmo-vertical: 20px; /* Colores de acción — ESQUEMA NUEVO (20/08/2026, rediseño completo "desde cero", a petición expresa, sustituye la convención del 14/08/2026). Cada color tiene UN solo significado en toda la web, sin excepciones ni matices por contexto — esa era la queja del sistema anterior (el ámbar significaba "semi-destructivo" solo para "Dar de baja"; el azul significaba "Editar" en unos sitios y no existía un color para "Ver/Buscar/Ordenar", que se quedaban en gris neutro). Roles fijos: - VERDE: Crear / Guardar / Confirmar (cualquier acción que "hace que algo positivo ocurra o se guarde" — incluye "Restaurar" desde la papelera, es deshacer un borrado). - ÁMBAR: Editar / Modificar (incluye TODOS los botones que cambian el ESTADO de un registro sin crearlo ni borrarlo: Cancelar evento/ Reactivar evento, Publicar/Pasar a Borrador, Suspender/Activar usuario, Dar de baja, Cancelar Pedido — antes cada uno tenía su propio color suelto, ahora todos comparten un único significado: "esto modifica algo"). - ROJO: Eliminar (cualquier borrado, sea a la papelera propia o definitivo — ya no se distingue por color, el texto del botón ya lo deja claro). - AZUL: Ver / Ordenar / Filtrar / Buscar (navegación y consulta que SÍ tiene un efecto visible — cambia qué se muestra — pero no modifica ningún dato). - GRIS: Cerrar / Descartar / Limpiar / Deseleccionar (acciones sin efecto real sobre los datos — restablecen una vista o cierran un diálogo) + pestaña inactiva + texto de utilidad. - MORADO DE MARCA (--scout-global-base, NO una variable de esta lista): pestaña/menú ACTIVO — "estás en esta sección", el mismo significado que el ítem resaltado del menú de cabecera (.current-menu-item, css/navegacion.css). Deliberadamente distinto de los 5 de arriba: esos describen QUÉ HACE un botón al pulsarlo, el morado dice DÓNDE ESTÁS — ver ".scout-btn-outline-menu" en css/paneles-scout-tabla.css (20/08/2026, corrige un primer intento que usó azul para esto y mezclaba los dos significados). */ --color-accion-azul: #3B82F6; /* Ver/Ordenar/Filtrar/Buscar */ --color-accion-gris: #6B7280; /* Cerrar/Descartar/Limpiar + pestaña inactiva */ --color-accion-fondo-gris: #f3f4f6; /* fondo del botón gris de utilidad */ --color-accion-borde-gris: #d1d5db; /* borde del botón gris de utilidad */ --color-accion-rojo: #EF4444; /* Eliminar (cualquier borrado) */ --color-accion-verde: #22C55E; /* Crear/Guardar/Confirmar/Restaurar */ --color-accion-ambar: #F59E0B; /* Editar/Modificar (incluye cambios de estado) */ /* Colores de ESTADO (20/08/2026, mismo rediseño) — para etiquetas/badges de solo lectura (Publicado/Borrador/Cancelado), NO para botones. Van siempre en versión suave (fondo pastel + texto oscuro del mismo tono) para no competir visualmente con los botones de acción de arriba — excepto "Cancelado", que se queda en negro sólido a petición expresa (mismo criterio que ya tenía "Cancelado" antes del rediseño: un interruptor o badge con las dos posiciones en rojo/verde "se ve siempre encendido"; negro es inequívocamente neutro). Solo 3 estados — el resto de badges de la web (Pendiente, En papelera, pedidos de Tienda, campañas...) tienen más de 3 estados posibles y quedan FUERA de este rediseño por ahora, a la espera de una ronda propia. */ --color-estado-activo-fondo: #DCFCE7; --color-estado-activo-texto: #166534; --color-estado-inactivo-fondo: #E5E7EB; --color-estado-inactivo-texto: #6B7280; --color-estado-cancelado-fondo: #1F2937; --color-estado-cancelado-texto: #FFFFFF; } /* ========================================================================== 1b. ANCHOS DEL SITIO — léase esto antes de tocar cualquier ancho ========================================================================== CAMBIO DE ARQUITECTURA (10/08/2026, tras el "dolor de cabeza" de una tarde entera de depuración): antes había variables CSS compartidas (--scout-ancho-panel y, más tarde, --scout-ancho-datos-evento) usadas a la vez por varias clases de páginas o componentes distintos. Cualquier cambio en uno se colaba sin querer en los demás, porque dependían del mismo número. Ya no queda NINGUNA variable CSS de ancho en este archivo — se eliminó también la última (--scout-ancho-datos-evento). El ancho de cada página lo decide ÚNICAMENTE la plantilla de bloque de Gutenberg (zona: Usuario / Admin / Muro / Tienda) asignada a esa página/entrada/evento desde el selector nativo "Plantilla" del editor. Esas plantillas se crean y mantienen de forma gráfica en el Editor del Sitio de WordPress — NO existen como archivos en este repo (la carpeta /templates/ se eliminó a propósito). Si buscas dónde está definido el ancho de una página, la respuesta nunca es un archivo: es la plantilla que tiene asignada, visible en el propio editor de esa página. Ninguna clase CSS de este tema (.scout-formulario-wrapper, .scout-folio- blanco, .entry-content.wp-block-post-content, .logistica-tabla-moderna, .inscripcion-evento-tarjeta, los avisos de shortcode-calendario.php...) debe volver a fijar su propio max-width. Todas ocupan el 100% de lo que les deje la plantilla que las envuelve — si algo se ve más ancho o más estrecho de lo esperado, el problema está en la plantilla (o en su Diseño/Layout, que debe ser "Restringido"), nunca en el CSS del componente. Regla de oro para entender por qué algo no se ve tan ancho como esperabas, se mida donde se mida: cuando hay cajas anidadas unas dentro de otras, el ancho final visible SIEMPRE es el más pequeño de todos los límites de la cadena, de fuera hacia dentro — nunca manda uno solo por sí solo, gana el más estrecho. ========================================================================== */ /* ========================================================================== 2. FONDOS GLOBALES Y CORRECCIONES DE LA UI DE WORDPRESS (RESETS) ========================================================================== */ /* ========================================================================== 2b. SISTEMA DE ICONOS SVG (sw_icono(), ver inc/iconos.php) ========================================================================== */ .sw-icono { width: 1em; height: 1em; vertical-align: -0.125em; flex-shrink: 0; } /* ========================================================================== 2c. TÍTULO DE PÁGINA (paneles de gestión — replica el estilo del bloque nativo "Título de la entrada" que ya usan Ver Evento/Ver Noticia, para que ambos mecanismos se vean idénticos) ========================================================================== */ .sw-titulo-pagina { margin: 0.5rem 0 1.5rem !important; padding-bottom: 1.25rem; border-bottom: 1px solid #cccccc; color: #555555 !important; font-size: 26px !important; font-weight: 800 !important; letter-spacing: 1px; line-height: 1.2; text-align: center !important; text-transform: uppercase !important; } /* ========================================================================== 3. ETIQUETAS DE SECCIÓN (BADGES GLOBALES) ========================================================================== */ .badge-seccion { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; border-radius: var(--radio-badge); padding: 4px 10px; color: #ffffff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.3); line-height: 1; } .badge-colonia { background-color: var(--color-colonia) !important; } .badge-manada { background-color: var(--color-manada) !important; } .badge-scout { background-color: var(--color-scout) !important; } .badge-esculta { background-color: var(--color-esculta) !important; } .badge-clan-rover { background-color: var(--color-clan-rover) !important; } .badge-kanguros { background-color: var(--color-kanguros) !important; } .badge-grupo { background-color: var(--color-grupo) !important; } .badge-scouters { background-color: var(--color-scouters) !important; } .badge-asde-exmu-mundo { background-color: var(--color-asde-exmu-mundo) !important; } .badge-publico { background-color: var(--color-publico) !important; } /* ========================================================================== 4. ALINEACIONES NATIVAS DE WORDPRESS (UTILIDADES) ========================================================================== */ /* ========================================================================== ORDEN Y ANCHO DE COLUMNAS (PORTADA) — Muro de Noticias / Almanaque+Agenda ========================================================================== Seleccionado por CONTENIDO, con :has(.muro-mixto-contenedor), en vez de por posición (:first-child/:last-child) — a propósito, desde el 15/08/2026: el responsable del proyecto reordenó las columnas a mano en el editor de bloques (Almanaque+Agenda ahora va primero en el HTML, Muro segundo — antes era al revés), y las reglas de aquí estaban escritas asumiendo el orden viejo, así que se habían quedado al revés sin que diera ningún error visible. Con :has() da igual el orden real en el HTML — vuelve a reordenarse en el editor y esto sigue funcionando solo. */ /* Escritorio: Almanaque+Agenda un 20% más ancho que su reparto original de fábrica (33,34% → 40%), el Muro se ajusta al complementario (66,66% → 60%) — a petición expresa 15/08/2026. flex-grow:0 en los dos para que se queden fijos en ese ancho exacto (si no, el que no tiene flex-basis en línea seguiría intentando crecer para llenar el hueco). */ @media (min-width: 782px) { body.home .entry-content.wp-block-post-content .wp-block-columns:has(.muro-mixto-contenedor) > .wp-block-column:has(.muro-mixto-contenedor) { flex-basis: 60% !important; flex-grow: 0 !important; /* Noticias a la izquierda, a petición expresa 15/08/2026 — por CSS (order), no reordenando el contenido en el editor. */ order: 1; } body.home .entry-content.wp-block-post-content .wp-block-columns:has(.muro-mixto-contenedor) > .wp-block-column:not(:has(.muro-mixto-contenedor)) { flex-basis: 40% !important; flex-grow: 0 !important; /* Agenda a la derecha, a petición expresa 15/08/2026. */ order: 2; } } /* Almanaque + lista de próximos eventos, en una caja con fondo propio — experimento a petición expresa 15/08/2026 (v2: la columna de Noticias ya no lleva título propio, la rejilla de tarjetas se explica sola). 26/09/2026, a petición expresa: la caja ya NO envuelve también el título "Agenda" — se aplica al grupo interno de la columna (el único hijo directo, el que envuelve calendario + próximos eventos), dejando el título fuera, como cápsula independiente (ver ::before más abajo). "!important" en el padding: ese grupo ya trae un padding:0 puesto a mano desde el editor de bloques (estilo inline, gana a una regla normal de hoja de estilos si no se fuerza). Si no convence, basta con borrar este bloque para quitarlo sin dejar rastro. */ body.home .entry-content.wp-block-post-content .wp-block-columns:has(.muro-mixto-contenedor) > .wp-block-column:not(:has(.muro-mixto-contenedor)) > .wp-block-group { /* "Papel"/sepia tipo ebook, a petición expresa 15/08/2026 — tono cálido en vez del gris frío anterior. Valores propios de esta caja, no variables globales (es un acabado decorativo puntual). Borde oscurecido respecto al primer intento (#D9CBA3 → #BFA476): contra el fondo de página casi blanco (#FAFAF9) el borde claro apenas se distinguía (contraste ~1.5:1); este tono sube a ~2.3:1 sin perder la sensación suave de "canto de página". Aclarado el 18/08/2026 (#F4ECD8 → #F7F1E2, a petición expresa) — mismo tono aclarado también en la cabecera (css/navegacion.css), que reutiliza este mismo "papel" para que las dos cajas sigan haciendo pareja. */ background-color: #F7F1E2; border: 1px solid #BFA476; border-radius: var(--radio-tarjeta); padding: var(--espacio-md) !important; box-sizing: border-box; } body.home .entry-content.wp-block-post-content .wp-block-columns:has(.muro-mixto-contenedor) > .wp-block-column:not(:has(.muro-mixto-contenedor))::before { content: "Agenda"; display: block; /* Ancho completo (26/09/2026, a petición expresa) — para que la cápsula mida lo mismo que la caja sepia de debajo. Como la columna ya no tiene padding propio (ahora vive en el grupo interno, ver arriba), el 100% del título coincide con el 100% de esa caja. */ width: 100%; box-sizing: border-box; text-align: left; font-size: 1.4rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--color-accion-gris); /* 16px (26/09/2026, a petición expresa: "el doble") — valor suelto en vez de var(--espacio-sm) (8px) para no afectar a los demás sitios que usan esa variable compartida. Mismo valor en móvil y escritorio, no hay media query que lo pise. */ margin-bottom: 16px; /* Marco tipo "cápsula" (26/09/2026, a petición expresa) — mismo marrón del borde y del fondo de la caja grande de debajo (#BFA476/#F7F1E2), para que título y caja hagan pareja de color. Mismo radio que el resto (caja de Agenda, título y caja de Noticias) — antes era un radio de píldora (20px) propio. */ background-color: #F7F1E2; border: 1px solid #BFA476; border-radius: var(--radio-tarjeta); padding: 4px 14px; } /* Título "Noticias y Eventos" (26/09/2026), mismo mecanismo y mismo estilo que "Agenda" arriba, pero para la columna que SÍ contiene el muro (al revés del :not() de arriba) — a petición expresa, para que quede claro que son dos secciones distintas y no una lista duplicada. A diferencia de "Agenda", no se oculta para visitantes sin sesión: el muro sí muestra contenido a visitantes (filtrado por categoría "publico"), no queda vacío como la agenda. Azul suave a juego (mismo "chip" que Agenda, pero en azul — convención de "información" y en línea con el azul ya usado en el sitio para acciones neutras). */ body.home .entry-content.wp-block-post-content .wp-block-columns:has(.muro-mixto-contenedor) > .wp-block-column:has(.muro-mixto-contenedor)::before { content: "Noticias y Eventos"; display: block; width: 100%; box-sizing: border-box; text-align: left; font-size: 1.4rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--color-accion-gris); /* 16px (26/09/2026, a petición expresa: "el doble") — valor suelto en vez de var(--espacio-sm) (8px) para no afectar a los demás sitios que usan esa variable compartida. Mismo valor en móvil y escritorio, no hay media query que lo pise. */ margin-bottom: 16px; background-color: #EAF2FB; border: 1px solid #7FA8D9; /* Mismo radio que la caja sepia de Agenda (26/09/2026, a petición expresa) — antes era un radio de píldora (20px) propio, distinto del de la caja. */ border-radius: var(--radio-tarjeta); padding: 4px 14px; } /* Sin título "Agenda" para visitantes sin sesión (23/08/2026, a petición expresa) — esa columna ya no muestra calendario ni agenda para ellos (solo el banner "Estás viendo la web como visitante", ver shortcode-agenda.php), así que el título dejó de tener sentido. "body.logged-in" es la clase que WordPress añade de fábrica solo con sesión iniciada — sirve de marcador sin tener que tocar PHP aquí. */ body.home:not(.logged-in) .entry-content.wp-block-post-content .wp-block-columns:has(.muro-mixto-contenedor) > .wp-block-column:not(:has(.muro-mixto-contenedor))::before { content: none; } /* El grid de Noticias trae de fábrica un margin-top de 19.2px (block-gap de Gutenberg que no se suprime como :first-child) que lo desalineaba respecto al borde superior de la caja de Agenda — se quita solo aquí. */ body.home .entry-content.wp-block-post-content .wp-block-columns:has(.muro-mixto-contenedor) > .wp-block-column:has(.muro-mixto-contenedor) > .muro-mixto-contenedor { margin-top: 0; } @media (max-width: 781px) { /* Forzamos el comportamiento de flexbox en columna vertical y matamos el gap nativo */ body.home .entry-content.wp-block-post-content .wp-block-columns:has(.muro-mixto-contenedor) { display: flex !important; flex-direction: column !important; /* "align-items:stretch" (19/08/2026, fallo real encontrado: "en pantallas pequeñas... se salen un poquito por la derecha... <380px"). Con "flex-direction:column" el ancho pasa a ser el eje CRUZADO, que por defecto se rige por "align-items" — el valor computado aquí era "normal" (heredado de la clase utilidad ".is-layout-flex" de WordPress), y en la práctica el navegador NO lo trataba como "stretch" (el comportamiento que en teoría le corresponde), sino que dejaba que cada columna se encogiera o creciera según el ancho NATURAL de su contenido — por eso cada columna acababa con un ancho propio (~360px) mayor que el que le tocaba (334px), y esa diferencia era exactamente el desborde que empujaba TODA LA PÁGINA hacia la derecha. "stretch" explícito fuerza a las dos columnas a medir el 100% del ancho disponible, sea cual sea su contenido. */ align-items: stretch !important; gap: 0 !important; /* Elimina el espaciado automático entre columnas apiladas */ } /* El Muro de Noticias siempre abajo en móvil */ body.home .entry-content.wp-block-post-content .wp-block-columns:has(.muro-mixto-contenedor) > .wp-block-column:has(.muro-mixto-contenedor) { order: 2 !important; margin-top: 3rem !important; /* Separación manual respecto al calendario que tiene encima (26/09/2026: doblado de 1.5rem a 3rem, a petición expresa) */ /* Ancho explícito al 100% (mismo motivo que "align-items:stretch" de arriba) — cinturón y tirantes: si algo más volviera a calcular el ancho por contenido, esto lo corrige igualmente. */ width: 100% !important; max-width: 100% !important; } /* Almanaque y Agenda siempre arriba en móvil */ body.home .entry-content.wp-block-post-content .wp-block-columns:has(.muro-mixto-contenedor) > .wp-block-column:not(:has(.muro-mixto-contenedor)) { order: 1 !important; margin-top: 0 !important; /* Obligatorio: quita el margen superior para que no haya hueco verde */ margin-bottom: 0 !important; width: 100% !important; max-width: 100% !important; /* Relleno lateral (19/08/2026 → 26/09/2026): tuvo 16px, luego 10px, luego 5px — y ahora 0, a petición expresa, para que el aire desde el borde de la pantalla hasta la caja sepia sea EXACTAMENTE el mismo que hasta las tarjetas de Noticias (esa columna nunca tuvo relleno propio aquí, solo el margen global del sitio). Con esto, las dos columnas quedan igualadas. */ padding-left: 0 !important; padding-right: 0 !important; /* 26/09/2026, a petición expresa (se perdió el aire lateral al mover la caja sepia del título al grupo interno): sin esto, "width:100%" + este padding se SUMAN en vez de repartirse (comportamiento por defecto "content-box"), así que la columna medía 100% + 10px — 10px de más que su propio contenedor, desbordándose por la derecha. Con "border-box" el padding se descuenta del 100% en vez de sumarse encima. */ box-sizing: border-box !important; } } /* ========================================================================== OPTIMIZACIÓN DEL ESPACIO EN MÓVIL (PORTADA / FONDO VERDE Y CREMA) ========================================================================== */ @media (max-width: 781px) { /* Calendario y Agenda: se conserva solo el aplastado del padding-top/margin-top inline que WP mete por su propio spacing--20 (vertical, no afecta al ancho). El padding-left/right y el fondo transparente que había aquí antes se han quitado el 14/08/2026 — eran parte del mismo lío de "margen por aquí, margen por allá" que hacía que el Muro se viera más estrecho que la cabecera; el ancho/marco los pone ahora la plantilla de zona (y, por defecto, theme.json), no este archivo. Por contenido (:not(:has(.muro-mixto-contenedor))), no por posición — mismo motivo que la sección de arriba (15/08/2026). */ body.home .wp-block-columns:has(.muro-mixto-contenedor) > .wp-block-column:not(:has(.muro-mixto-contenedor)) .wp-block-group.has-background[style] { padding-top: 0 !important; margin-top: 0 !important; } } /* ========================================================================== AJUSTES DE CABECERA (TÍTULO VISTALEGRE) — eliminado el 14/08/2026 ========================================================================== */ /* Esta sección apuntaba a "VISTALEGRE 452" por un selector de atributo frágil (el valor exacto del letter-spacing en línea), duplicando lo que ahora hace .cabecera-logo-titulo .titulo-sin-subrayado en css/navegacion.css con una clase de verdad. Las dos reglas competían por especificidad (esta ganaba, por tener un "p" de más) — visto y corregido el 14/08/2026 tras una sesión larga de depuración persiguiendo un "cambio de tamaño" que en realidad era esta duplicidad. */ /* ========================================================================== OPTIMIZACIÓN MÓVIL PARA ENTRADAS Y PÁGINAS INDIVIDUALES ========================================================================== */ @media (max-width: 781px) { /* 1. Aniquilamos paddings anidados para evitar el "efecto embudo" en los bloques */ body.single .wp-site-blocks > .wp-block-group, body.single main { padding-left: 0 !important; padding-right: 0 !important; } /* Ajustamos los márgenes laterales al mínimo para ganar espacio de pantalla */ body.single main .wp-block-group { padding-left: 2px !important; padding-right: 2px !important; } /* 2. Caja blanca más apurada a los bordes — eliminado el 14/08/2026: este padding de 5px no estaba limitado a body.single (se aplicaba también en Inicio) y contradecía la propia nota de css/frontend-contenido-simple-post.css ("el marco visual... ya NO se define aquí, lo pone el Grupo de la plantilla") — era resto de antes de esa decisión, nunca limpiado. Confirmado como una de las causas de que el Muro se viera más estrecho que la cabecera en móvil. */ /* 3. [NUEVO] Reducción del tamaño de letra para lectura en móvil */ .entry-content.wp-block-post-content p, .entry-content.wp-block-post-content li { font-size: 0.92rem !important; /* Letra un poco más pequeña */ line-height: 1.5 !important; } /* 4. Expandimos la tarjeta de logística a tope */ .logistica-tabla-moderna { margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; width: 100% !important; } /* 5. Solucionar desbordamiento: Forzamos la ruptura de emails y enlaces largos */ .entry-content.wp-block-post-content p, .entry-content.wp-block-post-content a, .entry-content.wp-block-post-content span { word-wrap: break-word !important; overflow-wrap: break-word !important; word-break: break-word !important; } /* 6. Arreglo para fotos alineadas que parten el texto */ .entry-content .alignleft, .entry-content .alignright, .entry-content .wp-block-image .alignleft, .entry-content .wp-block-image .alignright { float: none !important; display: block !important; margin: 1.5rem auto !important; max-width: 100% !important; width: 100% !important; } } /* ========================================================================== STICKY FOOTER: EMPUJAR EL PIE DE PÁGINA Y ESTIRAR EL CONTENIDO ========================================================================== */ /* 1. Convertimos el contenedor principal en una columna del alto de la pantalla */ .wp-site-blocks { display: flex !important; flex-direction: column !important; min-height: 100vh !important; min-height: 100dvh !important; } /* 2. Obligamos al bloque central (main) a expandirse para rellenar el hueco */ .wp-site-blocks > main { flex-grow: 1 !important; display: flex !important; flex-direction: column !important; } /* 3. ¡LA CLAVE! Obligamos a la caja blanca (hija de main) a estirarse también */ .wp-site-blocks > main > .wp-block-group { flex-grow: 1 !important; } /* ========================================================================== FORZADO DE ANCHO PARA EL "FOLIO BLANCO" DE LAS PÁGINAS (VERSIÓN SEGURA) -------------------------------------------------------------------------- PROBLEMA: El nuevo editor de WordPress (FSE) y el tema TT5 inyectan por defecto una "camisa de fuerza" (is-layout-constrained) que encoge el contenido a unos 620px, ignorando los ajustes del panel visual. SOLUCIÓN: Aplicar la clase CSS "scout-folio-blanco" al bloque Grupo principal (desde el editor > Avanzado > Clase CSS adicional). Este código detecta esa clase y anula las restricciones nativas de WordPress de forma segura. ========================================================================== */ /* 1. CREACIÓN DEL "FOLIO" Obligamos a la caja principal a expandirse hasta nuestro límite corporativo, independientemente de lo que diga el motor interno de WordPress. */ .wp-block-group.scout-folio-blanco { /* Sin max-width a propósito: el ancho lo decide la plantilla de Gutenberg que envuelve la página (su "contentSize"), no esta clase. */ width: 100% !important; /* Exige ocupar todo el ancho disponible... */ margin: 0 auto !important; /* Centra la caja perfectamente en el medio del monitor. */ } /* 2. LIBERACIÓN DE LOS ELEMENTOS INTERNOS El selector "> *" apunta a todos los elementos que estén DIRECTAMENTE dentro del folio (el primer nivel de hijos). Anulamos su ancho máximo restrictivo para quitarles la "camisa de fuerza", pero SIN forzarlos a medir el 100%. Esto salva la vida a elementos pequeños (botones, iconos, imágenes pequeñas) evitando que se estiren de forma monstruosa. */ .wp-block-group.scout-folio-blanco > * { max-width: none !important; } /* 3. EXPANSIÓN DE ELEMENTOS DE TEXTO Y SHORTCODES Ahora que los elementos están liberados, le decimos a los bloques de texto principales (títulos, párrafos y el contenedor de shortcodes) que ellos SÍ deben fluir y ocupar todo el ancho de nuestro folio de 1200px. */ .wp-block-group.scout-folio-blanco > h1, .wp-block-group.scout-folio-blanco > h2, .wp-block-group.scout-folio-blanco > p, .wp-block-group.scout-folio-blanco > .wp-block-post-content { width: 100%; } /* ========================================================================== FONDO GLOBAL (blanco apagado — antes lavanda #F3EEFA, cambiado a petición expresa 15/08/2026 para seguir la regla 60-30-10: la superficie más grande de todas no debe llevar el color de marca) ========================================================================== */ /* 1. Lienzo base de todo el sitio (lo que asoma por encima de la cabecera o por debajo del pie si el contenido no llena la pantalla) */ html, body { background-color: #FAFAF9 !important; } /* 2. Cualquier bloque con fondo propio dentro de la portada: columnas, grupos anidados, la columna del calendario, etc. */ body.home .wp-site-blocks > main.has-background, body.home .wp-site-blocks > main .has-background { background-color: #FAFAF9 !important; }