/* QIU design system, in Quantum's «Q» brand (quantumventures.io/quantum-hoy/marca.css, 28/09). Tokens first; every
   component below reads only tokens, so a theme is a token swap. The structure is white, black and grey; the blue
   Qiu blue #2F82FF is the only colour, for action (soft #8FBBFF for small text on night; #1F63E0 on light). Black belongs to Qiu. Green, amber and red only say
   ok / careful / error (Qiu's own states use them too). Manrope for everything; Orbitron only for wordmarks (.cuadrada).
   Themes (Perfil › Tema): Noche = Qiu's black, Día = Quantum's white. Qiu's face and its 7 states (brand/) never change.
   Screens: use these classes and variables, never hard-coded colours. */
/* Manrope en dos trozos: el latino (24 KB) es lo que baja todo el mundo; el completo solo se pide si la pantalla trae latín extendido, cirílico, griego, vietnamita o símbolos. */
@font-face { font-family: 'Manrope'; src: url('/qiu/fonts/manrope-latin.woff2') format('woff2'); font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; src: url('/qiu/fonts/manrope.woff2') format('woff2'); font-weight: 200 800; font-display: swap; unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-0303, U+0305-0307, U+0309-0328, U+032A-1FFF, U+2070-20AB, U+20AD-2121, U+2123-2190, U+2192, U+2194-2211, U+2213-2214, U+2216-FEFE; }
@font-face { font-family: 'Orbitron'; src: url('/qiu/fonts/orbitron.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  --fs: var(--fs-u, 1); /* el tamaño de letra que elige la persona (--fs-u); en el ordenador escritorio.css lo baja un punto (Dani, 15-oct) */
  color-scheme: dark;
  /* Colores de la guía oficial de Qiu (marta.quantumventures.io/qiu-guia, Dani 12-oct) */
  --brand: #2F74E6; --brand-hover: #2566D2; --brand-soft: rgba(80, 120, 200, .12); --brand-text: #8FB0E8; /* azul Qiu con menos neón (Dani 14-oct, punto 8) */
  --bg: #080C13; --surface: #0F1520; --surface-2: #161E2B; --surface-3: #1D2736; /* noche y sus niveles */
  --fg: #F3F5F9; --fg-2: #C9D1DE; --muted: #8A94A6;
  --line: rgba(160, 180, 210, .11); --line-2: rgba(160, 180, 210, .22); /* la línea fina */
  --green: #6CCFA3; --amber: #FFC107; --red: #FF4D5E; /* menta de acento y alerta */
  --danger-bg: #D22B3B; /* fondo de .btn.danger: el blanco encima a 5:1 en todos los temas (sobre --red #FF4D5E era 3,2:1; 17-oct, a11y) */
  --cyan: var(--brand-text); --violet: var(--brand-text); /* old names, both the Q blue text/icons can take (on black #5984F8: contrast) */
  --glass: rgba(11, 18, 32, .8);
  --aurora-1: transparent; --aurora-2: transparent; /* no colour fields */
  --shadow-1: none;
  --shadow-2: 0 24px 60px rgba(0, 0, 0, .6), 0 0 0 1px var(--line);
  --glow: 0 6px 18px rgba(40, 80, 160, .18);
  /* diseño v1 (Dani 14-oct): degradado de la palabra destacada, rejilla y halo de las tarjetas, tono de las fotos y el icono de Qiu del tema */
  --grad-hl: linear-gradient(90deg, #56F0D8, #45D3F2 50%, #34A1FF);
  --grid-line: rgba(255, 255, 255, .035);
  --halo: radial-gradient(520px 260px at 82% -10%, rgba(60, 110, 200, .16), transparent 70%);
  --img-tone: saturate(.72) brightness(.88);
  --orb-img: url(/qiu/brand/mark-mid.svg); --orb-bg: #050F35;
  --orb-shadow: rgba(0, 0, 0, .55);
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand-text);
  --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-xl: 26px;
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font);
  --font-mark: 'Orbitron', var(--font);
  --ease: cubic-bezier(.22, .61, .36, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 140ms; --t: 240ms;
  --safe-t: calc(env(safe-area-inset-top, 0px) + var(--sb, 0px)); /* --sb: the outage banner's room (status-banner.js) */ --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
  --tabbar-h: 66px;
}
/* 13-oct (tickets 26 y 27 de Marta, iPhone): en la app instalada la barra inferior se veía cortada por el borde (y tapaba el final del contenido): el sistema
   le daba safe-area-inset-bottom = 0 y la barra quedaba sobre el indicador de inicio. En la app instalada y con puntero táctil la zona segura de abajo nunca baja
   de 20 px; todo lo que ya usaba --safe-b (barra, relleno del contenido, hojas) la hereda. */
@media (display-mode: standalone) and (pointer: coarse) { :root { --safe-b: max(env(safe-area-inset-bottom, 0px), 20px); } }
:root[data-theme="light"], :root[data-theme="papel"] {
  color-scheme: light;
  --brand: #1F5FD6; --brand-hover: #1A52BA; --brand-soft: rgba(31, 95, 214, .07); --brand-text: #1D59C9; /* guía de Qiu: azul de marca sobre claro (oscurecido a AA 4.5:1 sobre surface-3, a11y rev30) */
  --bg: #ECEFF4; --surface: #FAFBFC; --surface-2: #E3E8EF; --surface-3: #D9DFE8; /* grises de la marca por capas, no todo blanco (punto 8) */
  --fg: #0E1624; --fg-2: #465163; --muted: #5D6878;
  --line: #DCE2EB; --line-2: #C5CEDB;
  --green: #196D50; --amber: #815800; --red: #BA2428; /* oscurecidos a AA 4.5:1 sobre surface-3 (papel/light), a11y rev30 */
  --glass: rgba(236, 239, 244, .86);
  --shadow-1: 0 1px 2px rgba(14, 22, 36, .05), 0 6px 18px rgba(14, 22, 36, .04);
  --grad-hl: linear-gradient(90deg, #1A4FCC, #2F82FF 50%, #45B4FF); /* punto 22 */
  --grid-line: rgba(14, 22, 36, .04);
  --halo: radial-gradient(520px 260px at 82% -10%, rgba(31, 95, 214, .07), transparent 70%);
  --img-tone: saturate(.78) contrast(.96);
  --orb-img: url(/qiu/brand/qiu-fondo-azul-mid.svg); --orb-bg: #1B52F7;
  --shadow-2: 0 24px 60px rgba(10, 10, 12, .16), 0 0 0 1px var(--line);
  --orb-shadow: rgba(10, 10, 12, .16);
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    color-scheme: light;
    --brand: #1F5FD6; --brand-hover: #1A52BA; --brand-soft: rgba(31, 95, 214, .07); --brand-text: #1D59C9; /* guía de Qiu: azul de marca sobre claro (oscurecido a AA 4.5:1 sobre surface-3, a11y rev30) */
    --bg: #ECEFF4; --surface: #FAFBFC; --surface-2: #E3E8EF; --surface-3: #D9DFE8; /* grises de la marca por capas, no todo blanco (punto 8) */
    --fg: #0E1624; --fg-2: #465163; --muted: #5D6878;
    --line: #DCE2EB; --line-2: #C5CEDB;
    --green: #196D50; --amber: #815800; --red: #BA2428; /* oscurecidos a AA 4.5:1 sobre surface-3 (papel/light), a11y rev30 */
    --glass: rgba(236, 239, 244, .86);
    --shadow-1: 0 1px 2px rgba(14, 22, 36, .05), 0 6px 18px rgba(14, 22, 36, .04);
    --grad-hl: linear-gradient(90deg, #1A4FCC, #2F82FF 50%, #45B4FF); /* punto 22 */
    --grid-line: rgba(14, 22, 36, .04);
    --halo: radial-gradient(520px 260px at 82% -10%, rgba(31, 95, 214, .07), transparent 70%);
    --img-tone: saturate(.78) contrast(.96);
    --orb-img: url(/qiu/brand/qiu-fondo-azul-mid.svg); --orb-bg: #1B52F7;
    --shadow-2: 0 24px 60px rgba(10, 10, 12, .16), 0 0 0 1px var(--line);
    --orb-shadow: rgba(10, 10, 12, .16);
  }
}


/* Colour themes of the client app (Perfil › Tema): the same Q blue, another paper. Papel is light and warm (on top of Día);
   Qiu (blue black), Pizarra (slate) and Ámbar (for the night: warm text, no blue light in text or backgrounds) are dark,
   on top of Noche. Contrast checked with the WCAG formula: fg, fg-2 and muted ≥ 4.5 on bg and surface. */
:root[data-theme="papel"] { --bg: #F3F0E9; --surface: #FFFFFF; --surface-2: #EBE7DE; --surface-3: #E1DCD1; --line: #E0DBD0; --line-2: #C8C1B3; --muted: #636369; --glass: rgba(243, 240, 233, .86); }
:root[data-theme="qiu"] { --bg: #0B0D12; --surface: #11141A; --surface-2: #171B23; --surface-3: #232833; --line: #232833; --line-2: #2F3440; --glass: rgba(17, 20, 26, .8); }
:root[data-theme="pizarra"] { --bg: #262B31; --surface: #303842; --surface-2: #2B333B; --surface-3: #3A434D; --line: #3A434D; --line-2: #4A5560;
  --fg: #ECEFF2; --fg-2: #C9D0D7; --muted: #A7B0BB; --brand-text: #91ACFF; --red: #FF959E; --glass: rgba(38, 43, 49, .86); } /* --red: el de Noche daba 3,7:1 sobre su superficie; --muted/--brand-text aclarados a AA 4.5:1 sobre surface-3 (a11y rev30) */
:root[data-theme="ambar"] { --bg: #0A0704; --surface: #150E07; --surface-2: #1F150B; --surface-3: #2E2011; --line: #2E2011; --line-2: #3E2E1A;
  --fg: #FFD9A0; --fg-2: #D9B27A; --muted: #AD8757; --brand-text: #7A9BFF; --green: #E0A93F; --amber: #FFBD52; --red: #FF7A5C; --glass: rgba(21, 14, 7, .86); }
/* The chat wallpaper's veil: the theme's own background over the picture, so text reads as it does without one. */
:root { --veil: color-mix(in srgb, var(--bg) 60%, transparent); } /* sobre el fondo del chat: antes 78 %, y los fondos casi no se distinguían */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
/* 14-oct (Carla, iPhone real: «fallo de desplazamiento»): Inicio salio ampliado ~6 % y arrastrable de lado, tambien la barra fija de abajo. Causa: con
   el tamano de letra pequeno (--fs .9375) el campo «Escribeme…» queda en 15 px y iOS hace zoom al tocar cualquier campo < 16 px y no lo deshace.
   Campos nunca por debajo de 16 px, sin zoom de pellizco ni de campo, y ninguna pantalla se desplaza de lado (los carruseles llevan su propio overflow-x). */
html, body { max-width: 100%; overflow-x: clip; }
#app, #view { max-width: 100%; overflow-x: clip; }
:is(input, textarea, select):not([type=checkbox], [type=radio], [type=range], [type=file], [type=button], [type=submit], [type=color]) { font-size: max(16px, calc(16px * var(--fs, 1))) !important; }
body {
  margin: 0; min-height: 100dvh; background: var(--bg); color: var(--fg);
  font: 400 calc(16px * var(--fs, 1))/1.6 var(--font); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; margin: 0; }
h1 { font-size: calc(clamp(27px, 5vw, 34px) * var(--fs, 1)); }
h2 { font-size: calc(19px * var(--fs, 1)); }
h3 { font-size: calc(16px * var(--fs, 1)); }
/* Wordmarks («QIU», «Q Pro»…): Orbitron, as Quantum's .cuadrada. Written normally in the HTML, shown in capitals. */
.cuadrada { font-family: var(--font-mark); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
/* The blue second half of a headline (Quantum's .suave): always on its own line. */
.suave { display: block; color: var(--brand-text); }
p { margin: 0; }
a { color: inherit; }
img, svg { display: block; }
[hidden] { display: none !important; }
.muted { color: var(--muted); } .small { font-size: calc(13px * var(--fs, 1)); }
.eyebrow { font: 600 calc(11px * var(--fs, 1))/1.2 var(--font-mark); letter-spacing: .2em; text-transform: uppercase; color: var(--brand-text); margin: 0 4px 10px; } /* diseño v1: Orbitron y azul, como las maquetas */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: var(--brand); color: #fff; }
/* The focus ring is an outline (2px gap, 2px blue: what --focus draws), not a box-shadow: a component that sets its own
   box-shadow (cards, the send button, lists) no longer erases it. A control with its own ring says outline: none. */
:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 2px; border-radius: var(--r-sm); }
#view:focus { outline: none; box-shadow: none; }

/* ---------- shell ---------- */
#app { position: relative; z-index: 1; min-height: 100dvh; }
#view {
  min-width: 0; animation: view-in var(--t) var(--ease);
  /* bottom: the tab bar, its 10px lift and the [Q] sphere standing ~34px above it, plus room to breathe */
  padding: calc(20px + var(--safe-t)) calc(16px + var(--safe-r)) calc(var(--tabbar-h) + 64px + var(--safe-b)) calc(16px + var(--safe-l));
}
.page { max-width: 720px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
/* En ancho las vistas no se quedan en una franja central (Carla, 11/10: «ninguna pantalla está apaisada»): el contenedor común crece hasta
   1280 px. Un formulario suelto no se estira: se queda a ancho de lectura, alineado con su título. En móvil y tableta vertical no cambia nada. */
@media (min-width: 1100px) {
  #view :is(.page, .com, .chat-list, .home) { max-width: 1280px; }
  .page > form { max-width: 720px; }
  .com-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; align-items: start; }
  .com-feed > :only-child { grid-column: 1 / -1; }
}
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

#tabbar {
  position: fixed; z-index: 20; left: calc(12px + var(--safe-l)); right: calc(12px + var(--safe-r)); bottom: calc(10px + var(--safe-b));
  height: var(--tabbar-h); display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid var(--line-2); border-radius: 24px; box-shadow: var(--shadow-2);
}
/* 23-oct (auditoría a11y, WCAG 2.4.11): en el móvil la barra flota abajo y, al tabular, el navegador dejaba el control con el foco entero debajo.
   Al desplazar hacia el foco se reserva su alto, su separación, la esfera [Q] que asoma 34 px y un margen (como entry.css con .entry-cta). Donde la
   barra no sale (un chat, Qiu, la bienvenida y el arranque), nada. :where() la deja sin peso: gana la reserva de lo que tape más (.ps-bar, .ob-hint). */
@media (max-width: 767.98px) {
  :where(html:not(:has(body:is(.chat-open, [data-screen="q"], [data-screen="welcome"], [data-screen="arranque"])))) { scroll-padding-bottom: calc(var(--tabbar-h) + 52px + var(--safe-b)); }
}
#tabbar a {
  display: grid; justify-items: center; gap: 3px; padding: 6px 0; color: var(--muted); text-decoration: none;
  font: 600 calc(11px * var(--fs, 1))/1.1 var(--font); letter-spacing: .01em; transition: color var(--t-fast);
}
#tabbar a:hover { color: var(--fg); }
#tabbar a[aria-current] { color: var(--brand-text); } /* v2: la pestaña activa, icono y nombre en azul y sin píldora detrás */
.tab-ico { display: grid; place-items: center; width: 54px; height: 30px; border-radius: 999px; transition: background var(--t) var(--ease), transform var(--t) var(--spring); }
#tabbar a[aria-current] .tab-ico { background: none; color: var(--brand-text); }
#tabbar a:active .tab-ico { transform: scale(.9); }
.tab-label-long, #split { display: none !important; }
/* La barra va en el DOM en el orden en que se ve (core.js renderTabs: en el movil [Q] en el centro; en el escritorio, arriba), sin «order»: el tabulador
   y el lector siguen el DOM (23-oct (auditoría a11y), WCAG 2.4.3) */

/* the central [Q] */
#tabbar .tab-q { margin-top: -34px; gap: 5px; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.q-btn { position: relative; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; transition: transform var(--t) var(--spring); }
.q-btn::before { /* anillo fino, sin neón ni giro (Dani 14-oct, punto 8) */
  content: ''; position: absolute; inset: -3px; border-radius: 50%; background: var(--brand); box-shadow: var(--glow);
}
/* el icono de Qiu del tema: bocadillo de la guía sobre su disco en Noche, el azul de Dani en claro; los dos a la misma medida (puntos 13 y 17) */
.q-btn::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--orb-bg) var(--orb-img) center / cover no-repeat; }
.q-btn > * { opacity: 0; }
.tab-q:hover .q-btn { transform: translateY(-2px); }
.tab-q.pressing .q-btn { transform: scale(.9); }
.tab-q.pressing .q-btn::before { box-shadow: 0 0 0 3px var(--brand-soft), var(--glow); }

/* desktop & iPad: sidebar | divider | content */
@media (min-width: 768px) {
  #app { display: grid; grid-template-columns: var(--side, 248px) 10px minmax(0, 1fr); }
  #view { grid-row: 1; grid-column: 3; padding: calc(32px + var(--safe-t)) clamp(20px, 4vw, 56px) 56px; }
  #tabbar {
    grid-row: 1; grid-column: 1; position: sticky; top: 0; left: auto; right: auto; bottom: auto; height: 100dvh;
    display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: calc(22px + var(--safe-t)) 12px 22px calc(12px + var(--safe-l));
    border: 0; border-right: 1px solid var(--line); border-radius: 0; box-shadow: none; overflow: hidden; container-type: inline-size;
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    -webkit-backdrop-filter: none; backdrop-filter: none; /* 15-oct (Carla: «la parte de la izquierda tiembla al hacer scroll»): sticky + desenfoque temblaba en Safari y detrás no hay nada que desenfocar (su propia columna) */
  }
  #tabbar a { display: flex; align-items: center; gap: 10px; padding: 4px; border-radius: var(--r); font-size: calc(14.5px * var(--fs, 1)); }
  #tabbar a:hover { background: var(--surface-2); }
  #tabbar a[aria-current]:not(.tab-q):not(.side-hl) { background: var(--brand-soft); } /* v2: en el ordenador se marca la fila entera */
  #tabbar [data-tab="profile"] { margin-top: auto; } /* Perfil, al pie de la barra, aparte de la navegación (Carla, 12-oct) */
  .tab-ico { width: 40px; height: 36px; border-radius: 12px; flex: none; }
  #tabbar .tab-q {
    margin: 0 0 16px; padding: 8px; gap: 12px; color: var(--fg);
    background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 38%, transparent);
  }
  #tabbar .tab-q:hover { background: color-mix(in srgb, var(--brand) 22%, transparent); }
  .q-btn { width: 38px; height: 38px; flex: none; } .q-btn img { width: 30px; height: 30px; }
  .tab-q .tab-label { display: none; } .tab-label-long { display: inline !important; font-family: var(--font-display); font-weight: 600; }
  #split { display: block !important; grid-row: 1; grid-column: 2; position: sticky; top: 0; height: 100dvh; cursor: col-resize; touch-action: none; border-radius: 0; }
  #split::after { content: ''; position: absolute; inset: 0 4px; border-radius: 2px; transition: background var(--t-fast); }
  #split:hover::after, #split:focus-visible::after, #split.dragging::after { background: var(--brand); }
  #split:focus-visible { outline: none; }
  .toast { bottom: calc(28px + var(--safe-b)) !important; }
  /* Barra de ordenador llena (components/side-more.js): el centro tiene su propio scroll y Perfil sigue al pie */
  #tabbar .side-mid { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 6px -6px 0; padding: 0 6px; display: flex; flex-direction: column; gap: 1px; scrollbar-width: thin; }
  #tabbar .side-mid + .side-foot + [data-tab="profile"] { margin-top: 0; }
  #tabbar .side-h { display: flex; align-items: center; justify-content: space-between; min-height: 30px; margin: 16px 0 2px; padding: 0 2px 0 16px; }
  #tabbar .side-hl { padding: 0; border-radius: 6px; font-size: calc(12.5px * var(--fs, 1)); font-weight: 600; color: var(--muted); }
  #tabbar a.side-hl:hover { background: none; color: var(--fg); } #tabbar a.side-hl[aria-current] { background: none; color: var(--fg); }
  #tabbar .side-add { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
  #tabbar .side-add:hover { background: var(--surface-2); color: var(--fg); }
  /* Barra llena (patron de Claude.ai): todo el menu con el mismo formato y color (Inicio, Chats, Proyectos, Agentes, Academia, Buscar); debajo Recientes, el pie
     y Perfil. Ese orden lo pone el DOM (core.js renderTabs), no «order»: el tabulador y el lector lo recorren igual que se ve (23-oct (auditoría a11y)) */
  #tabbar.side-full > .side-foot { margin-top: auto; } #tabbar.side-full > .side-foot:empty + [data-tab="profile"] { margin-top: auto; } /* Perfil abajo del todo aunque no haya Recientes (en Chats no salen) (Carla, 13-oct) */
  #tabbar.side-full a:not(.tab-q):not(.side-brand):not(.side-hl):not(.side-row):not(.side-invite):not(.side-plan) { color: var(--fg); font-weight: 500; }
  #tabbar.side-full a[aria-current]:not(.tab-q):not(.side-brand):not(.side-hl):not(.side-row):not(.side-invite):not(.side-plan) { font-weight: 600; }
  #tabbar .side-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 2px 4px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: calc(13.5px * var(--fs, 1)); color: var(--fg); text-align: left; cursor: pointer; }
  #tabbar .side-row:hover { background: var(--surface-2); }
  #tabbar .side-row[aria-current] { background: var(--surface-2); }
  #tabbar .side-lead { display: inline-grid; place-items: center; width: 40px; flex: none; }
  #tabbar .side-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #tabbar .side-new { color: var(--muted); }
  #tabbar .side-row .chat-av { --s: 24px; width: 24px; height: 24px; font-size: calc(10px * var(--fs, 1)); border-radius: 50%; }
  #tabbar .side-ic { display: inline-grid; place-items: center; color: var(--muted); }
  #tabbar .side-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
  #tabbar .side-unread { width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--brand); flex: none; }
  #tabbar .side-foot { display: grid; gap: 6px; margin: 8px 0 6px; }
  #tabbar .side-foot:empty { display: none; }
  #tabbar .side-theme { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: none; color: var(--fg-2); font: inherit; font-size: calc(14px * var(--fs, 1)); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
  #tabbar .side-theme:hover { background: var(--surface-2); color: var(--fg); } #tabbar .side-theme:active { background: var(--brand-soft); } #tabbar .side-theme svg { flex: none; }
  #tabbar .side-invite { align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px 6px 3px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--fg); font-size: calc(13px * var(--fs, 1)); }
  #tabbar .side-invite svg { flex: none; color: var(--brand-text); }
  #tabbar .side-invite > svg:not(.side-qr-ico) { box-sizing: content-box; width: 22px; height: 22px; padding: 0 9px; } /* misma columna de icono y mismo inicio de texto que Inicio y Perfil (15-oct) */
  #tabbar .side-invite > span { display: grid; gap: 2px; min-width: 0; } #tabbar .side-invite small { color: var(--muted); font-size: calc(12px * var(--fs, 1)); }
  #tabbar .side-plan { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: calc(12px * var(--fs, 1)); color: var(--fg-2); }
  #tabbar .side-plan::before { content: ''; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--green); }
  #tabbar .side-invite:has(.side-qr) { align-items: center; gap: 12px; padding: 8px 10px 8px 8px; }
  #tabbar .side-qr { flex: none; width: 56px; height: 56px; padding: 4px; border-radius: 10px; background: #fff; line-height: 0; cursor: zoom-in; transition: transform var(--t) var(--spring); }
  #tabbar .side-qr-ico { display: none; }
  #tabbar .side-qr:hover { transform: scale(1.06); } #tabbar .side-qr svg { width: 100%; height: 100%; margin: 0; }
  @container (max-width: 150px) { /* barra estrecha: del pie queda solo el QR, encima del Perfil */
    .side-mid, .side-foot > :not(.side-invite, .side-theme), .side-invite > span:not(.side-qr), .side-theme > span { display: none !important; }
    #tabbar .side-theme { width: 40px; min-height: 36px; margin: 0 auto; padding: 0; justify-content: center; }
    #tabbar .side-foot { margin: auto 0 8px; } #tabbar .side-invite, #tabbar .side-invite:has(.side-qr) { padding: 0; background: none; justify-content: center; }
    #tabbar .side-invite > .side-qr, #tabbar .side-invite > svg:not(.side-qr-ico) { display: none; } #tabbar .side-invite .side-qr-ico { display: block; margin: 0; color: var(--fg); }
    #tabbar .side-invite { width: 40px; min-height: 36px; margin: 0 auto; border-radius: 12px; align-items: center; } #tabbar .side-invite:hover { background: var(--surface-2) !important; }
    #tabbar { padding-inline: 10px; }
  }
  @container (max-width: 150px) {
    .tab-label, .tab-label-long { display: none !important; }
    #tabbar a { justify-content: center; }
    #tabbar a:hover { background: none; } #tabbar a:not([aria-current]):not(.tab-q):hover .tab-ico { background: var(--surface-2); } /* barra estrecha: al pasar el cursor, la misma forma que la opcion activa (Dani, 13-oct) */
    #tabbar .tab-q, #tabbar .tab-q:hover { padding: 4px; background: none; border-color: transparent; } /* barra estrecha: solo el circulo de Qiu, sin el recuadro azul (Dani, 12-oct) */
    #tabbar [data-tab="profile"] { margin-top: auto !important; } /* Perfil, abajo del todo tambien con la barra estrecha (como ChatGPT) */
    #tabbar .side-foot:not(:empty) + [data-tab="profile"] { margin-top: 0 !important; } /* si hay QR, el que empuja hacia abajo es el pie */
  }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border-radius: 999px; border: 1px solid var(--brand); background: var(--brand); color: #fff; cursor: pointer;
  font: 600 calc(15px * var(--fs, 1))/1.35 var(--font); text-decoration: none; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease), box-shadow var(--t-fast), opacity var(--t-fast);
}
.btn:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn:active { transform: scale(.97); }
.btn:focus-visible { border-radius: 999px; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .55; pointer-events: none; }
.btn.ghost { background: transparent; color: var(--fg); border-color: var(--line-2); }
.btn.ghost:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); border-color: var(--fg); }
.btn.quiet { background: transparent; border-color: transparent; color: var(--fg-2); }
.btn.quiet:hover { background: var(--surface-2); color: var(--fg); }
.btn.danger { background: var(--danger-bg); border-color: var(--danger-bg); }
.btn.danger:hover { background: var(--danger-bg); border-color: var(--danger-bg); filter: brightness(1.08); }
.btn.danger-soft { background: color-mix(in srgb, var(--red) 12%, transparent); border-color: transparent; color: var(--red); }
.btn.danger-soft:hover { background: color-mix(in srgb, var(--red) 20%, transparent); }
/* Nothing tappable under 44 px (the client app's rule): .sm is smaller type, not a smaller target */
.btn.sm { min-height: 44px; padding: 0 14px; font-size: calc(13.5px * var(--fs, 1)); }
.btn.icon { width: 44px; padding: 0; } .btn.icon.sm { width: 44px; }
.btn.block { width: 100%; }

