/* Armazón de la app (sale de maqueta/fuentes-boceto/boceto-armazon.html; sin lo que era solo del boceto). */
  .appbar-izq{display:flex;align-items:center;gap:0}
  .appbar-izq .ico-btn svg{width:20px;height:20px}
  #tit.tit-enlace{cursor:pointer;color:var(--accent)}

  [data-arrastrar] > .item{touch-action:pan-y;user-select:none;-webkit-user-select:none}
  .item.arrastrando{background:var(--surface-2);box-shadow:0 6px 18px rgba(0,0,0,.18);border-radius:12px;position:relative;z-index:2}

  .appbar-dcha{display:flex;gap:2px;align-items:center}
  .ico-btn{position:relative;width:38px;height:38px;border:0;background:none;color:var(--ink);display:grid;place-items:center;border-radius:12px;cursor:pointer}
  .ico-btn svg{width:22px;height:22px}
  .punto-aviso{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
  [data-solo]{display:none}
  .app[data-app="cerebro"] [data-solo="cerebro"]{display:block}
  .app[data-app="tareas"] [data-solo="tareas"]{display:block}
  .app[data-app="gimnasio"] [data-solo="gimnasio"]{display:block}
  .app[data-app="linkedin"] [data-solo="linkedin"]{display:block}
  .app[data-app="ingles"] [data-solo="ingles"]{display:block}
  .app[data-app="finanzas"] [data-solo="finanzas"]{display:block}
  .app[data-app=""] [data-solo=""]{display:block}
  .app[data-app="finanzas"] [data-solo=""]{display:block}
  .tit-seccion{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:14px 0 6px}


/* =====================================================================
   Armazón del boceto: solo lo que el CSS común no trae.
   Sin fuentes externas. Claro y oscuro con los tokens comunes.
   ===================================================================== */
[hidden]{display:none!important}

/* Un acento por app. En oscuro se usan los tonos claros de la paleta común. */
:root{--ac-cerebro:#6a45a8;--ac-claude:#a8730f;--ac-tareas:#0d7480;--ac-gimnasio:#b84a1f;--ac-finanzas:#1f5f4a;--ac-linkedin:#2a64b0;--ac-ingles:#a63a68}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--ac-cerebro:var(--c4);--ac-claude:#e3ac45;--ac-tareas:var(--c6);--ac-gimnasio:var(--c3);--ac-finanzas:var(--accent);--ac-linkedin:var(--c2);--ac-ingles:var(--c7)}
}
:root[data-theme="dark"]{--ac-cerebro:var(--c4);--ac-claude:#e3ac45;--ac-tareas:var(--c6);--ac-gimnasio:var(--c3);--ac-finanzas:var(--accent);--ac-linkedin:var(--c2);--ac-ingles:var(--c7)}

/* Dentro de una app, el acento común pasa a ser el de esa app (Finanzas conserva el suyo). */
.app[data-app="cerebro"],.ac-cerebro{--accent:var(--ac-cerebro);--accent-soft:color-mix(in srgb,var(--ac-cerebro) 15%,var(--surface))}
.app[data-app="claude"],.ac-claude{--accent:var(--ac-claude);--accent-soft:color-mix(in srgb,var(--ac-claude) 15%,var(--surface))}
.app[data-app="tareas"],.ac-tareas{--accent:var(--ac-tareas);--accent-soft:color-mix(in srgb,var(--ac-tareas) 15%,var(--surface))}
.app[data-app="gimnasio"],.ac-gimnasio{--accent:var(--ac-gimnasio);--accent-soft:color-mix(in srgb,var(--ac-gimnasio) 15%,var(--surface))}
.app[data-app="linkedin"],.ac-linkedin{--accent:var(--ac-linkedin);--accent-soft:color-mix(in srgb,var(--ac-linkedin) 15%,var(--surface))}
.app[data-app="ingles"],.ac-ingles{--accent:var(--ac-ingles);--accent-soft:color-mix(in srgb,var(--ac-ingles) 15%,var(--surface))}

/* Inicio: cada app lleva su color en el icono */
.sa .sa-ico{background:var(--ac,var(--accent))}
.sa[data-app="cerebro"]{--ac:var(--ac-cerebro)}
.sa[data-app="claude"]{--ac:var(--ac-claude)}
.sa[data-app="tareas"]{--ac:var(--ac-tareas)}
.sa[data-app="gimnasio"]{--ac:var(--ac-gimnasio)}
.sa[data-app="finanzas"]{--ac:var(--ac-finanzas)}
.sa[data-app="linkedin"]{--ac:var(--ac-linkedin)}
.sa[data-app="ingles"]{--ac:var(--ac-ingles)}

@media (max-width:520px) and (max-height:760px){.sa{min-height:122px;gap:8px;padding:12px 8px 10px}.sa .sa-ico{width:58px;height:58px;border-radius:16px}.sa .sa-ico svg{width:31px;height:31px}}


/* Barra superior: la flecha es un botón */
button.atras{appearance:none;border:0;background:none;cursor:pointer;font-family:inherit}
.atras-t{max-width:92px;overflow:hidden;text-overflow:ellipsis}
.appbar-tit h1:focus{outline:none}

/* Pantallas */
.pantalla{display:flex;flex-direction:column;gap:14px;padding:14px 16px 28px;animation:entra .2s ease}
.pantalla:focus{outline:none}
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Barras de las apps (se mueven solas bajo el contenido) */
.barra-app{flex:none;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;background:var(--surface);
  border-top:1px solid var(--line);padding:6px 10px calc(6px + var(--sab));position:relative;z-index:5}
.barra-app a,.barra-app button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:46px;
  padding:6px 2px;border-radius:12px;border:0;background:none;color:var(--muted);text-decoration:none;font:inherit;font-size:11.5px;font-weight:600;cursor:pointer}
.barra-app svg{width:23px;height:23px}
.barra-app [aria-current="page"],.barra-c [aria-current="page"]{color:var(--accent);background:var(--accent-soft)}

/* Hojas inferiores (data-hoja). Usan los mismos trazos que .sheet */
.hoja{position:absolute;left:0;right:0;bottom:var(--teclado,0px);z-index:41;max-height:88%;display:flex;flex-direction:column;background:var(--surface);
  border-radius:20px 20px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.22);transform:translateY(102%);transition:transform .24s ease;padding-bottom:var(--sab)}
