/* Copiado de wsc-marca/src/estilos/base/formas.css (4f300a7 2026-10-14) por web/traer-sistema.py. No se edita aquí: se cambia en el sistema y se vuelve a traer. */ /* Copiado de wsc-sistema/css/formas.css (02/10/2026). Sin las l. 6–16 (:root de forma) ni 155–246 (valores del botón principal): están en valores.css bloques 8 y 10. Sin el sello y la nota de la IA (l. 500–585): pasan con Sistema de diseño. Los valores (color, letra, espacio, forma, movimiento) están en ../valores.css: aquí solo hay reglas que usan sus nombres. Si cambias algo aquí, cambia la cara de todas las páginas. */ /* ========================================================================== WSC · Forma, trazo y componentes base Radio 4 px en todo (2 px en piezas < 12 px). Líneas de 1 px. Sin sombras. Todo color sale de los roles de color.css. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* ---- Foco común ---- */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--trazo-foco) solid var(--foco); outline-offset: var(--foco-sep); border-radius: var(--r); } /* ---- Separador ---- */ hr, .filete { border: 0; border-top: var(--trazo) solid var(--linea); margin: 0; } @media (min-resolution: 2dppx) { .filete.fino { border-top-width: .5px; } } /* ---- Iconos ---- */ .i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: var(--icono); stroke-linecap: butt; stroke-linejoin: miter; vertical-align: middle; } .i-16 { width: 16px; height: 16px; } .i-20 { width: 20px; height: 20px; } .i-24 { width: 24px; height: 24px; } .i-32 { width: 32px; height: 32px; } /* La flecha maestra gira para las 8 direcciones (grados en sentido horario desde →) */ .gira-45 { transform: rotate(45deg); } /* ↘ */ .gira-90 { transform: rotate(90deg); } /* ↓ */ .gira-135 { transform: rotate(135deg); } /* ↙ */ .gira-180 { transform: rotate(180deg); } /* ← */ .gira-225 { transform: rotate(225deg); } /* ↖ */ .gira-270 { transform: rotate(270deg); } /* ↑ */ .gira-315 { transform: rotate(315deg); } /* ↗ enlace a otra web */ /* ---- Botón ---- Tres piezas: el principal (.boton--primario), el secundario (.boton--secundario, de contorno) y el enlace suelto (.enlace-suelto). Dos tamaños: M (48 px) y S (.boton--s, 40 px). .boton pone la forma; el color lo pone la variante. La etiqueta se centra por su mayúscula (de la base a la altura de mayúscula), no por su línea: la Haas tiene mucho más ascendente que descendente (1,166 y 0,340 em) y, con la línea centrada, la mayúscula cae 1 px por debajo del centro. 2 px de relleno abajo la suben 1 px: en M queda centrada (0 px a 1x, 0,2 por encima a 2x) y en S, medio píxel por encima (a 1x su mayúscula mide 11 px, impar, en un botón de 40; a 2x, 0,34). Un número entero de píxeles, para que la base caiga siempre en el mismo píxel, esté donde esté el botón en la página. El icono baja ese píxel (top: 1px) y sigue centrado en el botón. Para cambiar el relleno de los lados, padding-inline: el de abajo no se toca. */ .boton { --b-fondo: var(--accion); --b-texto: var(--accion-texto); --b-borde: var(--accion); display: inline-flex; align-items: center; gap: var(--e-12); min-height: var(--alto-m); padding: 0 var(--e-24) 2px; border: var(--trazo) solid var(--b-borde); border-radius: var(--r); background: var(--b-fondo); color: var(--b-texto); font: inherit; font-size: 16px; line-height: 20px; letter-spacing: -0.01em; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--m-t2) var(--m-ui), border-color var(--m-t2) var(--m-ui), color var(--m-t2) var(--m-ui), transform var(--m-t1) var(--m-ui); } .boton .i { position: relative; top: 1px; transition: transform var(--m-t3) var(--m-ui); } .boton--s { min-height: var(--alto-s); padding: 0 var(--e-16) 2px; font-size: 15px; gap: var(--e-8); } .boton--s .i { width: 16px; height: 16px; } .boton--contorno, .boton--secundario { --b-fondo: transparent; --b-texto: var(--texto); --b-borde: var(--linea-control); } @media (hover: hover) { .boton:hover { --b-fondo: var(--accion-hover); --b-borde: var(--accion-hover); } .boton:is(.boton--contorno, .boton--secundario):hover { --b-fondo: transparent; --b-borde: var(--texto); } } .boton:active { --b-fondo: var(--accion-pulsado); transform: translateY(1px); } .boton:is(.boton--contorno, .boton--secundario):active { --b-fondo: transparent; --b-borde: var(--texto); } span.boton, div.boton { cursor: default; } /* Cargando: la etiqueta dice qué pasa («Enviando…») y aria-busy="true". Sin giros. */ .boton[aria-busy="true"] { cursor: progress; transform: none; } .boton:is(.boton--contorno, .boton--secundario)[aria-busy="true"] { --b-borde: var(--texto); } /* El botón no se deshabilita: si falta algo, se dice al pulsarlo. Si una pieza ajena lo pide, capa y texto terciario, nunca opacidad. */ .boton[aria-disabled="true"] { --b-fondo: var(--capa); --b-texto: var(--texto-3); --b-borde: var(--capa); cursor: not-allowed; transform: none; } /* ---- Botón principal: verde, letra blanca y una luz ---- .boton--primario (y su alias .boton--luz). Verde-700 con letra blanca (9,43:1). Una luz menta de 1 px recorre el borde: dos vueltas al aparecer y una al pasar el puntero; después se apaga (movimiento.css). Cada fondo pone sus valores: claro · verde-700; encima 800; pulsado 900; sin filo en reposo. oscuro · verde-700 con filo menta al 32 % (3,88:1 sobre casi negro); encima se aclara a verde-600: se separa un paso más del fondo. banda verde · verde-900 con filo menta al 64 % (3,55:1 sobre la banda): el botón no se funde con la banda. piedra (solo en claro) · sin menta: la acción de la piedra (Verde; en la banda oscura de piedra, dentro de una isla oscura, piedra-100) y sin luz. En el tema oscuro no hay piedra: la banda es neutra y el botón, el del tema oscuro, con su luz. sobre un pintado · transparente: sin relleno, filo de 1 px y su luz. Letra, filo y velo en --bpt-texto, --bpt-filo y --bpt-velo (bpt: botón principal transparente): en los claros, letra y filo verde-700; en los oscuros, letra blanca y filo neutro-200; en la piedra (en claro), letra y filo de su acción y sin luz, como toda la piedra. El velo es el color de la letra: encima, al --bpt-velo-a (12 %); pulsado, al --bpt-velo-p (18 %). Nunca un relleno. Un pintado que no aguanta ese velo con la letra a 4,5:1 baja los dos en css/pintados.css. Medido en el peor píxel de la zona del botón (c04/medir_boton.py): letra 4,5:1 o más, también encima y pulsado, y filo 3:1 o más. */ @property --luz-giro { syntax: ""; inherits: false; initial-value: 0deg; } @property --luz-cola { syntax: ""; inherits: false; initial-value: 100deg; } .boton--primario, .boton--luz { --b-fondo: var(--bp-fondo); --b-texto: var(--bp-texto); --b-borde: var(--bp-fondo); position: relative; isolation: isolate; } @media (hover: hover) { .boton:is(.boton--primario, .boton--luz):not([aria-disabled="true"]):hover { --b-fondo: var(--bp-encima); --b-borde: var(--bp-encima); } } .boton:is(.boton--primario, .boton--luz):not([aria-disabled="true"]):active { --b-fondo: var(--bp-pulsado); --b-borde: var(--bp-pulsado); } /* Sobre un pintado, transparente: el pintado se ve a través. Vale dentro de un .pintado y dentro de .sobre-pintado (cuando el pintado es una capa aparte, detrás del contenido). El filo es el borde: sin filo de reposo. */ :is(.pintado, .sobre-pintado) .boton:is(.boton--primario, .boton--luz):not([aria-disabled="true"]) { --b-fondo: transparent; --b-texto: var(--bpt-texto); --b-borde: var(--bpt-filo); --bp-reposo: transparent; } @media (hover: hover) { :is(.pintado, .sobre-pintado) .boton:is(.boton--primario, .boton--luz):not([aria-disabled="true"]):hover { --b-fondo: color-mix(in srgb, var(--bpt-velo) var(--bpt-velo-a), transparent); --b-borde: var(--bpt-filo); } } :is(.pintado, .sobre-pintado) .boton:is(.boton--primario, .boton--luz):not([aria-disabled="true"]):active { --b-fondo: color-mix(in srgb, var(--bpt-velo) var(--bpt-velo-p), transparent); --b-borde: var(--bpt-filo); } /* Filo de reposo (oscuro y banda verde) y, cargando, el filo entero encendido */ .boton--primario::before, .boton--luz::before { content: ""; position: absolute; inset: calc(-1 * var(--trazo)); border-radius: var(--r); border: var(--trazo) solid var(--bp-reposo); pointer-events: none; } .boton:is(.boton--primario, .boton--luz)[aria-busy="true"]::before { border-color: var(--bp-luz); } /* La luz: un tramo de 1 px con la cabeza en menta plena y la cola que se desvanece. Solo se ve mientras corre (movimiento.css anima --luz-giro, --luz-cola y opacidad). */ .boton--primario::after, .boton--luz::after { content: ""; position: absolute; inset: calc(-1 * var(--trazo)); border-radius: var(--r); padding: var(--trazo); background: conic-gradient(from var(--luz-giro), transparent, color-mix(in srgb, var(--bp-luz) 32%, transparent) calc(var(--luz-cola) * .5), color-mix(in srgb, var(--bp-luz) 80%, transparent) calc(var(--luz-cola) * .82), var(--bp-luz) calc(var(--luz-cola) * .94), var(--bp-luz) var(--luz-cola), transparent var(--luz-cola)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0; } .boton:is(.boton--primario, .boton--luz)[aria-disabled="true"]::before, .boton:is(.boton--primario, .boton--luz)[aria-disabled="true"]::after { display: none; } /* ---- Enlace suelto: la acción que no pide compromiso ---- Color de enlace y subrayado de puntos de 1 px; encima y pulsado, línea continua (con el dedo no hay encima: la línea responde al pulsar). Vale para y para Se ve como el valor que sustituye: su letra, su color, su tamaño y su línea. Con el puntero encima, el color del texto y un subrayado de 1 px. «Copiado» va en la misma celda que el HEX, que manda el ancho. La zona que responde, centrada en el valor y a su ancho, mide 24 de alto como mínimo con puntero y 44 con el dedo; donde los vecinos piden otra, la ajusta la sección. · El valor en su celda (s-04: las fichas, .fx-copia, y las tablas de equivalencias, .copia): el botón llena su fila o su celda, y copia también RGB, OKLCH, CMYK, Pantone y RAL. Con el puntero encima, un tinte de capa que sobresale 4 px. La zona mide 24 de alto como mínimo con puntero y 44 con el dedo (c04/css-fichas.css y c04/css-rampas.css). */ /* La letra y el color, los del valor: sin peso, para que .t-mono y la sección manden */ :where(.copiar-hex) { margin: 0; padding: 0; color: inherit; font: inherit; letter-spacing: inherit; text-align: start; } .copiar-hex { position: relative; display: inline-grid; justify-items: start; border: 0; border-radius: var(--r-s); background: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--m-t2) var(--m-ui); } .copiar-hex > :not(.solo-lector) { grid-area: 1 / 1; } .copiar-hex .copiado { visibility: hidden; color: var(--texto); font-family: var(--f-haas); } .copiar-hex[data-copiado] .copiar-v { visibility: hidden; } .copiar-hex[data-copiado] .copiado { visibility: visible; } .copiar-hex::after { content: ""; position: absolute; inset: min(0px, calc(50% - 12px)) 0; } @media (any-pointer: coarse) { .copiar-hex::after { inset-block: min(0px, calc(50% - 22px)); } } @media (hover: hover) { .copiar-hex:hover { color: var(--texto); } .copiar-hex:hover .copiar-v { text-decoration: underline; text-decoration-thickness: var(--trazo); text-underline-offset: var(--e-4); } } /* ---- Cuentagotas: copiar el HEX de una muestra ---- Toda muestra de color lleva data-muestra; especimen.js le pone un botón .cuentagotas con el icono cuentagotas que copia su HEX (#0C4F48). El icono va en blanco o en Tinta, el que más contraste da sobre la muestra (lo calcula el JS: --blanco, --tinta). Aparece al pasar el puntero o con el foco del teclado; en pantallas táctiles se ve siempre, discreto: al 80 %, que en toda la gama deja 3,31:1 o más. Dónde va lo dice data-cuentagotas en la muestra: · esquina: la muestra mide 44 × 44 o más. Botón de 44 × 44 arriba a la derecha, dentro de la muestra, que no lleva datos en esa esquina; el icono, de 20, a 8 px de los dos bordes. · entera: la muestra es más pequeña. El botón es la muestra entera, con 24 × 24 de zona como mínimo; en una tira de muestras que se tocan, su ancho y 44 de alto. El icono, de 16 y en el centro, si la muestra mide 24 × 24 o más; si no (--mini), sin icono. En una tira, el tramo de menos de 24 de ancho (--estrecha) no lleva botón en pantallas táctiles: se copia desde su ficha. · lado (lo pide el HTML: etiquetas): fuera, a 8 px a la derecha, en el gris del texto. · fila (lo pide el HTML: avisos): dentro, como última columna de la primera línea, en el gris del texto. · nombre (lo pide el HTML: muestra pequeña con su nombre al lado, en el mismo elemento, como en una leyenda): el botón abarca la muestra y el nombre, sin icono. Al copiar, el aviso «Copiado: #0C4F48» se ve 2 s abajo, con el color copiado. */ :where([data-muestra][data-cuentagotas]) { position: relative; } .cuentagotas { position: absolute; top: 0; right: 0; z-index: 1; display: grid; place-items: start end; inline-size: 44px; block-size: 44px; margin: 0; padding: var(--e-8); border: 0; border-radius: var(--r); background: transparent; color: var(--texto); font: inherit; line-height: 0; cursor: copy; opacity: .8; -webkit-tap-highlight-color: transparent; } .cuentagotas:focus-visible { z-index: 2; } .cuentagotas:focus-visible, .cuentagotas[data-hecho] { opacity: 1; } /* El trazo de la familia (el de .i), a 20 px */ .cuentagotas svg { display: block; inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: var(--icono); stroke-linecap: butt; stroke-linejoin: miter; pointer-events: none; } .cuentagotas--blanco { color: var(--cuentagotas-blanco); } .cuentagotas--tinta { color: var(--cuentagotas-tinta); } /* Copiado: el cuentagotas pasa a sí durante 1,2 s */ .cuentagotas .cuentagotas-hecho, .cuentagotas[data-hecho] .cuentagotas-icono { display: none; } .cuentagotas[data-hecho] .cuentagotas-hecho { display: block; } @media (hover: hover) and (pointer: fine) { .cuentagotas { opacity: 0; } [data-muestra]:hover > .cuentagotas, .cuentagotas:hover, .cuentagotas:focus-visible, .cuentagotas[data-hecho] { opacity: 1; } } @media (prefers-reduced-motion: no-preference) { .cuentagotas { transition: opacity var(--m-t2) var(--m-ui); } } /* Entera, lado y fila: el icono, en el centro del botón */ :is([data-cuentagotas="entera"], [data-cuentagotas="lado"], [data-cuentagotas="fila"]) > .cuentagotas { place-items: center; padding: 0; } /* Entera: el botón es la muestra (el foco la abraza); la zona que responde, centrada en ella, mide 24 × 24 como mínimo y, en una tira, su ancho y 44 de alto */ [data-cuentagotas="entera"] > .cuentagotas { top: 0; left: 0; right: auto; inline-size: 100%; block-size: 100%; border-radius: inherit; } [data-cuentagotas="entera"] > .cuentagotas::before { content: ""; position: absolute; top: 50%; left: 50%; inline-size: max(100%, 24px); block-size: max(100%, 24px); translate: -50% -50%; } [data-cuentagotas="entera"] > .cuentagotas--tira::before { inline-size: 100%; block-size: max(100%, 44px); } /* En la muestra pequeña, el icono de 16 (el de la nota), en el centro */ [data-cuentagotas="entera"] > .cuentagotas svg { inline-size: 16px; block-size: 16px; } /* Sin sitio para el icono: copiado, un filo de 2 px por dentro, en blanco o en Tinta */ .cuentagotas--mini .cuentagotas-icono, .cuentagotas--mini[data-hecho] .cuentagotas-hecho { display: none; } .cuentagotas.cuentagotas--mini[data-hecho] { outline: var(--trazo-foco) solid currentColor; outline-offset: calc(-1 * var(--trazo-foco)); } /* El tramo estrecho de una tira: sin botón con el dedo */ .cuentagotas--estrecha { display: none; } @media (hover: hover) and (pointer: fine) { .cuentagotas--mini:hover:not(:focus-visible, [data-hecho]) { outline: var(--trazo) solid var(--texto); outline-offset: 2px; } .cuentagotas--estrecha { display: grid; } } /* Lado: fuera de la muestra; el icono a 8 px de su borde */ [data-cuentagotas="lado"] > .cuentagotas { top: 50%; left: calc(100% - 4px); right: auto; translate: 0 -50%; color: var(--texto-2); } /* Fila: en la rejilla de la muestra, tras su última columna, centrada en una primera línea de 24 como el icono que abre el aviso; en el gris del texto, que no se confunde con el aviso (5,18:1 o más sobre sus fondos). La zona de 44 sale del botón */ [data-cuentagotas="fila"] > .cuentagotas { position: relative; top: auto; right: auto; color: var(--texto-2); grid-row: 1; grid-column: -1; align-self: start; inline-size: 20px; block-size: 20px; margin-block-start: 2px; } [data-cuentagotas="fila"] > .cuentagotas::before { content: ""; position: absolute; inset: -12px; } /* Nombre: el botón cubre el elemento que junta la muestra y su nombre (la entrada de la leyenda, la celda de la serie), con 24 de alto como mínimo; se señala con un filo que acaba a 5 px del contenido, como el del foco: 1 px encima, 2 px al copiar */ :where([data-muestra][data-cuentagotas="nombre"]) { position: static; } :where(:has(> [data-muestra][data-cuentagotas="nombre"])) { position: relative; } [data-cuentagotas="nombre"] > .cuentagotas { top: 0; left: 0; right: auto; inline-size: 100%; block-size: 100%; padding: 0; color: var(--texto); } [data-cuentagotas="nombre"] > .cuentagotas::before { content: ""; position: absolute; top: 50%; left: 0; inline-size: 100%; block-size: max(100%, 24px); translate: 0 -50%; } /* Con puntero y con teclado, el botón crece 24 px tras el nombre y el cuentagotas aparece ahí, a 16 px y dentro del filo; con el dedo, el nombre entero es el botón y el icono no se dibuja */ [data-cuentagotas="nombre"] > .cuentagotas svg { position: absolute; top: 50%; right: 0; inline-size: 16px; block-size: 16px; translate: 0 -50%; } [data-cuentagotas="nombre"] > .cuentagotas[data-hecho] { outline: var(--trazo-foco) solid currentColor; outline-offset: var(--foco-sep); } @media not ((hover: hover) and (pointer: fine)) { [data-cuentagotas="nombre"] > .cuentagotas svg { display: none !important; } } @media (hover: hover) and (pointer: fine) { [data-cuentagotas="nombre"] > .cuentagotas { inline-size: calc(100% + var(--e-24)); } [data-cuentagotas="nombre"] > .cuentagotas:hover:not(:focus-visible, [data-hecho]) { outline: var(--trazo) solid var(--texto); outline-offset: calc(var(--foco-sep) + 1px); } } /* El aviso a la vista: abajo, en la línea del margen, en negativo (Tinta y blanco en claro, al revés en oscuro), con el color copiado en un cuadro de 16 con filo */ .cuentagotas-aviso { position: fixed; z-index: 60; inset-block-end: calc(var(--e-16) + env(safe-area-inset-bottom, 0px)); /* Alineado con el margen del contenido: salta el menú lateral (--menu-visible, 0 sin menú) y mide con el ancho de la página (la ventana menos el menú; el 100 % es la ventana, porque el aviso va fijo). El margen es el de donde cuelga: dentro del lienzo, a cualquier profundidad, el del contenido; en body, el de la ventana, que es el mismo mientras el menú fijo deje al contenido en su tramo (256 desde 1280) */ inset-inline-start: calc(var(--menu-visible, 0px) + max(var(--margen), env(safe-area-inset-left, 0px), (100% - var(--menu-visible, 0px) - var(--contenedor)) / 2 + var(--margen))); display: flex; align-items: center; gap: var(--e-8); max-inline-size: calc(100% - var(--menu-visible, 0px) - 2 * var(--margen)); margin: 0; padding: var(--e-8) var(--e-12); border-radius: var(--r); background: var(--texto); color: var(--fondo); font-size: var(--t-nota); line-height: 20px; letter-spacing: 0; pointer-events: none; opacity: 0; } .cuentagotas-aviso[data-visible] { opacity: 1; } .cuentagotas-aviso-color { flex: none; inline-size: 16px; block-size: 16px; border: var(--trazo) solid currentColor; border-radius: var(--r); } .cuentagotas-aviso-valor { font-family: var(--f-mono); font-size: 12px; line-height: 16px; /* la línea de 20 no crece al mezclar las dos letras */ font-variant-numeric: tabular-nums; white-space: nowrap; } /* Receta «contextual»: sube 4 px en t3; se va con la curva de salida */ @media (prefers-reduced-motion: no-preference) { html[data-mov] .cuentagotas-aviso { translate: 0 var(--e-4); transition: opacity var(--m-t3) var(--m-va), translate var(--m-t3) var(--m-va); } html[data-mov] .cuentagotas-aviso[data-visible] { translate: 0 0; transition-timing-function: var(--m-ui); } } @media print { .cuentagotas, .cuentagotas-aviso { display: none; } } /* (02/10/2026) El bloque de la IA, de wsc-sistema/css/formas.css: lo usan Sistema de diseño › IA y la web. */ /* ---- IA: sello, nota y filete ---- El sello: «IA» en rótulo (12 px, 400, mayúsculas, +0,08 em) dentro de una caja de 24 × 24 con borde de 1 px en el color de acción. Las letras se centran por su tinta, no por su caja de texto: · En horizontal, el sangrado de −0,011 em iguala el aire de los dos lados: a la izquierda queda el apoyo de la I (0,095 em); a la derecha, el de la A (0,004 em) más el interletraje que el navegador añade tras la última letra (0,08 em). · En vertical, text-box recorta la línea a la altura de mayúscula y a la base (va en un inline-block y no en un grid porque text-box solo recorta las líneas de su propio bloque) y align-content la centra. El relleno de abajo (0,712 em − 8 px) la sube lo justo para que la base caiga a 16 px exactos del borde de arriba: la mayúscula (8,54 px) queda con 6,46 px de aire arriba y 7 abajo. Un número entero de píxeles porque el navegador redondea por separado la caja y la línea base: si la distancia entre las dos tuviera decimales, según dónde cayera el sello en la página las letras bajarían un píxel entero. Así quedan siempre igual, a 1x y a 2x. (El botón centra su contenido por su cuenta: por eso el ajuste va abajo y no arriba.) · Relleno 0 a los lados: el del botón del navegador (6 px) desplazaría las letras. · En un texto, la base del sello es la de la frase. */ .sello-ia { display: inline-block; text-align: center; align-content: center; width: 24px; height: 24px; padding: 0 0 calc(.712em - 8px); border: var(--trazo) solid var(--accion); border-radius: var(--r); background: transparent; color: var(--accion); font: inherit; font-size: var(--t-rotulo); line-height: 1; font-weight: var(--p-normal); letter-spacing: .08em; text-indent: -.011em; text-box: trim-both cap alphabetic; text-transform: uppercase; font-feature-settings: "case"; cursor: pointer; transition: background-color var(--m-t2) var(--m-ui), color var(--m-t2) var(--m-ui); } /* Sin text-box, la línea mide 1 em y su base cae a 0,913 em de arriba: el mismo cálculo da un relleno inferior de 0,826 em − 8 px */ @supports not (text-box: trim-both cap alphabetic) { .sello-ia { padding-bottom: calc(.826em - 8px); } } /* Sobre claro el verde de acción es #0C4F48 (texto 9,43); en oscuro, menta. */ @media (hover: hover) { .sello-ia:hover { background: var(--accion); color: var(--accion-texto); } } .sello-ia[aria-expanded="true"] { background: var(--accion); color: var(--accion-texto); } .nota-ia { position: relative; width: min(320px, 100%); padding: var(--e-24); border: var(--trazo) solid var(--linea-2); border-radius: var(--r); background: var(--fondo); display: grid; gap: var(--e-16); border-top: 0; /* el filete ocupa el lugar del borde superior */ overflow: hidden; } /* El filete de la IA: 1 px de un solo color en lo alto de la nota. Verde-700 en claro; menta en oscuro y sobre verde (la menta nunca va sobre claro). Se traza una vez al abrir la nota (.traza-filete, movimiento.css); sin JS, está entero. */ .nota-ia::before { content: ""; position: absolute; inset: 0 0 auto 0; height: var(--trazo); background: var(--verde-700); transform-origin: 0 50%; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nota-ia::before { background: var(--menta); } } :root[data-theme="dark"] .nota-ia::before, .isla-oscura .nota-ia::before, .banda-verde .nota-ia::before { background: var(--menta); } .isla-clara .nota-ia::before { background: var(--verde-700); } /* Luz de IA: aura menta al 10 %, solo sobre oscuro o verde y solo donde actúa un modelo */ .luz-ia { background: radial-gradient(120% 90% at 50% 100%, color-mix(in oklab, var(--menta) 10%, transparent) 0%, transparent 60%), var(--fondo); } .nota-ia dt { font-size: var(--t-rotulo); line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); } .nota-ia dd { font-size: var(--t-menor); line-height: 20px; margin: var(--e-4) 0 0; }