/* ---------- form controls ---------- */
.field { display: grid; gap: 6px; }
label, .label { font: 600 calc(13px * var(--fs, 1))/1.3 var(--font); color: var(--fg-2); }
:where(.input, input:not([type=checkbox], [type=radio], [type=file], [type=range]), select, textarea) {
  width: 100%; min-height: 46px; padding: 11px 14px; border-radius: var(--r); border: 1px solid var(--line-2);
  background: var(--surface-2); color: var(--fg); font: 400 calc(15px * var(--fs, 1))/1.4 var(--font); -webkit-appearance: none; appearance: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
:where(textarea) { resize: vertical; min-height: 96px; }
:where(select) { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%237D869A' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
::placeholder { color: var(--muted); }
:where(input) { text-overflow: ellipsis; } /* un texto de guia largo (ruso, griego, finlandes) acaba en «…» y no cortado a media palabra */
:where(input, select, textarea, .input):focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); border-radius: var(--r); }
.switch { /* a 50x44 target; the 30 px track is ::before */
  -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 50px; height: 44px; margin: 0; cursor: pointer;
  border: 0; border-radius: 999px; background: none;
}
.switch::before { content: ''; position: absolute; inset: 7px 0; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line-2); transition: background var(--t) var(--ease); }
.switch::after { content: ''; position: absolute; top: 11px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); transition: transform var(--t) var(--spring); }
.switch:checked::before { background: var(--brand); border-color: transparent; }
.switch:checked::after { transform: translateX(20px); }
.switch:focus-visible { outline: none; } .switch:focus-visible::before { box-shadow: var(--focus); }
.seg { display: inline-grid; grid-auto-flow: column; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.seg button { border: 0; background: none; color: var(--fg-2); font: 600 calc(13px * var(--fs, 1))/1 var(--font); min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 999px; cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.seg button:hover { color: var(--fg); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 0 0 1px var(--line-2); }
.seg button:focus-visible { border-radius: 999px; }

/* ---------- surfaces, lists, chips ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; }
ol.list, ul.list { margin: 0; padding: 0; list-style: none; } /* step lists (Bitwarden, add to home screen, /android) */
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-height: 60px; padding: 12px 16px; }
.list > * + * { border-top: 1px solid var(--line); }
.list > :focus-visible { outline: none; border-radius: 0; box-shadow: inset 0 0 0 2px var(--brand-text); } /* .list recorta con su radio (overflow): el aro va por dentro y las esquinas las recorta la lista, asi nunca se sale */
.sheet:focus-visible { outline: none; }
.row .body { flex: 1; min-width: 4em; } /* narrower than this, .end drops to its own line */
.row .title { font-weight: 600; overflow-wrap: anywhere; }
.row .title label { font: inherit; color: inherit; }
.row .sub { color: var(--muted); font-size: calc(13px * var(--fs, 1)); line-height: 1.4; overflow-wrap: anywhere; }
.row .end { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
a.row, button.row { width: 100%; color: inherit; text-decoration: none; text-align: left; background: none; border: 0; font: inherit; cursor: pointer; transition: background var(--t-fast); }
a.row:hover, button.row:hover { background: var(--surface-2); }
.row.tap { cursor: pointer; transition: background var(--t-fast); } .row.tap:hover { background: var(--surface-2); } .row.tap .conn-open { text-decoration: none; } /* Perfil › Conexiones: the row opens its detail (con el teclado y el lector, el enlace del nombre: 23-oct (auditoría a11y)) */
.row.tap > .end > .ico:last-child { color: var(--fg-3, var(--fg-2)); }
button.status { border: 0; cursor: pointer; font: 600 calc(12px * var(--fs, 1))/1.4 var(--font); } button.status:hover { background: color-mix(in srgb, currentColor 22%, transparent); } button.status:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.conn-why { margin-top: 4px; color: var(--amber); font-size: calc(12.5px * var(--fs, 1)); overflow-wrap: anywhere; } /* why a connection needs reconnecting */
.tile { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--surface-2); color: var(--fg-2); border: 1px solid var(--line); overflow: hidden; }
.tile.brand { background: var(--brand-soft); color: var(--brand-text); border-color: transparent; }
.tile img { width: 20px; height: 20px; }
.tile .brand-logo { width: 100%; height: 100%; } /* icons.js brandLogo: the service's own logo fills its tile */
.tile.q-tile { background: #fff; } .tile.q-tile img { width: 24px; height: 24px; } /* the «Q» of a plan: it has no white version */
:root:not([data-theme="light"]):not([data-theme="papel"]) .tile img.logo { filter: invert(1); }
@media (prefers-color-scheme: light) { :root[data-theme="system"] .tile img.logo { filter: none; } }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 8px; border-radius: 999px; font: 600 calc(12px * var(--fs, 1))/1.4 var(--font); white-space: nowrap; background: color-mix(in srgb, currentColor 13%, transparent); color: var(--fg-2); }
.status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.wrap { white-space: normal; align-items: flex-start; } /* una frase entera, no una pastilla: parte de linea */
.status.wrap::before { margin-top: .45em; }
.status.ok { color: var(--green); } .status.warn { color: var(--amber); } .status.err { color: var(--red); } .status.info { color: var(--cyan); }
a.status { text-decoration: none; } /* a pill that opens something (Perfil › Invitar: «Conectados» → the contact) */
.badge { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brand); color: #fff; font: 700 calc(11px * var(--fs, 1))/18px var(--font); text-align: center; }
.avatar { --s: 64px; position: relative; flex: none; display: grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden; color: var(--brand-text); font: 600 calc(var(--s) * .38)/1 var(--font-display); background: color-mix(in srgb, var(--brand) 18%, var(--surface)); box-shadow: none; } /* v2 (d): el formato de Chats, fondo suave y la letra en color */
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wordmark { direction: ltr; display: inline-flex; align-items: center; gap: 10px; font: 600 calc(18px * var(--fs, 1))/1 var(--font-mark); letter-spacing: .1em; text-decoration: none; color: var(--fg); }
.wordmark img { width: 30px; height: 30px; filter: drop-shadow(0 4px 10px var(--orb-shadow)); }
.empty { display: grid; justify-items: center; gap: 6px; padding: 26px 20px; text-align: center; color: var(--muted); }
.empty-add { position: relative; display: grid; justify-items: center; align-content: center; gap: 12px; width: 100%; min-height: calc(180px * var(--fs, 1)); padding: 28px 20px; box-sizing: border-box; border: 2px dashed var(--line-2); border-radius: var(--r-xl); background: radial-gradient(60% 60% at 50% 0%, var(--brand-soft), transparent); color: var(--fg); font: inherit; text-align: center; text-decoration: none; cursor: pointer; }
.ag-grid > .empty-add { grid-column: 1 / -1; }
.empty-add .ea-plus { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--brand); color: #fff; }
.empty-add b { font-weight: 600; font-size: calc(16px * var(--fs, 1)); }
.empty-add:hover { border-color: var(--brand); }
.empty-add:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 3px; } .empty-add:has(input:focus-visible) { outline: 2px solid var(--brand-text); outline-offset: 3px; } .list > .empty-add:focus-visible { outline: none; } /* 23-oct (auditoría a11y, WCAG 2.4.7): el aro con un color (--focus es una lista de sombras: metida en el outline lo dejaba sin aro, y sin el global); la caja de subir (label) lo enseña cuando el foco está en su input escondido; dentro de .list ya va por dentro (:328) */
.empty .ico { width: 28px; height: 28px; color: var(--fg-2); margin-bottom: 4px; }
.skeleton { width: 100%; min-height: 60px; border-radius: var(--r-lg); background: linear-gradient(90deg, var(--surface), var(--surface-2), var(--surface)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }

/* ---------- chat bubbles & composer ---------- */
.bubbles { display: grid; gap: 8px; align-content: start; }
.bubble { max-width: min(82%, 560px); padding: 10px 14px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; animation: pop var(--t) var(--ease); }
.bubble.me { justify-self: end; background: var(--brand); border-color: transparent; color: #fff; border-bottom-right-radius: 6px; }
.bubble.qiu { justify-self: start; border-bottom-left-radius: 6px; }
.bubble .meta { display: block; margin-top: 4px; font-size: calc(11.5px * var(--fs, 1)); opacity: .65; }
.composer { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 18px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-1); }
.composer:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.composer input:not([type]), .composer input[type=text] { flex: 1; min-height: 40px; padding: 0; border: 0; background: none; box-shadow: none !important; }
.composer .btn { width: 44px; min-height: 44px; padding: 0; }

/* ---------- dialogs, sheets, toast ---------- */
dialog { color: var(--fg); }
dialog::backdrop { background: rgba(4, 6, 10, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dialog { width: min(92vw, 420px); padding: 24px; border: 1px solid var(--line-2); border-radius: 26px; background: var(--surface); box-shadow: var(--shadow-2); animation: pop var(--t) var(--ease); }
.dialog h2 { margin-bottom: 8px; } .dialog p { color: var(--fg-2); }
.actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.actions .btn { flex: 1; }
.sheet {
  width: 100%; max-width: 560px; max-height: calc(100dvh - 56px - var(--safe-t)); margin: auto auto 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 20px calc(24px + var(--safe-b)); border: 1px solid var(--line-2); border-bottom: 0; border-radius: 28px 28px 0 0;
  background: var(--surface); box-shadow: var(--shadow-2); animation: sheet-up var(--t) var(--ease);
}
.sheet > .sheet-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: center; height: 48px; margin: 0 -20px; background: var(--surface); touch-action: none; cursor: grab; }
.sheet-bar i { width: 40px; height: 5px; border-radius: 3px; background: var(--line-2); }
.sheet-x { position: absolute; right: 10px; top: 6px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: none; color: var(--fg-2); cursor: pointer; }
.sheet-x::after { content: ''; position: absolute; inset: -4px; } /* 21-oct (auditoría rev21, a11y): area tactil 44x44 (WCAG 2.5.5) sin cambiar el circulo visible de 36px */
.sheet > * { display: grid; gap: 16px; }
@media (min-width: 768px) {
  /* 13-oct (repaso): el boton del final del cuadro no se queda pegado al borde redondeado. */
  .sheet { margin: auto; padding-bottom: 40px; border-bottom: 1px solid var(--line-2); border-radius: 28px; animation-name: pop; }
  .sheet-bar i { display: none; } .sheet > .sheet-bar { height: 52px; cursor: default; }
}
.toast {
  position: fixed; z-index: 100; left: 50%; bottom: calc(var(--tabbar-h) + 44px + var(--safe-b)); transform: translateX(-50%); width: max-content;
  max-width: min(92vw, 440px); padding: 12px 18px; border-radius: 16px; font-weight: 500;
  background: color-mix(in srgb, var(--surface-3) 94%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--line-2); box-shadow: var(--shadow-2); animation: toast-in var(--t) var(--spring);
  pointer-events: none; /* 23-oct (auditoría a11y): con una hoja abierta el aviso va dentro de ella (core.js toast) y queda encima de sus campos; no se come los toques */
}
/* 23-oct (deshacer-con-tiempo): la barra de «Deshacer» ES un toast pero SÍ debe poder pulsarse. */
.toast.chat-undo, .toast[data-undo] { pointer-events: auto; }
body[data-screen="q"] .toast { bottom: calc(110px + var(--safe-b)); }

/* ---------- [Q] voice screen ---------- */
body[data-screen="q"] #tabbar, body[data-screen="q"] #split { display: none !important; }
.q {
  position: fixed; inset: 0; z-index: 30; display: grid; grid-template-rows: auto 1fr auto; gap: 12px; overflow: hidden;
  padding: calc(12px + var(--safe-t)) calc(16px + var(--safe-r)) calc(18px + var(--safe-b)) calc(16px + var(--safe-l));
  background: radial-gradient(55% 42% at 50% 36%, rgba(0, 65, 245, .22), transparent 72%), var(--bg);
}
.q-top { display: flex; align-items: center; justify-content: space-between; }
.q-status { font: 600 calc(15px * var(--fs, 1))/1 var(--font-display); color: var(--fg-2); text-align: center; }
.q-stage { display: grid; place-items: center; align-content: center; gap: 20px; min-height: 0; }
.q-orb { --lvl: 0; position: relative; width: min(54vw, 36vh, 240px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transform: scale(calc(1 + var(--lvl) * .12)); transition: transform 90ms linear; }
.q-orb:focus-visible { border-radius: 50%; }
.q-orb img { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 26px 40px var(--orb-shadow)); }
.q-halo { position: absolute; inset: -22%; border-radius: 50%; background: radial-gradient(circle, rgba(0, 65, 245, .55), rgba(89, 132, 248, .16) 45%, transparent 68%); opacity: calc(.35 + var(--lvl) * .9); filter: blur(10px); animation: breathe 3.4s ease-in-out infinite; }
.q[data-state="listening"] .q-halo { animation-duration: 1.4s; }
.q[data-state="thinking"] .q-orb img { animation: think 1.8s ease-in-out infinite; }
.q[data-state="thinking"] .q-orb { cursor: progress; }
.q-wave { width: min(86vw, 480px); height: 64px; opacity: 0; transition: opacity var(--t); }
.q-timer { font: 700 calc(17px * var(--fs, 1))/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--fg-2); letter-spacing: .04em; opacity: 0; }
.q[data-state="listening"] :is(.q-wave, .q-timer) { opacity: 1; }
.q-hint { color: var(--muted); text-align: center; min-height: 1.5em; }
.q-note { max-width: min(92vw, 420px); margin-top: -8px; padding: 7px 14px; border-radius: 14px; font-size: calc(13px * var(--fs, 1)); text-align: center; color: var(--fg-2);
  background: color-mix(in srgb, var(--amber) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); animation: pop var(--t) var(--ease); }
.q-note[hidden] { display: none; }
.q-log { width: min(100%, 640px); max-height: 32dvh; margin: 0 auto; overflow-y: auto; overscroll-behavior: contain; }
.q-log:empty { display: none; }
.q-bottom { display: grid; gap: 12px; justify-items: center; width: min(100%, 640px); margin: 0 auto; }
.q-controls { display: flex; gap: 12px; }
.q[data-state="listening"] .q-controls .btn { min-width: 132px; }
.q-type { width: 100%; }
.q-try { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: min(92vw, 520px); }
.q-try[hidden] { display: none; }
.q-try .chip, .chat-tip { min-height: 44px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 22px; background: var(--surface-2); color: var(--fg-2); font: 500 calc(13.5px * var(--fs, 1))/1.3 var(--font); cursor: pointer; }
.chat-tip { margin: 0 12px 6px; text-align: left; }
.chat-tip[hidden] { display: none; }

/* ---------- profile ---------- */
.identity { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 20px; }
.identity > .btn { margin-left: auto; }
@media (max-width: 420px) { .identity [data-edit] { width: 44px; padding: 0; } .identity [data-edit] .lbl { display: none; } }
.identity .who { flex: 1 1 5em; min-width: 0; } /* narrow enough that the edit button stays on the name's row at 320 px */
.identity .who p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.identity h1 { font-size: calc(24px * var(--fs, 1)); overflow-wrap: anywhere; }
.identity .avatar-wrap { position: relative; flex: none; }
.identity .avatar { --s: 72px; }
.identity .avatar-edit { position: absolute; right: -14px; bottom: -14px; width: 44px; height: 44px; background: none; border-color: transparent; } /* 44 px to tap, a 28 px dot to see */
.identity .avatar-edit::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--surface); transition: background var(--t-fast); }
.identity .avatar-edit:hover::before { background: var(--brand-hover); } .identity .avatar-edit > * { position: relative; }
.group { display: grid; grid-template-columns: minmax(0, 1fr); }
.group-sub { margin: -4px 4px 12px; color: var(--muted); font-size: calc(13px * var(--fs, 1)); }
.stack { display: grid; gap: 16px; }
.row select { width: auto; min-height: 44px; padding-top: 7px; padding-bottom: 7px; }
.row .body > .status { margin-top: 6px; }
.row.danger .title, .row.danger .tile { color: var(--red); }
/* Perfil's sections inside a block (Instinct-like): a title with its lead and «+» on the right, quiet empty lines,
   folded extras (<details>), and rows that are there but switched off («Próximamente»). */
