/* Theme Name: OPD Institucional Theme URI: https://saludtlax.gob.mx/ Description: Tema clasico institucional del O.P.D. Salud de Tlaxcala. Sin dependencias externas, disenado para renderizar contenido de Elementor. Escrito desde cero por la OTIC: ni una linea procede del servidor anterior. Author: OTIC - Oficina de Tecnologias de la Informacion y Comunicaciones Author URI: https://saludtlax.gob.mx/ Version: 1.2.1 Requires at least: 6.8 Tested up to: 7.0 Requires PHP: 8.2 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: opd-institucional Domain Path: /languages Tags: custom-menu, custom-logo, featured-images, translation-ready */ /* =========================================================================== Identidad institucional. Un solo sitio donde viven los colores. =========================================================================== */ :root { --violeta: #3F0E9E; --beige: #C9BC9C; --magenta: #A62A72; --naranja: #EF7F00; --granate: #B0122C; --azul: #5FB4D8; --verde: #66BC47; --fondo: #ffffff; --alterno: #f7f6f9; --texto: #241a33; --suave: #6b6478; --borde: #e6e2ec; --ancho: 1140px; --sobre-acento: #ffffff; /* Controles nativos (campo de busqueda, barras de desplazamiento) acordes al modo. La paleta oscura (OSCURO_BASE) lo cambia a 'dark'. */ color-scheme: light; } /* --------------------------------------------------------------------------- TRES ESTADOS: claro, oscuro y seguir al sistema. Sin data-tema en manda el sistema (identico a lo de siempre y unico estado posible sin JavaScript). Con data-tema, la eleccion explicita gana: sistema atributo resultado por que claro (ninguno) claro solo aplica el :root base (0,1,0) oscuro (ninguno) oscuro el media query aplica: :not() no bloquea oscuro data-tema="claro" claro el :not() excluye el bloque oscuro claro data-tema="oscuro" oscuro (0,2,0) gana al :root base (0,1,0) Las dos reglas oscuras nunca compiten entre si: el atributo no puede valer dos cosas a la vez. La paleta se emite dos veces pero su fuente unica es OSCURO_BASE en crear-tema.sh: editar ALLI. Sin light-dark(): en un navegador viejo la funcion desconocida invalida la declaracion entera y esos equipos PERDERIAN el oscuro que hoy si tienen. --------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { color-scheme: dark; --fondo: #14101c; --alterno: #1d1729; --texto: #ece8f2; --suave: #a99fbb; --borde: #2f2740; --violeta: #a78bfa; --magenta: #e07fb8; --sobre-acento: #14101c; } } :root[data-tema="oscuro"] { color-scheme: dark; --fondo: #14101c; --alterno: #1d1729; --texto: #ece8f2; --suave: #a99fbb; --borde: #2f2740; --violeta: #a78bfa; --magenta: #e07fb8; --sobre-acento: #14101c; } *, *::before, *::after { box-sizing: border-box; } /* ':root body' y no 'body': theme.json emitia ':root :where(body)' con especificidad (0,1,0), que a un 'body' pelado (0,0,1) le gana siempre. Ese bloque de theme.json se elimina en este mismo lote, pero (0,1,1) deja el cuerpo blindado tambien frente al kit de Elementor o a una emision futura del nucleo. */ :root body { margin: 0; background: var(--fondo); color: var(--texto); /* Tipografias del sistema: este servidor no tiene salida a Internet y la pagina tiene que verse igual desde una red cerrada. */ font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.65; -webkit-font-smoothing: antialiased; } a { color: var(--violeta); } a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; } img, video, iframe { max-width: 100%; height: auto; } /* El contenedor estrecho NO vive en la cabecera: encajonaria las paginas de ancho completo de Elementor. Vive en cada plantilla que lo necesita. */ .contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 1.25rem; } /* --- Salto al contenido, para teclado y lectores de pantalla ------------- */ .saltar { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--violeta); color: var(--sobre-acento); padding: .75rem 1.25rem; } .saltar:focus { left: 0; } /* --- Filo de los cuatro acentos del emblema ------------------------------ */ .filo { display: flex; height: 5px; } .filo span { flex: 1; } .filo :nth-child(1) { background: var(--naranja); } .filo :nth-child(2) { background: var(--granate); } .filo :nth-child(3) { background: var(--azul); } .filo :nth-child(4) { background: var(--verde); } /* --- Cabecera del sitio -------------------------------------------------- */ .sitio-cabecera { background: var(--fondo); border-bottom: 1px solid var(--borde); } .sitio-cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: 1rem; padding-bottom: 1rem; flex-wrap: wrap; } .marca { display: flex; align-items: center; gap: .9rem; text-decoration: none; color: inherit; } .marca img { max-height: 56px; width: auto; } .marca-texto .nombre { display: block; font-size: 1.15rem; font-weight: 700; color: var(--violeta); line-height: 1.2; } .marca-texto .lema { display: block; font-size: .8rem; color: var(--suave); } /* --- Menu ---------------------------------------------------------------- El selector distingue el nivel superior de los submenus: con un '.menu-principal ul' generico, los submenus heredan el flex del nivel de arriba y salen desplegados en linea, todos a la vez. Con menus de treinta entradas eso es un muro de enlaces. -------------------------------------------------------------------------- */ .menu-principal > ul { list-style: none; display: flex; flex-wrap: wrap; gap: .1rem 1.35rem; margin: 0; padding: 0; } .menu-principal li { position: relative; } .menu-principal a { display: block; padding: .45rem 0; text-decoration: none; color: var(--texto); font-weight: 500; font-size: .95rem; } .menu-principal a:hover { color: var(--violeta); } .menu-principal .current-menu-item > a, .menu-principal .current-menu-ancestor > a { color: var(--violeta); } .menu-principal > ul > .current-menu-item > a, .menu-principal > ul > .current-menu-ancestor > a { box-shadow: inset 0 -2px 0 var(--violeta); } /* Marca de que hay submenu */ .menu-principal .menu-item-has-children > a::after { content: ""; display: inline-block; margin-left: .4em; border: .3em solid transparent; border-top-color: currentColor; transform: translateY(.15em); } /* Desplegable. :focus-within lo hace utilizable con teclado sin JavaScript. */ .menu-principal .sub-menu { position: absolute; top: 100%; left: 0; z-index: 50; min-width: 15rem; margin: 0; padding: .4rem 0; list-style: none; background: var(--fondo); border: 1px solid var(--borde); border-radius: 8px; box-shadow: 0 8px 24px rgba(36, 26, 51, .14); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .12s ease, transform .12s ease; } .menu-principal li:hover > .sub-menu, .menu-principal li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; } .menu-principal .sub-menu a { padding: .45rem 1rem; font-size: .92rem; font-weight: 400; } .menu-principal .sub-menu a:hover { background: var(--alterno); } .menu-principal .sub-menu .menu-item-has-children > a::after { float: right; border-top-color: transparent; border-left-color: currentColor; transform: translateY(.35em); } /* Tercer nivel: se abre al lado, no debajo */ .menu-principal .sub-menu .sub-menu { top: -.4rem; left: 100%; } /* Los ultimos elementos del nivel superior abren hacia adentro para no salirse del borde derecho: el menu queda anclado a la derecha por el space-between de la cabecera, y el tercer nivel -que es el UNICO con URL real- se abria fuera del viewport entre 1280 y 1440px. Al desplazar para alcanzarlo se rompia la cadena de :hover y el menu se cerraba. (0,3,2) gana a '.menu-principal .sub-menu' (0,2,0); la variante de tercer nivel (0,4,2) gana a (0,3,0) y su 'right' mas especifico pisa el heredado. En movil los submenus son static y left/right no aplican. */ .menu-principal > ul > li:nth-last-child(-n+2) .sub-menu { left: auto; right: 0; } .menu-principal > ul > li:nth-last-child(-n+2) .sub-menu .sub-menu { left: auto; right: 100%; } /* En pantalla estrecha no hay hover fiable: se apila y se ve todo, con sangria para que se entienda la jerarquia. */ @media (max-width: 48rem) { .menu-principal > ul { flex-direction: column; gap: 0; width: 100%; } .menu-principal li { width: 100%; } .menu-principal a { padding: .55rem 0; border-bottom: 1px solid var(--borde); } .menu-principal .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; background: transparent; padding: 0 0 0 1.1rem; min-width: 0; } .menu-principal .menu-item-has-children > a::after { float: right; transform: translateY(.5em); } } /* --- Contenido ----------------------------------------------------------- */ main { display: block; } .entrada { padding: 2.5rem 0; } .entrada h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.2; margin: 0 0 .75rem; color: var(--violeta); } /* El violeta del h2 lo ponia theme.json, que en este lote pierde su bloque 'styles' por fijar colores claros sin variante oscura. Aqui, con var(--violeta), el aspecto en claro es el mismo y en oscuro conmuta a lavanda (6.89:1). El clamp separa h1 de h2 en movil: antes ambos acababan en el mismo cuerpo. h5 y h6 dejan de salir MENORES que el parrafo. */ .entrada h2 { font-size: clamp(1.3rem, 3vw, 1.5rem); margin: 2rem 0 .75rem; color: var(--violeta); } .entrada h3 { font-size: 1.2rem; margin: 1.5rem 0 .5rem; } .entrada h4 { font-size: 1.05rem; margin: 1.25rem 0 .5rem; } .entrada :is(h5, h6) { font-size: 1rem; margin: 1.25rem 0 .5rem; } .entrada h6 { color: var(--suave); } .meta { font-size: .85rem; color: var(--suave); margin-bottom: 1.5rem; } .destacada { margin: 0 0 1.5rem; } .destacada img { border-radius: 8px; } .lista-entradas { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; /* min(18rem, 100%): el minimo nunca excede el ancho disponible, asi que un movil de 320px no desborda. Un navegador sin min() descarta la declaracion entera y queda la columna unica de antes: nunca peor. */ grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); } .tarjeta { border: 1px solid var(--borde); border-radius: 10px; padding: 1.35rem; background: var(--fondo); } .tarjeta h2 { margin: 0 0 .4rem; font-size: 1.15rem; } .tarjeta h2 a { text-decoration: none; } .paginacion { margin: 2.5rem 0; display: flex; gap: .5rem; flex-wrap: wrap; } .paginacion .page-numbers { padding: .45rem .85rem; border: 1px solid var(--borde); border-radius: 6px; text-decoration: none; } .paginacion .current { background: var(--violeta); color: var(--sobre-acento); border-color: var(--violeta); } /* --- Buscador ------------------------------------------------------------ */ .buscador { display: flex; gap: .5rem; max-width: 28rem; } .buscador input[type="search"] { flex: 1; padding: .55rem .8rem; border: 1px solid var(--borde); border-radius: 6px; background: var(--fondo); color: var(--texto); font-size: 1rem; } .buscador button { padding: .55rem 1.1rem; border: 0; border-radius: 6px; background: var(--violeta); color: var(--sobre-acento); font-weight: 600; cursor: pointer; } /* El texto de sugerencia por omision de Chromium se queda en 4.07:1 en oscuro. El opacity: 1 anula ademas la transparencia que le mete Firefox. Resultado: 5.65:1 en claro, 7.46:1 en oscuro. */ .buscador input[type="search"]::placeholder { color: var(--suave); opacity: 1; } /* Respuesta al puntero de los controles con aspecto de boton. Con filter y no con un color fijo: funciona igual en claro (#3F0E9E) y en oscuro (#a78bfa). 'a.page-numbers' excluye a proposito el span .current, que no es un enlace. */ .paginacion a.page-numbers:hover { border-color: var(--violeta); color: var(--violeta); } .tarjeta h2 a:hover { text-decoration: underline; } @media (hover: hover) { .buscador button:hover { filter: brightness(1.12); } } .buscador button:active { filter: brightness(.9); } /* --- Pie ----------------------------------------------------------------- */ .sitio-pie { margin-top: 3rem; padding: 2rem 0 1.5rem; background: var(--alterno); border-top: 1px solid var(--borde); font-size: .88rem; color: var(--suave); } .sitio-pie p { margin: 0 0 .3rem; } .sitio-pie .lema-inst { margin-top: 1rem; font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--magenta); } @media (max-width: 48rem) { .sitio-cabecera .contenedor { justify-content: center; text-align: center; } /* Aqui vivia '.menu-principal ul { justify-content: center; gap: 1rem }'. Al ir despues en la hoja con la misma especificidad, pisaba el gap: 0 del menu movil apilado: 1rem de hueco por entrada con el borde inferior flotando, y con ~30 entradas eso son unos 480px de mas que desplazar en los equipos mas debiles. El justify-content, ademas, no hacia nada en un flex en columna. */ /* El conmutador es lo unico que acompana al menu en la cabecera: centrado con el resto y sin estirarse. */ .conmutador-tema { margin: .25rem auto 0; } } /* =========================================================================== TABLAS DE CONTENIDO --------------------------------------------------------------------------- Las matrices de indicadores son el contenido mas visitado de estos portales y hasta esta version el tema NO tenia ni una sola regla de tabla: lo que se veia era el estilo de fabrica del navegador (bordes 'outset' de 1px que vienen del atributo border="1" del HTML heredado del editor clasico). Todo cuelga de 'table' dentro de la lista de contextos, y no de la celda directamente, para dar (0,1,2) a las reglas de celda. El CSS del nucleo usa '.wp-block-table td', que es (0,1,1), y asi se le gana sin depender del orden de impresion de las hojas. '.elementor-widget-container' esta en la lista porque las plantillas Lienzo y Ancho completo de Elementor NO pasan por page.php, de modo que ahi no existe '.entrada' de la que colgar. =========================================================================== */ :root { --tabla-linea: #ded8e8; --tabla-cabecera: #3F0E9E; --tabla-cab-texto: #ffffff; --tabla-franja: #f6f4fa; --tabla-realce: #efeaf9; } /* Mismo patron de tres estados que las variables generales: si la paleta de tablas viajara solo por la media query, el oscuro FORZADO tendria las tablas claras. Fuente unica y explicacion de cada color: OSCURO_TABLA en crear-tema.sh. Editar ALLI. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --tabla-linea: #3a3152; --tabla-cabecera: #2b2140; --tabla-cab-texto: #ece8f2; --tabla-franja: #1c1629; --tabla-realce: #262038; } } :root[data-tema="oscuro"] { --tabla-linea: #3a3152; --tabla-cabecera: #2b2140; --tabla-cab-texto: #ece8f2; --tabla-franja: #1c1629; --tabla-realce: #262038; } /* Sin regla propia, figure.wp-block-table conserva el 'margin: 1em 40px' del navegador y se come 80px justo en las tablas mas anchas. */ :is(.entrada, .elementor-widget-container) figure.wp-block-table { margin: 1.75rem 0; } :is(.entrada, .elementor-widget-container) figure.wp-block-table > table { margin: 0; } :is(.entrada, .elementor-widget-container) figure.wp-block-table figcaption { margin-top: .5rem; font-size: .82rem; color: var(--suave); } :is(.entrada, .elementor-widget-container) table { width: 100%; margin: 1.75rem 0; /* 'separate' y no 'collapse': con los bordes colapsados el navegador ignora border-radius. Con border-spacing en cero el resultado es identico. */ border-collapse: separate; border-spacing: 0; border: 1px solid var(--tabla-linea); border-radius: 10px; overflow: hidden; background: var(--fondo); font-size: .875rem; line-height: 1.45; } :is(.entrada, .elementor-widget-container) table :is(th, td) { padding: .65rem .75rem; text-align: left; vertical-align: top; border-right: 1px solid var(--tabla-linea); border-bottom: 1px solid var(--tabla-linea); /* El tema no tenia NINGUNA regla de corte de palabra. Con texto largo en mayusculas (que no tiene minusculas donde romper y mide mas por caracter) una columna estrecha revienta o parte de una palabra por linea. */ overflow-wrap: break-word; hyphens: auto; } :is(.entrada, .elementor-widget-container) table tr > :last-child { border-right: 0; } /* Acotado a tbody: sin acotar tambien casaria la ultima fila de la cabecera y le quitaria su borde inferior cuando el thead tiene una sola fila. */ :is(.entrada, .elementor-widget-container) table tbody > tr:last-child > :is(th, td) { border-bottom: 0; } :is(.entrada, .elementor-widget-container) table thead > tr > :is(th, td) { background: var(--tabla-cabecera); color: var(--tabla-cab-texto); font-weight: 700; font-size: .78rem; letter-spacing: .04em; text-align: center; vertical-align: middle; border-right-color: rgba(255, 255, 255, .22); border-bottom: 0; } /* Cabecera de fila: tinte suave, nunca el violeta solido de la cabecera. */ :is(.entrada, .elementor-widget-container) table tbody th { background: var(--tabla-franja); font-weight: 700; } :is(.entrada, .elementor-widget-container) table tbody > tr:nth-child(even) { background: var(--tabla-franja); } @media (hover: hover) { :is(.entrada, .elementor-widget-container) table tbody > tr:hover { background: var(--tabla-realce); } } /* Celdas que solo llevan el icono de un documento: centradas y sin que la regla 'img { max-width: 100% }' de mas arriba las encoja. Acotado con :has() a la celda de icono; una grafica o una firma escaneada en otra celda conserva el comportamiento normal. */ :is(.entrada, .elementor-widget-container) table td:is(:has(> img), :has(> a > img), :has(> p > a > img)) { text-align: center; vertical-align: middle; white-space: nowrap; } :is(.entrada, .elementor-widget-container) table td:is(:has(> img), :has(> a > img), :has(> p > a > img)) img { width: auto; max-width: none; max-height: 2rem; vertical-align: middle; } :is(.entrada, .elementor-widget-container) table :is(th, td) a { color: var(--violeta); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } /* Sobre la cabecera violeta un enlace violeta seria invisible. */ :is(.entrada, .elementor-widget-container) table thead :is(th, td) a { color: var(--tabla-cab-texto); } /* El foco del tema usa outline-offset: 2px; dentro de una celda apretada se solapa con la celda vecina. */ :is(.entrada, .elementor-widget-container) table :is(th, td) a:focus-visible { outline-offset: 0; } /* Un enlace que en pantalla es solo un icono no tiene texto que leer. Se usa *=".pdf" y no $=".pdf" a proposito: este heredoc va SIN entrecomillar y un '$' de mas se lo lleva la expansion del shell. */ :is(.entrada, .elementor-widget-container) table :is(th, td) a[href*=".pdf" i]:has(img)::after { content: " PDF"; font-size: .68rem; font-weight: 700; letter-spacing: .06em; } /* Enlace ya visitado. En listas de decenas de PDF es la unica pista de por donde iba el lector, y hoy no existe ninguna: 'a { color: var(--violeta) }' anula tambien el morado por omision del navegador. OJO doble: (1) los navegadores IGNORAN var() dentro de :visited por privacidad, asi que van colores literales; (2) por eso mismo el oscuro necesita SUS DOS vias -sistema y forzado-, igual que las variables, o el oscuro elegido a mano mostraria el magenta claro sobre fondo oscuro. */ :is(.entrada, .elementor-widget-container) a:visited { color: #A62A72; } :is(.entrada, .elementor-widget-container) table thead :is(th, td) a:visited { color: #ffffff; } :is(.entrada, .elementor-widget-container) .paginacion a:visited { color: #3F0E9E; } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) :is(.entrada, .elementor-widget-container) a:visited { color: #e07fb8; } :root:not([data-tema="claro"]) :is(.entrada, .elementor-widget-container) table thead :is(th, td) a:visited { color: #ece8f2; } :root:not([data-tema="claro"]) :is(.entrada, .elementor-widget-container) .paginacion a:visited { color: #a78bfa; } } :root[data-tema="oscuro"] :is(.entrada, .elementor-widget-container) a:visited { color: #e07fb8; } :root[data-tema="oscuro"] :is(.entrada, .elementor-widget-container) table thead :is(th, td) a:visited { color: #ece8f2; } :root[data-tema="oscuro"] :is(.entrada, .elementor-widget-container) .paginacion a:visited { color: #a78bfa; } /* En una matriz de transparencia una celda vacia es un dato, no un descuido. */ :is(.entrada, .elementor-widget-container) table tbody td:empty::after { content: "\2014"; color: var(--suave); } :is(.entrada, .elementor-widget-container) table caption { caption-side: top; text-align: left; padding: 0 0 .6rem; font-size: .95rem; font-weight: 700; color: var(--violeta); } /* '.entrada h2' y '.entrada h3' son descendientes: un titulo pegado dentro de una celda se llevaria sus 2rem de margen superior. */ :is(.entrada, .elementor-widget-container) table :is(th, td) :is(h1, h2, h3, h4, h5, h6) { font-size: 1em; margin: 0 0 .3rem; } :is(.entrada, .elementor-widget-container) table :is(th, td) p { margin: 0 0 .4rem; } :is(.entrada, .elementor-widget-container) table :is(th, td) > :last-child { margin-bottom: 0; } /* Nueve columnas no caben en un movil. Por debajo de 64rem la tabla pasa a caja desplazable y las celdas reciben un ancho minimo para que no se compriman hasta lo ilegible; por encima, el navegador reparte solo. */ @media (max-width: 64rem) { :is(.entrada, .elementor-widget-container) table { display: block; max-width: 100%; overflow-x: auto; } :is(.entrada, .elementor-widget-container) table :is(th, td) { min-width: 7rem; } :is(.entrada, .elementor-widget-container) table tr > :first-child { min-width: 5rem; } } /* Estas matrices se imprimen para expediente. */ @media print { :is(.entrada, .elementor-widget-container) table { display: table; overflow: visible; font-size: 9pt; border-color: #000; border-radius: 0; } /* Misma especificidad que la regla base y posterior en la hoja: gana por orden, sin necesidad de !important. */ :is(.entrada, .elementor-widget-container) table thead > tr > :is(th, td) { background: #eaeaea; color: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; } :is(.entrada, .elementor-widget-container) table tbody > tr:nth-child(even) { background: transparent; } :is(.entrada, .elementor-widget-container) table :is(th, td) { border-color: #000; min-width: 0; } /* Repite la cabecera en cada hoja y evita partir una fila por la mitad. */ :is(.entrada, .elementor-widget-container) table thead { display: table-header-group; } :is(.entrada, .elementor-widget-container) table tr { break-inside: avoid; } } /* =========================================================================== CONMUTADOR CLARO / OSCURO / AUTO --------------------------------------------------------------------------- Radios nativos dentro de un fieldset: tres estados excluyentes sin una sola linea de ARIA. El navegador pone el teclado (UNA parada de tabulador, flechas dentro del grupo) y el anuncio al lector de pantalla ("Oscuro, boton de opcion, 2 de 3"). Un aria-pressed o un role=switch modelan DOS estados, y aqui hay tres reales. Nace con [hidden] y lo destapa el guion del pie: sin JavaScript no hay persistencia posible, asi que el control ni aparece y manda el sistema. =========================================================================== */ .conmutador-tema { display: flex; align-items: center; gap: .15rem; margin: 0; padding: .2rem; border: 1px solid var(--borde); border-radius: 999px; background: var(--alterno); } /* El display flex de arriba mataria el atributo hidden con el que nace el control: hidden no es mas que un display:none de la hoja del navegador. (0,2,0) contra (0,1,0): gana siempre. */ .conmutador-tema[hidden] { display: none; } /* Leyenda y radios ocultos SOLO visualmente: la leyenda nombra el grupo y los radios conservan foco y teclado. SIN !important: el bloque de contraste forzado de mas abajo tiene que poder destaparlos por orden. */ .conmutador-tema legend, .conmutador-tema input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* min-height 2.75rem = 44px: objetivo tactil AAA (2.5.5), no solo el AA. */ .conmutador-tema .opcion { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; padding: .3rem .8rem; border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--suave); cursor: pointer; -webkit-user-select: none; user-select: none; } .conmutador-tema .opcion svg { width: 1em; height: 1em; flex: none; } .conmutador-tema label:hover .opcion { color: var(--texto); } /* Pastilla activa: var(--violeta) sobre var(--fondo) rinde 11.88:1 en claro (blanco sobre #3F0E9E) y 6.89:1 en oscuro (#14101c sobre #a78bfa). NUNCA un '#fff' fijo: blanco sobre lavanda cae a 2.72:1, la misma trampa ya documentada en la cabecera de las tablas. Va DESPUES del :hover: a igual especificidad (0,3,1), el estado marcado gana por orden. */ .conmutador-tema input:checked + .opcion { background: var(--violeta); color: var(--fondo); } /* :focus a secas y no :focus-visible: los radios se operan con flechas (siempre teclado) y en un navegador viejo sin :focus-visible el anillo desapareceria. Un anillo de mas es molestia; uno de menos, una barrera. */ .conmutador-tema input:focus + .opcion { outline: 3px solid var(--magenta); outline-offset: 2px; } /* Contraste forzado (Windows): los fondos desaparecen y con ellos la marca de seleccion. Se destapan los radios nativos, que el sistema pinta con sus propios colores. Misma especificidad (0,1,1) que la regla de ocultacion: gana por ir despues en la hoja. */ @media (forced-colors: active) { .conmutador-tema input { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; } .conmutador-tema input:checked + .opcion { background: transparent; } } /* El movimiento se pide, no se quita. */ @media (prefers-reduced-motion: no-preference) { .conmutador-tema .opcion { transition: background-color .15s ease, color .15s ease; } } /* Un control de pantalla no pinta nada en papel. */ @media print { .conmutador-tema { display: none; } }