.esm-gal-cabecera{max-width:960px;margin:0 auto 24px} .esm-gal-cabecera img{width:100%;height:auto;border-radius:12px;display:block} .esm-gal-cabecera p{text-align:center!important;font-size:16px!important;color:var(--esm-public-color-333,#333)!important;margin:12px 0 0} .esm-gal{max-width:1200px;margin:0 auto;font-size:var(--esm-gal-fs,16px)!important;color:var(--esm-public-color-1b1b1b,#1b1b1b)!important;background:transparent!important} .esm-gal *{box-sizing:border-box} .esm-gal--grande{font-size:19px!important} .esm-gal-buscar-rotulo{display:block;font-size:16px!important;font-weight:600;color:var(--esm-public-color-555,#555)!important;margin:0 0 8px} .esm-gal-ajustes{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:0 0 24px} /* v4.11.0 — `min-width:0` (no 220px) a propósito: es el escollo clásico de flexbox (el suelo * por defecto de un ítem flex es `auto`, es decir "nunca más estrecho que su contenido"), y el * de la referencia (`ref-galeria.css:42`) ya lo resuelve igual. Con el suelo en 220px, a 375px * de ancho el buscador + contador + 3 casillas de ajuste (pósteres) no cabían NUNCA, aunque * flex-wrap esté puesto: el buscador se quedaba en su suelo de 220px y la última casilla se * cortaba fuera del viewport en vez de bajar de línea — visto en el render real contra el tema * de sefpalma a 375px, no en la hoja de estilos aislada. */ .esm-gal-buscar-wrap{position:relative;flex:1 1 260px;min-width:0} /* v4.11.0 (revisión de capturas, coordinador) — «el icono de la lupa pisa el texto Buscar…», * medido con Playwright (`getBoundingClientRect`) a 1280px y 375px: el icono (antes * `left:12px`, `width:18px`) terminaba en el píxel 30, y el `padding-left:38px` del campo * dejaba solo 8px de aire antes de que empezara el texto — visualmente el trazo derecho de la * lupa se comía la primera letra («ßuscar»). Ahora el icono empieza en 14px y el texto en * 46px: 14px de aire, medido en las dos anchuras (el icono no cambia de tamaño ni de * posición entre breakpoints, así que la medida es la misma a 1280 y a 375). */ .esm-gal-buscar-icono{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--esm-public-color-888,#888)!important;pointer-events:none} /* v4.11.0 (revisión de capturas, coordinador) — el `padding-left:46px` de arriba no bastaba * en el render real contra el tema (verificado con Playwright, `getBoundingClientRect` + * `getComputedStyle` a 1280px y 375px): el padding SEGUÍA midiendo 15px, como si esta regla * no existiera. Causa real, no un empate de `!important`: GeneratePress fija el padding de * los campos de texto con `input[type=search]{padding:10px 15px}` — un selector de ELEMENTO * + ATRIBUTO, que en el modelo de especificidad de CSS pesa (0,1,1): el atributo `[type=…]` * cuenta como una clase, y el elemento `input` suma un punto MÁS que nuestra `.esm-gal-buscar` * a secas, que es solo una clase, (0,1,0) — un selector de clase NO le gana siempre a un * elemento con atributo, aunque la intuición diga lo contrario. Mismo remedio que ya usa * cada regla de color/fondo/borde de este asset: * `!important`, para no depender de la especificidad exacta del tema de turno. */ .esm-gal-buscar{width:100%!important;padding:10px 14px 10px 46px!important;font-size:16px!important;color:var(--esm-public-color-1b1b1b,#1b1b1b)!important;background:var(--esm-public-color-fff,#fff)!important;border:1.5px solid var(--esm-public-color-cfd3d0,#cfd3d0)!important;border-radius:8px} .esm-gal-contador{font-size:16px!important;color:var(--esm-public-color-555,#555)!important;white-space:nowrap;font-variant-numeric:tabular-nums} .esm-gal-vacio{padding:32px;text-align:center;color:var(--esm-public-color-555,#555)!important} .esm-gal-sin-resultados{padding:24px;text-align:center;color:var(--esm-public-color-555,#555)!important;font-size:16px!important} /* B (encargo Alejandro, 4.12.4) — mismo patrón que `.esm-gal-card[hidden]`/`.esm-gal-tabla * tr[hidden]`/`.esm-gal-visor [hidden]`, unas líneas más abajo y más arriba: un `hidden` a * secas depende de que NINGUNA regla de autor del tema fije `display` en un `

`, y eso no * está garantizado. Con esto, aunque el tema rompa el `hidden` nativo, este párrafo se queda * oculto mientras el buscador está vacío. */ .esm-gal-sin-resultados[hidden]{display:none!important} .esm-gal-aviso{padding:16px;color:var(--esm-public-color-555,#555)!important} /* Ive (diseño «como Taller») — SIN `align-items:start` el valor por defecto de CSS Grid * (`stretch`) estira TODA tarjeta corta hasta la altura de la más alta de su fila. Con una * lista de autores real (varios nombres + afiliación completa cada uno, spec de esta * galería: TODOS los autores, no solo el primero) una tarjeta puede medir el triple que su * vecina — antes se veía como una caja en blanco gigante bajo una tarjeta corta ya * renderizada (medido en ricixi: ~450px de hueco muerto). Con `start`, cada tarjeta mide su * propio contenido; la fila sigue midiendo lo que marca la más alta, pero nadie más se * estira para llenarla. */ .esm-gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start} @media (max-width:900px){.esm-gal-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:600px){.esm-gal-grid{grid-template-columns:1fr}} .esm-gal-card{border:1px solid var(--esm-public-color-e3e7e4,#e3e7e4)!important;border-radius:12px;overflow:hidden;background:var(--esm-public-color-fff,#fff)!important} .esm-gal-card[hidden]{display:none} .esm-gal-card-img,.esm-gal-card-img img{display:block;width:100%} /* [T2] CONFUNDE (STEVE, auditoría UX) — sin `aspect-ratio` aquí, una imagen vertical y una * apaisada dan cajas de alto muy distinto; con `align-items:stretch` (por defecto en CSS * Grid) esa diferencia estira TODA la fila a la altura de la tarjeta más alta, dejando hueco * muerto bajo las tarjetas vecinas (medido con Playwright: ~150px de blanco bajo el botón de * un PDF). Mismo `aspect-ratio:3/4` que ya usan los casos "pendiente"/"doc", para que las * tres variantes de tarjeta midan igual de alto. `object-fit:cover` no deforma el póster. */ .esm-gal-card-img img{height:auto;aspect-ratio:3/4;object-fit:cover} /* v4.11.0 (revisión de capturas, coordinador) — el marcador del póster que aún no se ha * subido puede quedarse, pero más discreto: fondo muy suave, proporción cercana a la del * póster real. El `aspect-ratio:3/4` YA es una proporción de póster real (retrato, como el * `.no-img` de la referencia); lo que se suaviza es el peso visual: fondo más claro * (`var(--esm-public-color-f5f6f8,#f5f6f8)`→`var(--esm-public-color-f8f9f8,#f8f9f8)`) y texto más ligero (`var(--esm-public-color-5f6368,#5f6368)`→`var(--esm-public-color-727272,#727272)`, sigue en 4.56:1 sobre ese * fondo — fórmula de contraste relativo W3C, medida con las luminancias relativas, no a ojo * — así que no reabre [T5] PULIDO de más arriba) y algo más pequeño. Esta misma clase la * usan también el aviso de documento pendiente, el del póster demasiado grande para * decodificar y el de la miniatura ausente — los cuatro son estados de espera, no un error, * y ahora se leen todos igual de discretos. * * MENOR 2 (CERBERO, pasada 1 sobre 413) — a propósito, este comentario ya NO cita entre * comillas el texto exacto que renderiza cada tarjeta (antes citaba tres de los cuatro * literales): un `strpos()` sobre el HTML+CSS completo que compruebe ese texto encontraba * SIEMPRE este comentario, muriera o no el `esc_html(esm_ap_t(...))` real. Se demostró con * dos sabotajes que cambiaban el texto de la tarjeta y la suite seguía en verde — y el * tercer literal («Documento pendiente») se libraba por pura casualidad de salto de línea, * no por diseño. Si necesitas nombrar el texto exacto en un comentario, hazlo sin las * comillas latinas «» que usan los `esc_html(esm_ap_t(...))` reales, o mejor, no lo cites * literal: describe la clase CSS o la condición. */ .esm-gal-card-img--pendiente{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;background:var(--esm-public-color-f8f9f8,#f8f9f8)!important;color:var(--esm-public-color-727272,#727272)!important;font-size:14px!important;text-align:center;padding:8px} .esm-gal-card-img--doc{aspect-ratio:3/4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--esm-public-color-f5f6f8,#f5f6f8)!important;text-decoration:none} .esm-gal-card-doc-marca{font-weight:700;font-size:22px;letter-spacing:.05em;color:var(--esm-public-color-b3261e,#b3261e)!important;border:2px solid var(--esm-public-color-b3261e,#b3261e)!important;border-radius:6px;padding:2px 10px} .esm-gal-card-doc-btn{font-size:14px!important;color:var(--esm-public-color-1b1b1b,#1b1b1b)!important;text-decoration:underline} .esm-gal-card-resumen{margin:8px 0 0} .esm-gal-card-body{padding:14px 16px} /* [T5] PULIDO (STEVE, auditoría UX), aplicado: `var(--esm-public-color-888,#888)` sobre `var(--esm-public-color-f5f6f8,#f5f6f8)`/`var(--esm-public-color-fff,#fff)` mide 3.28:1, * por debajo del 4.5:1 exigido para texto normal (WCAG AA). `var(--esm-public-color-5f6368,#5f6368)` mide 5.59:1/6.05:1 — * verificado con la fórmula de contraste relativo de W3C, no a ojo. */ .esm-gal-card-cod{font-size:13px!important;color:var(--esm-public-color-b3261e,#b3261e)!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.04em;display:block} /* [T2] CONFUNDE (STEVE) — sin tope de líneas, un título largo (6 líneas en el fixture real) * dispara solo el alto de toda su fila. 2 líneas con elipsis (diseño de referencia, «solo * salga… título»): se sigue leyendo lo esencial, ninguna tarjeta se dispara sola. */ /* MENOR 6 (cerbero, pasada 1) — sin `overflow-wrap`, una cadena larga SIN espacios (un * título/nombre/centro pegado, o un identificador largo) desborda su caja en vez de partirse: * medido con Playwright a 1280/768/375px, 320-467px de recorte a mitad de palabra en las tres * (h3/autor/centro). El `overflow:hidden` de `.esm-gal-card` lo clipaba visualmente (no había * overflow de PÁGINA), pero la palabra se veía cortada a la mitad — la tabla de orales que * esta ronda retira SÍ llevaba `word-break:break-word`, y la tarjeta nueva se quedó sin él. */ .esm-gal-card-body h3{font-size:17px!important;font-weight:700!important;color:var(--esm-public-color-1b1b1b,#1b1b1b)!important;margin:6px 0 6px;line-height:1.3; overflow-wrap:break-word;word-break:break-word; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* v4.11.0 — sustituye a `.esm-gal-autores`/`.esm-gal-presentador`/`.esm-gal-centro`: la * tarjeta ya SOLO pinta al presentador (encargo Alejandro), nunca la lista de coautores. */ .esm-gal-card-autor{font-size:15px!important;font-weight:600!important;color:var(--esm-public-color-1b1b1b,#1b1b1b)!important;margin:0 0 2px;line-height:1.3;overflow-wrap:break-word;word-break:break-word} .esm-gal-card-centro{display:block;font-weight:400!important;font-size:13px!important;color:var(--esm-public-color-666,#666)!important;margin:0;overflow-wrap:break-word;word-break:break-word} /* H9 (v4.14) — la tabla de orales. Colores y tipografía calcados de la tarjeta (mismo * var(--esm-public-color-1b1b1b,#1b1b1b) de texto, mismo borde var(--esm-public-color-e3e7e4,#e3e7e4)) para que las dos galerías del mismo evento se vean * de la misma familia, y `!important` por lo mismo que el resto de este bloque: el tema del * sitio (GeneratePress en toda la flota) le pone su propio color gris apagado a las celdas. */ .esm-gal-tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .esm-gal-tabla{width:100%;border-collapse:collapse;margin:0;background:var(--esm-public-color-fff,#fff)!important;table-layout:auto} .esm-gal-tabla th,.esm-gal-tabla td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--esm-public-color-e3e7e4,#e3e7e4)!important;vertical-align:top;color:var(--esm-public-color-1b1b1b,#1b1b1b)!important;font-size:15px!important;line-height:1.35} .esm-gal-tabla thead th{font-size:13px!important;text-transform:uppercase;letter-spacing:.04em;color:var(--esm-public-color-4a4a4a,#4a4a4a)!important;background:var(--esm-public-color-f8f9f8,#f8f9f8)!important;border-bottom:2px solid var(--esm-public-color-e3e7e4,#e3e7e4)!important;white-space:nowrap} .esm-gal-tabla tbody tr:nth-child(even){background:var(--esm-public-color-fbfbfa,#fbfbfa)!important} .esm-gal-tabla tr[hidden]{display:none!important} .esm-gal-td-cod{white-space:nowrap;font-weight:700!important;color:var(--esm-public-color-b3261e,#b3261e)!important;font-size:13px!important;letter-spacing:.04em;width:1%} .esm-gal-td-tit{font-weight:600!important;overflow-wrap:break-word;word-break:break-word} .esm-gal-td-aut{overflow-wrap:break-word;word-break:break-word} .esm-gal-td-centro{display:block;font-size:13px!important;color:var(--esm-public-color-666,#666)!important;font-weight:400!important;margin-top:2px} .esm-gal-td-btn{width:1%;white-space:nowrap} @media(max-width:640px){ .esm-gal-tabla,.esm-gal-tabla tbody,.esm-gal-tabla tr,.esm-gal-tabla td{display:block;width:100%} .esm-gal-tabla thead{position:absolute;left:-9999px} .esm-gal-tabla tbody tr{border:1px solid var(--esm-public-color-e3e7e4,#e3e7e4)!important;border-radius:12px;margin:0 0 12px;padding:4px 0;background:var(--esm-public-color-fff,#fff)!important} .esm-gal-tabla tbody tr:nth-child(even){background:var(--esm-public-color-fff,#fff)!important} .esm-gal-tabla td{border-bottom:0!important;padding:6px 14px} .esm-gal-tabla td[data-etq]:before{content:attr(data-etq);display:block;font-size:12px!important;text-transform:uppercase;letter-spacing:.04em;color:var(--esm-public-color-727272,#727272)!important;margin-bottom:2px} .esm-gal-td-cod,.esm-gal-td-btn{width:auto} } /* MAYOR 1 (cerbero, pasada 1, sef-413) — la tabla de orales pinta el centro con OTRA clase * (`.esm-gal-td-centro`, no `.esm-gal-card-centro`): esta regla solo tapaba las tarjetas, así * que con `galeria_ocultar_afiliacion` marcada Y `galeria_vista_orales=tabla`, el centro del * autor presentador se seguía viendo en la tabla pública. Mismo selector, las dos clases. */ .esm-gal--sin-afiliacion .esm-gal-card-centro,.esm-gal--sin-afiliacion .esm-gal-td-centro{display:none} /* H1 (v4.13.0) — el color YA NO está clavado aquí: esta hoja se imprime UNA vez por página y * la comparten las dos galerías, así que el valor viaja como custom property en el propio * `.esm-gal` (`esm_gal_render()`). El fallback del `var()` es el oscuro por defecto (H5, * v4.14, `ESM_GAL_COLOR_BOTON_DEFECTO`), para que un HTML cacheado de antes de esta versión * (sin la variable) se siga viendo con un color legible y no negro. */ .esm-gal-btn{display:inline-block;padding:6px 14px;border-radius:6px;background:var(--esm-gal-btn,#2c3e50)!important;color:var(--esm-gal-btn-texto,#fff)!important;text-decoration:none;font-size:14px!important;white-space:nowrap} /* H5 (v4.14, encargo Alejandro, sefpalma) — estados de foco/hover que el botón no tenía: * `:hover` sube el brillo del color que sea (no un color fijo, sirve para cualquier evento); * `:focus-visible` deja un halo doble (blanco + el color del botón) visible tanto si el foco * cae sobre fondo blanco de la tarjeta como si cae sobre el propio botón oscuro. */ .esm-gal-btn:hover{filter:brightness(1.15)} .esm-gal-btn:focus-visible{outline:3px solid var(--esm-public-color-fff,#fff);outline-offset:2px;box-shadow:0 0 0 5px var(--esm-gal-btn,#2c3e50)} .esm-gal-card-img{cursor:zoom-in} /* 4.12.4 (encargo Alejandro — «visor igual que la referencia»: póster a la altura de la * ventana, botón Cerrar rojo arriba derecha con la palabra, navegación circular, contador, * móvil vertical). El visor pasa a pantalla COMPLETA: antes vivía en una caja de * `max-width:min(94vw,1100px)`/`max-height:92vh` con la imagen topada aparte a un `70vh` * fijo — en una pantalla vertical eso deja el póster pequeño dentro de una caja que ya de * por sí no era completa, la queja literal de Alejandro. `100dvh` (con *fallback* a `100vh`: * un navegador que no entiende `dvh` ignora esa declaración y se queda con la anterior, la * última declaración VÁLIDA de la regla gana — por eso `vh` va primero y `dvh` después, * nunca al revés) sigue en vivo a la barra de direcciones del móvil. Fondo al 92%, como midió * Alejandro en la referencia. * * M3 (CERBERO, pasada 1, 4.12.4) — `width:100%`, no `100vw`. `100vw` incluye la barra de * scroll CLÁSICA (la que ocupa sitio, Windows/Linux; macOS la superpone y no se nota ahí, * por eso no se detectó al medir en este Mac). Con `100vw` el `

` queda ~15px más * ancho que el área visible y, anclado a `left:0` por la hoja del agente de usuario, lo que * sobra se va por la derecha — tapando los últimos px de `.esm-gal-visor-next` * (`right:10px`). Para un elemento del *top layer* (`showModal()`) los porcentajes se * resuelven contra el bloque contenedor inicial SIN la barra, así que `100%` da el mismo * resultado que `100vw` donde la barra se superpone (macOS) y el correcto donde ocupa sitio * (Windows/Linux, la mayoría de nuestra gente). */ .esm-gal-visor{border:0;border-radius:0;padding:0;margin:0;width:100%;max-width:100%;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;background:#fff;overflow:hidden} .esm-gal-visor::backdrop{background:#fff} /* B1 (cerbero, pasada 1, Ronda 2) — SIN `[open]` esta regla de AUTOR gana SIEMPRE a la hoja * del agente de usuario (`dialog:not([open]){display:none}`), por origen de cascada, no por * especificidad: un `` cerrado se quedaba con `display:flex`, 353×585, visible al * pie de la página tras cerrarlo (medido en Chrome headless con el HTML real de ricixi). Con * `[open]` la regla de autor solo aplica mientras el diálogo está abierto, y al cerrar manda * la del agente de usuario: `display:none`, 0×0. */ .esm-gal-visor[open]{display:flex;flex-direction:column;position:relative} /* 4.12.4 — el «escenario»: lo que le queda al póster tras descontar el pie y el hueco del * botón Cerrar. Es también el contenedor de POSICIÓN de las flechas (antes vivían dentro del * `` entero): al vivir DENTRO de él nunca pueden caer sobre el pie, sea cual sea su * alto (un título a tres líneas en un móvil estrecho, H4). `flex:1 1 auto` + `min-height:0` * es lo que hace que ocupe TODO lo que sobra sin desbordar un flex column (sin `min-height:0` * un hijo flex nunca encoge por debajo de su contenido, y el pie empujaría el escenario fuera * de la pantalla). El padding dentro reserva sitio a las flechas y al botón Cerrar SIN que se * monten sobre el póster — la aritmética exacta está en el comentario de `.esm-gal-visor-nav` * y `.esm-gal-visor-cerrar`, más abajo. */ .esm-gal-visor-stage{position:relative;flex:1 1 auto;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;padding:72px 64px 8px;box-sizing:border-box} /* H3 (v4.13.0) — `hidden` con dientes DENTRO del visor. `.esm-gal-visor-img` fija * `display:block` en una regla de AUTOR, que gana a la hoja del agente de usuario * (`[hidden]{display:none}`): sin esta línea, `img.hidden=true` al abrir un PDF no escondía * nada y la imagen anterior se quedaba encima del marco del PDF. Mismo mecanismo de cascada * que ya documenta B1 unas líneas más arriba para el `` cerrado. */ .esm-gal-visor [hidden]{display:none!important} /* Salvaguarda menor (Ive) — sin mínimo, un `` que no llega a cargar (fichero borrado * tras la carga, URL caducada) se dibuja del tamaño diminuto del icono roto del navegador y * arrastra con él a los botones de cerrar/navegar, casi inservibles. Reducido de 260×180 * (v4.13.0) a 120×90: con el escenario ahora acotado por su propio padding, un mínimo grande * podía desbordarlo en un móvil muy estrecho. * 4.12.4 — el objetivo medible del encargo: «con una imagen vertical en un viewport 390x844, * la imagen debe ocupar más del 70% de la altura de la ventana». `max-height:100%` del propio * escenario (ya no un `70vh` fijo de un `` que a su vez topaba a `92vh`) es lo que lo * consigue: el póster ocupa TODO lo que el escenario le deja, y el escenario es la ventana * menos el pie y el hueco del botón Cerrar, no un tope arbitrario. */ /* H_blanco (v4.15, encargo Alejandro pasada 4: «el visor pasa a fondo blanco con letras * negras») — un póster con fondo blanco (la mayoría: un PDF exportado a imagen, un cartel * sobre papel) se FUNDE con el visor blanco y deja de leerse como objeto. Borde de 1px + * sombra para separarlo, el mismo recurso que ya usa la tarjeta de la rejilla. El * `background:var(--esm-public-color-fff,#fff)` es para un PNG con transparencia: sin él se vería el blanco del visor a * través y la sombra quedaría rodeando un hueco. * * CERBERO (pasada 5, MENOR 1) midió sobre el PÍXEL —no sobre el CSS— que el primer intento * (`var(--esm-public-color-d9d9d9,#d9d9d9)` + sombra al 12%) separaba el póster claro por **1,41:1**, cuando en producción * con el lightbox oscuro ese mismo borde daba 18,42:1. 1,41 es no verse. El borde sube a * `var(--esm-public-color-8a8a8a,#8a8a8a)` (**3,452:1** sobre blanco, medido con la fórmula WCAG; el primer gris que llega * al 3:1 de WCAG 1.4.11 es `var(--esm-public-color-949494,#949494)`, 3,033 — se coge uno más oscuro para no ir al límite) y * la sombra, de .12 a .18. Sigue siendo un marco discreto: es 1px. * ⚠️ Esto NO recupera los 18,42:1 de producción, y no puede: es el precio del fondo claro que * se pidió. Lo que se garantiza es que se VEA, no que se vea igual que antes. */ .esm-gal-visor-img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;min-width:120px;min-height:90px;object-fit:contain;margin:0 auto;background:var(--esm-public-color-fff,#fff);border:1px solid var(--esm-public-color-8a8a8a,#8a8a8a);box-shadow:0 2px 10px rgba(0,0,0,.18);box-sizing:border-box} /* H3 — el hueco del PDF: el visor NATIVO del navegador dentro del mismo , nunca una * librería externa ni un CDN (política del plugin: nativo y JS vanilla). Fondo * blanco porque un PDF con fondo transparente se lee fatal sobre cualquier otra cosa. * H_blanco (pasada 4) — con el visor ya en blanco, ese `background:var(--esm-public-color-fff,#fff)` dejó de marcar dónde * empieza el documento: mismo borde de 1px que la imagen, por el mismo motivo. * 4.12.4 — igual que la imagen, ocupa TODO lo que el escenario le deja (antes `70vh` fijo). */ .esm-gal-visor-doc{width:100%;height:100%;max-width:900px;max-height:100%;background:var(--esm-public-color-fff,#fff);border:1px solid var(--esm-public-color-8a8a8a,#8a8a8a);border-radius:6px;overflow:hidden;box-sizing:border-box} .esm-gal-visor-marco{display:block;width:100%;height:100%;border:0} /* H4 (histórico, 4.12.4) — el pie llevaba código, título, autor presentador y la línea de * «N de M» + escape en 4 líneas propias. Sustituido por H7 (v4.15, encargo Alejandro: * «que el pie… sea en las menores líneas posibles y responsive», sitios verticales «debe * verse perfecto»; ver H7 más abajo, sobre `.esm-gal-visor-linea1`). `flex:0 0 auto` — ocupa * justo lo que su contenido necesita; el escenario de arriba se encoge para dejarle sitio * siempre. */ .esm-gal-visor-pie{flex:0 0 auto;width:100%;padding:10px 16px 16px;text-align:center;box-sizing:border-box;border-top:1px solid var(--esm-public-color-e5e5e5,#e5e5e5)} /* CONFUNDE (STEVE, auditoría UX sobre 413) — mismo bug que el MENOR 6 que ya cerró la * tarjeta (`.esm-gal-card-body h3`/`-autor`/`-centro`, arriba): sin `overflow-wrap`/ * `word-break`, un título o una institución larga sin espacios desborda el pie en vez de * partirse. Reglas BASE, sin tocar (las mide `check-galeria-botones-visor.php` por su * selector exacto) — H7, más abajo, las sobrescribe SOLO para el layout de cod/autor dentro * de `.esm-gal-visor-linea1`, con selectores más específicos. */ /* H_naranja (v4.15, encargo Alejandro pasada 5: «el número del póster, en naranja oscuro»). * Medido con la fórmula WCAG 2.x sobre blanco: `var(--esm-public-color-9a4300,#9a4300)` da **6,610:1**, prácticamente lo * mismo que el `var(--esm-public-color-b3261e,#b3261e)` que sustituye (6,536:1), así que el cambio es de color, no de * legibilidad. Descartados por no llegar al 4,5 de AA: `var(--esm-public-color-cc5500,#cc5500)` (4,315) y `var(--esm-public-color-d2691e,#d2691e)` (3,633). * ⚠️ Solo cambia el código DENTRO DEL VISOR. El de la tarjeta de la rejilla * (`.esm-gal-card-cod`), el de la tabla (`.esm-gal-td-cod`) y la marca del PDF * (`.esm-gal-card-doc-marca`) siguen en `var(--esm-public-color-b3261e,#b3261e)`: no estaban en el encargo y no se tocan por * mi cuenta, pero queda dicho que ahora la galería usa dos rojos/naranjas distintos. */ .esm-gal-visor-cod{color:var(--esm-public-color-9a4300,#9a4300);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin:0 0 4px;overflow-wrap:break-word;word-break:break-word} .esm-gal-visor-titulo{color:var(--esm-public-color-111,#111);font-size:16px;text-align:left;padding:0;margin:0 0 4px!important;overflow-wrap:break-word;word-break:break-word} .esm-gal-visor-autor{color:var(--esm-public-color-333,#333);font-size:14px;margin:0 0 8px;overflow-wrap:break-word;word-break:break-word} /* H7 (v4.15, encargo Alejandro: fundir sin recortar nada. El TÍTULO se queda entero — * descartó explícitamente «ver más» y el pie plegable, no se reintroducen — y lo que se * funde es todo lo demás: código, autor presentador y el contador «N de M» comparten AHORA * una sola línea. (El enlace de escape a pestaña nueva vivía aparte, en su propio párrafo * `-meta`; los dos están retirados desde la pasada 4 — ver H3b, en el JS.) * * H7b (CERBERO, pasada 3 — la garantía ya NO depende de CUÁNDO se mida) — la primera versión * declaraba `flex-wrap:nowrap` a secas: cuando el autor ya había cedido a 0px (elipsis al * máximo) y AÚN ASÍ código+separadores+contador no cabían, no quedaba NADA que ceder, la * línea se salía y `overflow:hidden` de `.esm-gal-visor` la clipaba SIN scroll y SIN aviso — * escalera medida por CERBERO: con `galeria_campo_codigo` (texto libre del comité, * autodetectado) por encima de ~26 caracteres a 360px, código y contador quedaban fuera del * viewport. Alejandro ya lo había dicho: «si hay que envolver a dos líneas, envuelve — una * línea clipada es peor que dos líneas honestas». * * Las DOS primeras respuestas a eso —un tope de caracteres en PHP y un wrap de emergencia que * el JS activaba tras medir (`scrollWidth>clientWidth` → clase `--envuelve`)— están * RETIRADAS, y conviene saber por qué para no reintroducirlas: * 1. El tope contaba CARACTERES y la restricción es de PÍXELES (24 `W` con * `text-transform:uppercase` pesan un 36% más que 24 `X`), así que nunca fue una * garantía; con el CSS de abajo tampoco hace falta como estética. * 2. El wrap por JS hacía que la línea envolviera A TIEMPO, y el CSS que vivía bajo la clase * hacía que envolviera BIEN — pero el «bien» era rehén del «a tiempo». CERBERO (pasada 3) * midió en Chrome real dos caminos que cambian la métrica del texto DESPUÉS de la medida * y no disparan `loadingdone`, `resize` ni `orientationchange`: subir el tamaño de letra * del navegador con el visor abierto (contador 119,8px fuera del viewport) y cambiar la * familia tipográfica por CSS tardío sin cargar ninguna fuente (9px fuera). Cubrir más * disparadores no cierra esa clase; eliminar la medida, sí. * * Lo que hay HOY es SOLO CSS, sin JS de por medio, y lo decide el flexbox en CADA layout: * - AUTOR `flex:1 1 0` + `min-width:0`: base cero, así que es él quien cede primero (su * elipsis) mientras el código conserva su ancho natural. Con `flex:1 1 auto` el reparto * parte del ancho del nombre y `P.128` se marchaba a dos líneas. * - CÓDIGO `flex:0 1 auto` + `min-width:0` + `white-space:normal` + `overflow-wrap:anywhere`: * puede encoger por debajo de su ancho de contenido y partirse por cualquier punto. Medido: * cabe con 22/26/30/34 caracteres, con 24 `W` y 24 `M` (alfabeto ancho, con * `text-transform:uppercase` de por medio) y con 90 caracteres sin un solo espacio, a 320 y * a 360 de ancho. No se afirma nada de alfabetos que no se han probado (CJK, emoji): lo que * se afirma es que ya no depende de CUÁNDO se mida, que es lo que se pedía cerrar. * * Qué declaración carga con el peso, MEDIDO sabotaje a sabotaje (no deducido — y hay sorpresas, * así que no se toca ninguna «porque parece redundante» sin volver a medir): * - `flex:0 1 auto` en el código: devolverlo a `flex:0 0 auto` (lo de 4.14.0) desborda — * 21 asserts en rojo en el test de navegador. Es la declaración clave. (Ojo: `0 1 auto` es * ADEMÁS el valor inicial de `flex`; se escribe explícito para que se vea y para que el * sabotaje tenga algo que morder.) * - `white-space:normal` en el código: ponerlo en `nowrap` (lo de 4.14.0) desborda — 22 en * rojo. Clave también. * - `flex:1 1 0` en el autor: quitarlo o devolverlo a `flex:1 1 auto` parte `P.128` en dos * líneas — 6 en rojo. Clave. * - `overflow-wrap:anywhere` en el código NO es la pieza que parte la palabra: son TRES * declaraciones equivalentes y redundantes entre sí, y hacen falta las tres para que esto * desborde. Matriz medida entera (test de navegador, 130 comprobaciones; se corrió cada * combinación, no se dedujo ninguna): * · `overflow-wrap:anywhere` (esta regla) → quitarla sola: VERDE, 130/0 * · `word-break:break-word` (regla base `.esm-gal-visor-cod`) → sola: VERDE, 130/0 * · `overflow-wrap:break-word` (misma regla base) → sola: VERDE, 130/0 * · las tres parejas posibles → VERDE, 130/0 las tres * · LAS TRES a la vez → ROJO, 22 FALLO * O sea: cualquiera de las tres, por sí sola, sostiene el partido. Se conservan las tres a * propósito, cada una cubriendo a las otras, pero que quede escrito que ninguna es hoy * imprescindible por separado. (La versión anterior de este párrafo hablaba de DOS y citaba * «22 en rojo» copiando la cifra de `white-space:nowrap`, dos líneas más arriba: CERBERO lo * cazó en la pasada 4. La cifra de aquí sí está medida para esta combinación.) * - `min-width:0` en los dos hijos: tampoco es observable quitarlo hoy — medido, 130/0 solo y * 130/0 junto con `overflow-wrap:anywhere` (el autor ya tiene `overflow:hidden`, que por sí * solo pone su tamaño mínimo automático a 0; y el mínimo-contenido del código ya es de un * carácter por lo anterior). Con las tres de arriba quitadas ADEMÁS de estos dos, el rojo * sigue (21 FALLO). Se conserva como segunda línea si alguna de esas piezas cambia, y lo * vigila el check de FUENTE, no el de navegador. NO se afirma que sea imprescindible: se ha * medido que no lo es hoy. * ⚠️ Dos variantes MEDIDAS que NO valen: `flex:0 1 auto` solo en el código, sin tocar el * autor, parte `P.128` en dos líneas; `flex-shrink:0.001` en el código no cierra el desborde * (104,5px fuera con 24 `W`). * * H7c (CERBERO, BLOQUEANTE 2 — corrige una afirmación falsa de H7) — `min-width:0` en ESTE * contenedor (`.esm-gal-visor-linea1`) es INERTE: solo hace algo sobre un flex/grid ITEM, y * este `

` vive en flujo normal dentro de `.esm-gal-visor-pie`, que no es flex — por eso ya * no se declara aquí. Los `min-width:0` que SÍ hacen algo son los de los dos hijos (autor y * código), que anulan el `min-width:auto` automático que trae por defecto un flex item. * * H7d (CERBERO, MENOR 1 — decisión de diseño) — `justify-content:flex-start` en vez de * `center`: con `center`, el CÓDIGO cambiaba de sitio hasta 115px entre pósteres consecutivos * (autor largo vs. autor vacío) — justo el elemento que dice en qué póster estás. Con * `flex-start` el código queda anclado al margen izquierdo siempre; solo se mueve lo que hay * detrás de él. Mismo criterio en `.esm-gal-visor-titulo` (`text-align:left`, más abajo). * (La segunda razón que tuvo esta regla —que con `center` el desborde se repartía a los dos * lados y dejaba ciego al `scrollWidth` del JS por la izquierda en LTR— ya no aplica: no * queda JS que mida. Queda la de diseño, que es la que la sostiene.) * * Lo que NO cambia, contra lo que esta nota decía hasta la pasada 4: el sitio del contador. * Escribí aquí que con `flex:1 1 0` quedaba «anclado a la derecha, a diferencia de 4.14.0», y * es FALSO — `flex:1 1 auto` y `flex:1 1 0` comparten `flex-grow:1`, así que el autor se come * igual el hueco sobrante en las dos. Medido en Chrome real, mismo fixture, las dos variantes: * `contador.left` = 290,22 a 360px y 250,22 a 320px con autor presente, y 59,36 con el autor * vacío — IDÉNTICO en las dos. Lo que sí cambia es el reparto autor/código: con un código de * 20 caracteres a 320px el autor mide 9,55px con `flex:1 1 0` y 101,66px con `flex:1 1 auto`, * y es justo eso lo que deja al código sitio para no partirse. (El contador sí se mueve entre * pósteres —290px con autor, 59px sin autor—, pero eso pasa igual en las dos variantes: no es * efecto de este cambio.) * * Alcance de lo medido, sin prometer de más: lo de arriba está medido en Chrome real a * 320×568 y 360×740 (CERBERO pasada 3 y `tests/js/verificar-galeria-visor-pie-fusion.js`). * NO está medido en Firefox, ni en Safari, ni en dispositivos físicos. */ .esm-gal-visor-linea1{display:flex;flex-wrap:nowrap;align-items:baseline;justify-content:flex-start;margin:0 0 4px!important;font-size:13px;line-height:1.3} /* El código cede y se parte por donde haga falta — ver H7b. Sin clase, sin JS, sin instante * de medida del que depender. */ .esm-gal-visor-linea1 .esm-gal-visor-cod{flex:0 1 auto;min-width:0;margin:0;white-space:normal;overflow-wrap:anywhere} .esm-gal-visor-linea1 .esm-gal-visor-autor{flex:1 1 0;min-width:0;margin:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Separadores como elementos PROPIOS (no `::before` del autor): así la elipsis del nombre * recorta solo el nombre, nunca el punto que lo separa del resto. El de antes del autor se * oculta junto con él (`hidden`, ver el JS) cuando no hay presentador resuelto — «un dato * vacío se esconde, no deja un punto suelto» (mismo criterio que ya regía para el propio * dato, H4 de arriba). El del contador NUNCA se oculta: el contador siempre tiene texto, * aunque solo haya 1 póster («1 de 1»). */ .esm-gal-visor-linea1-sep{flex:0 0 auto;color:var(--esm-public-color-666,#666);margin:0 6px;font-weight:400;text-transform:none} .esm-gal-visor-contador{flex:0 0 auto;color:var(--esm-public-color-555,#555);font-size:13px;white-space:nowrap} /* 4.12.4 — botón Cerrar como la referencia: rojo (`var(--esm-public-color-dc3545,#dc3545)`, el mismo tono que midió * Alejandro), arriba a la derecha, con la palabra «Cerrar» además de la X (antes solo una X * gris translúcida — su queja literal: «poder cerrar arriba derecha con X cerrar boton»). * `aria-label` se mantiene (H_a11y, más abajo en el JS) aunque ahora también haya texto * visible. 48px de alto mantiene el área táctil ≥44px del [T6] de antes; el ancho lo da su * contenido (X + «Cerrar»), nunca por debajo de los 62px medidos en la referencia. * Aritmética con `.esm-gal-visor-stage`: top 15 + alto 48 = 63, +9 de margen = 72 → el * padding-top del escenario, para que el póster nunca quede debajo del botón. * * M4 (CERBERO, pasada 1, 4.12.4) — medido con un tema que pone `text-transform:uppercase` * en `button` (GeneratePress hijo y Avada, que es lo que lleva samiuc.es): el botón se leía * «×CERRAR». La causa es de CLASE, no de este único botón: es `