.p-sub { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 12px; margin: 22px 4px 10px; }
.p-sub:first-child { margin-top: 0; }
.p-sub > div:first-child { flex: 1 1 14em; }
.p-fold > summary > .p-sub { margin-top: 22px; }
.p-sub h3 { font: 700 calc(17px * var(--fs, 1))/1.25 var(--font-display); }
.p-sub p { margin-top: 3px; color: var(--muted); font-size: calc(13px * var(--fs, 1)); line-height: 1.4; }
.p-sub > :last-child:not(:first-child) { flex: none; }
.p-sub-end, .p-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.p-none { padding: 16px; color: var(--muted); font-size: calc(14px * var(--fs, 1)); }
.p-fold > summary { list-style: none; cursor: pointer; min-height: 44px; border-radius: var(--r-lg); }
.p-fold > summary::-webkit-details-marker { display: none; }
.p-fold > summary .ico { transform: rotate(90deg); transition: transform var(--t) var(--ease); color: var(--muted); }
.p-fold[open] > summary .ico { transform: rotate(-90deg); }
.p-secret { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; color: var(--fg-2); }
.row.off { color: var(--muted); } .row.off .tile { opacity: .55; } /* «Próximamente»: dim the drawing, never the text (opacity took it under 4.5:1) */
.row.off .status { background: var(--surface-2); color: var(--fg-2); }
.p-field { display: flex; gap: 8px; } .p-field input { flex: 1; min-width: 0; }
/* Perfil › Voz: one row per voice, radio + name + play */
.voice-opt { border-top: 1px solid var(--line); min-height: 52px; padding-block: 8px; }
.voice-opt input { width: 20px; height: 20px; margin: 0 10px; accent-color: var(--brand); flex: none; }
.voice-opt label { cursor: pointer; }
.voice-opt:has(:checked) { background: var(--brand-soft); }
.profile-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; color: var(--muted); font-size: calc(13px * var(--fs, 1)); }
.profile-foot a, .profile-foot span { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-underline-offset: 3px; } /* «Qiu» on the same line as the links */
/* invite: Share drops under the text, full width, when the row gets narrow. A link shown in a row: one line, no https:// */
.invite-row .body { flex: 999 1 10em; }
.invite-row > .btn { flex: 1 0 auto; }
.url-line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Perfil sections: <details> folded by default for the advanced ones; native keyboard support */
.psec { margin: 0 0 14px; } .psec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 4px; font: 700 calc(17px * var(--fs, 1))/1.2 var(--font-display); }
.psec > summary::-webkit-details-marker { display: none; } .psec > summary::after { content: '›'; font-size: calc(22px * var(--fs, 1)); color: var(--muted); transition: transform .15s; } .psec[open] > summary::after { transform: rotate(90deg); }
.psec > summary:focus-visible { outline: 2px solid var(--brand, currentColor); outline-offset: 2px; border-radius: 8px; }
.psec > .group + .group, .psec > .group + .psec, .psec > .psec + .group { margin-top: 28px; } /* dentro de un desplegable los grupos van uno tras otro sin el hueco de .page */
.psec.sub > summary { font-size: calc(14px * var(--fs, 1)); color: var(--muted); } .psec, .psec .group { min-width: 0; }
.group, .identity, .psec { scroll-margin-top: 24px; } /* old links (/vault, /trusted…) land on their section */
.link-box { font: 500 calc(13px * var(--fs, 1))/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--fg-2); overflow-wrap: anywhere; }
/* «Conecta tu IA» (components/own-ai.js): numbered steps, and ChatGPT's one-time code big enough to copy by eye */
.own-flow { display: grid; gap: 22px; } .own-err { margin: 0; color: var(--red); font-size: calc(14px * var(--fs, 1)); }
.own-step { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.own-step > div { display: grid; gap: 10px; justify-items: start; } .own-step p { margin: 0; } .own-step .field { width: 100%; }
.own-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-text); font: 700 calc(14px * var(--fs, 1))/1 var(--font-display); }
.own-h { display: flex; align-items: center; gap: 12px; } .own-h .brand-logo { width: 36px; height: 36px; border-radius: 10px; flex: none; }
.own-code { font: 700 calc(26px * var(--fs, 1))/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; color: var(--fg); user-select: all; }

/* «Montar tu servidor» (screens/developers.js): the order's four steps, done ones ticked and the current one in brand */
.srv-steps { display: grid; gap: 10px; margin: 0; padding: 14px 16px; list-style: none; counter-reset: srv; }
.srv-steps li { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: calc(14px * var(--fs, 1)); counter-increment: srv; }
.srv-steps li::before { content: counter(srv); display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); font: 700 calc(12px * var(--fs, 1))/1 var(--font-display); }
.srv-steps li.done { color: var(--fg-2); } .srv-steps li.done::before { content: '✓'; background: var(--brand-soft); color: var(--brand-text); border-color: transparent; }
.srv-steps li[aria-current] { color: var(--fg); font-weight: 600; } .srv-steps li[aria-current]::before { background: var(--brand); color: #fff; border-color: transparent; }

/* ---------- Qiu's states (components/qiu-state.js): the brand pack's drawings, each with its own small motion ---------- */
.qiu-st { display: block; transform-origin: 50% 70%; }
.agent-face { filter: none; } /* el personaje del agente (components/agent-face.js) */
.agent-char { flex: none; display: inline-block; object-fit: contain; vertical-align: middle; } /* el personaje de un superagente (Dani, 17-oct): /qiu/agentes/<kind>.svg, con el mismo tamaño que la cara */
.qiu-st[data-s="escuchando"] { animation: qiu-listen 1.3s ease-in-out infinite; }
.qiu-st[data-s="pensando"] { animation: think 1.8s ease-in-out infinite; }
.qiu-st[data-s="actuando"] { animation: qiu-hop .75s cubic-bezier(.3, 0, .4, 1) infinite; }
.qiu-st[data-s="exito"] { animation: qiu-hop .5s cubic-bezier(.3, 0, .4, 1) 2; }
.qiu-st[data-s="alerta"] { animation: qiu-nudge .9s ease-in-out 2; }
.qiu-st[data-s="error"] { animation: qiu-shake .42s ease-in-out 2; }
/* 18-oct (Marta: «убери все тени»): el personaje de un superagente va sin sombra también con estado: ni la del «escribiendo…» (chat.css)
   ni el halo azul de «pensando» (la animación think lo pone en filter; solo !important le gana a una animación). Se mueve igual. */
.qiu-st:has(> img.agent-char) { filter: none !important; }
.boot { display: grid; place-items: center; align-content: start; gap: 28px; padding-top: 18dvh; min-height: 70dvh; animation: view-in var(--t) var(--ease); }
/* 14-oct: esqueleto de Inicio mientras carga: la pantalla ya tiene forma antes de tener datos */
.boot-sk { display: grid; gap: 12px; width: min(100% - 32px, 560px); margin: 0 auto; padding-top: 12px; } .boot-sk i { display: block; height: 72px; border-radius: var(--r, 16px); background: var(--surface-3); opacity: .7; animation: boot-sk 1.4s ease-in-out infinite; } .boot-sk i:first-child { height: 96px; }
@keyframes boot-sk { 50% { opacity: .35; } } @media (prefers-reduced-motion: reduce) { .boot-sk i { animation: none; } }
.boot img { width: 44px; height: 44px; opacity: .85; } /* la carga es discreta: el logo pequeno y sin halo (Carla, 12-oct: «un qiu gigante antes de cargar») */

/* ---------- motion ---------- */
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes pop { from { opacity: 0; transform: scale(.96); } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 14px); } }
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes breathe { 50% { transform: scale(1.07); } }
@keyframes float { 50% { transform: translateY(-7px); } }
@keyframes think { 50% { transform: rotate(-10deg) scale(.97); filter: drop-shadow(0 0 34px rgba(89, 132, 248, .55)) brightness(1.06); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes qiu-listen { 50% { transform: scale(1.07); } }
@keyframes qiu-hop { 40% { transform: translateY(-16%) scale(1.02, .98); } 70% { transform: translateY(0) scale(1.05, .94); } }
@keyframes qiu-nudge { 25% { transform: rotate(-9deg); } 75% { transform: rotate(9deg); } }
@keyframes qiu-shake { 25% { transform: translateX(-7%); } 75% { transform: translateX(7%); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .q-orb { transform: none; }
}

/* banners (components/status-banner.js): an outage for everyone, no connection, a new version. Stacked, never on top of each other */
.status-stack {
  position: fixed; z-index: 30; top: calc(8px + env(safe-area-inset-top, 0px)); /* NO --safe-t: ya lleva la altura de este bloque (--sb) y lo bajaba encima de la cabecera (4-oct) */ left: 50%; transform: translateX(-50%); width: min(640px, calc(100% - 24px));
  display: grid; gap: 8px; justify-items: center; pointer-events: none;
}
.status-banner {
  pointer-events: auto; width: 100%; box-sizing: border-box;
  display: flex; align-items: center; gap: 10px; padding: 2px 6px 2px 14px; border-radius: 16px; font: 500 calc(13.5px * var(--fs, 1))/1.4 var(--font); color: var(--fg);
  background: color-mix(in srgb, var(--amber) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); box-shadow: var(--shadow-2);
}
.status-banner span { flex: 1; }
.status-banner a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); font-weight: 700; white-space: nowrap; text-underline-offset: 3px; }
/* Chuleta de atajos (components/shortcuts.js) */
.kbd-help { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 0; align-items: baseline; }
.kbd-help dt { white-space: nowrap; }
.kbd-help dd { margin: 0; color: var(--fg-2); }
.kbd-help kbd { font: inherit; font-size: calc(13px * var(--fs, 1)); padding: 2px 7px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface-2); }
.look { flex-basis: 100%; }
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.themes button { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--fg); font: 600 calc(13px * var(--fs, 1))/1.2 var(--font); text-align: left; cursor: pointer; }
.themes button[aria-pressed="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.themes .sw { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-2); }
/* Fondos del chat (como WhatsApp): categorias, cada fondo de UN solo color; la miniatura lleva su fondo entero puesto en linea. */
.walls { display: grid; gap: 16px; padding: 6px 0; }
.wf-h { margin: 0 0 8px; font: 700 calc(13px * var(--fs, 1))/1.3 var(--font); color: var(--fg-2); }
.wf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 10px; padding: 4px; }
.walls button, .wf-add { display: grid; place-items: center; width: 100%; aspect-ratio: 9 / 16; height: auto; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--fg-2); font: 600 calc(12px * var(--fs, 1))/1.2 var(--font); text-align: center; cursor: pointer; }
.walls button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand); }
/* 23-oct (auditoría a11y): el input va encima de la miniatura, invisible pero enfocable (como .hb-add de personalizar.js); con display:none «Elegir una foto»
   no existía para el teclado ni para el lector. Con el foco del teclado el aro lo pinta la miniatura: el input, invisible, no puede. */
