/* ───────────────────────────────────────────────────────────────────────────── Hoja de las pantallas que no extienden base.html. La portada pública y sus hijas, los dos accesos, los manuales y el modelo económico: 16 plantillas con su propio ``, que hasta el Paso 1 cargaban `cdn.tailwindcss.com` cada una por su cuenta. Es una hoja aparte, y no la de la aplicación, porque estas pantallas hoy reciben solo Tailwind: sin DaisyUI, sin el puente de temas y sin la escala de tamaños de letra propia. Darles `estilos.css` les cambiaría el aspecto. Se construye con `npm run estilos`, junto con la otra. Ver [[arquitectura/spec-rediseno-interfaz]]. ───────────────────────────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────────────────────────── IBM Plex — GENERADO, no editar a mano. Lo genera `scripts/descargar_fuentes.py`. Los .woff2 viven en static/fuentes/ y se sirven desde este mismo servidor: la aplicación tiene que verse igual con la red cortada, que es como está media aula. Aquí solo se declaran las familias. Aplicarlas es del Paso 2 — el Paso 1 no cambia el aspecto de nada. IBM Plex, licencia SIL Open Font License 1.1. ───────────────────────────────────────────────────────────────────────────── */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fuentes/ibm-plex-sans-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fuentes/ibm-plex-sans-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fuentes/ibm-plex-sans-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fuentes/ibm-plex-sans-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fuentes/ibm-plex-mono-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fuentes/ibm-plex-mono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fuentes/ibm-plex-mono-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fuentes/ibm-plex-mono-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fuentes/ibm-plex-mono-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fuentes/ibm-plex-mono-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fuentes/ibm-plex-condensed-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fuentes/ibm-plex-condensed-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Las ocho paletas. Hacen falta aquí desde que los dos accesos usan papel oscuro: sin ellas, `data-theme` no define nada y los tokens caen en su valor de reserva, que es claro. No cambian nada más — estas pantallas no usan ninguna clase que lea `--color-*`. */ /* ───────────────────────────────────────────────────────────────────────────── Los ocho temas — cuatro tintas de sello × dos papeles. Sustituyen a las 35 paletas de DaisyUI que el Paso 1 dejó congeladas en `temas-heredados.css`. Los nombres de variable son los mismos a propósito: `componentes-heredados.css` sigue dando `.btn`, `.card` y las otras 51 clases a las 53 pantallas que todavía no han pasado por el Cuaderno, y esas clases leen de aquí. Cambiar la paleta sin cambiar los componentes es justo lo que permite migrar hoy y repintar después. **De las 23 variables que la hoja compilada consume de verdad, solo seis cambian de un tema a otro**: las cuatro de papel y las dos de tinta. Las demás están abajo, en un bloque común, con los valores exactos que traían. No es pereza: en DaisyUI ya eran idénticas entre `light` y `dark` —está comprobado leyendo las dos paletas congeladas— y son semánticas, no de marca. Un error es rojo en los ocho temas. Tocarlas cambiaría el aspecto de las pantallas sin repintar, que es lo único que esta migración no puede hacer. La correspondencia con los 18 valores guardados vive en `domain/temas.py`. Ver [[arquitectura/spec-rediseno-interfaz]]. ───────────────────────────────────────────────────────────────────────────── */ /* ══ Lo común a los ocho ═══════════════════════════════════════════════════ Semántica y forma. Heredados tal cual: son los valores que ya servía la aplicación, y mantenerlos es lo que garantiza que las pantallas todavía sin repintar no se muevan. */ :root, [data-theme^="indigo-"], [data-theme^="verde-"], [data-theme^="rosa-"], [data-theme^="ambar-"] { --color-secondary: oklch(65% .241 354.308); --color-secondary-content: oklch(94% .028 342.258); --color-accent: oklch(77% .152 181.912); --color-accent-content: oklch(38% .063 188.416); /* Oscuro en los dos papeles, y a propósito: el navbar sale de aquí. Puesto claro se volvía casi blanco y se comía la cabecera. */ --color-neutral: oklch(14% .005 285.823); --color-neutral-content: oklch(92% .004 286.32); --color-info: oklch(74% .16 232.661); --color-info-content: oklch(29% .066 243.157); --color-success: oklch(76% .177 163.223); --color-success-content: oklch(37% .077 168.94); --color-warning: oklch(82% .189 84.429); --color-warning-content: oklch(41% .112 45.904); --color-error: oklch(71% .194 13.428); --color-error-content: oklch(27% .105 12.094); --radius-selector: .5rem; --radius-field: .25rem; --radius-box: .5rem; --size-selector: .25rem; --size-field: .25rem; --border: 1px; --depth: 1; --noise: 0; } /* ══ El papel ══════════════════════════════════════════════════════════════ Dos juegos, cuatro variables cada uno. `base-200` es la hoja, `base-100` la ficha que se pega encima, `base-300` lo hundido, `base-content` la tinta del texto. El papel oscuro no es el claro invertido: la ficha es *más clara* que la hoja en los dos, porque una ficha pegada sobre una hoja recibe más luz. Invertir esa relación en oscuro hundía la ficha y deshacía el gesto. */ :root, [data-theme="indigo-claro"], [data-theme="verde-claro"], [data-theme="rosa-claro"], [data-theme="ambar-claro"] { color-scheme: light; --color-base-100: #ffffff; --color-base-200: #fbfaf7; --color-base-300: #f3f1ec; --color-base-content: #1c1917; } [data-theme="indigo-oscuro"], [data-theme="verde-oscuro"], [data-theme="rosa-oscuro"], [data-theme="ambar-oscuro"] { color-scheme: dark; --color-base-100: #24211e; --color-base-200: #1a1816; --color-base-300: #302c28; --color-base-content: #f5f3f0; } /* ══ La tinta ══════════════════════════════════════════════════════════════ La señal de identidad de la institución, y lo único de marca que hay aquí. Sobre papel claro la tinta es oscura; sobre papel oscuro es luz. Son la misma familia y distinto color a propósito: una institución «índigo» se ve azul profundo en claro y azul lavanda en oscuro. Si alguien reporta que «cambió el color de mi universidad», es esto. Contrastes medidos contra su propio papel el 14-ago: índigo 10,9 / 8,2 · verde 8,7 / 9,6 · rosa 7,7 / 9,4 · ámbar 6,8 / 11,2. WCAG pide 4,5 para texto y 3,0 para elementos de interfaz. */ :root, [data-theme="indigo-claro"] { --color-primary: #312e81; --color-primary-content: #ffffff; } [data-theme="verde-claro"] { --color-primary: #14532d; --color-primary-content: #ffffff; } [data-theme="rosa-claro"] { --color-primary: #9f1239; --color-primary-content: #ffffff; } [data-theme="ambar-claro"] { --color-primary: #92400e; --color-primary-content: #ffffff; } [data-theme="indigo-oscuro"] { --color-primary: #a5b4fc; --color-primary-content: #1a1816; } [data-theme="verde-oscuro"] { --color-primary: #6ee7b7; --color-primary-content: #1a1816; } [data-theme="rosa-oscuro"] { --color-primary: #fda4af; --color-primary-content: #1a1816; } [data-theme="ambar-oscuro"] { --color-primary: #fcd34d; --color-primary-content: #1a1816; } /* ───────────────────────────────────────────────────────────────────────────── Capa de tokens — Cuaderno de laboratorio. El vocabulario visual del rediseño, en un solo sitio. Papel, tinta, tinta de sello y sombra dura. **Declarados, todavía sin usar.** El Paso 1 no repinta nada: su condición de aceptación es que las pantallas se vean exactamente igual que antes. Estas variables existen para que el Paso 2 tenga dónde apoyarse y para que la gama se discuta ahora, mirándola escrita, y no a mitad del repintado. Nada de aquí se referencia todavía desde una plantilla. Si algún día una de estas variables cambia el aspecto de una pantalla del Paso 1, es un fallo. Ver [[arquitectura/spec-rediseno-interfaz]]. ───────────────────────────────────────────────────────────────────────────── */ :root { /* ══ De dónde salen los colores, mientras dure la transición ══════════════ Los tokens **no llevan valores fijos**: se derivan del tema activo. El primer intento sí los fijaba en claro, y se rompía en cuanto la institución tenía un tema oscuro: el papel se quedaba blanco mientras el resto de la pantalla iba en oscuro, y había texto que no se leía. Cuatro de las seis instituciones de producción están en ese caso. Derivándolos, el Cuaderno hereda el tema que haya —los 35 heredados de DaisyUI incluidos— y el contraste se sostiene solo. Lo que aporta el Cuaderno es la **forma**: la rejilla, el sello girado, la sombra dura, las cifras en Mono. El color lo pone todavía el tema. Cuando caiga la migración de `ui_theme` a las 4 tintas × 2 papeles, estas variables pasan a tener valor propio y este puente desaparece. El valor de reserva de cada una es el del Cuaderno, para que nada quede sin color si falta el tema. ═══════════════════════════════════════════════════════════════════════ */ /* ── Papel ────────────────────────────────────────────────────────────── El fondo. La rejilla milimetrada se dibuja con gradientes sobre estos tonos, sin una sola imagen. */ --papel: var(--color-base-200, #fbfaf7); /* hoja */ --papel-hundido: var(--color-base-300, #f3f1ec); /* margen, zonas rebajadas */ --papel-realce: var(--color-base-100, #ffffff); /* ficha sobre la hoja */ /* Rejilla: 22 px la fina, 110 px la gruesa (una gruesa cada cinco finas). Se dibuja con la propia tinta a muy baja opacidad, así vale igual sobre papel claro que sobre papel oscuro. */ --rejilla-fina: color-mix(in oklab, var(--tinta) 6%, transparent); --rejilla-gruesa: color-mix(in oklab, var(--tinta) 11%, transparent); --rejilla-paso-fino: 22px; --rejilla-paso-grueso: 110px; /* ── Tinta ────────────────────────────────────────────────────────────── El texto. Tres pesos, no una escala de grises entera: el cuaderno se escribe con una pluma, no con seis. Los dos tonos flojos se mezclan con el papel, así que se aclaran u oscurecen con él. */ --tinta: var(--color-base-content, #1c1917); --tinta-suave: color-mix(in oklab, var(--tinta) 78%, var(--papel-realce)); /* 45% era más bonito y no llegaba: medido sobre nueve temas daba entre 2,2 y 3,7 de contraste, por debajo del 4,5 que pide un texto. Y los rótulos son texto, no decoración. A 74% pasan los once temas medidos. */ --tinta-tenue: color-mix(in oklab, var(--tinta) 74%, var(--papel-realce)); /* ── Trazo ────────────────────────────────────────────────────────────── Reglas y bordes. Tres pesos, y la diferencia entre los dos primeros no es estética: es de accesibilidad. `--trazo` es la regla que separa —filas de tabla, indicadores, el pie de un rótulo—. Es decoración: lo que hay que leer es el texto, no la línea, y WCAG no le pide contraste. Medido, da 1,6 sobre papel claro y 2,0 sobre oscuro, y así está bien: una regla de cuaderno es fina. `--trazo-control` es el borde que dibuja un control. Ahí la línea sí es información —es lo que dice dónde acaba el botón— y WCAG 1.4.11 pide 3,0. El 45% sale de medirlo: da 3,1 sobre papel claro y 4,0 sobre oscuro, con margen en los ocho temas. Con `--trazo` a secas el botón de usuario se quedaba en 1,6 y el borde no se veía. */ --trazo: color-mix(in oklab, var(--tinta) 22%, var(--papel-realce)); --trazo-control: color-mix(in oklab, var(--tinta) 45%, var(--papel-realce)); --trazo-marcado: var(--tinta); /* ── Rojo de texto ────────────────────────────────────────────────────── `--color-error` vale para un fondo, no para un texto: medido sobre los ocho temas da 2,74 sobre papel claro, y un texto pide 4,5. Tirándolo hacia la tinta un 35% se hunde en claro y se aclara en oscuro —la tinta es oscura en uno y luz en el otro— así que pasa en los ocho sin ramificar. Solo para texto. El fondo de una barra o de un semáforo sigue usando `--color-error` a secas, que ahí es donde se ve bien. */ --tinta-peligro: color-mix(in oklab, var(--color-error) 65%, var(--tinta)); /* ── Tinta de sello ───────────────────────────────────────────────────── La identidad de la institución. Cuatro tintas × claro y oscuro, elegidas el 14-ago. Hasta que exista la migración, el sello sale del `primary` del tema activo, así cada institución ya se distingue. Pero el `primary` de un tema heredado no garantiza contraste contra su propio fondo: medido, `emerald` y `black` daban 1,6 y el sello desaparecía. Se tira del primary hacia la tinta, que conserva el tono de la institución y asegura que se lea. Con las 4 tintas propias este apaño sobra, porque entonces el par tinta/papel se elige junto. */ --sello: color-mix(in oklab, var(--color-primary, #312e81) 52%, var(--tinta)); --sello-tenue: color-mix(in oklab, var(--sello) 12%, transparent); --sello-contraste: var(--papel-realce); /* ── Sombra dura ──────────────────────────────────────────────────────── Es información, no adorno: sombra dura significa «aquí decides tú». Va solo en fichas de decisión. Indicadores, canales y tablas van planos, y por eso no hay aquí ninguna sombra difusa que invite a repartirla. */ --sombra-dura: 3px 3px 0 0 var(--trazo-marcado); --sombra-dura-honda: 5px 5px 0 0 var(--trazo-marcado); /* ── Tipografía ───────────────────────────────────────────────────────── Las familias las declara `fuentes.css`; aquí solo se les da nombre de oficio. Las cifras van en Mono para que las columnas de números cuadren —hoy no cuadran— y los rótulos de ficha en Condensed. */ --letra-texto: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif; --letra-cifra: 'IBM Plex Mono', ui-monospace, monospace; --letra-rotulo: 'IBM Plex Sans Condensed', 'IBM Plex Sans', sans-serif; } /* Los componentes del Cuaderno. Solo pintan donde se usan sus clases, así que añadirlos no mueve las pantallas que aún no se han repintado: se comprobó comparando la hoja compilada antes y después. Lo que estas pantallas NO reciben sigue igual: ni el puente de temas ni la escala de letra propia. Los tokens caen en su valor de reserva —papel claro, tinta índigo— que es exactamente lo que quiere una página pública. */ /* ───────────────────────────────────────────────────────────────────────────── El Cuaderno de laboratorio — componentes. Aquí vive el rediseño de verdad. Todo lleva prefijo `cu-` y no comparte una sola clase con lo que había, para que se pueda repintar pantalla a pantalla sin que una cosa se cuele en la otra. Se apoya en los tokens de `tokens.css`, que hasta ahora estaban declarados y sin usar. **Convive con lo viejo, y eso es a propósito.** Mientras queden pantallas sin repintar, los componentes nuevos leen los tokens del Cuaderno y el resto sigue leyendo las variables heredadas de DaisyUI. Se unifica cuando caiga la migración de `ui_theme`. Ver [[arquitectura/spec-rediseno-interfaz]]. ───────────────────────────────────────────────────────────────────────────── */ /* ── El papel ──────────────────────────────────────────────────────────────── Doble rejilla con gradientes: 22 px la fina y 110 px la gruesa, una gruesa cada cinco finas. Ni una imagen — se sirve sin pedir nada a nadie. Lleva `!important` porque el bloque heredado de base.html fuerza `body { background: transparent !important }`. Es una muleta con fecha de caducidad: se quita cuando el puente de temas desaparezca. */ body.cu-hoja { background-color: var(--papel) !important; background-image: linear-gradient(var(--rejilla-fina) 1px, transparent 1px), linear-gradient(90deg, var(--rejilla-fina) 1px, transparent 1px), linear-gradient(var(--rejilla-gruesa) 1px, transparent 1px), linear-gradient(90deg, var(--rejilla-gruesa) 1px, transparent 1px) !important; background-size: var(--rejilla-paso-fino) var(--rejilla-paso-fino), var(--rejilla-paso-fino) var(--rejilla-paso-fino), var(--rejilla-paso-grueso) var(--rejilla-paso-grueso), var(--rejilla-paso-grueso) var(--rejilla-paso-grueso) !important; background-position: -1px -1px !important; color: var(--tinta) !important; font-family: var(--letra-texto); } /* ── Rótulos ───────────────────────────────────────────────────────────────── Versalitas en Condensed. Es el tono de voz de la pantalla: nombra las cosas sin gritar. */ .cu-rotulo { font-family: var(--letra-rotulo); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--tinta-tenue); display: block; } /* ── Cifras ────────────────────────────────────────────────────────────────── Mono tabular. Arregla un defecto real: hoy las columnas de números no cuadran porque cada dígito ocupa distinto. */ .cu-cifra { font-family: var(--letra-cifra); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } /* De Mono se cargan 400, 500 y 600, y `font-bold` de Tailwind pide 700: el navegador resolvía a la cara de 500 y la engordaba él. Esa negrita falsa deforma el dibujo —el cero de «35/50» dejaba de parecerse al de la fecha de al lado, que va en 400— y la delata precisamente el cero, que en Mono lleva barra. Con 600 hay glifo de verdad y los ceros vuelven a ser el mismo. Va con dos clases para ganar a la utilidad sin tocar las plantillas. */ .cu-cifra.font-bold, .cu-cifra.font-semibold { font-weight: 600; } /* ── La cabecera ───────────────────────────────────────────────────────────── Una banda fina sobre papel, no un bloque de color. */ .cu-cabecera { background: var(--papel-realce); border-bottom: 2px solid var(--trazo-marcado); } .cu-cabecera-fila { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 11px 0; } .cu-nombre-equipo { font-size: 16px; font-weight: 600; color: var(--tinta); } .cu-nav { display: flex; align-items: center; gap: 16px; margin-left: auto; flex-wrap: wrap; } .cu-nav a, .cu-nav button { font-family: var(--letra-rotulo); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); text-decoration: none; background: none; border: 0; padding: 2px 0; border-bottom: 2px solid transparent; cursor: pointer; transition: color .12s, border-color .12s; } .cu-nav a:hover, .cu-nav button:hover { color: var(--tinta); border-bottom-color: var(--trazo); } .cu-nav .act { color: var(--tinta); border-bottom-color: var(--sello); font-weight: 600; } /* ── Etiquetas de contexto ─────────────────────────────────────────────────── Rótulos con filete, no píldoras de color. El nivel va marcado porque es lo único de la franja que cambia lo que la pantalla deja hacer. */ .cu-contexto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 0 10px; } .cu-etiqueta { display: inline-flex; align-items: center; font-family: var(--letra-rotulo); font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-suave); border: 1px solid var(--trazo); padding: 3px 9px; min-width: 0; } .cu-etiqueta.marcada { color: var(--tinta); border-color: var(--trazo-marcado); } .cu-etiqueta.nivel { background: var(--sello); color: var(--sello-contraste); border-color: var(--sello); letter-spacing: .12em; } /* ── Lo que sube el usuario ────────────────────────────────────────────────── Regla única: la imagen del usuario no se tiñe, no se redondea y no lleva sombra. Va sobre cartulina blanca con filete y con margen. El filete es nuestro; el color es suyo. La cartulina se queda blanca también sobre papel oscuro: una lámina pegada en el cuaderno no cambia porque la hoja sea negra. */ .cu-carton { background: #fff; border: 1px solid var(--trazo-marcado); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } /* `:where(img)` y no `img` a secas: con `.cu-emblema img` la regla pesa más que una utilidad de una sola clase y le ganaba a `.hidden`, así que la plantilla pedía ocultar el `` vacío del respaldo y salía igualmente un icono de imagen rota junto a la inicial. Con `:where` la utilidad manda, que es lo que se espera de una utilidad. */ .cu-membrete { padding: 7px 11px; } .cu-membrete :where(img) { display: block; height: 38px; width: auto; max-width: 220px; -o-object-fit: contain; object-fit: contain; } .cu-emblema { width: 44px; height: 44px; padding: 3px; } .cu-emblema :where(img) { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; display: block; } .cu-emblema-grande { width: 72px; height: 72px; padding: 5px; } .cu-emblema-grande :where(img) { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; display: block; } /* La foto del producto, dentro de una ficha de decisión. */ .cu-foto { width: 80px; height: 80px; padding: 4px; } .cu-foto :where(img) { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; } .cu-foto-img { width: 80px; height: 80px; -o-object-fit: cover; object-fit: cover; flex-shrink: 0; background: #fff; border: 1px solid var(--trazo-marcado); padding: 4px; } /* Sin imagen: rayado con la inicial. Nunca un emoji. El papel de aquí es blanco fijo, como el del cartón que lo envuelve, así que la inicial y el rayado también van fijos: con `--tinta-tenue` y `--trazo` la tinta se aclaraba en los cuatro temas oscuros y la inicial quedaba en 2,0:1 sobre el blanco —y el rayado, invisible—. Son las mismas fórmulas que esos dos tokens, ancladas a la tinta del papel claro en vez de a la del tema. */ .cu-sinimagen { width: 100%; height: 100%; background-color: #fff; background-image: repeating-linear-gradient(45deg, color-mix(in oklab, #1c1917 22%, #fff) 0 1px, transparent 1px 7px); display: flex; align-items: center; justify-content: center; font-family: var(--letra-rotulo); font-weight: 600; font-size: 17px; color: color-mix(in oklab, #1c1917 74%, #fff); text-transform: uppercase; } /* El emblema de un catálogo cerrado: una plantilla de producto, un sector de servicio. Es la misma cartulina, pero con un dibujo en vez de una letra. La inicial servía mientras el catálogo era corto. Con trece plantillas y trece sectores en la misma pantalla las letras chocan —«Laptops» y «Legal», «Consultoría» y «Clínica»—, y el choque cambia con el idioma, así que no hay reparto que aguante los cuatro. Encima la inicial no dice nada: hay que leer el nombre de al lado para saber qué es la tarjeta, que es el trabajo que el emblema tendría que ahorrar. Sin el rayado del hueco vacío: aquí no falta una foto, hay un dibujo. Va en la tinta plena y no en la tenue porque es lo que se mira primero. Esa tinta plena es la del papel claro, fija, y no la del tema: el icono siempre va dentro de un `.cu-carton`, que es blanco en los ocho. Con `var(--tinta)` los trece iconos del catálogo se aclaraban sobre ese blanco en los cuatro temas oscuros y quedaban en 1,1:1 — dibujados, pero invisibles. Mismo motivo que en `.cu-sinimagen`. */ .cu-icono { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #1c1917; } .cu-icono svg { width: 74%; height: 74%; display: block; } /* ── Acción secundaria ─────────────────────────────────────────────────────── Descargar el Excel, volver, imprimir. No es una decisión de la simulación —esas llevan sombra dura— así que va plana, con el borde de control y la tinta del texto. En verde y con fondo, como estaba, competía con el sello. `--trazo-control` y no `--trazo` porque es un control: su borde es lo que dice dónde acaba, y ahí WCAG pide 3,0. */ .cu-accion { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; background: transparent; border: 1px solid var(--trazo-control); color: var(--tinta); font-family: var(--letra-rotulo); font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: border-color .12s, background .12s; } .cu-accion:hover { border-color: var(--trazo-marcado); background: var(--papel-hundido); } /* Botón de usuario de la cabecera. */ .cu-boton-usuario { display: flex; align-items: center; gap: 9px; padding: 5px 11px; background: transparent; /* Es un control: su borde es lo que dice dónde acaba, y WCAG pide 3,0. Con `--trazo` se quedaba en 1,6 y no se veía. */ border: 1px solid var(--trazo-control); color: var(--tinta); cursor: pointer; transition: border-color .12s, background .12s; } .cu-boton-usuario:hover { border-color: var(--trazo-marcado); background: var(--papel-hundido); } .cu-boton-usuario .inicial { width: 26px; height: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--sello); color: var(--sello-contraste); font-family: var(--letra-rotulo); font-weight: 600; font-size: 13px; } .cu-boton-usuario .nombre { display: block; font-size: 12.5px; font-weight: 600; max-width: 160px; } /* ── La tira de identificación ───────────────────────────────────────────── */ .cu-tira { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; padding: 15px 0 14px; border-bottom: 1px solid var(--trazo); } .cu-dato { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .cu-dato b { font-size: 15px; font-weight: 600; color: var(--tinta); } .cu-dato .cu-cifra { font-size: 15px; font-weight: 500; letter-spacing: .06em; } /* ── El sello ──────────────────────────────────────────────────────────────── El estado del período. Girado, con el doble filete de un sello de tinta de verdad, y en la tinta de la institución. Es lo único girado de la pantalla, y por eso se ve antes que nada. El color no codifica el estado — lo dice la palabra de dentro. Un período cerrado o pendiente se sella en tinta apagada: sigue siendo un sello, pero no reclama atención. */ .cu-sello { transform: rotate(-6deg); border: 2px solid var(--sello); outline: 1px solid var(--sello); outline-offset: 2px; color: var(--sello); background: var(--sello-tenue); padding: 7px 16px 6px; text-align: center; font-family: var(--letra-rotulo); text-transform: uppercase; display: inline-block; } .cu-sello .estado { display: block; font-size: 17px; font-weight: 600; letter-spacing: .17em; line-height: 1; } .cu-sello .periodo { display: block; font-size: 10.5px; letter-spacing: .2em; margin-top: 4px; opacity: .8; } .cu-sello.apagado { border-color: var(--tinta-tenue); outline-color: var(--tinta-tenue); color: var(--tinta-tenue); background: transparent; } /* ── Indicadores — planos ──────────────────────────────────────────────────── Sin caja, sin sombra, sin esquina redonda: solo un filete que los separa y la cifra. La sombra significa «aquí decides tú», y aquí solo se lee. El único color es el rojo de una cifra en negativo. Eso es una señal, no un adorno. */ .cu-indicadores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--trazo); margin: 20px 0 4px; } .cu-ind { display: block; padding: 15px 18px 14px; border-right: 1px solid var(--trazo); min-width: 0; /* Cuando el indicador es un enlace —el panel de admin los usa como accesos— un es inline por defecto y el padding vertical no se sostiene. */ text-decoration: none; color: inherit; transition: background .12s; } a.cu-ind:hover { background: var(--papel-hundido); } .cu-ind:last-child { border-right: 0; } .cu-ind .valor { display: block; margin-top: 7px; font-size: 25px; font-weight: 500; letter-spacing: -.02em; color: var(--tinta); } .cu-ind .valor.alerta { color: var(--tinta-peligro); } .cu-ind .pie { display: block; margin-top: 5px; font-size: 12px; color: var(--tinta-tenue); } .cu-ind .pie b { font-weight: 500; color: var(--tinta-suave); } .cu-ind .marca { display: inline-block; width: 7px; height: 7px; background: var(--sello); margin-right: 7px; vertical-align: 1px; } /* Una cifra en cero no merece la misma tinta que una que dice algo. */ .cu-ind.en-cero .valor { color: var(--tinta-tenue); } .cu-ind.en-cero .marca { background: var(--trazo); } @media (max-width: 860px) { .cu-indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cu-ind:nth-child(2) { border-right: 0; } } /* ── El panel ──────────────────────────────────────────────────────────────── Un bloque de lectura: un rótulo y lo que sea —una tabla, una gráfica, una lista—. Es lo más repetido de la pantalla de resultados, veinticuatro veces. Plano a propósito. Antes cada uno era `bg-white rounded-xl shadow-sm border border-gray-100`: esquina redonda y sombra difusa, las veinticuatro veces. Con la sombra repartida por todas partes deja de decir nada, y en el Cuaderno la sombra tiene un significado —«aquí decides tú»— que solo se sostiene si la llevan únicamente las fichas de decisión. Resultados no decide nada: se lee. Lo que separa un panel del siguiente es el aire y una línea, no una caja. */ .cu-panel { background: var(--papel-realce); border: 1px solid var(--trazo); padding: 20px 22px 18px; margin: 0 0 22px; } .cu-panel > .cu-seccion { margin-bottom: 14px; } /* Los rankings llevaban además un degradado y un borde de dos píxeles en ámbar, esmeralda o violeta según la tabla. El color no decía cuál era: lo dice el título. Lo que sí hay que poder señalar es *tu* fila, y para eso está `.cu-tabla tr.tuyo` más abajo. */ .cu-panel.destacado { border-color: var(--trazo-marcado); } /* ── Secciones y tablas ────────────────────────────────────────────────────── Un rótulo con una regla debajo, y la tabla. Planas las dos: aquí se lee. Las cifras van a la derecha y en Mono tabular, que es lo que hace que una columna de números se pueda comparar de un vistazo. Hoy no se puede: cada dígito ocupa distinto y las cifras bailan. */ .cu-seccion { font-family: var(--letra-rotulo); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .13em; color: var(--tinta-suave); display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; } .cu-seccion .apunte { color: var(--tinta-tenue); font-weight: 400; letter-spacing: .04em; text-transform: none; } .cu-tabla { width: 100%; border-collapse: collapse; margin-top: 2px; } .cu-tabla th, .cu-tabla td { padding: 9px 4px; border-bottom: 1px solid var(--trazo); } .cu-tabla th { font-family: var(--letra-rotulo); font-size: 11px; font-weight: 600; text-align: left; text-transform: uppercase; letter-spacing: .13em; color: var(--tinta-tenue); border-bottom-color: var(--trazo-marcado); } .cu-tabla td { color: var(--tinta); font-size: 14.5px; } .cu-tabla th.n, .cu-tabla td.n { text-align: right; } .cu-tabla td.n { font-family: var(--letra-cifra); font-variant-numeric: tabular-nums; font-size: 15px; letter-spacing: -.01em; } .cu-tabla tbody tr:last-child td { border-bottom: 0; } .cu-tabla tr.total td { border-top: 2px solid var(--trazo-marcado); font-weight: 600; } /* Tu fila en un ranking. Es la única de la tabla que hay que poder encontrar sin leerla, así que se marca con una barra de tinta al margen y peso, no con un fondo de color: el fondo ámbar o esmeralda cambiaba con la tabla y no quería decir nada, y sobre papel oscuro no se veía. */ /* El puesto en un ranking. Eran 🥇🥈🥉 para los tres primeros y un número del cuarto en adelante: dos formas de decir lo mismo en la misma columna. Ahora es siempre el número, y el podio va en la tinta de la institución. */ .cu-puesto { font-family: var(--letra-cifra); font-variant-numeric: tabular-nums; font-size: 14px; color: var(--tinta-tenue); } .cu-puesto.podio { color: var(--sello); font-weight: 500; } .cu-tabla tr.tuyo td { font-weight: 600; } .cu-tabla tr.tuyo td:first-child { box-shadow: inset 3px 0 0 0 var(--sello); } .marca-tuyo { margin-left: 7px; padding: 1px 6px; font-family: var(--letra-rotulo); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; background: var(--sello); color: var(--sello-contraste); } /* Apuntes al margen: los datos sueltos que acompañan a una tabla. */ .cu-apuntes { display: flex; flex-wrap: wrap; gap: 6px 22px; padding-top: 11px; font-size: 13px; color: var(--tinta-suave); } .cu-apuntes b { font-weight: 500; color: var(--tinta); } /* ── Plegable ──────────────────────────────────────────────────────────────── Sin caja de color ni flecha de fábrica: el rótulo y una marca discreta. */ .cu-plegable { margin: 26px 0 4px; } .cu-plegable > summary { cursor: pointer; list-style: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; border-bottom: 1px solid var(--trazo-marcado); padding-bottom: 6px; display: flex; align-items: baseline; gap: 9px; } .cu-plegable > summary::-webkit-details-marker { display: none; } .cu-plegable > summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid var(--tinta-tenue); border-bottom: 1.5px solid var(--tinta-tenue); transform: rotate(45deg) translateY(-2px); transition: transform .15s; } .cu-plegable[open] > summary::after { transform: rotate(-135deg) translateY(-2px); } .cu-plegable > summary:hover::after { border-color: var(--tinta); } /* ── La barra de pestañas ──────────────────────────────────────────────────── Ocho pestañas que eran ocho emojis de 20 px con su nombre debajo: 📊 📰 📣 👥 🏭 🚚 💰 🌎. Ahora son rótulos, y la activa se marca con la tinta de la institución. Se navega leyendo, no adivinando qué significa el dibujo. */ .cu-pestanas { background: var(--papel-realce); border-bottom: 1px solid var(--trazo-marcado); } /* Tres nombres para lo mismo: `.maintab-btn` en el panel, `.tab-btn` en resultados y `.tab` en plan. Cada uno viene del JavaScript de su plantilla, y renombrarlos es tocar código que funciona para ganar un nombre. Se listan los tres; cuando las 51 pantallas que faltan estén repintadas se unifican de una vez. */ .cu-pestanas .maintab-btn, .cu-pestanas .tab-btn, .cu-pestanas .tab { /* Que no se aplasten: la barra scrollea, las pestañas no encogen. El contenedor es un flex con `overflow-x: auto`, y un elemento de flex encoge por defecto. Con el `min-width: 60px` que trae el \3c style> heredado de la plantilla, las ocho pestañas se aplastaban a exactamente 60 px en un móvil de 375 y el rótulo se salía del botón: se leía «NOTICIASMARKETINGRRHH», unos encima de otros. Medido a 375, cada pestaña quiere entre 69 y 130 px. `flex: 0 0 auto` les devuelve su ancho y deja que sobre el ancho — que es justo para lo que el contenedor tiene el scroll horizontal. */ flex: 0 0 auto; font-family: var(--letra-rotulo); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-tenue); background: none; border: 0; border-bottom: 3px solid transparent; padding: 13px 16px 11px; cursor: pointer; white-space: nowrap; transition: color .12s, border-color .12s; } .cu-pestanas .maintab-btn:hover, .cu-pestanas .tab-btn:hover, .cu-pestanas .tab:hover { color: var(--tinta); } .cu-pestanas .maintab-btn.act, .cu-pestanas .tab-btn.act, .cu-pestanas .tab.act { color: var(--tinta); border-bottom-color: var(--sello); } /* ═══ LA FICHA — SOMBRA DURA ═════════════════════════════════════════════════ El gesto que da sentido a todo lo demás. **La sombra es información, no adorno: significa «aquí decides tú».** Por eso la llevan solo las áreas de decisión, y por eso indicadores, canales y tablas van planos. Si la sombra se reparte, deja de decir nada — que es exactamente lo que pasaba antes, cuando la llevaban las once cajas de la pantalla. La pestaña rotulada remata la idea: una ficha de archivador donde se anota. ═══════════════════════════════════════════════════════════════════════════ */ .cu-ficha { position: relative; display: block; background: var(--papel-realce); border: 1.5px solid var(--trazo-marcado); box-shadow: var(--sombra-dura-honda); padding: 22px 22px 20px; margin: 44px 0 26px; } .cu-pestana { position: absolute; top: -1.5px; left: -1.5px; transform: translateY(-100%); background: var(--trazo-marcado); color: var(--papel); font-family: var(--letra-rotulo); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; padding: 5px 13px 4px; white-space: nowrap; } /* El título del área. Antes llevaba un emoji dentro de un cuadrado de color. */ .cu-ficha-titulo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--trazo); font-size: 19px; font-weight: 600; color: var(--tinta); } /* ── Dentro de la ficha ────────────────────────────────────────────────────── 55 campos y 39 rótulos repartidos por siete áreas. No se tocan uno a uno: se les da el tono desde aquí, colgando de `.cu-ficha`. Editar a mano ese volumen de marcado es de donde salieron tres averías el 10-ago. El campo deja de ser una caja redondeada y pasa a ser una línea sobre la que se escribe — como en un formulario de papel. Y la cifra, en Mono tabular. */ .cu-ficha .input-field { background: transparent; border: 0; border-bottom: 2px solid var(--tinta); border-radius: 0; padding: 3px 2px 5px; color: var(--tinta); font-family: var(--letra-cifra); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 500; letter-spacing: -.01em; } .cu-ficha .input-field:focus { outline: 0; border-bottom-color: var(--sello); box-shadow: 0 2px 0 0 var(--sello); } .cu-ficha select.input-field { font-family: var(--letra-texto); font-size: 15px; } .cu-ficha textarea.input-field { font-family: var(--letra-texto); font-size: 15px; } .cu-ficha .label-sm { font-family: var(--letra-rotulo); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--tinta-tenue); opacity: 1; } /* Las cajas de color pastel que envolvían cada grupo de campos. En el Cuaderno el color lo pone la tinta de la institución, no un fondo por área. Se apagan desde aquí en vez de reescribir 127 sitios. Rojo y ámbar se quedan fuera de la lista a propósito: ahí el color sí avisa de algo —saldo en rojo, aviso de riesgo— y apagarlo sería perder la señal. */ .cu-ficha [class*="bg-blue-50"], .cu-ficha [class*="bg-blue-100"], .cu-ficha [class*="bg-indigo-50"], .cu-ficha [class*="bg-indigo-100"], .cu-ficha [class*="bg-violet-50"], .cu-ficha [class*="bg-violet-100"], .cu-ficha [class*="bg-purple-50"], .cu-ficha [class*="bg-purple-100"], .cu-ficha [class*="bg-emerald-50"], .cu-ficha [class*="bg-emerald-100"], .cu-ficha [class*="bg-green-50"], .cu-ficha [class*="bg-green-100"], .cu-ficha [class*="bg-teal-50"], .cu-ficha [class*="bg-cyan-50"], .cu-ficha [class*="bg-sky-50"], .cu-ficha [class*="bg-orange-50"], .cu-ficha [class*="bg-orange-100"], .cu-ficha [class*="bg-rose-50"], .cu-ficha [class*="bg-pink-50"], .cu-ficha [class*="bg-gray-50"], .cu-ficha [class*="bg-slate-50"] { background-color: transparent !important; } .cu-ficha [class*="border-blue-"], .cu-ficha [class*="border-indigo-"], .cu-ficha [class*="border-violet-"], .cu-ficha [class*="border-purple-"], .cu-ficha [class*="border-emerald-"], .cu-ficha [class*="border-green-"], .cu-ficha [class*="border-teal-"], .cu-ficha [class*="border-cyan-"], .cu-ficha [class*="border-sky-"], .cu-ficha [class*="border-orange-"], .cu-ficha [class*="border-rose-"], .cu-ficha [class*="border-pink-"] { border-color: var(--trazo) !important; } /* Y sus esquinas: el Cuaderno no redondea. */ .cu-ficha [class*="rounded-xl"], .cu-ficha [class*="rounded-2xl"], .cu-ficha [class*="rounded-lg"] { border-radius: 0; } /* Los títulos y textos de apoyo iban en el color de cada área: azul marketing, verde RRHH, naranja producción. En el Cuaderno el color lo pone la tinta de la institución, así que aquí se traducen a tinta. Los tonos oscuros (600–900) pasan a tinta; los claros (300–500), a tinta tenue. Rojo y ámbar se quedan fuera: ahí el color avisa. */ .cu-ficha [class*="text-blue-6"], .cu-ficha [class*="text-blue-7"], .cu-ficha [class*="text-blue-8"], .cu-ficha [class*="text-blue-9"], .cu-ficha [class*="text-indigo-6"], .cu-ficha [class*="text-indigo-7"], .cu-ficha [class*="text-indigo-8"], .cu-ficha [class*="text-indigo-9"], .cu-ficha [class*="text-violet-6"], .cu-ficha [class*="text-violet-7"], .cu-ficha [class*="text-violet-8"], .cu-ficha [class*="text-violet-9"], .cu-ficha [class*="text-purple-6"], .cu-ficha [class*="text-purple-7"], .cu-ficha [class*="text-purple-8"], .cu-ficha [class*="text-purple-9"], .cu-ficha [class*="text-emerald-6"], .cu-ficha [class*="text-emerald-7"], .cu-ficha [class*="text-emerald-8"], .cu-ficha [class*="text-emerald-9"], .cu-ficha [class*="text-green-6"], .cu-ficha [class*="text-green-7"], .cu-ficha [class*="text-green-8"], .cu-ficha [class*="text-green-9"], .cu-ficha [class*="text-teal-6"], .cu-ficha [class*="text-teal-7"], .cu-ficha [class*="text-sky-6"], .cu-ficha [class*="text-sky-7"], .cu-ficha [class*="text-orange-6"], .cu-ficha [class*="text-orange-7"], .cu-ficha [class*="text-orange-8"], .cu-ficha [class*="text-orange-9"] { color: var(--tinta) !important; } .cu-ficha [class*="text-blue-3"], .cu-ficha [class*="text-blue-4"], .cu-ficha [class*="text-blue-5"], .cu-ficha [class*="text-indigo-3"], .cu-ficha [class*="text-indigo-4"], .cu-ficha [class*="text-indigo-5"], .cu-ficha [class*="text-violet-4"], .cu-ficha [class*="text-violet-5"], .cu-ficha [class*="text-purple-4"], .cu-ficha [class*="text-purple-5"], .cu-ficha [class*="text-emerald-4"], .cu-ficha [class*="text-emerald-5"], .cu-ficha [class*="text-green-4"], .cu-ficha [class*="text-green-5"], .cu-ficha [class*="text-teal-4"], .cu-ficha [class*="text-sky-4"], .cu-ficha [class*="text-orange-3"], .cu-ficha [class*="text-orange-4"], .cu-ficha [class*="text-orange-5"] { color: var(--tinta-tenue) !important; } /* Y los botones de color sólido dentro de una ficha: pasan a la tinta. */ .cu-ficha [class*="bg-blue-6"], .cu-ficha [class*="bg-blue-7"], .cu-ficha [class*="bg-indigo-6"], .cu-ficha [class*="bg-indigo-7"], .cu-ficha [class*="bg-violet-6"], .cu-ficha [class*="bg-violet-7"], .cu-ficha [class*="bg-purple-6"], .cu-ficha [class*="bg-purple-7"], .cu-ficha [class*="bg-emerald-6"], .cu-ficha [class*="bg-emerald-7"], .cu-ficha [class*="bg-green-6"], .cu-ficha [class*="bg-green-7"], .cu-ficha [class*="bg-orange-6"], .cu-ficha [class*="bg-orange-7"], .cu-ficha [class*="bg-teal-6"], .cu-ficha [class*="bg-sky-6"] { background-color: var(--sello) !important; color: var(--sello-contraste) !important; } /* ── El encabezado de la pantalla ───────────────────────────────────────── */ .cu-encabezado { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 22px 0 6px; } .cu-encabezado h1 { font-size: 30px; margin: 0; letter-spacing: -.02em; font-weight: 600; color: var(--tinta); } /* El texto secundario de cualquier bloque, no solo del encabezado. */ .linea { color: var(--tinta-suave); margin: 3px 0 0; } .cu-encabezado .linea { font-size: 14.5px; } /* En columna, no como texto alineado a la derecha. El panel solo pone aquí el sello y la cuenta atrás —un `

`, que es de bloque y se apilaba solo— pero resultados añade el botón de descarga, que es `inline-flex`: caía en la misma línea y el sello, que va girado, se le montaba encima. */ .cu-encabezado .a-la-derecha { margin-left: auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } .cu-encabezado .cuenta-atras { font-size: 12px; color: var(--tinta-tenue); margin: 7px 0 0; } /* ═══ Componentes de formulario, en versión Cuaderno ═════════════════════════ Todo esto vivía en un `\3c style>` de 38 líneas dentro de `company/plan.html`, reimplementando 26 clases de DaisyUI —`.btn`, `.card`, `.badge`, `.tabs`, `.select`…— para esa pantalla sola. Al ir en línea y sin capa le ganaba a todo: a las utilidades de Tailwind y a los componentes congelados que ya definen esas mismas 26 clases. Aquí van bajo `body.cu-hoja`, y eso es lo que hace segura la mudanza: solo se aplican en las pantallas que ya piden el papel. Las 51 que siguen sin repintar se quedan exactamente con lo que tenían. Repintadas de paso: sin esquina redonda, sin sombra difusa y con el borde de control donde hay algo que pulsar o escribir. ═══════════════════════════════════════════════════════════════════════════ */ body.cu-hoja .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 14px; font-family: var(--letra-rotulo); font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; border-radius: 0; border: 1px solid var(--trazo-control); background: transparent; color: var(--tinta); cursor: pointer; line-height: 1.25; transition: border-color .12s, background .12s; } body.cu-hoja .btn:hover { border-color: var(--trazo-marcado); background: var(--papel-hundido); } body.cu-hoja .btn-sm { padding: 5px 11px; font-size: 11.5px; } body.cu-hoja .btn-xs { padding: 2px 7px; font-size: 10.5px; letter-spacing: .03em; } /* La acción principal va en la tinta de la institución, y es la única que se rellena. Si se rellenaran dos, ninguna sería la principal. */ body.cu-hoja .btn-primary { background: var(--sello); border-color: var(--sello); color: var(--sello-contraste); } body.cu-hoja .btn-primary:hover { background: color-mix(in oklab, var(--sello) 84%, var(--tinta)); border-color: color-mix(in oklab, var(--sello) 84%, var(--tinta)); } body.cu-hoja .btn-outline { background: transparent; } body.cu-hoja .btn-ghost { border-color: transparent; color: var(--tinta-suave); } body.cu-hoja .btn-ghost:hover { background: var(--papel-hundido); border-color: transparent; } body.cu-hoja .btn-ghost.text-error, body.cu-hoja .btn-ghost.btn-error { color: var(--tinta-peligro); } /* La tarjeta pierde la esquina y la sombra: es el mismo gesto que `.cu-panel`, con el que convive mientras `plan` acaba de repintarse. */ body.cu-hoja .card { border-radius: 0; overflow: hidden; background: var(--papel-realce); border: 1px solid var(--trazo); box-shadow: none; } body.cu-hoja .card-body { padding: 18px 20px; } body.cu-hoja .card-title { font-family: var(--letra-rotulo); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .13em; color: var(--tinta-suave); display: block; } /* Distintivos: filete, no píldora de color. Mismo criterio que `.cu-etiqueta`. */ body.cu-hoja .badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 0; border: 1px solid var(--trazo); font-family: var(--letra-rotulo); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-suave); background: transparent; } body.cu-hoja .badge-ghost { background: var(--papel-hundido); } body.cu-hoja .badge-outline { background: transparent; } body.cu-hoja .badge-sm { padding: 1px 6px; font-size: 10px; } /* Campos. El borde es de control —lo que dice dónde escribir— así que va con `--trazo-control` y no con la regla fina. */ body.cu-hoja .form-control { display: flex; flex-direction: column; } body.cu-hoja .label { display: flex; align-items: center; padding: 4px 0; } body.cu-hoja .label-text { font-family: var(--letra-rotulo); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-tenue); } body.cu-hoja .select, body.cu-hoja .input, body.cu-hoja .textarea { border: 1px solid var(--trazo-control); border-radius: 0; padding: 7px 11px; font-family: var(--letra-texto); font-size: 14px; width: 100%; outline: none; background: var(--papel-realce); color: var(--tinta); } body.cu-hoja .select:focus, body.cu-hoja .input:focus, body.cu-hoja .textarea:focus { border-color: var(--sello); box-shadow: 0 0 0 2px color-mix(in oklab, var(--sello) 30%, transparent); } body.cu-hoja .select-sm, body.cu-hoja .input-sm { padding: 4px 9px; font-size: 13px; } /* Un separador con su rótulo en medio. */ body.cu-hoja .divider { display: flex; align-items: center; gap: 9px; font-family: var(--letra-rotulo); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-tenue); margin: 14px 0; } body.cu-hoja .divider::before, body.cu-hoja .divider::after { content: ''; flex: 1; border-top: 1px solid var(--trazo); } /* El aviso de «hecho». Verde porque ahí el color dice algo. */ body.cu-hoja .alert { display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; border-radius: 0; border: 1px solid var(--trazo); background: var(--papel-realce); color: var(--tinta); } body.cu-hoja .alert-success { border-color: var(--color-success); } /* Los nodos del mapa estratégico se arrastran, así que el estado tiene que verse. Los colores fijos —azul, verde— se cambian por la tinta: el mapa funciona igual en los ocho temas. */ body.cu-hoja .map-node { border-radius: 0; transition: box-shadow .15s, border-color .15s; } body.cu-hoja .map-node:hover { border-color: var(--trazo-marcado) !important; } body.cu-hoja .map-node.map-selected { border-color: var(--sello) !important; box-shadow: 0 0 0 2px color-mix(in oklab, var(--sello) 35%, transparent); } body.cu-hoja .map-node.map-drag-over { border-color: var(--sello) !important; box-shadow: var(--sombra-dura); } body.cu-hoja .map-node.map-dragging { opacity: .5; cursor: grabbing !important; } /* ── El semáforo ───────────────────────────────────────────────────────────── Eran 🟢🟡🔴⚪ literales en la plantilla, y no eran decoración: dicen si un indicador cumple su meta, roza el umbral o está por debajo. El problema del emoji es que lo dibuja el sistema operativo, así que el mismo cuadro de mando cambia de aspecto entre Windows, Android y un proyector de aula. Aquí es una marca cuadrada de la familia del papel, con los colores semánticos —los mismos que se conservaron en la migración de temas— y un filete para que el «sin datos» se distinga del blanco de la ficha. */ .cu-semaforo { display: inline-block; width: 9px; height: 9px; vertical-align: baseline; border: 1px solid var(--trazo-marcado); margin-right: 4px; } .cu-semaforo.verde { background: var(--color-success); } .cu-semaforo.ambar { background: var(--color-warning); } .cu-semaforo.rojo { background: var(--color-error); } .cu-semaforo.vacio { background: transparent; } /* ── El paso a paso ────────────────────────────────────────────────────────── Cuatro pasos en tres estados: el que toca, el hecho y el que aún no se puede. Antes cada estado era un color —índigo, verde, gris— dentro de una caja índigo con esquina redonda. Con eso el paso pendiente y el ya hecho competían por la atención, que es justo al revés de lo que interesa: lo que hay que ver es dónde seguir. Ahora el color no dice nada y la marca de la izquierda lo dice todo: el número si toca, un visto si está hecho, nada si está bloqueado. El paso pendiente es además el único con el filete marcado. */ .cu-pasos { margin: 0 0 22px; } .cu-pasos .tira { display: flex; align-items: stretch; gap: 7px; margin-top: 10px; } .cu-pasos .flecha { display: flex; align-items: center; color: var(--tinta-tenue); flex-shrink: 0; } .cu-pasos .paso { flex: 1; text-align: left; background: var(--papel-realce); border: 1px solid var(--trazo-marcado); padding: 9px 11px; cursor: pointer; transition: box-shadow .12s; min-width: 0; } .cu-pasos .paso:hover { box-shadow: var(--sombra-dura); } .cu-pasos .paso.hecho { border-color: var(--trazo); } .cu-pasos .paso.bloqueado { border-color: var(--trazo); cursor: default; } .cu-pasos .paso.bloqueado:hover { box-shadow: none; } .cu-pasos .cabeza { display: flex; align-items: center; gap: 7px; } .cu-pasos .marca { flex-shrink: 0; width: 19px; height: 19px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--letra-cifra); font-size: 11px; font-weight: 500; border: 1px solid var(--trazo-marcado); background: var(--papel-realce); color: var(--tinta); } .cu-pasos .paso.hecho .marca { background: var(--sello); border-color: var(--sello); color: var(--sello-contraste); } .cu-pasos .paso.bloqueado .marca { border-color: var(--trazo); } .cu-pasos .titulo { font-family: var(--letra-rotulo); font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--tinta); } .cu-pasos .paso.bloqueado .titulo { color: var(--tinta-tenue); } .cu-pasos .pista { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.35; color: var(--tinta-tenue); } @media (max-width: 700px) { .cu-pasos .tira { flex-wrap: wrap; } .cu-pasos .pista { display: none; } } /* ═══ Panel del profesor ═════════════════════════════════════════════════════ */ /* La franja de la institución. Era un bloque de color con el logo encima; el logo lo sube el usuario, así que va sobre cartulina y con filete, y el fondo deja de competir con él. */ .cu-franja { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 0; border-bottom: 2px solid var(--trazo-marcado); margin-bottom: 6px; } .cu-franja .lado { display: flex; align-items: center; gap: 12px; min-width: 0; } /* La tapa de «cambiar logo», que solo aparece al pasar por encima. */ .cu-tapa { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in oklab, var(--tinta) 62%, transparent); color: var(--papel-realce); font-family: var(--letra-rotulo); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; opacity: 0; transition: opacity .12s; cursor: pointer; border: 0; } .group:hover > .cu-tapa { opacity: 1; } /* Un panel que además es un enlace: el aviso del manual. */ .cu-aviso { display: flex; align-items: center; gap: 14px; text-decoration: none; transition: box-shadow .12s; } .cu-aviso:hover { box-shadow: var(--sombra-dura); } .cu-aviso .pie { display: block; margin-top: 3px; font-size: 13px; color: var(--tinta-tenue); } .cu-aviso .flecha { margin-left: auto; color: var(--tinta-suave); transition: transform .12s; } /* La barra de licencias en uso. Conserva el color —verde, ámbar y rojo dicen cuánto margen queda, y eso es información— y pierde la esquina redonda. */ .cu-barra { margin: 4px 0 26px; } .cu-barra .rotulos { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 7px; } .cu-barra .canal { height: 10px; background: var(--papel-hundido); border: 1px solid var(--trazo); } .cu-barra .relleno { height: 100%; background: var(--color-success); transition: width .2s; } .cu-barra .relleno.ambar { background: var(--color-warning); } .cu-barra .relleno.rojo { background: var(--color-error); } /* Una lista de cosas con las que se puede hacer algo: laboratorios, equipos. Filas separadas por una regla, sin caja cada una. */ .cu-lista .fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 0; border-bottom: 1px solid var(--trazo); } .cu-lista .fila:last-child { border-bottom: 0; } .cu-lista .recuento { flex-shrink: 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--trazo-marcado); font-size: 14px; color: var(--tinta); } .cu-lista .nombre { font-size: 15px; font-weight: 600; color: var(--tinta); margin: 0; } .cu-lista .pie { font-size: 12.5px; color: var(--tinta-tenue); margin: 2px 0 0; } /* Borrar es lo único de la pantalla que no se puede deshacer, y el rojo ahí dice justo eso. Fuera de este caso, el rojo no se reparte. */ .cu-accion.peligro { color: var(--tinta-peligro); border-color: var(--tinta-peligro); } .cu-accion.peligro:hover { border-color: var(--tinta-peligro); background: color-mix(in oklab, var(--tinta-peligro) 12%, transparent); } /* El número de período en la lista de períodos del profesor. Era un círculo de color —violeta para los de prueba, gris para los reales— y el color no decía cuál era: lo dice el rótulo de al lado. */ .cu-cifra.recuento-periodo { flex-shrink: 0; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--trazo-marcado); font-size: 15px; color: var(--tinta); } /* Un menú desplegable sobre la hoja: el de «Gestionar» de cada equipo. Cuadrado y con la sombra dura, que aquí sí toca — lo que hay dentro son decisiones del profesor sobre ese equipo. */ .cu-menu { background: var(--papel-realce); border: 1px solid var(--trazo-marcado); box-shadow: var(--sombra-dura); padding: 4px 0; } /* Un diálogo sobre la hoja: añadir instructor, cambiar contraseña. Cuadrado y con sombra dura — dentro se decide algo. */ .cu-modal { background: var(--papel-realce); border: 1.5px solid var(--trazo-marcado); box-shadow: var(--sombra-dura-honda); padding: 26px 28px 24px; } /* Una acción de fila: editar, desactivar, borrar. Es `.cu-accion` sin el filete —dentro de una tabla, tres botones con borde son tres cajas de más— pero conserva el rótulo en Condensed y la zona de pulsado. */ .cu-accion.cu-accion-min { border-color: transparent; padding: 4px 7px; font-size: 11px; color: var(--tinta-suave); } .cu-accion.cu-accion-min:hover { border-color: var(--trazo-control); background: transparent; } .cu-accion.cu-accion-min.peligro { color: var(--tinta-peligro); border-color: transparent; } .cu-accion.cu-accion-min.peligro:hover { border-color: var(--tinta-peligro); } /* La inicial del instructor, en la lista del equipo. Era un círculo de color; ahora es la misma cartulina cuadrada que el resto de iniciales. */ .cu-cifra.recuento { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--trazo-marcado); background: var(--papel-realce); font-weight: 600; font-size: 14px; color: var(--tinta); flex-shrink: 0; } /* Un enlace dentro del texto: «Actualizar», «Ver todo», «Nueva institución». Iba en azul, que no venía de ningún sitio —ni del tema ni de la marca—. Ahora va en la tinta del sello, que es la señal de la institución, y se subraya al pasar por encima en vez de llevar el subrayado siempre. */ .cu-enlace { color: var(--sello); text-decoration: none; font-weight: 500; } .cu-enlace:hover { text-decoration: underline; } /* El deslizador del tiempo de sesión. `accent-color` es lo único que el navegador deja teñir de un sin reconstruirlo entero. */ .cu-deslizador { accent-color: var(--sello); cursor: pointer; } /* La muestra de color de una leyenda: un cuadradito que dice «así se ve un período de prueba». Antes eran violeta y gris; ahora la diferencia es el relleno, no el tono, y así vale igual en los ocho temas. */ .cu-muestra { width: 11px; height: 11px; display: inline-block; border: 1px solid var(--trazo-marcado); background: transparent; } .cu-muestra.prueba { background: repeating-linear-gradient(45deg, var(--trazo-marcado) 0 1px, transparent 1px 4px); } /* ── El calendario de cierres ───────────────────────────────────────────────── Una tarjeta por período dentro de la celda de su día, y el instructor las arrastra de un día a otro. Las tarjetas iban en azul y lila pastel, con el texto en el mismo azul: dos colores fijos que no salían de ningún tema, ni del de la institución ni del Cuaderno. Y justo debajo, la leyenda ya decía lo mismo en el vocabulario de la casa —cuadro rayado para la práctica, cuadro liso para el real, los dos en tinta—. La pantalla explicaba su propio código con un código distinto. Ahora la tarjeta usa la distinción de su leyenda. El rayado es el suave, uno de cada siete, y no el de la muestra, que es uno de cada cuatro: aquí lleva texto encima y el cerrado se lo comía. ─────────────────────────────────────────────────────────────────────────── */ .cu-cal-chip { background-color: var(--papel-realce); border: 1px solid var(--trazo-marcado); color: var(--tinta); padding: 2px 4px; font-size: .65rem; font-weight: 700; text-align: center; line-height: 1.3; margin-bottom: 2px; cursor: grab; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cu-cal-chip.prueba { background-image: repeating-linear-gradient(45deg, var(--trazo) 0 1px, transparent 1px 7px); } .cu-cal-chip .hora { display: block; font-size: .58rem; font-weight: 400; color: var(--tinta-tenue); } /* La marca de «este período tiene una hora distinta de la general». Era un pictograma que el filtro de emoji se llevó por delante, así que el aviso quedó en un hueco: ni en la tarjeta ni en la leyenda se veía nada. Un asterisco dice lo mismo y no depende de ninguna fuente de iconos. */ .cu-cal-personalizada { color: var(--tinta-peligro); font-weight: 700; } .cu-cal-cabecera { text-align: center; font-size: .65rem; font-weight: 700; padding: 4px 0; color: var(--tinta-suave); } .cu-cal-dia { min-height: 52px; background: var(--papel-realce); border: 1px solid var(--trazo); padding: 3px; box-sizing: border-box; } /* El fin de semana y el día pasado se distinguen por el papel, no por el número: el número se lee igual en los tres, que es lo que hace falta para soltar un cierre encima. */ .cu-cal-dia.finde { background: var(--papel); } .cu-cal-dia.pasado { background: var(--papel-hundido); opacity: .55; } .cu-cal-dia.hoy { border: 2px solid var(--sello); } .cu-cal-dia .numero { font-size: .68rem; text-align: right; margin-bottom: 2px; color: var(--tinta-suave); } .cu-cal-dia .hoy-marca { color: var(--sello); font-size: .55rem; font-weight: 800; } /* Mientras se arrastra: el destino válido se marca con el sello y el prohibido con la tinta de peligro. Iban en un índigo y un rojo fijos. */ .cu-cal-dia.destino { outline: 2px dashed var(--sello); background: color-mix(in oklab, var(--papel-realce) 88%, var(--sello)); } .cu-cal-dia.destino-vetado { outline: 2px dashed var(--tinta-peligro); background: color-mix(in oklab, var(--papel-realce) 88%, var(--tinta-peligro)); } /* Los cuatro niveles de un atributo del producto. Se elige uno, como en las pestañas: el elegido va en la tinta de la institución y los demás en filete. El anillo azul de antes decía lo mismo con un color que no era de nadie. */ .cu-nivel { border: 1px solid var(--trazo-control); background: transparent; padding: 7px 5px; text-align: center; font-size: 12px; color: var(--tinta); cursor: pointer; transition: border-color .12s, background .12s; } .cu-nivel:hover { border-color: var(--trazo-marcado); } .cu-nivel.act { border-color: var(--sello); box-shadow: inset 0 0 0 1px var(--sello); font-weight: 600; } .cu-nivel.inhabilitado { opacity: .4; cursor: not-allowed; } .cu-nivel.inhabilitado:hover { border-color: var(--trazo-control); } /* El índice lateral del caso de negocio: una lista de anclas a las secciones. Iba en gris con un fondo al pasar por encima; ahora es un rótulo con una regla al margen, que es como se marca la sección activa en el resto. */ .cu-indice { display: block; padding: 5px 11px; color: var(--tinta-suave); text-decoration: none; border-left: 2px solid transparent; transition: color .12s, border-color .12s; } .cu-indice:hover { color: var(--tinta); border-left-color: var(--trazo); } .cu-indice.act { color: var(--tinta); border-left-color: var(--sello); font-weight: 600; } /* ── Tarjeta elegible ──────────────────────────────────────────────────────── Las tres rejillas de elección del formulario de creación: el vertical, el preajuste y el nivel. Eran tres tratamientos distintos para el mismo gesto —elegir uno de un grupo— y cada una se marcaba con su propio color. Aquí es una sola forma: filete fino, y la elegida con el filete marcado y la sombra dura. La sombra dura significa «aquí decides tú», y elegir el vertical de un laboratorio es exactamente eso. */ .cu-elegible { display: block; background: var(--papel-realce); border: 1px solid var(--trazo); padding: 15px 17px; cursor: pointer; transition: border-color .12s, box-shadow .12s; width: 100%; } .cu-elegible:hover { border-color: var(--trazo-control); } .cu-elegible.act, .cu-elegible[aria-pressed="true"], .cu-elegible.seleccionada { border-color: var(--trazo-marcado); box-shadow: var(--sombra-dura); } *, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } ::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } /* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */ /* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) */ *, ::before, ::after { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ border-color: #e5e7eb; /* 2 */ } ::before, ::after { --tw-content: ''; } /* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. 7. Disable tap highlights on iOS */ html, :host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -moz-tab-size: 4; /* 3 */ -o-tab-size: 4; tab-size: 4; /* 3 */ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */ font-feature-settings: normal; /* 5 */ font-variation-settings: normal; /* 6 */ -webkit-tap-highlight-color: transparent; /* 7 */ } /* 1. Remove the margin in all browsers. 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. */ body { margin: 0; /* 1 */ line-height: inherit; /* 2 */ } /* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Ensure horizontal rules are visible by default. */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */ } /* Add the correct text decoration in Chrome, Edge, and Safari. */ abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /* Remove the default font size and weight for headings. */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } /* Reset links to optimize for opt-in styling instead of opt-out. */ a { color: inherit; text-decoration: inherit; } /* Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /* 1. Use the user's configured `mono` font-family by default. 2. Use the user's configured `mono` font-feature-settings by default. 3. Use the user's configured `mono` font-variation-settings by default. 4. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ font-feature-settings: normal; /* 2 */ font-variation-settings: normal; /* 3 */ font-size: 1em; /* 4 */ } /* Add the correct font size in all browsers. */ small { font-size: 80%; } /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default. */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ border-collapse: collapse; /* 3 */ } /* 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. 3. Remove default padding in all browsers. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-feature-settings: inherit; /* 1 */ font-variation-settings: inherit; /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; /* 1 */ line-height: inherit; /* 1 */ letter-spacing: inherit; /* 1 */ color: inherit; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 3 */ } /* Remove the inheritance of text transform in Edge and Firefox. */ button, select { text-transform: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Remove default button styles. */ button, input:where([type='button']), input:where([type='reset']), input:where([type='submit']) { -webkit-appearance: button; /* 1 */ background-color: transparent; /* 2 */ background-image: none; /* 2 */ } /* Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring { outline: auto; } /* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ :-moz-ui-invalid { box-shadow: none; } /* Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /* Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /* 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /* Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } /* Removes the default spacing and border for appropriate elements. */ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } /* Reset default styling for dialogs. */ dialog { padding: 0; } /* Prevent resizing textareas horizontally by default. */ textarea { resize: vertical; } /* 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 2. Set the default placeholder color to the user's configured gray 400 color. */ input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } input::placeholder, textarea::placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } /* Set the default cursor for buttons. */ button, [role="button"] { cursor: pointer; } /* Make sure disabled buttons don't get the pointer cursor. */ :disabled { cursor: default; } /* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ img, svg, video, canvas, audio, iframe, embed, object { display: block; /* 1 */ vertical-align: middle; /* 2 */ } /* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) */ img, video { max-width: 100%; height: auto; } /* Make elements with the HTML hidden attribute stay hidden by default */ [hidden]:where(:not([hidden="until-found"])) { display: none; } .\!container { width: 100% !important; } .container { width: 100%; } @media (min-width: 640px) { .\!container { max-width: 640px !important; } .container { max-width: 640px; } } @media (min-width: 768px) { .\!container { max-width: 768px !important; } .container { max-width: 768px; } } @media (min-width: 1024px) { .\!container { max-width: 1024px !important; } .container { max-width: 1024px; } } @media (min-width: 1280px) { .\!container { max-width: 1280px !important; } .container { max-width: 1280px; } } @media (min-width: 1536px) { .\!container { max-width: 1536px !important; } .container { max-width: 1536px; } } .visible { visibility: visible; } .invisible { visibility: hidden; } .collapse { visibility: collapse; } .fixed { position: fixed; } .absolute { position: absolute; } .relative { position: relative; } .sticky { position: sticky; } .bottom-6 { bottom: 1.5rem; } .left-1\/2 { left: 50%; } .right-0 { right: 0px; } .top-0 { top: 0px; } .top-20 { top: 5rem; } .top-full { top: 100%; } .z-40 { z-index: 40; } .z-50 { z-index: 50; } .col-span-2 { grid-column: span 2 / span 2; } .mx-auto { margin-left: auto; margin-right: auto; } .mb-0\.5 { margin-bottom: 0.125rem; } .mb-1 { margin-bottom: 0.25rem; } .mb-10 { margin-bottom: 2.5rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mb-5 { margin-bottom: 1.25rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .ml-1 { margin-left: 0.25rem; } .ml-2 { margin-left: 0.5rem; } .ml-auto { margin-left: auto; } .mt-0\.5 { margin-top: 0.125rem; } .mt-1 { margin-top: 0.25rem; } .mt-16 { margin-top: 4rem; } .mt-2 { margin-top: 0.5rem; } .mt-20 { margin-top: 5rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mt-auto { margin-top: auto; } .block { display: block; } .inline-block { display: inline-block; } .inline { display: inline; } .flex { display: flex; } .inline-flex { display: inline-flex; } .table { display: table; } .\!grid { display: grid !important; } .grid { display: grid; } .hidden { display: none; } .h-10 { height: 2.5rem; } .h-16 { height: 4rem; } .h-20 { height: 5rem; } .h-3 { height: 0.75rem; } .h-4 { height: 1rem; } .h-40 { height: 10rem; } .h-5 { height: 1.25rem; } .h-56 { height: 14rem; } .h-9 { height: 2.25rem; } .h-full { height: 100%; } .max-h-\[calc\(100vh-5rem\)\] { max-height: calc(100vh - 5rem); } .max-h-\[calc\(100vh-6rem\)\] { max-height: calc(100vh - 6rem); } .min-h-screen { min-height: 100vh; } .w-10 { width: 2.5rem; } .w-16 { width: 4rem; } .w-20 { width: 5rem; } .w-24 { width: 6rem; } .w-3 { width: 0.75rem; } .w-32 { width: 8rem; } .w-36 { width: 9rem; } .w-4 { width: 1rem; } .w-40 { width: 10rem; } .w-44 { width: 11rem; } .w-48 { width: 12rem; } .w-5 { width: 1.25rem; } .w-52 { width: 13rem; } .w-56 { width: 14rem; } .w-64 { width: 16rem; } .w-8 { width: 2rem; } .w-9 { width: 2.25rem; } .w-full { width: 100%; } .min-w-0 { min-width: 0px; } .min-w-full { min-width: 100%; } .max-w-2xl { max-width: 42rem; } .max-w-3xl { max-width: 48rem; } .max-w-6xl { max-width: 72rem; } .max-w-7xl { max-width: 80rem; } .max-w-md { max-width: 28rem; } .max-w-sm { max-width: 24rem; } .max-w-xl { max-width: 36rem; } .flex-1 { flex: 1 1 0%; } .shrink-0 { flex-shrink: 0; } .grow { flex-grow: 1; } .border-collapse { border-collapse: collapse; } .-translate-x-1\/2 { --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @keyframes spin { to { transform: rotate(360deg); } } .animate-spin { animation: spin 1s linear infinite; } .select-none { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .scroll-mt-20 { scroll-margin-top: 5rem; } .list-inside { list-style-position: inside; } .list-decimal { list-style-type: decimal; } .list-disc { list-style-type: disc; } .list-none { list-style-type: none; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-start { align-items: flex-start; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-1\.5 { gap: 0.375rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } .space-y-0\.5 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.125rem * var(--tw-space-y-reverse)); } .space-y-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); } .space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.375rem * var(--tw-space-y-reverse)); } .space-y-12 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(3rem * var(--tw-space-y-reverse)); } .space-y-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); } .space-y-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); } .space-y-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } .space-y-5 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.25rem * var(--tw-space-y-reverse)); } .space-y-8 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(2rem * var(--tw-space-y-reverse)); } .divide-y > :not([hidden]) ~ :not([hidden]) { --tw-divide-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); } .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { --tw-divide-opacity: 1; border-color: rgb(243 244 246 / var(--tw-divide-opacity, 1)); } .divide-gray-50 > :not([hidden]) ~ :not([hidden]) { --tw-divide-opacity: 1; border-color: rgb(249 250 251 / var(--tw-divide-opacity, 1)); } .self-start { align-self: flex-start; } .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } .scroll-smooth { scroll-behavior: smooth; } .whitespace-nowrap { white-space: nowrap; } .rounded { border-radius: 0.25rem; } .rounded-full { border-radius: 9999px; } .rounded-r-xl { border-top-right-radius: 0.75rem; border-bottom-right-radius: 0.75rem; } .border { border-width: 1px; } .border-2 { border-width: 2px; } .border-y { border-top-width: 1px; border-bottom-width: 1px; } .border-b { border-bottom-width: 1px; } .border-l-2 { border-left-width: 2px; } .border-l-4 { border-left-width: 4px; } .border-t { border-top-width: 1px; } .border-dashed { border-style: dashed; } .border-amber-100 { --tw-border-opacity: 1; border-color: rgb(254 243 199 / var(--tw-border-opacity, 1)); } .border-amber-200 { --tw-border-opacity: 1; border-color: rgb(253 230 138 / var(--tw-border-opacity, 1)); } .border-amber-400 { --tw-border-opacity: 1; border-color: rgb(251 191 36 / var(--tw-border-opacity, 1)); } .border-amber-500 { --tw-border-opacity: 1; border-color: rgb(245 158 11 / var(--tw-border-opacity, 1)); } .border-blue-100 { --tw-border-opacity: 1; border-color: rgb(219 234 254 / var(--tw-border-opacity, 1)); } .border-blue-200 { --tw-border-opacity: 1; border-color: rgb(191 219 254 / var(--tw-border-opacity, 1)); } .border-blue-400 { --tw-border-opacity: 1; border-color: rgb(96 165 250 / var(--tw-border-opacity, 1)); } .border-blue-500 { --tw-border-opacity: 1; border-color: rgb(59 130 246 / var(--tw-border-opacity, 1)); } .border-brand-500 { --tw-border-opacity: 1; border-color: rgb(var(--marca-500) / var(--tw-border-opacity, 1)); } .border-brand-600 { --tw-border-opacity: 1; border-color: rgb(var(--marca-600) / var(--tw-border-opacity, 1)); } .border-cyan-500 { --tw-border-opacity: 1; border-color: rgb(6 182 212 / var(--tw-border-opacity, 1)); } .border-emerald-100 { --tw-border-opacity: 1; border-color: rgb(209 250 229 / var(--tw-border-opacity, 1)); } .border-emerald-200 { --tw-border-opacity: 1; border-color: rgb(167 243 208 / var(--tw-border-opacity, 1)); } .border-emerald-400 { --tw-border-opacity: 1; border-color: rgb(52 211 153 / var(--tw-border-opacity, 1)); } .border-gray-100 { --tw-border-opacity: 1; border-color: rgb(243 244 246 / var(--tw-border-opacity, 1)); } .border-gray-200 { --tw-border-opacity: 1; border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)); } .border-gray-300 { --tw-border-opacity: 1; border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)); } .border-gray-400 { --tw-border-opacity: 1; border-color: rgb(156 163 175 / var(--tw-border-opacity, 1)); } .border-gray-50 { --tw-border-opacity: 1; border-color: rgb(249 250 251 / var(--tw-border-opacity, 1)); } .border-green-200 { --tw-border-opacity: 1; border-color: rgb(187 247 208 / var(--tw-border-opacity, 1)); } .border-green-500 { --tw-border-opacity: 1; border-color: rgb(34 197 94 / var(--tw-border-opacity, 1)); } .border-indigo-100 { --tw-border-opacity: 1; border-color: rgb(224 231 255 / var(--tw-border-opacity, 1)); } .border-indigo-400 { --tw-border-opacity: 1; border-color: rgb(129 140 248 / var(--tw-border-opacity, 1)); } .border-indigo-500 { --tw-border-opacity: 1; border-color: rgb(99 102 241 / var(--tw-border-opacity, 1)); } .border-orange-500 { --tw-border-opacity: 1; border-color: rgb(249 115 22 / var(--tw-border-opacity, 1)); } .border-purple-100 { --tw-border-opacity: 1; border-color: rgb(243 232 255 / var(--tw-border-opacity, 1)); } .border-purple-200 { --tw-border-opacity: 1; border-color: rgb(233 213 255 / var(--tw-border-opacity, 1)); } .border-purple-400 { --tw-border-opacity: 1; border-color: rgb(192 132 252 / var(--tw-border-opacity, 1)); } .border-purple-500 { --tw-border-opacity: 1; border-color: rgb(168 85 247 / var(--tw-border-opacity, 1)); } .border-red-100 { --tw-border-opacity: 1; border-color: rgb(254 226 226 / var(--tw-border-opacity, 1)); } .border-red-400 { --tw-border-opacity: 1; border-color: rgb(248 113 113 / var(--tw-border-opacity, 1)); } .border-rose-100 { --tw-border-opacity: 1; border-color: rgb(255 228 230 / var(--tw-border-opacity, 1)); } .border-rose-500 { --tw-border-opacity: 1; border-color: rgb(244 63 94 / var(--tw-border-opacity, 1)); } .border-teal-500 { --tw-border-opacity: 1; border-color: rgb(20 184 166 / var(--tw-border-opacity, 1)); } .border-transparent { border-color: transparent; } .border-violet-100 { --tw-border-opacity: 1; border-color: rgb(237 233 254 / var(--tw-border-opacity, 1)); } .border-violet-200 { --tw-border-opacity: 1; border-color: rgb(221 214 254 / var(--tw-border-opacity, 1)); } .border-violet-400 { --tw-border-opacity: 1; border-color: rgb(167 139 250 / var(--tw-border-opacity, 1)); } .border-violet-500 { --tw-border-opacity: 1; border-color: rgb(139 92 246 / var(--tw-border-opacity, 1)); } .border-white\/20 { border-color: rgb(255 255 255 / 0.2); } .bg-amber-100 { --tw-bg-opacity: 1; background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1)); } .bg-amber-50 { --tw-bg-opacity: 1; background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1)); } .bg-amber-50\/40 { background-color: rgb(255 251 235 / 0.4); } .bg-blue-100 { --tw-bg-opacity: 1; background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1)); } .bg-blue-200 { --tw-bg-opacity: 1; background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1)); } .bg-blue-50 { --tw-bg-opacity: 1; background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1)); } .bg-blue-50\/40 { background-color: rgb(239 246 255 / 0.4); } .bg-blue-600 { --tw-bg-opacity: 1; background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1)); } .bg-brand-50 { --tw-bg-opacity: 1; background-color: rgb(var(--marca-50) / var(--tw-bg-opacity, 1)); } .bg-brand-700 { --tw-bg-opacity: 1; background-color: rgb(var(--marca-700) / var(--tw-bg-opacity, 1)); } .bg-emerald-50 { --tw-bg-opacity: 1; background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1)); } .bg-emerald-50\/40 { background-color: rgb(236 253 245 / 0.4); } .bg-gray-100 { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); } .bg-gray-200 { --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)); } .bg-gray-50 { --tw-bg-opacity: 1; background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)); } .bg-green-100 { --tw-bg-opacity: 1; background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1)); } .bg-green-50 { --tw-bg-opacity: 1; background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1)); } .bg-green-600 { --tw-bg-opacity: 1; background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1)); } .bg-indigo-100 { --tw-bg-opacity: 1; background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1)); } .bg-indigo-50 { --tw-bg-opacity: 1; background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1)); } .bg-orange-50 { --tw-bg-opacity: 1; background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1)); } .bg-pink-50 { --tw-bg-opacity: 1; background-color: rgb(253 242 248 / var(--tw-bg-opacity, 1)); } .bg-purple-100 { --tw-bg-opacity: 1; background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1)); } .bg-purple-50 { --tw-bg-opacity: 1; background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1)); } .bg-red-100 { --tw-bg-opacity: 1; background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)); } .bg-red-50 { --tw-bg-opacity: 1; background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1)); } .bg-red-600 { --tw-bg-opacity: 1; background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1)); } .bg-rose-100 { --tw-bg-opacity: 1; background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1)); } .bg-rose-50 { --tw-bg-opacity: 1; background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1)); } .bg-rose-50\/40 { background-color: rgb(255 241 242 / 0.4); } .bg-slate-200 { --tw-bg-opacity: 1; background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1)); } .bg-teal-50 { --tw-bg-opacity: 1; background-color: rgb(240 253 250 / var(--tw-bg-opacity, 1)); } .bg-teal-50\/40 { background-color: rgb(240 253 250 / 0.4); } .bg-violet-100 { --tw-bg-opacity: 1; background-color: rgb(237 233 254 / var(--tw-bg-opacity, 1)); } .bg-violet-200 { --tw-bg-opacity: 1; background-color: rgb(221 214 254 / var(--tw-bg-opacity, 1)); } .bg-violet-50 { --tw-bg-opacity: 1; background-color: rgb(245 243 255 / var(--tw-bg-opacity, 1)); } .bg-violet-50\/40 { background-color: rgb(245 243 255 / 0.4); } .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } .bg-white\/10 { background-color: rgb(255 255 255 / 0.1); } .bg-white\/15 { background-color: rgb(255 255 255 / 0.15); } .bg-white\/90 { background-color: rgb(255 255 255 / 0.9); } .bg-white\/95 { background-color: rgb(255 255 255 / 0.95); } .bg-yellow-50 { --tw-bg-opacity: 1; background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1)); } .bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); } .from-brand-900 { --tw-gradient-from: rgb(var(--marca-900) / 1) var(--tw-gradient-from-position); --tw-gradient-to: rgb(var(--marca-900) / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .via-brand-800 { --tw-gradient-to: rgb(var(--marca-800) / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--marca-800) / 1) var(--tw-gradient-via-position), var(--tw-gradient-to); } .to-brand-700 { --tw-gradient-to: rgb(var(--marca-700) / 1) var(--tw-gradient-to-position); } .object-contain { -o-object-fit: contain; object-fit: contain; } .p-1\.5 { padding: 0.375rem; } .p-10 { padding: 2.5rem; } .p-2 { padding: 0.5rem; } .p-3 { padding: 0.75rem; } .p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; } .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; } .px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; } .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .px-8 { padding-left: 2rem; padding-right: 2rem; } .py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; } .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; } .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; } .py-16 { padding-top: 4rem; padding-bottom: 4rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; } .py-20 { padding-top: 5rem; padding-bottom: 5rem; } .py-28 { padding-top: 7rem; padding-bottom: 7rem; } .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; } .pb-1 { padding-bottom: 0.25rem; } .pb-10 { padding-bottom: 2.5rem; } .pb-12 { padding-bottom: 3rem; } .pb-16 { padding-bottom: 4rem; } .pb-20 { padding-bottom: 5rem; } .pl-2 { padding-left: 0.5rem; } .pl-5 { padding-left: 1.25rem; } .pl-6 { padding-left: 1.5rem; } .pr-4 { padding-right: 1rem; } .pt-1 { padding-top: 0.25rem; } .pt-10 { padding-top: 2.5rem; } .pt-16 { padding-top: 4rem; } .pt-2 { padding-top: 0.5rem; } .pt-5 { padding-top: 1.25rem; } .pt-6 { padding-top: 1.5rem; } .pt-8 { padding-top: 2rem; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .font-sans { font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .text-5xl { font-size: 3rem; line-height: 1; } .text-\[10px\] { font-size: 10px; } .text-\[11px\] { font-size: 11px; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-xs { font-size: 0.75rem; line-height: 1rem; } .font-bold { font-weight: 700; } .font-extrabold { font-weight: 800; } .font-medium { font-weight: 500; } .font-normal { font-weight: 400; } .font-semibold { font-weight: 600; } .uppercase { text-transform: uppercase; } .italic { font-style: italic; } .leading-relaxed { line-height: 1.625; } .leading-snug { line-height: 1.375; } .leading-tight { line-height: 1.25; } .tracking-tight { letter-spacing: -0.025em; } .tracking-wide { letter-spacing: 0.025em; } .tracking-wider { letter-spacing: 0.05em; } .tracking-widest { letter-spacing: 0.1em; } .text-amber-600 { --tw-text-opacity: 1; color: rgb(217 119 6 / var(--tw-text-opacity, 1)); } .text-amber-700 { --tw-text-opacity: 1; color: rgb(180 83 9 / var(--tw-text-opacity, 1)); } .text-amber-800 { --tw-text-opacity: 1; color: rgb(146 64 14 / var(--tw-text-opacity, 1)); } .text-amber-900 { --tw-text-opacity: 1; color: rgb(120 53 15 / var(--tw-text-opacity, 1)); } .text-blue-700 { --tw-text-opacity: 1; color: rgb(29 78 216 / var(--tw-text-opacity, 1)); } .text-blue-800 { --tw-text-opacity: 1; color: rgb(30 64 175 / var(--tw-text-opacity, 1)); } .text-blue-900 { --tw-text-opacity: 1; color: rgb(30 58 138 / var(--tw-text-opacity, 1)); } .text-brand-100 { --tw-text-opacity: 1; color: rgb(var(--marca-100) / var(--tw-text-opacity, 1)); } .text-brand-200 { --tw-text-opacity: 1; color: rgb(var(--marca-200) / var(--tw-text-opacity, 1)); } .text-brand-300 { --tw-text-opacity: 1; color: rgb(var(--marca-300) / var(--tw-text-opacity, 1)); } .text-brand-400 { --tw-text-opacity: 1; color: rgb(var(--marca-400) / var(--tw-text-opacity, 1)); } .text-brand-500 { --tw-text-opacity: 1; color: rgb(var(--marca-500) / var(--tw-text-opacity, 1)); } .text-brand-600 { --tw-text-opacity: 1; color: rgb(var(--marca-600) / var(--tw-text-opacity, 1)); } .text-brand-700 { --tw-text-opacity: 1; color: rgb(var(--marca-700) / var(--tw-text-opacity, 1)); } .text-brand-800 { --tw-text-opacity: 1; color: rgb(var(--marca-800) / var(--tw-text-opacity, 1)); } .text-cyan-700 { --tw-text-opacity: 1; color: rgb(14 116 144 / var(--tw-text-opacity, 1)); } .text-cyan-800 { --tw-text-opacity: 1; color: rgb(21 94 117 / var(--tw-text-opacity, 1)); } .text-cyan-900 { --tw-text-opacity: 1; color: rgb(22 78 99 / var(--tw-text-opacity, 1)); } .text-emerald-100 { --tw-text-opacity: 1; color: rgb(209 250 229 / var(--tw-text-opacity, 1)); } .text-emerald-600 { --tw-text-opacity: 1; color: rgb(5 150 105 / var(--tw-text-opacity, 1)); } .text-emerald-700 { --tw-text-opacity: 1; color: rgb(4 120 87 / var(--tw-text-opacity, 1)); } .text-emerald-800 { --tw-text-opacity: 1; color: rgb(6 95 70 / var(--tw-text-opacity, 1)); } .text-emerald-900 { --tw-text-opacity: 1; color: rgb(6 78 59 / var(--tw-text-opacity, 1)); } .text-gray-300 { --tw-text-opacity: 1; color: rgb(209 213 219 / var(--tw-text-opacity, 1)); } .text-gray-400 { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity, 1)); } .text-gray-500 { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity, 1)); } .text-gray-600 { --tw-text-opacity: 1; color: rgb(75 85 99 / var(--tw-text-opacity, 1)); } .text-gray-700 { --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity, 1)); } .text-gray-800 { --tw-text-opacity: 1; color: rgb(31 41 55 / var(--tw-text-opacity, 1)); } .text-gray-900 { --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity, 1)); } .text-green-600 { --tw-text-opacity: 1; color: rgb(22 163 74 / var(--tw-text-opacity, 1)); } .text-green-700 { --tw-text-opacity: 1; color: rgb(21 128 61 / var(--tw-text-opacity, 1)); } .text-green-800 { --tw-text-opacity: 1; color: rgb(22 101 52 / var(--tw-text-opacity, 1)); } .text-green-900 { --tw-text-opacity: 1; color: rgb(20 83 45 / var(--tw-text-opacity, 1)); } .text-indigo-700 { --tw-text-opacity: 1; color: rgb(67 56 202 / var(--tw-text-opacity, 1)); } .text-indigo-800 { --tw-text-opacity: 1; color: rgb(55 48 163 / var(--tw-text-opacity, 1)); } .text-indigo-900 { --tw-text-opacity: 1; color: rgb(49 46 129 / var(--tw-text-opacity, 1)); } .text-lime-700 { --tw-text-opacity: 1; color: rgb(77 124 15 / var(--tw-text-opacity, 1)); } .text-lime-900 { --tw-text-opacity: 1; color: rgb(54 83 20 / var(--tw-text-opacity, 1)); } .text-orange-600 { --tw-text-opacity: 1; color: rgb(234 88 12 / var(--tw-text-opacity, 1)); } .text-orange-700 { --tw-text-opacity: 1; color: rgb(194 65 12 / var(--tw-text-opacity, 1)); } .text-orange-800 { --tw-text-opacity: 1; color: rgb(154 52 18 / var(--tw-text-opacity, 1)); } .text-orange-900 { --tw-text-opacity: 1; color: rgb(124 45 18 / var(--tw-text-opacity, 1)); } .text-pink-700 { --tw-text-opacity: 1; color: rgb(190 24 93 / var(--tw-text-opacity, 1)); } .text-pink-800 { --tw-text-opacity: 1; color: rgb(157 23 77 / var(--tw-text-opacity, 1)); } .text-pink-900 { --tw-text-opacity: 1; color: rgb(131 24 67 / var(--tw-text-opacity, 1)); } .text-purple-600 { --tw-text-opacity: 1; color: rgb(147 51 234 / var(--tw-text-opacity, 1)); } .text-purple-700 { --tw-text-opacity: 1; color: rgb(126 34 206 / var(--tw-text-opacity, 1)); } .text-purple-800 { --tw-text-opacity: 1; color: rgb(107 33 168 / var(--tw-text-opacity, 1)); } .text-purple-900 { --tw-text-opacity: 1; color: rgb(88 28 135 / var(--tw-text-opacity, 1)); } .text-red-400 { --tw-text-opacity: 1; color: rgb(248 113 113 / var(--tw-text-opacity, 1)); } .text-red-500 { --tw-text-opacity: 1; color: rgb(239 68 68 / var(--tw-text-opacity, 1)); } .text-red-600 { --tw-text-opacity: 1; color: rgb(220 38 38 / var(--tw-text-opacity, 1)); } .text-red-700 { --tw-text-opacity: 1; color: rgb(185 28 28 / var(--tw-text-opacity, 1)); } .text-red-800 { --tw-text-opacity: 1; color: rgb(153 27 27 / var(--tw-text-opacity, 1)); } .text-red-900 { --tw-text-opacity: 1; color: rgb(127 29 29 / var(--tw-text-opacity, 1)); } .text-rose-600 { --tw-text-opacity: 1; color: rgb(225 29 72 / var(--tw-text-opacity, 1)); } .text-rose-700 { --tw-text-opacity: 1; color: rgb(190 18 60 / var(--tw-text-opacity, 1)); } .text-rose-800 { --tw-text-opacity: 1; color: rgb(159 18 57 / var(--tw-text-opacity, 1)); } .text-rose-900 { --tw-text-opacity: 1; color: rgb(136 19 55 / var(--tw-text-opacity, 1)); } .text-slate-300 { --tw-text-opacity: 1; color: rgb(203 213 225 / var(--tw-text-opacity, 1)); } .text-slate-400 { --tw-text-opacity: 1; color: rgb(148 163 184 / var(--tw-text-opacity, 1)); } .text-slate-700 { --tw-text-opacity: 1; color: rgb(51 65 85 / var(--tw-text-opacity, 1)); } .text-teal-600 { --tw-text-opacity: 1; color: rgb(13 148 136 / var(--tw-text-opacity, 1)); } .text-teal-700 { --tw-text-opacity: 1; color: rgb(15 118 110 / var(--tw-text-opacity, 1)); } .text-teal-800 { --tw-text-opacity: 1; color: rgb(17 94 89 / var(--tw-text-opacity, 1)); } .text-teal-900 { --tw-text-opacity: 1; color: rgb(19 78 74 / var(--tw-text-opacity, 1)); } .text-violet-200 { --tw-text-opacity: 1; color: rgb(221 214 254 / var(--tw-text-opacity, 1)); } .text-violet-600 { --tw-text-opacity: 1; color: rgb(124 58 237 / var(--tw-text-opacity, 1)); } .text-violet-700 { --tw-text-opacity: 1; color: rgb(109 40 217 / var(--tw-text-opacity, 1)); } .text-violet-800 { --tw-text-opacity: 1; color: rgb(91 33 182 / var(--tw-text-opacity, 1)); } .text-violet-900 { --tw-text-opacity: 1; color: rgb(76 29 149 / var(--tw-text-opacity, 1)); } .text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .text-yellow-800 { --tw-text-opacity: 1; color: rgb(133 77 14 / var(--tw-text-opacity, 1)); } .underline { text-decoration-line: underline; } .decoration-brand-500 { text-decoration-color: rgb(var(--marca-500) / 1); } .underline-offset-2 { text-underline-offset: 2px; } .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .opacity-25 { opacity: 0.25; } .opacity-70 { opacity: 0.7; } .opacity-75 { opacity: 0.75; } .opacity-80 { opacity: 0.8; } .outline { outline-style: solid; } .ring-2 { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .ring-brand-300 { --tw-ring-opacity: 1; --tw-ring-color: rgb(var(--marca-300) / var(--tw-ring-opacity, 1)); } .backdrop-blur { --tw-backdrop-blur: blur(8px); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } /* La paleta de marca que estas pantallas traían copiada a mano en su `tailwind.config`: el azul de Tailwind, idéntico en las 16. La única excepción es el acceso del instructor, que va en violeta y lo declara en línea. Los valores no cambian; solo el sitio donde viven. */ :root { --marca-50: 239 246 255; --marca-100: 219 234 254; --marca-200: 191 219 254; --marca-300: 147 197 253; --marca-400: 96 165 250; --marca-500: 59 130 246; --marca-600: 37 99 235; --marca-700: 29 78 216; --marca-800: 30 64 175; --marca-900: 30 58 138; } /* ───────────────────────────────────────────────────────────────────────────── Papel oscuro: los grises de Tailwind no saben que lo hay. Los dos accesos —el de empresa/admin y el del instructor— fijan `data-theme="indigo-oscuro"` en el , así que el papel es casi negro. Pero el marcado de sus tarjetas es anterior al rediseño y pinta el texto con `text-gray-900`, que no lee el tema: vale #111827 pase lo que pase. Sobre papel oscuro eso es tinta negra sobre negro, y el título «Acceso para instructores» no se leía. La hoja de la aplicación ya resuelve esto con el puente de temas, que remapea los grises enteros. Aquí no se importa entero a propósito: las otras catorce pantallas públicas —portada, manuales, modelo económico— son de papel claro, y ahí los grises de Tailwind valen exactamente lo que se quiere. De modo que el puente cuelga del papel oscuro y solo pinta cuando lo hay. No hace falta `!important`: el selector de atributo ya gana por especificidad a la utilidad suelta. Ver [[arquitectura/spec-rediseno-interfaz]]. ───────────────────────────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────────────────────────── Y el problema simétrico, sobre papel claro. `text-gray-400` es #9ca3af y `text-gray-300` es #d1d5db. Sobre el papel de estas pantallas dan 2,4:1 y 1,4:1 — por debajo del 4,5:1 que pide la norma para texto corriente, y por debajo de lo que un ojo cansado lee en un aula. Son 81 rótulos repartidos por el manual, el modelo económico y los precios: los porcentajes entre paréntesis de las ponderaciones, las rayas de las tablas, el «USD» del precio, el aviso de derechos del pie. No es una elección de diseño que haya que respetar: es el gris más claro que Tailwind ofrece, puesto donde hacía falta «texto discreto». Discreto sigue siendo a 70% de tinta; ilegible, no. Va sin colgar de ningún tema porque estas pantallas no declaran ninguno. Las reglas de papel oscuro de más abajo llevan selector de atributo, así que le ganan a ésta por especificidad y el pie de los accesos no se ve afectado. ───────────────────────────────────────────────────────────────────────────── */ .text-gray-300, .text-gray-400 { color: color-mix(in oklab, var(--tinta) 70%, var(--papel-realce)); } /* Y lo mismo con cuatro acentos del manual y del modelo económico. El tono 600 de Tailwind está pensado para fondos, no para texto: el verde da 3,2:1 y el ámbar 3,2:1 sobre papel blanco, y el rojo se queda en 4,4:1 cuando cae sobre su propio papel teñido. Se suben al tono 700, que es el mismo color un paso más hondo y ya cumple. Solo estos cuatro: los demás acentos que usan estas pantallas ya pasan, y oscurecerlos por simetría sería cambiarlos sin motivo. */ .text-green-600 { color: #15803d; } .text-amber-600 { color: #b45309; } .text-orange-600 { color: #c2410c; } .text-red-600 { color: #b91c1c; } /* Texto — la misma escala que usa el puente de la aplicación, sobre la tinta del tema en lugar de sobre el gris fijo. Los tonos bajos van más altos que en el puente de la aplicación: allí un `text-gray-400` es un dato de apoyo dentro de una pantalla llena, y aquí es el pie de una tarjeta de acceso, con dos enlaces que hay que poder leer. Con la escala de la aplicación se quedaban en 3,3:1; estos valores son los que ponen los cinco tonos por encima de 4,5:1 sobre el papel oscuro. */ [data-theme$="oscuro"] .text-gray-900, [data-theme$="oscuro"] .text-slate-900 { color: var(--tinta); } [data-theme$="oscuro"] .text-gray-800, [data-theme$="oscuro"] .text-slate-800 { color: color-mix(in oklab, var(--tinta) 92%, var(--papel-realce)); } [data-theme$="oscuro"] .text-gray-700, [data-theme$="oscuro"] .text-slate-700 { color: var(--tinta-suave); } [data-theme$="oscuro"] .text-gray-600, [data-theme$="oscuro"] .text-slate-600 { color: color-mix(in oklab, var(--tinta) 70%, var(--papel-realce)); } [data-theme$="oscuro"] .text-gray-500, [data-theme$="oscuro"] .text-slate-500 { color: color-mix(in oklab, var(--tinta) 62%, var(--papel-realce)); } [data-theme$="oscuro"] .text-gray-400 { color: color-mix(in oklab, var(--tinta) 58%, var(--papel-realce)); } [data-theme$="oscuro"] .hover\:text-gray-900:hover, [data-theme$="oscuro"] .hover\:text-slate-600:hover { color: var(--tinta); } /* Superficies y filetes. */ [data-theme$="oscuro"] .bg-white { background-color: var(--papel-realce); } [data-theme$="oscuro"] .bg-gray-50 { background-color: var(--papel); } [data-theme$="oscuro"] .bg-gray-100 { background-color: var(--papel-hundido); } [data-theme$="oscuro"] .border-gray-50, [data-theme$="oscuro"] .border-gray-100, [data-theme$="oscuro"] .border-gray-200 { border-color: var(--trazo); } [data-theme$="oscuro"] .border-gray-300 { border-color: var(--trazo-control); } /* Los dos enlaces que cruzan de un acceso a otro. Van en el verde y el turquesa de 600, que son colores pensados para papel blanco: sobre el oscuro se quedan en el límite de lo legible. Se suben al tono de 400, que es el mismo color con el contraste que pide este fondo. */ [data-theme$="oscuro"] .text-emerald-600, [data-theme$="oscuro"] .hover\:text-emerald-600:hover { color: #34d399; } [data-theme$="oscuro"] .text-teal-600 { color: #2dd4bf; } .hover\:border-brand-400:hover { --tw-border-opacity: 1; border-color: rgb(var(--marca-400) / var(--tw-border-opacity, 1)); } .hover\:bg-brand-800:hover { --tw-bg-opacity: 1; background-color: rgb(var(--marca-800) / var(--tw-bg-opacity, 1)); } .hover\:bg-gray-50:hover { --tw-bg-opacity: 1; background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)); } .hover\:text-brand-200:hover { --tw-text-opacity: 1; color: rgb(var(--marca-200) / var(--tw-text-opacity, 1)); } .hover\:text-brand-700:hover { --tw-text-opacity: 1; color: rgb(var(--marca-700) / var(--tw-text-opacity, 1)); } .hover\:text-emerald-600:hover { --tw-text-opacity: 1; color: rgb(5 150 105 / var(--tw-text-opacity, 1)); } .hover\:text-slate-600:hover { --tw-text-opacity: 1; color: rgb(71 85 105 / var(--tw-text-opacity, 1)); } .hover\:text-white:hover { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .hover\:underline:hover { text-decoration-line: underline; } .hover\:opacity-100:hover { opacity: 1; } .focus\:ring-2:focus { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus\:ring-brand-400:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(var(--marca-400) / var(--tw-ring-opacity, 1)); } .group:hover .group-hover\:block { display: block; } @media (min-width: 640px) { .sm\:col-span-2 { grid-column: span 2 / span 2; } .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sm\:flex-row { flex-direction: row; } .sm\:text-5xl { font-size: 3rem; line-height: 1; } } @media (min-width: 768px) { .md\:flex { display: flex; } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .lg\:block { display: block; } .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }