/* * 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). Y DESDE EL 10/10/2026 (Jacobo), más hondo: la pastilla BRONCE es #94622A, sólida (5,2:1 con la letra blanca; con #a5702c al 95 % eran 3,89). Es `--bronce-plan`; el oro del LOGO (`--tarsis-oro-logo`, #A5702C) y el color de lo comparado no cambian. */ :root { --bronce-plan: #94622A; --bronce-plan-hondo: #7E5323; } /* 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; } /* En la cabecera del teléfono (11/10/2026): el nombre de una organización no cabe entero al lado del logo y de los dos iconos. Con 180 px, «Diario de la Costa» empujaba el engranaje fuera de la pantalla y la página se iba de lado (medido a 390: 405 px). Se corta con puntos suspensivos, como ADMIN o BRONCE ocupan su sitio; el nombre entero está en Configuración. */ @media (max-width: 720px) { #cuenta-zona .tar-plan-org { max-width: min(96px, 25vw); padding-left: 10px; padding-right: 10px; } } /* 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; } /* ══ «‹» PARA VOLVER EN LA APP DE LA PANTALLA DE INICIO (09/10/2026) ══ Solo existe con Tarsis instalado (`html.tar-app`) y cuando hay a dónde volver dentro de Tarsis (lo crea y lo enseña `pintarVolverApp` en radar.js): sin barra del navegador no hay otro «atrás». Es un `.btn-nav` como los de la derecha (transparente, pastilla cian al tocar), de 44 × 44 para el dedo, pero solo cuesta 28 px de fila: se mete 12 en el relleno de la cápsula y 4 en el hueco hasta el logo. En el móvil, mientras está a la vista, el logo puede encogerse para que la cabecera siga en una fila (medido: 131 px de ancho a 430, 113 a 390, 98 a 375, 83 a 360). */ .tar-volver-app[hidden] { display: none !important; } html.tar-app .barra-superior .tar-volver-app { flex: none; width: 44px; height: 44px; margin: 0 -4px 0 -12px; padding: 0; } html.tar-app .barra-superior .tar-volver-app .tar-ico { width: 24px; height: 24px; } @media (max-width: 720px) { html.tar-app.tar-puede-volver .barra-superior .logo { flex: 0 1 auto; min-width: 0; } html.tar-app.tar-puede-volver .logo-tarsis { max-width: 100%; object-fit: contain; object-position: left center; } } /* ==================== 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: 262px minmax(0, 1fr); gap: 26px; align-items: start; } /* 262: «CONTRASEÑA Y SESIONES» cabe entera (11/10/2026) */ /* `minmax(0, 1fr)` y no `1fr` (09/10/2026, sistema móvil, D2): `1fr` es `minmax(auto, 1fr)` y la pista no bajaba del ancho mínimo de su contenido —las muestras de Aspecto—, así que Configuración medía 454 px en cualquier iPhone y la página se iba de lado. */ @media (max-width: 860px) { .cfg-marco { grid-template-columns: minmax(0, 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 --- */ /* `min(210px, 100%)` (09/10/2026, D2): con el `max-width` definido el navegador calculaba DOS columnas de 210 para el ancho mínimo (434 px) aunque solo cupiera una. */ .cfg-temas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 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; } /* --- Las guías de cada asistente en la pantalla del conector (09/10/2026, D28): desplegables sobrios, como una lista; la línea de terminal, en su caja con su «Copiar». --- */ .cfg-conex-movil { max-width: 720px; margin: -6px 0 18px; } .cfg-conex-guias { max-width: 720px; margin: 8px 0 22px; } .cfg-conex-guias h3 { font-size: 1rem; margin: 0 0 8px; } .cfg-conex-guia { border-bottom: 1px solid var(--lg-borde, rgba(0,0,0,.08)); } .cfg-conex-guia > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--tipo-marca); font-size: .9375rem; font-weight: 600; } .cfg-conex-guia > summary::-webkit-details-marker { display: none; } .cfg-conex-guia > summary::before { content: ''; flex: none; width: 7px; height: 7px; margin: 0 4px 0 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; color: var(--texto-suave); } .cfg-conex-guia[open] > summary::before { transform: rotate(45deg); } .cfg-conex-guia-cuerpo { padding: 0 2px 14px 22px; font-size: .9375rem; line-height: 1.6; } .cfg-conex-guia-cuerpo ol { margin: 0 0 6px; padding-left: 20px; } .cfg-conex-guia-cuerpo p { margin: 6px 0; } .cfg-conex-cmd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; } .cfg-conex-cmd code { flex: 1 1 260px; min-width: 0; font-size: .8125rem; padding: 9px 12px; border-radius: 10px; background: rgba(0,0,0,.05); border: 1px solid var(--lg-borde, rgba(0,0,0,.12)); user-select: all; word-break: break-all; } html[data-modo="incognito-oscuro"] .cfg-conex-cmd code { background: rgba(255,255,255,.06); } /* --- Configuración → Conexiones en el MÓVIL (09/10/2026, D25). La fila era un `flex` de cuatro columnas sin regla móvil y el texto se quedaba en una o dos palabras de ancho: la fila del conector medía ~1.000 px de alto a 390. Dos filas: icono y texto arriba, estado y acción abajo. */ @media (max-width: 720px) { /* El estado ocupa las dos primeras columnas: si fuera solo la del icono, la ensancharía y el texto se quedaría en media fila (medido a 390: 180 px de texto con la versión de dos columnas). */ .cfg-conex { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "ico txt txt" "chip chip accion"; gap: 10px 12px; align-items: center; padding: 12px 14px; } .cfg-conex-ico { grid-area: ico; align-self: start; padding-top: 2px; } .cfg-conex-txt { grid-area: txt; } .cfg-conex > .cfg-chip { grid-area: chip; justify-self: start; } .cfg-conex-accion { grid-area: accion; justify-self: end; } .cfg-conex-accion .boton-mini, .cfg-conex-cmd .cfg-conex-copiar { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: 16px; } .cfg-conex-txt .dos-meta { overflow-wrap: anywhere; } .cfg-conex-guia-cuerpo { padding-left: 4px; } } /* --- 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; } /* --- 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; } /* ==================== CONFIGURACIÓN EN EL MÓVIL (11/10/2026) ==================== * Encargo de Jacobo: «mejorar y perfeccionar las opciones de configuración y cómo se ven en mobile». * Hasta 720 px la página era el índice de escritorio apilado encima del apartado: siete filas de * versalitas y, debajo, el contenido, con el «Cerrar sesión» en medio. Ahora es como Ajustes de iOS: * una LISTA agrupada (la ficha de la cuenta arriba; lo de este navegador; la cuenta y su organización; * la salida aparte, en rojo) y, al tocar una fila, el apartado SOLO, con «‹ Configuración» para volver. * Las dos vistas salen del mismo HTML (`vistaConfiguracion`): `.cfg-en-lista` cuando la dirección no * pide un apartado (`?sec=`). En el escritorio no cambia nada: índice a la izquierda, apartado a la derecha. */ .cfg-lista-movil, .cfg-volver { display: none; } .cfg-tema-marca { display: none; } .cfg-acciones a.boton-secundario, .cfg-vacio a.boton-secundario { display: inline-flex; align-items: center; text-decoration: none; } .cfg-vacio a.boton-secundario { margin-top: 10px; } .cfg-herr { margin-top: 14px; } /* Contraseña y sesiones */ .cfg-sesiones { list-style: none; margin: 0; padding: 0; } .cfg-sesiones li { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 0; border-top: 1px solid var(--lg-borde, var(--linea)); } .cfg-sesiones li:first-child { border-top: 0; } .cfg-sesion-ico { display: inline-flex; flex: none; color: var(--texto-suave); } .cfg-sesion-ico .tar-ico { width: 20px; height: 20px; } .cfg-sesion-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cfg-sesion-txt b { font-size: .90625rem; font-weight: 600; } .cfg-sesion-txt small { font-size: .78125rem; color: var(--texto-suave); } .cfg-sesion-esta { font-size: .6875rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; vertical-align: 1px; background: rgba(0,134,163,.10); color: var(--tarsis-cian-hondo, #0C6C7A); } html[data-modo="incognito-oscuro"] .cfg-sesion-esta { background: rgba(47,198,224,.14); color: var(--verde-oscuro); } @media (max-width: 720px) { .cfg-marco { display: block; } .cfg-nav { display: none; } .cfg-cab { margin: 2px 0 16px; } .cfg-cab .dos-meta { display: none; } /* el correo ya va en la ficha de la cuenta */ .cfg-pantalla.cfg-en-lista .cfg-cuerpo { display: none; } .cfg-pantalla.cfg-en-lista .cfg-lista-movil { display: block; } .cfg-pantalla:not(.cfg-en-lista) .cfg-cab { display: none; } .cfg-volver { display: inline-flex; margin-bottom: 2px; } .cfg-cuerpo > h2 { font-size: var(--m-titulo, 1.75rem); line-height: 1.15; letter-spacing: -.028em; margin: 2px 0 10px; padding-bottom: 0; border-bottom: 0; } .cfg-intro { font-size: .9375rem; margin-bottom: 16px; } /* La ficha de la cuenta: iniciales, nombre, correo y su pastilla; lleva a «Cuenta y suscripción». */ .cfg-perfil { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 14px 14px 16px; margin: 0 0 22px; border-radius: 18px; background: var(--lg-panel-solido, var(--superficie)); border: 1px solid var(--lg-borde, var(--linea)); color: var(--texto); text-decoration: none; font-family: inherit; font-size: inherit; font-weight: inherit; } .cfg-perfil:hover { text-decoration: none; } .cfg-av { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 54px; height: 54px; border-radius: 50%; background: var(--verde-solido, #0E7E8F); color: #fff; font-family: var(--tipo-marca); font-size: 1.125rem; font-weight: 700; letter-spacing: .02em; } .cfg-perfil-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .cfg-perfil-txt b { font-family: var(--tipo-marca); font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; } .cfg-perfil-txt small { font-size: .8125rem; color: var(--texto-suave); overflow-wrap: anywhere; } .cfg-perfil .tar-plan { min-height: 0; padding: 2px 9px; margin-top: 5px; font-size: .75rem; cursor: inherit; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Los grupos: cajas de filas de 50 px con el filete empezando después del icono, como en iOS. */ .cfg-grupo { margin: 0 0 22px; border-radius: 18px; overflow: hidden; background: var(--lg-panel-solido, var(--superficie)); border: 1px solid var(--lg-borde, var(--linea)); } .cfg-fila { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 7px 14px; border: 0; background: transparent; color: var(--texto); text-decoration: none; text-align: left; font: inherit; font-size: 1rem; font-weight: 500; -webkit-tap-highlight-color: transparent; cursor: pointer; } .cfg-fila:hover { text-decoration: none; } .cfg-fila + .cfg-fila::before { content: ''; position: absolute; top: 0; left: 56px; right: 0; border-top: 1px solid var(--lg-borde, var(--linea)); } .cfg-fila:active { background: rgba(0,0,0,.05); } .cfg-fila-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: rgba(0,134,163,.10); color: var(--tarsis-cian-hondo, #0C6C7A); } .cfg-fila-ico .tar-ico, .cfg-fila-ico svg { width: 18px; height: 18px; } .cfg-fila-txt { flex: 1 1 auto; min-width: 0; } .cfg-fila-valor { flex: 0 1 auto; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9375rem; color: var(--texto-suave); } .cfg-fila .tar-chev { flex: none; width: 15px; height: 15px; color: var(--texto-suave); opacity: .55; } .cfg-perfil .tar-chev { flex: none; width: 15px; height: 15px; color: var(--texto-suave); opacity: .55; } .cfg-fila-salir { justify-content: center; font-weight: 600; color: #A2373B; } .cfg-version { margin: -8px 0 18px; text-align: center; font-size: .75rem; color: var(--texto-suave); } /* Aspecto como en iOS: tres muestras de teléfono con su marca de elegido debajo del nombre. */ .cfg-temas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: none; } .cfg-tema { align-items: center; text-align: center; gap: 6px; padding: 14px 6px 14px; border-radius: 18px; } .cfg-tema:hover { transform: none; } .cfg-tema .dos-meta { display: none; } .cfg-tema-muestra { width: 58%; height: 100px; margin: 0 auto 6px; border-radius: 12px; } .cfg-tema b { font-size: .9375rem; } .cfg-tema-marca { display: block; width: 22px; height: 22px; border-radius: 50%; margin-top: 2px; border: 1.5px solid color-mix(in srgb, var(--texto-suave) 55%, transparent); background: transparent; } .cfg-tema.activo .cfg-tema-marca { border-color: var(--verde-solido, #0E7E8F); background: var(--verde-solido, #0E7E8F); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); background-size: 15px 15px; background-position: center; background-repeat: no-repeat; } /* Bloques y formularios a dedo: campos de 44 px y letra de 16 px (iOS no amplía al enfocarlos). */ .cfg-bloque { padding: 16px; border-radius: 18px; } .cfg-campo { max-width: none; } .cfg-campo input { min-height: 44px; font-size: 1rem; } .cfg-acciones > button, .cfg-acciones > a { flex: 1 1 auto; justify-content: center; min-height: 44px; } .cfg-plan { flex-direction: column; align-items: flex-start; gap: 8px; } .cfg-cab-accion { flex-direction: column; gap: 4px; } .cfg-actualizar { width: 100%; justify-content: space-between; } .cfg-actualizar .boton-secundario { min-height: 44px; } .cfg-vacio { padding: 30px 18px; max-width: none; } .cfg-sesiones .boton-mini { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 16px; } } html[data-modo="incognito-oscuro"] .cfg-fila-ico { background: rgba(47,198,224,.14); color: var(--verde-oscuro); } html[data-modo="incognito-oscuro"] .cfg-fila-salir { color: #EE8A8D; } html[data-modo="incognito-oscuro"] .cfg-fila:active { background: rgba(255,255,255,.06); } @media (max-width: 720px) { html.tar-texto-grande .cfg-temas { grid-template-columns: minmax(0, 1fr); } html.tar-texto-grande .cfg-fila { flex-wrap: wrap; } html.tar-texto-grande .cfg-fila-valor { max-width: none; flex-basis: 100%; padding-left: 42px; white-space: normal; } } /* ==================== 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. Y SE COLOCA DONDE SE VE (09/10/2026, sistema móvil, D1 del informe 2-movil-global). Iba con `left: 50%` + `translateX(-50%)`, así que su ancho «encogido» solo disponía de la mitad derecha de la pantalla (195 px en un iPhone de 390: tres renglones), salía ENCIMA de la barra de pestañas y, con un diálogo abierto, DETRÁS de él (z 200 frente a 300: «Prueba enviada a…» no se veía nunca en el móvil). Ahora se centra con márgenes automáticos entre 12 px a cada lado, se apoya sobre lo que ocupe la barra de abajo (`--m-abajo`, bloque «EL SISTEMA MÓVIL») y va por encima de las hojas (`--z-aviso`). Radio 22 y no cápsula: con dos renglones, 999 px es un óvalo. */ .toast { display: inline-flex; align-items: center; gap: 12px; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); margin-inline: auto; width: fit-content; max-width: 640px; transform: none; bottom: var(--m-abajo, max(24px, env(safe-area-inset-bottom, 0px))); z-index: var(--z-aviso, 400); border-radius: 22px; } /* El de error es rojo: con la letra del vidrio (casi negra) se quedaba en 2,4:1. */ .toast.error { color: #fff; } .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, AL ESTILO DE INSTAGRAM EN iOS 26 (09/10/2026, encargo de Jacobo: «la barra inferior de la app de Instagram en iOS con liquid glass es una barra perfecta en fluidez y diseño y quiero una réplica casi exacta»). La pinta y la mueve public/js/tabbar.js (`TarsisBarra`) con lo que le da radar.js (`pintarTabBar`); especificación y medidas en docs/investigacion-movil-2026-10-09/1-barra-instagram-ios26.md. Se ve solo hasta 720 px, fuera de los marcos de la pantalla dividida y sin «Editar panel» en marcha. · Cápsula de vidrio de 62 px a 21 px de los lados, como la nativa; 86 px por pestaña + 16, centrada si caben. La lente, de 54, lleva DENTRO una copia de la fila con los glifos rellenos (la «lupa»). · El JS solo anima transform y opacity; los tamaños los escribe al maquetar, nunca en una animación. · SIN SOMBRA POR DEBAJO (Jacobo, 24/09/2026): se derramaba en el hueco con la barra de Safari y se veía como una franja oscura. El vidrio se separa del contenido con su borde y su canto de luz. · `--tar-hueco-abajo` (contrato del plan del 09/10, §3): lo que ocupa abajo la barra con su margen y el área segura; con teclado o sin barra, el hueco mínimo. Vive en (lo usa también `scroll-padding`); la clase `tar-con-barra` la pone tabbar.js. ENCOGIDA NO CAMBIA (medido el 09/10 con CPU 4× en Radar: cambiar una propiedad heredada en recalcula el documento entero, 100-400 ms por cada vez que la barra se encoge o vuelve, en mitad de un desplazamiento). El valor encogido está en `--tar-hueco-abajo-encogida`, fijo: quien quiera bajar con la barra lo usa con su propia regla `html.tar-barra-encogida .lo-suyo { … }`, que solo recalcula lo suyo. */ :root { --tb-h: 62px; --tb-insercion: 4px; --tb-relleno: 8px; --tb-ico: 27px; /* App a pantalla completa: 34 − 13 = 21 pt del borde, como la nativa; en Safari, 10 px sobre su barra (lo fijo con bottom: 0 va encima de la barra de Safari a propósito: WebKit 297779). */ --tb-abajo: max(10px, calc(env(safe-area-inset-bottom, 0px) - 13px)); --tb-hueco-lleno: calc(var(--tb-abajo) + var(--tb-h) + 12px); --tar-hueco-abajo: max(24px, env(safe-area-inset-bottom, 0px)); --tar-hueco-abajo-encogida: calc(var(--tb-abajo) + var(--tb-h) * .88 + 7px); /* 0,88 hacia abajo y 5 px más cerca del borde */ --tb-vidrio: rgba(250, 251, 253, .66); /* el vidrio de la cápsula, sobre blur(14px) saturate(1,9) */ --tb-borde: rgba(0, 0, 0, .075); --tb-luz: rgba(255, 255, 255, .9); /* canto de luz arriba… */ --tb-luz-lado: rgba(255, 255, 255, .45); /* …y en los lados */ --tb-ico-color: #1A1F26; /* glifo en reposo */ --tb-activo: var(--tarsis-cian-hondo, #0C6C7A); /* glifo activo: cian Tarsis (decisión de Jacobo), 5,4:1 sobre la bandeja */ --tb-platina: color-mix(in srgb, var(--tarsis-cian, #18D7F4) 15%, rgba(255, 255, 255, .72)); /* la bandeja de la lente */ --tb-platina-aro: rgba(0, 0, 0, .035); --tb-lupa: rgba(250, 251, 253, .70); /* tapa los glifos de debajo de la gota */ --tb-sombra-gota: 0 8px 22px rgba(0, 0, 0, .16), 0 1px 3px rgba(0, 0, 0, .10); /* solo la gota levantada */ --tb-gota-aro: rgba(255, 255, 255, .55); --tb-gota-canto: rgba(255, 255, 255, .85); /* la luz de la gota levantada… */ --tb-gota-reflejo: rgba(255, 255, 255, .45); --tb-gota-reflejo-2: rgba(255, 255, 255, .22); /* …y sus dos reflejos */ --tb-rojo: #FF3B30; --tb-solido: #F2F3F6; /* transparencia reducida */ } html[data-modo="incognito-oscuro"] { --tb-vidrio: rgba(26, 28, 32, .64); --tb-borde: rgba(255, 255, 255, .10); --tb-luz: rgba(255, 255, 255, .16); --tb-luz-lado: rgba(255, 255, 255, .07); --tb-ico-color: #EEF2F6; --tb-activo: var(--tarsis-cian-vivo, #43E7FF); --tb-platina: rgba(67, 231, 255, .16); --tb-platina-aro: rgba(255, 255, 255, .06); --tb-lupa: rgba(24, 34, 50, .74); --tb-sombra-gota: 0 8px 22px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .3); /* En oscuro la luz de la gota es la mitad: con la del claro se veía una burbuja plateada sobre la noche. */ --tb-gota-aro: rgba(255, 255, 255, .22); --tb-gota-canto: rgba(255, 255, 255, .34); --tb-gota-reflejo: rgba(255, 255, 255, .12); --tb-gota-reflejo-2: rgba(255, 255, 255, .06); --tb-rojo: #FF453A; --tb-solido: #1C1D21; } /* La app instalada en la pantalla de inicio (`html.tar-app`, la pone el agente de la app; o la consulta del navegador): sin barra de Safari, la cápsula nunca queda a menos de 16 px del borde aunque el sistema no declare área segura (el iPhone SE, Android). Con la del iPhone, 21 pt como la nativa. */ html.tar-app { --tb-abajo: max(16px, calc(env(safe-area-inset-bottom, 0px) - 13px)); } @media (display-mode: standalone) { :root { --tb-abajo: max(16px, calc(env(safe-area-inset-bottom, 0px) - 13px)); } } .tar-tabbar, .tb-borde { display: none; } @media (max-width: 720px) { html:not(.tar-enmarcado) body:not(.tar-editando) .tar-tabbar { display: block; position: fixed; left: 0; right: 0; bottom: var(--tb-abajo); height: var(--tb-h); z-index: var(--z-barras, 60); pointer-events: none; transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .2s ease; } /* El hueco del contenido sale de `--tar-hueco-abajo` (el de la barra entera, que no cambia al encogerse; con el teclado, el mínimo). Era 96 px fijos: las herramientas que miden su alto con la variable (el correo) dejaban 10-12 px de desplazamiento sobrante. */ html:not(.tar-enmarcado) body:not(.tar-editando) { padding-bottom: var(--tar-hueco-abajo); } /* En el teléfono la fila de accesos de arriba no sale NUNCA, tampoco al editar el panel: la barra de abajo se personaliza en su propia hoja (D13 del informe 2-movil-global). */ html:not(.tar-enmarcado) .tar-herr-grupo { display: none; } html.tar-con-barra:not(.tar-enmarcado) { --tar-hueco-abajo: var(--tb-hueco-lleno); } html.tar-con-barra.tar-teclado:not(.tar-enmarcado) { --tar-hueco-abajo: 12px; } /* 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% + 40px + env(safe-area-inset-bottom, 0px))); opacity: 0; } html.tar-teclado .tar-tabbar * { pointer-events: none !important; } /* EL BORDE DE DESPLAZAMIENTO de iOS 26 («scroll edge effect» suave): el contenido se apaga y se difumina justo debajo de la barra. Lleva backdrop-filter, así que Safari 26 tiñe su propia franja con el color de la página y no con el de este elemento (WebKit 319479): no hay franja oscura. */ html:not(.tar-enmarcado) body:not(.tar-editando) .tb-borde { display: block; position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--tb-abajo) + var(--tb-h) + 44px); z-index: calc(var(--z-barras, 60) - 1); pointer-events: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); background: linear-gradient(to top, color-mix(in srgb, var(--fondo) 55%, transparent), transparent); -webkit-mask-image: linear-gradient(to top, #000 35%, transparent); mask-image: linear-gradient(to top, #000 35%, transparent); transition: opacity .2s ease; } html.tar-teclado .tb-borde { opacity: 0; } } /* La cápsula: UNA sola pieza de vidrio (dos juntas dejan costura: cada backdrop-filter difumina solo lo que tiene debajo). Al pulsar se ensancha con transform. Las pestañas son solo el glifo, de 27 px (Jacobo, 24/09: «los iconos solo, sin los nombres»); el nombre va en aria-label. */ .tb-grupo { position: absolute; inset: 0; transform-origin: 50% 100%; will-change: transform; pointer-events: none; } .tb-caja { position: absolute; top: 0; height: var(--tb-h); } /* left y width: tabbar.js, al maquetar */ .tb-pieza { position: absolute; inset: 0; border-radius: calc(var(--tb-h) / 2); transform-origin: 0 0; will-change: transform; -webkit-backdrop-filter: blur(14px) saturate(1.9); backdrop-filter: blur(14px) saturate(1.9); background: var(--tb-vidrio); border: .5px solid var(--tb-borde); box-shadow: inset 0 1px 0 var(--tb-luz), inset 1px 0 0 var(--tb-luz-lado), inset -1px 0 0 var(--tb-luz-lado); } .tb-brillo-recorte { position: absolute; inset: 0; border-radius: calc(var(--tb-h) / 2); overflow: hidden; pointer-events: none; } .tb-brillo { position: absolute; left: 0; top: 50%; width: 93px; height: 93px; margin-top: -46.5px; border-radius: 50%; opacity: 0; will-change: transform, opacity; background: radial-gradient(closest-side, var(--tb-gota-canto), var(--tb-gota-reflejo-2) 55%, rgba(255, 255, 255, 0)); } .tb-items { position: absolute; inset: 0; display: flex; padding: 0 var(--tb-relleno); pointer-events: auto; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .tb-item { position: relative; flex: 1 1 0; min-width: 44px; display: grid; place-items: center; box-sizing: border-box; margin: 0; padding: 0; border: 0; border-radius: 999px; background: none; font: inherit; color: var(--tb-ico-color); text-decoration: none; cursor: pointer; outline: none; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .tb-item:hover { text-decoration: none; } .tb-item:focus-visible, html[data-modo="incognito-oscuro"] .tb-item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--tarsis-cian-texto, #0E7E8F); } html[data-modo="incognito-oscuro"] .tb-item:focus-visible { box-shadow: inset 0 0 0 2px var(--tarsis-cian-vivo, #43E7FF); } .tb-glifo { position: relative; display: block; width: var(--tb-ico); height: var(--tb-ico); } .tb-glifo > .t, .tb-glifo > .r { position: absolute; inset: 0; display: block; } .tb-glifo > .r { display: none; } .tb-glifo svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; } .tb-insignia { position: absolute; left: calc(50% + 6px); top: calc(50% - var(--tb-ico) / 2 - 7px); box-sizing: border-box; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--tb-rojo); color: #fff; text-align: center; font: 600 min(.75rem, 13px)/18px var(--tipo-texto, sans-serif); box-shadow: 0 0 0 1.5px var(--fondo); } .tb-punto { position: absolute; left: 50%; top: calc(50% + var(--tb-ico) / 2 + 4px); width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--tb-rojo); } /* LA LENTE (la gota): sombra, vidrio con lupa y luz especular, que solo se encienden al pulsar. La bandeja (platina) marca la pestaña abierta en reposo; dentro, la copia de la fila con los glifos RELLENOS en cian: fuera de la lente se ven los de trazo, así que el color viaja recortado por ella. */ .tb-lente { position: absolute; left: 0; top: var(--tb-insercion); height: calc(var(--tb-h) - 2 * var(--tb-insercion)); transform-origin: 50% 50%; will-change: transform, opacity; pointer-events: none; } .tb-lente > * { position: absolute; inset: 0; border-radius: 999px; } .tb-l-sombra { box-shadow: var(--tb-sombra-gota); opacity: 0; will-change: opacity; } .tb-l-vidrio { overflow: hidden; -webkit-backdrop-filter: blur(3px) saturate(1.5) brightness(1.04); backdrop-filter: blur(3px) saturate(1.5) brightness(1.04); background: var(--tb-lupa); } .tb-l-platina { position: absolute; inset: 0; border-radius: 999px; background: var(--tb-platina); box-shadow: 0 0 0 .5px var(--tb-platina-aro); will-change: opacity; } .tb-l-luz { opacity: 0; will-change: opacity; box-shadow: inset 0 0 0 .75px var(--tb-gota-aro), inset 0 1.5px 1.5px var(--tb-gota-canto), inset 0 -2px 5px rgba(0, 0, 0, .07); background: radial-gradient(110% 70% at 30% 0%, var(--tb-gota-reflejo), transparent 62%), radial-gradient(80% 60% at 75% 110%, var(--tb-gota-reflejo-2), transparent 60%); } .tb-fila-copia { position: absolute; left: 0; top: 0; height: var(--tb-h); display: flex; box-sizing: border-box; padding: 0 var(--tb-relleno); transform-origin: 0 0; will-change: transform; } .tb-fila-copia .tb-item { color: var(--tb-activo); cursor: default; } .tb-fila-copia .tb-glifo > .t { display: none; } .tb-fila-copia .tb-glifo > .r { display: block; } /* EL MENÚ «MÁS»: una cápsula de vidrio que brota de la pestaña, como los menús de iOS 26 (tabbar.js la escala y la funde con muelle). Filas de 48 px con glifo y nombre; la abierta, en cian y rellena. */ .tb-menu { position: fixed; z-index: var(--z-menu, 80); right: 16px; bottom: calc(var(--tb-abajo) + var(--tb-h) + 10px); box-sizing: border-box; min-width: 228px; max-width: calc(100vw - 32px); max-height: calc(100vh - var(--tb-abajo) - var(--tb-h) - 110px); max-height: calc(100dvh - var(--tb-abajo) - var(--tb-h) - 110px); overflow-y: auto; overscroll-behavior: contain; padding: 8px; border-radius: 26px; transform-origin: 100% 100%; transform: scale(.35); opacity: 0; pointer-events: none; will-change: transform, opacity; background: color-mix(in srgb, var(--superficie, #fff) 72%, transparent); border: .5px solid var(--tb-borde); -webkit-backdrop-filter: blur(22px) saturate(1.9); backdrop-filter: blur(22px) saturate(1.9); box-shadow: inset 0 1px 0 var(--tb-luz), 0 12px 40px rgba(0, 0, 0, .18); font-family: var(--tipo-marca); color: var(--texto); } .tb-menu.abierto { pointer-events: auto; } .tb-menu-fila { position: relative; display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; min-height: 48px; padding: 0 14px; margin: 0; border: 0; border-radius: 18px; background: none; color: var(--texto); font: inherit; font-size: .9375rem; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; } .tb-menu .tb-menu-fila:hover, .tb-menu .tb-menu-fila:active, .tb-menu .tb-menu-fila:focus-visible, html[data-modo="incognito-oscuro"] .tb-menu .tb-menu-fila:focus-visible { background: color-mix(in srgb, var(--texto) 8%, transparent); outline: none; text-decoration: none; opacity: 1; } .tb-menu-fila[aria-current="page"] { color: var(--tb-activo); } .tb-menu-fila[aria-current="page"] .tb-glifo > .t { display: none; } .tb-menu-fila[aria-current="page"] .tb-glifo > .r { display: block; } .tb-menu-glifo { flex: none; display: grid; place-items: center; width: 24px; height: 24px; } .tb-menu-glifo .tb-glifo, .tb-menu-glifo > svg { width: 24px; height: 24px; } .tb-menu-sep { height: 1px; margin: 6px 12px; background: var(--tb-borde); } /* EL VISOR DE CONTENIDO GRANDE: con texto de accesibilidad, mantener pulsada una pestaña enseña su glifo y su nombre en grande (UILargeContentViewer); la barra no crece. */ .tb-visor { position: fixed; z-index: calc(var(--z-barras, 60) + 2); left: 50%; bottom: calc(var(--tb-abajo) + var(--tb-h) + 24px); transform: translateX(-50%); min-width: 150px; padding: 18px 22px 16px; border-radius: 26px; display: none; flex-direction: column; align-items: center; gap: 8px; font: 600 1.375rem/1.2 var(--tipo-marca); color: var(--texto); pointer-events: none; background: color-mix(in srgb, var(--superficie, #fff) 84%, transparent); border: .5px solid var(--tb-borde); -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8); box-shadow: 0 12px 40px rgba(0, 0, 0, .2); } .tb-visor.visible { display: flex; } .tb-visor svg { width: 56px; height: 56px; } /* LA HÁPTICA DE SAFARI (iOS 18+): tocar un