.wf-add { position: relative; } .wf-add input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .wf-add span { padding: 0 4px; }
.wf-add:has(input:focus-visible) { outline: 2px solid var(--brand-text); outline-offset: 2px; }
.wf-opt { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 2px; font: 600 calc(14px * var(--fs, 1))/1.3 var(--font); }
.wf-opt input[type=range] { flex: 0 1 55%; accent-color: var(--brand); }

/* Face ID lock (components/face-lock.js): over the app, which stays behind it blurred, like the phone's own lock screen. */
.face-lock { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px;
  background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2); }
body:has(.face-lock) .toast { display: none; } /* un aviso nunca enseña contenido por encima del cerrojo */
.face-lock-card { display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(320px, 100%); text-align: center; color: var(--fg); }
.face-lock-card p { margin: 0; color: var(--fg-2); line-height: 1.45; }
.face-lock-card .btn { width: 100%; }
.status-banner.offline { pointer-events: none; width: auto; padding: 6px 14px; border-radius: 999px; color: var(--fg-2); background: var(--surface-2); border-color: var(--line-2); } /* taps go through: the back button under it still works */
.status-banner.new { background: color-mix(in srgb, var(--brand) 14%, var(--surface)); border-color: color-mix(in srgb, var(--brand) 45%, transparent); }

/* /app/servidor: tarjetas elegibles */
.ss-opt { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; cursor: pointer; }
.ss-opt:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.ss-opt:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.ss-opt input { margin-top: 4px; }

/* RTL (ar, he): the forward chevron points the other way */
[dir=rtl] :not(.vnav) > .ico-flip { transform: scaleX(-1); }