.hoja.abierta{transform:none}
@media (prefers-reduced-motion:reduce){.hoja{transition:none}.pantalla{animation:none}}

/* Pestañas (data-tab): sin panel visible no pasa nada; con panel, se oculta el resto */
[data-tab-grupo]{cursor:pointer}

/* data-marca: el marcado se ve en el propio elemento o en su fila */
[data-marca]{cursor:pointer}
button[data-marca]:empty{display:inline-grid;place-items:center}
button[data-marca].marcado{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
button[data-marca].marcado:empty::after{content:"";width:.42em;height:.8em;margin-top:-.15em;border:solid currentColor;border-width:0 2.4px 2.4px 0;transform:rotate(45deg)}
.item.marcado .t,.ordenable.marcado .t{text-decoration:line-through;color:var(--muted)}
.item:has([data-marca].marcado) .t,.ordenable:has([data-marca].marcado) .t{text-decoration:line-through;color:var(--muted)}
.item.marcado,.ordenable.marcado{opacity:.72}
[data-marca].marcado:not(button):not(.item):not(.ordenable){background:var(--accent-soft);border-color:var(--accent)}

/* data-mover */
[data-mover]{cursor:pointer}
[data-mover][aria-disabled="true"]{opacity:.35;pointer-events:none}
.movido{animation:movido .9s ease}
@keyframes movido{0%,100%{background:transparent}30%{background:var(--accent-soft)}}
@media (prefers-reduced-motion:reduce){.movido{animation:none}}

/* Detalles pequeños */
mark{background:var(--accent-soft);color:inherit;border-radius:3px;padding:0 1px}
.prop{font-style:italic;font-weight:400;color:var(--faint)}

/* Buscar */
.busca{position:relative}
.busca>svg{position:absolute;left:13px;top:50%;width:19px;height:19px;margin-top:-9.5px;color:var(--faint);pointer-events:none}
.busca input{padding-left:40px}
.res-cab{display:flex;align-items:center;justify-content:space-between;gap:10px}
.res-cab .sec{margin:4px 2px 0}

/* Capturar */
.cap-fila{display:flex;gap:8px;align-items:center}
.cap-fila input{flex:1;min-width:0}
.mic{appearance:none;flex:none;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);color:var(--fg);
  display:grid;place-items:center;cursor:pointer}
