/* * marca.css — Identidad visual de Tarsis One (01/09/2026). * * De dónde sale: Jacobo trajo el logo nuevo (máscara tartésica dorada + «TARSIS» cian + * «ONE» dorado) y un documento de propuesta gráfica, `Tarsis_One_Liquid_Glass_Design_ * Foundation.md`, con el encargo explícito de NO aplicarlo como decisión unilateral, sino * de contrastarlo con lo que el proyecto ya tenía decidido y respetar lo que tiene peso. * Esto es el resultado de ese contraste. Las tres decisiones que lo definen: * * 1. EL FONDO BLANCO MANDA, y eso invierte el documento. La propuesta recomienda modo * oscuro como experiencia principal (obsidiana/navy). Jacobo pidió lo contrario: «debe * predominar el fondo limpio y blanco». Así que la paleta oscura del documento NO es la * base del producto — es la paleta del TEMA OSCURO, que es exactamente su sitio y donde * mejora al gris neutro que teníamos. * * 2. EL CIAN DE MARCA NO PUEDE SER TEXTO SOBRE BLANCO. Medido: #18D7F4 sobre blanco da * 1,74 de contraste, y el mínimo legible es 4,5. El oro, 2,08. Los dos están calculados * para fondo oscuro. Sobre blanco hacen falta versiones oscurecidas del MISMO tono * (188°), igual que hoy el verde de marca #63BE21 convive con el #3f6b1e de los textos. * Por eso hay dos escalones y no uno: * cian de MARCA #18D7F4 · relleno, indicadores, gráficos, el logo, tinte del vidrio * cian de TEXTO #0E7E8F · enlaces, rótulos, fondos sólidos con texto blanco (4,77) * Poner el cian de marca en un enlace sería el error que este bloque existe para evitar. * * 3. NO SE RENOMBRAN LOS TOKENS. La familia `--verde-*` está usada ~250 veces en 4.000 * líneas de CSS y en el JS. Renombrarla sería una limpieza cosmética con riesgo real de * romper algo invisible (la lección del 31/08: borrar por posición en un fichero grande * es una apuesta, no una limpieza). Se cambia el VALOR y se deja el nombre: el token es * «el acento de la marca», y la marca ya no es verde. El día que se renombre, se hace * con un script que verifique referencias, no a mano. * * Lo que el documento aporta y se adopta: la tipografía (Sora + Inter frente a Arial), el * oro como color patrimonial con papel acotado, la paleta oscura, los radios, el motion y * la regla de que el símbolo NO se repite en todos los módulos. * * Lo que se respeta del proyecto y no se toca: el Liquid Glass (directriz de Jacobo del * 18/07/2026, `docs/DISENO-LIQUID-GLASS.md`), la marca de agua de Mitra, y las carpetas y * los resultados de búsqueda de Radar. * * Se carga DESPUÉS de liquid.css: gana la cascada con los mismos selectores. */ /* ============================== Tipografía vendorizada ============================== Fuentes VARIABLES: un solo fichero cubre todos los pesos (Google sirve el mismo woff2 para 400, 500, 600 y 700 — comprobado por md5). Van vendorizadas, no enlazadas: el proyecto no hace peticiones externas en tiempo de ejecución, igual que el mapa de España. 73 KB entre las dos, subconjunto latino. */ @font-face { font-family: 'Sora'; src: url('/vendor/fuentes/sora.woff2?v=779e9507b3') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/vendor/fuentes/inter.woff2?v=f11d729bb0') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* --- COLORES DE MARCA, tal como vienen del documento y del propio logo ------------- (el logo real usa #00CCF8 y #E8B830; los tokens del documento son su versión ligeramente calmada, que es la que funciona en interfaz. Se usan los del documento.) */ --tarsis-cian: #18D7F4; --tarsis-cian-vivo: #43E7FF; --tarsis-oro: #D7AF43; --tarsis-oro-claro: #E8C966; --tarsis-oro-oscuro: #A98224; /* --- LOS COLORES EN LOS QUE ESTÁ IMPRESO EL LOGO (Jacobo, 01/09/2026) ----------------- El logo llegó con los colores de marca tal cual —cian de neón y oro brillante— y sobre blanco desaparecía: 1,87 y 1,80 de contraste, cuando lo mínimo para que un gráfico se lea son 3,0. Sobre el navy del tema oscuro daban 10, así que el mismo fichero parecía dos logos distintos. Jacobo pidió UN SOLO logo legible en los dos fondos. Barriendo brillo Y saturación sobre el tono exacto del logo, el techo de un color único está en 4,3 — y se alcanza sin apagarlo: este cian conserva el 75 % de saturación. cian #0086A3 4,25 sobre blanco · 4,45 sobre navy oro #A5702C 4,24 sobre blanco · 4,47 sobre navy El ORO es EXACTAMENTE el del botón BRONCE (encargo de Jacobo: «que coincida con el color del botón de bronce»). El primer intento fue #9A7304, del mismo peso pero un oro oliváceo de luz 31 %: correcto por contraste y apagado a la vista. El bronce sube a luz 41 % y es más cálido, así que el logo aclara sin perder legibilidad. El cian se recalculó para pesar lo MISMO que el bronce sobre blanco, y a ese peso el más saturado posible es este —al 100 %, frente al 75 % de antes—: aclara y además gana viveza. No sustituyen a los de arriba: aquellos siguen siendo el color de MARCA para rellenos, indicadores y gráficos, donde el tamaño y la masa hacen que sí se vean. Estos son los del DIBUJO, que es todo trazo fino y no se puede permitir el lujo. */ --tarsis-cian-logo: #0086A3; --tarsis-oro-logo: #A5702C; /* * EL COLOR DE LO COMPARADO (07/09/2026, encargo de Jacobo: «el comparativo de color bronce * dorado, también el del sistema»). Es el MISMO bronce del plan —#A5702C— y por eso tiene token * propio en vez de ir escrito a mano en la gráfica: sobre el fondo oscuro ese bronce se hunde, * igual que le pasa al cian, así que allí aclara al oro de marca. Es la misma regla que ya sigue * `--verde-oscuro`: en oscuro el acento ACLARA, no oscurece. */ --comparado: #A5702C; /* --- Escalones oscurecidos para fondo BLANCO. El número entre paréntesis es el contraste medido sobre blanco; 4,5 es el mínimo para texto normal. */ --tarsis-cian-medio: #12A9C4; /* 2,80 — reglas, bordes, relleno decorativo */ --tarsis-cian-texto: #0E7E8F; /* 4,77 — enlaces y rótulos */ --tarsis-cian-hondo: #0C6C7A; /* 6,10 — texto sobre tinte claro */ --tarsis-cian-tinta: #0A5A66; /* 7,87 — texto fuerte */ /* --- LA FAMILIA DE ACENTO. Mismo nombre de siempre, valor nuevo (ver cabecera §3). El brillo de cada tono se conserva del verde original y solo rota el tono: así el diseño mantiene su ritmo tonal y únicamente cambia el color. */ --verde: #12A9C4; --verde-oscuro: #0E7E8F; --verde-solido: #0E7E8F; --verde-texto: #0C6C7A; --verde-texto-2: #0A5A66; /* Los tintes van MÁS APAGADOS de lo que salía al rotar el tono sin más, y esto es un ajuste hecho mirando, no calculando: a la misma luminosidad el cian claro pesa más que el verde claro —el ojo es más sensible al azul contra blanco—, así que la rotación mecánica dejaba las tarjetas sin leer del Radar gritando en turquesa. Bajada la saturación, el fondo vuelve a leerse como blanco con un matiz, que es el encargo. */ --verde-bg: #E9F7FB; --verde-sinleer: #E4F7FD; --verde-sinleer-bd: #B7E4F0; --verde-bg-hover: #F1FAFD; --verde-bg-cal: #F7FCFE; --verde-bg-panel: #F0F9FC; --verde-bg-dg: #EDF8FC; --verde-bg-badge: #DDF2F9; --verde-bg-chip: #D6EFF7; --verde-bd: #C9E9F2; --verde-bd-2: #B4E0EC; --verde-bd-dg: #C4E7F2; --verde-bd-card: #C2E2EA; --verde-bd-sub: #DCEFF4; --verde-foto: #EBF2F4; /* `--verde-ok` NO se toca: es el verde SEMÁNTICO de «correcto», y el documento es explícito en que los colores semánticos no se sustituyen por el color de marca. */ /* --- ORO. Sustituye al ámbar. Papel acotado por el documento: marca, premium y estados especiales; nunca superficies grandes ni botón primario general. */ --ambar: #A98224; --ambar-fondo: #FBF4E2; /* --- Tipografía. Sora para lo que es marca e interfaz (títulos, navegación, botones, números destacados) e Inter para el texto denso (tablas, formularios, listas de impactos). Es la combinación que recomienda el documento y la que hace que las letras del logo no queden huérfanas al lado de una Arial. */ --tipo-marca: 'Sora', 'Segoe UI', system-ui, sans-serif; --tipo-texto: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; } /* ============================== TEMA OSCURO ============================== Aquí SÍ manda el documento: obsidiana y navy en vez del gris neutro que había. Es su sitio natural, y de paso el tema oscuro deja de ser «el claro apagado» para tener identidad propia. Los textos usan el blanco azulado del documento, nunca #fff puro. */ html[data-modo="incognito-oscuro"] { --fondo: #08111E; /* obsidiana */ --superficie: #0D1828; /* medianoche */ --superficie-2: #111E30; /* navy profundo */ --marco: #050A11; /* vacío */ --gris-fila: #101B2B; --texto: #F5F8FC; --texto-suave: #B9C5D6; --linea: #1E2C42; --verde: #2FC6E0; --verde-oscuro: #5FE0F5; /* en oscuro el acento de texto ACLARA, no oscurece */ --comparado: #D7AF43; /* el mismo bronce, en su variante legible sobre obsidiana */ --verde-solido: #0E5E6C; --verde-texto: #8DE9FA; --verde-texto-2: #B7F2FF; --verde-bg: #10283A; --verde-sinleer: #0F2E3C; --verde-sinleer-bd: #1D5568; --verde-bg-hover: #122A3C; --verde-bg-cal: #0C1E2E; --verde-bg-panel: #0C2030; --verde-bg-dg: #102636; --verde-bg-badge: #14364A; --verde-bg-chip: #123043; --verde-bd: #1E3D52; --verde-bd-2: #275068; --verde-bd-dg: #1E3D52; --verde-bd-card: #1E3D52; --verde-bd-sub: #183346; --verde-foto: #14283A; --ambar: #E8C966; --ambar-fondo: #2A2313; /* El vidrio, en oscuro, sobre navy: el canto especular baja y el vidrio se oscurece. */ --lg-vidrio: rgba(20, 38, 60, 0.56); --lg-vidrio-denso: rgba(20, 38, 60, 0.70); --lg-panel: rgba(17, 30, 48, 0.80); --lg-panel-solido: rgba(17, 30, 48, 0.94); --lg-rim: rgba(255, 255, 255, 0.12); --lg-rim-suave: rgba(255, 255, 255, 0.06); --lg-borde: rgba(150, 200, 220, 0.16); } /* El borde del vidrio en claro llevaba un tinte VERDE (rgba(120,130,120,…)). Se pasa a un gris azulado neutro: con la marca en cian, un canto verdoso desafinaba. */ :root { --lg-borde: rgba(90, 120, 135, 0.22); } /* ============================== Tipografía aplicada ============================== */ html, body { font-family: var(--tipo-texto); } /* Sora en lo que es marca e interfaz. Ligeramente apretada: la geométrica pide menos espacio entre letras que la Arial que había, y si no los títulos se ven flojos. */ h1, h2, h3, h4, .logo, .barra-superior button, .btn-nav, .tar-radar-btn, .tar-pill, .boton-primario, .boton-secundario, .badge, .dos-meta, .subtitulo { font-family: var(--tipo-marca); } h1, h2, h3, h4 { letter-spacing: -.018em; } h1 { letter-spacing: -.028em; } /* Las MAYÚSCULAS solo funcionan en etiquetas pequeñas, y con aire entre letras (regla §11 del documento). Es donde ya vive la insignia del plan. */ .badge, .tar-plan, .dos-etiqueta { letter-spacing: .06em; } /* ============================== El logo en la cabecera ============================== El lockup horizontal es la versión principal (regla §19 del documento). El símbolo va al ~115 % de la altura visual del texto, que es la proporción que trae el propio fichero, así que basta con fijar la altura del conjunto. */ /* ALINEADO POR EL CENTRO DEL TEXTO, no por el de la imagen (Jacobo, 01/09/2026: «que se vea que están alineados por el centro, siendo el centro del texto del logo el centro del logo al completo»). La máscara baja mucho más que las letras, así que el centro del dibujo y el centro de lo que se lee NO son el mismo punto: en el fichero hay 11,5 px de diferencia sobre 132 de alto. Centrando la imagen —que es lo que hacía el navegador— las letras quedaban 2,5 px por debajo de los botones, que estaban todos clavados en la misma línea. El desplazamiento va en PROPORCIÓN a la altura (11,5/132 = 0,087) y no como un número fijo, para que siga valiendo si algún día se cambia el tamaño del logo. Y va en `transform`, que no ocupa espacio: así no altera la altura de la barra. */ .logo-tarsis { --logo-alto: 30px; height: var(--logo-alto); width: auto; display: block; transform: translateY(calc(var(--logo-alto) * -0.087)); } @media (max-width: 720px) { .logo-tarsis { --logo-alto: 26px; } } /* ============================== Foco y selección ============================== */ :focus-visible { outline: 2px solid var(--tarsis-cian-texto); outline-offset: 2px; } ::selection { background: rgba(24, 215, 244, .26); } /* ============================== Movimiento ============================== La curva del documento. Es más contenida que un rebote y encaja con el vidrio: las cosas entran deprisa y se posan, no saltan. */ :root { --ease-premium: cubic-bezier(.2, .8, .2, 1); --dur-rapida: 160ms; --dur-ui: 220ms; --dur-panel: 340ms; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ============================== El oro, con su papel acotado ============================== Regla del documento (§2.2 y §27): el oro es marca, valor y estados especiales; nunca superficies grandes ni el botón primario. Aquí se le dan sus tres sitios y ninguno más. NO se le da a la insignia BRONCE, aunque parezca lo obvio: la escalera del negocio es Gratis → Bronce → **Oro**, así que el oro tiene que quedar libre para el plan que viene. El bronce se queda bronce (#a5702c). */ /* 1. PRO — lo que exige plan de pago. */ .tar-herr-pro { /* #A98224 daba 3,29 sobre este tinte y es texto de 10 px, que exige 4,5. Medido al aplicar los colores del logo, y arreglado de paso porque es la misma familia. #8A6A15 da 4,68. */ color: #8A6A15; background: rgba(215, 175, 67, .11); border-color: rgba(215, 175, 67, .34); } html[data-modo="incognito-oscuro"] .tar-herr-pro { color: var(--tarsis-oro-claro); background: rgba(215, 175, 67, .14); border-color: rgba(215, 175, 67, .30); } /* 2. (Retirado el 23/09/2026.) El tablón GLOBAL de Tareas llevaba el borde de oro por ser el tablón especial; desde que es un tablón más (Jacobo: se renombra, se mueve y se borra como cualquiera), ya no hay nada especial que señalar. */ /* 3. La máscara. Vive en el logo y en el favicon, y en ningún otro sitio (regla §20: repetirla en cada módulo le quita valor simbólico). */ /* La mesa de las CARPETAS de dossiers llevaba un gris verdoso (#f1f4ee) que era el verde de la marca vieja rebajado. Se pasa a un gris frío del mismo peso: las carpetas y su comportamiento no se tocan —son decisión con peso del proyecto—, solo el color del tapete. */ :root { --tar-zona-carpetas: #EEF3F5; } html[data-modo="incognito-oscuro"] { --tar-zona-carpetas: #0C1828; } /* ==================== LA CABECERA, HIJA DEL LOGO ==================== * «Que todos los botones del header sean coherentes y se note que son hijos del logo» * (Jacobo, 01/09/2026). De las cuatro propuestas eligió la CÁPSULA GRABADA, que toma dos * cosas del dibujo y ninguna es una copia de él: * * · DEL LOGOTIPO, las mayúsculas con mucho aire entre letras. Es su rasgo más * reconocible —«T A R S I S O N E»— y el que hace que un botón se lea como pariente * suyo sin dibujar nada. * · DE LA MÁSCARA, la grieta: la línea vertical que le parte la cara en dos mitades. * Aquí separa a Radar de Mitra dentro de una cápsula compartida. * * Y respeta el Liquid Glass, que es directriz con peso: la cápsula sigue siendo la forma * por defecto de los controles, y el vidrio se queda en UN solo sitio por grupo. */ /* SIN CÁPSULA ENVOLVENTE (Jacobo, 01/09/2026: «no debe ser una pastilla, basta con que haya un separador»). El primer montaje metía a Radar y Mitra dentro de una cápsula de vidrio, y eran dos marcos concéntricos discutiendo: el de fuera y el del botón activo. Ahora el grupo no dibuja nada — solo ordena— y lo único que se ve es la grieta entre los dos y la pastilla cian del que está abierto. De paso desaparece el vidrio sobre vidrio del que hablaba la regla §8, porque ya no hay vidrio ninguno aquí. */ .tar-herr-grupo { display: inline-flex; align-items: center; gap: 0; padding: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .tar-herr-grupo .tar-radar-menu { display: inline-flex; } /* Los botones, dentro del grupo: planos, en versalitas espaciadas. */ .tar-herr-grupo .tar-radar-btn { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; font-family: var(--tipo-marca); font-size: .75rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; padding: 8px 17px; transition: color var(--dur-ui, .22s) var(--ease-premium, ease), background var(--dur-ui, .22s) var(--ease-premium, ease); } .tar-herr-grupo .tar-radar-btn:hover { background: rgba(0,134,163,.07); color: var(--verde-oscuro); } html[data-modo="incognito-oscuro"] .tar-herr-grupo .tar-radar-btn:hover { background: rgba(47,198,224,.12); } /* LA HERRAMIENTA ABIERTA. El cian es el de «TARSIS», que es la mitad del logo que nombra a la plataforma; el bronce se reserva para la cuenta (ver más abajo). */ .tar-herr-grupo .tar-radar-btn.activo { background: rgba(0,134,163,.09); color: var(--verde-oscuro); box-shadow: inset 0 0 0 1.5px var(--verde-oscuro); border-radius: 999px; } html[data-modo="incognito-oscuro"] .tar-herr-grupo .tar-radar-btn.activo { background: rgba(47,198,224,.14); box-shadow: inset 0 0 0 1.5px rgba(95,224,245,.55); } /* EL DESPLEGABLE DE RADAR ES LA MISMA CÁPSULA, EN VERTICAL (01/09/2026). Primer intento: solo se les pusieron las versalitas y se dejaron como estaban — tres trozos de vidrio sueltos de 37 px de alto, con sombra de panel flotante, al lado de unos botones planos de 34. No se parecían en nada a la cabecera y Jacobo lo cazó a la primera. Ahora el vidrio vive en la CAJA y las filas van planas, exactamente igual que Radar y Mitra dentro de su grupo; entre fila y fila, la misma grieta, aquí tumbada. */ .tar-submenu-caja { display: flex; flex-direction: column; align-items: stretch; min-width: 216px; padding: 3px; border-radius: 18px; background: var(--lg-panel-solido, rgba(255,255,255,.94)); border: 1.5px solid var(--lg-borde, rgba(0,0,0,.1)); backdrop-filter: blur(var(--lg-blur, 18px)) saturate(var(--lg-sat, 1.75)); -webkit-backdrop-filter: blur(var(--lg-blur, 18px)) saturate(var(--lg-sat, 1.75)); box-shadow: var(--lg-sombra, 0 8px 24px rgba(0,0,0,.1)); transform-origin: top left; opacity: 0; transform: translateY(-9px) scale(.97); pointer-events: none; transition: opacity .2s ease, transform .3s cubic-bezier(.34,1.4,.64,1); } /* Se abre con los MISMOS disparadores que tenían las pastillas, para no tocar la interacción: hover del botón, hover del propio menú, o foco de teclado. */ .tar-radar-btn:hover + .tar-submenu .tar-submenu-caja, .tar-submenu:hover .tar-submenu-caja, .tar-radar-menu:has(:focus-visible) .tar-submenu-caja { opacity: 1; transform: none; pointer-events: auto; } .tar-radar-menu.cerrado .tar-submenu-caja { opacity: 0 !important; transform: translateY(-9px) scale(.97) !important; pointer-events: none !important; } /* Las filas: planas y con la métrica EXACTA de los botones del grupo. Vale para el desplegable Y para el índice de Configuración: es la misma pieza en dos sitios, así que comparte selector en vez de duplicarse (si se duplicara, se separarían con el tiempo). */ .tar-submenu .tar-pill, .cfg-nav .tar-pill { /* `pointer-events: INHERIT`, y esto no es un detalle: con `auto` las filas seguían siendo tocables aunque su caja estuviera invisible, así que pasar el ratón por DONDE ESTARÍA el menú —debajo de Mitra, debajo del plan— lo abría. El menú se desplegaba desde su propio fantasma. Heredando, la caja manda: si ella no recibe el ratón, sus filas tampoco, y el menú solo se abre desde la pastilla o el icono. */ opacity: 1; transform: none; pointer-events: inherit; transition-delay: 0s !important; align-self: stretch; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 8px 15px; font-family: var(--tipo-marca); font-size: .75rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; transition: background var(--dur-ui, .22s) var(--ease-premium, ease), color var(--dur-ui, .22s) var(--ease-premium, ease); } .tar-submenu .tar-pill:hover, .cfg-nav .tar-pill:hover { background: rgba(0,134,163,.08); color: var(--verde-oscuro); } html[data-modo="incognito-oscuro"] .tar-submenu .tar-pill:hover, html[data-modo="incognito-oscuro"] .cfg-nav .tar-pill:hover { background: rgba(47,198,224,.13); } /* LA GRIETA, tumbada: separa fila de fila igual que separa a Radar de Mitra. */ .tar-submenu .tar-pill + .tar-pill, .cfg-nav .tar-pill + .tar-pill { border-top: 1.5px solid var(--lg-borde, rgba(0,0,0,.1)); } /* LAS ESQUINAS DEL RESALTADO SIGUEN A LA CAJA (Jacobo, 01/09/2026). Cuando una fila se pinta —al pasar el ratón, o porque es una carpeta con color— su forma tiene que encajar con la cápsula que la contiene: la de arriba redondea SOLO arriba, la de abajo SOLO abajo, y las del medio van rectas. Antes la primera era una pastilla entera y sobresalía del dibujo. 15 px y no 18: es el radio de la caja menos su relleno, que es la regla de radios concéntricos del Liquid Glass — el hijo tiene el radio del padre menos el hueco. */ .tar-submenu .tar-pill, .cfg-nav .tar-pill { border-radius: 0; } .tar-submenu .tar-pill:first-child, .cfg-nav .tar-pill:first-child { border-radius: 15px 15px 0 0; } .tar-submenu .tar-pill:last-child, .cfg-nav .tar-pill:last-child { border-radius: 0 0 15px 15px; } .tar-submenu .tar-pill:only-child, .cfg-nav .tar-pill:only-child { border-radius: 15px; } /* La carpeta fijada conserva SU color —es una función, no decoración— pero ya como fila. */ .tar-submenu .tar-pill-carpeta { background: color-mix(in srgb, var(--pill-color, #F5D76E) 88%, transparent); } .tar-submenu .tar-pill-carpeta:hover { background: var(--pill-color, #F5D76E); } /* LA ZONA DE LA CUENTA, con la misma regla que la de las herramientas (Jacobo, 01/09/2026): SOLO SE ENCAPSULA LO QUE ES UN ESTADO, no lo que es una acción. · A la izquierda: la herramienta ABIERTA lleva pastilla; la otra es texto suelto. · A la derecha: el PLAN lleva pastilla —es un estado de la cuenta, y además el único sitio donde el bronce es un fondo—; «Salir» y el conmutador de tema son acciones y van desnudos, con el mismo color que Radar y Mitra. El primer montaje les puso a los dos borde y color bronce, y quedaban como dos botones compitiendo con la insignia del plan que tenían al lado. */ .tar-plan { border-width: 1.5px; letter-spacing: .11em; font-family: var(--tipo-marca); } /* ADMIN (la cuenta de Jacobo) y ORGANIZACIÓN (el nombre de la organización en vez de BRONCE), 10/09/2026. Van AQUÍ y no en tarsis.css porque liquid.css pinta `.tar-plan` como vidrio de control (fondo incluido) y, cargándose después, dejaba la pastilla ADMIN en blanco sobre blanco. El admin puede pulsar la suya para ver Tarsis como una cuenta Bronce. */ .tar-plan-admin { background: var(--tarsis-cian-tinta, #0A5A66); border-color: var(--tarsis-cian-tinta, #0A5A66); color: #fff; cursor: pointer; } .tar-plan-admin:hover { filter: brightness(1.15); } .tar-plan-org { background: var(--lg-vidrio, rgba(255,255,255,.55)); border-color: var(--lg-borde, rgba(0,0,0,.14)); color: var(--texto); text-transform: none; letter-spacing: .02em; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default; } /* El admin «viendo como Bronce»: la pastilla dice BRONCE pero lleva un aro, para que se sepa que es una vista y que pulsándola se vuelve. */ .tar-plan-previa { box-shadow: 0 0 0 2px color-mix(in srgb, var(--tarsis-cian-medio, #12A9C4) 45%, transparent); cursor: pointer; } /* La zona de la cuenta era un `` en bloque, así que sus hijos se alineaban por la LÍNEA BASE del texto y no por el centro: por eso el engranaje no cuadraba con la pastilla del plan (Jacobo, 01/09/2026). Con flex y `center` se alinean de verdad. */ /* LA MISMA DISTANCIA TRES VECES (Jacobo, 10/09/2026): pastilla → divisor → engranaje → borde de la barra. Medido antes: 10, 16 y 40 px (el hueco de la zona; ese hueco más el margen del menú; y los 24 px que el marco interior, centrado a 1080, dejaba a cada lado más sus 16 de relleno). Primero fueron 24 px las tres; Jacobo las vio en su pantalla y pidió menos aire («deja menos espacio entre el botón de configuración, el de dividir pantalla y admin», 11/09): ahora son 16 px las tres. El hueco de la zona es 16, el menú del engranaje no añade margen, y el marco interior deja de centrarse: ocupa la barra entera con 15 px de relleno a la derecha (más el borde de 1 px: 16 hasta el canto visible) y, a la izquierda, el mismo relleno que antes le daba el centrado —calculado con el ancho de la barra, en cualquier ventana—, para que el logo no se mueva ni un píxel. En móvil el relleno izquierdo también es 16: simétrico. */ .barra-superior #cuenta-zona { display: inline-flex; align-items: center; gap: 16px; } /* LOS TRES ICONOS, JUNTOS (Jacobo, 11/09/2026): dividir · PDF · engranaje van en su propio grupo con 6 px entre ellos. Los 16 de la zona quedan solo entre la pastilla y el grupo. */ .tar-cab-iconos { display: inline-flex; align-items: center; gap: 6px; } /* ══ EL PANEL EDITABLE (11/09/2026) ══ Los accesos directos de la barra en modo edición: cada uno con su flecha para cambiarlo y un «+» al final para añadir; y fuera de la edición, la flecha «›» que recoge los que no caben. Los desplegables son la misma cápsula de siempre, abierta por CLIC (clase `abierto`) y no por hover: en edición no hay hover que valga. */ .tar-acc { position: relative; display: inline-flex; align-items: center; } .tar-herr-grupo.editando { flex-wrap: wrap; row-gap: 6px; } .tar-herr-grupo.editando [data-herr] { pointer-events: none; } .tar-herr-grupo.editando .tar-radar-menu .tar-submenu:not(.tar-elige) { display: none; } .tar-acc-cambiar, .tar-acc-mas { width: 22px; height: 22px; padding: 0; margin-left: 2px; border-radius: 999px; cursor: pointer; display: inline-grid; place-items: center; color: var(--texto); border: 1.5px solid var(--lg-borde, rgba(0,0,0,.14)); background: var(--lg-panel-solido, rgba(255,255,255,.94)); transition: background var(--dur-ui, .22s) var(--ease-premium, ease), color var(--dur-ui, .22s) var(--ease-premium, ease); } .tar-acc-cambiar .tar-ico, .tar-acc-mas .tar-ico { width: 13px; height: 13px; vertical-align: 0; } .tar-acc-mas { margin-left: 10px; } .tar-acc-cambiar:hover, .tar-acc-mas:hover { background: rgba(0,134,163,.09); color: var(--verde-oscuro); border-color: var(--verde-oscuro); } .tar-elige { z-index: 90; } .tar-elige.abierto { pointer-events: auto; } .tar-elige.abierto .tar-submenu-caja { opacity: 1; transform: none; pointer-events: auto; } .tar-submenu .tar-pill-quitar { color: #b00020; } .tar-mas .tar-mas-btn { padding: 8px 10px; } .tar-mas .tar-mas-btn .tar-ico { width: 15px; height: 15px; vertical-align: 0; } .tar-acc.tar-oculto { display: none !important; } .tar-submenu .tar-pill.activo { background: rgba(0,134,163,.09); color: var(--verde-oscuro); } .barra-interior { max-width: none; margin: 0; padding: 8px 15px 8px max(16px, calc((100% - var(--max) + 32px) / 2)); } .tar-menu-ajustes { margin-left: 0; align-self: center; } .tar-salir, .barra-superior .btn-nav { border: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--texto); transition: background var(--dur-ui, .22s) var(--ease-premium, ease), color var(--dur-ui, .22s) var(--ease-premium, ease); } .tar-salir { font-family: var(--tipo-marca); font-size: .75rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; padding: 8px 15px; border-radius: 999px; } .barra-superior .btn-nav { border-radius: 999px; } /* Al pasar el ratón aparece la misma pastilla cian que en Radar y Mitra: es la señal de «esto se puede pulsar», y tiene que ser una sola en toda la barra. */ .tar-salir:hover, .barra-superior .btn-nav:hover { background: rgba(0,134,163,.08); color: var(--verde-oscuro); border-color: transparent; } html[data-modo="incognito-oscuro"] .tar-salir:hover, html[data-modo="incognito-oscuro"] .barra-superior .btn-nav:hover { background: rgba(47,198,224,.13); } /* En pantalla estrecha la cápsula compartida no se parte: se encoge. */ @media (max-width: 720px) { .tar-herr-grupo .tar-radar-btn { font-size: .6875rem; padding: 7px 12px; letter-spacing: .08em; } .tar-salir { font-size: .65625rem; padding: 5px 11px; } } /* EL AIRE A LOS DOS LADOS DEL LOGO, IGUAL (Jacobo, 01/09/2026: «tiene que estar equilibrado»). Medido antes de tocar nada: del canto de la barra al primer píxel de la máscara había 16,8 px, y del último píxel de «ONE» a la cápsula de Radar solo 12 — el `gap` de la barra—. El logo quedaba escorado. El margen extra lleva ese hueco al mismo valor que el sangrado de la barra, así que el logo respira lo mismo por los dos lados. */ .barra-superior .logo { margin-right: 5px; } /* ==================== EL MENÚ DE AJUSTES (engranaje) ==================== * Reutiliza la caja del desplegable de Radar —vidrio en la caja, filas planas, la grieta * entre ellas— porque no puede haber dos clases de menú en el mismo producto. Lo único * distinto es de qué lado se descuelga: este vive en el canto derecho, así que se ancla a * la derecha o se saldría de la pantalla. */ .tar-menu-ajustes { position: relative; display: inline-flex; } .tar-submenu-der { left: auto; right: 0; } .tar-submenu-der .tar-submenu-caja { transform-origin: top right; } .tar-menu-ajustes:hover .tar-submenu, .tar-menu-ajustes:has(:focus-visible) .tar-submenu { pointer-events: auto; } .tar-menu-ajustes:hover .tar-submenu-caja, .tar-menu-ajustes:has(:focus-visible) .tar-submenu-caja { opacity: 1; transform: none; pointer-events: auto; } .tar-menu-ajustes.cerrado .tar-submenu-caja { opacity: 0 !important; transform: translateY(-9px) scale(.97) !important; pointer-events: none !important; } /* El engranaje gira un poco al pasar por encima: es el único adorno de la barra y encaja con lo que el objeto ES — una rueda dentada. Se apaga con «movimiento reducido». */ .tar-engranaje .tar-ico { transition: transform var(--dur-panel, .34s) var(--ease-premium, ease); } .tar-menu-ajustes:hover .tar-engranaje .tar-ico { transform: rotate(60deg); } @media (prefers-reduced-motion: reduce) { .tar-menu-ajustes:hover .tar-engranaje .tar-ico { transform: none; } } /* Las filas de este menú llevan icono, así que necesitan algo más de sitio que las de Radar. */ .tar-submenu-der .tar-pill { min-width: 190px; gap: 10px; } /* ==================== LA PÁGINA DE CONFIGURACIÓN ==================== * Dos columnas: a la izquierda los apartados, en la MISMA caja del desplegable —vidrio en la * caja, filas planas, la grieta entre ellas— para que la navegación de ajustes se reconozca * como pariente de la del menú. A la derecha, el contenido. En estrecho se apilan. */ .cfg-cab { margin: 6px 0 22px; } .cfg-cab h1 { margin: 0 0 2px; font-size: 1.875rem; letter-spacing: -.03em; } .cfg-marco { display: grid; grid-template-columns: 232px 1fr; gap: 26px; align-items: start; } @media (max-width: 860px) { .cfg-marco { grid-template-columns: 1fr; } } .cfg-nav { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 12px; } @media (max-width: 860px) { .cfg-nav { position: static; } } /* La caja del desplegable nace OCULTA (es su estado de reposo). Aquí no se despliega nada: es el índice de la página, así que se le devuelve la visibilidad. */ .cfg-nav-caja { min-width: 0; opacity: 1; transform: none; pointer-events: auto; } /* Las filas del índice usan la pastilla del desplegable, pero aquí SÍ hay una seleccionada: es navegación, no una lista de acciones. Se marca en cian, como la herramienta abierta. */ .cfg-nav .tar-pill { cursor: pointer; text-align: left; justify-content: flex-start; } .cfg-nav .tar-pill.activo { background: rgba(0,134,163,.09); color: var(--verde-oscuro); } html[data-modo="incognito-oscuro"] .cfg-nav .tar-pill.activo { background: rgba(47,198,224,.14); } /* Cerrar sesión va SUELTO y al final, fuera de la caja: no es un apartado más, es una salida. Y en rojo solo al pasar el ratón — anunciarse en rojo desde el principio sería alarmismo. */ .cfg-salir { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; font-family: var(--tipo-marca); font-size: .75rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; padding: 8px 15px; border: 0; border-radius: 999px; background: transparent; color: var(--texto-suave); cursor: pointer; transition: background var(--dur-ui,.22s) var(--ease-premium,ease), color var(--dur-ui,.22s) var(--ease-premium,ease); } .cfg-salir:hover { background: rgba(194,63,63,.10); color: #A2373B; } html[data-modo="incognito-oscuro"] .cfg-salir:hover { background: rgba(238,138,141,.14); color: #EE8A8D; } .cfg-cuerpo h2 { margin: 0 0 6px; font-size: 1.3125rem; letter-spacing: -.02em; } .cfg-cuerpo h3 { margin: 0 0 12px; font-size: .9375rem; letter-spacing: -.01em; } .cfg-intro { color: var(--texto-suave); margin: 0 0 20px; max-width: 62ch; } .cfg-bloque { background: var(--lg-panel, rgba(255,255,255,.8)); border: 1px solid var(--lg-borde, rgba(0,0,0,.1)); border-radius: var(--lg-r-l, 20px); padding: 22px; margin-bottom: 18px; } .cfg-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; } .cfg-campo { display: block; margin-bottom: 14px; max-width: 420px; } .cfg-campo > span { display: block; font-size: .78125rem; font-weight: 600; color: var(--texto-suave); margin-bottom: 5px; } .cfg-campo input { width: 100%; padding: 10px 13px; font: inherit; font-size: .9375rem; border-radius: var(--lg-r-m, 14px); border: 1.5px solid var(--linea); background: var(--superficie); color: inherit; } .cfg-campo input:focus { outline: none; border-color: var(--verde-oscuro); box-shadow: 0 0 0 3px rgba(0,134,163,.16); } .cfg-campo input:disabled { background: var(--gris-fila); color: var(--texto-suave); } /* --- Aspecto: dos muestras de verdad, no dos palabras --- */ .cfg-temas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; max-width: 620px; } .cfg-tema { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; padding: 14px; border-radius: var(--lg-r-l, 20px); cursor: pointer; font: inherit; background: var(--lg-panel, rgba(255,255,255,.8)); border: 1.5px solid var(--lg-borde, rgba(0,0,0,.1)); transition: border-color var(--dur-ui,.22s) var(--ease-premium,ease), transform var(--dur-ui,.22s) var(--ease-premium,ease); } .cfg-tema:hover { transform: translateY(-2px); } .cfg-tema.activo { border-color: var(--verde-oscuro); box-shadow: inset 0 0 0 1px var(--verde-oscuro); } .cfg-tema b { font-family: var(--tipo-marca); font-size: .90625rem; } .cfg-tema-muestra { display: block; width: 100%; height: 54px; border-radius: var(--lg-r-m, 14px); margin-bottom: 8px; border: 1px solid var(--lg-borde, rgba(0,0,0,.1)); } .cfg-tema-claro { background: linear-gradient(160deg, #ffffff 55%, #E9F7FB); } .cfg-tema-oscuro { background: linear-gradient(160deg, #08111E 55%, #10283A); } .cfg-tema-auto { background: linear-gradient(110deg, #ffffff 0 49.5%, #08111E 50.5% 100%); } /* --- Conexiones --- */ .cfg-cab-accion { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .cfg-actualizar { display: flex; align-items: center; gap: 10px; flex: none; } .cfg-conex { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--lg-panel, rgba(255,255,255,.8)); border: 1px solid var(--lg-borde, rgba(0,0,0,.1)); border-radius: var(--lg-r-l, 20px); margin-bottom: 10px; } .cfg-conex-ico { flex: none; display: inline-flex; color: var(--texto-suave); } .cfg-conex-ico .tar-ico { width: 20px; height: 20px; } .cfg-conex-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cfg-conex-txt b { font-family: var(--tipo-marca); font-size: .90625rem; } .cfg-conex-accion { flex: none; } .cfg-chip { flex: none; font-size: .71875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; white-space: nowrap; } .cfg-chip-ok { background: rgba(46,158,68,.13); color: #1C6F4A; } .cfg-chip-aviso { background: rgba(215,175,67,.16); color: #8A6A15; } .cfg-chip-gris { background: var(--gris-fila); color: var(--texto-suave); } html[data-modo="incognito-oscuro"] .cfg-chip-ok { background: rgba(110,209,160,.14); color: #6ED1A0; } html[data-modo="incognito-oscuro"] .cfg-chip-aviso { background: rgba(232,201,102,.15); color: #E0BE6A; } /* --- Estado vacío honesto, y el aviso de «esto está dibujado, no construido» --- */ .cfg-vacio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 44px 26px; border: 1.5px dashed var(--lg-borde, rgba(0,0,0,.14)); border-radius: var(--lg-r-xl, 26px); color: var(--texto-suave); max-width: 56ch; } .cfg-vacio .tar-ico { width: 30px; height: 30px; margin-bottom: 6px; opacity: .5; } .cfg-vacio b { font-family: var(--tipo-marca); font-size: 1rem; color: var(--texto); } .cfg-honesto { color: var(--texto-suave); font-size: .84375rem; margin: 14px 0 0; max-width: 62ch; } .cfg-honesto-fuerte { background: var(--ambar-fondo); border: 1px solid color-mix(in srgb, var(--ambar) 30%, transparent); color: var(--texto); border-radius: var(--lg-r-m, 14px); padding: 11px 15px; margin: 0 0 18px; } /* --- Organización: se ve apagada a propósito, porque no funciona --- */ .cfg-pintado { opacity: .72; } .cfg-tabla { display: flex; flex-direction: column; } .cfg-tr { display: grid; grid-template-columns: 1.3fr .9fr 1.6fr auto; gap: 12px; align-items: center; padding: 11px 2px; border-top: 1px solid var(--linea); } .cfg-tr.cfg-th { border-top: 0; font-size: .71875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--texto-suave); } @media (max-width: 700px) { .cfg-tr { grid-template-columns: 1fr auto; } .cfg-tr .dos-meta { display: none; } } .cfg-perfil { font-family: var(--tipo-marca); font-size: .78125rem; font-weight: 600; } /* --- Suscripción --- */ .cfg-plan { display: flex; align-items: center; gap: 14px; } .cfg-plan-txt { display: flex; flex-direction: column; gap: 2px; } .cfg-plan-txt b { font-family: var(--tipo-marca); font-size: .9375rem; } /* ==================== LA FRANJA DE AVISOS DE CONEXIÓN ==================== * Un solo sitio para todos, justo bajo la cabecera, y una sola forma de fila: * qué se ha desconectado a la izquierda y el botón para arreglarlo a la derecha. * Toma la cápsula y el vidrio del resto del sistema; lo único propio es el tinte ámbar, * que es el color semántico de «atención» — ni el cian de marca ni el bronce del plan, * porque esto no es identidad, es un estado. */ .tar-avisos { max-width: var(--max, 1080px); margin: 14px auto 0; padding: 0 16px; display: flex; flex-direction: column; gap: 10px; } .tar-avisos[hidden] { display: none; } .tar-aviso { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-radius: var(--lg-r-l, 20px); background: var(--ambar-fondo); border: 1.5px solid color-mix(in srgb, var(--ambar) 32%, transparent); box-shadow: var(--lg-sombra-control, 0 2px 8px rgba(0,0,0,.06)); } .tar-aviso-ico { flex: none; display: inline-flex; color: var(--ambar); } .tar-aviso-ico .tar-ico, .tar-aviso-ico svg { width: 19px; height: 19px; } .tar-aviso-txt { flex: 1 1 auto; min-width: 0; font-size: .90625rem; line-height: 1.45; } .tar-aviso-txt b { font-family: var(--tipo-marca); font-weight: 600; } .tar-aviso-accion { flex: none; } /* El botón de arreglarlo hereda el primario del sistema, solo que en pequeño y sin fabricar una variante nueva: la señal de «pulsa aquí» ya existe y es una sola. */ .tar-aviso .boton-mini { font-size: .78125rem; padding: 7px 15px; white-space: nowrap; } @media (max-width: 620px) { .tar-aviso { flex-wrap: wrap; } .tar-aviso-accion { width: 100%; } .tar-aviso .boton-mini { width: 100%; text-align: center; } } /* ══════════════════════════════════════════════════════════════════════════════════════════ AJUSTES A LAS GUÍAS DE APPLE (11/09/2026, encargo de Jacobo): macOS en el escritorio, iOS en el móvil. Van aquí, al final de la última hoja, para ganar la cascada sin tocar las otras. ══════════════════════════════════════════════════════════════════════════════════════════ */ /* 1. LOS DESPLEGABLES SE ABREN TAMBIÉN POR TOQUE (clase `abierto`, la pone radar.js en pantallas sin hover). Misma cápsula, mismo despliegue que con el ratón. */ .tar-radar-menu.abierto .tar-submenu, .tar-menu-ajustes.abierto .tar-submenu { pointer-events: auto; } .tar-radar-menu.abierto .tar-submenu-caja, .tar-menu-ajustes.abierto .tar-submenu-caja { opacity: 1; transform: none; pointer-events: auto; } .tar-radar-menu.abierto .tar-pill { opacity: 1; transform: none; pointer-events: auto; } /* 2. FOCO VISIBLE EN TODO LO QUE SE PUEDE ACTIVAR CON EL TECLADO: un aro del cian de marca, fuera del control, para que se vea también sobre vidrio y en oscuro. Los campos que ya llevan su propio resaltado de foco (box-shadow) lo conservan. */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible, summary:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 2px solid var(--tarsis-cian-texto, #0E7E8F); outline-offset: 2px; } html[data-modo="incognito-oscuro"] a:focus-visible, html[data-modo="incognito-oscuro"] button:focus-visible, html[data-modo="incognito-oscuro"] [role="button"]:focus-visible, html[data-modo="incognito-oscuro"] [tabindex]:not([tabindex="-1"]):focus-visible { outline-color: var(--tarsis-cian-vivo, #43E7FF); } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--tarsis-cian-texto, #0E7E8F); outline-offset: 1px; } /* 3. MOVIMIENTO REDUCIDO, DE VERDAD EN TODA LA CASA: quien lo pide en su sistema no ve tintineos, ni apariciones, ni transiciones. Los retardos se conservan (el cartel de carga sigue esperando sus 600 ms antes de salir). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* 4. PANTALLAS TÁCTILES: objetivos de 44 × 44 pt (iOS). El dibujo puede ser más pequeño; lo que crece es la zona que responde al dedo. */ @media (hover: none) and (pointer: coarse) { .barra-superior .btn-nav { width: 44px; height: 44px; } .tar-cab-iconos { gap: 2px; } .tar-herr-grupo .tar-radar-btn { min-height: 44px; padding-top: 12px; padding-bottom: 12px; } .tar-mas .tar-mas-btn { min-width: 44px; } .tar-submenu .tar-pill, .cfg-nav .tar-pill { min-height: 44px; } .tar-plan { min-height: 36px; padding-top: 8px; padding-bottom: 8px; } .tar-acc-cambiar, .tar-acc-mas { width: 30px; height: 30px; position: relative; } .tar-acc-cambiar::before, .tar-acc-mas::before { content: ''; position: absolute; inset: -7px; } .boton-primario, .boton-secundario { min-height: 44px; } .boton-mini { min-height: 36px; } .dos-rango, .dos-tab, .cal-v, .tt-tab { min-height: 40px; } input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; } /* Sin hover no hay estados de hover que se queden pegados tras el toque. */ .tar-herr:hover { transform: none; } } /* 5. EL MÓVIL (≤ 720 px), COMO UNA APP DE iOS: · la barra en DOS filas y no tres: logo y cuenta arriba, los accesos debajo (la de antes medía 133 px de alto: un tercio de la pantalla de un iPhone); · márgenes seguros (notch y barra de inicio); · letra base de 16 px (los campos también, que a menos Safari hace zoom al enfocarlos); · versalitas de la barra e insignias a 11-12 px, el mínimo legible de Apple. */ @media (max-width: 720px) { html { font-size: 16px; } body { font-size: 1rem; } .barra-interior { flex-wrap: wrap; row-gap: 6px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(15px, env(safe-area-inset-right)); } .barra-superior .logo { order: 1; margin-right: 0; } .tar-hueco { display: none; } /* el hueco flexible añadía dos huecos de 12 px y echaba la cuenta a otra fila */ .tar-cabecera-der { order: 3; margin-left: auto; } .tar-herr-grupo { order: 4; flex-basis: 100%; width: 100%; } .tar-herr-grupo .tar-radar-btn { font-size: .75rem; padding-left: 12px; padding-right: 12px; } .tar-plan { font-size: .6875rem; } .tar-herr-pro { font-size: .6875rem; } body { padding-bottom: env(safe-area-inset-bottom); } input, select, textarea { font-size: 1rem; } .modal { padding: 18px; width: calc(100% - 24px); } } /* 6. CONTRASTE (medido con el fondo compuesto, pantalla a pantalla, claro y oscuro): · el botón principal y los rangos activos llevaban el tinte al 94 % y se quedaban en 4,29 sobre blanco con letra blanca; sólido, da 4,77 (es el mismo cian de texto, --verde-solido); · la herramienta ABIERTA en la barra y en el índice de Configuración iba en --verde-oscuro sobre su tinte (4,25): pasa al cian hondo (5,5); · «Abrir» en las tarjetas de búsqueda va sobre el color de su fuente (verde, azul, violeta) y bajaba a 2,8: una sombra interior oscurece el fondo bajo la letra sin tocar el color de la tarjeta ni la letra (5,2 / 4,7 / 7+; en oscuro los colores son más claros y se oscurece más); · en OSCURO: los colores de marca de las redes (X y TikTok son negro), los ámbar y verdes de estado y el botón mini de vidrio se aclaran o se asientan sobre panel sólido. */ .boton-primario, .dos-rango.activo, .dos-rango.activa { background: var(--verde-solido); } .tar-herr-grupo .tar-radar-btn.activo, .cfg-nav .tar-pill.activo, .tar-submenu .tar-pill.activo { color: var(--tarsis-cian-hondo, #0C6C7A); } html[data-modo="incognito-oscuro"] .tar-herr-grupo .tar-radar-btn.activo, html[data-modo="incognito-oscuro"] .cfg-nav .tar-pill.activo, html[data-modo="incognito-oscuro"] .tar-submenu .tar-pill.activo { color: var(--verde-oscuro); } .dos-sola .boton-primario, .dos-varias .boton-primario { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .26), 0 2px 10px rgba(0, 0, 0, .12); } html[data-modo="incognito-oscuro"] .dos-sola .boton-primario, html[data-modo="incognito-oscuro"] .dos-varias .boton-primario { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .42), 0 2px 10px rgba(0, 0, 0, .3); } html[data-modo="incognito-oscuro"] { --ambar-texto: #E8C56A; } html[data-modo="incognito-oscuro"] .rrss-red-tag { color: color-mix(in srgb, var(--red-col, #888) 40%, #fff); } html[data-modo="incognito-oscuro"] .rrss-t-problema, html[data-modo="incognito-oscuro"] .rrss-t-hueco { color: #E0A84A; } html[data-modo="incognito-oscuro"] .rrss-t-delta.sube, html[data-modo="incognito-oscuro"] .rrss-kpi-delta.sube, html[data-modo="incognito-oscuro"] .tar-delta-pct.sube { color: #5CCB86; } html[data-modo="incognito-oscuro"] .boton-mini:not(.boton-primario) { background: var(--lg-panel-solido); } /* 7. LETRA: nada por debajo de 11 px, que es el mínimo de Apple. Las etiquetas de cifras de las tarjetas de redes iban a 9,5, la insignia PRO a 10. */ .rrss-t-cif i, .rs-cifra i, .tar-herr-pro, .tar-herr-llave, .dos-portada-reg, .pp-aparece-eti { font-size: .6875rem; } .viz-pico-num { font-size: .6875rem; } /* 8. MÓVIL, segunda parte: los textos secundarios que iban a 11-11,5 px suben a 12,5 (en un teléfono se leen a más distancia y con menos luz); los campos de texto a 16 px SIEMPRE (a menos, Safari de iOS hace zoom al entrar en ellos), aunque su clase diga otra cosa. */ @media (max-width: 720px) { .dos-meta, .dos-card-fecha, .rrss-t-desde, .rrss-t-pie, .rrss-t-problema, .rrss-t-hueco, .tar-mitra-sello, .can-pil, .dos-kw-mas, .tar-carpeta-docs { font-size: .78125rem; } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea { font-size: 1rem !important; } } /* 9. TÁCTIL, segunda parte: los botones redondos de las tarjetas (26 px), los selectores pequeños, los desplegables y el logo alcanzan su zona de 36-44 px. */ @media (hover: none) and (pointer: coarse) { .dos-circ { width: 36px; height: 36px; } select.dos-imp-mover, .tar-sel-mini, .dos-kw-mas, .can-una { min-height: 36px; } summary { padding-top: 12px; padding-bottom: 12px; } .barra-superior .logo { padding: 6px 0; } } /* 10. Etiquetas de red con el color de la marca de cada red: sobre blanco, Facebook (#1877F2) se quedaba en 4,23 y YouTube en 4,0; un 15 % de negro las lleva por encima de 4,5 sin que dejen de reconocerse. (En oscuro se aclaran, arriba.) */ .rrss-red-tag { color: color-mix(in srgb, var(--red-col, #888) 85%, #000); } /* 11. «Aumentar contraste» del sistema (prefers-contrast: more): texto secundario más oscuro, líneas más marcadas y los paneles de vidrio con borde sólido. */ @media (prefers-contrast: more) { :root { --texto-suave: #4A4A4A; --linea: #8E8E8E; --lg-borde: rgba(0, 0, 0, .45); } html[data-modo="incognito-oscuro"] { --texto-suave: #C9D3DE; --linea: #7F8FA3; --lg-borde: rgba(255, 255, 255, .5); } .tar-herr, .tar-submenu-caja, .dos-busqueda-card, .modal, .toast { border: 1.5px solid var(--lg-borde); } .boton-primario, .dos-rango.activo { box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .35); } } /* 12. El aviso de error se queda hasta que se cierra: lleva su botón; y el aviso no se mete bajo la barra de inicio del iPhone. */ .toast { display: inline-flex; align-items: center; gap: 12px; bottom: max(24px, env(safe-area-inset-bottom, 0px)); max-width: min(92vw, 640px); } .toast-cerrar { flex: none; width: 28px; height: 28px; margin: -4px -8px -4px 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .18); color: #fff; font-size: 1.25rem; line-height: 1; cursor: pointer; } .toast-cerrar:hover { background: rgba(255, 255, 255, .3); } @media (hover: none) and (pointer: coarse) { .toast-cerrar { width: 40px; height: 40px; margin-right: -12px; } } /* ═══════════════ LAS DECISIONES DE JACOBO SOBRE LAS GUÍAS DE APPLE (12/09/2026) ═══════════════ Vio la página de antes/después y dijo sí a la barra de pestañas del móvil, a «Como el sistema» de fábrica, a la tipografía dinámica, a las tarjetas opacas y a las versalitas de 12 px; y no a Title Case ni a la letra del sistema. Lo que va aquí es lo que se ve; la tipografía dinámica vive en tema.js (el tamaño raíz sigue al iPhone) y en que TODOS los tamaños de letra están en rem. */ /* 1. LA BARRA DE PESTAÑAS DEL MÓVIL. La pinta radar.js (pintarTabBar) siempre, y se ve solo aquí: hasta 720 px, fuera de los marcos de la pantalla dividida y sin «Editar panel» en marcha (entonces vuelve la fila de accesos de arriba, que trae las flechas para cambiarlos). Vidrio de navegación, cinco pestañas como mucho, 64 px de alto más el margen seguro del iPhone. */ .tar-tabbar { display: none; } @media (max-width: 720px) { html:not(.tar-enmarcado) body:not(.tar-editando) .tar-tabbar { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); height: 64px; z-index: 60; align-items: stretch; padding: 0 4px; border-radius: 24px; background: var(--lg-panel, rgba(255,255,255,.78)); border: 1px solid var(--lg-borde, rgba(0,0,0,.1)); backdrop-filter: blur(var(--lg-blur, 18px)) saturate(var(--lg-sat, 1.75)); -webkit-backdrop-filter: blur(var(--lg-blur, 18px)) saturate(var(--lg-sat, 1.75)); /* SIN SOMBRA POR DEBAJO (24/09/2026, Jacobo). La de antes (0 18px 50px) se derramaba en el hueco entre esta barra y la del navegador y se veía como una franja oscura: la web tiene que fundirse con el navegador. El vidrio se separa del contenido con su borde y su canto de luz, que no se salen de la barra. */ box-shadow: inset 0 1px 0 var(--lg-rim, rgba(255,255,255,.55)); border-radius: 999px; left: 14px; right: 14px; height: 68px; touch-action: none; -webkit-user-select: none; user-select: none; transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .2s ease; } html:not(.tar-enmarcado) body:not(.tar-editando) { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } html:not(.tar-enmarcado) body:not(.tar-editando) .tar-herr-grupo { display: none; } /* CON EL TECLADO ABIERTO LA BARRA SE VA, como en las apps de iOS (radar.js, `vigilarTeclado`): mientras se escribe no se usa, tapa lo que se escribe y bailaría con el teclado. */ html.tar-teclado:not(.tar-enmarcado) body:not(.tar-editando) .tar-tabbar { transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom))); opacity: 0; pointer-events: none; } } /* LAS PESTAÑAS SON SOLO EL ICONO, A 30 PX (24/09/2026, Jacobo: «los iconos solo, sin los nombres, más grandes», como Instagram). El nombre va en aria-label y title. El icono de la pestaña abierta crece un poco con el mismo muelle que mueve la lente; al pulsar, se hunde. */ .tar-tab { position: relative; z-index: 1; flex: 1 1 0; min-width: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: var(--texto-suave); border-radius: 999px; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } .tar-tab:hover { text-decoration: none; } .tar-tab > * { position: relative; z-index: 1; } .tar-tab img, .tar-tab svg, .tar-tab-letra { width: 30px; height: 30px; display: block; transition: transform .5s var(--tar-muelle); } /* Los iconos de herramienta traen su fondo con margen dentro de la imagen; el dibujo del Panel (y el «Más») llega al borde. Para que se vean del mismo tamaño, la imagen va a 34 y el dibujo a 27. */ .tar-tab img { width: 42px; height: 42px; } .tar-tab > svg, .tar-tab-btn > svg { width: 32px; height: 32px; } .tar-tab.activo img, .tar-tab.activo svg, .tar-tab.activo .tar-tab-letra, .tar-tab.bajo-dedo img, .tar-tab.bajo-dedo svg, .tar-tab.bajo-dedo .tar-tab-letra { transform: scale(1.1); } .tar-tab:active img, .tar-tab:active svg { transform: scale(.88); transition-duration: .12s; } .tar-tab-letra { border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-size: .875rem; background: var(--verde-bg-chip); color: var(--verde-texto); } .tar-tab.activo { color: var(--tarsis-cian-hondo, #0C6C7A); } /* LA LENTE: una sola cápsula de vidrio que viaja a la pestaña abierta con un muelle (radar.js, `colocarLente`). Al deslizar el dedo por la barra se agranda un poco y lo sigue sin muelle. */ :root { --tar-muelle: cubic-bezier(.34, 1.3, .64, 1); } @supports (transition-timing-function: linear(0, 1)) { :root { --tar-muelle: linear(0, 0.0265, 0.094, 0.1868, 0.2929, 0.4029, 0.5102, 0.6102, 0.7001, 0.7783, 0.8445, 0.8988, 0.942, 0.9754, 1, 1.0174, 1.0287, 1.0353, 1.0381, 1.0382, 1.0363, 1.0332, 1.0293, 1.0251, 1.0209, 1.0169, 1.0133, 1.01, 1.0072, 1.0049, 1.003, 1.0016, 1.0005, 0.9996, 0.9991, 0.9988, 1); } } .tar-tab-lente { position: absolute; left: 0; top: 6px; bottom: 6px; width: 64px; z-index: 0; border-radius: 999px; pointer-events: none; background: color-mix(in srgb, var(--tarsis-cian-vivo, #18D7F4) 16%, transparent); box-shadow: inset 0 0 0 1px rgba(24, 215, 244, .34), inset 0 1px 0 rgba(255, 255, 255, .6); opacity: 0; transition: transform .55s var(--tar-muelle), width .55s var(--tar-muelle), opacity .2s ease, scale .25s ease, background-color .25s ease; } .tar-tab-lente.visible { opacity: 1; } .tar-tab-lente.quieta { transition: none; } .tar-tabbar.deslizando .tar-tab-lente { transition: width .2s ease, opacity .2s ease, scale .2s ease, background-color .2s ease; scale: 1.12; background: color-mix(in srgb, var(--tarsis-cian-vivo, #18D7F4) 24%, transparent); } html[data-modo="incognito-oscuro"] .tar-tab-lente { background: rgba(67, 231, 255, .14); box-shadow: inset 0 0 0 1px rgba(67, 231, 255, .32), inset 0 1px 0 rgba(255, 255, 255, .14); } @media (prefers-reduced-motion: reduce) { .tar-tab-lente, .tar-tab img, .tar-tab svg, .tar-tabbar { transition-duration: .001ms !important; } } html[data-modo="incognito-oscuro"] .tar-tab { color: rgba(230,240,242,.72); } html[data-modo="incognito-oscuro"] .tar-tab.activo { color: var(--tarsis-cian-vivo, #43E7FF); } .tar-tab-btn { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 100%; height: 100%; cursor: pointer; color: inherit; font: inherit; } .tar-tab-btn:focus-visible { outline: 2px solid var(--tarsis-cian-texto); outline-offset: -4px; border-radius: 18px; } /* El «Más» abre su cápsula hacia ARRIBA, pegada a la barra, y solo al tocarlo. */ .tar-tab-mas .tar-submenu { display: block; visibility: visible; position: absolute; right: 0; left: auto; top: auto; bottom: calc(100% + 10px); padding: 0; opacity: 1; pointer-events: none; } .tar-tab-mas .tar-submenu .tar-submenu-caja { opacity: 0; transform: translateY(6px); pointer-events: none; } .tar-tab-mas.abierto .tar-submenu { pointer-events: auto; } .tar-tab-mas.abierto .tar-submenu .tar-submenu-caja, .tar-tab-mas.abierto .tar-pill { opacity: 1; transform: none; pointer-events: auto; } /* Y LA FLECHA SE ESCONDE DE VERDAD. El JS le pone `hidden` cuando no recoge ningún acceso, pero el `display: none` del navegador para `[hidden]` no lleva !important y cualquier regla de display lo pisa: aquí lo hacía `.tar-herr-grupo .tar-radar-menu { display: inline-flex }` (que además, dentro de un contenedor flex, calcula «flex»). Por eso la flecha salía siempre, aunque no hubiera nada detrás. Esta regla es más específica y llega después. */ .tar-herr-grupo .tar-radar-menu[hidden], #tar-mas[hidden] { display: none; } /* 5. TARJETAS OPACAS. Liquid Glass reserva el vidrio a la capa de navegación (barra, menús, avisos) y quiere el contenido opaco para que se lea sin competir con lo que hay detrás. Las tarjetas del panel (tarsis.css), las de cuenta y los KPI de Redes, los tablones de Tareas, las tarjetas de Google y las portadas dejan el vidrio; el color es el mismo panel sólido que usan los menús. */ .rrss-kpi, .rrss-tarjeta, .rrss-lienzo, .tar-gcard, .tt-tablon, .dos-prensa-tile { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--lg-panel-solido, #fff); } /* 7. VERSALITAS A 12 PX EN EL MÓVIL. 11 pt es el mínimo de Apple; 12 se lee sin esfuerzo. Solo las que estaban por debajo de 12. */ @media (max-width: 720px) { .tar-plan, .tar-herr-pro, .tar-herr-llave, .tar-salir, .tar-herr-grupo .tar-radar-btn, .desplegable h4, .rotulo, .metrica .etq, .dos-stat-l, .dos-grupo-tit, .rrss-kpi-lab, .dos-card-periodo, .rrss-t-cif i, .cal-dia-nombre, .cfg-tr.cfg-th, .pp-aparece-eti, .dos-an-ctx-tit { font-size: .75rem; } } /* ═══════════════ EL MÓVIL, SEGUNDA VUELTA (24/09/2026, Jacobo) ═══════════════ «Debe haber 3 iconos por fila, manteniendo las proporciones del icono pero reduciendo el tamaño. En Radar igual pero dos búsquedas por fila.» Esto actualiza PARA EL MÓVIL la norma de las pastillas de tamaño fijo del 12/09: en el escritorio y en la pantalla dividida siguen midiendo 212 y 256; en el teléfono la rejilla es de tres y de dos columnas iguales, y lo de dentro se reduce en proporción (el icono no se deforma: se hace más pequeño). */ @media (max-width: 720px) { /* EL PANEL: tres por fila, como la pantalla de inicio del iPhone. Icono y nombre; la frase de debajo no cabe a este tamaño y se queda para el escritorio. */ .tar-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; gap: 12px 10px; } .tar-herr { width: auto; height: auto; aspect-ratio: 1 / 1.08; min-width: 0; padding: 26px 6px 10px; gap: 7px; justify-content: flex-start; border-radius: 20px; } .tar-herr-icono, .tar-herr-ico { width: 56px; height: 56px; border-radius: 16px; } .tar-herr-nombre { font-size: .8125rem; line-height: 1.2; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* El nombre corto («Redes» y no «Redes sociales», que no cabía): el largo se queda para el lector de pantalla, escondido a la vista pero no para él. */ .tar-herr-nombre .tar-nom-corto { display: inline; } .tar-herr-nombre .tar-nom-largo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .tar-herr-desc { display: none; } .tar-herr-pro, .tar-herr-llave { top: 5px; right: 5px; padding: 3px 5px; letter-spacing: .04em; } /* RADAR: dos búsquedas por fila. La tarjeta entera abre la búsqueda, así que «Abrir» sobra a este tamaño; «Editar» y «Regenerar» se quedan, a medias del ancho. */ .dos-busquedas { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; gap: 20px 10px; } .dos-slot { padding: 12px 4px 4px; min-height: 0; border-radius: 14px; } .dos-busquedas .dos-busqueda-card { padding: 10px 9px 9px; gap: 6px; min-width: 0; } .dos-busquedas .dos-card-sup { gap: 5px; min-height: 0; } /* El nombre de la fuente («Prensa») no cabía y salía «Pre…»: a este tamaño lo dice su icono. */ .dos-busquedas .dos-sola .dos-card-fuente, .dos-busquedas .dos-varias .dos-card-fuente { display: none; } .dos-busquedas .dos-card-mandos { gap: 6px; } .dos-busquedas .dos-card-kws { padding-right: 0; min-height: 0; gap: 4px; } .dos-busquedas .dos-card-kws .dos-kw-chip { font-size: .75rem; padding: 3px 8px; } /* Si con «+N» la primera palabra aún no cabe (una larga, como «fernandez calle»), se encoge con puntos suspensivos; solo entonces, para que el cálculo de cuántas caben (radar.js, `ajustarKeywords`) mida las palabras a su tamaño de verdad. */ .dos-busquedas .dos-card-kws:has(.dos-kw-mas) .dos-kw-chip:first-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .dos-busquedas .dos-card-kws .dos-kw-mas { flex: none; } .dos-busquedas .dos-card-ambito { font-size: .75rem; letter-spacing: .04em; gap: 4px; min-width: 0; } .dos-busquedas .dos-card-ambito > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dos-busquedas .dos-card-stats { min-height: 0; gap: 5px; } .dos-busquedas .dos-card-n { font-size: 1.5rem; } .dos-busquedas .dos-card-fecha { font-size: .75rem; } .dos-busquedas .dos-card-acc { padding-top: 8px; gap: 6px; } .dos-busquedas .dos-card-acc > .boton-primario { display: none; } .dos-busquedas .dos-card-acc > .boton-secundario, .dos-busquedas .dos-cj .dos-card-acc > * { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 6px 4px; font-size: .75rem; display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* En el móvil, «Editar» y «Regenerar» son su icono (el nombre va en aria-label y en title). */ .dos-busquedas .dos-acc-ico { display: block; } .dos-busquedas .dos-acc-txt, .dos-busquedas .dos-cj-menu > svg:not(.dos-acc-ico) { display: none; } } /* En el escritorio, al revés: el texto y no el icono; y el nombre largo de la herramienta. */ .dos-acc-ico { display: none; flex: none; } .tar-nom-corto { display: none; } /* CON EL DEDO, LA BÚSQUEDA SE COGE CON PULSACIÓN LARGA (radar.js, `initTablon`): encima de las tarjetas la página se desplaza como en cualquier otro sitio, y al mantener una pulsada ~0,4 s se levanta un poco para decir «ya puedes moverme». Sin el menú de iOS al mantener pulsado. */ @media (hover: none) and (pointer: coarse) { .dos-busquedas .dos-busqueda-card { touch-action: pan-y; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } } .dos-busqueda-card.dos-armada { transform: scale(1.035); z-index: 4; box-shadow: var(--lg-sombra-alta, 0 18px 50px rgba(0,0,0,.18)); transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease; } @media (prefers-reduced-motion: reduce) { .dos-busqueda-card.dos-armada { transform: none; } } /* LA CABECERA EN UNA SOLA FILA también en los teléfonos de 360-375 px: en 375 se partía en dos por 9 px (logo 131 + hueco 12 + cuenta 184 contra 318 útiles). Menos hueco y, en los más estrechos, el logo un poco más bajo. En «Editar panel» sí se parte, porque debajo vuelve la fila de accesos con sus flechas. */ @media (max-width: 720px) { body:not(.tar-editando) .barra-interior { flex-wrap: nowrap; gap: 8px; } .barra-superior #cuenta-zona { gap: 8px; } } @media (max-width: 380px) { .logo-tarsis { --logo-alto: 23px; } } /* LAS BARRAS, QUIETAS (24/09/2026, Jacobo: «los menús de arriba y de abajo deben estar siempre fijos… especialmente cuando se abre un teclado»). Lo investigado (WebKit 297779, iOS 26): · al tirar de la página más allá del principio o del final, iOS rebotaba TODO, la cabecera también: sin rebote en la raíz, las dos barras se quedan quietas; · que la de abajo acompañe a la barra de Safari cuando esta se encoge al desplazar es cosa de Safari, a propósito (lo fijo abajo se coloca SOBRE su barra), y es lo que deja que el contenido pase por debajo del vidrio del navegador, que es lo que hace que la web parezca infinita; · con el teclado abierto, iOS desplaza la vista para enseñar el campo y lo pegado arriba o abajo salía y entraba a saltos: mientras se escribe se van las dos, como la de abajo en las apps de iOS, y vuelven al cerrarlo (radar.js, `vigilarTeclado`). */ @media (max-width: 720px) { html, body { overscroll-behavior-y: none; } .barra-superior { transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .2s ease; } html.tar-teclado:not(.tar-enmarcado) .barra-superior { transform: translateY(calc(-100% - 16px)); opacity: 0; pointer-events: none; } /* El fallo de iOS 26 al cerrar el teclado deja la parte visible desplazada respecto a la página y la cabecera quedaba medio escondida: se mueve exactamente ese desplazamiento, que mide radar.js (`--vv-top`, en `vigilarTeclado`). LA BARRA DE ABAJO NO (24/09, 11:42, en el iPhone de Jacobo): al desplazar, iOS declara también ese desfase, la barra bajaba con él y Safari la cortaba por la mitad, porque no deja que nada fijo pase por debajo del borde de su barra. */ html:not(.tar-enmarcado) .barra-superior { translate: 0 var(--vv-top, 0px); } } /* ══════════════════════════════════════════════════════════════════════════════════════════════ v345 · LA PASTILLA DEL TABLÓN, REORDENADA (Jacobo, 30/09/2026) «Prensa y su icono arriba pero más pequeño, después el número de impactos y el número de medios, después las keyword, después el ámbito de los medios y por último la fecha.» Y los tres botones iguales: mismo alto, misma línea base y la misma reacción al pasar por encima (ninguno se subraya). ══════════════════════════════════════════════════════════════════════════════════════════════ */ .dos-v345 > * { flex-shrink: 0; } .dos-v345 .dos-card-sup { min-height: 24px; gap: 6px; } .dos-v345 .dos-amb-ico { width: 20px; height: 20px; border-radius: 6px; } .dos-v345 .dos-amb-ico svg { width: 12px; height: 12px; } .dos-v345 .dos-card-ambitos > .dos-amb-ico + .dos-amb-ico { margin-left: -3px; } .dos-v345 .dos-card-fuente { font-family: var(--tipo-marca); font-size: .6875rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--texto-suave); } .dos-v345:not(.dos-cj) .dos-card-stats { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 14px; min-height: 30px; margin-top: 2px; } .dos-card-cifra { display: inline-flex; align-items: baseline; gap: 5px; font-size: .8125rem; color: var(--texto-suave); white-space: nowrap; } .dos-card-cifra b { font-size: 1.375rem; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; color: var(--texto); font-variant-numeric: tabular-nums; } .dos-card-cifra.dcf-medios b { color: var(--f-medios-t); } .dos-card-cifra.dcf-rrss b { color: var(--f-rrss-t); } .dos-card-cifra.dcf-trends b { color: var(--f-trends-t); } .dos-v345 .dos-card-kws { padding-right: 0; } .dos-v345 > .dos-card-fecha { flex-basis: auto; font-size: .71875rem; color: var(--texto-suave); } .dos-v345 .dos-card-acc { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; } .dos-acc { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 9px; margin: 0; border-radius: 10px; font-family: var(--tipo-marca); font-size: .78125rem; font-weight: 600; line-height: 1; color: var(--texto); background: var(--superficie); border: 1px solid var(--lg-borde, var(--linea)); box-shadow: none; text-decoration: none; white-space: nowrap; cursor: pointer; flex: 1 1 auto; transition: background .15s ease, color .15s ease, border-color .15s ease; } .dos-acc:hover, .dos-acc:focus-visible { text-decoration: none; background: rgba(0,134,163,.08); color: var(--verde-oscuro); border-color: color-mix(in srgb, var(--verde-oscuro) 35%, transparent); } html[data-modo="incognito-oscuro"] .dos-acc:hover { background: rgba(47,198,224,.13); } .dos-acc-abrir { color: #fff; background: var(--src, var(--verde-solido)); border-color: transparent; box-shadow: inset 0 0 0 999px rgba(0,0,0,.26); } .dos-acc-abrir:hover, .dos-acc-abrir:focus-visible { color: #fff; background: var(--src, var(--verde-solido)); border-color: transparent; box-shadow: inset 0 0 0 999px rgba(0,0,0,.36); } .dos-mix-medios-rrss .dos-acc-abrir { background: linear-gradient(100deg, var(--f-medios), var(--f-rrss)); } .dos-mix-medios-trends .dos-acc-abrir { background: linear-gradient(100deg, var(--f-medios), var(--f-trends)); } .dos-mix-rrss-trends .dos-acc-abrir { background: linear-gradient(100deg, var(--f-rrss), var(--f-trends)); } .dos-mix-medios-rrss-trends .dos-acc-abrir { background: linear-gradient(100deg, var(--f-medios), var(--f-rrss) 55%, var(--f-trends)); } .dos-acc .dos-acc-ico { width: 15px; height: 15px; } .dos-acc > svg:not(.dos-acc-ico) { flex: none; } /* EL «+N» Y SU BOCADILLO, como los desplegables de la cabecera: la caja de vidrio, las esquinas de la cápsula y el rótulo en versalitas espaciadas. Trae solo las palabras que no caben en la pastilla. */ .dos-minipop.dos-minipop-kws { width: auto; min-width: 150px; max-width: 232px; padding: 10px 11px 11px; gap: 8px; border-radius: 16px; border: 1.5px solid var(--lg-borde, var(--linea)); background: var(--lg-panel-solido, var(--superficie)); box-shadow: var(--lg-sombra, 0 8px 24px rgba(0,0,0,.1)); animation: dos-kws-entra .18s ease; } .dos-minipop-kws .dos-minipop-tit { font-family: var(--tipo-marca); letter-spacing: .11em; font-weight: 600; } .dos-minipop-kws .dos-kw-todas { display: flex; flex-wrap: wrap; gap: 5px; } @keyframes dos-kws-entra { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .dos-minipop.dos-minipop-kws { animation: none; } } /* EN EL MÓVIL, UNA BÚSQUEDA POR FILA Y A TODO EL ANCHO (Jacobo, 30/09/2026: «no tiene que haber dos pastillas por fila, así es mejor y cabe más información»). Vuelven el nombre de la fuente, «Abrir» y el texto de «Editar» y «Regenerar», que a media anchura no cabían. */ @media (max-width: 720px) { .dos-busquedas { grid-template-columns: minmax(0, 1fr); gap: 14px; } .dos-slot { padding: 10px 6px 6px; } .dos-busquedas .dos-busqueda-card.dos-v345 { padding: 12px 14px 12px; gap: 8px; min-height: 0; } .dos-busquedas .dos-sola.dos-v345, .dos-busquedas .dos-varias.dos-v345 { padding-top: 22px; } .dos-busquedas .dos-v345 .dos-card-fuente { display: inline; } .dos-busquedas .dos-v345 .dos-card-kws .dos-kw-chip { font-size: .8125rem; padding: 4px 11px; } .dos-busquedas .dos-v345 .dos-card-acc > .dos-acc { display: inline-flex; flex: 1 1 0; min-width: 0; height: 40px; font-size: .8125rem; } .dos-busquedas .dos-v345 .dos-acc-txt { display: inline; } .dos-busquedas .dos-v345 .dos-acc-ico { display: none; } .dos-busquedas .dos-v345.dos-cj .dos-cj-menu > svg:not(.dos-acc-ico) { display: inline; } } /* ══════════════════════════════════════════════════════════════════════════════════════════════ v345 · NUEVA BÚSQUEDA: LOS INGREDIENTES (Jacobo, 30/09/2026) «¿Qué ingredientes añadimos en tu búsqueda?» y una pastilla por ingrediente, con el icono de las pastillas del tablón, su color sutil y una frase. Se eligen uno o varios; debajo, «Definir búsqueda». ══════════════════════════════════════════════════════════════════════════════════════════════ */ .tar-ingr-elegir { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 18px; } .tar-ingr { --ing: var(--verde); --ing-t: var(--verde-texto, var(--texto)); position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 12px; row-gap: 8px; padding: 18px 18px 18px 16px; text-align: left; cursor: pointer; font: inherit; color: var(--texto); border-radius: 20px; border: 1.5px solid color-mix(in srgb, var(--ing) 22%, var(--lg-borde, var(--linea))); background: color-mix(in srgb, var(--ing) 6%, var(--superficie)); box-shadow: var(--lg-sombra-control, 0 1px 3px rgba(0,0,0,.05)); transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; } .tar-ingr.dos-f-medios { --ing: var(--f-medios); --ing-t: var(--f-medios-t); } .tar-ingr.dos-f-trends { --ing: var(--f-trends); --ing-t: var(--f-trends-t); } .tar-ingr.dos-f-rrss { --ing: var(--f-rrss); --ing-t: var(--f-rrss-t); } .tar-ingr:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--ing) 45%, transparent); box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--ing) 60%, transparent); } .tar-ingr.activo { border-color: var(--ing); background: color-mix(in srgb, var(--ing) 12%, var(--superficie)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ing) 16%, transparent); } .tar-ingr-ico { grid-row: 1; grid-column: 1; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--ing-t); background: color-mix(in srgb, var(--ing) 15%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--ing) 35%, transparent); } .tar-ingr-ico svg, .tar-ingr-ico .tar-ico { width: 20px; height: 20px; } .tar-ingr-nombre { grid-row: 1; grid-column: 2; font-family: var(--tipo-marca); font-weight: 600; font-size: 1.0625rem; color: var(--texto); padding-right: 30px; } .tar-ingr-frase { grid-row: 2; grid-column: 1 / -1; font-size: .84375rem; line-height: 1.45; color: var(--texto-suave); } /* La marca de elegido: un círculo que se rellena del color del ingrediente. */ .tar-ingr-marca { position: absolute; top: 16px; right: 16px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--ing) 45%, var(--linea)); background: var(--superficie); transition: background .15s ease, border-color .15s ease; } .tar-ingr.activo .tar-ingr-marca { background: var(--ing) url('data:image/svg+xml;utf8,') center / 14px no-repeat; border-color: var(--ing); } .tar-ingr-pie { display: flex; justify-content: center; margin-top: 26px; } .tar-ingr-definir { min-width: 220px; min-height: 46px; font-size: .9375rem; border-radius: 999px; } .tar-ingr-definir[disabled] { opacity: .5; cursor: not-allowed; } @media (max-width: 720px) { .tar-ingr-elegir { grid-template-columns: minmax(0, 1fr); gap: 10px; } .tar-ingr-definir { width: 100%; } } @media (prefers-reduced-motion: reduce) { .tar-ingr, .tar-ingr:hover { transition: none; transform: none; } } /* LA BARRA DE INGREDIENTES, con un solo «+ Añadir ingrediente» y su menú (como los de la cabecera). */ .tar-ingredientes { align-items: center; } .tar-ing-activo.dos-f-medios, .tar-ing-activo.dos-f-trends, .tar-ing-activo.dos-f-rrss { border: 1px solid color-mix(in srgb, currentColor 30%, transparent); } .tar-ing-cadena { color: var(--texto); background: var(--superficie); } .tar-ing-cadena.hecho { color: var(--texto-suave); } .tar-ing-quitar { display: inline-grid; place-items: center; width: 20px; height: 20px; margin: -2px -6px -2px 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--texto-suave); cursor: pointer; } .tar-ing-quitar:hover { background: rgba(194, 52, 52, .1); color: #c23434; } .tar-ing-quitar svg { width: 11px; height: 11px; } .tar-ing-mas { position: relative; display: inline-flex; } button.tar-ing-anadir { cursor: pointer; font: inherit; font-size: .825rem; font-weight: 600; color: var(--texto-suave); background: transparent; } button.tar-ing-anadir:hover, button.tar-ing-anadir[aria-expanded="true"] { background: rgba(0,134,163,.08); color: var(--verde-oscuro); border-color: color-mix(in srgb, var(--verde-oscuro) 45%, transparent); } .tar-ing-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; display: flex; flex-direction: column; min-width: 280px; max-width: min(340px, 86vw); padding: 4px; border-radius: 18px; border: 1.5px solid var(--lg-borde, var(--linea)); background: var(--lg-panel-solido, var(--superficie)); box-shadow: var(--lg-sombra, 0 8px 24px rgba(0,0,0,.1)); animation: dos-kws-entra .18s ease; } .tar-ing-menu[hidden] { display: none; } .tar-ing-op { display: flex; align-items: flex-start; gap: 11px; width: 100%; padding: 10px 12px; border: 0; border-radius: 14px; background: transparent; text-align: left; cursor: pointer; font: inherit; color: var(--texto); } .tar-ing-op + .tar-ing-op { border-top: 1.5px solid var(--lg-borde, var(--linea)); border-radius: 0 0 14px 14px; } .tar-ing-op:hover, .tar-ing-op:focus-visible { background: rgba(0,134,163,.07); } .tar-ing-op-ico { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; border: 1px solid; } .tar-ing-op-ico .tar-ico, .tar-ing-op-ico svg { width: 16px; height: 16px; } .tar-ing-op.dos-f-medios, .tar-ing-op.dos-f-trends, .tar-ing-op.dos-f-rrss { background: transparent; border-color: transparent; color: var(--texto); } .dos-f-medios > .tar-ing-op-ico { color: var(--f-medios-t); border-color: color-mix(in srgb, var(--f-medios) 40%, transparent); background: color-mix(in srgb, var(--f-medios) 12%, var(--superficie)); } .dos-f-trends > .tar-ing-op-ico { color: var(--f-trends-t); border-color: color-mix(in srgb, var(--f-trends) 40%, transparent); background: color-mix(in srgb, var(--f-trends) 12%, var(--superficie)); } .dos-f-rrss > .tar-ing-op-ico { color: var(--f-rrss-t); border-color: color-mix(in srgb, var(--f-rrss) 40%, transparent); background: color-mix(in srgb, var(--f-rrss) 12%, var(--superficie)); } .tar-ing-op-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tar-ing-op-txt b { font-family: var(--tipo-marca); font-size: .875rem; font-weight: 600; } .tar-ing-op-txt small { font-size: .78125rem; line-height: 1.35; color: var(--texto-suave); } .tar-paso-cadena { margin: 6px 0 12px; } /* TEMÁTICOS, junto a «Todos · Ninguno»: un desplegable con una casilla por temática. */ .tar-tem-caja { position: relative; display: inline-flex; } /* El menú abierto sube su tarjeta por encima de la siguiente (cada .dos-campo crea su propio apilamiento). */ .dos-campo:has(.tar-tem-menu:not([hidden])) { z-index: 80; } .tar-tem-btn { display: inline-flex; align-items: center; gap: 6px; } .tar-tem-flecha { display: inline-flex; transition: transform .18s ease; } .tar-tem-flecha svg { width: 11px; height: 11px; } .tar-tem-btn.abierto .tar-tem-flecha { transform: rotate(180deg); } .tar-tem-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; display: flex; flex-direction: column; min-width: 230px; padding: 4px; border-radius: 16px; border: 1.5px solid var(--lg-borde, var(--linea)); background: var(--lg-panel-solido, var(--superficie)); box-shadow: var(--lg-sombra, 0 8px 24px rgba(0,0,0,.1)); } .tar-tem-menu[hidden] { display: none; } .tar-tem-op { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 11px; cursor: pointer; font-size: .875rem; } .tar-tem-op:hover { background: rgba(0,134,163,.07); } .tar-tem-nom { flex: 1; } /* «Ninguno» ya no pliega: la caja del árbol queda siempre abierta (radar.js, `modo`). */ /* A FONDO O RÁPIDA: dos casillas excluyentes y la explicación de la elegida debajo. */ .dos-modo-casillas { display: flex; flex-wrap: wrap; gap: 8px 22px; } .dos-modo-op { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-weight: 600; font-size: .9375rem; } .dos-modo-op input { margin: 0; } /* ══════════════════════════════════════════════════════════════════════════════════════════════ v345 · LA PÁGINA DE RESULTADOS (Jacobo, 30/09/2026) ══════════════════════════════════════════════════════════════════════════════════════════════ */ /* LOS FILTROS, COMO LA CABECERA. «Opciones limpias que, si pasas el cursor por encima o las tocas en el móvil, se destacan con el color del sistema»: texto plano en versalitas espaciadas de la marca, la pastilla cian al pasar, y el contorno cian de «Radar» cuando está elegido. El número va al lado, discreto. */ .dos-filtros { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; } .dos-filtros-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 2px; } .dos-filtros-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px 0 2px 10px; border-left: 1.5px solid var(--lg-borde, var(--linea)); margin-left: 10px; } .dos-filtros-grupo { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 2px; } .dos-filtro { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 7px 14px; margin: 0; border: 0; border-radius: 999px; background: transparent; box-shadow: none; cursor: pointer; font-family: var(--tipo-marca); font-size: .71875rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--texto); transition: background var(--dur-ui, .22s) var(--ease-premium, ease), color var(--dur-ui, .22s) var(--ease-premium, ease), box-shadow var(--dur-ui, .22s) var(--ease-premium, ease); } .dos-filtro:hover:not([disabled]), .dos-filtro:focus-visible { background: rgba(0,134,163,.07); color: var(--verde-oscuro); } .dos-filtro.activa { background: rgba(0,134,163,.09); color: var(--verde-oscuro); box-shadow: inset 0 0 0 1.5px var(--verde-oscuro); } .dos-filtro[disabled] { opacity: .38; cursor: default; } .dos-filtro-n { font-family: var(--tipo-texto); letter-spacing: 0; font-size: .75rem; font-weight: 600; color: var(--texto-suave); font-variant-numeric: tabular-nums; } .dos-filtro.activa .dos-filtro-n { color: var(--verde-oscuro); } .dos-filtro-flecha { display: inline-flex; margin-left: -2px; transition: transform .18s ease; } .dos-filtro-flecha svg { width: 11px; height: 11px; } .dos-filtro-flecha.abierta { transform: rotate(180deg); } .dos-filtro-sub { text-transform: none; letter-spacing: .01em; font-size: .8125rem; font-family: var(--tipo-texto); font-weight: 600; } .dos-filtro-sub .dos-flag { width: 16px; height: 11px; border-radius: 2px; } .dos-filtros-sep { width: 1.5px; height: 18px; margin: 0 6px; background: var(--lg-borde, var(--linea)); } html[data-modo="incognito-oscuro"] .dos-filtro:hover:not([disabled]) { background: rgba(47,198,224,.12); } html[data-modo="incognito-oscuro"] .dos-filtro.activa { background: rgba(47,198,224,.14); box-shadow: inset 0 0 0 1.5px rgba(95,224,245,.55); } @media (hover: none) and (pointer: coarse) { .dos-filtro { min-height: 40px; } } @media (max-width: 720px) { .dos-filtros-fila { gap: 4px; } .dos-filtros-sep { display: none; } .dos-filtro { padding: 7px 11px; } } /* ── LA FICHA DE LA NOTICIA ──────────────────────────────────────────────────────────────────── */ /* LIGERA AL DESPLAZAR (Jacobo: «la página de resultados se nota pesada y tarda en hacer el scroll»). Cada ficha llevaba vidrio (`backdrop-filter`: desenfoca lo que hay detrás en cada fotograma) y se levantaba al pasar el ratón con sombra animada; con cientos de fichas en pantalla eso es lo que se come el desplazamiento. Ahora es un panel liso del mismo color, sin animaciones de tamaño, y fuera de pantalla no se pinta (`content-visibility`). */ .dos-impacto.dos-imp-v345 { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--lg-panel-solido, var(--superficie)); border: 1px solid var(--lg-borde, var(--verde-bd)); box-shadow: 0 1px 2px rgba(20,30,20,.04); padding: 14px 18px 14px; transition: border-color .15s ease; display: flex; flex-direction: column; gap: 10px; } .dos-impacto.dos-imp-v345:hover { transform: none; box-shadow: 0 1px 2px rgba(20,30,20,.04); border-color: color-mix(in srgb, var(--verde-oscuro) 30%, var(--lg-borde, transparent)); background: var(--lg-panel-solido, var(--superficie)); } .dos-lista > .dos-impacto.dos-imp-v345 { contain-intrinsic-size: auto 420px; } .dos-imp-v345 > input[type="checkbox"] { position: static; } .dos-imp-top { display: flex; align-items: center; gap: 10px; min-width: 0; } .dos-imp-top > input[type="checkbox"] { position: static; flex: none; width: 17px; height: 17px; margin: 0; accent-color: var(--verde-solido); cursor: pointer; } .dos-imp-top .dos-imp-cab { margin: 0; padding: 0; min-width: 0; flex: 0 1 auto; } .dos-imp-top-der { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; flex: none; } /* La fecha, «más grande y visible», a la izquierda del desplegable. */ .dos-imp-fecha { font-family: var(--tipo-marca); font-size: .9375rem; font-weight: 600; color: var(--texto); letter-spacing: .01em; white-space: nowrap; font-variant-numeric: tabular-nums; } .dos-imp-fecha .dos-fecha-est { font-size: .8125rem; } .dos-imp-v345 select.dos-imp-mover { position: static; margin: 0; max-width: 170px; padding: 5px 10px; font-size: .78125rem; color: var(--texto); } .dos-imp-v345 .dos-imp-noticia { gap: 14px; } .dos-imp-v345 .dos-imp-titular { font-size: 1.1875rem; line-height: 1.3; } /* EL PÁRRAFO EMBORRONADO Y, EN SU MITAD, LAS BURBUJAS DE IMPACTOS POR PALABRA (radar.js, `parrafoConCuentas`). Van en el flujo, entre las dos mitades del párrafo, y montan un poco sobre las líneas de arriba y de abajo: flotan en medio del texto sin tapar nunca la palabra en amarillo. */ .dos-imp-parrafo { margin: 2px 0 0; min-width: 0; } .dos-imp-parrafo .dos-imp-frag { margin: 0; } .dos-imp-parrafo .dos-imp-frag + .dos-imp-frag-corte { margin-top: 12px; } .dos-imp-parrafo .dos-imp-frags > .dos-imp-cuentas { position: relative; z-index: 1; margin: -4px 0; } .dos-imp-parrafo.sin-texto > .dos-imp-cuentas { justify-content: flex-start; padding-left: 0; } .dos-imp-cuentas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; padding: 4px; } .dos-imp-cuenta { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 16px 8px 14px; border-radius: 999px; background: var(--superficie); border: 1.5px solid color-mix(in srgb, var(--verde-oscuro) 38%, transparent); box-shadow: 0 1px 2px rgba(22,45,35,.10), 0 10px 24px -12px rgba(22,45,35,.45); font-size: .875rem; color: var(--texto-suave); white-space: nowrap; } .dos-imp-cuenta b { font-family: var(--tipo-marca); font-size: 1.375rem; line-height: 1; font-weight: 700; color: var(--verde-oscuro); font-variant-numeric: tabular-nums; } .dos-imp-cuenta-kw { font-weight: 700; color: var(--texto); background: var(--dos-hl-bg, #FFE04D); padding: 1px 7px; border-radius: 6px; } /* EL VELO, SIN `filter`. `filter: blur()` en cada trozo de texto crea una capa por trozo y se repinta al desplazar; la sombra del propio texto, con la letra transparente, se ve igual de emborronada y cuesta mucho menos. La palabra del impacto sigue nítida y en amarillo. */ .dos-imp-v345 .dos-velo { filter: none; opacity: 1; color: transparent; text-shadow: 0 0 6px rgba(70, 78, 86, .62); } html[data-modo="incognito-oscuro"] .dos-imp-v345 .dos-velo { text-shadow: 0 0 6px rgba(200, 206, 212, .5); } /* LA PASTILLA GRANDE DEL ANÁLISIS: la frase centrada y, debajo, el botón bastante más grande. Crece con el análisis dentro. */ .dos-imp-v345 .dos-imp-analisis { position: static; z-index: auto; overflow: visible; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 18px 18px; text-align: center; border-radius: 20px; border: 1.5px solid color-mix(in srgb, var(--verde-oscuro) 22%, var(--lg-borde, transparent)); background: color-mix(in srgb, var(--verde-oscuro) 4%, var(--superficie)); box-shadow: none; } .dos-imp-v345 .dos-imp-an-frase { flex: none; margin: 0; font-family: var(--tipo-marca); font-size: 1.0625rem; line-height: 1.4; font-weight: 500; color: var(--texto); max-width: 60ch; } .dos-imp-v345 .dos-imp-an-frase b { font-weight: 700; } .boton-primario.dos-imp-an-btn { min-width: 220px; min-height: 48px; padding: 12px 34px; border-radius: 999px; font-size: 1rem; font-weight: 700; letter-spacing: .01em; } .dos-imp-v345 .dos-imp-an-res { width: 100%; text-align: left; } .dos-imp-v345 .dos-imp-an-res:not(:empty) { padding: 0; } .dos-imp-v345 .dos-imp-an-res.abierta { border-top: 1px solid var(--lg-borde, rgba(120,130,120,.22)); padding-top: 12px; } .dos-imp-v345 .dos-imp-pie { margin-top: 0; } @media (max-width: 720px) { .dos-impacto.dos-imp-v345 { padding: 12px 13px; } .dos-imp-top { flex-wrap: wrap; row-gap: 8px; } .dos-imp-top-der { margin-left: 0; flex: 1 0 100%; justify-content: space-between; } .dos-imp-fecha { font-size: .875rem; } .dos-imp-v345 .dos-imp-titular { font-size: 1.0625rem; } .dos-imp-cuenta { padding: 7px 13px 7px 12px; } .dos-imp-cuenta b { font-size: 1.1875rem; } .boton-primario.dos-imp-an-btn { width: 100%; } } /* ══════════════════════════════════════════════════════════════════════════════════════════════ v345 · EL POPUP DEL ENVÍO AUTOMÁTICO (Jacobo, 30/09/2026: «va bastante lento en el scroll y parece que le cuesta cargar»). Lo lento era el vidrio: el fondo desenfocaba la página entera (7 px) y el propio popup, que se desplaza por dentro, desenfocaba lo de detrás a 28 px en cada fotograma. Aquí el fondo es un velo liso y el popup un panel opaco: se desplaza como una página normal. En el móvil ocupa la pantalla. ══════════════════════════════════════════════════════════════════════════════════════════════ */ .modal-fondo.tar-envio-fondo { background: rgba(15, 22, 26, .46); -webkit-backdrop-filter: none; backdrop-filter: none; } .modal.tar-envio { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--superficie); border: 1px solid var(--lg-borde, var(--linea)); box-shadow: 0 24px 60px rgba(10, 30, 40, .28); max-width: 720px; width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 22px 26px 18px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; contain: content; border-radius: 22px; text-align: left; } html.tar-modal-abierto, html.tar-modal-abierto body { overflow: hidden; } .tar-envio-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } .tar-envio-cab h2 { margin: 0; flex: 1; display: flex; align-items: center; gap: 10px; font-family: var(--tipo-marca); font-size: 1.375rem; } .tar-envio-carta { font-size: 1.5rem; line-height: 1; } .tar-envio-cerrar { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--lg-borde, var(--linea)); background: var(--superficie); color: var(--texto-suave); display: grid; place-items: center; cursor: pointer; flex: none; } .tar-envio-cerrar:hover { color: var(--texto); background: rgba(0,134,163,.07); } .tar-envio-intro { margin: 0 0 14px; font-size: .96875rem; line-height: 1.5; color: var(--texto); } .tar-envio-ultimo { margin: -4px 0 14px; font-size: .8125rem; padding: 7px 12px; border-radius: 10px; background: rgba(0,134,163,.06); color: var(--texto-suave); } .tar-envio-ultimo.fallo { background: var(--ambar-fondo, #fff6e0); color: var(--texto); } .tar-envio-sec { padding: 14px 0; border-top: 1px solid var(--lg-borde, var(--linea)); } .tar-envio-sec h3 { margin: 0 0 10px; font-family: var(--tipo-marca); font-size: .75rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--verde-oscuro); } .tar-envio-nota { margin: 8px 0 0; font-size: .8125rem; line-height: 1.45; color: var(--texto-suave); } .tar-envio-remitente select, .tar-envio-campo select, .tar-envio-campo input { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--lg-borde, var(--linea)); border-radius: 12px; background: var(--superficie); color: var(--texto); font: inherit; font-size: .875rem; } .tar-envio-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .tar-envio-botones .boton-mini, .tar-envio-aviso-rec .boton-mini { text-decoration: none; } .tar-envio-aviso-rec { margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; background: var(--ambar-fondo, #fff6e0); font-size: .84375rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tar-envio-conectar { margin-top: 10px; padding: 12px; border: 1.5px dashed var(--lg-borde, var(--linea)); border-radius: 14px; } .tar-envio-conectar[hidden] { display: none; } .tar-envio-conectar p { margin: 0 0 8px; } .tar-envio .tar-envio-add { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .tar-envio .tar-envio-add input { flex: 1 1 160px; min-height: 40px; } .tar-envio .tar-envio-dest { display: flex; flex-wrap: wrap; gap: 6px; } .tar-envio .tar-dest-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 6px 5px 12px; } .tar-envio .tar-dest-chip small { font-weight: 400; opacity: .75; } .tar-envio .tar-dest-chip button { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; } .tar-envio .tar-dest-chip button:hover { background: rgba(194, 52, 52, .12); color: #c23434; } .tar-envio .tar-dest-chip button svg { width: 11px; height: 11px; } .tar-envio .tar-envio-pauta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .tar-envio-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .tar-envio-campo > span { font-size: .78125rem; font-weight: 600; color: var(--texto-suave); } .tar-envio-campo[hidden] { display: none; } .tar-envio-campo-ancho { margin-bottom: 10px; } .tar-envio #te-cuerpo { width: 100%; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--lg-borde, var(--linea)); border-radius: 12px; background: var(--superficie); color: var(--texto); font: inherit; font-size: .875rem; line-height: 1.5; resize: vertical; min-height: 140px; } .tar-envio .tar-var-chip:hover { transform: none; background: rgba(0,134,163,.08); } .tar-envio .tar-envio-previa { margin-top: 12px; background: var(--superficie); max-height: 320px; overflow: auto; overscroll-behavior: contain; } .tar-previa-cab { margin-bottom: 6px; } .tar-envio-acciones { position: sticky; bottom: -18px; margin: 4px -26px -18px; padding: 12px 26px 16px; background: var(--superficie); border-top: 1px solid var(--lg-borde, var(--linea)); align-items: center; } .tar-envio-hueco { flex: 1; } .tar-envio-probar { white-space: nowrap; } @media (max-width: 720px) { .modal-fondo.tar-envio-fondo { padding: 0; align-items: stretch; } .modal.tar-envio { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; padding: 16px 16px 0; border: 0; } .tar-envio-cab h2 { font-size: 1.1875rem; } .tar-envio .tar-envio-pauta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .tar-envio .tar-envio-add input, .tar-envio .tar-envio-add button { flex: 1 1 100%; } .tar-envio-acciones { margin: 4px -16px 0; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); bottom: 0; flex-wrap: wrap; } .tar-envio-acciones > button { flex: 1 1 auto; min-height: 44px; } .tar-envio-hueco { display: none; } .tar-envio-probar { flex-basis: 100% !important; } } /* ══════════════════════════════════════════════════════════════════════════════════════════════ v347 · FECHA Y HORA, AIRE ENTRE NOTICIAS Y LA BARRA DE AÑADIR UNA NOTICIA (Jacobo, 30/09/2026) ══════════════════════════════════════════════════════════════════════════════════════════════ */ /* «La hora debe aparecer con tipografía light y la fecha en negrita, con más espacio entre ambos para diferenciar las cifras» (radar.js, `fechaHoraHTML`). En la ficha de la noticia y en el pie de la pastilla. */ .fh-d { font-weight: 700; } .fh-h { font-weight: 300; margin-left: .75em; } .dos-imp-fecha { font-weight: 400; } .dos-imp-fecha .fh-d { font-weight: 700; } .dos-imp-fecha .fh-h { font-weight: 300; margin-left: .8em; } .dos-card-fecha .fh-d { font-weight: 700; } .dos-card-fecha .fh-h { font-weight: 300; margin-left: .65em; } /* «Tiene que haber más espacio entre noticia y noticia en los resultados.» */ .dos-lista { gap: 24px; } @media (max-width: 720px) { .dos-lista { gap: 18px; } } /* «Más espacio en el hueco para añadir una nueva noticia… y más separación con las opciones de clasificación.» Un solo enlace cada vez: es un campo de una línea (radar.js). */ .dos-manual { margin: 22px 0 30px; } .dos-manual-barra { gap: 8px 14px; padding: 8px 8px 8px 18px; min-height: 58px; } .dos-manual-url { flex: 1 1 220px; min-height: 42px; padding: 10px 0; font-size: .9375rem; } .dos-manual-btn { min-height: 42px; padding-left: 18px; padding-right: 18px; } @media (max-width: 720px) { .dos-manual { margin: 18px 0 24px; } .dos-manual-barra { padding: 8px 8px 8px 14px; } } /* «Cuando hay búsquedas conjuntas no hace falta que estén los nombres de los ingredientes, pueden estar solo los iconos y deben estar a la misma distancia entre sí como lo están el botón del mail y el de eliminar búsqueda.» Una sola variable para los dos huecos: el de los iconos no puede separarse del de los botones. */ .dos-v345 { --hueco-mandos: 5px; } .dos-busquedas .dos-v345 { --hueco-mandos: 6px; } .dos-v345 .dos-card-mandos { gap: var(--hueco-mandos); } .dos-v345.dos-varias .dos-card-fuente, .dos-busquedas .dos-v345.dos-varias .dos-card-fuente { display: none; } .dos-v345.dos-varias .dos-card-ambitos { gap: var(--hueco-mandos); } .dos-v345.dos-varias .dos-card-ambitos > .dos-amb-ico + .dos-amb-ico { margin-left: 0; } /* ══════════════════════════════════════════════════════════════════════════════════════════════ v350 · LA PASTILLA DEL CONJUNTO (Jacobo, 01/10/2026: «cuando hay dos búsquedas conjuntas, regenerar se pinta fuera de la pastilla y el desplegable no es del estilo exacto del site») ══════════════════════════════════════════════════════════════════════════════════════════════ */ /* Los tres botones caben: en el escritorio no encogían (flex 1 1 auto sin min-width) y «Regenerar ⌄» salía 16 px por la derecha de una tarjeta de 238. Con la flecha hacen falta ~225 px y la tarjeta estrecha del escritorio deja 212: ahí la flecha se va (el botón sigue abriendo su menú) y quedan como los de las demás pastillas; con sitio (el móvil, a todo el ancho), vuelve. Y si aun así faltara, el texto se recorta dentro de su botón en vez de empujar fuera. */ .dos-v345.dos-cj { container: cj / inline-size; } .dos-v345.dos-cj .dos-card-acc > .dos-acc { min-width: 0; } .dos-v345.dos-cj .dos-acc-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .dos-v345.dos-cj .dos-cj-menu > svg:not(.dos-acc-ico) { width: 9px; height: 9px; flex: none; } @container cj (max-width: 300px) { .dos-cj-menu > svg:not(.dos-acc-ico) { display: none !important; } } /* El desplegable, EL DE LA CABECERA (`.tar-submenu-caja` y sus filas): la caja de vidrio de esquinas de 18, filas planas en versalitas espaciadas de la marca, el cian suave al pasar y la grieta entre fila y fila. */ .dos-minipop.dos-minipop-cj { width: max-content; min-width: 216px; max-width: min(300px, calc(100vw - 32px)); padding: 3px; gap: 0; border-radius: 18px; border: 1.5px solid var(--lg-borde, var(--linea)); background: var(--lg-panel-solido, var(--superficie)); box-shadow: var(--lg-sombra, 0 8px 24px rgba(0,0,0,.1)); animation: dos-kws-entra .18s ease; } .dos-minipop-cj .dos-minipop-tit { padding: 9px 15px 7px; font-family: var(--tipo-marca); font-size: .625rem; font-weight: 600; letter-spacing: .14em; color: var(--texto-suave); } .dos-minipop-cj .dos-minipop-op { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 15px; margin: 0; border: 0; border-radius: 14px; background: transparent; box-shadow: none; font-family: var(--tipo-marca); font-size: .75rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--texto); text-align: left; line-height: 1.35; transition: background var(--dur-ui, .22s) var(--ease-premium, ease), color var(--dur-ui, .22s) var(--ease-premium, ease); } .dos-minipop-cj .dos-minipop-tit + .dos-minipop-op { border-top: 0; } .dos-minipop-cj .dos-minipop-op + .dos-minipop-op { border-top: 1.5px solid var(--lg-borde, var(--linea)); border-radius: 0 0 14px 14px; } .dos-minipop-cj .dos-minipop-op:hover, .dos-minipop-cj .dos-minipop-op:focus-visible { background: rgba(0,134,163,.08); color: var(--verde-oscuro); border-color: var(--lg-borde, var(--linea)); } .dos-minipop-cj .dos-minipop-op-azul { color: var(--verde-oscuro); } .dos-minipop-cj .dos-minipop-n { float: none; flex: none; background: var(--verde-oscuro); color: #fff; letter-spacing: 0; } html[data-modo="incognito-oscuro"] .dos-minipop-cj .dos-minipop-op:hover, html[data-modo="incognito-oscuro"] .dos-minipop-cj .dos-minipop-op:focus-visible { background: rgba(47,198,224,.13); } @media (prefers-reduced-motion: reduce) { .dos-minipop.dos-minipop-cj { animation: none; } } /* v350: el icono de la pestaña «Conjunto» se veía como un círculo blanco vacío: el trazo es `currentColor` y la pestaña activa pinta su texto en blanco, sobre el círculo blanco. El icono va en el cian de la marca. */ .dos-tab.activo .dos-tab-ico { color: var(--verde-oscuro); } .dos-tab .dos-tab-ico svg { display: block; } /* v350 · EL POPUP DEL ENVÍO, MÁS FLUIDO AL DESPLAZAR (Jacobo, 01/10/2026: «ha fallado un poco en fluidez en el scroll»). El popup ya era un panel liso (v345), pero DETRÁS seguía vivo el tablón: la cabecera y las pastillas de vidrio con desenfoque (`backdrop-filter`) y el barrido animado de las búsquedas en marcha. Con la capa semitransparente encima, cada fotograma del desplazamiento volvía a componer ese fondo. Mientras hay un popup abierto el fondo se congela (animaciones en pausa, sin desenfoque: detrás de la capa no se distingue) y el popup se desplaza en su propia capa. */ html.tar-modal-abierto main.contenido *, html.tar-modal-abierto .barra-superior, html.tar-modal-abierto .barra-superior * { animation-play-state: paused !important; } html.tar-modal-abierto main.contenido *, html.tar-modal-abierto .barra-superior { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .modal.tar-envio { will-change: scroll-position; transform: translateZ(0); } /* ══ v352 · LA VISTA DE REDES CON EL ARMAZÓN DE NOTICIAS (Claude Code, 01/10/2026) ══════════════════════ Jacobo: «que se parezca más a cómo se ve una búsqueda de noticias, sin renunciar a que cada post se vea como se ve en su red social». El marco es el de la ficha de noticias (.dos-impacto.dos-imp-v345, sus pastillas, burbujas y secciones) y la réplica de cada red (.rs-post) va dentro, intacta y a su ancho. */ .dos-imp-rs { gap: 12px; } .dos-lista > .dos-impacto.dos-imp-rs { contain-intrinsic-size: auto 560px; } .dos-imp-rs > .rs-post { align-self: flex-start; } .dos-imp-rs .dos-imp-red .dos-burbuja-red, .dos-imp-rs .dos-imp-pie .dos-burbuja-red { width: 16px; height: 16px; border-radius: 5px; } .dos-imp-rs .dos-imp-red .dos-burbuja-red svg, .dos-imp-rs .dos-imp-pie .dos-burbuja-red svg { width: 16px; height: 16px; } .dos-imp-rs .dos-imp-meta { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: 8px; } .dos-imp-rs .rs-badge-conv, .dos-imp-rs .rs-badge-resp, .dos-imp-rs .rs-badge-loc { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 600; color: var(--texto-suave); background: color-mix(in srgb, var(--verde-oscuro) 7%, transparent); border-radius: 999px; padding: 3px 9px; white-space: nowrap; } .rs-ico { width: 13px; height: 13px; flex: none; vertical-align: -2px; } .dos-imp-rs .dos-imp-cuentas { justify-content: flex-start; padding: 2px 0 0; } .dos-imp-rs .dos-imp-pie { margin-top: 0; } /* Dentro del marco, el término y «Ver en X» ya los dicen las burbujas de impactos y el pie: no se repiten. */ .dos-imp-rs .rs-stats .rs-marca-kw, .dos-imp-rs .rs-stats .rs-stats-ver { display: none; } /* La palabra, en el MISMO amarillo que en noticias (antes, un beige de una variable que no existía). */ .dos-imp-rs .rs-x-texto mark, .dos-imp-rs .rs-yt-titulo mark, .dos-imp-rs .rs-hilo mark { background: var(--dos-hl-bg, #FFE04D); color: inherit; } /* La réplica, con la letra de las redes (es lo que ya prometía el comentario de tarsis.css). */ .dos-imp-rs .rs-cuerpo { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* Las secciones por red: el logo donde noticias pone la bandera, y a la derecha cómo se recorrió. */ .dos-grupo-rrss .dos-grupo-tit { display: flex; align-items: center; gap: 8px; } .dos-grupo-rrss .dos-grupo-tit .dos-burbuja-red { width: 18px; height: 18px; border-radius: 5px; } .dos-grupo-rrss .dos-grupo-tit .dos-burbuja-red svg { width: 18px; height: 18px; } .dos-grupo-rrss .dos-grupo-meta { margin-left: auto; font-size: .75rem; font-weight: 500; color: var(--texto-suave); text-transform: none; letter-spacing: 0; } /* Las burbujas de las redes llevan su logo, como en el tablón. */ .dos-filtros-rrss .dos-filtro .dos-burbuja-red { margin-right: 6px; } .dos-resumen-rrss .dos-stat-sub { white-space: normal; } .dos-acciones-rrss { margin: 6px 0 12px; display: flex; gap: 10px; } .dos-rrss-vacias { margin: 2px 0 10px; } .dos-rrss-noleidos { margin: 22px 0 8px; } .dos-rrss-noleidos > summary { cursor: pointer; font-weight: 600; color: var(--texto-suave); } .tar-rrss-aviso { display: flex; gap: 8px; align-items: flex-start; } .tar-rrss-aviso .rs-ico { margin-top: 3px; color: #b26a00; } @media (max-width: 720px) { .dos-imp-rs > .rs-post { max-width: 100%; } .dos-imp-rs .dos-imp-top { flex-wrap: wrap; } .dos-imp-rs .dos-imp-top-der { margin-left: 27px; width: 100%; } } @media (max-width: 480px) { /* En el móvil, las burbujas de red enseñan solo el logo y el número. */ .dos-filtros-rrss .dos-filtro-red-n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .dos-filtros-rrss .dos-filtro .dos-burbuja-red { margin-right: 4px; } } /* ══════════════════════════════════════════════════════════════════════════════════════════════ v370 · NOMBRES PROPIOS, EL CONJUNTO POR INGREDIENTES Y LA FICHA MÁS BAJA (Jacobo, 05/10/2026) ══════════════════════════════════════════════════════════════════════════════════════════════ */ /* EL NOMBRE DE LAS PASTILLAS. «Si clicamos en el nombre se puede editar… las individuales y la de conjunto deben tener el mismo estilo de tipografía, tamaño y color.» Es un botón que se cambia por un campo al pulsarlo (radar.js, `editarNombreEnSitio`). Los iconos de los ingredientes también son botón: en una búsqueda de varios ingredientes son lo único que se ve hasta que tenga nombre propio (decisión del 30/09: bastan los iconos). */ .dos-card-sup > .dos-card-ambitos { -webkit-appearance: none; appearance: none; background: none; border: 0; padding: 0; margin: 0; box-shadow: none; font: inherit; color: inherit; cursor: pointer; border-radius: 7px; } .dos-card-sup > .dos-card-ambitos:focus-visible { outline: 2px solid var(--verde-oscuro); outline-offset: 2px; } .dos-card-nombre { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: 5px; flex: 0 1 auto; min-width: 0; max-width: 100%; margin: 0 0 0 -4px; padding: 2px 4px; border: 0; border-radius: 6px; background: none; box-shadow: none; cursor: text; text-align: left; white-space: nowrap; font-family: var(--tipo-marca); font-size: .8125rem; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--verde-texto-2, #0A5A66); transition: background .15s ease; } .dos-card-nombre svg { flex: none; } .dos-card-nombre-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .dos-card-nombre:hover, .dos-card-nombre:focus-visible { background: rgba(0,134,163,.08); outline: none; } html[data-modo="incognito-oscuro"] .dos-card-nombre { color: #7fd8ea; } .dos-v345.dos-varias .dos-card-nombre:not(.propio) { display: none; } /* En el móvil (pastilla a todo el ancho) el nombre se ve siempre, como el de la fuente antes. */ @media (max-width: 720px) { .dos-busquedas .dos-v345.dos-sola .dos-card-nombre { display: inline-flex; } } .dos-nombre-input { flex: 1 1 auto; min-width: 0; width: 100%; margin: 0; padding: 2px 7px; font-family: var(--tipo-marca); font-size: .8125rem; font-weight: 700; color: var(--texto); background: var(--superficie); border: 1.5px solid var(--verde-oscuro); border-radius: 7px; outline: none; box-shadow: 0 0 0 3px rgba(0,134,163,.14); } .dos-nombre-input::placeholder { color: var(--texto-suave); font-weight: 600; } /* EL DESPLEGABLE DE «EDITAR» Y «REGENERAR» DEL CONJUNTO, CON LOS BOTONES DE LA PASTILLA. «Debe ser como los botones de la pastilla y ahora se parece al menú de la cabecera»: sin rótulo, y cada opción con el marco, la letra y el cian al pasar de «Editar» y «Regenerar». */ .dos-minipop.dos-minipop-cj { width: max-content; min-width: 200px; max-width: min(300px, calc(100vw - 32px)); padding: 6px; gap: 5px; border-radius: 14px; border: 1px solid var(--lg-borde, var(--linea)); background: var(--lg-panel-solido, var(--superficie)); box-shadow: 0 12px 28px rgba(0,0,0,.14); } .dos-minipop.dos-minipop-cj .dos-minipop-op.dos-acc { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; height: auto; min-height: 34px; margin: 0; padding: 7px 11px; border: 1px solid var(--lg-borde, var(--linea)); border-radius: 10px; background: var(--superficie); box-shadow: none; text-align: left; white-space: nowrap; font-family: var(--tipo-marca); font-size: .78125rem; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.2; color: var(--texto); } .dos-minipop.dos-minipop-cj .dos-minipop-op.dos-acc:hover, .dos-minipop.dos-minipop-cj .dos-minipop-op.dos-acc:focus-visible { background: rgba(0,134,163,.08); color: var(--verde-oscuro); border-color: color-mix(in srgb, var(--verde-oscuro) 35%, transparent); } .dos-minipop.dos-minipop-cj .dos-minipop-op-azul.dos-acc { color: var(--verde-oscuro); border-color: color-mix(in srgb, var(--verde-oscuro) 35%, transparent); } .dos-minipop.dos-minipop-cj .dos-mp-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .dos-minipop.dos-minipop-cj .dos-minipop-n { float: none; flex: none; margin-left: 6px; background: var(--verde-oscuro); color: #fff; } html[data-modo="incognito-oscuro"] .dos-minipop.dos-minipop-cj .dos-minipop-op.dos-acc:hover { background: rgba(47,198,224,.13); } /* LA MARCA DE CADA BÚSQUEDA en el desplegable y en las pestañas del conjunto: la bandera de su región, o el icono de su ingrediente si no es de prensa. */ .dos-marca-flag { width: 18px; height: 12px; border-radius: 2px; flex: none; object-fit: cover; box-shadow: 0 0 0 .5px rgba(0,0,0,.15); } .dos-marca-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 19px; height: 19px; border-radius: 6px; border: 0; } .dos-marca-ico svg { width: 12px; height: 12px; display: block; } .dos-tab .dos-marca-flag, .dos-tab .dos-marca-ico { margin-left: -4px; } .dos-tab.activo .dos-marca-ico { background: #fff; } /* LA CABECERA DE LOS RESULTADOS. El nombre se cambia pulsándolo; los botones son las burbujas de Todos · Nacionales · Regionales («misma tipo y misma forma de clicarse»), y el del PDF lleva el contorno de la burbuja elegida. */ .dos-cab-tit { min-width: 0; flex: 1 1 320px; } .dos-cab h1 { display: flex; align-items: center; gap: 6px; min-width: 0; } .dos-cab-eslabon { display: inline-flex; flex: none; color: var(--verde-oscuro); } .dos-cab-eslabon svg { width: 18px; height: 18px; } .dos-titulo-nombre { -webkit-appearance: none; appearance: none; min-width: 0; margin: 0 0 0 -6px; padding: 2px 6px; border: 0; border-radius: 9px; background: none; box-shadow: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: left; cursor: text; overflow-wrap: anywhere; transition: background .15s ease; } .dos-titulo-nombre:hover, .dos-titulo-nombre:focus-visible { background: rgba(0,134,163,.07); outline: none; } .dos-nombre-input.dos-nombre-input-h1 { font: inherit; width: min(100%, 680px); padding: 1px 8px; border-radius: 9px; } .dos-cab-desc { margin-top: 2px; } .dos-acciones.dos-acciones-cab { gap: 4px; align-items: center; } a.dos-filtro.dos-cab-btn, a.dos-filtro.dos-cab-btn:hover { text-decoration: none; } .dos-filtro.dos-cab-btn-pdf { color: var(--verde-oscuro); box-shadow: inset 0 0 0 1.5px var(--verde-oscuro); } .dos-filtro.dos-cab-btn-pdf:hover, .dos-filtro.dos-cab-btn-pdf:focus-visible { background: rgba(0,134,163,.1); } html[data-modo="incognito-oscuro"] .dos-filtro.dos-cab-btn-pdf { box-shadow: inset 0 0 0 1.5px rgba(95,224,245,.55); } /* En el móvil caben los dos en una fila: menos aire entre letras y en los bordes. */ @media (max-width: 720px) { .dos-acciones.dos-acciones-cab { width: 100%; flex-wrap: nowrap; gap: 2px; } .dos-filtro.dos-cab-btn { padding: 7px 9px; letter-spacing: .05em; font-size: .6875rem; white-space: nowrap; } } /* EL CONJUNTO: fuera la barra que separaba las pestañas del recuento («quitemos la barra horizontal»), y cada ingrediente con su cabecera de su color, uno debajo de otro; del segundo en adelante, con un filete de su color encima. */ .dos-conj-tabs { border-bottom: 0; padding-bottom: 0; } .dos-conj-bloque { margin-top: 16px; border-top: 0; padding-top: 0; } .dos-ingr-cab { --ingr: var(--f-medios); --ingr-t: var(--f-medios-t); display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 6px 0 14px; } .dos-ingr-cab.dos-ingr-rrss { --ingr: var(--f-rrss); --ingr-t: var(--f-rrss-t); } .dos-ingr-cab.dos-ingr-trends { --ingr: var(--f-trends); --ingr-t: var(--f-trends-t); } .dos-ingr-cab ~ .dos-ingr-cab { margin-top: 44px; padding-top: 22px; border-top: 2px solid color-mix(in srgb, var(--ingr) 45%, transparent); } .dos-ingr-cab .dos-amb-ico { width: 28px; height: 28px; border-radius: 8px; } .dos-ingr-cab .dos-amb-ico svg { width: 16px; height: 16px; } .dos-ingr-tit { font-family: var(--tipo-marca); font-size: .875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ingr-t); } .dos-ingr-det { font-size: .8125rem; color: var(--texto-suave); min-width: 0; } .dos-ingr-sub { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; font-size: 1rem; } /* LA FICHA DE LA NOTICIA, UN POCO MÁS BAJA, y la pastilla de «Qué se dice de…» y su botón, más pequeños. */ .dos-impacto.dos-imp-v345 { padding: 12px 16px; gap: 8px; } .dos-imp-v345 .dos-imp-titular { font-size: 1.125rem; line-height: 1.28; } .dos-imp-v345 .dos-imp-frag { font-size: .875rem; line-height: 1.5; } .dos-imp-cuenta { padding: 6px 14px 6px 12px; } .dos-imp-cuenta b { font-size: 1.25rem; } .dos-imp-v345 .dos-imp-analisis { gap: 8px; padding: 10px 14px; border-radius: 16px; } .dos-imp-v345 .dos-imp-an-frase { font-size: .9375rem; line-height: 1.35; } .boton-primario.dos-imp-an-btn { min-width: 160px; min-height: 36px; padding: 7px 24px; font-size: .875rem; } @media (max-width: 720px) { .dos-impacto.dos-imp-v345 { padding: 11px 12px; } .dos-imp-v345 .dos-imp-titular { font-size: 1rem; } .boton-primario.dos-imp-an-btn { width: 100%; min-height: 40px; } } /* LA PALABRA DEL PÁRRAFO DE FONDO, TAMBIÉN EMBORRONADA. «Aunque salga en amarillo, también difuminado, para que se mimetice con el resto y no desvíe la atención de los destacados»: el número de impactos, el titular y el subtítulo, que siguen nítidos. Sin `filter` (ver el velo, v345): la letra transparente con su sombra y el amarillo como un halo. */ .dos-imp-v345 .dos-imp-frag .dos-hl { color: transparent; text-shadow: 0 0 6px rgba(70, 78, 86, .55); background: color-mix(in srgb, var(--dos-hl-bg, #FFE04D) 55%, transparent); box-shadow: 0 0 7px 3px color-mix(in srgb, var(--dos-hl-bg, #FFE04D) 55%, transparent); border-radius: 6px; user-select: none; -webkit-user-select: none; } html[data-modo="incognito-oscuro"] .dos-imp-v345 .dos-imp-frag .dos-hl { text-shadow: 0 0 6px rgba(200, 206, 212, .45); } /* ══════════════════════════════════════════════════════════════════════════════════════════════ v371 · MITRA: EL RANKING DE PUBLICACIONES CITADAS POR LA PRENSA, POR RED (Jacobo, 06/10/2026) «Un selector por redes sociales como el de la herramienta de redes, nada de mezclar… con una visión de cómo se ve el post en la red social, y debajo el listado de medios donde aparece.» Las burbujas son las de la vista de redes de Radar; la réplica de cada publicación es la misma (`.rs-post`), y debajo, «Aparece en». ══════════════════════════════════════════════════════════════════════════════════════════════ */ .pp-redes .dos-filtros-fila { margin: 2px 0 14px; } .pp-redes .dos-filtro .dos-burbuja-red { margin-right: 6px; } .pp-lista.pp-lista-rs { gap: 16px; } .pp-item { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; border: 1px solid var(--lg-borde, var(--linea)); border-radius: 18px; background: var(--lg-panel-solido, var(--superficie)); } .pp-item-cab { display: flex; align-items: baseline; gap: 10px; } .pp-item .pp-pos { font-family: var(--tipo-marca); font-size: 1.125rem; font-weight: 700; color: var(--verde-oscuro); text-align: left; padding: 0; min-width: 1.4em; } .pp-cuantas { font-size: .8125rem; color: var(--texto-suave); } .pp-cuantas b { color: var(--texto); font-variant-numeric: tabular-nums; } /* La columna de cada red, la suya (X 600, Instagram 470…): como en su feed, sin estirarse al ancho de la tarjeta. */ .pp-item > .rs-post { align-self: flex-start; max-width: min(100%, var(--ancho, 600px)); } .pp-item .pp-aparece { margin-top: 2px; } /* Las pastillas de los medios, sin vidrio: con veinticinco publicaciones son cientos, y el desenfoque de cada una era lo que más pesaba al desplazar la pantalla. */ .pp-item .pp-medio { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--superficie); box-shadow: none; } .pp-item a.pp-medio:hover { background: rgba(0,134,163,.08); color: var(--verde-oscuro); } .pp-mas { margin: 14px auto 0; display: flex; } @media (max-width: 560px) { .pp-item { padding: 10px 10px 12px; } } /* EL ÍNDICE DICE CUÁNDO SE CALCULÓ («no parece un índice muy actualizado»): al lado del título, discreto. */ .tar-ix-actualizado { font-size: .78125rem; color: var(--texto-suave); white-space: nowrap; }