/* ==================================================================== * REPORTAR — el desplegable de «Reportar» y la banda de cuenta bloqueada. * * Paleta: solo azul, blanco y negro, de los tokens de tokens.css. Todos los * valores llevan respaldo entre paréntesis porque esta hoja se encola también * en pantallas donde tokens.css podría no haber cargado todavía (el bloque de * bloqueo sale en TODAS las páginas, incluidas las de cuenta). * * EL ESTADO NO SE DISTINGUE SOLO POR COLOR. El aviso de error lleva borde * grueso a la izquierda y el texto lo dice; el de acuse lleva fondo azul claro * Y la frase completa. Criterio 1.4.1 de la WCAG, y además la mitad de esta * audiencia lee el móvil con el sol de Texas dándole en la pantalla. * * SIN JAVASCRIPT. El desplegable es un

de HTML y el envío un

* de verdad; aquí no hay ni una clase que dependa de un guion. * ==================================================================== */ .lt-reportar { margin: 1rem 0 0; } /* Puesto por `get_footer`, el bloque queda como hijo directo de —justo después del de la plantilla—. Ahí necesita el contenedor del sitio o se pegaría al borde de la pantalla. Dentro de una respuesta del foro no entra por este selector y se queda compacto, que es lo que toca. */ body > .lt-reportar { max-width: var(--contenedor, 1240px); margin: 0 auto; padding: 0 var(--canal, 24px) clamp(32px, 5vw, 64px); } .lt-reportar__caja { border-top: 1px solid var(--linea, rgba(0, 0, 0, .12)); padding-top: .85rem; } /* ---------------------------------------------------------------- */ /* El disparador */ /* ---------------------------------------------------------------- */ .lt-reportar__abrir { /* 44 px reales de zona pulsable. Regla de la casa, y aquí importa el doble: está al lado de «Responder» y confundirlos manda a alguien a la cola de moderación sin querer. */ display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--linea, rgba(0, 0, 0, .22)); border-radius: var(--radio-pildora, 999px); background: transparent; color: var(--apagado, #5a5a5a); font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; /* El triángulo de serie del navegador se quita en los dos dialectos que existen; en su lugar va el signo de abajo, que es el mismo en todos. */ list-style: none; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; } .lt-reportar__abrir::-webkit-details-marker { display: none; } /* El signo dice si está abierto o cerrado SIN depender del color ni de una imagen: un «+» que pasa a «−». Se pinta con ::after para que el lector de pantalla no lo lea (ya anuncia el estado del

por su cuenta). */ .lt-reportar__abrir::after { content: "+"; font-size: 16px; line-height: 1; } .lt-reportar__caja[open] > .lt-reportar__abrir::after { content: "\2212"; /* signo menos, no un guion: el guion se lee como parte del texto */ } .lt-reportar__abrir:hover, .lt-reportar__abrir:focus-visible { background: var(--tinta, #0b1220); border-color: var(--tinta, #0b1220); color: var(--blanco, #fff); } .lt-reportar__abrir:focus-visible { outline: 3px solid var(--marca, #295091); outline-offset: 2px; } /* ---------------------------------------------------------------- */ /* El panel que se despliega */ /* ---------------------------------------------------------------- */ .lt-reportar__cuerpo { max-width: 46rem; margin-top: 1rem; padding: 1.1rem 1.2rem 1.3rem; border: 1px solid var(--marca-borde, #c3d3e8); border-radius: var(--radio-chico, 10px); background: var(--blanco, #fff); } .lt-reportar__aviso { margin: 0 0 1rem; padding: .7rem .9rem; border-left: 4px solid var(--marca, #295091); border-radius: 0 var(--radio-chico, 10px) var(--radio-chico, 10px) 0; background: var(--marca-claro, #e8eef7); color: var(--tinta, #0b1220); font-size: var(--fs-chico, .875rem); } /* El error se distingue por el borde NEGRO y grueso, no por un color de aviso: la paleta de este sitio es azul, blanco y negro, y el negro es lo que más destaca sobre el papel claro. */ .lt-reportar__aviso--mal { border-left-color: var(--tinta, #0b1220); border-left-width: 6px; background: var(--hueso-honda, #ebe5dc); font-weight: 600; } .lt-reportar__cuerpo:last-child .lt-reportar__aviso { margin-bottom: 0; } .lt-reportar__grupo { margin: 0 0 1rem; padding: 0; border: 0; } .lt-reportar__leyenda { padding: 0; margin: 0 0 .5rem; font-size: var(--fs-chico, .875rem); font-weight: 700; } /* Cada motivo es una fila entera pulsable de 44 px. Un radio de 20 px suelto en un teléfono se falla una de cada tres veces, y fallar aquí significa reportar por el motivo equivocado. */ .lt-reportar__opcion { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 2px 6px; border-radius: var(--radio-chico, 10px); cursor: pointer; } .lt-reportar__opcion:hover { background: var(--marca-claro, #e8eef7); } .lt-reportar__opcion input[type="radio"] { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--marca, #295091); } .lt-reportar__opcion:focus-within { outline: 3px solid var(--marca, #295091); outline-offset: 1px; } .lt-reportar__campo { margin: 0 0 1rem; } .lt-reportar__campo label { display: block; margin-bottom: .35rem; font-size: var(--fs-chico, .875rem); font-weight: 600; } .lt-reportar__texto { display: block; width: 100%; min-height: 96px; padding: 10px 12px; border: 1.5px solid var(--linea, rgba(0, 0, 0, .22)); border-radius: var(--radio-chico, 10px); background: var(--blanco, #fff); color: var(--tinta, #0b1220); font: inherit; font-size: 1rem; /* 16 px: por debajo, Safari en iOS hace zoom al enfocar */ line-height: 1.5; resize: vertical; } .lt-reportar__texto:hover { border-color: var(--marca, #295091); } .lt-reportar__texto:focus { border-color: var(--marca, #295091); outline: 3px solid var(--marca, #295091); outline-offset: 1px; } .lt-reportar__enviar { margin-top: .25rem; } .lt-reportar__nota { margin: .9rem 0 0; color: var(--apagado, #5a5a5a); font-size: var(--fs-chico, .875rem); line-height: 1.5; } /* ---------------------------------------------------------------- */ /* Dentro de una respuesta del foro */ /* ---------------------------------------------------------------- */ /* El botón cuelga del cuerpo de la respuesta, así que se separa con un filete y se apaga un punto más: es una acción secundaria dentro de una acción secundaria y no puede competir con «Responder». */ .lt-respuesta__cuerpo .lt-reportar { margin-top: .9rem; } .lt-respuesta__cuerpo .lt-reportar__abrir { min-height: 44px; padding: 0 14px; font-size: 12px; } /* ---------------------------------------------------------------- */ /* Sobre fondo oscuro */ /* ---------------------------------------------------------------- */ .lt-seccion--noche .lt-reportar__abrir, .lt-sobre-oscuro .lt-reportar__abrir { border-color: rgba(255, 255, 255, .45); color: var(--blanco, #fff); } .lt-seccion--noche .lt-reportar__abrir:hover, .lt-seccion--noche .lt-reportar__abrir:focus-visible, .lt-sobre-oscuro .lt-reportar__abrir:hover, .lt-sobre-oscuro .lt-reportar__abrir:focus-visible { background: var(--blanco, #fff); border-color: var(--blanco, #fff); color: var(--noche, #071324); } /* ==================================================================== * LA BANDA DE CUENTA BLOQUEADA * * Sale en TODAS las páginas, lo primero del , para que quien la tiene * bloqueada se entere ANTES de escribir y no después de mandar. No se puede * cerrar: no es un anuncio, es el estado de su cuenta. * ==================================================================== */ .lt-bloqueo { box-sizing: border-box; max-width: var(--contenedor, 1240px); margin: 0 auto; padding: 1rem var(--canal, 24px) 1.1rem; /* Negro sólido, no un rojo de alerta: la paleta del sitio no tiene rojo y esto además no es una alarma, es una explicación seria. */ background: var(--tinta, #0b1220); color: var(--blanco, #fff); font-size: var(--fs-chico, .875rem); line-height: 1.55; } .lt-bloqueo p { margin: 0 0 .4rem; max-width: 70ch; } .lt-bloqueo p:last-child { margin-bottom: 0; } .lt-bloqueo__titulo { font-size: 1rem; font-weight: 700; } .lt-bloqueo a { color: var(--blanco, #fff); text-decoration: underline; } .lt-bloqueo a:focus-visible { outline: 3px solid var(--blanco, #fff); outline-offset: 2px; } /* La misma frase, pegada encima del formulario de respuestas. Ahí no es una banda de página entera: es un párrafo dentro del hilo. */ .lt-bloqueo--suelto { max-width: 70ch; margin: 1rem 0; padding: .8rem 1rem; border-radius: var(--radio-chico, 10px); } @media (prefers-reduced-motion: reduce) { .lt-reportar__abrir { transition: none; } }