/*
* tarsis.css — Capa propia de Tarsis One SOBRE la hoja heredada (estilos.css).
* Cabecera (logo + plan + contador), candados/upsell de Bronce y extractos
* difuminados del plan Gratis. Todo con los tokens var(--…) → los 3 temas funcionan.
*/
/* --- Cabecera --- */
html[data-modo="incognito-oscuro"] .logo-tarsis { filter: invert(0.9) hue-rotate(180deg); }
.tar-cabecera-der { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Chip del plan (conmutador de la maqueta) + contador de generaciones. */
.tar-plan { border: 1px solid var(--linea); border-radius: 999px; padding: 4px 12px; font-family: inherit; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.tar-plan-bronce { background: #a5702c; border-color: #a5702c; color: #fff; }
.tar-plan-bronce:hover { background: #8d5e23; border-color: #8d5e23; }
/* Las pastillas ADMIN y ORGANIZACIÓN (10/09/2026) viven en marca.css: liquid.css pinta `.tar-plan`
como vidrio de control y pisaría el fondo de cualquier variante declarada aquí. */
/* ═══ REGISTRO DE USUARIOS Y ORGANIZACIONES (solo admin, 10/09/2026) ═══ */
.us-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 6px 0 18px; }
.us-cifra { padding: 14px 16px; border-radius: 16px; background: var(--lg-panel); border: 1px solid var(--lg-borde); box-shadow: var(--lg-sombra); }
.us-cifra b { display: block; font-size: 1.625rem; font-family: var(--tipo-marca, inherit); letter-spacing: -0.02em; line-height: 1.1; }
.us-cifra span { font-size: .78125rem; color: var(--texto-suave); }
.us-tabla { width: 100%; border-collapse: collapse; font-size: .84375rem; background: var(--lg-panel); border: 1px solid var(--lg-borde); border-radius: 16px; overflow: hidden; }
.us-tabla-caja { overflow-x: auto; border-radius: 16px; box-shadow: var(--lg-sombra); margin-bottom: 22px; }
.us-tabla th { text-align: left; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); padding: 12px 14px; border-bottom: 1px solid var(--lg-borde); white-space: nowrap; }
.us-tabla td { padding: 11px 14px; border-bottom: 1px solid var(--lg-borde); vertical-align: middle; }
.us-tabla tr:last-child td { border-bottom: 0; }
.us-tabla .us-correo { font-weight: 600; }
.us-tabla .us-nombre { color: var(--texto-suave); font-size: .78125rem; }
.us-tabla .tar-plan { cursor: default; }
.us-si { color: var(--verde, #2f8f5b); font-weight: 700; }
.us-no { color: var(--texto-suave); }
.us-herr { display: flex; flex-wrap: wrap; gap: 4px; }
.us-herr span { font-size: .6875rem; padding: 2px 8px; border-radius: 999px; background: var(--lg-vidrio); border: 1px solid var(--lg-borde); white-space: nowrap; }
.us-inactivo td { opacity: .55; }
.us-vacio { padding: 26px 20px; border-radius: 16px; background: var(--lg-panel); border: 1px dashed var(--lg-borde); color: var(--texto-suave); font-size: .84375rem; line-height: 1.5; }
.us-vacio b { color: var(--texto); }
.us-org { padding: 16px 18px; border-radius: 16px; background: var(--lg-panel); border: 1px solid var(--lg-borde); box-shadow: var(--lg-sombra); margin-bottom: 12px; }
.us-org h3 { margin: 0 0 8px; font-family: var(--tipo-marca, inherit); font-size: 1rem; }
.us-org ul { margin: 0; padding-left: 18px; font-size: .84375rem; }
.tar-cupo { margin-left: 6px; background: var(--verde-bg-chip); border: 1px solid var(--verde-bd-2); color: var(--verde-texto-2); border-radius: 999px; padding: 3px 10px; font-size: .71875rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* --- Upsell a Bronce (modal) --- */
.tar-upsell { text-align: center; }
.tar-upsell-ico { font-size: 1.875rem; margin-bottom: 6px; }
.tar-upsell-precio { background: var(--verde-bg); border: 1px solid var(--verde-bd); border-radius: 10px; padding: 12px 14px; margin: 4px 0 14px; font-size: .9375rem; }
.tar-upsell-precio .dos-meta { display: block; margin-top: 3px; }
/* --- Bloqueos en página (plan Gratis) --- */
.tar-bloqueo { max-width: 560px; border: 1.5px dashed var(--linea); border-radius: 14px; padding: 26px 28px; text-align: center; }
.tar-bloqueo p { margin: 8px 0 16px; }
.tar-bloqueo-inline { border: 1.5px dashed var(--linea); border-radius: 12px; padding: 12px 16px; font-size: .84375rem; color: var(--texto-suave); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* --- Menú Radar de la cabecera: pastillas flotantes desplegadas POR HOVER ---
La zona de disparo es EXACTAMENTE el botón «Radar» (no el aire de debajo): una vez
abiertas, bajar el ratón a las pastillas las mantiene; salir de ellas las pliega. */
.tar-radar-menu { position: relative; }
/* «Radar» envuelto en PASTILLA de botón (que lo es): vidrio plano, cápsula. */
.tar-radar-btn {
display: inline-flex; align-items: center; font: inherit; font-weight: 700; font-size: .90625rem;
color: var(--texto); padding: 8px 18px; border-radius: 999px; cursor: pointer;
background: var(--lg-vidrio, rgba(255,255,255,.5)); border: 1px solid var(--lg-borde, rgba(0,0,0,.1));
backdrop-filter: blur(18px) saturate(1.75); -webkit-backdrop-filter: blur(18px) saturate(1.75);
box-shadow: var(--lg-sombra-control, 0 2px 8px rgba(0,0,0,.06));
transition: background var(--lg-mov-rapido, .15s), transform var(--lg-mov-rapido, .15s);
}
.tar-radar-btn:hover { background: var(--lg-panel-solido, #fff); }
.tar-radar-btn:active { transform: scale(.96); }
/* TENDENCIAS EN LA BARRA (13/08/2026). Comparte la pastilla de Radar; como es un enlace y no un
botón hay que quitarle el subrayado a mano. El hueco lo pone el `gap` de .barra-interior. */
.tar-btn-tendencias, .tar-btn-tendencias:hover,
.tar-btn-redes, .tar-btn-redes:hover { text-decoration: none; }
/* LA HERRAMIENTA EN LA QUE ESTÁS, marcada. Con dos herramientas en la barra —y más que vendrán—
sin esto no se sabe cuál está abierta. */
.tar-radar-btn.activo {
background: var(--lg-panel-solido, #fff);
box-shadow: inset 0 0 0 1.5px var(--verde, #2f7d5a), var(--lg-sombra-control, 0 2px 8px rgba(0,0,0,.06));
}
/* padding-top en vez de hueco: puente para cruzar del botón a las pastillas sin que
el hover se corte. Cerrado, el submenú NO captura el ratón (pointer-events none). */
.tar-submenu { position: absolute; top: 100%; left: 0; padding-top: 12px; display: flex; flex-direction: column; gap: 9px; z-index: 80; pointer-events: none; }
/* Abierto por hover o por foco de TECLADO (:focus-visible). OJO: nada de :focus-within
a secas — el clic del ratón deja el botón enfocado y, al salir el puntero (que quita
«cerrado»), el foco volvía a desplegar el menú y lo dejaba FIJO hasta clicar fuera. */
.tar-radar-btn:hover + .tar-submenu, .tar-submenu:hover, .tar-radar-menu:has(:focus-visible) .tar-submenu { pointer-events: auto; }
.tar-pill {
opacity: 0; transform: translateY(-10px) scale(.95); pointer-events: none;
transition: opacity .22s ease, transform .32s cubic-bezier(.34,1.4,.64,1);
display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
padding: 10px 20px; border-radius: 999px; font-size: .84375rem; font-weight: 600; color: var(--texto);
background: var(--lg-vidrio-denso, rgba(255,255,255,.7)); border: 1px solid var(--lg-borde, rgba(0,0,0,.1));
backdrop-filter: blur(18px) saturate(1.75); -webkit-backdrop-filter: blur(18px) saturate(1.75);
box-shadow: var(--lg-sombra, 0 8px 24px rgba(0,0,0,.1));
align-self: flex-start;
}
.tar-pill:hover { background: var(--lg-panel-solido, #fff); text-decoration: none; }
/* Pastilla de carpeta destacada: toma el COLOR de su carpeta, con texto legible. */
.tar-pill-carpeta { background: color-mix(in srgb, var(--pill-color, #F5D76E) 88%, transparent); border-color: transparent; }
.tar-pill-carpeta:hover { background: var(--pill-color, #F5D76E); }
.tar-pill-carpeta.texto-oscuro { color: #26281f; }
.tar-pill-carpeta.texto-claro { color: #fff; }
/* Iconos minimalistas de trazo (en pastillas y botones). */
.tar-ico { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; flex: none; }
.boton-primario .tar-ico { margin-right: 7px; }
.tar-btn-ico { padding: 8px 13px; line-height: 0; display: inline-flex; align-items: center; }
.tar-btn-ico .tar-ico { width: 17px; height: 17px; vertical-align: 0; }
.tar-btn-ico.activo { background: color-mix(in srgb, var(--verde-solido) 92%, transparent); border-color: transparent; color: #fff; }
.tar-radar-btn:hover + .tar-submenu .tar-pill, .tar-submenu:hover .tar-pill, .tar-radar-menu:has(:focus-visible) .tar-pill { opacity: 1; transform: none; pointer-events: auto; }
.tar-radar-btn:hover + .tar-submenu .tar-pill:nth-child(2), .tar-submenu:hover .tar-pill:nth-child(2) { transition-delay: .045s; }
.tar-radar-btn:hover + .tar-submenu .tar-pill:nth-child(3), .tar-submenu:hover .tar-pill:nth-child(3) { transition-delay: .09s; }
/* Tras hacer CLIC en Radar, el menú se PLIEGA aunque el ratón siga encima (clase
«cerrado» puesta por radar.js); se rearma cuando el puntero sale del menú. */
.tar-radar-menu.cerrado .tar-submenu { pointer-events: none !important; }
.tar-radar-menu.cerrado .tar-pill { opacity: 0 !important; transform: translateY(-10px) scale(.95) !important; pointer-events: none !important; transition-delay: 0s !important; }
/* --- Inicio: ESCRITORIO de carpetas (zona propia con iconos de colocación LIBRE) ---
Dos áreas de la página con tonos ligeramente distintos: las búsquedas sobre el fondo
base y las carpetas sobre su propia zona (sutil, solo para diferenciar). */
:root { --tar-zona-carpetas: #f1f4ee; }
html[data-modo="incognito-oscuro"] { --tar-zona-carpetas: #181d23; }
.tar-doss-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 46px 0 12px; }
.tar-doss-cab h2 { margin: 0; font-size: 1.1875rem; }
.tar-escritorio { position: relative; width: 100%; min-height: 280px; border-radius: 26px; background: var(--tar-zona-carpetas); overflow: hidden; }
/* Carpeta = icono de escritorio (sin recuadro alrededor). */
.tar-carpeta { position: absolute; width: 118px; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: grab; user-select: none; touch-action: none; }
.tar-carpeta.arrastrando { cursor: grabbing; z-index: 40; }
.tar-carpeta-icono { position: relative; display: block; width: 78px; color: var(--carpeta-color, #F5D76E); transition: transform .18s ease; }
.tar-carpeta:hover .tar-carpeta-icono { transform: translateY(-2px); }
.tar-carpeta-icono svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 2px 4px rgba(20, 30, 20, 0.14)); }
.tar-carpeta-nombre { font-weight: 600; font-size: .8125rem; text-align: center; max-width: 112px; outline: none; border-radius: 8px; padding: 1px 7px; overflow-wrap: break-word; }
.tar-carpeta-docs { font-size: .6875rem; }
/* Recuadro discontinuo del color: PEQUEÑO y ESQUINADO dentro del propio icono (el
usuario clica el centro para abrir); trazo negro o blanco según la luminancia. */
.tar-carpeta-color { position: absolute; right: 8px; bottom: 7px; width: 13px; height: 13px; padding: 0; border-radius: 5px; background: transparent; cursor: pointer; transition: transform .16s ease; }
.tar-carpeta-color.sobre-claro { border: 1.5px dashed rgba(0, 0, 0, 0.55); }
.tar-carpeta-color.sobre-oscuro { border: 1.5px dashed rgba(255, 255, 255, 0.92); }
.tar-carpeta-color:hover { transform: scale(1.3); }
/* ✕ de eliminar carpeta: aparece solo en modo edición. */
.tar-carpeta-x { position: absolute; top: -7px; right: -10px; width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--lg-borde, rgba(0,0,0,.12)); background: var(--superficie); color: var(--texto-suave); font: inherit; font-size: .6875rem; line-height: 1; cursor: pointer; opacity: 0; pointer-events: none; transform: scale(.6); transition: opacity .2s ease, transform .28s cubic-bezier(.34,1.4,.64,1); box-shadow: var(--lg-sombra-control, 0 2px 8px rgba(0,0,0,.1)); z-index: 5; }
.tar-escritorio.editando .tar-carpeta-x { opacity: 1; pointer-events: auto; transform: scale(1); }
.tar-carpeta-x:hover { color: #c23434; border-color: #c23434; }
/* PUNTO ROJO: marca las carpetas que aparecen en el menú Radar (pueden ser varias).
En reposo solo se ve en las marcadas (insignia); en edición aparece en TODAS como
conmutador (hueco = no está en el menú; rojo = sí). */
.tar-carpeta-punto { position: absolute; top: -2px; right: 16px; width: 13px; height: 13px; padding: 0; border-radius: 999px; border: none; background: #e03e3e; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28); display: none; pointer-events: none; z-index: 6; transition: transform .16s ease, background .16s ease; }
.tar-carpeta-punto.marcada { display: block; }
/* El punto NO se mueve en edición (queda donde está); la ✕ va más a la derecha. */
.tar-escritorio.editando .tar-carpeta-punto { display: block; pointer-events: auto; cursor: pointer; width: 15px; height: 15px; background: transparent; border: 1.7px solid rgba(0, 0, 0, 0.30); }
html[data-modo="incognito-oscuro"] .tar-escritorio.editando .tar-carpeta-punto { border-color: rgba(255, 255, 255, 0.45); }
.tar-escritorio.editando .tar-carpeta-punto.marcada { background: #e03e3e; border-color: rgba(0, 0, 0, 0.12); }
.tar-escritorio.editando .tar-carpeta-punto:hover { transform: scale(1.25); }
/* Tintineo estilo iPhone en modo edición (rotación suave alternada). */
@keyframes tar-tintineo { 0% { transform: rotate(-1.9deg); } 50% { transform: rotate(1.9deg); } 100% { transform: rotate(-1.9deg); } }
.tar-escritorio.editando .tar-carpeta { animation: tar-tintineo .34s ease-in-out infinite; }
.tar-escritorio.editando .tar-carpeta:nth-child(2n) { animation-duration: .31s; animation-delay: .05s; }
.tar-escritorio.editando .tar-carpeta:nth-child(3n) { animation-duration: .37s; animation-delay: .09s; }
.tar-escritorio.editando .tar-carpeta.arrastrando { animation: none; }
@media (prefers-reduced-motion: reduce) { .tar-escritorio.editando .tar-carpeta { animation: none; } }
/* Nombre en recuadro claramente visible durante la edición. */
.tar-escritorio.editando .tar-carpeta-nombre { background: var(--superficie); border: 1px solid var(--linea); box-shadow: var(--lg-sombra-control, 0 2px 8px rgba(0,0,0,.08)); cursor: text; min-width: 72px; }
/* Popup de color de carpeta: compacto, centrado, SOLO los pasteles fijos. */
.tar-pop-color { text-align: center; max-width: 330px; }
.tar-pop-color h2 { font-size: 1.0625rem; margin: 0 0 12px; }
.tar-paleta { display: grid; grid-template-columns: repeat(6, 36px); gap: 10px; justify-content: center; margin: 4px 0 14px; }
.tar-paleta-color { width: 36px; height: 36px; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.08); background: var(--c); cursor: pointer; padding: 0; transition: transform .16s cubic-bezier(.34,1.4,.64,1); }
.tar-paleta-color:hover { transform: scale(1.14); }
.tar-paleta-color.activa { outline: 3px solid var(--texto); outline-offset: 2px; }
/* Cabecera de la zona de búsquedas (mismo patrón que «Dossiers»). */
.tar-cab-busquedas { margin: 4px 0 14px; }
/* ═══════════ EL PANEL DE HERRAMIENTAS (rehecho el 02/09/2026) ═══════════
«El logo en el centro, con debajo el nombre de la herramienta. Y debajo de ese nombre una
brevísima frase que explica lo que hace la herramienta, nada más» (Jacobo).
Estaban alineadas a la izquierda con un párrafo de dos líneas y un «Abrir →» que sobraba —la
tarjeta entera es el enlace—. Seis fichas iguales que se leen de un vistazo. */
/* PASTILLAS DE TAMAÑO FIJO (norma de Jacobo, 12/09/2026). Las tarjetas del panel miden 212 × 212 en el
escritorio, en la pantalla dividida y en el móvil (caben en un iPhone con margen); la rejilla se
centra y las recoloca, nunca las estira ni las encoge. Y OPACAS (decisión 5 sobre las guías de
Apple): el vidrio se queda en la barra y los menús. */
.tar-panel { display: grid; grid-template-columns: repeat(auto-fill, 212px); justify-content: center; gap: 16px; }
.tar-herr {
display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
width: 212px; height: 212px; box-sizing: border-box; overflow: hidden;
padding: 24px 16px 18px; border-radius: var(--lg-r-l, 20px); color: var(--texto); text-decoration: none;
background: var(--lg-panel-solido, #fff); border: 1px solid var(--lg-borde, rgba(0,0,0,.1));
box-shadow: var(--lg-sombra, 0 8px 24px rgba(0,0,0,.08));
transition: transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s ease;
position: relative; /* ancla de la pastilla PRO y del candado */
}
a.tar-herr:hover { transform: translateY(-2px); box-shadow: var(--lg-sombra-alta, 0 18px 50px rgba(0,0,0,.16)); text-decoration: none; }
/* LA PASTILLA DEL ICONO. Un cuadrado redondeado con un tinte de cian apenas insinuado: da al
dibujo un sitio propio y evita que seis trazos finos floten sueltos sobre el vidrio. */
/* ══ EL ICONO YA TRAE SU FONDO (07/09/2026, familia de iconos de Jacobo) ══
Aquí se dibujaba un cuadrado redondeado de color detrás del icono, y tenía sentido cuando los
iconos eran trazos sueltos sin fondo. La familia nueva viene con el suyo —cada herramienta con su
color—, así que dibujar otro debajo pintaba UNA CAJA DENTRO DE OTRA: se veía sobre todo en Radar
(verde sobre azul), MCP (naranja sobre azul) y Cuentas (rosa sobre azul), donde además los dos
colores no casaban.
Se quita el fondo y se queda el tamaño y el gesto al pasar por encima, que sí son de la tarjeta.
El icono manda su color; la tarjeta pone el sitio. */
.tar-herr-icono {
width: 74px; height: 74px; border-radius: 22px; display: grid; place-items: center;
color: var(--tar-ico-tinta);
transition: transform .3s cubic-bezier(.34,1.4,.64,1);
}
a.tar-herr:hover .tar-herr-icono { transform: scale(1.06); }
/* ⚠ SE LLAMA `tar-herr-ico` Y NO `tar-ico` POR ALGO (02/09/2026). La primera versión usó
`.tar-ico`, que es la clase de TODOS los iconos de menú de la plataforma —el engranaje de la
cabecera, la lupa, las carpetas, la papelera— y que vale 16 px (línea 86). Como esta regla va
después con la misma especificidad, ganaba: los iconos de los submenús pasaron de 16 a 46 px de
golpe y el engranaje de la cabecera se comió el header. Un nombre reusado en un CSS de 4.000
líneas no es un descuido cosmético: es un cambio a distancia que no se ve donde se escribe. */
/* A 74 y no a 46: el icono trae su propio fondo, así que ES la pastilla, no un dibujo dentro de
ella. Con 46 quedaba flotando en medio de un hueco vacío. */
.tar-herr-ico { width: 74px; height: 74px; display: block; border-radius: 22px; }
:root {
--tar-ico-fondo: var(--verde-bg);
--tar-ico-fondo-hover: var(--verde-bg-chip);
--tar-ico-tinta: var(--tarsis-cian-medio, #12A9C4);
--tar-ico-oro: var(--tarsis-oro-logo, #A5702C);
}
/* En oscuro el dibujo ACLARA en vez de oscurecer, como el resto del acento (ver marca.css). */
html[data-modo="incognito-oscuro"] {
--tar-ico-fondo: var(--verde-bg);
--tar-ico-fondo-hover: var(--verde-bg-chip);
--tar-ico-tinta: #5FE0F5;
--tar-ico-oro: var(--tarsis-oro-claro, #E8C966);
}
/* El incógnito claro no tiene color de marca: los iconos van en tinta, que es su razón de ser. */
html[data-modo="incognito"] {
--tar-ico-fondo: var(--gris-fila);
--tar-ico-fondo-hover: #ececec;
--tar-ico-tinta: var(--texto);
--tar-ico-oro: var(--texto-suave);
}
.tar-herr-nombre { font-family: var(--tipo-marca, inherit); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }
/* UNA línea y nada más. Se acota a dos renglones para que ninguna ficha descuadre la rejilla. */
.tar-herr-desc { font-size: .8125rem; line-height: 1.4; color: var(--texto-suave); max-width: 22ch; }
/* PRO se queda en Radar y en Mitra (Jacobo, 02/09/2026): son las dos herramientas propias. */
.tar-herr-pro {
position: absolute; top: 12px; right: 12px;
font-family: var(--tipo-marca, inherit);
font-size: .625rem; font-weight: 800; letter-spacing: .1em; line-height: 1;
padding: 5px 9px; border-radius: 999px;
color: var(--verde-oscuro);
background: var(--lg-vidrio, rgba(255,255,255,.55));
border: 1px solid var(--lg-borde, rgba(0,0,0,.12));
}
/* El candado de lo que abre Bronce. No es adorno: es la razón por la que al pulsar no pasa lo que
el usuario espera, así que tiene que verse antes de pulsar. */
.tar-herr-llave {
position: absolute; top: 12px; right: 12px;
font-family: var(--tipo-marca, inherit);
font-size: .625rem; font-weight: 800; letter-spacing: .08em; line-height: 1;
padding: 5px 9px; border-radius: 999px;
color: var(--ambar); background: var(--ambar-fondo);
border: 1px solid currentColor;
}
.tar-herr-cerrada .tar-herr-icono { opacity: .72; }
/* ══ EDITAR PANEL (11/09/2026, Jacobo) ══ Las tarjetas tintinean como las carpetas de Radar en
edición, se cogen (ratón o dedo) y se sueltan en su sitio nuevo. La barra de arriba dice que se
está editando y trae el «Listo». */
.tar-panel-edicion {
display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
margin: 0 0 16px; padding: 12px 18px; border-radius: var(--lg-r-l, 20px);
background: var(--lg-panel, rgba(255,255,255,.8)); border: 1px solid var(--lg-borde, rgba(0,0,0,.1));
box-shadow: var(--lg-sombra, 0 8px 24px rgba(0,0,0,.08)); font-size: .875rem;
}
.tar-panel-edicion > span { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tar-panel-edicion .tar-ico { width: 18px; height: 18px; color: var(--verde-oscuro); }
.tar-panel.editando .tar-herr { cursor: grab; user-select: none; touch-action: none; animation: tar-tintineo .34s ease-in-out infinite; }
.tar-panel.editando .tar-herr:nth-child(2n) { animation-duration: .31s; animation-delay: .05s; }
.tar-panel.editando .tar-herr:nth-child(3n) { animation-duration: .37s; animation-delay: .09s; }
.tar-panel.editando .tar-herr:hover { transform: none; }
.tar-panel.editando .tar-herr.arrastrando { animation: none; cursor: grabbing; z-index: 5; opacity: .92; box-shadow: var(--lg-sombra-alta, 0 18px 50px rgba(0,0,0,.16)); transition: none; }
.tar-panel.editando .tar-herr .tar-herr-icono { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .tar-panel.editando .tar-herr { animation: none; } }
/* Dossier que vive en el Drive del usuario (25/08/2026): el icono de Google en la esquina lo
dice sin una palabra, y abre el archivo alli. */
.tar-doc { position: relative; }
.tar-doc-drive { position: absolute; top: 8px; right: 8px; line-height: 0; opacity: .75; }
.tar-doc-drive:hover { opacity: 1; }
/* ===== HERRAMIENTA «TAREAS» (18/08/2026): tablones kanban con vencimientos ===== */
.tt-cab { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.tt-cab-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* El modo urgente lleva una llama de trazo, no el emoji (23/09/2026), y se ve encendido. */
.tt-btn-urgente { display: inline-flex; align-items: center; gap: 6px; }
.tt-btn-urgente .tar-ico { width: 16px; height: 16px; vertical-align: 0; }
.tt-btn-urgente.activo { border-color: #d32f2f; color: #c62828; background: rgba(211,47,47,.08); }
html[data-modo="incognito-oscuro"] .tt-btn-urgente.activo { border-color: #EF6461; color: #F28B87; background: rgba(239,100,97,.12); }
.tt-candado { text-align: center; padding: 34px 18px; border-radius: var(--lg-r-l, 20px); background: var(--lg-panel, rgba(255,255,255,.8)); border: 1px solid var(--lg-borde, rgba(0,0,0,.1)); }
.tt-candado p { max-width: 480px; margin: 10px auto 16px; line-height: 1.5; }
.tt-tablon {
border: 1px solid var(--lg-borde, rgba(0,0,0,.1)); border-radius: var(--lg-r-l, 18px);
background: var(--lg-panel, rgba(255,255,255,.8)); padding: 14px 16px; margin: 0; min-width: 0;
backdrop-filter: blur(10px) saturate(1.35); -webkit-backdrop-filter: blur(10px) saturate(1.35);
}
/* Tablones a pantalla completa o a media pantalla (17/09/2026): UNA rejilla de dos columnas para
todos, Global incluido; el completo ocupa las dos y el medio una. En el móvil todos van a pantalla
completa y el botón que los convierte se esconde, porque no cambiaría nada. */
.tt-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; align-items: start; }
.tt-tablon-completo { grid-column: 1 / -1; }
@media (max-width: 860px) {
.tt-rejilla { grid-template-columns: 1fr; }
.tt-tablon-completo { grid-column: auto; }
.tt-tab-ancho { display: none; }
}
@media (max-width: 1100px) { .tt-tab-ancho-txt { display: none; } }
/* El color del tablón (17/09/2026): un pastel de la paleta de las carpetas, mezclado con el panel
para que el texto se lea igual en claro y en oscuro. La regla lleva dos clases a propósito: la de
marca.css que vuelve opacos los tablones tiene una sola y llega después. */
.tt-tablon.tt-tablon-coloreado {
background: var(--tt-color);
background: color-mix(in srgb, var(--tt-color) 26%, var(--lg-panel-solido, #fff));
border-color: color-mix(in srgb, var(--tt-color) 70%, transparent);
}
.tt-tab-color {
width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto; cursor: pointer; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid rgba(0,0,0,.14); background: var(--c, transparent);
transition: transform .16s cubic-bezier(.34,1.4,.64,1), border-color .16s;
}
/* Sin color tiene que verse como un BOTÓN (Jacobo, 17/09/2026): contorno sólido en el gris del texto
secundario, fondo de pastilla y una gota de trazo dentro. Con color, el círculo relleno basta. */
.tt-tab-color-vacio { border: 1.5px solid var(--texto-suave); background: var(--lg-vidrio, rgba(255,255,255,.5)); color: var(--texto-suave); }
.tt-tab-color-vacio .tar-ico { width: 13px; height: 13px; }
.tt-tab-color:hover { transform: scale(1.12); }
.tt-tab-color-vacio:hover { border-color: var(--texto); color: var(--texto); }
.tt-tab-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
/* El título crece hasta el final de la cabecera y, si no cabe, salta al segundo renglón (17/09/2026):
es un textarea de una fila con altura automática (ttAutoAjustar), no un input, porque un input no
sabe partirse. */
.tt-tab-titulo {
font-weight: 800; font-size: .9375rem; font-family: inherit; color: var(--texto); line-height: 1.25;
border: 1px solid transparent; background: transparent; border-radius: 8px; padding: 3px 7px; min-width: 6ch; flex: 1 1 auto;
resize: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; box-sizing: border-box; display: block;
}
/* Título largo: toda la fila para él (menos el asa) y los botones a la fila de abajo, pegados a la derecha. */
.tt-tab-cab-larga .tt-tab-titulo { flex-basis: calc(100% - 36px); }
.tt-tab-cab-larga .tt-tab-color { margin-left: auto; }
.tt-tab-titulo:hover, .tt-tab-titulo:focus { border-color: var(--lg-borde, rgba(0,0,0,.15)); background: var(--lg-vidrio, rgba(255,255,255,.5)); outline: none; }
.tt-add-col, .tt-tab-ancho, .tt-tab-borrar, .tt-col-borrar {
border: 1px solid var(--lg-borde, rgba(0,0,0,.12)); background: var(--lg-vidrio, rgba(255,255,255,.5));
color: var(--texto-suave); border-radius: 999px; cursor: pointer; font-family: inherit;
}
.tt-add-col, .tt-tab-ancho { font-size: .75rem; padding: 3px 10px; white-space: nowrap; }
.tt-add-col:hover, .tt-tab-ancho:hover { color: var(--texto); border-color: var(--texto-suave); }
.tt-tab-borrar, .tt-col-borrar { font-size: .8125rem; width: 24px; height: 24px; line-height: 1; flex: 0 0 auto; }
.tt-tab-borrar:hover, .tt-col-borrar:hover { color: #c62828; border-color: #e0a0a0; }
/* Borrar el tablón es una papelera (23/09/2026): con la × de quitar columna se confundía. */
.tt-tab-borrar { display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.tt-tab-borrar .tar-ico { width: 14px; height: 14px; vertical-align: 0; }
/* Un tablón puede tener de una a cinco columnas (17/09/2026: antes el mínimo eran dos). */
.tt-cols { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.tt-cols-1 { grid-template-columns: minmax(0,1fr); }
.tt-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.tt-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.tt-cols-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
@media (max-width: 620px) { .tt-cols, .tt-cols-3, .tt-cols-4, .tt-cols-5 { grid-template-columns: 1fr; } }
.tt-col { min-width: 0; }
.tt-col-cab { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.tt-col-nombre {
flex: 1; min-width: 0; font-weight: 700; font-size: .8125rem; font-family: inherit; color: var(--texto-suave);
text-transform: uppercase; letter-spacing: .05em;
border: 1px solid transparent; background: transparent; border-radius: 7px; padding: 3px 6px;
}
.tt-col-nombre:hover, .tt-col-nombre:focus { border-color: var(--lg-borde, rgba(0,0,0,.15)); background: var(--lg-vidrio, rgba(255,255,255,.5)); outline: none; }
.tt-col-lista { display: flex; flex-direction: column; gap: 8px; min-height: 12px; }
/* La tarjeta: borde de 3 px, que se pone rojo en las prioritarias (hasta el 23/09/2026 se teñía con
el vencimiento; ahora la fecha la dice su botón y el rojo del contorno significa una sola cosa). */
.tt-card {
position: relative; display: flex; gap: 6px; align-items: flex-start;
background: var(--lg-vidrio, rgba(255,255,255,.55)); border: 3px solid var(--lg-borde, rgba(0,0,0,.1));
border-radius: 12px; padding: 8px 8px 8px 4px;
transition: opacity .15s, border-color .2s, box-shadow .2s, filter .2s;
}
/* Toda la tarjeta es el botón de editar (Jacobo, 23/09/2026): la mano al pasar por encima del texto
y del fondo, y un toque de relieve para que se note que responde. Los adjuntos no son parte de ese
botón (tienen los suyos). En el móvil no hay cursor: se toca y ya. */
.tt-card:not(.tt-editando), .tt-card:not(.tt-editando) .tt-texto-vista { cursor: pointer; }
.tt-card .tt-adj { cursor: default; }
@media (hover: hover) and (pointer: fine) {
.tt-card:not(.tt-editando):hover { box-shadow: 0 2px 10px rgba(0,0,0,.09); }
}
/* PRIORITARIA («!», 23/09/2026): contorno rojo y fondo rojo pálido, mezclado con el panel para que
se lea igual en claro y en oscuro. */
.tt-card.tt-prioritaria { border-color: #D32F2F; background: #FDEDED; background: color-mix(in srgb, #E53935 10%, var(--lg-panel-solido, #fff)); }
html[data-modo="incognito-oscuro"] .tt-card.tt-prioritaria { border-color: #EF6461; background: color-mix(in srgb, #E53935 18%, var(--lg-panel-solido, #111E30)); }
.tt-asa, .tt-tab-asa { cursor: grab; touch-action: none; user-select: none; color: var(--texto-suave); padding: 2px 3px; flex: 0 0 auto; }
.tt-cuerpo { flex: 1; min-width: 0; }
.tt-texto {
width: 100%; border: none; background: transparent; resize: none; font-family: inherit;
font-size: .875rem; color: var(--texto); line-height: 1.35; overflow: hidden; padding: 0; box-sizing: border-box;
}
.tt-texto:focus { outline: none; }
/* El texto se ENSEÑA con sus enlaces clicables (17/09/2026) y solo al pincharlo aparece el cuadro
de edición; los dos llevan exactamente el mismo texto y la misma letra, así que el cambio no
se nota. Sin texto, el cuadro se queda a la vista con su placeholder. */
.tt-texto-vista { font-size: .875rem; line-height: 1.35; color: var(--texto); white-space: pre-wrap; overflow-wrap: anywhere; cursor: pointer; min-height: 1.2em; border-radius: 4px; }
.tt-texto-vista .tt-enlace, .tt-comp-texto .tt-enlace { color: var(--verde-texto, #0C6C7A); text-decoration: underline; text-underline-offset: 2px; }
.tt-texto-vista .tt-enlace:hover, .tt-comp-texto .tt-enlace:hover { color: var(--verde-texto-2, #0A5A66); text-decoration-thickness: 2px; }
.tt-card:not(.tt-editando) .tt-texto { display: none; }
.tt-card.tt-editando .tt-texto-vista { display: none; }
/* El pie (23/09/2026): a la izquierda la fecha, el clip y el micrófono; a la derecha eliminar,
prioritaria y completar, con aire entre los dos grupos. En una columna estrecha, el de la derecha
baja de renglón en vez de apretarse. */
.tt-pie { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tt-pie-izq, .tt-pie-der { display: flex; align-items: center; gap: 5px; min-width: 0; }
.tt-pie-der { margin-left: auto; }
.tt-pie-hueco { flex: 1; }
/* Los seis botones del pie son la misma pastilla, con su icono de trazo de 14 px. */
.tt-venc, .tt-adjuntar, .tt-grabar, .tt-borrar, .tt-prioridad, .tt-completar {
flex: 0 0 auto; height: 24px; min-width: 28px; padding: 0 7px; border-radius: 999px; cursor: pointer; position: relative;
display: inline-flex; align-items: center; justify-content: center; gap: 4px;
font-family: inherit; font-size: .71875rem; line-height: 1; white-space: nowrap;
border: 1px solid var(--lg-borde, rgba(0,0,0,.12)); background: var(--lg-vidrio, rgba(255,255,255,.5)); color: var(--texto-suave);
transition: color .15s, border-color .15s, background .15s;
}
.tt-venc .tar-ico, .tt-adjuntar .tar-ico, .tt-grabar .tar-ico, .tt-borrar .tar-ico, .tt-prioridad .tar-ico, .tt-completar .tar-ico { width: 14px; height: 14px; vertical-align: 0; flex: 0 0 auto; }
.tt-venc:hover, .tt-adjuntar:hover, .tt-grabar:hover { color: var(--texto); border-color: var(--texto-suave); }
/* LA FECHA LÍMITE (23/09/2026): sin fecha, un icono como el clip y el micrófono; con fecha, se
colorea de verde a rojo pasando por amarillo según se acerca. El matiz llega en --tt-h
(ttInfoVenc) y aquí se vuelve relleno claro, borde y trazo oscuro del mismo tono: el amarillo
solo se lee como relleno (como letra sobre blanco no llega al contraste). Vencida, rojo lleno. */
.tt-venc.tt-venc-con {
background: hsl(var(--tt-h, 130) 85% 89%); border-color: hsl(var(--tt-h, 130) 60% 42%); color: hsl(var(--tt-h, 130) 75% 23%);
font-weight: 600; font-variant-numeric: tabular-nums;
}
.tt-venc.tt-venc-con:hover { border-color: hsl(var(--tt-h, 130) 70% 28%); color: hsl(var(--tt-h, 130) 80% 15%); }
.tt-venc.tt-venc-pasada, .tt-venc.tt-venc-pasada:hover { background: hsl(0 72% 45%); border-color: hsl(0 72% 36%); color: #fff; font-weight: 700; }
html[data-modo="incognito-oscuro"] .tt-venc.tt-venc-con { background: hsl(var(--tt-h, 130) 45% 20%); border-color: hsl(var(--tt-h, 130) 55% 48%); color: hsl(var(--tt-h, 130) 85% 80%); }
html[data-modo="incognito-oscuro"] .tt-venc.tt-venc-pasada { background: hsl(0 62% 42%); border-color: hsl(0 70% 60%); color: #fff; }
.tt-venc.abierto { box-shadow: 0 0 0 2px var(--verde, #12A9C4); }
/* Eliminar, prioritaria y completar: el color de lo que hacen aparece al pasar por encima. */
.tt-borrar:hover, .tt-prioridad:hover { color: #C62828; border-color: #E0A0A0; background: rgba(211,47,47,.08); }
.tt-prioridad.activa, .tt-prioridad.activa:hover { background: #D32F2F; border-color: #D32F2F; color: #fff; }
.tt-completar:hover { color: #1e6b43; border-color: rgba(46,160,106,.5); background: rgba(46,160,106,.12); }
html[data-modo="incognito-oscuro"] .tt-borrar:hover, html[data-modo="incognito-oscuro"] .tt-prioridad:hover { color: #F28B87; border-color: rgba(242,139,135,.5); background: rgba(239,100,97,.12); }
html[data-modo="incognito-oscuro"] .tt-prioridad.activa { background: #E53935; border-color: #EF6461; color: #fff; }
html[data-modo="incognito-oscuro"] .tt-completar:hover { color: #6ED1A0; border-color: rgba(110,209,160,.5); background: rgba(110,209,160,.12); }
/* Sin Google conectado los dos botones llevan candado: siguen pulsándose, y al pulsarlos explican
que los adjuntos y las notas de voz viven en su Drive. */
.tt-bloqueado { opacity: .55; }
.tt-candado-ico { position: absolute; right: -6px; top: -7px; width: 13px; height: 13px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--lg-panel-solido, #fff); border: 1px solid var(--lg-borde, rgba(0,0,0,.18)); color: var(--texto-suave); }
.tt-candado-ico .tar-ico { width: 8px; height: 8px; }
/* Los iconos de Tareas son trazos de la misma familia que los de la cabecera; cada contexto fija su tamaño. */
.tt-tab-ancho .tar-ico { width: 14px; height: 14px; vertical-align: -3px; }
.tt-adj .tar-ico { width: 14px; height: 14px; flex: 0 0 auto; color: var(--texto-suave); }
.tt-rec-parar .tar-ico { width: 12px; height: 12px; vertical-align: -2px; }
.tt-comp-adj .tar-ico { width: 13px; height: 13px; vertical-align: -2px; color: var(--texto-suave); }
.tt-card.tt-grabando .tt-grabar { display: none; }
/* Dedos, no ratón: en el móvil los botones del pie crecen hasta un blanco táctil razonable. */
@media (max-width: 720px) {
.tt-venc, .tt-adjuntar, .tt-grabar, .tt-borrar, .tt-prioridad, .tt-completar { height: 30px; min-width: 36px; font-size: .8125rem; }
.tt-adj-borrar { width: 26px; height: 26px; }
}
/* En pantalla táctil, la zona que responde al dedo llega a 44 px de alto sin cambiar el dibujo (HIG,
como los botones de la cuenta en marca.css §4). Solo en vertical: a los lados están los vecinos. */
@media (hover: none) and (pointer: coarse) {
.tt-pie button::before { content: ''; position: absolute; inset: -7px 0; }
}
/* Los adjuntos de una tarea: una fila por archivo (nombre, peso, quitar) y el reproductor entero
debajo del nombre en las notas de voz. Los bytes llegan de paso desde su Drive. */
.tt-adjuntos { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.tt-adj { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: .75rem; border: 1px solid var(--lg-borde, rgba(0,0,0,.1)); border-radius: 8px; padding: 3px 6px; background: var(--lg-vidrio, rgba(255,255,255,.4)); }
.tt-adj-abrir { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 4px; color: var(--texto); text-decoration: none; }
.tt-adj-abrir:hover .tt-adj-nombre { text-decoration: underline; }
.tt-adj-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-adj-peso { flex: 0 0 auto; color: var(--texto-suave); }
.tt-adj-borrar { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--texto-suave); font-size: .75rem; line-height: 1; cursor: pointer; font-family: inherit; padding: 0; }
.tt-adj-borrar:hover { color: #c62828; border-color: #e0a0a0; }
.tt-adj-audio { flex-wrap: wrap; }
.tt-adj-audio .tt-adj-nombre { flex: 1; }
.tt-adj-audio audio { flex: 1 0 100%; width: 100%; height: 32px; }
.tt-adj-subiendo, .tt-adj-grabando { color: var(--texto-suave); }
.tt-adj-pct { margin-left: auto; font-variant-numeric: tabular-nums; }
.tt-rec-punto { width: 8px; height: 8px; border-radius: 50%; background: #d32f2f; flex: 0 0 auto; animation: tt-latido 1s infinite; }
@keyframes tt-latido { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .tt-rec-punto { animation: none; } }
.tt-rec-tiempo { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--texto); }
.tt-rec-parar, .tt-rec-cancelar { flex: 0 0 auto; border-radius: 999px; padding: 2px 9px; font-size: .75rem; font-family: inherit; cursor: pointer; border: 1px solid var(--lg-borde, rgba(0,0,0,.12)); background: var(--lg-vidrio, rgba(255,255,255,.5)); color: var(--texto); }
.tt-rec-parar { color: #1e6b43; border-color: rgba(46,160,106,.5); }
.tt-rec-cancelar:hover { color: #c62828; border-color: #e0a0a0; }
.tt-add-tarea {
margin-top: 8px; width: 100%; padding: 7px; font-size: .78125rem; font-family: inherit; cursor: pointer;
color: var(--texto-suave); background: transparent; border: 1px dashed var(--lg-borde, rgba(0,0,0,.18)); border-radius: 10px;
}
.tt-add-tarea:hover { color: var(--texto); border-color: var(--texto-suave); }
.tt-add-tablon {
width: 100%; padding: 13px; margin: 14px 0 18px; font-size: .875rem; font-weight: 600; font-family: inherit; cursor: pointer;
color: var(--texto-suave); background: transparent; border: 1px dashed var(--lg-borde, rgba(0,0,0,.2)); border-radius: var(--lg-r-l, 18px);
}
.tt-add-tablon:hover { color: var(--texto); border-color: var(--texto-suave); }
/* MODO URGENTE (23/09/2026): destaca las prioritarias y las que vencen hoy, mañana o ya vencieron
(.tt-cerca); las demás palidecen, y recuperan algo de color al pasar el ratón para poder usarlas. */
body.tt-modo-urgente .tt-card:not(.tt-prioritaria):not(.tt-cerca) { opacity: .3; filter: saturate(.25); }
body.tt-modo-urgente .tt-card.tt-prioritaria, body.tt-modo-urgente .tt-card.tt-cerca { box-shadow: 0 0 0 2px rgba(211,47,47,.38), 0 6px 18px rgba(211,47,47,.2); }
@media (hover: hover) { body.tt-modo-urgente .tt-card:not(.tt-prioritaria):not(.tt-cerca):hover { opacity: .75; filter: none; } }
/* ===== El calendario con reloj de la fecha límite (23/09/2026) =====
Se despliega pegado al botón del calendario de la tarjeta (en body, con coordenadas de página).
Fondo OPACO (la superficie, blanca en claro y medianoche en oscuro): con el panel translúcido de
los menús se transparentaba el texto de la tarjeta de debajo entre los números. */
.tt-cal-pop {
position: absolute; z-index: 2500; width: 276px; max-width: calc(100vw - 16px); box-sizing: border-box; padding: 12px 12px 10px;
border-radius: 16px; border: 1px solid var(--lg-borde, rgba(0,0,0,.12)); background: var(--superficie, #fff);
box-shadow: 0 14px 38px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08); color: var(--texto); font-size: .8125rem;
}
.tt-cal-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tt-cal-titulo { font-weight: 700; font-size: .875rem; text-transform: capitalize; }
.tt-cal-nav { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--texto-suave); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.tt-cal-nav:hover { background: var(--verde-bg, rgba(0,0,0,.06)); color: var(--texto); }
.tt-cal-nav .tar-ico { width: 16px; height: 16px; vertical-align: 0; }
.tt-cal-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.tt-cal-dow { text-align: center; font-size: .6875rem; font-weight: 700; color: var(--texto-suave); padding: 3px 0 5px; }
.tt-cal-dia {
height: 32px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--texto); cursor: pointer;
font-family: inherit; font-size: .8125rem; font-variant-numeric: tabular-nums;
}
.tt-cal-dia:hover { background: var(--verde-bg, rgba(0,0,0,.06)); }
.tt-cal-dia.fuera { color: var(--texto-suave); opacity: .6; }
.tt-cal-dia.hoy { font-weight: 800; color: var(--verde-oscuro, #0E7E8F); box-shadow: inset 0 0 0 1.5px var(--verde, #12A9C4); }
.tt-cal-dia.sel, .tt-cal-dia.sel:hover { background: var(--verde-solido, #0E7E8F); color: #fff; font-weight: 700; box-shadow: none; opacity: 1; }
.tt-cal-hora { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--lg-borde, rgba(0,0,0,.1)); }
.tt-cal-reloj { display: inline-flex; color: var(--texto-suave); }
.tt-cal-reloj .tar-ico { width: 16px; height: 16px; vertical-align: 0; }
.tt-cal-hora-txt { color: var(--texto-suave); margin-right: auto; }
.tt-cal-sel {
font-family: inherit; font-size: .8125rem; font-variant-numeric: tabular-nums; padding: 4px 6px; border-radius: 8px; cursor: pointer;
border: 1px solid var(--lg-borde, rgba(0,0,0,.15)); background: var(--lg-vidrio, rgba(255,255,255,.6)); color: var(--texto);
}
.tt-cal-sel:disabled { opacity: .5; cursor: default; }
.tt-cal-dospuntos { font-weight: 700; color: var(--texto-suave); }
.tt-cal-resumen { margin: 8px 0 0; font-size: .75rem; line-height: 1.4; color: var(--texto-suave); }
.tt-cal-resumen-pasada { color: #C62828; font-weight: 600; }
.tt-cal-pie { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.tt-cal-quitar { padding: 6px 4px; border: 0; border-radius: 8px; background: transparent; color: #C62828; cursor: pointer; font-family: inherit; font-size: .78125rem; font-weight: 600; }
.tt-cal-quitar:hover { background: rgba(211,47,47,.08); }
html[data-modo="incognito-oscuro"] .tt-cal-resumen-pasada, html[data-modo="incognito-oscuro"] .tt-cal-quitar { color: #F28B87; }
/* En el móvil: días más altos para el dedo, y los selectores a 16 px (a menos, Safari hace zoom). */
@media (max-width: 720px) { .tt-cal-dia { height: 38px; } .tt-cal-sel { font-size: 1rem; } }
/* Arrastre: clon flotante + hueco. pointer-events:none en el clon es imprescindible — si no,
se interpone y elementFromPoint devolvería siempre el clon. */
body.tt-arrastrando { user-select: none; cursor: grabbing; }
body.tt-arrastrando * { cursor: grabbing !important; }
.tt-oculto { display: none !important; }
.tt-clon {
position: fixed; z-index: 3000; margin: 0 !important; pointer-events: none;
opacity: .95; transform: rotate(1.5deg); box-shadow: 0 12px 30px rgba(0,0,0,.28);
border-radius: 12px; background: var(--lg-panel, rgba(255,255,255,.95)); overflow: hidden;
}
.tt-hueco { box-sizing: border-box; border: 2px dashed rgba(14,126,143,.7); background: rgba(24,215,244,.10); border-radius: 12px; }
.tt-comp { margin: 6px 0 30px; border: 1px solid var(--lg-borde, rgba(0,0,0,.1)); border-radius: var(--lg-r-l, 18px); background: var(--lg-panel, rgba(255,255,255,.7)); padding: 10px 16px; }
.tt-comp summary { cursor: pointer; font-weight: 700; font-size: .875rem; padding: 4px 0; }
#tt-comp-buscar {
width: 100%; margin: 10px 0; padding: 9px 12px; font-size: .84375rem; font-family: inherit;
border: 1px solid var(--lg-borde, rgba(0,0,0,.15)); border-radius: 10px; background: var(--lg-vidrio, rgba(255,255,255,.6)); color: var(--texto);
}
.tt-comp-fila { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 7px 2px; border-top: 1px solid var(--lg-borde, rgba(0,0,0,.08)); }
.tt-comp-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84375rem; }
.tt-comp-adj { text-decoration: none; margin-left: 4px; }
.tt-comp-restaurar { border: 1px solid var(--lg-borde, rgba(0,0,0,.12)); background: var(--lg-vidrio, rgba(255,255,255,.5)); color: var(--texto); border-radius: 999px; padding: 4px 12px; font-size: .75rem; font-family: inherit; cursor: pointer; }
.tt-comp-restaurar:hover { border-color: rgba(46,160,106,.5); color: #1e6b43; }
/* ===== HERRAMIENTA «CALENDARIO» (18/08/2026) ===== */
/* Barra de MODO del calendario (24/08/2026): dice si los eventos viven en Tarsis o en el
Google del usuario, y ofrece sincronizar. El calendario funciona sin Google. */
/* Pantalla del CONECTOR (25/08/2026): Tarsis se añade al asistente del usuario, no al revés. */
.con-intro p { font-size: .9375rem; line-height: 1.55; max-width: 720px; }
.con-url { margin: 20px 0 6px; }
.con-url-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.con-url code { font-size: .9375rem; padding: 10px 14px; border-radius: 12px; background: rgba(0,0,0,.05);
border: 1px solid var(--lg-borde, rgba(0,0,0,.12)); user-select: all; word-break: break-all; }
.con-pasos { margin: 18px 0; padding-left: 22px; line-height: 1.7; max-width: 720px; }
.con-pasos li { margin: 8px 0; }
.con-lista-avisos { margin: 8px 0 0; padding-left: 20px; line-height: 1.6; }
.con-lista-avisos li { margin: 5px 0; }
.con-pasos .dos-meta { margin-top: 2px; }
.con-aviso { max-width: 720px; border-left: 3px solid var(--lg-borde, rgba(0,0,0,.2)); padding-left: 12px; margin: 18px 0 26px; }
.con-conexiones h3 { font-size: 1rem; margin: 0 0 10px; }
.con-lista { max-width: 720px; }
.con-fila { display: flex; align-items: center; gap: 12px; padding: 11px 2px;
border-bottom: 1px solid var(--lg-borde, rgba(0,0,0,.08)); }
.con-fila:last-child { border-bottom: 0; }
.con-fila > div { flex: 1 1 auto; min-width: 0; }
.cal-ret-lista { max-height: 46vh; overflow-y: auto; margin: 10px 0 4px; }
.cal-ret-fila { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--lg-borde, rgba(0,0,0,.08)); }
.cal-ret-fila:last-child { border-bottom: 0; }
.cal-ret-fila > div { flex: 1 1 auto; min-width: 0; }
.cal-ret-btn { white-space: nowrap; }
.cal-modo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 9px 14px;
border: 1px solid var(--lg-borde, rgba(0,0,0,.1)); border-radius: 999px; background: var(--lg-vidrio, rgba(255,255,255,.55)); }
.cal-modo:empty { display: none; }
.cal-modo-eti { font-size: .78125rem; font-weight: 700; color: var(--texto); white-space: nowrap; }
.cal-modo-on { color: var(--verde-oscuro); }
.cal-modo .dos-meta { margin: 0; flex: 1 1 240px; }
.cal-modo-btn { margin-left: auto; text-decoration: none; white-space: nowrap; }
.cal-vistas { display: flex; gap: 4px; border: 1px solid var(--lg-borde, rgba(0,0,0,.12)); border-radius: 999px; padding: 3px; background: var(--lg-vidrio, rgba(255,255,255,.5)); }
.cal-v { border: 0; background: transparent; font-family: inherit; font-size: .78125rem; font-weight: 600; color: var(--texto-suave); padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.cal-v.activo { background: var(--lg-panel, rgba(255,255,255,.9)); color: var(--texto); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.cal-mes { border: 1px solid var(--lg-borde, rgba(0,0,0,.1)); border-radius: var(--lg-r-l, 18px); overflow: hidden; background: var(--lg-panel, rgba(255,255,255,.8)); margin-bottom: 26px; }
/* minmax(0,1fr): columnas SIEMPRE iguales (1/7). Sin el 0, un evento largo con nowrap
ensancha su columna y desalinea la rejilla entera de la fila de nombres (lección real). */
.cal-cab-dias, .cal-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-cab-dias { border-bottom: 1px solid var(--lg-borde, rgba(0,0,0,.1)); }
.cal-dia-nombre { padding: 8px 6px; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); text-align: center; }
.cal-celda {
min-height: 104px; min-width: 0; border-right: 1px solid var(--lg-borde, rgba(0,0,0,.07)); border-bottom: 1px solid var(--lg-borde, rgba(0,0,0,.07));
padding: 4px 5px; cursor: pointer; display: flex; flex-direction: column; gap: 3px;
}
.cal-celda:nth-child(7n) { border-right: none; }
.cal-celda.cal-fuera { opacity: .45; }
.cal-celda.cal-hoy { background: rgba(24,215,244,.13); }
.cal-celda-num { font-size: .75rem; font-weight: 600; color: var(--texto-suave); width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.cal-celda.cal-hoy .cal-celda-num { background: var(--verde-solido); color: #fff; border-radius: 50%; font-weight: 700; }
.cal-celda-evs { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-chip {
border: none; text-align: left; font-family: inherit; font-size: .71875rem; cursor: pointer; min-width: 0;
background: rgba(24,215,244,.16); color: var(--texto); border-left: 3px solid var(--verde);
border-radius: 4px; padding: 2px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-chip:hover { background: rgba(24,215,244,.26); }
.cal-chip-dia { background: var(--verde-solido); color: #fff; border-left-color: var(--verde-texto-2); }
.cal-chip-hora { font-weight: 700; opacity: .8; }
.cal-mas { font-size: .65625rem; color: var(--texto-suave); padding-left: 4px; }
.cal-semana { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 8px; margin-bottom: 26px; }
@media (max-width: 860px) { .cal-semana { grid-template-columns: 1fr; } }
.cal-sem-col { border: 1px solid var(--lg-borde, rgba(0,0,0,.1)); border-radius: 14px; background: var(--lg-panel, rgba(255,255,255,.8)); padding: 8px; min-height: 130px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-sem-col.cal-hoy { border-color: rgba(46,160,106,.6); background: rgba(46,160,106,.07); }
.cal-sem-cab { font-size: .75rem; color: var(--texto-suave); margin-bottom: 2px; }
.cal-vacio { text-align: center; padding: 8px 0; }
.cal-agenda { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.cal-ag-dia { display: grid; grid-template-columns: 120px 1fr; gap: 12px; border: 1px solid var(--lg-borde, rgba(0,0,0,.1)); border-radius: 14px; background: var(--lg-panel, rgba(255,255,255,.8)); padding: 10px 14px; }
@media (max-width: 620px) { .cal-ag-dia { grid-template-columns: 1fr; gap: 4px; } }
.cal-ag-dia.cal-hoy { border-color: rgba(46,160,106,.6); }
.cal-ag-fecha { font-size: .8125rem; color: var(--texto-suave); }
.cal-ag-evs { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cal-ag-ev { border: none; background: transparent; text-align: left; font-family: inherit; font-size: .84375rem; color: var(--texto); cursor: pointer; padding: 2px 0; border-radius: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ag-ev:hover { color: #1e6b43; }
.cal-modal { max-width: 520px; width: 94vw; text-align: left; }
.cal-modal h2 { margin-top: 0; }
.cal-m-fila { display: flex; flex-direction: column; gap: 5px; margin: 0 0 12px; }
.cal-m-fila > label { font-weight: 700; font-size: .8125rem; }
.cal-m-fila input, .cal-m-fila textarea {
padding: 9px 11px; font-size: .875rem; font-family: inherit; color: var(--texto);
border: 1px solid var(--lg-borde, rgba(0,0,0,.15)); border-radius: 10px; background: var(--lg-vidrio, rgba(255,255,255,.6));
}
.cal-m-doble { flex-direction: row; gap: 12px; }
.cal-m-doble > div { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.cal-m-check { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: .875rem; cursor: pointer; }
.cal-m-borrar:hover { color: #c62828; border-color: #e0a0a0; }
.cal-modal .modal-acciones { display: flex; gap: 10px; align-items: center; }
/* ===== HERRAMIENTA «ASISTENTE IA» (18/08/2026): el Claude del usuario en el panel ===== */
.vista-as select {
padding: 7px 10px; font-size: .8125rem; font-family: inherit; color: var(--texto);
border: 1px solid var(--lg-borde, rgba(0,0,0,.15)); border-radius: 10px; background: var(--lg-vidrio, rgba(255,255,255,.6));
max-width: 220px;
}
/* Sección «Conexiones» del panel: la tarjeta de Google (18/08/2026). */
.tar-conexiones { margin-top: 30px; }
.tar-conex-cab h2 { font-size: 1.1875rem; }
.tar-gcard {
padding: 18px 22px; border-radius: var(--lg-r-l, 20px);
background: var(--lg-panel, rgba(255,255,255,.8)); border: 1px solid var(--lg-borde, rgba(0,0,0,.1));
backdrop-filter: blur(10px) saturate(1.35); -webkit-backdrop-filter: blur(10px) saturate(1.35);
box-shadow: var(--lg-sombra, 0 8px 24px rgba(0,0,0,.08));
}
.tar-gcab { display: flex; align-items: center; gap: 9px; font-size: .96875rem; margin-bottom: 8px; }
.tar-gcab svg { flex: 0 0 auto; }
.tar-gestado {
font-size: .6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
border-radius: 999px; padding: 3px 10px; border: 1px solid var(--lg-borde, rgba(0,0,0,.12));
}
.tar-gon { color: #1e6b43; background: rgba(46, 160, 106, .13); border-color: rgba(46, 160, 106, .35); }
.tar-goff { color: var(--texto-suave); background: var(--lg-vidrio, rgba(255,255,255,.5)); }
.tar-gaviso { color: #8a5a17; background: rgba(224, 158, 44, .15); border-color: rgba(224, 158, 44, .4); }
.tar-gcard p { margin: 0 0 12px; line-height: 1.5; }
.tar-gbotones { display: flex; gap: 10px; flex-wrap: wrap; }
.tar-gform { display: flex; gap: 10px; flex-wrap: wrap; }
.tar-gform input {
flex: 1 1 260px; padding: 10px 12px; font-size: .875rem; font-family: inherit;
border: 1px solid var(--lg-borde, rgba(0,0,0,.15)); border-radius: 10px;
background: var(--lg-vidrio, rgba(255,255,255,.6)); color: var(--texto);
}
/* Popup grande de ENVÍO AUTOMÁTICO por correo (reloj de la tarjeta de búsqueda). */
.tar-envio { max-width: 700px; width: 94vw; max-height: 90vh; overflow: auto; text-align: left; }
.tar-envio h2 { margin-top: 0; }
.tar-envio-fila { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.tar-envio-fila > label { font-weight: 700; font-size: .84375rem; }
.tar-envio-remitente { font-size: .875rem; }
.tar-envio-dest { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; }
.tar-dest-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--verde-bg-chip); border: 1px solid var(--verde-bd-2); color: var(--verde-texto-2); border-radius: 999px; padding: 3px 6px 3px 11px; font-size: .78125rem; font-weight: 600; }
.tar-dest-chip button { border: none; background: none; cursor: pointer; color: inherit; font-size: .75rem; line-height: 1; padding: 2px; }
.tar-envio-add { display: flex; gap: 8px; flex-wrap: wrap; }
.tar-envio-add input { flex: 1; min-width: 140px; padding: 8px 11px; border: 1px solid var(--lg-borde, var(--linea)); border-radius: 12px; background: var(--lg-panel-solido, var(--superficie)); color: var(--texto); font: inherit; font-size: .84375rem; }
.tar-envio-pauta { display: flex; gap: 8px; flex-wrap: wrap; }
.tar-envio-pauta select { padding: 8px 11px; border: 1px solid var(--lg-borde, var(--linea)); border-radius: 12px; background: var(--lg-panel-solido, var(--superficie)); color: var(--texto); font: inherit; font-size: .84375rem; cursor: pointer; }
.tar-envio-fila > input[type="text"], #te-cuerpo { width: 100%; padding: 9px 12px; border: 1px solid var(--lg-borde, var(--linea)); border-radius: 12px; background: var(--lg-panel-solido, var(--superficie)); color: var(--texto); font: inherit; font-size: .84375rem; }
#te-cuerpo { resize: vertical; min-height: 130px; line-height: 1.5; }
.tar-envio-modo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .8125rem; }
.tar-envio-modo label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.tar-envio-vars { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tar-var-chip { border: 1px dashed var(--verde-bd-2); background: var(--verde-bg); color: var(--verde-texto-2); border-radius: 999px; padding: 3px 11px; font: inherit; font-size: .75rem; font-weight: 600; cursor: pointer; transition: transform .14s ease; }
.tar-var-chip:hover { transform: scale(1.08); }
.tar-envio-previa { border: 1px solid var(--lg-borde, var(--linea)); border-radius: 14px; background: var(--lg-panel-solido, var(--superficie)); padding: 12px 15px; }
.tar-previa-asunto { font-weight: 700; font-size: .875rem; border-bottom: 1px solid var(--lg-borde, var(--linea)); padding-bottom: 8px; margin-bottom: 9px; }
.tar-previa-cuerpo { font-size: .84375rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: break-word; }
.tar-previa-cuerpo img { max-width: 100%; border-radius: 8px; }
.tar-previa-adjunto { margin-top: 10px; border-top: 1px dashed var(--lg-borde, var(--linea)); padding-top: 8px; }
.tar-envio-aviso { border: 1.5px dashed var(--lg-borde, var(--linea)); border-radius: 12px; padding: 9px 13px; margin: 0 0 12px; }
.tar-envio-off { color: #c23434; border-color: #c23434 !important; }
/* Aviso de versión: el servidor de la maqueta va por detrás de la interfaz. */
.tar-aviso-version { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 500; max-width: min(560px, 92vw); padding: 12px 20px; border-radius: 999px; font-size: .84375rem; font-weight: 600; color: #fff; background: rgba(178, 40, 40, 0.94); backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5); box-shadow: 0 8px 30px rgba(140, 20, 20, 0.35); text-align: center; }
/* --- Página de carpeta: documentos PDF --- */
/* Documentos = ICONOS de escritorio (sin caja), en MOSAICO fijo; un clic abre. */
.tar-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; margin-top: 16px; }
.tar-doc {
display: flex; flex-direction: column; align-items: center; gap: 7px;
padding: 14px 8px 10px; border-radius: 14px; user-select: none; cursor: pointer;
background: transparent; border: none; box-shadow: none;
transition: background .16s ease;
}
.tar-doc:hover { background: rgba(0, 0, 0, 0.05); }
html[data-modo="incognito-oscuro"] .tar-doc:hover { background: rgba(255, 255, 255, 0.06); }
/* Vista de LISTA: filas con el nombre a la izquierda y los botones a la derecha. */
.tar-docs.lista { display: flex; flex-direction: column; gap: 4px; }
.tar-docs.lista .tar-doc { flex-direction: row; align-items: center; gap: 12px; padding: 7px 12px; }
.tar-docs.lista .tar-doc-icono { width: 24px; }
.tar-docs.lista .tar-doc-nombre { text-align: left; flex: 1; min-width: 0; }
.tar-docs.lista .tar-doc-acciones { margin-left: auto; flex: none; }
.tar-doc-icono { display: block; width: 42px; flex: none; }
.tar-doc-icono svg { width: 100%; height: auto; display: block; }
.tar-doc-nombre { font-size: .8125rem; font-weight: 600; text-align: center; word-break: break-word; outline: none; border-radius: 8px; padding: 1px 6px; max-width: 100%; }
.tar-doc-nombre[contenteditable] { background: var(--lg-panel-solido, #fff); border: 1px dashed var(--lg-borde, rgba(0,0,0,.15)); cursor: text; }
.tar-doc-acciones { display: flex; gap: 6px; }
.tar-doc-borrar:hover { color: #c23434; border-color: #c23434; }
/* Menú contextual (clic derecho) del documento. */
.tar-menu-ctx {
position: fixed; z-index: 260; display: flex; flex-direction: column; min-width: 172px; padding: 6px;
border-radius: var(--lg-r-m, 14px); background: var(--lg-vidrio-denso, rgba(255,255,255,.85));
backdrop-filter: blur(24px) saturate(1.7); -webkit-backdrop-filter: blur(24px) saturate(1.7);
border: 1px solid var(--lg-borde, rgba(0,0,0,.1)); box-shadow: var(--lg-sombra-alta, 0 18px 50px rgba(0,0,0,.2));
}
.tar-menu-ctx button { text-align: left; border: none; background: transparent; font: inherit; font-size: .84375rem; padding: 8px 12px; border-radius: 9px; cursor: pointer; color: var(--texto); }
.tar-menu-ctx button:hover { background: var(--lg-panel-solido, #fff); }
.tar-menu-ctx button.peligro { color: #c23434; }
/* Visor de PDF (doble clic): el visor nativo del navegador dentro de un marco de vidrio. */
.tar-visor-fondo { position: fixed; inset: 0; z-index: 220; background: rgba(15, 20, 15, 0.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.tar-visor {
width: min(1000px, 96vw); height: 92vh; display: flex; flex-direction: column; overflow: hidden;
border-radius: var(--lg-r-xl, 26px); background: var(--lg-vidrio-denso, rgba(255,255,255,.85));
border: 1px solid var(--lg-borde, rgba(0,0,0,.1)); box-shadow: var(--lg-sombra-alta, 0 18px 60px rgba(0,0,0,.3));
backdrop-filter: blur(24px) saturate(1.7); -webkit-backdrop-filter: blur(24px) saturate(1.7);
}
.tar-visor-cab { display: flex; align-items: center; gap: 10px; padding: 10px 16px; }
.tar-visor-tit { font-weight: 700; font-size: .90625rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tar-visor-iframe { flex: 1; border: none; background: #3c4043; }
/* --- Papelera --- */
.tar-papelera { display: flex; flex-direction: column; gap: 10px; max-width: 660px; }
.tar-pap-item {
display: flex; align-items: center; gap: 14px; padding: 12px 16px;
border-radius: var(--lg-r-l, 20px); background: var(--lg-panel, rgba(255,255,255,.8));
border: 1px solid var(--lg-borde, rgba(0,0,0,.1)); box-shadow: var(--lg-sombra, 0 8px 24px rgba(0,0,0,.08));
backdrop-filter: blur(10px) saturate(1.35); -webkit-backdrop-filter: blur(10px) saturate(1.35);
}
.tar-pap-item .tar-doc-icono { width: 30px; }
.tar-pap-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
/* Toast con botón de acción («Deshacer»). */
.tar-toast-btn { margin-left: 10px; border: none; border-radius: 999px; padding: 5px 14px; font: inherit; font-size: .78125rem; font-weight: 700; cursor: pointer; background: var(--verde-solido); color: #fff; }
.tar-toast-btn:hover { filter: brightness(1.08); }
/* ============== Formulario de búsqueda: casillas, info y ÁRBOL de selección ============== */
/* Casilla de verificación del SITIO (tri-estado): plana, cápsula redondeada, verde al
marcar y guion blanco en el estado PARCIAL (parte de los hijos marcada). */
input.tar-check {
appearance: none; -webkit-appearance: none; width: 17px; height: 17px; flex: none; margin: 0;
border: 1.5px solid var(--lg-borde, rgba(0,0,0,.18)); border-radius: 5px;
background-color: var(--lg-vidrio, rgba(255,255,255,.5));
cursor: pointer; display: inline-block; vertical-align: -3px;
background-position: center; background-repeat: no-repeat; background-size: 12px 12px;
transition: background-color .14s, border-color .14s;
}
input.tar-check:hover { border-color: var(--texto-suave); }
input.tar-check:checked, input.tar-check:indeterminate { background-color: var(--verde-solido); border-color: var(--verde-solido); }
input.tar-check:checked { background-image: url('data:image/svg+xml;utf8,'); }
input.tar-check:indeterminate { background-image: url('data:image/svg+xml;utf8,'); }
input.tar-check:focus-visible { outline: 2px solid var(--verde-solido); outline-offset: 2px; }
.tar-opcion { display: flex; align-items: center; gap: 9px; cursor: pointer; margin-top: 4px; font-size: .84375rem; }
/* LAS OTRAS FORMAS DE ESCRIBIR LO MISMO (26/08/2026). Bajo las palabras clave se ofrecen las
variantes en lengua cooficial del mismo nombre («Girona» para «Gerona»). Se OFRECEN, no se
añaden solas — regla de oro: sin elegir temática se busca el término tal cual. Se pintan
distintas de los chips de verdad, con el signo +, para que se vea de un vistazo que aún no
están puestas: un chip idéntico al de una palabra clave real haría creer que ya se busca. */
.tar-kw-sug { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tar-kw-sug-chip { border: 1px dashed var(--verde-bd-2); background: transparent; color: var(--verde-texto-2);
border-radius: 999px; padding: 3px 10px; font-size: .8125rem; cursor: pointer; line-height: 1.5; }
.tar-kw-sug-chip:hover { background: var(--verde-bg-chip); border-style: solid; }
.tar-kw-sug-chip:focus-visible { outline: 2px solid var(--verde-solido); outline-offset: 2px; }
/* Cabecera de campo con icono de INFO arriba a la derecha; la explicación sale al pasar
el ratón (no es clicable). */
.tar-campo-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tar-campo-cab label { font-weight: bold; font-size: .9375rem; color: var(--texto); }
.tar-info { position: relative; display: inline-flex; color: var(--texto-suave); cursor: help; }
.tar-info .tar-ico { width: 17px; height: 17px; }
.tar-info:hover { color: var(--texto); }
/* El globo tiene que pintarse POR ENCIMA de la tarjeta siguiente: cada .dos-campo
lleva backdrop-filter (crea contexto de apilamiento), así que la tarjeta que contiene
el icono se eleva mientras el ratón está encima. */
.dos-campo { position: relative; }
.dos-campo:has(.tar-info:hover) { z-index: 90; }
/* Con la lista del buscador abierta, su tarjeta manda sobre la siguiente (si no, la
de Portadas se pinta encima y corta la lista). */
.dos-campo:has(.tar-arbol.buscando) { z-index: 80; }
.tar-info-caja {
position: absolute; top: calc(100% + 9px); right: -4px; z-index: 90; width: 320px; max-width: 74vw;
padding: 11px 14px; border-radius: 12px; background: var(--lg-panel-solido, #fff);
border: 1px solid var(--lg-borde, rgba(0,0,0,.1)); box-shadow: var(--lg-sombra, 0 8px 24px rgba(0,0,0,.12));
font-size: .8rem; font-weight: normal; line-height: 1.5; color: var(--texto); text-align: left;
opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .16s ease, transform .16s ease;
}
.tar-info:hover .tar-info-caja { opacity: 1; transform: none; }
/* --- Árbol de selección (medios / portadas): Todos·Ninguno + desplegables anidados --- */
.tar-arbol-modos { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; position: relative; z-index: 3; }
.tar-buscador { position: relative; margin-left: auto; }
.tar-arbol-filtro { min-width: 200px; padding: 7px 13px; border: 1px solid var(--linea); border-radius: 999px; background: var(--superficie); color: var(--texto); font: inherit; font-size: .8rem; }
.tar-arbol-filtro:focus { outline: none; border-color: var(--verde-bd-2); box-shadow: 0 0 0 3px rgba(24,215,244,.30); }
/* Panel del buscador: la lista viene PRECARGADA (sale al enfocar) y un clic marca. */
.tar-buscador-panel {
position: absolute; top: calc(100% + 7px); right: 0; z-index: 60; width: 340px; max-width: 80vw; max-height: 320px; overflow-y: auto;
padding: 5px; border-radius: 14px; background: var(--lg-panel-solido, #fff);
border: 1px solid var(--lg-borde, rgba(0,0,0,.1)); box-shadow: var(--lg-sombra, 0 8px 24px rgba(0,0,0,.12));
}
.tar-busca-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px; border: none; background: none; border-radius: 9px; cursor: pointer; font: inherit; font-size: .8rem; color: var(--texto); text-align: left; }
.tar-busca-item:hover { background: var(--gris-fila); }
.tar-busca-item .tar-medio-nom { flex: 1; min-width: 0; }
.tar-busca-ok { flex: none; font-weight: 700; color: var(--texto-suave); }
.tar-busca-item.marcado .tar-busca-ok { color: var(--verde-solido); }
.tar-busca-vacio { padding: 10px 12px; }
/* Desplegable animado (rejilla 0fr→1fr): la caja se AMPLÍA con suavidad, sin alturas
mágicas. OJO: el interior del recorte NO puede llevar padding ni borde — no se
comprimen con 0fr y asomaría una franja con los favicones. El aire va DENTRO. */
.tar-despl { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.tar-despl > .tar-despl-int { overflow: hidden; min-height: 0; padding: 0; border: 0; }
.tar-arbol.abierto > .tar-arbol-caja,
.tar-rama.abierto > .tar-despl,
.tar-region.abierto > .tar-despl { grid-template-rows: 1fr; }
.tar-arbol-cuerpo { padding-top: 10px; }
.tar-rama-cab { display: flex; align-items: center; gap: 10px; padding: 5px 2px; }
.tar-rama-abre { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; padding: 3px 8px; margin: 0; cursor: pointer; color: var(--texto); font: inherit; font-size: .84375rem; font-weight: 600; border-radius: 8px; }
.tar-rama-abre:hover { background: var(--gris-fila); }
.tar-rama-fija { padding: 3px 8px; font-size: .84375rem; font-weight: 600; }
.tar-chev { width: 13px; height: 13px; transition: transform .22s ease; color: var(--texto-suave); }
.tar-rama.abierto > .tar-rama-cab .tar-chev,
.tar-region.abierto > .tar-rama-cab .tar-chev { transform: rotate(90deg); }
.tar-regiones { padding-left: 26px; }
.tar-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1px 14px; padding: 2px 4px 10px 28px; }
.tar-medio { display: flex; align-items: center; gap: 8px; font-size: .8rem; padding: 3px 7px; border-radius: 8px; min-width: 0; }
label.tar-medio { cursor: pointer; }
label.tar-medio:hover { background: var(--gris-fila); }
.tar-medio-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tar-medio .dos-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.tar-fav { width: 16px; height: 16px; border-radius: 4px; flex: none; }
.tar-fav-vacio { display: inline-block; }
/* ================================================================ MULTI-ÁMBITO (v10)
Selector de alcance, formularios encadenados, pestañas por ámbito y la pestaña de
Google Trends con su gráfico SVG propio. Paleta de series VALIDADA para daltonismo
(dataviz) en los dos temas; los colores solo pintan marcas, el texto va en tinta. */
:root {
--viz-s1: #12A9C4; --viz-s2: #eb6834; --viz-s3: #1baf7a; --viz-s4: #eda100; --viz-s5: #e87ba4;
--viz-grid: #e1e0d9; --viz-eje: #c3c2b7; --viz-ink: #52514e;
}
:root[data-modo="incognito-oscuro"] {
--viz-s1: #3987e5; --viz-s2: #d95926; --viz-s3: #199e70; --viz-s4: #c98500; --viz-s5: #d55181;
--viz-grid: #2c2c2a; --viz-eje: #383835; --viz-ink: #c3c2b7;
}
/* --- selector de alcance (Nueva búsqueda) y de ingrediente (Editar) --- */
.tar-alcance { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 16px; }
.tar-alc { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; padding: 18px; border-radius: 16px; border: 1px solid var(--borde); background: var(--fondo-caja, transparent); cursor: pointer; color: var(--texto); font: inherit; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.tar-alc:not(.tar-alc-bloqueada):hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.tar-alc-icos { display: flex; gap: 6px; color: var(--texto-suave); }
.tar-alc-icos .tar-ico { width: 22px; height: 22px; }
.tar-alc-nombre { font-weight: 700; font-size: .9375rem; display: flex; align-items: center; gap: 8px; }
.tar-alc-desc { line-height: 1.35; }
.tar-form-amb { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 600; color: var(--texto-suave); margin-left: 10px; vertical-align: 2px; }
.tar-form-amb .tar-ico { width: 17px; height: 17px; }
/* --- iconos de ámbito en la tarjeta del tablón --- */
.dos-card-ambitos { display: inline-flex; gap: 5px; margin-right: auto; align-items: center; color: var(--texto-suave); }
/*
* ⚠ EL ICONO SE QUEDABA PEGADO A LA IZQUIERDA (Jacobo, 10/09/2026): «los iconitos de prensa,
* redes sociales y mitra en la cabecera de cada pastilla estan descentrados del cuadro donde
* deberian estar centrados».
*
* Tenia razon y la causa era esta linea. `estilos.css` centra la caja con
* `display: inline-grid; place-items: center`, y aqui se sobrescribia el display por `inline-flex`
* SIN traerse el centrado — y `place-items` en flex solo aplica la mitad (`justify-items` no hace
* nada en flex). Medido en produccion: caja de 24 px, icono de 15, y 1 px a la izquierda contra 8
* a la derecha.
*
* Se centra en los dos ejes explicitamente, que es lo unico que funciona en flex.
*/
.dos-amb-ico { display: inline-flex; align-items: center; justify-content: center; }
.dos-amb-ico .tar-ico { width: 15px; height: 15px; }
/* --- pestañas de ámbito del informe (reusan la pieza de pestañas del conjunto) --- */
.tar-amb-tabs { margin-bottom: 14px; }
.tar-tab-ico { display: inline-flex; margin-right: 6px; vertical-align: -2px; }
.tar-tab-ico .tar-ico { width: 15px; height: 15px; }
/* --- pestaña Google Trends --- */
.tar-trends-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.tar-trends-vacio { text-align: center; padding: 28px 16px; }
.tar-trends-vacio .boton-primario { margin-top: 10px; }
.tar-trends-pie { margin-top: 8px; }
.viz-wrap { position: relative; margin-top: 6px; }
.viz-svg { width: 100%; height: auto; display: block; }
.viz-grid { stroke: var(--viz-grid); stroke-width: 1; }
.viz-eje-txt { fill: var(--viz-ink); font-size: .65625rem; font-family: inherit; }
.viz-linea { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz-cruz { stroke: var(--viz-eje); stroke-width: 1; stroke-dasharray: 3 3; }
.viz-pt { stroke: var(--fondo, #fff); stroke-width: 2; }
.viz-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 2px; font-size: .8125rem; }
.viz-ley-item { display: inline-flex; align-items: center; gap: 6px; }
.viz-ley-chip { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.viz-tip { position: absolute; top: 8px; min-width: 130px; max-width: 220px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--borde); background: var(--fondo-caja, rgba(255,255,255,.95)); backdrop-filter: blur(8px); font-size: .78125rem; display: flex; flex-direction: column; gap: 3px; pointer-events: none; z-index: 3; }
.viz-tip span { display: inline-flex; align-items: center; gap: 6px; }
/* --- Tanda 2 de Trends: estados de carga/error, deltas, cuota, comunidades, relacionadas --- */
.tar-trends-aviso { padding: 8px 12px; border-radius: 10px; background: var(--gris-fila); font-size: .8rem; margin: 6px 0 10px; line-height: 1.4; }
.tar-trends-deltas { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: .8125rem; }
.tar-delta { display: inline-flex; align-items: center; gap: 6px; }
.tar-delta-pct { font-weight: 700; }
.tar-delta-pct.sube { color: #006300; }
.tar-delta-pct.baja { color: #b3261e; }
:root[data-modo="incognito-oscuro"] .tar-delta-pct.sube { color: #0ca30c; }
:root[data-modo="incognito-oscuro"] .tar-delta-pct.baja { color: #e66767; }
.tar-trends-sec { margin-top: 22px; }
/* El listado de tendencias también se usa DENTRO del informe (respaldo de Bronce): ahí
no lleva la sangría de la tira de la home. */
.tar-trends-sec > .tar-tendhoy-lista { padding: 4px 0 0; }
.tar-trends-sec h3 { margin: 0 0 8px; font-size: .9375rem; }
.tar-trends-sec h4 { margin: 0 0 6px; font-size: .8125rem; color: var(--texto-suave); }
.tar-sos-barra { display: flex; gap: 2px; height: 14px; border-radius: 7px; overflow: hidden; margin-bottom: 8px; }
.tar-sos-seg { display: block; height: 100%; min-width: 2px; }
.tar-geo-tabla { display: flex; flex-direction: column; gap: 3px; }
.tar-geo-fila { display: grid; grid-template-columns: 150px 1fr 84px; align-items: center; gap: 10px; font-size: .8rem; }
/* VARIANTE ANCHA para el predictor y el panel en vivo (v36). La de arriba nació para el mapa por
comunidad, donde la última columna es un número de dos cifras y 84 px sobran. Aquí lleva frases
—«ya es noticia · 37 art.», «de 17:00 a 18:00»— y se cortaban por la derecha (visto por Jacobo
en pantalla). El nombre también necesita más sitio porque va con su explicación debajo. */
.tar-geo-nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tar-geo-barra { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; background: var(--gris-fila); }
.tar-geo-seg { display: block; height: 100%; border-radius: 2px; }
.tar-geo-val { text-align: right; white-space: nowrap; }
.tar-rel-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.tar-rel-fila { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--borde); font-size: .8125rem; }
.tar-rel-fila:last-of-type { border-bottom: none; }
.tar-rel-q { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tar-rel-v { color: var(--texto-suave); white-space: nowrap; }
.tar-rel-v.sube { color: #006300; font-weight: 600; }
:root[data-modo="incognito-oscuro"] .tar-rel-v.sube { color: #0ca30c; }
/* --- Tanda 3: picos anotados, franja de tendencias del día y añadir ingrediente --- */
.viz-pico-num { fill: var(--viz-ink); font-size: .625rem; font-weight: 700; font-family: inherit; }
.viz-pico-linea { stroke: var(--viz-grid); stroke-width: 1; }
/* El tramo del dia EN CURSO: mismo color, discontinuo. El dato de hoy no esta cerrado. */
.viz-linea-hoy { fill: none; stroke-width: 2; stroke-dasharray: 4 4; stroke-linecap: round; }
.tar-pico-num { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--viz-ink); display: inline-flex; align-items: center; justify-content: center; font-size: .6875rem; font-weight: 700; transform: translateY(3px); }
/* Desglose de picos con SUS noticias (14/08/2026): el globo del gráfico baja hasta aquí. */
.viz-pico-hit { cursor: pointer; }
.viz-pico-hit:focus-visible { outline: 2px solid var(--acento, #2b6); outline-offset: 2px; }
.tar-pico-bloque { padding: 10px 0; border-top: 1px solid var(--linea, #e6e6e6); }
.tar-pico-bloque:first-of-type { border-top: 0; }
.tar-pico-cab { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; font-size: .825rem; }
.tar-pico-term { display: inline-flex; align-items: baseline; gap: 5px; }
.tar-pico-punto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; transform: translateY(1px); }
/* Sin viñetas: el favicon del medio ES la marca de cada línea. */
.tar-pico-lista { margin: 4px 0 10px 30px; padding: 0; list-style: none; }
.tar-pico-lista li { padding: 3px 0; font-size: .825rem; line-height: 1.45; }
.tar-pico-lista a { display: inline; }
.tar-pico-lista .tar-fav { width: 16px; height: 16px; border-radius: 3px; vertical-align: -3px; margin-right: 7px; }
.tar-pico-lista .tar-fav-vacio { display: inline-block; background: var(--linea, #e6e6e6); }
.tar-pico-term { display: flex; align-items: baseline; gap: 6px; margin: 8px 0 0 30px; font-size: .825rem; font-weight: 600; }
.tar-pico-cargando { margin: 4px 0 8px 30px; }
/* Parpadeo al llegar desde el gráfico: con cuatro bloques iguales, si no destaca el de
destino el salto parece que no ha hecho nada. */
@keyframes tar-pico-va { from { background: var(--resalte, #fff6cc); } to { background: transparent; } }
.tar-pico-va { animation: tar-pico-va 1.6s ease-out; }
@media (prefers-reduced-motion: reduce) { .tar-pico-va { animation: none; } }
/* Listado de tendencias del día: vive en la herramienta «Tendencias» (antes era una
franja plegable en la home de Radar) y se reusa en el respaldo del informe. */
.tar-tendhoy-lista { display: flex; flex-direction: column; gap: 2px; }
.tar-tendhoy-item { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--borde); font-size: .8125rem; min-width: 0; }
.tar-tendhoy-item:last-of-type { border-bottom: none; }
.tar-tendhoy-kw { font-weight: 700; white-space: nowrap; }
.tar-tendhoy-traf { flex: none; white-space: nowrap; }
.tar-tendhoy-noticia { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-suave); text-decoration: none; }
.tar-tendhoy-noticia:hover { text-decoration: underline; color: var(--texto); }
.tar-tendhoy-pie { padding-top: 6px; }
/* --- Barra de ingredientes del editor (saltar de apartado con el editor abierto) --- */
.tar-ingredientes { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 18px; }
.tar-ing { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--borde); font-size: .825rem; font-weight: 600; color: var(--texto-suave); text-decoration: none; background: none; transition: background .15s ease, color .15s ease; }
a.tar-ing:hover { background: var(--gris-fila); color: var(--texto); }
.tar-ing .tar-ico { width: 15px; height: 15px; }
.tar-ing-activo { background: var(--verde-bg, var(--gris-fila)); color: var(--texto); border-color: transparent; }
.tar-ing-anadir { border-style: dashed; }
/* --- Espera del informe de Trends: OCUPA el sitio del gráfico, no una banda discreta --- */
.tar-trends-cargando { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; min-height: 300px; padding: 30px 22px; border-radius: 14px; border: 1px dashed var(--borde); background: var(--gris-fila); }
.tar-trends-cargando b { font-size: .9375rem; }
.tar-trends-cargando .dos-meta { max-width: 460px; line-height: 1.45; }
.pa-spin-grande { width: 26px; height: 26px; border-width: 3px; }
/* --- Sugerencias de TEMA en el formulario de Trends (v15) --- */
.tar-tema-caja { position: relative; }
.tar-temas { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; display: flex; flex-direction: column; padding: 6px; border-radius: 14px; border: 1px solid var(--borde); background: var(--fondo-caja, #fff); box-shadow: 0 10px 30px rgba(0,0,0,.12); max-height: 320px; overflow-y: auto; }
.tar-tema { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: none; border-radius: 10px; background: none; cursor: pointer; font: inherit; font-size: .8375rem; color: var(--texto); text-align: left; }
.tar-tema:hover, .tar-tema.marcado { background: var(--gris-fila); }
.tar-tema .tar-ico { width: 14px; height: 14px; flex: none; color: var(--verde-solido, var(--texto-suave)); }
.tar-tema-tit { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tar-tema-tipo { margin-left: auto; padding-left: 12px; color: var(--texto-suave); font-size: .7625rem; white-space: nowrap; }
.tar-tema-libre { border-top: 1px solid var(--borde); border-radius: 0 0 10px 10px; margin-top: 4px; padding-top: 10px; }
.tar-tema-libre .tar-tema-tit { font-weight: 500; font-style: italic; }
.dos-chip-tema { display: inline-flex; align-items: center; gap: 5px; }
.dos-chip-tema .tar-ico-tema { width: 12px; height: 12px; }
.tar-chip-tipo { font-style: normal; opacity: .65; font-size: .71875rem; }
/* GOTCHA de la casa (§12 del traspaso): `.dos-campo` lleva backdrop-filter y por tanto
CREA CONTEXTO DE APILAMIENTO — un z-index alto dentro no sirve de nada frente a la
tarjeta siguiente. Hay que elevar la TARJETA ENTERA mientras el desplegable esté
abierto, que es justo para lo que existe `:has()`. */
.dos-campo:has(.tar-temas:not([hidden])) { position: relative; z-index: 40; }
.tar-temas { z-index: 41; }
/* --- Lectura de la curva: limpia, estacionalidad, previsión, desviación (v15) --- */
.viz-linea-cruda { opacity: .28; stroke-width: 1.2; }
.viz-linea-suave { stroke-width: 2.4; }
.viz-prevision { fill: none; stroke-width: 2; stroke-dasharray: 5 4; opacity: .85; }
.viz-banda { opacity: .13; stroke: none; }
.viz-corte { stroke: var(--viz-eje); stroke-width: 1; stroke-dasharray: 3 3; }
.tar-lectura-item { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-bottom: 1px solid var(--borde); font-size: .83125rem; line-height: 1.45; }
.tar-lectura-item:last-of-type { border-bottom: none; }
.tar-lectura-item b { font-size: .85rem; }
.tar-lectura-item i { opacity: .75; }
.tar-lectura-item.sube > b { color: #006300; }
.tar-lectura-item.baja > b { color: #b3261e; }
:root[data-modo="incognito-oscuro"] .tar-lectura-item.sube > b { color: #0ca30c; }
:root[data-modo="incognito-oscuro"] .tar-lectura-item.baja > b { color: #e66767; }
/* --- Widget oficial de Google para el plan Gratis (v19) --- */
.tar-embed { min-height: 320px; margin-top: 6px; }
.tar-embed iframe { width: 100% !important; border: 0; }
.tar-upsell-trends { display: flex; align-items: flex-start; gap: 14px; margin-top: 22px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--borde); background: var(--gris-fila); }
.tar-upsell-trends .tar-upsell-ico { font-size: 1.625rem; line-height: 1; flex: none; }
.tar-upsell-trends b { font-size: .875rem; }
.tar-upsell-trends p { margin: 4px 0 0; line-height: 1.45; }
.tar-upsell-trends .boton-primario { flex: none; align-self: center; }
/* --- ÍNDICE MITRA dentro del informe de una búsqueda (v21) ------------------------------
El índice propio va ARRIBA del gráfico de Trends: Trends es una fuente, Mitra es el
compuesto. Cajas sobrias para que la CIFRA sea lo primero que se lee. */
.tar-mitra-cajas { display: grid; grid-template-columns: repeat(auto-fit, minmax(14.0625rem, 1fr)); gap: 10px; }
.tar-mitra-caja { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
background: var(--fondo-suave, rgba(128, 128, 128, .07)); }
.tar-mitra-num { font-size: 1.875rem; font-weight: 700; line-height: 1; min-width: 2.4em; text-align: right; }
.tar-mitra-sello { font-size: .6875rem; font-weight: 700; padding: 1px 7px; border-radius: 999px;
background: var(--verde-sinleer, rgba(42, 160, 106, .18)); vertical-align: middle; }
/* ===== SELECTOR DE TEMÁTICAS (14/08/2026) =============================================
El interruptor «Solo temáticas» y su desplegable. Compartidos por el formulario de
Trends del Radar y por el buscador de la herramienta Tendencias: una sola mecánica. */
.tar-switch-temas {
display: flex; align-items: flex-start; gap: .515625rem; margin-bottom: .65625rem;
cursor: pointer; user-select: none; line-height: 1.35;
}
.tar-switch-temas input { position: absolute; opacity: 0; width: 0; height: 0; }
/* La pastilla del interruptor: se ve de un vistazo en cuál de los dos modos estás. */
.tar-switch-temas .tar-switch-pista {
flex: 0 0 auto; width: 34px; height: 20px; border-radius: 999px; margin-top: 1px;
background: var(--gris-fila, rgba(128,128,128,.3));
border: 1px solid var(--lg-borde, rgba(0,0,0,.12));
position: relative; transition: background .18s;
}
.tar-switch-temas .tar-switch-pista::after {
content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
transition: transform .18s;
}
.tar-switch-temas input:checked + .tar-switch-pista { background: var(--verde, #2f7d5a); }
.tar-switch-temas input:checked + .tar-switch-pista::after { transform: translateX(14px); }
.tar-switch-temas input:focus-visible + .tar-switch-pista { outline: 2px solid var(--verde, #2f7d5a); outline-offset: 2px; }
/* El desplegable de la herramienta Tendencias. Va ANCLADO ARRIBA del campo porque en esa
pantalla el buscador tiene contenido justo debajo y taparlo escondería el propio resultado. */
.tar-temas-caja {
position: absolute; left: 0; right: 0; bottom: calc(100% + .375rem); z-index: 60;
max-height: 15.9375rem; overflow-y: auto; padding: .28125rem;
border-radius: .5625rem; background: var(--lg-panel-solido, #fff);
border: 1px solid var(--lg-borde, rgba(0,0,0,.12));
box-shadow: var(--lg-sombra, 0 8px 24px rgba(0,0,0,.12));
}
/* ⚠ EL DESPLEGABLE DEL BUSCADOR DE MITRA SE ABRE HACIA ABAJO (31/08/2026).
`.tar-temas-caja` se abre hacia ARRIBA (`bottom: 100%`), y ahí tiene su razón: en el editor de
una búsqueda del Radar el campo está al final de un formulario largo, así que abrir hacia abajo
lo sacaría de la pantalla. En Mitra pasa lo contrario — la barra es ahora lo primero de la
página— y abrir hacia arriba lo mandaba FUERA POR ENCIMA: medido, la lista empezaba en y=-3 px
con la primera sugerencia clipada.
Ese era el fallo que Jacobo describió como «escribo abascal y no sale nada». Salía: Santiago
Abascal era el primero de la lista, pero la lista estaba fuera de la ventana. */
.tar-mitra-campo .tar-temas-caja {
top: calc(100% + .375rem); bottom: auto;
/* OPACO. `--lg-panel-solido` es translúcido a propósito para el vidrio de la interfaz, pero
aquí debajo hay texto —el ranking del índice— y se leía a través de las sugerencias. */
background: var(--superficie);
}
.tar-temas-caja .tar-tema-vacio { padding: .515625rem .65625rem; }
/* El modo de búsqueda es UNA herramienta: el interruptor y su opción dependiente van juntos
y con la misma sangría, para que se lea como un bloque y no como dos ajustes sueltos. */
.tar-modo-busqueda { margin-bottom: .65625rem; }
.tar-modo-busqueda .tar-switch-temas { margin-bottom: 0; }
/* Bandera de cada comunidad en el reparto territorial (14/08/2026). Se ata a la ALTURA DE LA
TIPOGRAFÍA (1em) y no a un tamaño fijo: el requisito de Jacobo es que no sobresalga del texto
del nombre, y con píxeles fijos dejaría de cumplirse en cuanto cambie el cuerpo de letra. */
.tar-geo-nombre { display: inline-flex; align-items: center; gap: .375rem; }
.tar-geo-flag {
height: 1em; width: auto; max-width: 1.5em; flex: none;
border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}
/* EL MISMO AVISO, OTRO TONO SEGÚN EL ENTORNO (18/08/2026).
En la maqueta es una alarma: el servidor se quedó desfasado y hay que reiniciarlo, así que va
en rojo. En PRODUCCIÓN es una novedad —acabamos de desplegar y tu pestaña tiene la versión de
antes—, se arregla recargando y no hay nada roto. Pintarlo de rojo asustaba sin motivo. */
.tar-aviso-nueva {
background: rgba(31, 111, 74, 0.95);
box-shadow: 0 8px 30px rgba(20, 80, 55, 0.35);
}
.tar-aviso-nueva button { color: #17553a; }
.tar-aviso-nueva button:hover { background: #eaf6ef; }
/* FECHA ESTIMADA (26/08/2026): el medio no publica la fecha en ninguna parte y la que se enseña
es la primera vez que vimos el artículo. Se marca en punteado —no en rojo— porque no es un
error ni una advertencia: es un dato menos firme, y el usuario tiene que poder distinguirlo
de una fecha publicada por el medio sin que le chille. */
.dos-fecha-est { border-bottom: 1px dotted currentColor; cursor: help; opacity: .85; }
/* ═══════════ ÍNDICE MITRA UNIFICADO Y MAPA POR COMUNIDADES (28/08/2026) ═══════════
Encargo de Jacobo: un solo listado de temáticas calientes y un mapa clicable con el
ranking de cada comunidad. Todo con los tokens del proyecto, así que hereda el modo
oscuro y el incógnito sin una sola regla propia de color de fondo. */
.tar-ix-cab { display: flex; align-items: baseline; gap: .5625rem; flex-wrap: wrap; margin-bottom: .328125rem; }
/* ═══════════ PUBLICACIONES QUE ESTÁ CITANDO LA PRENSA (08/09/2026) ═══════════
Encargo de Jacobo: un ranking de posts «y al lado en cuántas noticias ha sido insertado el
post», con los medios donde aparece y enlace a cada uno.
TRES DECISIONES DE FORMA, y las tres tienen motivo:
· LA CIFRA VA A LA IZQUIERDA Y GRANDE. Es de lo que va la tabla —cuántas noticias— y si se
pone al final, en una fila con dos clases de enlace, deja de leerse. Se alinea a la derecha
dentro de su hueco para que 2 y 12 caigan en la misma columna: un ranking en el que las
cifras bailan no se puede recorrer con la vista.
· EL TITULAR LLEVA AL POST Y CADA MEDIO A SU NOTICIA. Son dos destinos distintos en la misma
fila, así que se distinguen a la vista: el post es el bloque principal, y los medios son
pastillas pequeñas debajo. Si se parecieran, el usuario no sabría dónde va a acabar.
· LOS COLORES SALEN DE LOS TOKENS. Ni un color propio: así hereda el modo oscuro y el
incógnito sin una sola regla de más, igual que el resto del índice. */
.pp-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .421875rem; }
/* ═══════════ EL MATERIAL ES EL DE LA CASA: LIQUID GLASS (Jacobo, 08/09/2026) ═══════════
«El diseño debe ser liquid glass, recuerda y adáptalo.» Tenía razón: esto había salido con
`--superficie-2` y bordes planos, que es de otro sistema. Ahora usa las recetas de `liquid.css`
—vidrio, canto de luz y sombra difusa— así que hereda el modo oscuro y el incógnito sin una sola
regla de color propia, igual que el resto de la aplicación.
Y con la jerarquía del material bien puesta, que es lo que hace que el vidrio se lea:
· la FILA es una superficie grande → vidrio de panel, con su filo de luz en el canto;
· las PASTILLAS de medio son controles pequeños → vidrio de control, sin filo (en algo de
veinte píxeles un filo se lee como bisel de plástico, no como canto de cristal);
· y el icono de la red NO lleva vidrio: es una marca, y su color es su identidad. */
.pp-fila {
display: grid; grid-template-columns: 1.40625rem 26px 1fr; align-items: start; gap: .5625rem;
padding: .65625rem .703125rem; border-radius: 14px; position: relative;
backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
-webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
background: var(--lg-vidrio);
border: 1px solid var(--lg-borde);
box-shadow: var(--lg-sombra);
transition: background .14s ease, box-shadow .14s ease, transform .14s ease;
}
/* El filo de luz del canto, en superficies grandes: es lo que convierte un rectángulo translúcido
en una lámina de cristal. Va en un pseudoelemento para no pelearse con el borde. */
.pp-fila::before {
content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
box-shadow: inset 0 1px 0 var(--lg-rim), inset 0 -1px 0 var(--lg-rim-suave);
}
.pp-fila:hover {
background: var(--lg-vidrio-denso);
box-shadow: var(--lg-sombra-alta);
transform: translateY(-1px);
}
.pp-pos {
font-size: .9375rem; font-weight: 700; color: var(--texto-suave);
text-align: right; font-variant-numeric: tabular-nums; padding-top: .1125rem;
}
/* El logo de la red: color de marca, sin vidrio. Es un enlace — pinchar el icono lleva al post,
igual que pinchar el título, que es lo que la gente intenta. */
.pp-red {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 9px; flex: none; margin-top: .046875rem;
box-shadow: var(--lg-sombra-control);
}
.pp-red svg { width: 15px; height: 15px; display: block; }
.pp-cuerpo { display: flex; flex-direction: column; gap: .234375rem; min-width: 0; }
.pp-post { display: flex; align-items: baseline; gap: .46875rem; text-decoration: none; color: inherit; min-width: 0; }
.pp-post:hover .pp-titulo { text-decoration: underline; }
/* EL TÍTULO ES LO QUE SE LEE. Dos líneas como mucho: un tuit largo entero convertiría el ranking en
un muro de texto y dejaría de poder recorrerse con la vista. Aquí ya no llega nada sin título
(Jacobo: «no lo coloques si no tienes el título y todo»). */
.pp-titulo {
font-weight: 600; font-size: .90625rem; line-height: 1.3; color: var(--texto);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
min-width: 0;
}
.pp-ver { font-size: .71875rem; color: var(--verde-texto, var(--texto-suave)); white-space: nowrap; flex: none; }
.pp-autor { font-size: .78125rem; color: var(--texto-suave); }
/* ── «Aparece en…» ── con el favicon de cada medio enlazando a SU noticia. */
.pp-aparece { display: flex; align-items: center; gap: .421875rem; flex-wrap: wrap; margin-top: .1125rem; }
.pp-aparece-eti {
font-size: .625rem; letter-spacing: .03em; text-transform: uppercase;
color: var(--texto-suave); flex: none;
}
.pp-medios { display: flex; flex-wrap: wrap; gap: .28125rem; }
/* Vidrio de CONTROL: la misma receta que los botones pequeños de la aplicación, sin filo de luz. */
.pp-medio {
display: inline-flex; align-items: center; gap: .3rem;
font-size: .75rem; padding: .1875rem .46875rem .1875rem .2625rem; border-radius: 999px;
text-decoration: none; color: var(--texto-suave); max-width: 12.1875rem;
backdrop-filter: blur(10px) saturate(1.35);
-webkit-backdrop-filter: blur(10px) saturate(1.35);
background: var(--lg-vidrio);
border: 1px solid var(--lg-borde);
box-shadow: var(--lg-sombra-control);
transition: background .12s ease, color .12s ease;
}
a.pp-medio:hover { color: var(--texto); background: var(--lg-vidrio-denso); }
.pp-medio-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* El «×3» dice que ESE medio lo insertó en tres piezas distintas. No suma audiencia —la de un medio
no se duplica porque publique dos veces— pero sí dice que le ha dado recorrido. */
.pp-medio-x { font-style: normal; font-size: .65625rem; opacity: .7; flex: none; }
/* El favicon, por nuestro proxy. Con fondo blanco propio: muchos son PNG con transparencia pensados
para fondo claro, y sobre vidrio oscuro se perderían. */
.pp-fav {
width: 17px; height: 17px; flex: none; border-radius: 5px; object-fit: contain;
background: #fff; padding: 1px;
}
.pp-fav-sin { width: 17px; height: 17px; flex: none; border-radius: 5px; border: 1px dashed var(--lg-borde); }
@media (max-width: 560px) {
/* En móvil se va el puesto —el orden ya se ve— y quedan el logo y el post. */
.pp-fila { grid-template-columns: 26px 1fr; padding: .609375rem .5625rem; }
.pp-pos { display: none; }
.pp-post { flex-wrap: wrap; }
.pp-medio { max-width: 8.90625rem; }
.pp-aparece-eti { display: none; }
}
/* Sin transiciones para quien las ha pedido apagadas: el material no puede saltarse esa preferencia. */
@media (prefers-reduced-motion: reduce) {
.pp-fila, .pp-medio { transition: none; }
.pp-fila:hover { transform: none; }
}
/* --- EL MAPA A LA IZQUIERDA Y LA LISTA A LA DERECHA (Jacobo, 02/09/2026) ---
«El mapa de España debe salir a la izquierda en desktop de la lista de temáticas, para que
cuando seleccionemos una temática de la lista (derecha) podamos ver cómo el mapa cambia de
colores.» Antes eran dos tarjetas apiladas: había que bajar para ver el efecto de lo que
acababas de pinchar, así que el efecto no se veía.
En MÓVIL el mapa va ENCIMA de la tabla (Jacobo, 02/09): «en móvil el mapa iría arriba de la
tabla». Es lo contrario de lo que se hizo por la mañana, y tiene sentido: en una pantalla
estrecha la lista es larguísima, y si va primera el mapa no se ve nunca. */
.tar-ix-doble { display: grid; grid-template-columns: minmax(300px, 42%) 1fr; gap: 1.3125rem; align-items: start; }
.tar-ix-mapa-col { position: sticky; top: .9375rem; min-width: 0; }
.tar-ix-lista-col { min-width: 0; }
@media (max-width: 900px) {
.tar-ix-doble { grid-template-columns: 1fr; gap: .9375rem; }
.tar-ix-mapa-col { position: static; }
}
/* LA LISTA SE CORTA A LA ALTURA DEL MAPA (Jacobo, 02/09/2026): «la lista de términos comparte
rectángulo con el mapa a la izquierda, la lista queda cortada a la altura de abajo del mapa y
se scrollea sin descuadrar el mapa».
El alto NO está escrito aquí: lo mide el navegador sobre la columna del mapa y lo escribe en
`--ix-alto` (ver `ajustarAltoLista` en radar.js). Un valor fijo se descuadraría en cuanto
cambiara el ancho de la ventana o apareciesen las pestañas de comparación encima del mapa. */
.tar-ix-scroll {
max-height: var(--ix-alto, 30rem); overflow-y: auto; overscroll-behavior: contain;
padding-right: .421875rem; scrollbar-width: thin;
}
@media (max-width: 900px) { .tar-ix-scroll { max-height: 24.375rem; } }
/* --- LA FILA: EL PUESTO, EL TÉRMINO Y LA FLECHA, Y NADA MÁS (Jacobo, 02/09/2026) ---
«En el índice nacional no debe haber nada más que los términos y el número que ocupan en el
ranking. Ponle una flecha hacia arriba donde al menos 3 fuentes estén alimentando y aupando el
término.» Se fueron los alias, el titular de ejemplo, las cifras, las etiquetas de fuente y la
pastilla de estado. */
.tar-ix-item {
display: flex; align-items: center; gap: .65625rem; padding: .46875rem .515625rem; width: 100%;
border: 0; border-bottom: 1px solid var(--linea); background: transparent; color: inherit;
font: inherit; text-align: left; border-radius: .421875rem; cursor: pointer;
transition: background .14s ease;
}
.tar-ix-item:hover, .tar-ix-item:focus-visible { background: var(--gris-fila); }
.tar-ix-item:last-child { border-bottom: none; }
.tar-ix-pos { min-width: 1.5rem; text-align: right; color: var(--texto-suave); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.tar-ix-tema { font-weight: 600; font-size: .9375rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* La temática que se está viendo, marcada: al pinchar una se lanza su búsqueda y la lista tiene
que decir cuál. Es el ÚNICO estado de la lista. */
.tar-ix-item-sel { background: var(--verde-bg); }
.tar-ix-item-sel .tar-ix-tema { color: var(--verde-texto-2); }
/* La flecha del auge: tres fuentes o más viéndola a la vez. No dice CUÁLES —eso sería la receta—,
solo que coinciden, que es la fuerza del índice. */
/* CON CUERPO, NO UN TRAZO (Jacobo, 03/09/2026): «la flecha de tendencia debe ser más vistosa, en
línea con nuestro diseño gráfico, con más cuerpo». Era un chevrón de línea de 13 px que se
perdía al lado del nombre. Ahora es la misma familia que los iconos del panel —cuerpo macizo
claro y contorno marcado— dentro de una pastilla, que es como se marca lo destacado en el
resto de la interfaz. */
.tar-ix-auge {
color: var(--verde-oscuro); display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 auto; width: 18px; height: 18px;
}
html[data-modo="incognito"] .tar-ix-auge { color: var(--texto); }
/* ⚠ AQUÍ ESTABAN `.tar-ix-fuentes` y `.tar-ix-f`, las etiquetas que decían qué fuente había visto
cada temática. Retiradas el 02/09/2026 (Jacobo): «no desvelemos en el índice unificado de dónde
vienen las puntuaciones, tan solo se proporciona el ranking listado de las temáticas».
Y con ellas se fueron `.tar-ix-detalle`, `.tar-ix-barras`, `.tar-ix-serie` y `.tar-ix-estado`:
el desplegable de la temática ya no existe, ahora al pinchar se lanza la búsqueda entera. */
/* El panel de «qué busca la gente»: la marca de pregunta y lo que coincide en varios buscadores. */
.tar-ix-chip {
font: inherit; font-size: .78125rem; padding: .140625rem .515625rem; border-radius: 999px; cursor: pointer;
border: 1px solid var(--linea); background: transparent; color: inherit;
}
.tar-ix-chip:hover { background: var(--verde-bg); border-color: var(--verde-oscuro); }
/* --- El mapa --- */
.tar-mapa-caja { flex: 1 1 340px; min-width: 280px; }
.tar-mapa-svg { width: 100%; height: auto; display: block; }
.tar-mapa-r {
/* El contorno va con el color de las LÍNEAS, no con el del fondo. Con el del fondo, el mapa en
blanco —que es su estado por defecto— quedaba casi invisible: se veía una mancha clara sin
comunidades y no invitaba a pinchar nada. Con la línea del tema se leen las diecinueve
estén pintadas o no. */
stroke: var(--linea); stroke-width: 1.4; stroke-linejoin: round;
cursor: pointer; transition: filter .12s ease, stroke .12s ease;
}
/* ⚠ CEUTA Y MELILLA NECESITAN BORDE PROPIO. El resto de comunidades se separan entre sí con un
trazo del color del fondo, que basta porque están pegadas unas a otras. Los dos círculos están
solos en el mar: con ese mismo trazo blanco y sin temática elegida (relleno también claro)
desaparecían del mapa. Llevan el borde de las líneas del tema, así que se ven siempre. */
circle.tar-mapa-r { stroke: var(--linea); stroke-width: 1.5; }
.tar-mapa-r:hover { filter: brightness(1.12); }
.tar-mapa-r:focus-visible { outline: 2px solid var(--verde-oscuro); outline-offset: 2px; }
/* LA REGIÓN PINCHADA, EN BRONCE (Jacobo, 03/09/2026): «cuando pinche sobre una región, esta se
debe colorear de ese bronce/dorado que usamos como color destacado». Antes solo se le engordaba
el borde en color de texto, y sobre un mapa ya coloreado por intensidad eso casi no se veía.
El relleno lleva !important porque compite con las clases de intensidad tar-mapa-t1..t5, que
se escriben en el mismo elemento. */
.tar-mapa-sel { fill: var(--tarsis-oro-logo, #A5702C) !important; stroke: var(--tarsis-oro-logo, #A5702C); stroke-width: 3; }
html[data-modo="incognito-oscuro"] .tar-mapa-sel { fill: var(--tarsis-oro-claro, #E8C966) !important; stroke: var(--tarsis-oro-claro, #E8C966); }
/* Escala secuencial de UN SOLO TONO, de claro a oscuro. Nada de rojo-verde: es ilegible para
cerca del 8 % de los hombres, y aquí el dato es ordinal, no bueno-malo. */
.tar-mapa-t0 { fill: var(--gris-fila); }
/* LA ESCALA DEL MAPA TOMA EL COLOR DE SU TEMÁTICA (Jacobo, 02/09/2026): «si Abascal es verde en
la comparación, las tonalidades serán en intensidad de verdes en el mapa». El JS escribe
--mapa-t1..t5 en el propio SVG mezclando el color de su línea con blanco; si no las escribe
—o el navegador no entiende color-mix— quedan los cianes de siempre. */
.tar-mapa-t1 { fill: var(--mapa-t1, #C7EBF0); }
.tar-mapa-t2 { fill: var(--mapa-t2, #94D7E1); }
.tar-mapa-t3 { fill: var(--mapa-t3, #60C0CF); }
.tar-mapa-t4 { fill: var(--mapa-t4, #0DB8D2); }
.tar-mapa-t5 { fill: var(--mapa-t5, #087889); }
@media (max-width: 720px) {
.tar-ix-item { flex-wrap: wrap; }
}
/* El mapa en los dos modos incógnito. El CLARO no lleva verdes de marca —esa es toda su
razón de ser— así que la escala pasa a grises; el OSCURO conserva la escala pero
apagada, porque sobre fondo negro los verdes vivos deslumbran y el tramo más claro
se convierte en el más llamativo, justo al revés de lo que la escala quiere decir. */
html[data-modo="incognito"] .tar-mapa-t1, html[data-modo="incognito"] .tar-mapa-leyenda i.tar-mapa-t1 { fill: #e4e4e4; background: #e4e4e4; }
html[data-modo="incognito"] .tar-mapa-t2, html[data-modo="incognito"] .tar-mapa-leyenda i.tar-mapa-t2 { fill: #c4c4c4; background: #c4c4c4; }
html[data-modo="incognito"] .tar-mapa-t3, html[data-modo="incognito"] .tar-mapa-leyenda i.tar-mapa-t3 { fill: #9a9a9a; background: #9a9a9a; }
html[data-modo="incognito"] .tar-mapa-t4, html[data-modo="incognito"] .tar-mapa-leyenda i.tar-mapa-t4 { fill: #6e6e6e; background: #6e6e6e; }
html[data-modo="incognito"] .tar-mapa-t5, html[data-modo="incognito"] .tar-mapa-leyenda i.tar-mapa-t5 { fill: #3f3f3f; background: #3f3f3f; }
html[data-modo="incognito-oscuro"] .tar-mapa-t1, html[data-modo="incognito-oscuro"] .tar-mapa-leyenda i.tar-mapa-t1 { fill: #10303C; background: #10303C; }
html[data-modo="incognito-oscuro"] .tar-mapa-t2, html[data-modo="incognito-oscuro"] .tar-mapa-leyenda i.tar-mapa-t2 { fill: #154557; background: #154557; }
html[data-modo="incognito-oscuro"] .tar-mapa-t3, html[data-modo="incognito-oscuro"] .tar-mapa-leyenda i.tar-mapa-t3 { fill: #1A6076; background: #1A6076; }
html[data-modo="incognito-oscuro"] .tar-mapa-t4, html[data-modo="incognito-oscuro"] .tar-mapa-leyenda i.tar-mapa-t4 { fill: #1F8AA6; background: #1F8AA6; }
html[data-modo="incognito-oscuro"] .tar-mapa-t5, html[data-modo="incognito-oscuro"] .tar-mapa-leyenda i.tar-mapa-t5 { fill: #2FC6E0; background: #2FC6E0; }
html[data-modo="incognito-oscuro"] .tar-mapa-t0 { fill: #23252a; }
/* --- El mapa: pestañas de comparación, círculos de Ceuta y Melilla, y recuadro canario --- */
.tar-mapa-tabs { display: flex; gap: .328125rem; flex-wrap: wrap; margin: .28125rem 0 .46875rem; }
.tar-mapa-tab {
font: inherit; font-size: .8125rem; padding: .234375rem .65625rem; border-radius: 999px; cursor: pointer;
border: 1px solid var(--linea); background: transparent; color: inherit;
}
.tar-mapa-tab:hover { background: var(--gris-fila); }
.tar-mapa-tab-sel { background: var(--verde-bg); border-color: var(--verde-oscuro); color: var(--verde-texto-2); font-weight: 600; }
/* Nombre al lado de Ceuta y Melilla: dos círculos sueltos en el mar no se identifican. */
.tar-mapa-et { font-size: .9375rem; fill: var(--texto-suave); }
/* El recuadro que encierra Canarias, para que se lea como lo que es: un inserto, no una isla
que esté ahí de verdad. */
.tar-mapa-marco { fill: none; stroke: var(--linea); stroke-width: 1.5; stroke-dasharray: 5 4; }
/* Sin temática elegida el mapa está EN BLANCO (Jacobo, 29/08): un mapa pintado sin que nadie
haya preguntado nada no dice qué está midiendo. «En blanco» es neutro y visible, no invisible. */
.tar-mapa-t0 { fill: var(--gris-fila); }
.tar-mapa-r:hover { stroke: var(--verde-oscuro); stroke-width: 2; }
html[data-modo="incognito-oscuro"] .tar-mapa-et { fill: #9aa0a6; }
/* ═══════════ MITRA: EL BUSCADOR COMO PROTAGONISTA (31/08/2026) ═══════════ */
/* LAS PASTILLAS NUNCA SE TOCAN (Jacobo, 31/08). `.dos-campo` no tenía NINGÚN margen: si el
contenedor no ponía separación, quedaban pegadas borde con borde — y así estaban «Solo
temáticas» e «Índice Mitra». El margen va en la propia pastilla y no en el contenedor, que es
lo que garantiza que se cumpla en cualquier pantalla y no solo donde alguien se acordó. */
.dos-campo { margin-bottom: 1.03125rem; }
.dos-campo:last-child { margin-bottom: 0; }
/* --- La zona del buscador. NO es una pastilla a propósito: una pastilla lo convertiría en un
formulario más, y aquí es lo primero que el usuario tiene que ver. --- */
/* Las dos medidas de las que depende todo el encuadre. El corte de abajo de la marca se
CALCULA con ellas (ver .tar-mitra-marca), así que tocar una no descuadra la otra. */
.tar-mitra-hero {
--mitra-subida: 1.3125rem; /* cuánto asoma la figura por encima del hueco */
--mitra-hueco: 12.09375rem; /* del tope del bloque al renglón de las temáticas elegidas */
/* EL RENGLÓN DE LAS TEMÁTICAS SIEMPRE OCUPA LO MISMO (Jacobo, 02/09/2026): «cuando se pintan
temáticas o términos encima del cuadro de búsqueda se desplaza la imagen de fondo de Mitra y
deja un espacio en blanco entre la imagen que se corta y el cuadro de texto; nada se debe
mover ahí».
La causa: la marca de agua se corta a una distancia FIJA del tope del bloque, y los chips
empujaban la barra hacia abajo — así que el corte se quedaba arriba y aparecía la franja
blanca. Reservando su altura siempre, poner o quitar temáticas no mueve nada. Y la reserva
entra en el cálculo del corte, así que las dos medidas siguen cuadrando solas. */
--mitra-chips: 2.625rem;
position: relative; margin: .46875rem 0 1.3125rem; padding-top: var(--mitra-hueco);
}
/* LA MARCA DE AGUA. Detrás de la barra, centrada, cortada por abajo justo donde empieza el campo
y desvanecida a los lados. Es la figura de Mitra en neón sobre negro, así que:
· en claro se INVIERTE (fondo negro → blanco) y se multiplica: el blanco desaparece contra
la página y quedan los trazos en gris;
· en oscuro basta con `screen`, que hace desaparecer el negro y deja los trazos.
En los dos casos va en escala de grises: es una marca de agua, no una ilustración. */
.tar-mitra-marca {
position: absolute; left: 50%; transform: translateX(-50%);
/* `top` NEGATIVO: sube la silueta ENTERA. Se mueve la caja, no el encuadre, así que la
figura conserva su proporción y solo cambia dónde se apoya. El tope lo pone la barra de
navegación: por encima de unos -2.8125rem el gorro se le mete debajo. */
top: calc(var(--mitra-subida) * -1); width: min(760px, 108%); aspect-ratio: 1100 / 648;
/* `center -7%`: la imagen SUBE. Su 7 % superior es fondo negro por encima del gorro, así que
desplazarla hacia arriba no recorta nada de la figura y sube la cara — que es lo que hacía
falta: con la posición en `top` la barra de búsqueda le tapaba la boca y la barbilla. */
background: url('/img/mitra-marca.jpg?v=858ad92dcf') center -7% / cover no-repeat;
/* El zoom entra por aquí: se recorta la parte de abajo de la figura, que es la que sobra. */
/* SUBE LA FIGURA para que se le vean los OJOS por encima de la barra (Jacobo, 31/08). Antes
la cara quedaba justo detrás del campo y solo asomaban el gorro y la frente. */
background-size: 88% auto;
filter: grayscale(1) invert(1) contrast(1.1);
mix-blend-mode: multiply;
opacity: .2;
pointer-events: none;
/* Se desvanece a los lados y abajo se CORTA EN SECO (Jacobo, 31/08): por debajo de la barra
de búsqueda no se ve nada de la figura. El punto de corte no está a ojo — es la distancia
exacta del tope de la caja al tope del campo: la subida + el hueco + el margen del renglón
de los chips. Dos paradas en el mismo sitio = borde recto, sin degradado. */
--mitra-corte: calc(var(--mitra-subida) + var(--mitra-hueco) + var(--mitra-chips) + .46875rem);
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 78%, transparent 100%),
linear-gradient(to bottom, #000 var(--mitra-corte), transparent var(--mitra-corte));
-webkit-mask-composite: source-in;
mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 78%, transparent 100%),
linear-gradient(to bottom, #000 var(--mitra-corte), transparent var(--mitra-corte));
mask-composite: intersect;
}
html[data-modo="incognito-oscuro"] .tar-mitra-marca {
filter: grayscale(1) contrast(1.2); mix-blend-mode: screen; opacity: .3;
}
.tar-mitra-buscar { position: relative; z-index: 1; max-width: 43.125rem; margin: 0 auto; }
/* Altura reservada SIEMPRE y sin envolver: añadir o quitar una temática no puede mover la barra
de búsqueda ni descuadrar el corte de la marca de agua (ver `.tar-mitra-hero`). Con muchas, se
desplazan a lo ancho en vez de crecer hacia abajo. */
.tar-mitra-chips {
display: flex; flex-wrap: nowrap; gap: .375rem; margin-bottom: .46875rem; justify-content: center;
/* ALTO FIJO, no min-height (02/09/2026, tarde). Con min-height la fila SI crecia: un chip
mide 29,75 px pero la fila con chip medía 39,75 —la barra de desplazamiento fina se reserva
sus 10 px— y esos 8 px de diferencia empujaban el campo y volvian a abrir la franja blanca
bajo la marca de agua. Con alto fijo, poner o quitar temáticas no mueve NADA. */
height: var(--mitra-chips, 2.625rem); align-items: center;
overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
}
.tar-mitra-chips > * { flex: 0 0 auto; }
.tar-mitra-campo { position: relative; }
.tar-mitra-campo input {
width: 100%; padding: .796875rem 1.03125rem; font: inherit; font-size: 1.0625rem;
border-radius: 999px; border: 1px solid var(--linea); color: inherit;
background: var(--superficie);
box-shadow: var(--lg-sombra, 0 1px 2px rgba(20,30,20,.06), 0 8px 24px rgba(20,30,20,.09));
transition: border-color .14s ease, box-shadow .14s ease;
}
.tar-mitra-campo input:focus {
outline: none; border-color: var(--verde-oscuro);
box-shadow: 0 0 0 3px rgba(24,215,244,.32), var(--lg-sombra, 0 8px 24px rgba(20,30,20,.09));
}
.tar-mitra-controles {
/* `center` y no `baseline`: el interruptor y el desplegable de periodo tienen alturas distintas
y con la línea base uno quedaba más arriba que el otro (Jacobo, 31/08). */
display: flex; align-items: center; justify-content: center; gap: .75rem;
flex-wrap: wrap; margin-top: .75rem;
}
/* El interruptor arrastraba su propio margen inferior de cuando vivía en un formulario, y eso lo
descolocaba respecto al periodo. Aquí va en una fila, así que sin márgenes propios. */
.tar-mitra-controles .tar-modo-busqueda { margin: 0; display: flex; align-items: center; }
.tar-mitra-periodo { display: inline-flex; align-items: center; }
.tar-mitra-periodo select, .tar-mitra-fechas input {
margin-left: .328125rem; padding: .3rem .46875rem; border-radius: .421875rem;
/* FONDO SÓLIDO: transparente, la marca de agua se leía a través del desplegable. */
background: var(--superficie); color: inherit;
border: 1px solid var(--linea); font: inherit; font-size: .8125rem;
}
.tar-mitra-fechas { display: inline-flex; gap: .28125rem; }
/* ⚠ `display` GANA AL ATRIBUTO `hidden`. Con `inline-flex` puesto, las dos fechas se veían
siempre —también con «Hoy», que es el valor por defecto— porque el `display:none` que trae
`[hidden]` del navegador tiene menos peso que una clase. Hay que apagarlo a mano. */
.tar-mitra-fechas[hidden] { display: none; }
/* Sin `min-height`: vacío no ocupa (fuera la frase «Hasta 5 temáticas a la vez», Jacobo 31/08).
Sigue existiendo para los avisos del selector; solo aparece cuando tiene algo que decir. */
.tar-mitra-pista { text-align: center; margin-top: .46875rem; }
.tar-mitra-pista:empty { display: none; }
/* EL INTERRUPTOR NO SE APAGA, CAMBIA DE OPCIÓN (Jacobo, 31/08): «cuando cambiamos el selector a
términos de búsqueda, en vez de volverse gris cambia de color, que no parezca que hemos
desactivado algo». Verde = temáticas; BRONCE = términos. Ninguno de los dos es gris.
El bronce es el del logo (Jacobo, 03/09/2026: «el selector de término debe tener el color
bronce/oro que usamos en el logo»), el mismo `--tarsis-oro-logo` de los iconos del panel y de
la pastilla del plan Bronce: era azul, un color que la marca no usa en ninguna otra parte.
La pastilla lleva el bronce oscuro en los dos modos —el tirador es blanco y necesita fondo
oscuro debajo—; lo que se aclara en oscuro es el TEXTO, que ahí sí manda el contraste. */
.tar-modo-libre .tar-switch-pista { background: var(--tarsis-oro-logo, #A5702C) !important; border-color: var(--tarsis-oro-logo, #A5702C) !important; }
.tar-modo-libre .tar-switch-temas b { color: var(--tarsis-oro-logo, #A5702C); }
.tar-modo-libre .tar-switch-temas input:focus-visible + .tar-switch-pista { outline-color: var(--tarsis-oro-logo, #A5702C); }
html[data-modo="incognito-oscuro"] .tar-modo-libre .tar-switch-temas b { color: var(--tarsis-oro-claro, #E8C966); }
/* ═══════════ EL AVISO DE QUE ESTÁ BUSCANDO (Jacobo, 02/09/2026) ═══════════
«Tengo que ver que estoy lanzando una búsqueda, que se quede un aviso con una animación de
carga debajo del buscador para yo saber cómo va, con un porcentaje y una animación. Al cien
por cien recarga la página.»
El brillo que recorre la barra NO es decoración: el porcentaje avanza a saltos —hay tramos que
tardan segundos— y sin movimiento continuo un tramo lento se lee como un cuelgue. */
.tar-mitra-cargando { max-width: 43.125rem; margin: .84375rem auto 0; }
.tar-carga-barra { height: 6px; border-radius: 999px; background: var(--gris-fila); overflow: hidden; }
.tar-carga-barra i {
display: block; height: 100%; width: 0; border-radius: 999px; position: relative; overflow: hidden;
background: linear-gradient(90deg, var(--verde-oscuro), #0DB8D2);
transition: width .5s cubic-bezier(.4, 0, .2, 1);
}
.tar-carga-barra i::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
animation: tar-carga-brillo 1.2s linear infinite;
}
@keyframes tar-carga-brillo { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .tar-carga-barra i::after { animation: none; } }
.tar-mitra-cargando p { display: flex; justify-content: space-between; gap: .5625rem; margin: .328125rem 0 0; }
.tar-mitra-cargando b { font-variant-numeric: tabular-nums; }
/* ═══════════ LAS TARJETAS DE PUNTUACIÓN, ENCIMA DEL GRÁFICO (Jacobo, 02/09/2026) ═══════════
«Solo con el nombre y la puntuación, sin el borde del lateral izquierdo pintado y sí con el
fondo de la pastilla pintado de forma tenue de su color.»
El color se pasa en `--c` desde el JS —es el mismo de su línea en la curva— y aquí se usa dos
veces: el fondo al 10 % (`color-mix`) y la cifra a plena tinta. Así la tarjeta y la línea se
reconocen como la misma cosa sin necesidad de leyenda. */
.tar-mitra-marcador { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.1875rem, 1fr)); gap: .65625rem; margin-bottom: .9375rem; }
.tar-mitra-tarjeta {
display: flex; align-items: baseline; gap: .65625rem; padding: .65625rem .84375rem; border-radius: .65625rem;
background: color-mix(in srgb, var(--c) 10%, transparent);
flex-wrap: wrap;
}
.tar-mitra-nombre { font-weight: 600; font-size: .9375rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tar-mitra-cifra { font-size: 1.875rem; font-weight: 700; line-height: 1; color: var(--c); font-variant-numeric: tabular-nums; }
.tar-mitra-alts { flex: 1 0 100%; display: flex; gap: .28125rem; flex-wrap: wrap; }
/* Los dos modos incógnito no tienen color de marca, así que la tarjeta se apoya en la línea. */
html[data-modo="incognito"] .tar-mitra-tarjeta { background: var(--gris-fila); }
html[data-modo="incognito"] .tar-mitra-cifra { color: inherit; }
/* ═══════════ LA CURVA: A TODO EL ANCHO Y CON LECTURA AL PASAR EL RATÓN ═══════════
«El gráfico debe ocupar todo el ancho de la pastilla», y «al poner el ratón encima debe salir
una línea vertical con el valor de 0 a 100 de cada temática en ese momento, como hace Google
Trends». El globo se coloca por JS a la altura de la hora señalada. */
.tar-curva { position: relative; width: 100%; }
.tar-curva svg { cursor: crosshair; }
.tar-curva-guia { stroke: var(--texto); transition: opacity .1s ease; }
.tar-curva-globo {
position: absolute; top: .5625rem; pointer-events: none; z-index: 2;
min-width: 8.4375rem; padding: .46875rem .65625rem; border-radius: .515625rem;
border: 1px solid var(--linea); background: var(--superficie); font-size: .78125rem;
box-shadow: 0 6px 20px rgba(20, 30, 20, .14);
}
.tar-curva-globo > b { display: block; margin-bottom: .28125rem; font-size: .75rem; color: var(--texto-suave); }
.tar-curva-globo span { display: flex; align-items: center; gap: .375rem; padding: .09375rem 0; }
.tar-curva-globo i { width: .5625rem; height: .5625rem; border-radius: 2px; flex: 0 0 auto; }
.tar-curva-globo span b { margin-left: auto; font-variant-numeric: tabular-nums; }
/* ═══════════ LOS TÉRMINOS RELACIONADOS Y LOS BUSCADORES, A TODO LO ANCHO ═══════════
«Siempre va en una pastilla a todo lo ancho términos relacionados que si se clican lanzan una
búsqueda sobre ese término, y debajo otra pastilla con los autocompletados de cada término.» */
.tar-rel-grupo { margin-bottom: .75rem; }
.tar-rel-grupo h4 { margin: 0 0 .328125rem; font-size: .8125rem; color: var(--texto-suave); }
.tar-rel-chips { display: flex; flex-wrap: wrap; gap: .328125rem; }
.tar-rel-chips .tar-ix-chip { cursor: pointer; }
.tar-busq-term { margin-bottom: 1.125rem; }
.tar-busq-term:last-child { margin-bottom: 0; }
.tar-busq-term h5 { margin: .75rem 0 .375rem; font-size: .78125rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .04em; }
.tar-busq-term h5:first-of-type { margin-top: .1875rem; }
@media (max-width: 720px) {
.tar-mitra-hero { --mitra-hueco: 9.375rem; }
.tar-mitra-marca { width: 130%; }
.tar-mitra-controles { gap: .46875rem; }
}
/* ═══════════ BUSCAR MÁS NOTICIAS DE UN PICO (Jacobo, 03/09/2026) ═══════════
«Debajo de las noticias sacar un botón que ponga "buscar más noticias" y ya entonces sí se
lanza una búsqueda con el motor completo de Radar en ese periodo exacto del pico. (…) Sale una
animación de carga con porcentaje que indique que se están buscando más impactos en medios.»
Lo de arriba (los titulares del corpus) es instantáneo; esto es lo que cuesta minutos, así que
se pide a mano y se ve avanzar. */
.tar-pico-pie { margin-top: .46875rem; }
.tar-pico-mas {
display: inline-flex; align-items: center; gap: .375rem;
background: var(--superficie); color: var(--verde-texto-2);
border: 1px solid var(--verde-bd-2); border-radius: 999px;
padding: 5px 13px; font-family: inherit; font-size: .78125rem; font-weight: 600; cursor: pointer;
transition: background .15s, border-color .15s;
}
.tar-pico-mas:hover:not(:disabled) { background: var(--verde-bg-hover); }
.tar-pico-mas:disabled { opacity: .55; cursor: default; }
.tar-pico-buscando { margin-top: .515625rem; max-width: 24.375rem; }
.tar-pico-buscando .tar-carga-barra { margin-bottom: .28125rem; }
.tar-pico-buscando-txt { font-variant-numeric: tabular-nums; }
/* LA LÍNEA QUE ATA LA CIFRA CON EL GRÁFICO (Jacobo, 03/09/2026). Sin ella, «26,6» debajo de una
curva que llega a 100 se lee como una contradicción; con ella es la altura media de esa misma
curva. Lo mismo bajo las comunidades, cuyo 100 es otro (la comunidad que más). */
.tar-mitra-pie { text-align: center; margin: .328125rem 0 .09375rem; line-height: 1.4; }
/* ═══════════ LOS RANKINGS DE BUSCADORES, CADA UNO EN SU CÁPSULA (Jacobo, 03/09/2026) ═══════════
«Directamente ponemos los tres rankings de Google, Bing y YouTube, cada uno con su logo tipo
favicon junto al nombre, y cada ranking envuelto en su propia cápsula. Ninguno de los términos
con número de posición. Cada término separado el uno del otro con sombreado alterno.»
El sombreado no es adorno: son listas de diez renglones cortos y sin la banda alterna se pierde
la línea con la vista. Y cada renglón es un ENLACE a esa búsqueda exacta en SU buscador. */
.tar-busq-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .75rem; margin-top: .46875rem; }
.tar-busq-caps {
border: 1px solid var(--lg-borde, rgba(0,0,0,.1)); border-radius: 12px;
background: var(--superficie); padding: .515625rem .5625rem .328125rem; overflow: hidden;
}
.tar-busq-caps h4 {
display: flex; align-items: center; gap: .375rem; margin: 0 0 .375rem;
font-size: .8125rem; font-weight: 700;
}
.tar-busq-caps h4 .tar-fav { width: 16px; height: 16px; flex: 0 0 auto; }
.tar-busq-fila {
display: block; padding: 5px 8px; border-radius: 7px; font-size: .8rem;
color: inherit; text-decoration: none; overflow-wrap: anywhere;
}
.tar-busq-fila.impar { background: var(--gris-fila, rgba(128,128,128,.08)); }
.tar-busq-fila:hover { background: var(--verde-bg-hover); text-decoration: underline; }
.tar-busq-calientes { margin-top: .75rem; }
.tar-busq-calientes b { display: block; margin-bottom: .328125rem; font-size: .8125rem; }
/* LAS PASTILLAS NO SE TOCAN (Jacobo, 03/09/2026): «Índice Mitra y Picos de interés están pegadas
las pastillas, recuerda que debe haber espacio entre ambas». El índice se pintó con su propia
caja `.tar-ix` y esa no llevaba el margen que sí tienen las demás `.dos-campo`. */
.tar-ix { margin-bottom: 1.03125rem; }
.tar-mitra-panel + .dos-campo, #mitra-res-abajo > .dos-campo + .dos-campo { margin-top: 1.03125rem; }
/* El aviso de que el barrido no ha traído nada nuevo. */
.tar-pico-sinmas { margin-top: .421875rem; }
/* ═══════════ GENERAR INFORME, FIJO A LA DERECHA (Jacobo, 03/09/2026) ═══════════
«Un botón que diga generar informe donde se genere un pdf con todos los apartados. Ese botón
debe estar a la derecha siempre fijo y quitarle espacio a la palabra y la puntuación, que se
contraen en función del espacio que tienen.»
De ahí el `margin-left:auto` y el `flex:0 0 auto` del botón frente al `min-width:0` de las
tarjetas: en flex, un hijo no se encoge por debajo de su contenido salvo que se le diga, y sin
eso el botón se salía de la caja en cuanto el término era largo. */
.tar-mitra-marcador { display: flex; flex-wrap: wrap; align-items: center; gap: .46875rem .75rem; }
.tar-mitra-tarjeta { min-width: 0; }
.tar-mitra-tarjeta .tar-mitra-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tar-mitra-informe {
margin-left: auto; flex: 0 0 auto; align-self: flex-start;
display: inline-flex; align-items: center; gap: .375rem;
background: var(--superficie); color: var(--verde-texto-2);
border: 1px solid var(--verde-bd-2); border-radius: 999px;
padding: 6px 14px; font-family: inherit; font-size: .78125rem; font-weight: 600; cursor: pointer;
transition: background .15s;
}
.tar-mitra-informe:hover:not(:disabled) { background: var(--verde-bg-hover); }
.tar-mitra-informe:disabled { opacity: .55; cursor: default; }
/* Las pestañas por término dentro de una tarjeta (Jacobo, 03/09/2026). Reutilizan el aspecto de
las del mapa a propósito: en esta pantalla «cambiar de término» ya se hace así arriba, y dos
maneras distintas de hacer lo mismo se aprenden dos veces. */
.tar-term-tabs { margin: .1875rem 0 .65625rem; }
/* «Generar informe» MÁS GRANDE (Jacobo, 03/09/2026). Es la salida del trabajo —el documento que
se reenvía— y estaba con el tamaño de un botón secundario. */
.tar-mitra-informe { padding: 9px 18px; font-size: .875rem; border-radius: 999px; border-width: 1.5px; }
.tar-mitra-informe svg { width: 15px; height: 15px; }
/* EL RESPLANDOR DEL BUSCADOR CAMBIA CON EL MODO (Jacobo, 03/09/2026): «el resplandor del cuadro de
búsqueda cuando esté seleccionado en el selector términos de búsqueda debe ser de nuestro bronce
dorado habitual, para diferenciar». El cian queda para las temáticas; en modo término, bronce.
Es la misma señal que ya lleva el interruptor: dos sitios diciendo lo mismo, no dos códigos. */
.tar-modo-libre .tar-mitra-campo input:focus,
.tar-mitra-campo.tar-modo-libre input:focus {
border-color: var(--tarsis-oro-logo, #A5702C);
box-shadow: 0 0 0 3px rgba(165,112,44,.34), var(--lg-sombra, 0 8px 24px rgba(20,30,20,.09));
}
/* SEPARACIÓN ENTRE LAS PASTILLAS GRANDES (Jacobo, 03/09/2026, dos veces: «siguen pegadas»).
`.tar-ix` es una `.dos-campo` y esas no traen margen propio —lo pone el contenedor con `gap`—,
pero el índice vive fuera de ese contenedor, así que hay que dárselo a mano por ARRIBA y por
abajo. Con solo `margin-bottom` seguía pegado a la tarjeta de picos, que va justo encima. */
.tar-ix { margin-top: 1.03125rem; margin-bottom: 1.03125rem; }
#mitra-res-abajo > .dos-campo { margin-bottom: 1.03125rem; }
/* =====================================================================
REDES SOCIALES — el tercer ámbito de Radar (04/09/2026)
Las clases .rrss-* de la ficha de impacto viven en estilos.css (heredadas de la
herramienta RRSS de vox-publi); aquí va lo nuevo: la pestaña de añadir, la cabecera por red
y los ajustes de sesión.
(La tarjeta «Próximamente» del panel vivía aquí. Se fue el 08/09/2026 con su JS: era la de
Cuentas, que dejó de estar en construcción y hoy es la ficha de Redes sociales.)
===================================================================== */
.tar-tab-anadir { opacity: .75; }
.tar-tab-anadir:hover { opacity: 1; }
.tar-rrss-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 12px; }
.tar-rrss-cab .dos-meta { max-width: 720px; }
.tar-rrss-red { margin: 18px 0 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tar-rrss-red h3 { margin: 0; font-size: 1rem; display: inline-flex; align-items: center; gap: 8px; }
.tar-rrss-red .tar-rrss-punto { width: 12px; height: 12px; border-radius: 50%; display: inline-block; background: var(--red-col, #888); }
.tar-rrss-red .dos-meta { font-size: .78125rem; }
.tar-rrss-lista { display: flex; flex-direction: column; gap: 8px; }
.tar-rrss-vacio { color: var(--texto-suave); font-size: .84375rem; padding: 14px; text-align: center; border: 1px dashed var(--linea); border-radius: 10px; }
.tar-rrss-aviso { background: #fff7e6; border: 1px solid #f0dca8; color: #7a5b12; border-radius: 8px; padding: 10px 12px; font-size: .8125rem; line-height: 1.5; margin: 8px 0; }
.tar-rrss-redes { display: flex; flex-wrap: wrap; gap: 8px; }
.tar-rrss-redes .rrss-red input { display: none; }
.tar-rrss-sesion { display: flex; flex-direction: column; gap: 10px; }
.tar-rrss-sesion-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--superficie); }
.tar-rrss-sesion-fila .dos-meta { font-size: .78125rem; }
.tar-rrss-sesion-fila label { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; cursor: pointer; }
.tar-rrss-sesion-fila.pausada { border-color: #f0dca8; background: #fff7e6; }
.tar-rrss-nunca { font-size: .78125rem; color: var(--texto-suave); font-style: italic; }
/* ---- REDES: pestañas por red, tarjeta-réplica y cifras grandes (04/09/2026) ----------------
Antes las seis redes iban una detrás de otra en una sola columna y ver lo de TikTok obligaba a
bajar por delante de todo X. Las pestañas reutilizan el chip de `.rrss-red` de editar la
búsqueda a propósito: es el mismo objeto («una red»), así que se ve igual en los dos sitios. */
/* El bloque de redes dentro del selector de apartados del dossier: sangrado bajo su casilla,
para que se vea que depende de ella y no es un apartado más. */
.dos-pdfa-redes { margin: -6px 0 12px 26px; padding-left: 10px; border-left: 2px solid var(--linea); }
.dos-pdfa-redes .dos-pdfc-conj { font-size: .8125rem; }
.dos-pdfa-redes .dos-pdfc-inds { margin-left: 18px; margin-bottom: 4px; }
/* ═══════════════════════════════════════════════════════════════════════════════════════════
* LAS PASTILLAS DE REDES (Jacobo, 05/09/2026, de madrugada)
*
* «Cada post debe verse como una pastilla imitando el diseño y la disposición de cómo se ve en
* su red social original.» Cada red tiene aquí su forma: la de X pone el avatar a la izquierda
* y todo lo demás en una columna; la de YouTube pone la portada arriba y el título debajo; la
* de Instagram es una imagen cuadrada con el pie de foto; la de TikTok es vertical.
*
* Lo que NO imita a la red es la subpastilla de cifras (`.rs-stats`): esa lleva la estética de
* Tarsis a propósito, porque no es parte del post — es nuestra medida, con la hora en que se
* tomó. Si se pareciera a la red, parecería que son las cifras de ahora.
* ═══════════════════════════════════════════════════════════════════════════════════════════ */
/*
* LA COLUMNA VA CENTRADA (05/09/2026). Las pastillas tienen la anchura de su red —470 px las de
* Instagram, 600 las de X— y se pintaban pegadas al borde izquierdo de un panel de mil y pico:
* a la derecha quedaba media pantalla en blanco y no se parecía a ningún feed, porque todos los
* feeds centran su columna. Centrar es la mitad del parecido, igual que lo fue la anchura.
*/
.tar-rrss-lista { display: flex; flex-direction: column; align-items: center; gap: 16px; }
/*
* LA ANCHURA ES LA MITAD DEL PARECIDO (05/09/2026). La primera versión pintaba las pastillas a
* todo el ancho del panel, y una foto cuadrada de Instagram salía de 1.400 píxeles: nada que ver
* con su feed. Cada red tiene su columna y es una medida real, no una preferencia — Instagram
* 470, X 600, Facebook 500, LinkedIn 555. Sin esto, ninguna cantidad de detalle en la cabecera
* hace que se parezca.
*/
.rs-post {
border: 1px solid var(--linea); border-radius: 16px; background: var(--superficie);
overflow: hidden; --red-col: #888; --ancho: 600px;
width: 100%; max-width: var(--ancho);
}
.rs-post.rs-instagram { --ancho: 470px; }
.rs-post.rs-facebook { --ancho: 500px; }
.rs-post.rs-linkedin { --ancho: 555px; }
.rs-post.rs-youtube { --ancho: 520px; }
.rs-post.rs-tiktok { --ancho: 600px; }
.rs-post.rs-x { --red-col: #14171a; } .rs-post.rs-youtube { --red-col: #e62117; }
.rs-post.rs-tiktok { --red-col: #010101; } .rs-post.rs-instagram { --red-col: #c13584; }
.rs-post.rs-facebook { --red-col: #1877f2; } .rs-post.rs-linkedin { --red-col: #0a66c2; }
.rs-post.rs-bluesky { --red-col: #1185fe; }
.rs-post.rs-abre { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.rs-post.rs-abre:hover { border-color: var(--red-col); box-shadow: 0 2px 14px rgba(0,0,0,.08); }
/*
* EN OSCURO, DOS REDES DESAPARECEN. El negro de X (#14171a) y el de TikTok (#010101) son su color
* de marca sobre blanco; sobre el fondo oscuro no se ve ni el punto ni el nombre. Se les da su
* pareja legible, igual que ya se hace con el verde corporativo.
*/
/*
* EL COLOR DE MARCA NO SIRVE SOBRE EL FONDO OSCURO (05/09/2026, medido con el contraste compuesto).
*
* Ya se sabía de X y TikTok, cuyos negros desaparecían, y se les dio su pareja. Faltaban las otras
* cuatro, y con ellas el enlace «Ver en …» de la subpastilla, que va con `--red-col`: sobre el
* fondo de noche daba **2,88 en LinkedIn** —ilegible—, 3,21 en Instagram, 3,58 en YouTube y 3,87 en
* Facebook, todos por debajo del 4,5 que pide un texto pequeño. Es el mismo escalón que ya se
* aplicó al verde corporativo: el color de la marca se conserva en claro y en oscuro se sube un
* paso, que sigue siendo reconociblemente suyo.
*/
html[data-modo='incognito-oscuro'] .rs-post.rs-x { --red-col: #e7e9ea; }
html[data-modo='incognito-oscuro'] .rs-post.rs-tiktok { --red-col: #25f4ee; }
html[data-modo='incognito-oscuro'] .rs-post.rs-youtube { --red-col: #ff7a6e; }
html[data-modo='incognito-oscuro'] .rs-post.rs-instagram { --red-col: #f68ac0; }
html[data-modo='incognito-oscuro'] .rs-post.rs-facebook { --red-col: #7ab8ff; }
html[data-modo='incognito-oscuro'] .rs-post.rs-linkedin { --red-col: #7db4ea; }
html[data-modo='incognito-oscuro'] .rs-badge-conv { background: rgba(60,110,190,.16); border-color: rgba(120,165,235,.35); color: #a9c7f5; }
html[data-modo='incognito-oscuro'] .rs-badge-loc { background: rgba(160,120,20,.16); border-color: rgba(210,175,90,.35); color: #e2c47a; }
html[data-modo='incognito-oscuro'] .rs-stats { background: rgba(255,255,255,.035); }
/*
* EL GALÓN DE ARRIBA SE RETIRÓ (05/09/2026): era lo único de la tarjeta que ninguna red tiene, y
* decía lo que ya dicen la pestaña y el título del bloque. Lo suyo bajó a la subpastilla.
*/
.rs-marca-kw { font-weight: 600; font-size: .6875rem; color: var(--texto-suave); background: var(--superficie); border: 1px solid var(--linea); border-radius: 999px; padding: 1px 8px; }
.rs-cab-extra { padding: 8px 14px 0; }
.rs-cuerpo { padding: 12px 14px; }
/* Piezas comunes con la tipografía de las redes (system-ui es la que usan casi todas). */
.rs-av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; background: var(--fondo); border: 1px solid var(--linea); }
.rs-av-hueco { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 1.0625rem; border: 0; }
.rs-av-cuadro { border-radius: 8px; }
.rs-av-circ-anillo { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px #e1306c; }
.rs-nombre { font-weight: 700; font-size: .90625rem; color: var(--texto); }
.rs-handle, .rs-fecha, .rs-sep { color: var(--texto-suave); font-size: .84375rem; font-weight: 400; }
/* El sello de verificada lleva el azul de cada red: en TikTok es su cian, en Instagram su azul. */
.rs-verif { color: #1d9bf0; font-size: .8125rem; margin-left: 3px; }
.rs-post.rs-instagram .rs-verif { color: #0095f6; }
.rs-post.rs-facebook .rs-verif { color: #1877f2; }
.rs-post.rs-tiktok .rs-verif { color: #20d5ec; }
html[data-modo='incognito-oscuro'] .rs-post.rs-instagram .rs-verif,
html[data-modo='incognito-oscuro'] .rs-post.rs-facebook .rs-verif { color: #7ab8ff; }
.rs-x-texto {
font-size: .9375rem; line-height: 1.45; color: var(--texto); white-space: pre-wrap;
word-break: break-word; margin: 4px 0 0; cursor: text; user-select: text;
}
.rs-x-texto mark { background: var(--tarsis-oro-suave, #f4e6c8); padding: 0 2px; border-radius: 3px; }
.rs-tag { color: var(--red-col); font-weight: 600; }
/* El lienzo: la proporción es la de cada red. */
.rs-lienzo { display: grid; gap: 3px; margin: 10px 0 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--linea); }
/* v356: mismo visor en Radar y Redes; cada pieza conserva su proporción y su orden. */
.rv-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; vertical-align: middle; }
.rv-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.rv-avatar-hueco { font: 600 .85em var(--tipo-marca); color: var(--texto-suave); }
.rv-galeria { --rv-alto: 420px; min-width: 0; margin: 10px 0; overflow: hidden; border: 1px solid var(--linea); border-radius: 12px; background: var(--fondo); }
.rv-escena { min-width: 0; background: #111; }
.rv-pieza { position: relative; margin: 0; min-width: 0; text-align: center; }
.rv-pieza[hidden] { display: none !important; }
.rv-medio { display: block; width: 100%; height: auto; max-height: var(--rv-alto); object-fit: contain; margin: 0 auto; background: #111; }
.rv-portada, .rv-original { display: block; position: relative; }
.rv-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #000b; color: white; font-size: 22px; }
.rv-duracion { position: absolute; top: 8px; right: 8px; padding: 3px 5px; border-radius: 4px; font-size: .72rem; line-height: 1.2; background: #000b; color: white; pointer-events: none; }
.rs-cita-quien { display: flex; align-items: center; gap: 7px; }
.rs-cita-quien .rs-av { width: 24px; height: 24px; flex-basis: 24px; }
.rv-ver-video { display: block; padding: 9px; color: #fff; background: #202020; font-size: .75rem; line-height: 1.5; }
.rv-error { display: none; padding: 30px 12px; color: #ddd; font-size: .8rem; }
.rv-fallo .rv-error { display: block; }
.rv-fallo .rv-play { display: none; }
.rv-fallo-video .rv-ver-video { font-weight: 700; }
.rv-controles { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 44px; background: var(--superficie); border-top: 1px solid var(--linea); }
.rv-controles button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; color: var(--texto); font-size: 1.6rem; cursor: pointer; }
.rv-controles button:disabled { opacity: .3; cursor: default; }
.rv-controles button:focus-visible, .rv-original:focus-visible, .rv-portada:focus-visible { outline: 2px solid var(--tarsis-cian-texto); outline-offset: -3px; }
.rv-posicion { font-size: .75rem; font-variant-numeric: tabular-nums; color: var(--texto-suave); }
.rv-detalle { --rv-alto: 560px; margin-bottom: 18px; }
.rs-tk-media .rv-galeria, .rs-yt .rv-galeria { margin-top: 0; }
.rs-lienzo.rs-n2, .rs-lienzo.rs-n3, .rs-lienzo.rs-n4 { grid-template-columns: 1fr 1fr; }
.rs-medio-caja { position: relative; display: block; line-height: 0; background: #0b0b0b; }
.rs-medio { width: 100%; display: block; background: #0b0b0b; }
.rs-lienzo-16-9 .rs-medio { aspect-ratio: 16/9; object-fit: cover; }
.rs-lienzo-1-1 .rs-medio { aspect-ratio: 1/1; object-fit: cover; }
.rs-lienzo-9-16 .rs-medio { aspect-ratio: 9/16; object-fit: cover; }
.rs-lienzo-auto .rs-medio { max-height: 420px; object-fit: cover; }
/* v351: la portada que ya no se puede recuperar (búsquedas anteriores a la copia en el servidor): un
hueco en la proporción de la red, con su color, en vez del icono de imagen rota. */
.rs-medio-perdido { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--red-col, #555) 0%, #0b0b0b 140%); opacity: .55; }
.rs-lienzo-1-1 .rs-medio-perdido { aspect-ratio: 1/1; }
.rs-lienzo-9-16 .rs-medio-perdido { aspect-ratio: 9/16; }
/* El rótulo del tiempo, donde lo ponen YouTube y TikTok: abajo a la derecha de la portada. */
.rs-dur {
position: absolute; right: 6px; bottom: 6px; z-index: 2;
background: rgba(0,0,0,.78); color: #fff; font-size: .71875rem; font-weight: 700;
line-height: 1; padding: 3px 5px; border-radius: 4px; letter-spacing: .01em;
}
.rs-play { position: absolute; inset: 0; margin: auto; width: 56px; height: 40px; border-radius: 10px; background: rgba(0,0,0,.72); }
.rs-play::after { content: ''; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-left: 15px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; transform: translateX(2px); }
/* La publicación citada, encajada como en X. */
.rs-cita { border: 1px solid var(--linea); border-radius: 14px; padding: 9px 11px; margin: 10px 0 0; background: var(--fondo); font-size: .84375rem; }
.rs-cita-quien { font-size: .8125rem; margin-bottom: 2px; }
.rs-cita-texto { white-space: pre-wrap; line-height: 1.45; }
.rs-cita-ver { font-size: .78125rem; }
/* ── X ── avatar a la izquierda, todo lo demás en una columna.
El envoltorio se llama `rs-tw` y NO `rs-x` a propósito: el ya lleva `rs-x` como
nombre de la red, y con la misma clase aquí la pastilla entera se volvía una fila. */
.rs-tw { display: flex; gap: 12px; }
.rs-tw-der { min-width: 0; flex: 1; }
.rs-tw-cab { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
/* ── YouTube ── la portada manda; el título en dos líneas y el canal debajo. */
.rs-yt .rs-lienzo { margin: 0; border-radius: 12px; }
.rs-yt-pie { display: flex; gap: 12px; margin: 10px 0 0; }
.rs-yt-pie .rs-av { width: 36px; height: 36px; }
.rs-yt-txt { min-width: 0; }
/* El titulo de YouTube va a DOS lineas y se corta, como en su feed: es lo que hace que la
tarjeta tenga siempre la misma altura y la lista se lea como una rejilla. */
.rs-yt-titulo {
font-size: .96875rem; font-weight: 700; line-height: 1.3; color: var(--texto);
cursor: text; user-select: text;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* El triangulo de YouTube es rojo; el de TikTok, blanco sobre negro. */
.rs-youtube .rs-play { background: rgba(0,0,0,.78); }
.rs-youtube .rs-play::after { border-left-color: #fff; }
.rs-yt-canal, .rs-yt-meta { font-size: .8125rem; color: var(--texto-suave); margin-top: 2px; }
.rs-yt-desc { margin-top: 8px; }
.rs-yt-desc > summary { font-size: .78125rem; color: var(--texto-suave); cursor: pointer; }
/* ── TikTok ── vertical a la izquierda, texto al lado. */
.rs-tk { display: flex; gap: 14px; align-items: flex-start; }
/* La portada, con el ancho que le da TikTok en su rejilla de resultados (~190 px de columna). */
.rs-tk-media { width: 190px; flex: none; }
.rs-tk-media .rs-lienzo { margin: 0; border-radius: 10px; }
.rs-tk-txt { min-width: 0; flex: 1; }
.rs-tk-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rs-tk-cab .rs-av { width: 34px; height: 34px; }
/* ── Instagram ── cabecera fina, imagen cuadrada a sangre, pie con el usuario en negrita. */
.rs-ig-cab { display: flex; align-items: center; gap: 10px; margin: -2px 0 10px; }
.rs-ig-cab .rs-av { width: 34px; height: 34px; }
.rs-ig-fecha { margin-left: auto; font-size: .78125rem; }
.rs-post.rs-instagram .rs-cuerpo { padding: 12px 0; }
.rs-ig-cab, .rs-ig-pie { padding: 0 14px; }
.rs-ig .rs-lienzo { margin: 0; border-radius: 0; border-left: 0; border-right: 0; }
.rs-ig-pie { font-size: .90625rem; line-height: 1.45; margin-top: 10px; white-space: pre-wrap; cursor: text; user-select: text; }
/* ── Facebook ── nombre de página, fecha con el globo de «público». */
/*
* LA FOTO DE FACEBOOK VA A SANGRE (05/09/2026, cotejado con su feed). En Facebook la imagen ocupa
* TODO el ancho de la tarjeta, de borde a borde y sin esquinas redondeadas; nosotros la metíamos
* con catorce píxeles de margen a cada lado y radio de catorce, que es la forma de X. Instagram ya
* lo hacía bien porque su cuerpo no lleva relleno lateral; Facebook sí lo lleva —lo necesita para
* el texto— así que la foto tiene que salirse de él. En LinkedIn pasa exactamente lo mismo.
*/
.rs-fb .rs-lienzo,
.rs-li .rs-lienzo { margin: 10px -14px 0; border-radius: 0; border-left: 0; border-right: 0; }
.rs-fb-cab, .rs-li-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rs-fb-cab .rs-av { width: 40px; height: 40px; }
.rs-fb-meta, .rs-li-meta { font-size: .78125rem; color: var(--texto-suave); }
/* ── LinkedIn ── avatar cuadrado y una tipografía algo más sobria. */
.rs-li-cab .rs-av { width: 42px; height: 42px; }
.rs-li .rs-x-texto { font-size: .90625rem; }
/*
* ── LA SUBPASTILLA DE CIFRAS ──────────────────────────────────────────────────────────────────
* Adosada abajo y con la estética de TARSIS, no la de la red. Tiene que LEERSE como otra pieza:
* si se confundiera con la tarjeta, parecería que esas cifras son del post y son nuestras — las
* del momento en que se cosechó. Por eso lleva su propio fondo, un filete más marcado del color
* de la red y las esquinas de abajo redondeadas: una subpastilla pegada, no un pie de tarjeta.
*/
.rs-stats {
/* El filete primero en liso: si un navegador no entiende `color-mix`, tira la declaración
entera y la subpastilla se quedaría sin su línea de separación. */
border-top: 2px solid var(--linea);
border-top-color: color-mix(in srgb, var(--red-col) 30%, var(--linea));
background: var(--fondo);
padding: 11px 14px 10px;
}
.rs-stats-cifras { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px; }
.rs-stats-sincifras { font-size: .75rem; color: var(--texto-suave); }
.rs-cifra { display: inline-flex; flex-direction: column; line-height: 1.05; }
.rs-cifra b { font-size: 1.1875rem; font-weight: 800; letter-spacing: -.02em; color: var(--texto); }
.rs-cifra i { font-size: .625rem; font-style: normal; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); margin-top: 3px; }
.rs-stats-pie {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
font-size: .65625rem; color: var(--texto-suave); margin-top: 8px; letter-spacing: .01em;
}
/*
* Y EN CLARO EL AZUL DE FACEBOOK TAMPOCO LLEGABA (05/09/2026): 4,23 de contraste sobre el fondo de
* la subpastilla, por debajo del 4,5 que pide un texto de once píxeles y medio. Se baja un escalón
* el color de marca SOLO para este enlace y SOLO en claro —el filete y el hover siguen con el color
* exacto de la red—, que es lo mismo que se hizo con el cian corporativo sobre blanco.
*/
.rs-stats-ver { margin-left: auto; font-weight: 700; font-size: .71875rem; color: var(--red-col); white-space: nowrap; }
html:not([data-modo='incognito-oscuro']) .rs-stats-ver { color: color-mix(in srgb, var(--red-col) 82%, #000); }
/* Conversaciones, respuestas y el sello de «localizado por buscador». */
.rs-badge-conv { display: inline-block; font-size: .71875rem; font-weight: 600; background: #eef4ff; border: 1px solid #cfe0ff; color: #23508f; border-radius: 999px; padding: 2px 10px; }
.rs-badge-resp { font-size: .75rem; color: var(--texto-suave); }
.rs-badge-loc { font-size: .6875rem; font-weight: 600; background: #fff7e6; border: 1px solid #f0dca8; color: #7a5b12; border-radius: 999px; padding: 0 8px; }
.rs-hilo { border-top: 1px solid var(--linea); padding: 8px 14px 10px; }
.rs-hilo > summary { font-size: .78125rem; color: var(--texto-suave); cursor: pointer; }
.rs-hilo-item { border-left: 2px solid var(--linea); padding: 6px 0 6px 10px; margin-top: 8px; font-size: .84375rem; line-height: 1.45; }
@media (max-width: 640px) {
.rs-tk { flex-direction: column; }
.rs-tk-media { width: 100%; max-width: 240px; }
.rs-stats-cifras { gap: 14px; }
.rs-cifra b { font-size: 1.0625rem; }
.rs-stats-ver { margin-left: 0; }
}
/* ── EL CUPO QUE TE QUEDA HOY, en el formulario de redes ─────────────────────────────────────── */
.cupo-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.cupo-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .8125rem; }
.cupo-fila .rrss-red-tag { flex: none; min-width: 92px; }
.cupo-barra { flex: 1; min-width: 90px; max-width: 220px; height: 6px; border-radius: 999px; background: var(--fondo); border: 1px solid var(--linea); overflow: hidden; }
.cupo-barra i { display: block; height: 100%; background: var(--red-col, #888); opacity: .55; }
.cupo-cifras { color: var(--texto-suave); }
.cupo-cifras b { color: var(--texto); font-size: .875rem; }
.cupo-hora { opacity: .8; }
.cupo-libre, .cupo-nota { color: var(--texto-suave); font-size: .78125rem; }
.cupo-agotado .cupo-cifras b { color: #8a5a12; }
.cupo-pausa .cupo-cifras, .cupo-pausa .cupo-nota { color: #8a5a12; }
/* DE DONDE SALE EL NUMERO. Va separada del resto por una regla: no es mas texto explicativo, es la
procedencia del dato de arriba, y el usuario tiene que poder distinguir un tope comprobado de uno
puesto por precaucion. Se lee menos alto que las cifras, pero se lee. */
/* «en un grupo»: lo que sabemos de quien puede ver una publicacion de Facebook. Se lee como un
dato, no como una alarma: no dice que sea privada, dice que no consta que sea publica. */
/* «Resultados provisionales»: la busqueda sigue y el numero va a subir. Se dice porque un total
que crece sin avisar se lee como que algo falla. */
.tar-rrss-parcial { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 12px; border-radius: 10px;
background: var(--fondo); border: 1px dashed var(--linea); font-size: .8125rem; color: var(--texto-suave); }
.tar-rrss-parcial b { color: var(--texto); }
.rs-vis-grupo { font-size: .71875rem; color: var(--texto-suave); border: 1px solid var(--linea); border-radius: 999px; padding: 0 6px; }
.cupo-proc { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--linea); font-size: .78125rem; }
/* El sello de la recogida: dice si la red se agotó o si paramos nosotros. */
.tar-rrss-recogida { font-size: .71875rem; font-weight: 600; border-radius: 999px; padding: 1px 9px; border: 1px solid; }
.tar-rrss-recogida.ok { background: #eef7ee; border-color: #cfe6cf; color: #2f6b33; }
.tar-rrss-recogida.parcial { background: #fff7e6; border-color: #f0dca8; color: #7a5b12; }
.tar-rrss-pestanas { margin: 10px 0 4px; }
.tar-rrss-pestanas .rrss-red { border-width: 1.5px; }
.tar-rrss-pestanas .rrss-red.vacia { opacity: .5; }
.tar-rrss-pestanas .tar-rrss-n { font-size: .75rem; font-weight: 700; opacity: .8; background: rgba(0,0,0,.07); border-radius: 999px; padding: 0 7px; }
.tar-rrss-pestanas .rrss-red.activo .tar-rrss-n { background: rgba(255,255,255,.22); }
/* Las subpestañas de X: dos preguntas distintas sobre la misma lista. */
.tar-rrss-sub { display: flex; gap: 6px; margin: 4px 0 10px; }
.tar-rrss-subtab { border: 1px solid var(--linea); background: var(--fondo); color: var(--texto-suave); border-radius: 999px; padding: 5px 14px; font-size: .8125rem; font-weight: 600; cursor: pointer; }
.tar-rrss-subtab.activo { background: var(--superficie); color: var(--texto); border-color: var(--red-col, var(--linea)); box-shadow: inset 0 -2px 0 var(--red-col, #888); }
/* LAS CIFRAS, GRANDES Y JUSTO DEBAJO (Jacobo, 04/09/2026). Son el dato que se mira primero en un
clipping de redes; iban en chips de doce píxeles indistinguibles del resto de la ficha. */
@media (max-width: 640px) {
.tar-rrss-sesion-fila { flex-direction: column; align-items: flex-start; }
}
/* --- RRSS: conversaciones y respuestas sueltas (04/09/2026) --- */
.tar-rrss-sueltas { margin: 10px 0 18px; }
.tar-rrss-sueltas > summary { cursor: pointer; font-size: .84375rem; color: #666; padding: 6px 0; }
/* =====================================================================
EL IMPACTO, EN UNA COLUMNA Y POR CAPAS (09/09/2026, diseño de Jacobo)
Sustituye a la maqueta de dos columnas del 08/09. Ahora el titular, el
subtítulo y los párrafos van a TODO EL ANCHO, y la pastilla del análisis se
mete entre el subtítulo y el primer párrafo, FLOTANDO por encima de ellos.
Al analizar, crece con los resúmenes y la ficha crece con ella.
El desenfoque va aquí y no en el servidor A PROPÓSITO, y esta vez sí vale: lo
que se desenfoca es RELLENO, no el texto del medio. El servidor manda la forma
del párrafo (ver servidor/lib/motor/mascara.js), así que no hay nada legible
que rescatar quitando el CSS, mirando el código fuente ni raspando la página.
===================================================================== */
/* FOTO Y TEXTO EN FILA, NO FLOTADA (09/09/2026). La foto iba con `float: left` y el texto la
rodeaba; con la maqueta nueva eso deja de valer, porque lo que viene detrás —la mini pastilla—
tiene que ir a TODO EL ANCHO y por tanto necesita un `clear`. Y un `clear` detrás de una foto
de 78 px de alto abre un hueco en blanco cada vez que el titular es corto y no hay subtítulo.
En fila no hay nada que limpiar: el bloque mide lo que mida el más alto de los dos y lo
siguiente empieza justo debajo. */
.dos-imp-noticia { min-width: 0; display: flex; align-items: flex-start; gap: 12px; }
.dos-imp-texto { min-width: 0; flex: 1 1 auto; }
/* El velo: relleno ilegible con la silueta del párrafo. `select-none` porque
seleccionarlo y copiarlo solo daría galimatías, y confundiría. */
.dos-velo {
filter: blur(3.4px);
opacity: .55;
user-select: none; -webkit-user-select: none;
color: var(--texto-suave, #556);
}
@media (prefers-reduced-motion: reduce) { .dos-velo { filter: blur(3.4px); } }
.dos-imp-frags { margin-top: 2px; }
/* La palabra del impacto NO se desenfoca y sigue en amarillo: es lo único legible. */
.dos-imp-frag .dos-hl { filter: none; opacity: 1; }
/* LA MINI PASTILLA, FLOTANDO SOBRE LOS PÁRRAFOS (09/09/2026).
Vidrio de CONTROL (es un elemento de interfaz, no una superficie de lectura),
sin filo de luz. Lo nuevo es que va ENTRE el subtítulo y el primer párrafo, y
que se nota que está por encima: sombra de elevación y un poco de aire abajo,
para que el párrafo difuminado se lea como si pasara por debajo.
`clear: both` porque la foto va flotada a la izquierda: sin esto, la pastilla
se metería en el hueco de al lado de la foto y perdería el ancho completo. */
/* ── LA CAPA: los párrafos y la pastilla EN LA MISMA CASILLA ──────────────────────────────
Jacobo, 09/09/2026: «la mini pastilla de analizar debe estar superpuesta encima del párrafo
borroso, un poco por debajo del centro del párrafo para dejar ver los impactos de la
keyword», y al analizar «se coloca encima de los párrafos analizados, no los desplaza, de
forma que lo que crezca la pastilla global hace que coincida el borde inferior de la mini
pastilla con el borde de la pastilla global, pero sin tocarse».
Las dos cosas salen de la misma rejilla de UNA casilla con los dos hijos dentro:
· la casilla mide lo que mida el MÁS ALTO de los dos, así que la pastilla no empuja a los
párrafos —los tapa— y en cuanto crece con el análisis es ella la que manda y la ficha
entera crece con ella. Eso es «no los desplaza» y «la global crece con ella», sin una
sola línea de JavaScript midiendo alturas (que es justo lo que se rompe al cambiar el
ancho de la ventana);
· el SOLAPE se ata al PÁRRAFO, no a una altura fija, y esto costó una vuelta. La pastilla
va pegada abajo (`align-self: end`), así que su borde superior cae en
`alto de la casilla − alto de la pastilla`. Dándole a los párrafos un `padding-bottom`
de 46 px, la casilla mide siempre `párrafos + 46`, y la pastilla —que plegada ocupa
~90— arranca 44 px por encima del final del texto: dos renglones tapados, SIEMPRE, mida
lo que mida el párrafo. Con la primera versión, que era un `min-height: 196px` fijo, un
párrafo corto dejaba un claro de sesenta píxeles entre el texto y la pastilla y no se
leía como superpuesta, sino como despegada.
· y el `min-height` se queda solo de SUELO, para el caso de un párrafo de dos líneas: sin
él la pastilla lo taparía entero y no quedaría ni una keyword a la vista.
No se usa `position: absolute` a propósito: sacaría la pastilla del flujo y entonces la
ficha NO crecería con ella, que es la mitad de lo que se pide. */
.dos-imp-capa {
display: grid;
min-height: 150px;
margin-top: 10px;
}
.dos-imp-capa > * { grid-area: 1 / 1; min-width: 0; }
.dos-imp-capa > .dos-imp-frags { align-self: start; padding-bottom: 46px; }
.dos-imp-capa > .dos-imp-analisis { align-self: end; }
@media (max-width: 720px) {
/* En móvil la pastilla ocupa dos renglones más (la frase y el botón se apilan), así que el
solape tiene que ser mayor para que siga sin comerse el párrafo entero. */
.dos-imp-capa { min-height: 200px; }
.dos-imp-capa > .dos-imp-frags { padding-bottom: 70px; }
}
.dos-imp-analisis {
min-width: 0;
position: relative;
z-index: 2;
border-radius: var(--lg-r-m, 14px);
border: 1px solid var(--lg-borde, rgba(120,130,120,.22));
/* OPACA, y no es capricho: desde que se superpone tiene debajo los párrafos enmascarados y,
sobre todo, las KEYWORDS EN AMARILLO. Con el vidrio translúcido el amarillo se colaba a
través y dejaba manchas dentro del análisis (visto en la maqueta con .96: se leía «Abascal»
por detrás del texto). El vidrio se queda para el resto de la interfaz; aquí manda que lo
que hay dentro se lea. */
background: var(--superficie, #fff);
/* LA ELEVACIÓN es lo que la hace «flotar» y no ser una caja más dentro de otra caja: una
sombra corta y pegada (el contacto) más otra larga y difusa (la distancia). Sin la larga
se lee como un recuadro; sin la corta, como una mancha. */
box-shadow: 0 1px 2px rgba(22, 45, 35, .10), 0 10px 26px -12px rgba(22, 45, 35, .40);
overflow: hidden;
}
.dos-imp-an-cab {
display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
padding: 9px 13px; font-size: .8125rem;
border-bottom: 1px solid var(--lg-borde, rgba(120,130,120,.22));
}
.dos-imp-an-cab b { font-size: .9375rem; }
.dos-imp-an-fecha { margin-left: auto; color: var(--texto-suave); font-size: .78125rem; white-space: nowrap; }
.dos-imp-an-lanzar {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 11px 13px;
}
.dos-imp-an-frase { flex: 1 1 12ch; min-width: 0; font-size: .84375rem; line-height: 1.4; }
/* EL BOTÓN NO SE APAGA, CAMBIA DE OFICIO (Jacobo, 09/09/2026): «cuando le doy al botón de
analizar se pone entero en blanco, eso no puede ser, debe quedarse resaltado, pero no
perderse el texto del botón con el color de fondo».
El culpable era `opacity: .5`, que apaga el elemento ENTERO —fondo y letra a la vez— y deja
un gris pálido sobre blanco donde no se lee nada. Aquí se anula para este botón y cada
estado tiene su pareja de color elegida a mano:
· trabajando → fondo verde suave y letra verde oscura, con un latido MUY tenue (solo el
fondo, nunca el texto: parpadear las letras es lo que hace ilegible un botón);
· hecho → el mismo verde suave, en firme, con su marco. Sigue resaltado, se lee, y
se distingue de un botón que aún se puede pulsar. */
.dos-imp-an-btn { flex: 0 0 auto; }
.dos-imp-an-btn[disabled] { opacity: 1; cursor: default; }
/* ⚠ DOS COSAS QUE COSTARON, Y LAS DOS SE MIDIERON EN LA MAQUETA:
1. `.boton-primario` VA DELANTE en el selector. `liquid.css` se carga después que este
fichero y trae `.boton-primario.boton-mini { color: #fff }`; con la misma especificidad
(0,2,0) gana por orden y la letra sale blanca sobre fondo claro, o sea invisible. Es el
mismo tropiezo que ya se arregló el 08/09 con `.boton-mini`. Con la clase de más, (0,3,0).
2. LOS TOKENS SON LOS QUE EXISTEN. La primera versión usaba `--verde-suave`, que **no está
en la paleta**: me lo inventé. Y `var(--token-que-no-existe, #fallback)` NO cayó al
respaldo aquí —medido: el botón se quedaba con el verde del primario—, así que el arreglo
se veía correcto en el fichero y no pasaba nada en pantalla. Los buenos, comprobados con
`getComputedStyle` sobre el propio botón: `--verde-bg-chip` (#D6EFF7), `--verde-texto-2`
(#0A5A66) y `--verde-bd-2` (#B4E0EC). Contraste de la pareja: 6,6:1. */
.boton-primario.dos-imp-an-btn.cargando,
.boton-primario.dos-imp-an-btn.hecho {
background: var(--verde-bg-chip);
color: var(--verde-texto-2);
border: 1px solid var(--verde-bd-2);
box-shadow: none;
text-shadow: none;
}
.boton-primario.dos-imp-an-btn.cargando { animation: dos-an-late 1.6s ease-in-out infinite; }
@keyframes dos-an-late { 0%, 100% { background: var(--verde-bg-chip); } 50% { background: var(--verde-bg-hover); } }
@media (prefers-reduced-motion: reduce) { .boton-primario.dos-imp-an-btn.cargando { animation: none; } }
.dos-imp-an-res:not(:empty) { padding: 0 13px 11px; }
/* LA ANIMACIÓN AL ANALIZAR (Jacobo, 09/09/2026): «una animación hace que se amplíe la mini
pastilla con los resúmenes y con ella la pastilla principal».
Se anima `grid-template-rows` de 0fr a 1fr, que es la única forma de que un contenido de
altura DESCONOCIDA (el análisis, que puede ser un párrafo o cinco) haga una transición de
verdad: `height: auto` no es animable y medir la altura con JS obliga a repetirlo en cada
repintado y en cada cambio de ancho. La ficha crece con ella sola, porque la pastilla está
en el flujo normal y no posicionada. */
.dos-imp-an-res {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .42s cubic-bezier(.22, .61, .36, 1);
}
.dos-imp-an-res.abierta { grid-template-rows: 1fr; }
.dos-imp-an-res > .dos-an-caja { min-height: 0; overflow: hidden; }
/* Y el contenido entra con un desvanecido corto, un pelo por detrás de la apertura: si entra
a la vez, se ve el texto apretándose mientras la caja crece. */
.dos-imp-an-res.abierta > .dos-an-caja { animation: dos-an-entra .3s .12s both ease-out; }
@keyframes dos-an-entra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.dos-imp-an-res { transition: none; }
.dos-imp-an-res.abierta > .dos-an-caja { animation: none; }
}
/* La foto de la noticia: pequeña y comprimida, al estilo del índice de Google Noticias
(así lo pidió Jacobo). Se carga del propio medio; si no llega, el JS quita el hueco
entero para que la ficha no quede con un roto. */
.dos-imp-foto {
flex: 0 0 auto; margin-top: 2px;
width: 116px; height: 78px; border-radius: var(--lg-r-s, 10px);
overflow: hidden; background: var(--gris-fila, rgba(0,0,0,.04));
border: 1px solid var(--lg-borde, rgba(120,130,120,.22));
}
.dos-imp-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 520px) { .dos-imp-foto { width: 88px; height: 62px; } }
/* Los párrafos ya no tienen nada que limpiar: la foto dejó de estar flotada (ver
`.dos-imp-noticia`) y además ahora van detrás de la mini pastilla, que ocupa todo el ancho. */
.dos-imp-frags { margin-top: 0; }
/* EL CORTE A MITAD DEL SEGUNDO PÁRRAFO (Jacobo, 09/09/2026): «la pastilla general se corta a
mitad del segundo párrafo aunque después haya más, visualmente no queda bien enseñar tantos».
Se recorta por ALTURA y no por caracteres, y es a propósito: «a la mitad» es una medida
visual —depende del ancho de la ventana— y cortando texto en el JS saldría un corte distinto
en cada pantalla. `2.6em` sobre una interlínea de 1.55 son un renglón y dos tercios: el
segundo renglón queda partido por la mitad SIEMPRE, tenga el párrafo tres líneas o diez.
El degradado va con `mask-image` en vez de una capa blanca encima porque la ficha tiene
fondo de vidrio: una capa blanca se vería como una banda sobre lo que hay detrás. Y se
desvanece de verdad, no se corta a cuchillo. */
.dos-imp-frag-corte {
max-height: 2.6em;
overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, #000 18%, rgba(0,0,0,.35) 68%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 18%, rgba(0,0,0,.35) 68%, transparent 100%);
}
/* Y menos aire entre los dos: el segundo ya no es un párrafo entero, es el asomo del
siguiente. Con los 22px de separación normales parecía otro bloque. */
.dos-imp-frags.hay-corte .dos-imp-frag + .dos-imp-frag { margin-top: 13px; }
/* Los compartimentos del análisis: uno por palabra clave, dentro de la pastilla derecha.
El del SUELO se distingue a propósito (borde punteado y nota al pie): son datos de la
ficha, no un análisis del texto, y disfrazarlo sería mentir sobre lo que sabemos. */
.dos-an-item { border-top: 1px solid var(--lg-borde, rgba(120,130,120,.22)); padding: 9px 0 2px; }
.dos-an-item:first-child { border-top: 0; }
.dos-an-cab { display: flex; align-items: center; gap: 8px; font-size: .8125rem; margin-bottom: 4px; }
.dos-an-cab b { color: var(--verde-oscuro, #14532d); }
.dos-an-pdf { margin-left: auto; font-size: .71875rem; color: var(--texto-suave); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; cursor: pointer; }
.dos-an-txt { font-size: .84375rem; line-height: 1.5; }
.dos-an-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.dos-an-tag { font-size: .6875rem; padding: 2px 8px; border-radius: 999px; background: var(--lg-vidrio-denso, rgba(255,255,255,.66)); border: 1px solid var(--lg-borde, rgba(120,130,120,.22)); }
/* Un analisis que no salio. Va en el AMBAR de la casa —el token que ya existe para los avisos,
y que marca.css redefine en su version de la marca— y sin gritar: es un tropiezo con reintento,
no una averia del sitio. El texto se lee igual de bien que un analisis bueno; lo que cambia es
la barra de la izquierda y el matiz del fondo. Con `--ambar-fondo` funciona igual en claro y en
oscuro, que lo redefine estilos.css a partir de la linea 1478. */
.dos-an-error { border-left: 2px solid var(--ambar); padding-left: 9px;
background: var(--ambar-fondo); border-radius: 0 8px 8px 0; }
.dos-an-error .dos-an-txt { color: var(--texto-suave); }
.dos-an-nota { font-size: .6875rem; color: var(--texto-suave); margin-top: 5px; font-style: italic; }
/* La advertencia de IA: UNA sola vez y al final del todo (Jacobo, 09/09/2026). Antes iba
repetida debajo de cada palabra clave, y con dos o tres keywords la pastilla decía tres veces
lo mismo. Pequeña y gris, sin cursiva — la cursiva de `.dos-an-nota` es para la nota del
suelo, que es una aclaración; esto es un aviso y se lee mejor recto. */
.dos-an-aviso {
font-size: .6875rem;
font-style: normal;
color: var(--texto-suave, #6b7280);
opacity: .85;
margin-top: 9px;
}
/* La casilla del PDF: UNA por análisis, arriba del todo y alineada a la derecha. */
.dos-an-jefe { display: flex; justify-content: flex-end; padding-bottom: 2px; }
/* El CONTEXTO (Jacobo, 09/09/2026): párrafo aparte, debajo de las palabras, que cuenta de qué
va la noticia SIN mirar la palabra buscada. Se separa con un filete porque es de la NOTICIA
y no de ninguna keyword —confundirlos haría creer que todo eso es sobre la palabra—, pero
**se lee con la misma letra que los análisis**: iba a 12,5 px y en gris suave, y así se leía
como un pie de página cuando es el párrafo que dice de qué va la noticia. (`.dos-an-txt`
dentro pone el tamaño; aquí solo queda la separación y el rótulo.) */
.dos-an-ctx {
margin-top: 9px; padding-top: 8px;
border-top: 1px dashed var(--lg-borde, rgba(120,130,120,.28));
}
.dos-an-ctx-tit {
display: block; font-size: .65625rem; letter-spacing: .06em; text-transform: uppercase;
color: var(--verde-oscuro, #14532d); opacity: .8; margin-bottom: 3px;
}
/* La barra de carga del análisis (Jacobo, 09/09/2026). El porcentaje es real —se cuenta sobre
los tokens que el modelo escribe—, salvo la fase de lectura, que se planta en el 40 %. */
.dos-an-cargando { padding: 10px 0 4px; }
.dos-an-barra {
height: 6px; border-radius: 999px; overflow: hidden;
background: var(--lg-borde, rgba(120,130,120,.22));
}
.dos-an-barra i {
display: block; height: 100%; border-radius: 999px;
background: var(--verde-solido, #14746f);
transition: width .5s cubic-bezier(.34,1,.64,1);
}
.dos-an-fase { margin-top: 5px; font-size: .71875rem; color: var(--texto-suave); }
/* ═══════ A FONDO O RÁPIDA: EL INTERRUPTOR DEL FORMULARIO (14/09/2026, encargo de Jacobo) ═══════
Va justo antes de «Guardar y buscar», y NACE ENCENDIDO: a fondo es lo de siempre y lo que se
espera, así que la bola arranca a la derecha y el riel en el azul de los botones de la casa.
Al pulsarlo la bola se va a la izquierda y el riel NO se apaga: pasa al COBRE DEL LOGO (#A5702C,
`--tarsis-oro-logo`, el del dibujo, no el oro de relleno). Que los dos estados lleven color es la
idea: no es un ajuste que se pone y se quita, son dos búsquedas distintas y las dos son legítimas.
No usa `.tar-switch-temas` porque aquel es una casilla dentro de una etiqueta; este es un botón
con `role="switch"`, que es lo correcto para algo que no se envía en un formulario. */
.dos-modo { display: grid; gap: 6px; margin-top: 2px; }
.tar-switch {
display: inline-flex; align-items: center; gap: 10px; align-self: start;
background: transparent; border: 0; padding: 4px 2px; cursor: pointer;
font: inherit; color: var(--texto); line-height: 1.3;
}
.tar-switch-riel {
flex: 0 0 auto; width: 40px; height: 23px; border-radius: 999px; position: relative;
background: var(--verde-solido, #0E7E8F);
border: 1px solid var(--verde-oscuro, #0E7E8F);
transition: background .18s var(--ease-premium, ease), border-color .18s;
}
.tar-switch-bola {
position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%;
background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.28);
transform: translateX(17px); /* encendido = a fondo = a la derecha */
transition: transform .18s var(--ease-premium, ease);
}
.tar-switch-txt { font-weight: 600; font-size: .875rem; }
/* RÁPIDA: la bola vuelve a la izquierda y el color pasa al cobre del logo. */
.tar-switch.rapida .tar-switch-riel { background: var(--tarsis-oro-logo, #A5702C); border-color: var(--tarsis-oro-logo, #A5702C); }
.tar-switch.rapida .tar-switch-bola { transform: translateX(0); }
.tar-switch.rapida .tar-switch-txt { color: var(--tarsis-oro-logo, #A5702C); }
/* En oscuro el cobre del dibujo se hunde sobre el fondo, igual que ya pasaba en las gráficas. */
html[data-modo="incognito-oscuro"] .tar-switch.rapida .tar-switch-txt { color: var(--tarsis-oro-claro, #E8C966); }
.tar-switch:focus-visible { outline: 2px solid var(--tarsis-cian-texto); outline-offset: 3px; border-radius: 999px; }
.dos-modo-nota { margin: 0; }
@media (hover: none) and (pointer: coarse) { .tar-switch { min-height: 44px; } }