/* Iconos de linea: el mismo grosor en toda la app y a cualquier tamaño. Antes escalaba con el icono (0,9 px a 12 px, 2,1 px a 28 px). */
svg.ico, svg.home-i, .com-ico svg { stroke-width: 1.5px; }
svg.ico *, svg.home-i *, .com-ico svg * { vector-effect: non-scaling-stroke; }
/* Chats: en movil y tableta (sin la barra llena) Proyectos y Agentes se llegan desde aqui */
.chat-goto { display: flex; gap: 2px; padding: 3px; margin: 0 0 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.chat-goto a { flex: 1; display: grid; place-items: center; min-height: 40px; padding: 0 8px; border-radius: 999px; color: var(--fg-2); font: 600 calc(14px * var(--fs, 1))/1 var(--font); text-decoration: none; white-space: nowrap; }
.chat-goto a[aria-current] { background: var(--surface); color: var(--fg); box-shadow: var(--shadow-1); } /* v2: sin aro */
.chat-goto a { min-height: 34px; }
:root:not([data-theme="light"]):not([data-theme="papel"]) .chat-goto a[aria-current] { background: var(--bg); box-shadow: none; }
@media (prefers-color-scheme: light) { :root[data-theme="system"]:not([data-theme="light"]):not([data-theme="papel"]) .chat-goto a[aria-current] { background: var(--surface); box-shadow: var(--shadow-1); } }
@media (min-width: 768px) { .chat-goto { display: none; } }

/* Elegir la cara de un agente (components/look-picker.js) */
.look-picker { display: grid; gap: 8px; margin: 4px 0 18px; }
.lp-line { display: grid; gap: 4px; justify-items: center; }
.lp-lab { font: 700 calc(11px * var(--fs, 1))/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lp-prev { display: flex; align-items: center; justify-content: center; gap: 12px; }
.lp-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.lp-o, .lp-c { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 3px; border-radius: 14px; border: 2px solid transparent; background: var(--surface-2); cursor: pointer; }
.lp-c { width: 44px; border-radius: 50%; background-clip: content-box; padding: 8px; }
.lp-o[aria-pressed="true"], .lp-c[aria-pressed="true"], .lp-mas[data-on] { border-color: var(--brand); }
.lp-mas { position: relative; background: conic-gradient(#ff4d4d, #ffd23f, #5ee0a0, #4dd8ff, #6ea8ff, #c792ea, #ff8fb1, #ff4d4d); background-clip: content-box; color: #fff; font: 700 calc(20px * var(--fs, 1))/1 var(--font); text-shadow: 0 1px 2px #0008; }
.lp-mas::after { content: "+"; pointer-events: none; }
.lp-mas input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.lp-o:hover, .lp-c:hover { border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.lp-o:focus-visible, .lp-c:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .lp-mas:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; } /* 23-oct (auditoría a11y, WCAG 2.4.7): el «+» es una label; el foco va a su input, escondido (:629) */
.lp-o[aria-disabled="true"] { opacity: .35; cursor: not-allowed; } /* brote y halo no van con la punta ni con los cuernos (agent-face.js: fits) */
.lp-face { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }

.agrow { display: flex; align-items: center; gap: 6px; }
.agrow .row { flex: 1; min-width: 0; }

/* Barra de chats como WhatsApp Web / ChatGPT (Carla, 12-oct): avatar, nombre, ultimo mensaje a una linea, hora y punto de no leidos; sin buscador propio (Dani, 16-oct: ya está «Buscar» en el menú); scroll dentro de la barra. */
@media (min-width: 768px) {
  #tabbar .side-chat { min-height: 52px; padding: 4px; align-items: center; }
  #tabbar .side-chat[hidden] { display: none; }
  #tabbar .side-chat .side-lead { width: 28px; }
  #tabbar .side-chat .chat-av { --s: 32px; width: 32px; height: 32px; font-size: calc(12px * var(--fs, 1)); border-radius: 50%; }
  #tabbar .side-chat .side-t { display: grid; gap: 1px; white-space: normal; }
  #tabbar .side-chat .side-t b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Recientes como ChatGPT (Dani, 12-oct): solo el título, sin icono ni vista previa */
  #tabbar .side-chat { min-height: 36px; padding: 4px 10px; } #tabbar .side-chat .side-t small { display: none; } #tabbar .side-chat .side-lead { width: 28px; } /* la foto pequena de cada uno vuelve a los recientes (Carla, 13-oct) */ #tabbar .side-chat .side-t b { font-weight: 500; }
  #tabbar .side-chat .side-t small { color: var(--muted); font-size: calc(12px * var(--fs, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #tabbar .side-chat .side-meta { display: grid; justify-items: end; gap: 4px; flex: none; color: var(--muted); font-size: calc(11px * var(--fs, 1)); }
  #tabbar .side-chat .side-unread { margin: 0; }
  #tabbar .side-chat[aria-current] { background: var(--brand-soft); }
}

/* Perfil › Tu plan: las tarjetas de prueba, uso y uso incluido llevan titulo y texto con la misma jerarquia que el resto (antes el titulo era texto normal) */
#p-trial > .title, #p-use > .title, #p-pro-x > .title { font-size: calc(15px * var(--fs, 1)); font-weight: 600; letter-spacing: -.01em; margin-bottom: 4px; }
#p-trial .hint, #p-use .hint, #p-pro-x .hint, #p-trial > p, #p-pro-x > p { color: var(--fg-2); font-size: calc(13px * var(--fs, 1)); line-height: 1.5; margin: 4px 0 10px; }
#p-use .hint b, #p-pro-x .hint b { color: var(--fg); font-weight: 600; }

/* Nombre de cada icono de la barra estrecha al pasar el cursor (core.js sideTip) */
.side-tip { position: fixed; z-index: 90; transform: translateY(-50%); padding: 7px 11px; border-radius: 10px; background: var(--fg); color: var(--bg); font: 600 calc(12.5px * var(--fs, 1))/1 var(--font); white-space: nowrap; pointer-events: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); animation: side-tip .14s var(--ease) both; }
.side-tip[hidden] { display: none; }
@keyframes side-tip { from { opacity: 0; transform: translate(-5px, -50%); } }

/* La lupa de la barra: buscador de toda la app (components/search-all.js) */
.search-all { align-content: start; gap: 12px; } /* 13-oct: la ventana mide lo que enseña, sin hueco vacío; crece con los resultados */
.search-all .search-hint { margin: 0; padding: 0 6px; color: var(--muted); font-size: calc(13px * var(--fs, 1)); line-height: 1.45; }
.search-all label { display: flex; align-items: center; gap: 10px; padding: 0 16px; min-height: 50px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface-2); color: var(--muted); transition: border-color var(--t-fast), box-shadow var(--t); }
.search-all label:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.search-all input { flex: 1; min-width: 0; padding: 0; border: 0; background: none; font: inherit; font-size: calc(16px * var(--fs, 1)); color: var(--fg); }
.search-all input:focus { outline: 0; box-shadow: none; }
.search-all .chat-found { display: grid; gap: 10px; }
.search-all .chat-found:empty { display: none; }

/* Configuración (Perfil) a dos columnas en ordenador, como la de Claude (Dani, 12-oct): lista de secciones a la izquierda y la elegida a la derecha. En móvil, el acordeón. */
.set-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; min-width: 0; } .set-side { display: grid; gap: 14px; min-width: 0; }
.set-nav, .set-side > h1 { display: none; }
@media (min-width: 900px) {
  .page.set { max-width: 1180px; grid-template-columns: 232px minmax(0, 1fr); gap: 32px; align-items: start; }
  .set-side { position: sticky; top: 24px; }
  .set-side > h1 { display: block; padding: 0 10px; font: 700 calc(22px * var(--fs, 1))/1.2 var(--font-display); letter-spacing: -.01em; }
  .set-nav { display: grid; gap: 2px; }
  .set-nav button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 10px; background: none; color: var(--fg-2); font: 500 calc(14px * var(--fs, 1))/1.25 var(--font); text-align: start; cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
  .set-nav button:hover { background: var(--surface-2); color: var(--fg); }
  .set-nav button[aria-current] { background: var(--brand-soft); color: var(--fg); font-weight: 600; }
  .set-nav button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .set-nav svg { flex: none; }
  .set-main > .q-try, .set-main > details.psec:not([open]) { display: none; }
  .set-main > details.psec > summary { pointer-events: none; min-height: 0; padding: 0 4px 20px; font-size: calc(24px * var(--fs, 1)); letter-spacing: -.01em; }
  .set-main > details.psec > summary::after { display: none; }
  .set-main { display: flex; flex-direction: column; align-self: stretch; min-height: calc(100dvh - 96px); } /* el pie siempre abajo del todo: pegado al fondo en secciones cortas, tras el contenido en las largas */
  .set-main > .profile-foot { margin-top: auto; padding-top: 28px; }
  .set-main:not(:has(> #s-account[open])) > :is(.identity, .group) { display: none; } /* tu ficha y las invitaciones van con «Tu cuenta y plan» */
}

/* ---------- Coherencia de títulos (Dani, 12-oct): en ordenador el título de cada pantalla mide y pesa lo mismo y arranca en el mismo punto ---------- */
@media (min-width: 768px) {
  #view h1:not(.home-hello):not(.who h1) { font-size: calc(28px * var(--fs, 1)); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
  #view .home-bar.home-in > a.btn.icon:has(+ h1) { display: none; }
  /* Mismo punto de salida en todas (Dani, 13-oct): entre 768 y 1100 cada pantalla tenía su ancho y el título caía en un sitio distinto. Y la primera línea bajo el título, a la misma distancia. */
  #view :is(.page, .com, .chat-list, .home) { max-width: 1280px; } .page > form { max-width: 720px; }
  #view .com-sub { margin-top: 18px; } #view .page > h1 + .muted { margin-top: -10px; }
  #view :is(.chat-list-head, .home-bar, .page-head, .set-side, .page) > h1, #view .com-h1 { line-height: 44px !important; } #view .set-side > h1 { padding: 0; } #view .chat-list-pane { padding-top: calc(32px + var(--safe-t)); } /* la misma caja que los botones de al lado: el texto cae a la misma altura con o sin ellos */
}

/* Pantalla de la tarjeta al empezar la prueba (components/trial.js cardWall): lo primero que ve quien se registra. Mismas palabras, otra presentacion. */
.cardwall { max-width: 520px; margin: clamp(16px, 6vh, 64px) auto; padding: clamp(20px, 4vw, 32px); min-width: 0; border-radius: var(--r-xl); box-shadow: var(--shadow-2); }
.cardwall .cw-head { text-align: center; margin-bottom: 20px; }
.cardwall .cw-logo { display: block; width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 14px; }
.cardwall h2 { font-size: calc(40px * var(--fs, 1)); line-height: 1.1; letter-spacing: -.03em; margin: 0 0 8px; color: var(--brand); }
.cardwall .cw-head .cw-tok { color: var(--fg); font-size: calc(18px * var(--fs, 1)); font-weight: 600; line-height: 1.35; margin: 0 0 12px; }
.cardwall .cw-head p { margin: 0; color: var(--fg-2); font-size: calc(16px * var(--fs, 1)); line-height: 1.5; }
.cardwall .cw-plans { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; display: grid; gap: 10px; }
.cardwall .cw-plans legend { font-weight: 700; font-size: calc(14px * var(--fs, 1)); color: var(--fg-2); margin-bottom: 8px; padding: 0; }
.cardwall .cw-plan { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1.5px solid var(--line-2); border-radius: var(--r); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.cardwall .cw-plan:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.cardwall .cw-plan input { margin-top: 3px; accent-color: var(--brand); width: 18px; height: 18px; flex: none; }
.cardwall .cw-plan b { display: block; font-size: calc(16px * var(--fs, 1)); font-weight: 600; line-height: 1.3; }
.cardwall .cw-plan small { display: block; margin-top: 4px; font-size: calc(13px * var(--fs, 1)); line-height: 1.4; color: var(--muted); }
.cardwall .cw-legal { background: var(--surface-2); border-radius: var(--r); padding: 14px 16px; margin-bottom: 16px; }
.cardwall .cw-legal p { margin: 0 0 8px; color: var(--muted); font-size: calc(13px * var(--fs, 1)); line-height: 1.55; }
.cardwall .cw-legal p:last-child { margin: 0; }
.cardwall .cw-ok { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 18px; font-size: calc(14px * var(--fs, 1)); line-height: 1.5; cursor: pointer; }
.cardwall .cw-ok input { margin-top: 3px; accent-color: var(--brand); width: 18px; height: 18px; flex: none; }
.cardwall .cw-go { width: 100%; min-height: 52px; font-size: calc(16px * var(--fs, 1)); }
.cardwall .cw-outs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.cardwall .cw-out { background: none; border: 0; padding: 8px 2px; min-height: 40px; font: inherit; font-size: calc(13px * var(--fs, 1)); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cardwall .cw-out:hover { color: var(--fg); }
/* 16-oct (Marta, ticket 28): en el movil la pantalla de prueba gratis como la del ordenador de la maqueta: logo grande y redondo sin cuadrado, mas aire, columna estrecha y sin tarjeta alrededor. En 1440 no cambia nada. */
@media (max-width: 767.98px) {
  .cardwall { max-width: 380px; margin: clamp(32px, 9vh, 72px) auto 0; padding: 0 4px; border: 0; background: none; box-shadow: none; }
  .cardwall .cw-head { margin-bottom: 32px; }
  .cardwall .cw-logo { content: url(/qiu/brand/mark-orbe-grande.svg); width: 104px; height: 104px; border-radius: 0; margin-bottom: 28px; }
  .cardwall h2 { margin-bottom: 14px; }
  .cardwall .cw-head .cw-tok { margin-bottom: 18px; }
  .cardwall .cw-plans { margin-bottom: 28px; }
  .cardwall .cw-legal { margin-bottom: 24px; }
  .cardwall .cw-ok { margin-bottom: 28px; }
  .cardwall .cw-outs { margin-top: 32px; }
}
/* Tu foto en el icono de Perfil, en móvil y en ordenador (fuera de la barra de ordenador: en el móvil salía a tamaño natural, 12-oct) */
#tabbar .tab-me { flex: none; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--line-2); }
/* 23-oct (auditoría rev34): sin :has(); la foto va delante del icono (core.js). Un :has() con «svg» detrás metía «svg» en la invalidación común de :has(): con
   cada mensaje en Chats, Chrome recalculaba el estilo de todos los svg de la conversación (~2.300 con 600 burbujas) */
#tabbar .tab-me[hidden], #tabbar .tab-me:not([hidden]) + svg { display: none; }

/* ---------- Agentes (referencia de Dani, 12-oct): cabecera con Qiu, una tarjeta con portada por agente y las plantillas al lado ---------- */
.page.ag { gap: 18px; }
.ag-hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px; border-radius: 26px; border: 1px solid rgba(143, 187, 255, .22); color: #FFFFFF;
  background: radial-gradient(60% 120% at 82% 50%, rgba(0, 65, 245, .55), transparent 70%), linear-gradient(120deg, #050D19, #050F35); }
.ag-hero > div { display: grid; gap: 16px; justify-items: start; min-width: 0; max-width: 46ch; }
.ag-hero p { margin: 0; color: #D6DEEC; font-size: calc(15.5px * var(--fs, 1)); line-height: 1.5; }
.ag-hero img { flex: none; width: 120px; height: 120px; }
.ag-cols { display: grid; gap: 18px; align-items: start; }
.ag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
/* minmax(0, 1fr) en la tarjeta y en su texto (Dani, 17-oct): la columna mide lo que la tarjeta. Con la columna automática, una palabra larga
   (Kundenzufriedenheitsbeauftragte, Reputationsdirektor) ensanchaba el contenido, lo cortaba por la derecha y descentraba la portada; ahora se parte. */
.ag-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; overflow: hidden; overflow-wrap: break-word; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); color: var(--fg); text-align: left; transition: transform var(--t) var(--ease), border-color var(--t-fast), box-shadow var(--t); }
.ag-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--a, var(--brand)) 60%, transparent); box-shadow: 0 22px 44px -26px color-mix(in srgb, var(--a, var(--brand)) 80%, transparent); }
.ag-cover { display: grid; place-items: center; height: 132px; background: radial-gradient(60% 80% at 30% 70%, color-mix(in srgb, var(--a) 60%, transparent), transparent 70%), radial-gradient(60% 80% at 75% 35%, color-mix(in srgb, var(--b) 50%, transparent), transparent 70%), linear-gradient(180deg, #050D19, #050F35); }
.ag-cover img { width: 104px; height: 104px; filter: drop-shadow(0 14px 20px rgba(0, 10, 50, .6)); transition: transform var(--t) var(--spring); } .ag-card:hover .ag-cover img { transform: translateY(-3px) scale(1.05); }
/* 18-oct (Marta: «убери все тени»): el personaje de un superagente, sin la sombra de debajo (ni el tono de fotos de com.css). */
.ag-cover img.agent-char { filter: none; }
.ag-body { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 4px; padding: 12px 14px 14px; color: inherit; text-decoration: none; }
/* El nombre empieza arriba, tenga una línea o tres, y su cara de 26 px (agentes.js) va centrada en la primera línea: centrado, el de una línea quedaba más bajo que los demás. */
.ag-body b { display: flex; align-items: flex-start; gap: 8px; font: 600 calc(15px * var(--fs, 1))/1.25 var(--font-display); } .ag-body b > :is(svg, img) { flex: none; margin-block: calc((1.25em - 26px) / 2); } .ag-body > span { color: var(--muted); font-size: calc(13px * var(--fs, 1)); line-height: 1.4; }
.ag-edit { position: absolute; top: 6px; right: 6px; color: #FFFFFF; }
.ag-new { place-items: center; align-content: center; gap: 10px; min-height: 190px; border-style: dashed; border-color: var(--line-2); background: none; font: inherit; cursor: pointer; }
.ag-new i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--brand-text); } .ag-new b { font: 600 calc(14.5px * var(--fs, 1))/1.2 var(--font-display); }
.ag-side { display: grid; gap: 4px; padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.ag-side h2 { margin: 0 0 8px; font: 600 calc(15px * var(--fs, 1))/1.2 var(--font-display); }
.ag-tpl { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px; border: 0; border-radius: var(--r); background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; transition: background var(--t-fast); }
.ag-tpl:hover { background: var(--surface-2); } .ag-tpl:disabled { opacity: .5; }
.ag-tpl-f { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--c) 22%, var(--surface-2)); }
.ag-tpl-t { flex: 1; min-width: 0; display: grid; gap: 2px; } .ag-tpl-t b { font-weight: 600; font-size: calc(14px * var(--fs, 1)); } .ag-tpl-t small { color: var(--muted); font-size: calc(12.5px * var(--fs, 1)); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ag-tpl i { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--fg-2); }
.ag-team { position: relative; flex: none; width: 132px; height: 120px; }
.ag-team > span { position: absolute; display: block; }
.ag-hero .ag-team img { display: block; width: 100%; height: 100%; }
/* 18-oct: los personajes van encuadrados en su bola (radio 0,295 del lado y un 4 % por encima del centro, scripts/personajes-congelar.py) y
   este equipo se compuso con el encuadre de antes, recortado a todo el dibujo: cada bola vuelve a su sitio y a su tamaño de entonces
   (scale = lado de ahora / lado de entonces; translate = dónde estaba la bola menos dónde la deja ya el encuadre de ahora). */
.ag-hero .ag-team-f img { transform: translate(.06%, .72%) scale(1.212); } .ag-hero .ag-team-v img { transform: translate(.12%, -4.55%) scale(1.218); }
.ag-hero .ag-team-m img { transform: translate(3.79%, -.91%) scale(1.242); }
.ag-team-f { width: 58%; left: 22%; top: 0; z-index: 2; } .ag-team-v { width: 40%; left: 0; bottom: 4%; } .ag-team-m { width: 44%; right: 0; bottom: 0; z-index: 3; }
.ag-team i { position: absolute; right: -2px; bottom: 6%; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #060B14; color: #060B14; }
.ag-team-f i { background: #5BFFA8; } .ag-team-v i { background: #5CC8FF; } .ag-team-m i { background: #2F82FF; color: #FFFFFF; }
.ag-team i svg { width: 14px; height: 14px; }
@media (min-width: 768px) { .ag-team { width: 200px; height: 180px; } .ag-team i { width: 32px; height: 32px; } .ag-team i svg { width: 17px; height: 17px; } }
/* Móvil (Carla, 14-oct: «ese texto se ve atropellado»): el dibujo arriba y pequeño, el texto a ancho completo y cada paso en una línea. */
@media (max-width: 767px) { .ag-hero { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 14px; padding: 20px; } .ag-hero > div { max-width: none; gap: 18px; } .ag-hero .ag-team { order: -1; width: 92px; height: 84px; } .ag-hero p { font-size: calc(16px * var(--fs, 1)); line-height: 1.45; } .ag-how ol { gap: 10px; } .ag-how li { white-space: nowrap; } .ag-how li span { overflow: hidden; text-overflow: ellipsis; } }
@media (min-width: 768px) { .ag-hero { min-height: 200px; padding: 30px 34px; } .ag-hero img { width: 180px; height: 180px; } .ag-hero p { font-size: calc(17px * var(--fs, 1)); } }
@media (min-width: 1100px) { .page.ag { max-width: 1180px; } .ag-cols:has(.ag-side) { grid-template-columns: minmax(0, 1fr) 320px; } }
/* Superagentes y agentes (Carla, 15-oct): dos apartados dentro de la misma rejilla. La cabecera ocupa la fila entera: un hijo de grid sin
   grid-column se colocaria en una columna de tarjeta. El sello y el candado nunca encogen el nombre (min-width: 0 en el texto). */
.ag-grid > .ag-h { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 4px; }
.ag-grid > .ag-h:first-child { margin-top: 0; }
.ag-h b { font: 600 calc(17px * var(--fs, 1))/1.2 var(--font-display); }
.ag-h p { flex: 1 0 100%; order: 3; min-width: 0; margin: 0; color: var(--muted); font-size: calc(13.5px * var(--fs, 1)); line-height: 1.4; }
.ag-h .btn.sm { flex: none; }
/* Superagente que todavia no es tuyo (Carla, 15-oct): se ve igual de grande, y sin Qiu Pro en gris y con candado.
   Es un <button>: sin el relleno ni la letra del navegador (Arial y 1px 6px), lleva la misma portada a sangre y la misma letra que una ya añadida (Dani, 17-oct). */
.ag-supc { border-style: dashed; padding: 0; font: inherit; }
.ag-res { display: block; margin-top: 2px; font-style: normal; font-weight: 600; font-size: calc(13px * var(--fs, 1)); line-height: 1.3; color: var(--fg); }
/* Superagentes (Dani, 17-oct: «mismo tamaño sin tanto espacio entre medias del texto»): las tarjetas de una fila miden lo mismo porque la rejilla las
   estira, y dentro de cada una todo va seguido: portada, nombre, resultado, descripción y, justo debajo, «Ponle una tarea» o el candado. Lo que sobra
   queda al final de la tarjeta. Sustituye a la rejilla compartida de cinco filas (Carla, 15 y 16-oct: la descripción a la misma altura en todas):
   con las filas compartidas, un nombre de una línea, un resultado más corto o las tareas de otra tarjeta de la fila abrían huecos dentro del texto
   (de 12 a 600 px). Sin filas propias en .ag-sup-grid, sus tarjetas se colocan como las de Agentes. */
/* El alta de un superagente y su plan de direccion (Carla, 15-oct). */
.sd-lb { margin: 14px 0 6px; font-weight: 600; color: var(--fg); } .sd-lb span { font-weight: 400; color: var(--muted); }
/* Alta de director, más visual (Carla, 16-oct): objetivos en tarjetas con su medida, canales con logo y estado, autonomía en tres tarjetas y la vista previa del plan */
.sd-goals, .sd-chans, .sd-lvls { display: grid; gap: 10px; }
.sd-goals { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sd-chans { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
.sd-lvls { grid-template-columns: 1fr; } @media (min-width: 520px) { .sd-lvls { grid-template-columns: repeat(3, 1fr); } }
.sd-goal, .sd-chan, .sd-lvl { display: grid; gap: 4px 12px; align-content: start; text-align: start; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 14px; background: transparent; color: var(--fg); font: inherit; cursor: pointer; }
.sd-goal[aria-checked="true"], .sd-chan[aria-checked="true"], .sd-lvl[aria-checked="true"] { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); box-shadow: 0 0 0 1px var(--brand) inset; }
@media (hover: hover) { .sd-goal:hover, .sd-chan:hover, .sd-lvl:hover { border-color: var(--brand); } }
.sd-ico { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--surface-2); color: var(--brand-text); }
.sd-ico img { display: block; }
[aria-checked="true"] > .sd-ico { background: var(--brand); color: #fff; }
[aria-checked="true"] > .sd-ico:has(img) { background: var(--surface-2); }
.sd-goal { grid-template-columns: auto 1fr; align-items: center; }
.sd-gt { display: grid; gap: 4px; }
.sd-gt small { display: flex; align-items: center; gap: 6px; color: var(--fg-2); font-size: calc(12.5px * var(--fs, 1)); } .sd-gt small svg { width: 14px; height: 14px; flex: none; }
.sd-chan { grid-template-columns: 1fr; justify-items: start; padding: 12px; gap: 6px; } .sd-chan .sd-ico { width: 36px; height: 36px; }
.sd-chan small { min-height: 1.2em; font-size: calc(12px * var(--fs, 1)); color: var(--muted); }
.sd-chan small.on { color: #3ddc97; } .sd-chan small.on::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-end: 5px; border-radius: 50%; background: currentColor; }
.sd-chan b, .sd-lvl b { font-size: calc(14px * var(--fs, 1)); font-weight: 600; }
.sd-lvl { grid-template-columns: auto 1fr; grid-template-areas: "i bars" "t t" "d d"; align-items: center; }
.sd-lvl .sd-ico { grid-area: i; } .sd-lvl .sd-bars { grid-area: bars; justify-self: end; } .sd-lvl b { grid-area: t; } .sd-lvl small { grid-area: d; color: var(--fg-2); font-size: calc(12.5px * var(--fs, 1)); line-height: 1.4; }
.sd-bars { display: flex; gap: 4px; align-items: flex-end; height: 22px; } .sd-bars i { width: 6px; border-radius: 3px; background: var(--line-2); } .sd-bars i:nth-child(1) { height: 8px; } .sd-bars i:nth-child(2) { height: 15px; } .sd-bars i:nth-child(3) { height: 22px; }
.sd-bars[data-n="1"] i:nth-child(-n+1), .sd-bars[data-n="2"] i:nth-child(-n+2), .sd-bars[data-n="3"] i { background: var(--brand); }
.sd-paso .field:has(> textarea) { margin-top: 10px; } .sd-paso .field > textarea { width: 100%; min-height: 56px; box-sizing: border-box; }
.sd-prev { margin-top: 18px; padding: 14px; border: 1px dashed var(--line-2); border-radius: 14px; background: var(--surface-2); display: grid; gap: 10px; }
.sd-prev-h { display: flex; gap: 10px; align-items: center; } .sd-prev-h > div { display: grid; gap: 2px; min-width: 0; } .sd-prev-h span { color: var(--fg-2); font-size: calc(13px * var(--fs, 1)); overflow-wrap: anywhere; }
.sd-prev ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .sd-prev li { display: grid; gap: 1px; padding-inline-start: 10px; border-inline-start: 2px solid var(--brand); }
.sd-prev li b { font-size: calc(11.5px * var(--fs, 1)); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .sd-prev li span { font-size: calc(13.5px * var(--fs, 1)); line-height: 1.4; }
.sd-prev-f { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: calc(12.5px * var(--fs, 1)); color: var(--fg-2); }
.sd-prev-ch { display: inline-flex; gap: 6px; } .sd-prev-ch > span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--surface-3); color: var(--brand-text); } .sd-prev-ch img, .sd-prev-ch svg { width: 16px; height: 16px; }
.sd-plan-l { display: grid; gap: 10px; margin: 12px 0 14px; padding: 0; list-style: none; }
.sd-plan-l li { display: grid; gap: 2px; padding-left: 12px; border-left: 2px solid var(--line-2); }
.sd-plan-l b { font-size: calc(12.5px * var(--fs, 1)); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.sd-plan-l span { font-size: calc(14px * var(--fs, 1)); line-height: 1.4; }
.ag-supadd { position: absolute; right: 8px; top: 8px; display: inline-flex; padding: 5px; border-radius: 999px; background: var(--surface-2); color: var(--fg); }
.ag-supc .ag-lock { margin: 0 12px 12px; } /* justo bajo la descripción, como «Ponle una tarea» en una ya añadida */
.ag-card.is-lock { filter: grayscale(1); opacity: .66; }
.ag-card.is-lock:hover { transform: none; box-shadow: none; border-color: var(--line); }
.ag-lock { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--fg-2); font-size: calc(12.5px * var(--fs, 1)); }
.ag-lock svg { flex: none; }
/* Pastilla de plan junto al titulo de Superagentes (Carla, 16-oct): marca de SaaS, no una frase suelta. */
.ag-plan { flex: none; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--fg-2); font-size: calc(12px * var(--fs, 1)); text-decoration: none; }
.ag-sup { position: absolute; top: 8px; left: 8px; z-index: 1; max-width: calc(100% - 52px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, #FFFFFF 88%, transparent); color: #0041F5; font-size: calc(11.5px * var(--fs, 1)); font-style: normal; font-weight: 600; }
.ag-tpl-t .ag-sup, .list .title .ag-sup { position: static; max-width: none; margin-left: 6px; background: color-mix(in srgb, var(--brand) 16%, var(--surface-2)); color: var(--brand-text); }
.ag-body b > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ag-how-d { margin: 0; color: #D6DEEC; font-size: calc(14.5px * var(--fs, 1)); line-height: 1.45; }
.ag-side-h { margin: 12px 0 4px; color: var(--muted); font: 600 calc(12.5px * var(--fs, 1))/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .04em; }
.ag-side > .ag-side-h:first-of-type { margin-top: 0; }
.ag-side .ag-side-h + .ag-tpl { border-top: 0; }
/* Agentes trabajando solos (Carla, 13-oct): su tarea, la proxima vez y la ultima dentro de la tarjeta; y el bloque «que quieres que haga» al crear. */
.ag-ru { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0 14px 14px; }
.ag-ru-i { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid var(--line); } .ag-ru-i b { font-weight: 600; font-size: calc(13.5px * var(--fs, 1)); line-height: 1.3; } .ag-ru-i small { color: var(--muted); font-size: calc(12.5px * var(--fs, 1)); }
.ag-ru-i.is-off b { opacity: .6; } .ag-ru-b { display: flex; gap: 8px; flex-wrap: wrap; } .ag-ru-b .btn { min-height: 44px; padding: 0 12px; font-size: calc(13px * var(--fs, 1)); }
.ag-ru-add { justify-self: start; min-height: 44px; background: none; border: 0; padding: 4px 0; color: var(--brand); font-family: inherit; font-weight: 600; font-size: calc(13px * var(--fs, 1)); cursor: pointer; }
.ar-step { display: grid; gap: 10px; margin: 12px 0; } .ar-step label { display: grid; gap: 6px; font-size: calc(13.5px * var(--fs, 1)); } .ar-step textarea, .ar-step select, .ar-step .ar-f { width: 100%; }
.ar-ex { display: flex; gap: 6px; flex-wrap: wrap; } .ar-chip { min-height: 44px; border: 1px solid var(--line-2); background: transparent; color: var(--fg-2); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: calc(12.5px * var(--fs, 1)); cursor: pointer; text-align: start; }
.ar-chip:hover { border-color: var(--brand); color: var(--fg); }

/* 13-oct (ticket 17, iPhone): bajo la barra de estado del iPhone siempre hay fondo propio, aunque algo se desplace por debajo (el teclado, un panel): la hora y la
   batería nunca se superponen al texto. Solo cuando hay zona segura. */
@supports (padding-top: env(safe-area-inset-top)) {
  body::before { content: ''; position: fixed; inset: 0 0 auto 0; height: env(safe-area-inset-top, 0px); background: var(--bg); z-index: 2000; pointer-events: none; transform: translateZ(0); will-change: transform; } /* 14-oct (foto de Carla, iPhone instalado: tarjetas por detras de la hora): capa propia y por encima de todo; en iOS un fixed sin capa propia puede pintarse debajo del contenido que se desplaza */
}

/* ---------- Chats, Proyectos y Agentes: la misma cabecera (Carla, 13-oct): titulo a la izquierda, UN boton de crear a la derecha, sin flecha atras, misma altura ---------- */
#view .tab-head { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin: 0 0 12px; }
#view .tab-head h1 { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 44px; padding-bottom: .2em; }
#view .tab-head .btn { flex: none; margin-left: auto; min-height: 44px; padding-inline: 14px; gap: 6px; font-size: calc(14px * var(--fs, 1)); white-space: nowrap; }
#view .tab-head .btn span { display: inline; }
@media (max-width: 767.98px) { #view .tab-head h1 { font-size: calc(22px * var(--fs, 1)); font-weight: 600; letter-spacing: -.02em; } }
#view .chat-list > .tab-head { margin-bottom: 0; } #view .page.ag > .tab-head { margin-bottom: -6px; } /* los padres son rejillas con su propio hueco: la distancia al selector sale igual (12 px) en las tres */

/* Tareas de un agente (Carla, 13-oct): ideas tocables al crearlo y al abrir su chat sin tarea */
.at-list { display: grid; gap: 8px; margin: 12px 0; } .at-i { display: flex; gap: 12px; align-items: center; text-align: start; min-height: 56px; padding: 10px 14px; border: 1px solid var(--line-2); background: transparent; color: var(--fg); border-radius: 14px; font: inherit; cursor: pointer; }
.at-i[aria-checked="true"] { border-color: var(--brand); } @media (hover: hover) { .at-i:hover { border-color: var(--brand); } } .at-t { display: grid; gap: 2px; } .at-t small { color: var(--fg-2); font-size: calc(12.5px * var(--fs, 1)); }
.at-ck { flex: none; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--line-2); box-sizing: border-box; } .at-i[aria-checked="true"] .at-ck { border-color: var(--brand); background: var(--brand); }
.at-i[aria-checked="true"] .at-ck::after { content: ""; display: block; width: 5px; height: 10px; margin: 1px 0 0 6px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.at-rec { font-style: normal; font-weight: 600; color: var(--brand); }
.at-own { margin: 4px 0 14px; } .at-own summary { cursor: pointer; color: var(--fg-2); font-size: calc(13.5px * var(--fs, 1)); min-height: 44px; display: flex; align-items: center; }
.at-later { display: block; margin: 8px auto 0; min-height: 44px; padding: 0 16px; border: 0; background: none; color: var(--fg-2); font: inherit; font-size: calc(12.5px * var(--fs, 1)); cursor: pointer; }
.chat-at { margin: 16px auto; max-width: 520px; padding: 14px; border: 1px solid var(--line-2); border-radius: 18px; } .chat-at-h { display: flex; gap: 12px; align-items: center; } .chat-at-h div { display: grid; gap: 2px; } .chat-at-h span { color: var(--fg-2); font-size: calc(13.5px * var(--fs, 1)); }

/* Perfil › Escritorio (Carla, 13-oct): un botón para tu ordenador, los pasos en orden, el resto plegado */
.esc-big { display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; min-height: 56px; font-size: calc(16px * var(--fs, 1)); }
.esc-ask { padding: 14px; border: 1px solid var(--line-2); border-radius: 14px; } .esc-ask p { margin: 0 0 10px; } .esc-ask-b { display: flex; gap: 8px; flex-wrap: wrap; } .esc-ask-b .btn { flex: 1; min-height: 48px; }
.esc-steps { margin: 16px 0; padding-inline-start: 22px; display: grid; gap: 14px; } .esc-steps li { padding-inline-start: 4px; } .esc-steps small { display: block; color: var(--fg-2); margin-top: 4px; } .esc-code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; } .esc-code small { flex-basis: 100%; margin: 0; }
.esc-otro { margin: 6px 0 18px; } .esc-otro summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--fg-2); } .esc-otro .muted { margin: 8px 4px 0; }

/* Configuración (Carla, 13-oct): vista previa del fondo, deslizador de tamaño del texto, aire en las filas y lista de secciones en móvil. */
.wp { display: grid; gap: 8px; margin-top: 4px; }
.wp-label { font: 600 calc(12px * var(--fs, 1))/1.3 var(--font); color: var(--muted); }
.wall-prev { display: grid; align-content: center; gap: 10px; padding: 18px 14px; min-height: 190px; border: 1px solid var(--line); border-radius: var(--r); background: var(--prev, var(--bg)); }
.wp-b { max-width: 78%; padding: 9px 13px; border-radius: 16px 16px 16px 6px; background: var(--surface); color: var(--fg); font-size: calc(14px * var(--fs, 1)); line-height: 1.4; box-shadow: var(--shadow-1); }
.wp-b.me { justify-self: end; border-radius: 16px 16px 6px 16px; background: var(--brand); color: #fff; }
.fs-slider { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; margin-top: 8px; }
.fs-a { font: 600 calc(13px * var(--fs, 1))/1 var(--font); color: var(--fg-2); } .fs-a.big { font-size: calc(24px * var(--fs, 1)); }
.fs-slider input[type=range] { width: 100%; min-height: 44px; margin: 0; accent-color: var(--brand); }
.fs-ticks { grid-column: 2; display: flex; justify-content: space-between; padding: 0 9px; margin-top: -14px; pointer-events: none; }
.fs-ticks i { width: 2px; height: 8px; border-radius: 1px; background: var(--line-2); }
.row .body > .sub { margin-top: 2px; } .row .body > .sub + .status, .row .body > .title + .status { margin-top: 8px; }
.set-main .row { padding-block: 14px; }
.p-person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 14px; }
.p-person .p-pend { display: grid; justify-items: stretch; gap: 6px; width: 190px; }
.p-person .p-pend > * { justify-content: center; text-align: center; }
@media (max-width: 599px) { .p-person { grid-template-columns: auto minmax(0, 1fr); } .p-person .p-pend { grid-column: 1 / -1; width: auto; } }
.mem-sheet { display: grid; gap: 12px; max-height: 80dvh; grid-template-rows: auto auto minmax(0, 1fr); } .mem-sheet .mem-list { overflow: auto; }
.psec > .identity + .group { margin-top: 28px; } .psec > .group + .group, .psec > .identity + .group { margin-top: 28px; }
.mem-t { font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.set-back { display: none; }
@media (min-width: 900px) { .set-foot-m { display: none; } }
@media (max-width: 899px) {
  .page.set .set-back { display: inline-flex; align-items: center; gap: 4px; justify-self: start; min-height: 44px; padding: 0 8px 0 0; border: 0; background: none; color: var(--fg-2); font: 600 calc(14px * var(--fs, 1))/1 var(--font); cursor: pointer; }
  .set-back svg { transform: scaleX(-1); }
  .page.set[data-m=menu] .set-main, .page.set[data-m=sec] .set-side { display: none; }
  .set-side > h1 { display: block; font: 700 calc(26px * var(--fs, 1))/1.2 var(--font-display); letter-spacing: -.01em; }
  .set-nav { display: grid; gap: 8px; }
  .set-nav button { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--fg); font: 600 calc(15px * var(--fs, 1))/1.25 var(--font); text-align: start; cursor: pointer; }
  .set-nav button::after { content: '›'; margin-inline-start: auto; font-size: calc(22px * var(--fs, 1)); color: var(--muted); }
  .set-main > .q-try, .set-main > details.psec:not([open]) { display: none; }
  .set-main > details.psec > summary { pointer-events: none; min-height: 0; padding: 0 4px 16px; font-size: calc(24px * var(--fs, 1)); letter-spacing: -.01em; }
  .set-main > details.psec > summary::after { display: none; }
  .set-main > .profile-foot { display: none; }
}
#night-veil { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; mix-blend-mode: multiply; transition: opacity .6s, background .6s; }
.ln-more { display: grid; gap: 12px; margin-top: 4px; }
.ln-lvl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; font: 600 calc(12px * var(--fs, 1))/1.2 var(--font); color: var(--fg-2); }
.ln-lvl input { width: 100%; min-height: 44px; margin: 0; accent-color: #e5483a; }
.ln-opts { display: grid; gap: 2px; }
.ln-opt { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: calc(14px * var(--fs, 1)); cursor: pointer; } .ln-opt input { width: 20px; height: 20px; accent-color: var(--brand); }
.ln-times { display: flex; flex-wrap: wrap; gap: 12px 20px; } .ln-times label { display: flex; align-items: center; gap: 8px; font-size: calc(14px * var(--fs, 1)); } .ln-times input { min-height: 44px; }

/* 14-oct (Carla, con la captura de WhatsApp: «cuando hace scroll abajo se difumina»): como WhatsApp en iOS, la barra de pestanas es una pildora flotante de cristal
   (desenfoque + saturacion, borde fino, sombra suave, separada de los bordes) y el contenido pasa por debajo DIFUMINADO con un degradado hacia el fondo; arriba, la zona
   de la hora y la cabecera de cada lista son cristal esmerilado. Sin soporte de backdrop-filter, respaldo opaco. El 13-oct se puso opaca porque se veia nitido lo de atras:
   el desenfoque fuerte, el velo y el degradado lo resuelven sin quitar el cristal. Vacia (mientras carga) no se pinta; con el teclado en un campo se esconde.
   --cristal es la capa que pinta cada pieza; la barra y el velo de abajo comparten el mismo desenfoque. */
@media (max-width: 767.98px) {
  :root { --cristal: color-mix(in srgb, var(--bg) 72%, transparent); --cristal-bar: color-mix(in srgb, var(--surface) 74%, transparent); }
  #tabbar { left: calc(12px + var(--safe-l)); right: calc(12px + var(--safe-r)); bottom: calc(8px + var(--safe-b)); height: var(--tabbar-h); padding: 0 6px; background: var(--cristal-bar);
    -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8); border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent); border-radius: 999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .14); }
  #tabbar:empty { display: none; }
  #app::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--tabbar-h) + 44px + var(--safe-b)); z-index: 19; pointer-events: none;
    background: linear-gradient(to top, color-mix(in srgb, var(--bg) 94%, transparent) 20%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    -webkit-mask-image: linear-gradient(to top, #000 40%, transparent); mask-image: linear-gradient(to top, #000 40%, transparent); }
  #app:has(#tabbar:empty)::after, body[data-screen="q"] #app::after { display: none; }
  body:has(:is(textarea, input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=button], [type=submit])):focus) #tabbar { display: none; }
  body:has(:is(textarea, input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=button], [type=submit])):focus) #app::after { display: none; }
  /* arriba: la zona de la hora, en cristal con un borde que se funde; y la cabecera de Chats, Proyectos y Agentes se queda pegada debajo, tambien en cristal */
  body::before { height: calc(env(safe-area-inset-top, 0px) + 12px); background: var(--cristal); -webkit-backdrop-filter: blur(20px) saturate(1.7); backdrop-filter: blur(20px) saturate(1.7);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 12px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 12px), transparent); }
  #view .tab-head { position: sticky; top: var(--safe-t); z-index: 6; margin-inline: -16px; padding: 6px 16px; background: var(--cristal); -webkit-backdrop-filter: blur(20px) saturate(1.7); backdrop-filter: blur(20px) saturate(1.7); }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #tabbar { background: var(--surface); } #app::after { background: linear-gradient(to top, var(--bg) 30%, transparent); }
    body::before, #view .tab-head { background: var(--bg); }
  }
}
/* Agentes entendibles (Carla, 13-oct): cómo funciona en tres pasos y la plantilla recomendada */
.ag-how { display: grid; gap: 8px; } .ag-how b { font-size: calc(13px * var(--fs, 1)); letter-spacing: .04em; text-transform: uppercase; color: #8FBBFF; } .ag-how ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ag-how li { display: flex; align-items: center; gap: 10px; color: #D6DEEC; font-size: calc(14.5px * var(--fs, 1)); } .ag-how i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(143, 187, 255, .16); color: #8FBBFF; }
.ag-rec { display: grid; gap: 8px; width: 100%; margin-bottom: 8px; padding: 12px; text-align: start; border: 1px solid var(--brand); border-radius: var(--r-lg); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); color: var(--fg); font: inherit; cursor: pointer; }
.ag-rec-h { font-size: calc(12px * var(--fs, 1)); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--brand); } .ag-rec-b { display: flex; gap: 12px; align-items: center; } .ag-rec-b > span { display: grid; gap: 2px; min-width: 0; } .ag-rec-b small { color: var(--fg-2); font-size: calc(13px * var(--fs, 1)); }
/* Perfil › Registro de acciones: buscar, filtrar y exportar en una fila; en el móvil, la búsqueda arriba (components/actions.js) */
.act-find { grid-template-columns: 1fr auto auto; align-items: center; margin-bottom: 8px; } .act-find .btn { white-space: nowrap; }
@media (max-width: 520px) { .act-find { grid-template-columns: 1fr auto; } .act-find input { grid-column: 1 / -1; } }

