/* 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. */
@font-face { font-family: 'Manrope'; src: url('/qiu/fonts/manrope.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@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 */
  --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: #1F5FD6; /* guía de Qiu: azul de marca sobre claro */
  --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: #1C7A5A; --amber: #865C00; --red: #C4262A;
  --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: #1F5FD6; /* guía de Qiu: azul de marca sobre claro */
    --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: #1C7A5A; --amber: #865C00; --red: #C4262A;
    --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: #A3ADB8; --brand-text: #8AA7FF; --glass: rgba(38, 43, 49, .86); }
: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);
}
#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; }
/* [Q] va primero en el DOM (el escritorio lo pone arriba y el tabulador lo sigue); en el movil se queda en el centro de la barra */
@media (max-width: 767.98px) { #tabbar [data-tab="home"] { order: 1; } #tabbar [data-tab="community"] { order: 2; } #tabbar [data-tab="q"] { order: 3; } #tabbar [data-tab="chats"] { order: 4; } #tabbar [data-tab="profile"] { order: 5; } }

/* 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 {
    order: -1; 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, en este orden; debajo Recientes, el pie y Perfil */
  #tabbar.side-full > [data-tab="home"] { order: 1; } #tabbar.side-full > [data-tab="chats"] { order: 2; } #tabbar.side-full > [data-tab="proyectos"] { order: 3; }
  #tabbar.side-full > [data-tab="agentes"] { order: 4; } #tabbar.side-full > [data-tab="community"] { order: 5; } #tabbar.side-full > [data-tab="buscar"] { order: 6; }
  #tabbar.side-full > .side-mid { order: 7; } #tabbar.side-full > .side-foot { order: 8; } #tabbar.side-full > [data-tab="profile"] { order: 9; }
  #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(--red); border-color: var(--red); }
.btn.danger:hover { background: var(--red); border-color: var(--red); 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:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: -2px; } /* Perfil › Conexiones: the row opens its detail */
.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(--focus, var(--brand)); outline-offset: 3px; }
.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 > * { 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);
}
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) */
.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; }
.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); }
.wf-add input { display: none; } .wf-add span { padding: 0 4px; }
.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); 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-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); }
#tabbar .tab-me[hidden], #tabbar .tab-ico:has(.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; }
.ag-card { position: relative; display: grid; align-content: start; overflow: hidden; 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); }
.ag-body { display: grid; gap: 4px; padding: 12px 14px 14px; color: inherit; text-decoration: none; }
.ag-body b { display: flex; align-items: center; gap: 8px; font: 600 calc(15px * var(--fs, 1))/1.25 var(--font-display); } .ag-body b svg { flex: none; } .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%; }
.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. */
.ag-supc { border-style: dashed; }
.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); }
/* Las tres tarjetas de superagente reservan las mismas lineas de resultado: la descripcion empieza a la misma altura en las tres (Carla, 15-oct 21:39). */
/* Rejilla compartida: portada, nombre, resultado, descripcion y etiqueta tienen la misma altura de fila en las tres tarjetas, sea cual sea el idioma (Carla, 16-oct). */
.ag-sup-grid > .ag-supc { grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
.ag-sup-grid > .ag-supc > .ag-body { grid-row: 2 / span 3; grid-template-rows: subgrid; align-content: start; }
.ag-sup-grid > .ag-supc > .ag-lock { grid-row: 5; align-self: end; }
/* 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); }
/* 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: auto 12px 12px; }
.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; 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; }
#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 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; }
  .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; }