.mic svg{width:23px;height:23px}
.mic .ico-stop{display:none}
.mic.marcado{background:var(--bad);border-color:var(--bad);color:var(--bg);animation:pulso 1.4s ease-out infinite}
.mic.marcado .ico-mic{display:none}
.mic.marcado .ico-stop{display:block}
@keyframes pulso{0%{box-shadow:0 0 0 0 var(--bad-soft)}100%{box-shadow:0 0 0 14px transparent}}
@media (prefers-reduced-motion:reduce){.mic.marcado{animation:none}}
.cap-grab{display:none;margin:0;font-weight:600;color:var(--bad)}
.hoja:has(.mic.marcado) .cap-ayuda{display:none}
.hoja:has(.mic.marcado) .cap-grab{display:block}

/* =====================================================================
   App real (no boceto): ocupa la pantalla; en escritorio, columna centrada.
   ===================================================================== */
:root{--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px)}
html,body{height:100%;margin:0}
body{background:var(--stage)}
.app{position:fixed;inset:0;max-width:520px;margin:0 auto;padding-top:var(--sat);box-shadow:0 0 0 1px var(--line)}
.ico-btn{color:var(--fg)}
a.ico-btn{text-decoration:none}
a.atras{display:flex;align-items:center;gap:2px;color:var(--accent);text-decoration:none;font-weight:600;font-size:15px;padding:6px 4px;min-height:44px}
a.atras svg{width:22px;height:22px}
.tit-enlace{color:var(--accent);text-decoration:none}
.barra-app{display:grid}
.hoja{position:absolute}
.sheet-cuerpo .fila,.fila{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line);color:var(--fg);text-decoration:none}
.fila:last-child{border-bottom:0}
.fila-cuerpo{flex:1;min-width:0}
.fila .chev{color:var(--faint)}
.vacio{color:var(--muted);padding:6px 2px}
/* Menú */
.sa.apagada{position:relative}
.sa .pronto{font-size:11.5px;color:var(--faint);font-weight:600}
/* Entrada */
.entrada{min-height:100%;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:24px 20px;text-align:center}
.entrada h1{font-size:28px;margin:0}
.entrada .qr svg{width:220px;height:220px;background:#fff;border-radius:12px;padding:8px}
.qr{display:grid;place-items:center}
.qr svg{width:200px;height:200px;background:#fff;border-radius:12px;padding:8px}
.error{color:var(--bad)}
/* Finanzas */
.big-libre{font-size:40px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.prev{border-style:dashed}
.barra-prog{height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.barra-prog > span{display:block;height:100%;background:var(--accent)}
.barra-prog.warn > span{background:var(--warn)}
.barra-prog.bad > span{background:var(--bad)}
.grafico{width:100%;height:120px;display:block}
.grafico .lim{stroke:var(--line);stroke-dasharray:4 4}
.grafico .ant{stroke:var(--faint);stroke-dasharray:3 3;fill:none}
.grafico .act{fill:none;stroke-width:2.5}
.grafico .act.ok{stroke:var(--ok)}.grafico .act.warn{stroke:var(--warn)}.grafico .act.bad{stroke:var(--bad)}
.cat-fila{display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:10px;padding:6px 0}
.cat-fila .sw{width:12px;height:12px;border-radius:3px}
.filtros{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.filtros .chip{flex:none;text-decoration:none}
.dia-cab{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);font-weight:700;margin:10px 2px 2px}
.mov{display:flex;gap:10px;align-items:center;padding:10px 2px;border-bottom:1px solid var(--line);color:var(--fg);text-decoration:none}
.mov .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mov .d{font-size:12.5px;color:var(--muted)}
.importe{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.importe.pos{color:var(--ok)}
.mes-nav{display:flex;align-items:center;justify-content:space-between}
.mes-nav a{text-decoration:none;color:var(--accent);font-weight:700;font-size:20px;padding:4px 12px}
.pasos{display:flex;gap:6px}
.pasos a{flex:1;text-align:center;text-decoration:none}
.estado-mes{font-size:26px;font-weight:800}
.cifra-fila{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.cifra-ctrl{display:flex;align-items:center;gap:6px}
.cifra-ctrl input{width:96px;text-align:right}
.cifra-ctrl button{min-width:40px}
.pie-fijo{position:sticky;bottom:0;background:var(--bg);padding:10px 0 4px;border-top:1px solid var(--line)}
.pago-mover{display:flex;flex-direction:column;gap:2px}
.pago-mover button{min-height:28px;padding:0 10px}
.sheet-cuerpo .aviso-caja{display:flex;flex-direction:column;align-items:stretch;gap:6px}
/* Cerebro */
.burbujas{display:flex;flex-direction:column;gap:8px}
.burbuja{position:relative;max-width:92%;padding:9px 12px 18px;border-radius:16px;line-height:1.4;overflow-wrap:anywhere}
.burbuja.yo{align-self:flex-end;background:var(--accent-soft);border-bottom-right-radius:4px;white-space:pre-wrap}
.burbuja.claude{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:4px}
.burbuja p{margin:0 0 6px}.burbuja p:last-of-type{margin-bottom:0}
.burbuja blockquote{margin:4px 0;padding-left:10px;border-left:3px solid var(--line);color:var(--muted)}
.burbuja .hora{position:absolute;right:10px;bottom:3px;font-size:11px;color:var(--faint)}
.burbuja.escribiendo{color:var(--muted);font-style:italic;padding-bottom:9px}
.escribir{position:sticky;bottom:0;background:var(--bg);padding-top:8px;display:flex;flex-direction:column;gap:6px}
.hueco{padding:8px 14px;border-style:dashed;box-shadow:none}
.hueco.ahora{border-color:var(--accent)}
/* Lista de secciones en la hoja de los tres puntitos */
.lista-hoja{display:flex;flex-direction:column;background:var(--surface-2);border-radius:var(--r);padding:0 12px}
.lista-hoja .fila{padding:13px 0;min-height:52px}
.fila-t{font-weight:600}
.fila .chev{font-size:22px;line-height:1}

/* =====================================================================
   Segunda vuelta (2026-11-10): cabecera minimalista, avisos y diseño ancho.
   ===================================================================== */
:root{--amarillo:#e0a100}
[data-ir],[role=link]{cursor:pointer}
.app{display:flex;flex-direction:column}
.cuerpo{flex:1;min-height:0;display:flex;flex-direction:column}
.cuerpo>.scroller{flex:1;min-height:0}

/* Cabecera: flecha sola · nombre de la app (lleva a las apps) · lupa, bicho, campana y ⋯ */
.atras{appearance:none;border:0;background:none;cursor:pointer;color:var(--fg);opacity:.7;width:40px;height:40px;
  display:grid;place-items:center;border-radius:12px;padding:0;min-height:0}
.atras:hover{opacity:1;background:var(--surface-2)}
.atras svg{width:20px;height:20px;stroke-width:2.2}
.nombre-app{appearance:none;border:0;background:none;font:inherit;color:inherit;cursor:pointer;padding:4px 10px;border-radius:10px}
.nombre-app:hover{background:var(--surface-2)}
.appbar-dcha .ico-btn{width:36px;height:36px}
.appbar-dcha .ico-btn svg{width:21px;height:21px}
.punto-aviso{background:var(--amarillo)}

/* Pestañas con punto: hay algo nuevo en ese destino (p. ej. un chat que te espera) */
.pest-ico{position:relative;display:inline-grid;place-items:center}
.punto-pest{position:absolute;top:-2px;right:-5px;width:9px;height:9px;border-radius:50%;background:var(--amarillo);box-shadow:0 0 0 2px var(--surface)}
.con-aviso{position:relative}
.con-aviso::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--amarillo)}

/* Filas que son botones */
.fila-btn{appearance:none;width:100%;border:0;border-bottom:1px solid var(--line);background:none;font:inherit;text-align:left;cursor:pointer}

/* Aviso flotante: arriba, se va solo a los 10 s, se cierra deslizando a la derecha, tocarlo lleva a su sitio */
.flotantes{position:absolute;top:calc(var(--sat) + 8px);left:10px;right:10px;z-index:60;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.flotante{pointer-events:auto;align-self:center;width:min(440px,100%);background:var(--surface);color:var(--fg);border:1px solid var(--line);
  border-left:4px solid var(--amarillo);border-radius:14px;padding:12px 14px;box-shadow:0 8px 26px rgba(0,0,0,.18);font-weight:600;
  transform:translateY(-140%);opacity:0;transition:transform .26s ease,opacity .26s ease;cursor:pointer;touch-action:pan-y;user-select:none}
.flotante.ver{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){.flotante{transition:none}}

/* Bichos */
.bicho-form{display:flex;flex-direction:column;gap:8px}

/* --- Diseño ancho: ordenador y móvil en horizontal. El menú de pestañas pasa al lateral. --- */
@media (min-width:1000px), (orientation:landscape) and (min-width:640px) and (max-height:600px){
  body{background:var(--bg)}
  .app{max-width:none;box-shadow:none}
  .app.con-pestanas .cuerpo{flex-direction:row}
  .app.con-pestanas .barra-app{order:-1;flex:none;width:190px;display:flex;flex-direction:column;gap:4px;border-top:0;border-right:1px solid var(--line);
    padding:14px 10px;align-items:stretch;justify-content:flex-start;overflow-y:auto}
  .app.con-pestanas .barra-app a{flex-direction:row;justify-content:flex-start;gap:12px;min-height:44px;padding:8px 12px;font-size:14.5px}
  .pantalla{padding:20px 26px 40px}
  /* Lo que aún no tiene diseño ancho (Finanzas, menú, hojas…) se queda en una columna cómoda. */
  .app:not([data-app="cerebro"]):not([data-app="claude"]) .pantalla{max-width:760px;margin:0 auto;width:100%}
  .hoja{left:50%;right:auto;width:min(560px,100%);transform:translate(-50%,102%)}
  .hoja.abierta{transform:translate(-50%,0)}
}
/* Móvil en horizontal: poco alto. Lateral solo con iconos y cabecera más baja. */
@media (orientation:landscape) and (max-height:600px){
  .app.con-pestanas .barra-app{width:68px;padding:8px 6px}
  .app.con-pestanas .barra-app a{justify-content:center;padding:8px}
  .app.con-pestanas .barra-app a>span:last-child{display:none}
  .appbar{min-height:44px}
}

/* Nada rebota al llegar arriba o abajo (iPhone y trackpads). */
html,body{overscroll-behavior:none}
.scroller{overscroll-behavior:none}

/* En el ordenador (no en el móvil en horizontal) la cabecera es más grande. */
@media (min-width:1000px) and (min-height:601px){
  .appbar{min-height:64px;padding:6px 18px}
  .appbar-tit h1{font-size:20px}
  .appbar-dcha{gap:6px}
  .appbar-dcha .ico-btn{width:44px;height:44px}
  .appbar-dcha .ico-btn svg{width:25px;height:25px}
  .atras{width:46px;height:46px}
  .atras svg{width:24px;height:24px}
}

/* ⋯ con algo pendiente dentro (p. ej. preguntas sin contestar en Cerebro): circulito rojo */
.boton-mas{position:relative}
.punto-aviso.punto-mas{background:var(--bad)}

/* Con zoom (dos dedos), el ancho máximo de la app crece al alejar: en el móvil sigue llenando la pantalla */
.app{max-width:calc(520px / var(--zoom,1))}
@media (min-width:1000px), (orientation:landscape) and (min-width:640px) and (max-height:600px){ .app{max-width:none} }

/* Aviso de que la sesión caduca pronto (entrada.aviso_sesion) */
.aviso-sesion{margin-bottom:12px}
.aviso-sesion .btn{display:inline-flex;margin-top:8px}