/* Recortador de la foto de perfil (components/recorte.js): la foto a pantalla completa con un circulo encima, como WhatsApp o iOS. */
dialog.crop-full { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: #000; color: #fff; flex-direction: column; }
dialog.crop-full[open] { display: flex; }
.crop-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.crop-stage:focus-visible { outline: 2px solid #fff; outline-offset: -4px; border-radius: 0; } /* 23-oct (auditoría a11y): la foto se mueve con las flechas; el aro, por dentro (ocupa todo el ancho) */
.crop-stage:focus-visible::after { content: ''; position: absolute; inset: 2px; border: 2px solid #fff; pointer-events: none; } /* y encima: la sombra del círculo (.crop-ring) tapa el outline */
.crop-stage img { position: absolute; left: 50%; top: 50%; max-width: none; pointer-events: none; -webkit-user-drag: none; }
.crop-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .62); pointer-events: none; }
.crop-bar { display: grid; gap: 14px; padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 16px); background: #000; }
.crop-zoom { width: 100%; max-width: 360px; justify-self: center; }
.crop-title { padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 10px; text-align: center; font-weight: 700; font-size: calc(17px * var(--fs, 1)); background: #000; }
.crop-btns { display: flex; gap: 10px; } .crop-btns .btn { flex: 1; } .crop-btns .btn.ghost { color: #fff; border-color: rgba(255, 255, 255, .45); background: transparent; }
.avatar[role=button] { cursor: pointer; }

/* Proyecto: color (14-oct, Carla). Paleta de 12 + «Personalizado» con panel propio y vista previa; sin el selector nativo del sistema. */
.pc-prev { min-height: 0; gap: 10px; flex-direction: row; align-items: center; justify-content: flex-start; pointer-events: none; }
.pc-own { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 8px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface-2); color: var(--fg); font: 600 calc(14px * var(--fs, 1))/1 var(--font); cursor: pointer; }
.pc-own[data-on], .pc-own[aria-expanded="true"] { border-color: var(--brand); }
.pc-dot { width: 28px; height: 28px; border-radius: 50%; background: conic-gradient(#ff4d4d, #ffd23f, #5ee0a0, #4dd8ff, #6ea8ff, #c792ea, #ff8fb1, #ff4d4d); }
.pc-own[data-on] .pc-dot { background: var(--sw); }
.pc-panel { display: grid; gap: 14px; padding: 14px; border-radius: var(--r-lg, 16px); background: var(--surface-2); border: 1px solid var(--line); }
.pc-panel[hidden] { display: none; }
.pc-row { display: grid; gap: 8px; font: 600 calc(13px * var(--fs, 1))/1.3 var(--font); color: var(--fg-2); }
.pc-row input[type=range] { width: 100%; height: 28px; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; touch-action: pan-y; }
.pc-row input[type=range]::-webkit-slider-runnable-track { height: 12px; border-radius: 6px; }
.pc-h::-webkit-slider-runnable-track { background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.pc-l::-webkit-slider-runnable-track { background: linear-gradient(90deg, #000, var(--pc), #fff); }
.pc-h::-moz-range-track { height: 12px; border-radius: 6px; background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.pc-l::-moz-range-track { height: 12px; border-radius: 6px; background: linear-gradient(90deg, #000, var(--pc), #fff); }
.pc-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -8px; border-radius: 50%; background: #fff; border: 3px solid var(--pc); box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.pc-row input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--pc); }
.pc-hex { display: flex; align-items: center; gap: 6px; }
.pc-hex input { flex: 1; min-width: 0; text-transform: uppercase; }
.pc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.home-sheet .pc-prev { flex-direction: row; align-items: center; justify-content: flex-start; min-height: 0; gap: 14px; padding: 12px 14px; }
.home-pick.colors input:checked + span { background: var(--sw); }

/* Cabecera de cristal al bajar en Inicio y Perfil (Carla, 14-oct): el título sobre el contenido esmerilado, como en Chats. Solo en móvil: en ordenador hay barra lateral. */
.glass-head { display: none; }
@media (max-width: 767.98px) {
  .glass-head { position: fixed; top: 0; left: 0; right: 0; z-index: 7; display: flex; align-items: center; justify-content: center; height: calc(env(safe-area-inset-top, 0px) + 52px); padding-top: env(safe-area-inset-top, 0px);
    background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.7); backdrop-filter: blur(20px) saturate(1.7); border-bottom: 1px solid var(--line);
    font: 600 calc(17px * var(--fs, 1))/1 var(--font-display); letter-spacing: -.01em; color: var(--fg); opacity: 0; transform: translateY(-8px); transition: opacity .2s var(--ease, ease), transform .2s var(--ease, ease); pointer-events: none; }
  .glass-head.on { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .glass-head { transition: none; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass-head { background: var(--bg); } }

/* Tareas de un agente: pregunta previa si Qiu sabe poco de la persona, y aviso «Conecta X» */
.at-cx { display: grid; gap: 10px; } .at-cx > b { font-size: calc(16px * var(--fs, 1)); } .at-cx p { margin: 0; }
.at-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.at-chip { min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--fg); font: inherit; font-size: calc(14px * var(--fs, 1)); cursor: pointer; }
.at-chip[aria-checked="true"] { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, transparent); }
.at-job, .at-web { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--fg); font: inherit; font-size: calc(16px * var(--fs, 1)); box-sizing: border-box; } .at-job[hidden] { display: none; }
.at-need { font-style: normal; font-weight: 600; color: var(--fg-2); }
.at-list:has(.at-cx) ~ .at-own, .at-list:has(.at-cx) ~ [data-go] { display: none; } /* mientras se pregunta, no se enseña lo de crear */

/* Configuración (14-oct, Carla): ninguna sección enseña pantallas a medias; mientras carga, un esqueleto de su tamaño y sin saltos. */
.psec[data-loading] > .group, .psec[data-loading] > .card, .psec[data-loading] > .psec { display: none; }
.psec[data-loading]::after { content: ''; display: block; min-height: 460px; border-radius: var(--r-lg); background: linear-gradient(90deg, var(--surface), var(--surface-2), var(--surface)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }

/* ---------- diseño v1 (Dani 14-oct, traspasos/marca-qiu/v2/IMPLEMENTACION-v2.md) ---------- */
/* la palabra destacada en degradado (Noche: menta → azul; claro: #1A4FCC → #45B4FF, punto 22) */
.hl { background: var(--grad-hl); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
/* la rejilla suave SOLO en tarjetas, nunca de fondo de página (punto 23) */
.grid-card { background-color: var(--surface);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px), var(--halo);
  background-size: 24px 24px, 24px 24px, 100% 100%; }
.sub, small { font-size: max(calc(12.5px * var(--fs, 1)), 1em); }
/* las tarjetas de «añade el primero» llevan la rejilla de las tarjetas; Proyectos vacío, con Qiu contento arriba (puntos 12 y 23) */
.empty-add { background-color: var(--surface); background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px), var(--halo); background-size: 24px 24px, 24px 24px, 100% 100%; }
.empty-add .ea-plus { box-shadow: var(--glow); }
.proj-empty .empty-add { gap: 10px; padding-top: 18px; }
.proj-empty .ea-qiu { order: -1; display: block; width: 150px; height: 152px; }
.proj-empty .ea-qiu > img { width: 150px; height: 150px; }
.proj-empty .empty-add b { font-size: calc(20px * var(--fs, 1)); font-weight: 700; }
.proj-empty .ea-p { order: 1; max-width: 36ch; color: var(--muted); font-size: calc(14.5px * var(--fs, 1)); line-height: 1.45; text-align: center; }
.proj-empty .ea-plus { order: 2; margin-top: 6px; }
/* Agentes: «Cómo funciona» como tarjeta del tema con la rejilla (clara en claro), la etiqueta arriba; portadas sin el azul noche fijo (puntos 3, 8 y 23) */
.ag-hero { color: var(--fg); border: 1px solid var(--line); box-shadow: var(--shadow-1); background-color: var(--surface);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px), var(--halo); background-size: 24px 24px, 24px 24px, 100% 100%; }
.ag-hero .ag-how { display: contents; }
.ag-hero .ag-how b { order: -1; font: 600 calc(11px * var(--fs, 1))/1.2 var(--font-mark); letter-spacing: .2em; color: var(--brand-text); }
.ag-hero p { color: var(--fg); font-weight: 600; }
.ag-how li { color: var(--fg-2); } .ag-how i { background: var(--brand-soft); color: var(--brand-text); }
.ag-team i { border-color: var(--surface); } .ag-team-f i { background: var(--green); } .ag-team-v i { background: #7FC4E8; } .ag-team-m i { background: var(--brand); }
.ag-cover { background: radial-gradient(60% 80% at 30% 70%, color-mix(in srgb, var(--a) 32%, transparent), transparent 70%), radial-gradient(60% 80% at 75% 35%, color-mix(in srgb, var(--b) 26%, transparent), transparent 70%), var(--surface-2); }
.ag-edit { color: var(--fg); }
.ag-card:hover { box-shadow: var(--shadow-1), var(--glow); }
/* Configuración en el móvil: las secciones en UNA tarjeta agrupada con su icono en un cuadradito azul suave (maqueta 07, diseño v1) */
@media (max-width: 899px) {
  .set-nav { gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-1); }
  .set-nav button { border: 0; border-radius: 0; background: none; font-weight: 500; }
  .set-nav button + button { border-top: 1px solid var(--line); }
  .set-nav button svg { box-sizing: content-box; padding: 7px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-text); }
}
/* el segundo trozo de un titular (Planes, entrada) en el degradado de la marca */
.suave { background: var(--grad-hl); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* diseño v2 · Perfil › Cuenta (maqueta 14-cuenta-plan-*-propuesta): Referidos en una tarjeta (frase y botón a la izquierda, «Gestionar» como enlace),
   «Tu plan» en una sola lista con «Cambiar de plan o cancelar» como fila, y la prueba con su botón a la derecha. */
section[aria-labelledby="h-invite"] > .group-sub { display: none; } /* la frase entra en la tarjeta (invites-ui.js) */
.p-ref { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px 20px; border-radius: 20px; }
.p-ref p { margin: 0; }
.p-ref .p-joined { font-weight: 700; font-size: calc(16px * var(--fs, 1)); color: var(--fg); }
.p-ref .p-ref-d, .p-ref .p-ref-prog { color: var(--fg-2); font-size: calc(13.5px * var(--fs, 1)); line-height: 1.45; }
.p-ref .p-ref-d { margin-top: 4px; }
.p-ref > .btn { justify-self: start; }
.p-ref-f { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.p-ref-more { padding: 10px 0; border: 0; background: none; font: 600 calc(14px * var(--fs, 1))/1.3 var(--font); color: var(--brand-text); cursor: pointer; text-align: start; }
.p-ref-more:hover { text-decoration: underline; }
@media (min-width: 900px) {
  .p-ref { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 20px; }
  .p-ref-f { display: contents; }
  .p-ref .p-ref-prog { grid-column: 1; grid-row: 2; margin-top: -10px; }
  .p-ref > .btn { grid-column: 2; grid-row: 1 / span 2; }
  .p-ref-more { grid-column: 3; grid-row: 1 / span 2; }
}
#p-plan > .list { border-radius: 20px; }
#p-plan > .list > * + * { border-top: 1px solid var(--line); }
#p-plan > .list .tile:not(.q-tile) { background: var(--brand-soft); border-color: transparent; color: var(--brand-text); }
#p-plan .p-baja-in > .row { min-height: 64px; padding: 12px 16px; border: 0; border-radius: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
#p-plan .p-baja-in > .row > .ico:last-child { margin-left: auto; color: var(--muted); }
#p-plan .p-baja-in:not(:has(> .row)) { padding: 16px; }
.p-trial { display: grid; gap: 12px; margin-top: 14px; padding: 18px 20px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--line); box-shadow: none; }
.p-trial .title { font-weight: 700; }
.p-trial .hint { margin: 4px 0 0; color: var(--fg-2); font-size: calc(13.5px * var(--fs, 1)); line-height: 1.45; }
.p-trial > .btn { justify-self: start; }
@media (min-width: 900px) { .p-trial { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px; } .p-trial > .btn { grid-column: 2; grid-row: 1; } }

/* ---------- v2 (Dani 14-oct, PDF 04, 04b y 05) ---------- */
@media (max-width: 767.98px) { #view .tab-head h1 { font-size: calc(30px * var(--fs, 1)); font-weight: 700; } }
@media (min-width: 768px) { #view .tab-head h1 { font-size: calc(34px * var(--fs, 1)); } }
@media (max-width: 767.98px) { .tab-head .btn.sm { font-size: calc(15px * var(--fs, 1)); font-weight: 700; } }
.empty-add { border-width: 1px; border-color: var(--line-2); }
.empty-add .ea-plus { width: 50px; height: 50px; }
.ag-cols .ag-grid > .empty-add { min-height: 100%; }
@media (min-width: 768px) { .ag-cols:has(.ag-side) .ag-grid { align-self: stretch; } .ag-cols:has(.ag-side) .ag-grid > .empty-add { min-height: 300px; } }
/* Agentes: el texto del cuadro de arriba más grande y con peso medio; el dibujo, a la derecha también en el móvil */
.ag-hero p { font-weight: 500; font-size: calc(18px * var(--fs, 1)); }
@media (min-width: 768px) { .ag-hero p { font-size: calc(19px * var(--fs, 1)); } .ag-how ol { grid-auto-flow: column; justify-content: start; gap: 24px; } }
@media (max-width: 767px) { .ag-hero .ag-team { order: 0; position: absolute; top: 16px; right: 14px; width: 84px; height: 76px; } .ag-hero .ag-team i { width: 20px; height: 20px; border-width: 1.5px; } .ag-hero .ag-team i svg { width: 11px; height: 11px; } .ag-hero > div > p { max-width: calc(100% - 78px); } }
@media (min-width: 768px) { .ag-hero > div { max-width: 66ch; } .ag-how li { white-space: nowrap; } }
/* plantillas del lateral: separadas por una línea y la descripción en una sola línea */
.ag-side .ag-tpl + .ag-tpl, .ag-side li + li { border-top: 1px solid var(--line); }
.ag-side .ag-tpl-t small, .ag-side .ag-tpl-t span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Ajustes › Tema (v2, 08): siete azulejos con la muestra encima del nombre; 4 por fila en el móvil, los 7 en una en el ordenador */
.themes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 900px) { .themes { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.themes button { flex-direction: column; justify-content: center; gap: 6px; min-height: 72px; padding: 10px 4px; background: var(--surface); font-size: calc(12.5px * var(--fs, 1)); text-align: center; }
.themes button[aria-pressed="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.themes .sw { width: 24px; height: 24px; }
/* Cuenta: la foto o la inicial con el formato de Chats (fondo suave y la letra en su color), sin doble aro; la cámara solo en el ordenador */
.identity .avatar:not(:has(img:not([hidden]))) { background: color-mix(in srgb, var(--brand) 18%, var(--surface)); color: var(--brand-text); }
.identity .avatar { --s: 56px; box-shadow: none; }
@media (min-width: 900px) { .identity .avatar { --s: 64px; } }
@media (max-width: 899px) { .identity .avatar-edit { display: none; } }

/* Agentes responsive (Carla, 15-oct): la ilustracion tiene su hueco y nunca tapa el texto; los pasos se parten en filas cuando no caben; las tarjetas ocupan la fila; los sugeridos en dos lineas con puntos suspensivos. */
.ag-hero > div:not(.ag-team) { flex: 1 1 0; }
.ag-grid { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
@media (min-width: 768px) and (max-width: 1279px) { .ag-how ol { grid-auto-flow: row; } .ag-how li { white-space: normal; } .ag-hero > div:not(.ag-team) { max-width: none; } }
.ag-side .ag-tpl-t small, .ag-side .ag-tpl-t span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Textos cortados a mitad de palabra (Carla, 15-oct: «pasa con todo»). Causa unica medida en produccion: un hijo de
   flex o de grid arranca con min-width auto, asi que NO encoge por debajo de su propio texto; si su caja lleva el
   desbordamiento oculto, la palabra se parte sin puntos suspensivos. Medido: «Automatizaciones» se salia 34 px a 600
   y 11 px a 768 en Inicio, y dos textos 33 px a 768 en Agentes. Solo reparto de espacio: no toca color ni tipografia.
   Las filas deslizables (.chat-chips) se dejan como estan: ahi el texto se alcanza arrastrando. */
.home-tile > *, .ag-hero > div > * { min-width: 0; }
.home-tile span, .ag-hero > div > p, .ag-hero > div > span { overflow-wrap: break-word; }

/* 15-oct (Carla, iPhone: «cuando hago scroll sigue vibrando la barra de menu»): en Safari cada capa fija con desenfoque y mascara se vuelve a pintar en
   cada fotograma del scroll, y aqui se apilaban cuatro (pildora, velo de abajo, velo de arriba, cabecera). Solo la pildora conserva el cristal y va en su propia
   capa; los velos y la cabecera pasan a degradado/color liso (mismo aspecto, sin pintado por fotograma). Y sin rebote elastico, que movia las piezas fijas. */
@media (max-width: 767.98px) {
  html { overscroll-behavior-y: none; }
  #tabbar { -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform; }
  #app::after { -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask-image: none; mask-image: none;
    background: linear-gradient(to top, color-mix(in srgb, var(--bg) 94%, transparent) 20%, transparent); }
  body::before { -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask-image: none; mask-image: none;
    background: linear-gradient(to bottom, var(--bg) calc(100% - 12px), transparent); }
  #view .tab-head { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--bg) 94%, transparent); }
}

/* ---------- diseño v2 · ronda 2 (15-oct): detalles de Ajustes, Configuración y Cuenta frente a las maquetas 07, 08 y 14 ---------- */
@media (max-width: 899px) {
  .set-nav button { min-height: 65px; font-weight: 600; }
  /* General: Idioma y «Cómo usas Qiu» como píldoras con borde y «›»; los iconos de las filas en su cuadradito azul suave */
  #p-look .row > .tile { background: var(--brand-soft); border-color: transparent; color: var(--brand-text); }
  #p-look .row .end select { -webkit-appearance: none; appearance: none; min-height: 42px; padding: 0 34px 0 16px; border: 1px solid var(--line-2); border-radius: 999px; background-color: var(--surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; box-shadow: none; } #p-look .row .end select:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); } /* 23-oct (auditoría a11y, WCAG 2.4.7): con foco, el borde y la sombra de los campos (:306) */
  .themes .sw, .themes button .sw { width: 16px; height: 16px; }
  .fs-ticks { display: none; }
}
/* Pie de Configuración: enlaces sin subrayar y la marca «QIU.» debajo */
.profile-foot a { text-decoration: none; }
.profile-foot a:hover { color: var(--fg); }
.profile-foot .pf-mark { flex-basis: 100%; justify-content: center; min-height: 0; font: 700 calc(18px * var(--fs, 1))/1 var(--font-mark, var(--font-display)); letter-spacing: .06em; color: var(--fg-2); }
/* Cuenta: «Llevas N de 4…» y «Gestionar mis enlaces» en la misma línea; el icono del plan en su azulejo oscuro */
.p-ref .p-ref-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; }
.p-ref .p-ref-f > * { margin: 0; }
.p-ref .p-ref-f .p-ref-prog { flex: 1 1 0; min-width: 0; } .p-ref .p-ref-f > :not(.p-ref-prog) { flex: none; max-width: 48%; text-align: start; }
#p-plan .tile.q-tile { background: #070B1E; border-color: transparent; }

/* Superagentes alineados (Carla, 18-oct: «esto no está alineado»): 2 columnas en móvil y 3 en el resto (6 tarjetas = 3 filas de 2 o 2 de 3, sin hueco), y el
   nombre, el resultado y la descripción ocupan en todas las tarjetas el mismo alto: el de la que más líneas necesita con ESE ancho de tarjeta y ESE idioma
   (--lt, --lr, --ld = líneas, medidas con la letra real; el ancho que cuenta es el de la tarjeta, no el de la pantalla). Sin subgrid ni filas compartidas:
   la prueba del 17-oct (Dani) las prohíbe porque abrían huecos. */
.ag-sup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .ag-sup-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ag-sup-grid > .ag-supc { container-type: inline-size; }
.ag-supc .ag-body b { min-height: calc(1.25em * var(--lt, 2)); }
.ag-supc .ag-res { min-height: calc(1.3em * var(--lr, 4)); }
.ag-supc .ag-body > span:last-child { min-height: calc(1.4em * var(--ld, 8)); }
.ag-supc .ag-body{--lt:3;--lr:4;--ld:8}
@container (min-width: 155px) { .ag-supc .ag-body{--lt:2;--lr:4;--ld:6} }
@container (min-width: 180px) { .ag-supc .ag-body{--lt:2;--lr:3;--ld:6} }
@container (min-width: 215px) { .ag-supc .ag-body{--lt:1;--lr:3;--ld:4} }
@container (min-width: 270px) { .ag-supc .ag-body{--lt:1;--lr:2;--ld:3} }
:lang(ar) .ag-supc .ag-body{--lt:2;--lr:4;--ld:5}
@container (min-width: 155px) { :lang(ar) .ag-supc .ag-body{--lt:2;--lr:4;--ld:5} }
@container (min-width: 180px) { :lang(ar) .ag-supc .ag-body{--lt:1;--lr:3;--ld:4} }
@container (min-width: 215px) { :lang(ar) .ag-supc .ag-body{--lt:1;--lr:3;--ld:3} }
@container (min-width: 270px) { :lang(ar) .ag-supc .ag-body{--lt:1;--lr:2;--ld:3} }
:lang(ca) .ag-supc .ag-body{--lt:2;--lr:4;--ld:9}
@container (min-width: 155px) { :lang(ca) .ag-supc .ag-body{--lt:2;--lr:4;--ld:6} }
@container (min-width: 180px) { :lang(ca) .ag-supc .ag-body{--lt:2;--lr:3;--ld:6} }
@container (min-width: 215px) { :lang(ca) .ag-supc .ag-body{--lt:1;--lr:2;--ld:4} }
@container (min-width: 270px) { :lang(ca) .ag-supc .ag-body{--lt:1;--lr:2;--ld:4} }
:lang(cs) .ag-supc .ag-body{--lt:3;--lr:4;--ld:8}
@container (min-width: 155px) { :lang(cs) .ag-supc .ag-body{--lt:2;--lr:4;--ld:6} }
@container (min-width: 180px) { :lang(cs) .ag-supc .ag-body{--lt:2;--lr:3;--ld:5} }
@container (min-width: 215px) { :lang(cs) .ag-supc .ag-body{--lt:2;--lr:2;--ld:4} }
@container (min-width: 270px) { :lang(cs) .ag-supc .ag-body{--lt:1;--lr:2;--ld:3} }
:lang(da) .ag-supc .ag-body{--lt:3;--lr:4;--ld:8}
@container (min-width: 155px) { :lang(da) .ag-supc .ag-body{--lt:2;--lr:4;--ld:6} }
@container (min-width: 180px) { :lang(da) .ag-supc .ag-body{--lt:2;--lr:3;--ld:5} }
@container (min-width: 215px) { :lang(da) .ag-supc .ag-body{--lt:1;--lr:3;--ld:4} }
@container (min-width: 270px) { :lang(da) .ag-supc .ag-body{--lt:1;--lr:2;--ld:3} }
:lang(de) .ag-supc .ag-body{--lt:3;--lr:5;--ld:9}
@container (min-width: 155px) { :lang(de) .ag-supc .ag-body{--lt:3;--lr:4;--ld:8} }
@container (min-width: 180px) { :lang(de) .ag-supc .ag-body{--lt:2;--lr:4;--ld:6} }
@container (min-width: 215px) { :lang(de) .ag-supc .ag-body{--lt:1;--lr:3;--ld:5} }
@container (min-width: 270px) { :lang(de) .ag-supc .ag-body{--lt:1;--lr:2;--ld:4} }
:lang(el) .ag-supc .ag-body{--lt:4;--lr:5;--ld:9}
@container (min-width: 155px) { :lang(el) .ag-supc .ag-body{--lt:2;--lr:4;--ld:7} }
@container (min-width: 180px) { :lang(el) .ag-supc .ag-body{--lt:2;--lr:4;--ld:6} }
@container (min-width: 215px) { :lang(el) .ag-supc .ag-body{--lt:2;--lr:3;--ld:5} }
@container (min-width: 270px) { :lang(el) .ag-supc .ag-body{--lt:1;--lr:2;--ld:4} }
:lang(en) .ag-supc .ag-body{--lt:3;--lr:5;--ld:9}
@container (min-width: 155px) { :lang(en) .ag-supc .ag-body{--lt:3;--lr:4;--ld:7} }
@container (min-width: 180px) { :lang(en) .ag-supc .ag-body{--lt:2;--lr:4;--ld:5} }
@container (min-width: 215px) { :lang(en) .ag-supc .ag-body{--lt:2;--lr:3;--ld:5} }
@container (min-width: 270px) { :lang(en) .ag-supc .ag-body{--lt:1;--lr:2;--ld:3} }
:lang(fi) .ag-supc .ag-body{--lt:3;--lr:4;--ld:8}
@container (min-width: 155px) { :lang(fi) .ag-supc .ag-body{--lt:2;--lr:4;--ld:6} }
@container (min-width: 180px) { :lang(fi) .ag-supc .ag-body{--lt:2;--lr:3;--ld:5} }
@container (min-width: 215px) { :lang(fi) .ag-supc .ag-body{--lt:1;--lr:3;--ld:4} }
@container (min-width: 270px) { :lang(fi) .ag-supc .ag-body{--lt:1;--lr:2;--ld:3} }
:lang(fr) .ag-supc .ag-body{--lt:2;--lr:4;--ld:9}
@container (min-width: 155px) { :lang(fr) .ag-supc .ag-body{--lt:2;--lr:4;--ld:7} }
@container (min-width: 180px) { :lang(fr) .ag-supc .ag-body{--lt:2;--lr:3;--ld:6} }
@container (min-width: 215px) { :lang(fr) .ag-supc .ag-body{--lt:1;--lr:3;--ld:5} }
@container (min-width: 270px) { :lang(fr) .ag-supc .ag-body{--lt:1;--lr:2;--ld:4} }
:lang(he) .ag-supc .ag-body{--lt:3;--lr:4;--ld:6}
@container (min-width: 155px) { :lang(he) .ag-supc .ag-body{--lt:2;--lr:3;--ld:5} }
@container (min-width: 180px) { :lang(he) .ag-supc .ag-body{--lt:2;--lr:3;--ld:5} }
@container (min-width: 215px) { :lang(he) .ag-supc .ag-body{--lt:1;--lr:2;--ld:4} }
@container (min-width: 270px) { :lang(he) .ag-supc .ag-body{--lt:1;--lr:2;--ld:3} }
:lang(hi) .ag-supc .ag-body{--lt:2;--lr:3;--ld:7}
@container (min-width: 155px) { :lang(hi) .ag-supc .ag-body{--lt:2;--lr:3;--ld:5} }
@container (min-width: 180px) { :lang(hi) .ag-supc .ag-body{--lt:1;--lr:2;--ld:5} }
@container (min-width: 215px) { :lang(hi) .ag-supc .ag-body{--lt:1;--lr:2;--ld:4} }
@container (min-width: 270px) { :lang(hi) .ag-supc .ag-body{--lt:1;--lr:2;--ld:3} }
:lang(id) .ag-supc .ag-body{--lt:3;--lr:5;--ld:10}
@container (min-width: 155px) { :lang(id) .ag-supc .ag-body{--lt:3;--lr:4;--ld:9} }
@container (min-width: 180px) { :lang(id) .ag-supc .ag-body{--lt:2;--lr:3;--ld:7} }
@container (min-width: 215px) { :lang(id) .ag-supc .ag-body{--lt:2;--lr:3;--ld:6} }
@container (min-width: 270px) { :lang(id) .ag-supc .ag-body{--lt:1;--lr:2;--ld:4} }
:lang(it) .ag-supc .ag-body{--lt:3;--lr:4;--ld:8}
@container (min-width: 155px) { :lang(it) .ag-supc .ag-body{--lt:2;--lr:4;--ld:7} }
@container (min-width: 180px) { :lang(it) .ag-supc .ag-body{--lt:2;--lr:3;--ld:5} }
@container (min-width: 215px) { :lang(it) .ag-supc .ag-body{--lt:1;--lr:2;--ld:5} }
@container (min-width: 270px) { :lang(it) .ag-supc .ag-body{--lt:1;--lr:2;--ld:3} }
:lang(ja) .ag-supc .ag-body{--lt:3;--lr:4;--ld:7}
@container (min-width: 155px) { :lang(ja) .ag-supc .ag-body{--lt:2;--lr:3;--ld:5} }
@container (min-width: 180px) { :lang(ja) .ag-supc .ag-body{--lt:2;--lr:3;--ld:5} }
@container (min-width: 215px) { :lang(ja) .ag-supc .ag-body{--lt:2;--lr:2;--ld:4} }
@container (min-width: 270px) { :lang(ja) .ag-supc .ag-body{--lt:1;--lr:2;--ld:3} }
:lang(ko) .ag-supc .ag-body{--lt:2;--lr:4;--ld:6}
@container (min-width: 155px) { :lang(ko) .ag-supc .ag-body{--lt:2;--lr:3;--ld:5} }
@container (min-width: 180px) { :lang(ko) .ag-supc .ag-body{--lt:1;--lr:3;--ld:4} }
@container (min-width: 215px) { :lang(ko) .ag-supc .ag-body{--lt:1;--lr:2;--ld:4} }
@container (min-width: 270px) { :lang(ko) .ag-supc .ag-body{--lt:1;--lr:2;--ld:3} }
:lang(nb) .ag-supc .ag-body{--lt:3;--lr:5;--ld:8}
@container (min-width: 155px) { :lang(nb) .ag-supc .ag-body{--lt:2;--lr:4;--ld:6} }
@container (min-width: 180px) { :lang(nb) .ag-supc .ag-body{--lt:2;--lr:4;--ld:5} }
@container (min-width: 215px) { :lang(nb) .ag-supc .ag-body{--lt:1;--lr:3;--ld:4} }
@container (min-width: 270px) { :lang(nb) .ag-supc .ag-body{--lt:1;--lr:2;--ld:3} }
:lang(nl) .ag-supc .ag-body{--lt:3;--lr:5;--ld:9}
@container (min-width: 155px) { :lang(nl) .ag-supc .ag-body{--lt:2;--lr:4;--ld:7} }
@container (min-width: 180px) { :lang(nl) .ag-supc .ag-body{--lt:2;--lr:3;--ld:6} }
@container (min-width: 215px) { :lang(nl) .ag-supc .ag-body{--lt:1;--lr:3;--ld:4} }
@container (min-width: 270px) { :lang(nl) .ag-supc .ag-body{--lt:1;--lr:2;--ld:4} }
:lang(pl) .ag-supc .ag-body{--lt:3;--lr:5;--ld:8}
@container (min-width: 155px) { :lang(pl) .ag-supc .ag-body{--lt:2;--lr:4;--ld:7} }
@container (min-width: 180px) { :lang(pl) .ag-supc .ag-body{--lt:2;--lr:3;--ld:6} }
@container (min-width: 215px) { :lang(pl) .ag-supc .ag-body{--lt:1;--lr:3;--ld:5} }
@container (min-width: 270px) { :lang(pl) .ag-supc .ag-body{--lt:1;--lr:2;--ld:4} }
:lang(pt) .ag-supc .ag-body{--lt:2;--lr:5;--ld:9}
@container (min-width: 155px) { :lang(pt) .ag-supc .ag-body{--lt:2;--lr:4;--ld:6} }
@container (min-width: 180px) { :lang(pt) .ag-supc .ag-body{--lt:2;--lr:4;--ld:5} }
@container (min-width: 215px) { :lang(pt) .ag-supc .ag-body{--lt:1;--lr:3;--ld:5} }
@container (min-width: 270px) { :lang(pt) .ag-supc .ag-body{--lt:1;--lr:2;--ld:4} }
:lang(ro) .ag-supc .ag-body{--lt:2;--lr:4;--ld:8}
@container (min-width: 155px) { :lang(ro) .ag-supc .ag-body{--lt:2;--lr:4;--ld:6} }
@container (min-width: 180px) { :lang(ro) .ag-supc .ag-body{--lt:1;--lr:3;--ld:6} }
@container (min-width: 215px) { :lang(ro) .ag-supc .ag-body{--lt:1;--lr:3;--ld:4} }
@container (min-width: 270px) { :lang(ro) .ag-supc .ag-body{--lt:1;--lr:2;--ld:3} }
:lang(ru) .ag-supc .ag-body{--lt:4;--lr:5;--ld:10}
@container (min-width: 155px) { :lang(ru) .ag-supc .ag-body{--lt:2;--lr:4;--ld:8} }
@container (min-width: 180px) { :lang(ru) .ag-supc .ag-body{--lt:2;--lr:4;--ld:7} }
@container (min-width: 215px) { :lang(ru) .ag-supc .ag-body{--lt:2;--lr:3;--ld:5} }
@container (min-width: 270px) { :lang(ru) .ag-supc .ag-body{--lt:1;--lr:2;--ld:4} }
:lang(sv) .ag-supc .ag-body{--lt:2;--lr:5;--ld:8}
@container (min-width: 155px) { :lang(sv) .ag-supc .ag-body{--lt:2;--lr:4;--ld:7} }
@container (min-width: 180px) { :lang(sv) .ag-supc .ag-body{--lt:2;--lr:3;--ld:5} }
@container (min-width: 215px) { :lang(sv) .ag-supc .ag-body{--lt:1;--lr:3;--ld:4} }
@container (min-width: 270px) { :lang(sv) .ag-supc .ag-body{--lt:1;--lr:2;--ld:3} }
:lang(th) .ag-supc .ag-body{--lt:3;--lr:4;--ld:6}
@container (min-width: 155px) { :lang(th) .ag-supc .ag-body{--lt:2;--lr:3;--ld:5} }
@container (min-width: 180px) { :lang(th) .ag-supc .ag-body{--lt:2;--lr:3;--ld:4} }
@container (min-width: 215px) { :lang(th) .ag-supc .ag-body{--lt:1;--lr:2;--ld:4} }
@container (min-width: 270px) { :lang(th) .ag-supc .ag-body{--lt:1;--lr:2;--ld:3} }
:lang(tr) .ag-supc .ag-body{--lt:2;--lr:4;--ld:8}
@container (min-width: 155px) { :lang(tr) .ag-supc .ag-body{--lt:2;--lr:4;--ld:7} }
@container (min-width: 180px) { :lang(tr) .ag-supc .ag-body{--lt:1;--lr:3;--ld:5} }
@container (min-width: 215px) { :lang(tr) .ag-supc .ag-body{--lt:1;--lr:2;--ld:4} }
@container (min-width: 270px) { :lang(tr) .ag-supc .ag-body{--lt:1;--lr:2;--ld:3} }
:lang(uk) .ag-supc .ag-body{--lt:4;--lr:6;--ld:10}
@container (min-width: 155px) { :lang(uk) .ag-supc .ag-body{--lt:2;--lr:4;--ld:8} }
@container (min-width: 180px) { :lang(uk) .ag-supc .ag-body{--lt:2;--lr:4;--ld:6} }
@container (min-width: 215px) { :lang(uk) .ag-supc .ag-body{--lt:1;--lr:3;--ld:5} }
@container (min-width: 270px) { :lang(uk) .ag-supc .ag-body{--lt:1;--lr:2;--ld:4} }
:lang(vi) .ag-supc .ag-body{--lt:3;--lr:4;--ld:8}
@container (min-width: 155px) { :lang(vi) .ag-supc .ag-body{--lt:2;--lr:3;--ld:6} }
@container (min-width: 180px) { :lang(vi) .ag-supc .ag-body{--lt:2;--lr:3;--ld:5} }
@container (min-width: 215px) { :lang(vi) .ag-supc .ag-body{--lt:2;--lr:3;--ld:4} }
@container (min-width: 270px) { :lang(vi) .ag-supc .ag-body{--lt:1;--lr:2;--ld:3} }
:lang(zh) .ag-supc .ag-body{--lt:2;--lr:4;--ld:6}
@container (min-width: 155px) { :lang(zh) .ag-supc .ag-body{--lt:1;--lr:3;--ld:4} }
@container (min-width: 180px) { :lang(zh) .ag-supc .ag-body{--lt:1;--lr:3;--ld:4} }
@container (min-width: 215px) { :lang(zh) .ag-supc .ag-body{--lt:1;--lr:2;--ld:3} }
@container (min-width: 270px) { :lang(zh) .ag-supc .ag-body{--lt:1;--lr:2;--ld:2} }

/* ─── Modo Simple (29-oct, llamada Marcelino + Dani): solo el chat con Qiu, sin barra de pestañas ─── */
body[data-simple="1"] #tabbar, body[data-simple="1"] #split { display: none !important; }
@media (min-width: 768px) {
  body[data-simple="1"] #app { grid-template-columns: minmax(0, 1fr); }
  body[data-simple="1"] #view { grid-column: 1; }
}
/* Chip «Modo completo»: abre toda la app. Placeholder: centrado bajo la cabecera del chat (posición final la ajusta Dani). */
.simple-full {
  position: fixed; z-index: 55; top: calc(64px + var(--safe-t)); left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--fg);
  font: 600 calc(13px * var(--fs, 1))/1 var(--font-ui, inherit); cursor: pointer; box-shadow: 0 2px 12px rgba(0, 0, 0, .22);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.simple-full:hover { background: var(--surface-2); }
.simple-full svg { width: 16px; height: 16px; }
.simple-full[aria-busy="true"] { opacity: .6; pointer-events: none; }
body:not([data-simple="1"]) .simple-full { display: none; }
.sd-nota { margin: 10px 2px 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); }
.sd-otro { display: grid; gap: 10px; margin-top: 12px; padding: 14px; border: 1px solid var(--line-2); border-radius: 14px; }
.sd-otro[hidden], .sd-nota[hidden] { display: none; }
.sd-otro-q, .sd-otro-w { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 12px; background: transparent; color: var(--fg); font: inherit; }
.sd-otro-l, .sd-otro-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sd-otro-l img { width: 26px; height: 26px; object-fit: contain; }
.sd-otro-l > [role="listitem"] { display: grid; } /* el elemento de la lista es la celda y el botón de dentro la llena (23-oct (auditoría a11y)) */
.sd-otro-p { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.sd-otro-b[aria-expanded="true"] { border-color: var(--brand); }
.sd-otro-m{margin:.6rem 0;padding:.7rem .8rem;border:1px solid var(--line,#e5e5e5);border-radius:10px}
.sd-otro-m ol{margin:.4rem 0 .6rem 1.1rem;padding:0}.sd-otro-m li{margin:.25rem 0}
.sd-url{display:block;margin:.3rem 0;word-break:break-all;user-select:all}
.sd-otro-k{display:grid;gap:.4rem;margin:.4rem 0}.sd-otro-k input{width:100%;box-sizing:border-box}
.sd-crm{margin:.2rem 0 .6rem}