/* ============================================================================ COMPONENTS.CSS — disposición y componentes del kit de tableros de serie ============================================================================ Va DESPUÉS de tokens.css (misma carpeta) en el del tablero. Contiene la disposición (menú lateral de una columna + contenido), la barra superior, las tarjetas y estadísticas, los filtros, los grupos colapsables, los botones genéricos, la ventana de detalle y las animaciones: todo lo que un tablero de serie necesita ANTES de pintar lo suyo. Lo que NO vive aquí, a propósito: nada exclusivo de un proyecto (nombres de sus secciones, sus tarjetas de contenido concretas, su lector con fichas, su lista de pendientes). Eso va en el dashboard.css propio de cada tablero, apoyado en los tokens de tokens.css. Selectores en CLASE (no en id), porque el motor de cada tablero pinta su propio HTML con clases. ORIGEN: extraído el 2026-08-09 de brains/machines/creative/projects/higgsfield-film-festival/everybody-sleeps-at-nine/dashboard/assets/css/dashboard.css, traduciendo sus selectores de id (#app, #sidebar, #nav...) a clase (.app, .side, .nav...) para que cualquier tablero lo consuma sin depender de un esqueleto HTML concreto. Se dejó fuera lo exclusivo de esa pieza y del sistema de negocio de la casa (mapa agéntico, calendario editorial, banco de ideas, bloques de persona/journey/foda, comparativa de plataformas, ficha de experto/función/consejo): nada de eso pertenece a un tablero de serie. Un tablero NUEVO no copia esta hoja: la CARGA. ============================================================================ */ /* ============ HELPERS ============ */ .hl{background:var(--accent);color:var(--on-accent);border-radius:.28em;padding:.02em .2em; box-decoration-break:clone;-webkit-box-decoration-break:clone} .muted{color:var(--text-dim)} .pad{padding:var(--sp-3) var(--sp-1)} /* Sistema de etiquetas, tres variantes. `tag--fill` usa el ACENTO DEL TABLERO (el token, no un color fijo): magenta en un tablero, lima en otro, según lo que cada board defina en :root/html[data-theme=dark]. */ .tag{display:inline-flex;align-items:center;gap:.4em;border:var(--hairline);border-radius:var(--r-pill); padding:.22em .8em;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--ls-rotulo); font-weight:var(--w-medio);white-space:nowrap} /* «COMPLETO» y las demás etiquetas rellenas. EL RELLENO SIGUE SIENDO EL LIMA DE LA CASA; LO QUE CAMBIA ES EL FILETE (CEO, 2026-08-11). El problema medido: el lima sobre la tarjeta crema da 1,13, así que la píldora no se ve como pieza. La letra de dentro se lee perfecta (14,47), el que desaparece es el CONTORNO. Antes el filete se pedía del mismo lima que el relleno, o sea que no dibujaba nada. Lo primero que probé fue rellenarla del lima hondo. Pasa las medidas (3,60 de forma y 4,52 de letra), pero deja la etiqueta VERDE OLIVA en tema claro, que es justo el aire vintage que el CEO rechazó el 2026-08-10. Y contradice la nota del propio `--accent-deep`, que dice por escrito que no es para llevar letra encima. Un contorno es exactamente para esto. El lima hondo de filete da 3,60 contra la tarjeta, por encima del 3,00 que pide una forma, y el relleno se queda lima, que es la marca. En tema oscuro `--accent-deep` ya apunta al lima de siempre, así que allí el filete y el relleno vuelven a ser el mismo color y la píldora sigue siendo un bloque lima entero: sobre la tarjeta oscura da 13,65 y no necesita contorno. Una línea, los dos temas. */ .tag--fill{background:var(--accent);color:var(--on-accent);border-color:var(--accent-deep)} .tag--pend{background:var(--text);color:var(--surface);border-color:var(--text)} /* «EN CURSO» y las etiquetas suaves. EL PROBLEMA NO ERA QUE SE PARECIERA AL FONDO: ERA QUE NO TENÍA FONDO (CEO, 2026-08-11). Se pintaba transparente, así que lo único que la dibujaba era un filete de 1 píxel del color del filete de la casa, que en tema oscuro es casi el mismo tono que la tarjeta. Resultado: en oscuro no había píldora, había texto suelto. Ahora lleva la superficie más marcada del tema y un filete que sí se separa de ella, así que es una pieza en los dos temas. La letra sigue siendo la atenuada, y sobre esa superficie da 4,96 en claro y 5,39 en oscuro. */ .tag--soft{background:var(--surface-strong);border:1px solid var(--text-soft); color:var(--text-dim);text-transform:none;letter-spacing:0} /* ============ LAYOUT: menú lateral + contenido ============ */ /* El ancho del menú lo manda la REJILLA de la página, no el propio menú. Con la columna en `auto`, la rejilla la mide por el contenido y estira el menú hasta llenarla: al contraer, el menú pedía 76px y la rejilla se los ignoraba, así que unas veces encogía y otras no (medido el 2026-08-09). Con la columna declarada, contraer es determinista. Sin transición a propósito: animar las pistas de una rejilla no es fiable (el navegador devuelve el reparto del paso anterior durante la animación), y el menú tiene que quedar donde toca en el mismo momento en que se pulsa. */ .app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh} [data-side="collapsed"] .app, [data-side="collapsed"] #app{grid-template-columns:var(--sidebar-w-collapsed) 1fr} /* EL CONTENEDOR TAMBIÉN TIENE DOS NOMBRES, y esto se me pasó (2026-08-10). Los tableros de serie envuelven el menú en un elemento con clase `.app`, que es una rejilla. Los de película lo envuelven en `#sidebar`, que NO es rejilla: es una fila flexible, y su ancho lo pone él mismo. Yo había cubierto los dos vocabularios para el MENÚ pero no para su CONTENEDOR, así que en película el botón de contraer marcaba el estado y no pasaba nada: el menú se quedaba en sus 248 px. Aquí se le da el ancho a quien lo manda de verdad en cada caso. La película, además, tenía su propio mecanismo por su cuenta (`#app.thin #sidebar`), que nadie activaba porque el botón marca `data-side`. Con esta regla los dos caminos llevan al mismo sitio y ya no hace falta el suyo. Y aquí SÍ se anima: `#sidebar` es una fila flexible, no una rejilla, y el ancho de un elemento flexible sí se puede animar de forma fiable. Ese es el efecto de contraer que faltaba. */ #sidebar{width:var(--sidebar-w);transition:width var(--mov-medio) var(--ease)} [data-side="collapsed"] #sidebar, [data-side="collapsed"] #side-rail, #app.thin #sidebar, #app.thin #side-rail{width:var(--sidebar-w-collapsed)} /* El par completo: hay regla para contraído Y para abierto, con el mismo peso. Si solo se declara el contraído, al volver a abrir NINGUNA regla fija el ancho (medido el 2026-08-10: el menú se quedaba en 76 px para siempre y el botón parecía roto). Un estado no se describe solo por su contrario: se declaran los dos, y así el resultado no depende de qué hoja cargue antes ni de quién tenga más peso. */ [data-side="expanded"] #sidebar, [data-side="expanded"] #side-rail{width:var(--sidebar-w)} /* UNA sola columna, con los nombres de las secciones siempre a la vista. Este es el menú canónico de la casa (el de everybody-sleeps-at-nine). El menú de dos columnas que hubo aquí (un carril de iconos que abría un panel al lado) se retiró el 2026-08-09: escondía los nombres detrás de un clic y no es lo que usa ninguna pieza publicada. */ /* ============================================================================ UNA SOLA REGLA PARA LOS DOS TIPOS DE TABLERO ============================================================================ Los tableros de PELÍCULA y los de SERIE nacieron por separado y nombran sus piezas distinto: la película usa identificadores (`#side-rail`, `#nav`) y nombres propios (`.nav-item`, `.film-nav-grupo`), las series usan los del sistema (`.side`, `.nav a`, `.navgrp`). Cada selector de este bloque cubre los DOS nombres, así que los dos tableros comparten la MISMA regla: cambiar un espaciado aquí lo cambia en los dos a la vez. Se hizo así, y no renombrando el HTML de la película, porque su página se genera a partir del cuadro de mandos del DNA de la casa y ese esqueleto no es de este proyecto. Cambiar el nombre allí arrastraría a piezas que no tienen nada que ver con tableros de producción. El CEO lo pilló el 2026-08-09 mirando los dos menús: «¿tú estás usando la misma clase para todos los tableros? sigue viéndose distinto el padding». Y tenía razón: hasta ese momento los valores estaban IGUALADOS a mano, que es lo mismo que no compartir nada, porque el siguiente cambio los vuelve a separar. Los espaciados de aquí salen medidos del tablero de la película, que es el canon: relleno 26/16/20, bloque del logotipo de 34 de alto, y las entradas pegadas, sin separación entre ellas. ============================================================================ */ .side,#side-rail{position:sticky;top:0;height:100vh;width:100%;min-width:0; overflow-y:auto;overflow-x:hidden;background:var(--surface);border-right:var(--hair-soft);z-index:var(--capa-menu); padding:var(--sp-17) var(--sp-13) var(--sp-15);display:flex;flex-direction:column;gap:4px; transition:padding var(--mov-lento) var(--ease)} /* MIN-WIDTH CERO, Y ES OBLIGATORIO. Una columna de rejilla NO encoge por debajo de lo que mide su contenido mas ancho, salvo que se le dé permiso. Sin esto, una tabla larga o un lector a dos columnas empujan el contenido hasta 2000 px dentro de una ventana de 1680, y lo que sobra se sale por la derecha: el panel de fichas quedaba fuera de pantalla y el texto cortado. Medido el 2026-08-11. Gotcha 172. */ .main{padding:var(--sp-18) var(--sp-20) var(--sp-23);max-width:2000px;min-width:0} /* ============ MENÚ LATERAL ============ */ /* Nombre del proyecto, encima de las secciones */ .brand,.film-nav-title{padding:var(--sp-12) var(--sp-11) var(--sp-5);font-size:var(--fs-xs);font-weight:var(--w-max); text-transform:uppercase;letter-spacing:var(--ls-rotulo-ancho);color:var(--text-dim)} .side .sub{font-size:var(--t-12);color:var(--text-dim);margin:var(--sp-1) 0 var(--sp-12);padding:0 var(--sp-11)} .nav,#nav{display:flex;flex-direction:column;flex:1 1 auto;min-height:0} .nav a,#nav .nav-item,#nav .nav-sub a{display:flex;align-items:center;gap:13px;width:100%; text-align:left;padding:var(--sp-9) var(--sp-11);border-radius:var(--r-in);color:var(--text);font-weight:var(--w-medio); font-size:var(--fs-md);cursor:pointer;transition:background var(--mov-rapido),color var(--mov-rapido)} .nav-ic{width:20px;height:20px;flex:none;opacity:var(--op-total)} .nav a .nav-ic,#nav .nav-item .nav-ic{opacity:var(--op-alto)} .nav a:hover,#nav .nav-item:hover,#nav .nav-sub a:hover{background:var(--surface-alt); text-decoration:none;color:var(--text)} /* La sección abierta se marca en TINTA, no en acento (CEO, 2026-08-09): el lima queda para lo que se pulsa, y lo activo no compite con ello. */ .nav a.active,#nav .nav-item.active,#nav .nav-sub a.active{background:var(--ink); color:var(--on-ink);font-weight:var(--w-fuerte)} .nav a.active:hover,#nav .nav-item.active:hover{background:var(--ink);color:var(--on-ink)} .nav a.active .nav-ic,#nav .nav-item.active .nav-ic{opacity:var(--op-total)} .backlink .nav-ic{width:17px;height:17px;color:var(--text)} .side .foot,#side-rail .foot{margin-top:var(--sp-16b);padding-top:var(--sp-13);border-top:var(--hair-soft); font-size:var(--t-11);color:var(--text-dim)} /* Grupo plegable: el título abre y cierra sus secciones ahí mismo, en la misma columna */ .navgrp,.film-nav-grupo{display:flex;flex-direction:column;margin:var(--sp-9) 0 var(--sp-1)} .navgrp__t,.film-nav-grupo-t{display:flex;align-items:center;justify-content:space-between; width:100%;gap:8px;padding:var(--sp-5) var(--sp-11);background:transparent;border:0;cursor:pointer; font-family:inherit;font-size:var(--fs-xs);font-weight:var(--w-max);text-transform:uppercase; letter-spacing:var(--ls-rotulo-ancho);color:var(--text-dim);border-radius:var(--r-in);transition:color var(--mov-rapido)} .navgrp__t:hover,.film-nav-grupo-t:hover{color:var(--text)} .navgrp__b,.film-nav-grupo-b{display:flex;flex-direction:column} .navchev,.film-nav-chevron{width:16px;height:16px;flex:none;transition:transform var(--mov-rapido)} .navgrp.is-cerrado .navchev,.film-nav-grupo.is-cerrado .film-nav-chevron{transform:rotate(-90deg)} .navgrp.is-cerrado .navgrp__b,.film-nav-grupo.is-cerrado .film-nav-grupo-b{display:none} .navsep{height:1px;background:var(--rule);margin:var(--sp-12) var(--sp-7) var(--sp-9)} /* Enlace de vuelta al índice del producto: clavado al fondo del menú, para que no compita con el botón de contraer que vive arriba (CEO, 2026-08-09) */ .backlink,.film-back{display:flex;align-items:center;gap:13px;font-size:var(--t-13);font-weight:var(--w-fuerte); color:var(--text);text-decoration:none;padding:var(--sp-9) var(--sp-11);border-radius:var(--r-in); background:var(--surface-alt)} .nav .backlink,#nav .film-back{margin-top:auto} .backlink:hover,.film-back:hover{background:var(--surface-strong)} .backlink .ic{font-size:var(--t-17);line-height:var(--lh-pegado);color:var(--accent-ink)} .backlink:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px} .backlink,.backlink:hover,.backlink:focus,.backlink:active,.backlink *{text-decoration:none} /* EL ANILLO DE FOCO, PARA TODO LO QUE SE PUEDE ENFOCAR (2026-08-12). Quien navega con el teclado tiene que saber en todo momento donde esta. Hasta hoy el sistema solo le ponia anillo propio al boton de volver y al de tema; todo lo demas se quedaba con el de fabrica del navegador, que en tema oscuro es un hilo casi negro sobre fondo casi negro: medido a 1,07 y 1,16 a 1, cuando el minimo para una forma sin letra es 3. Va como regla general y ANTES que las especificas de cada componente, para que cualquiera de ellas pueda seguir pisandola si necesita otro color. `:focus-visible` (y no `:focus`) es lo que hace que el anillo salga al tabular y NO al hacer clic con el raton, que es justo lo que molestaba y por lo que se acaba escribiendo `outline:none`. */ a:focus-visible,button:focus-visible,[tabindex]:focus-visible, summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--accent-ink);outline-offset:2px} /* ---- Logotipo lateral: cruce logotipo completo / isologo (crossfade) ---- */ /* El bloque del logotipo lleva 6px a cada lado, para que el logotipo no quede pegado más a la izquierda que las entradas del menú (que arrancan en 16+12). Medido en el tablero canónico. */ /* La caja del logotipo mide 34 de alto (el dibujo, 16). Es lo que da el aire de arriba, y por eso todo lo que va debajo caía 6 píxeles más arriba en los tableros de serie que en el de la película, hasta que se unificó el 2026-08-09. */ .side-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 var(--sp-5) var(--sp-15);flex:none} .side-logo{position:relative;height:34px;flex:1 1 auto;color:var(--text)} .side-logo:hover{opacity:var(--op-total);transform:none;background:none} .side-logo .logo-word,.side-logo .logo-mark{position:absolute;left:6px;top:50%;display:block; transition:opacity var(--mov-lento) ease,transform var(--mov-lento) var(--ease)} .side-logo .logo-word{height:16px;width:auto;opacity:var(--op-total);transform:translateY(-50%)} .side-logo .logo-mark{height:28px;width:28px;left:50%;opacity:var(--op-nada); transform:translate(-50%,-50%) scale(.6) rotate(-8deg)} .side-logo-link{position:absolute;inset:0;z-index:var(--capa-fondo);border-radius:var(--r-md);display:block} .side-logo-link:focus-visible{outline:2px solid var(--text);outline-offset:2px} /* Botón de contraer el menú a solo iconos */ .side-toggle,#side-toggle{width:32px;height:32px;flex:none;display:flex;align-items:center; justify-content:center;border-radius:var(--r-9);color:var(--text-dim);border:var(--hair-soft); background:transparent;cursor:pointer;padding:0; transition:background var(--mov-rapido),color var(--mov-rapido),border-color var(--mov-rapido)} .side-toggle:hover,#side-toggle:hover{background:var(--surface-alt);color:var(--text);border-color:var(--text)} .side-toggle svg,#side-toggle svg{width:17px;height:17px;flex:none;transition:transform var(--mov-lento) var(--ease)} [data-side="collapsed"] .side-toggle svg,[data-side="collapsed"] #side-toggle svg{transform:rotate(180deg)} /* Menú contraído: se queda en iconos y el isologo. Lo pide el usuario con el botón de arriba, y el estado se recuerda entre visitas. */ [data-side="collapsed"] .side, [data-side="collapsed"] #side-rail{padding:var(--sp-16) var(--sp-7)} [data-side="collapsed"] .side-top{flex-direction:column;gap:12px;margin:0 0 var(--sp-14)} [data-side="collapsed"] .side-logo{flex:none;width:100%;height:28px} [data-side="collapsed"] .brand, [data-side="collapsed"] .film-nav-title, [data-side="collapsed"] .side .sub, [data-side="collapsed"] .side .foot, [data-side="collapsed"] .backlink span, [data-side="collapsed"] .film-back span, [data-side="collapsed"] .nav a span, [data-side="collapsed"] #nav .nav-item span, [data-side="collapsed"] .navgrp__t span, [data-side="collapsed"] .film-nav-grupo-t span, [data-side="collapsed"] .navchev, [data-side="collapsed"] .film-nav-chevron, [data-side="collapsed"] .chev{display:none} [data-side="collapsed"] .side-logo .logo-word{opacity:var(--op-nada);transform:translate(-10px,-50%)} [data-side="collapsed"] .side-logo .logo-mark{opacity:var(--op-total);transform:translate(-50%,-50%) scale(1) rotate(0deg)} [data-side="collapsed"] .nav a, [data-side="collapsed"] #nav .nav-item{justify-content:center;padding:var(--sp-9) 0} [data-side="collapsed"] .navgrp__t, [data-side="collapsed"] .film-nav-grupo-t{justify-content:center;padding:var(--sp-5) 0} /* Contraído, un grupo plegado escondería sus iconos y dejaría el menú medio vacío sin forma de reabrirlo (su título ya no se lee). Contraído se ven todos. */ [data-side="collapsed"] .navgrp.is-cerrado .navgrp__b, [data-side="collapsed"] .film-nav-grupo.is-cerrado .film-nav-grupo-b{display:flex} [data-side="collapsed"] .backlink, [data-side="collapsed"] .film-back{justify-content:center;padding:var(--sp-7) 0} /* ============ TOPBAR ============ */ /* La barra superior es TRANSLÚCIDA y desenfoca lo que pasa por debajo. Es el acabado de la película, y en los tableros de serie estaba opaca: la misma barra con dos acabados, que es la diferencia que el CEO vio el 2026-08-09 comparando los dos. El color es el papel de la página al 84 %, así que sigue el tema sin escribir ningún color propio. Se comparte el ACABADO, no la geometría: cada tablero tiene su propio relleno porque su zona de contenido no mide lo mismo, y forzar los dos a la vez descuadraría uno. */ .topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap; position:sticky;top:0;z-index:var(--capa-menu); background:color-mix(in srgb,var(--bg) 84%,transparent); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); /* Los dos negativos sacan la banda hasta los bordes de la pantalla, y por eso valen justo lo que mide el relleno de la zona de contenido. Se CALCULAN de ese mismo token, no se escriben: si mañana el contenido lleva otro relleno, la banda se ajusta sola en vez de quedarse con un escalón por el que se ve pasar el texto. */ margin:calc(var(--sp-18) * -1) calc(var(--sp-20) * -1) var(--sp-16); padding:var(--sp-14) var(--sp-20) var(--sp-12);border-bottom:var(--hair-soft)} .topbar h1{margin:0;font-size:var(--t-26);font-weight:var(--w-fuerte);letter-spacing:var(--ls-medio)} .topbar .crumb{font-size:var(--t-11);color:var(--text-dim);text-transform:uppercase;letter-spacing:1.3px;margin-bottom:var(--sp-4)} /* EL CAMBIO CLARO/OSCURO SE HACE CON EL SOL Y LA LUNA (CEO, 2026-08-10). La palabra «Tema» está PROHIBIDA, y también «Modo» y «Theme». Un botón de texto obliga a leer, hay que traducirlo y encima no dice qué va a pasar. Dos dibujos lo dicen solos. Dentro del botón van los DOS y se cruzan aquí: se ve el del tema CONTRARIO, o sea a dónde te lleva pulsarlo. En claro se ve la luna; en oscuro, el sol. Redondo, del tamaño mínimo que se puede pulsar con el dedo sin fallar (36 píxeles). */ .theme-btn{background:var(--surface-alt);border:var(--hair-soft);color:var(--text);border-radius:var(--r-circle); width:36px;height:36px;padding:0;flex:none;cursor:pointer;font-family:inherit; display:inline-flex;align-items:center;justify-content:center;position:relative; transition:background var(--mov-rapido),border-color var(--mov-rapido)} .theme-btn:hover{background:var(--surface-strong);border-color:var(--text)} .theme-btn:focus-visible{outline:2px solid var(--text);outline-offset:2px} .theme-btn .ic-sol,.theme-btn .ic-luna{width:18px;height:18px;position:absolute; transition:opacity var(--mov-rapido),transform var(--mov-rapido)} /* en CLARO se ve la luna: pulsar te lleva a oscuro */ .theme-btn .ic-sol{opacity:var(--op-nada);transform:rotate(-45deg) scale(.7)} .theme-btn .ic-luna{opacity:var(--op-total);transform:none} /* en OSCURO se ve el sol: pulsar te devuelve a claro */ html[data-theme="dark"] .theme-btn .ic-sol{opacity:var(--op-total);transform:none} html[data-theme="dark"] .theme-btn .ic-luna{opacity:var(--op-nada);transform:rotate(45deg) scale(.7)} /* ============ TARJETAS / ESTADÍSTICAS / CABECERA ============ */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:var(--sp-15) 0} .stat{background:var(--surface);border:var(--hair-soft);border-radius:var(--r-lg);padding:var(--sp-16) var(--sp-16b) var(--sp-15);box-shadow:var(--sh-1)} .stat .n{font-family:var(--display);font-size:var(--fs-stat);font-weight:var(--w-normal);color:var(--accent-ink);line-height:var(--lh-pegado);letter-spacing:var(--ls-titulo)} .stat .l{font-size:var(--fs-xs);font-weight:var(--w-fuerte);color:var(--text-dim);text-transform:uppercase;letter-spacing:var(--ls-rotulo-ancho);margin-top:var(--sp-7)} .card{background:var(--surface);border:var(--hair-soft);border-radius:var(--r-lg);padding:var(--sp-14);box-shadow:var(--sh-1)} /* Una cadena sin espacios mas ancha que la tarjeta (una ruta, un nombre tecnico compuesto) desbordaba el cuerpo entero en movil: 25px medidos en la vista de inventario de Utopia (QA del 16/08). Solo parte cuando no hay otro sitio. */ .card p{overflow-wrap:anywhere} .hero{background:var(--surface-alt);border:var(--hair-soft);border-radius:var(--r-hero);padding:var(--sp-19b) var(--sp-18b);margin-bottom:var(--sp-16b)} .hero h1{margin:0 0 var(--sp-5);font-size:var(--fs-hero);font-weight:var(--w-normal);letter-spacing:var(--ls-titulo);line-height:var(--lh-pegado)} .hero .lead{font-size:var(--fs-lead);color:var(--text-dim);margin:var(--sp-9) 0} .hero .meta{font-size:var(--t-13);color:var(--text-dim);margin-top:var(--sp-7)} /* --- LOS DOS BOTONES DE LA CASA: fantasma y sólido --- LA FORMA LA COMPARTEN LOS DOS (CEO, 2026-08-11). Hasta hoy la geometría (ser una caja en línea, el aire de dentro, el radio de píldora y el filete) vivía SOLO en `.btn-ghost`, y `.btn-primary` declaraba únicamente fondo, letra y grosor. O sea: `btn-primary` no era un botón, era una capa de pintura para el botón fantasma. Mientras los dos nombres viajaran juntos (`class="btn-ghost btn-primary"`, 44 sitios) no se notaba. Pero hay 17 sitios que piden `btn-primary` a secas, y ahí salía un rectángulo sin aire de 15 píxeles de alto al lado de su vecino de 30. El «Guardar» del editor de comentarios es uno de ellos, y es el que el CEO señaló. Por qué ningún control lo cazó: su contraste es perfecto. Letra clara sobre fondo oscuro, diez y pico sobre uno. Las puertas de la casa miden color, y aquí el color estaba bien. Lo que faltaba era la FORMA, que no la mide nadie. Gotcha 198. Se añaden además dos cosas que faltaban en los dos: la tipografía de la página (un