@font-face {
  font-family: "Geist";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fonts/geist-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fonts/geist-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Paleta del brief "Futuristic Second Brain" (2026-11-13). Ver pepe/DESIGN.md. */
:root {
  --fondo: #050814;
  --medianoche: #080e20;
  --azul-oscuro: #101a33;
  --azul: #168bff;
  --cian: #00d9ff;
  --morado: #7650ff;
  --violeta: #a855f7;
  --texto: #f4f7ff;
  --tenue: #a5b4d0;
  --borde: #263b65;
  /* Bordes de campos, casillas e interruptores: 3:1 o más sobre fondo, paneles y hojas. */
  --borde-control: #52699a;
  /* Inicio del degradado de botones con texto blanco: 4.9:1 (el azul eléctrico da 3.4:1). */
  --azul-boton: #0f6fd6;
  --cian-vivo: #00e5ff;
  --purpura: #9b5cff;
  --verde: #00d6a0;
  --amarillo: #ffbd45;

  --vidrio: rgba(16, 26, 51, 0.58);
  --vidrio-fuerte: rgba(10, 17, 36, 0.96);
  --borde-vidrio: rgba(38, 59, 101, 0.9);
  --brillo-cian: 0 0 22px rgba(0, 217, 255, 0.18);
  --brillo-morado: 0 0 30px rgba(118, 80, 255, 0.22);

  --f-sans: "Geist", -apple-system, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-m: 1.0625rem;
  --t-l: 1.25rem;
  --t-xl: clamp(1.75rem, 6vw, 2.5rem);

  --seguro-arriba: env(safe-area-inset-top, 0px);
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  /* En horizontal, el notch queda a un lado: el margen lateral nunca es menor que su zona segura. */
  --lado-izq: max(1rem, env(safe-area-inset-left, 0px));
  --lado-der: max(1rem, env(safe-area-inset-right, 0px));
  --facil: cubic-bezier(0.22, 1, 0.36, 1);
  --radio: 20px;
  --radio-chico: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--fondo);
  color: var(--texto);
  font-family: var(--f-sans);
  font-size: var(--t-m);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
/* Fondo fijo en una capa propia: iOS ignora background-attachment: fixed. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(50% 40% at 50% 34%, rgba(118, 80, 255, 0.24), transparent 70%),
    radial-gradient(40% 32% at 50% 52%, rgba(22, 139, 255, 0.16), transparent 70%),
    radial-gradient(42% 36% at 92% 6%, rgba(0, 217, 255, 0.1), transparent 70%),
    radial-gradient(45% 40% at 6% 94%, rgba(168, 85, 247, 0.13), transparent 70%),
    linear-gradient(180deg, var(--fondo), var(--medianoche) 55%, var(--fondo));
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* Respuesta al toque: el iPhone no tiene hover. Opacidad, sin mover el diseño. */
button:not(.lente):active:not(:disabled, [aria-disabled="true"]),
.modos span:active, .segmentos span:active, .grafo circle:active { opacity: 0.68; transition: opacity 0.08s; }
:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }
.oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tenue { color: var(--tenue); }
code { font-size: 0.86em; color: var(--cian); }
svg { flex: none; }
.sprite { display: none; }
svg use { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- estructura: iPhone ---------- */
.app {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "barra" "tablero" "nav";
  height: 100dvh;
  max-width: 34rem;
  margin: 0 auto;
  padding: calc(var(--seguro-arriba) + 0.6rem) var(--lado-der) 0 var(--lado-izq);
}
.barra { grid-area: barra; }
.tablero { grid-area: tablero; min-height: 0; position: relative; overflow-y: auto; overscroll-behavior: contain; }
.navegacion { grid-area: nav; }

/* Cada sección muestra sus bloques (data-en). */
.vista { display: none; }
.app[data-vista="inicio"] .vista-pepe,
.app[data-vista="inbox"] .vista[data-en~="inbox"],
.app[data-vista="proyectos"] .vista[data-en~="proyectos"],
.app[data-vista="conocimiento"] .vista[data-en~="conocimiento"],
.app[data-vista="calendario"] .vista[data-en~="calendario"],
.app[data-vista="metas"] .vista[data-en~="metas"],
.app[data-vista="analitica"] .vista[data-en~="analitica"],
.app[data-vista="ajustes"] .vista[data-en~="ajustes"] { display: flex; }
.app:not([data-pantalla="principal"]) .vista-pepe { display: flex; }
.app:not([data-pantalla="principal"]) .panel { display: none !important; }

/* ---------- encabezado de cada sección ---------- */
.seccion-cab { padding: 0.6rem 0.15rem 0.1rem; }
.seccion-cab h1 { margin: 0; font-size: 1.6rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; }
.seccion-cab p { margin: 0.2rem 0 0; font-size: var(--t-s); color: var(--tenue); }
/* En las secciones de un solo bloque, el encabezado ya dice dónde estás. */
.app[data-vista="proyectos"] #panel-proyectos :is(.panel-cab, .panel-sub),
.app[data-vista="metas"] #panel-metas :is(.panel-cab, .panel-sub),
#panel-calendario > h2, #panel-ajustes > h2 { display: none; }
.app[data-vista="proyectos"] #panel-proyectos h3:first-of-type { margin-top: 0; }
.app[data-vista="metas"] #lista-metas { margin-top: 0; }
#panel-calendario .cal-cabecera { margin-top: 0; }
#panel-ajustes .ajuste:first-of-type { padding-top: 0; }

/* ---------- barra superior ---------- */
.barra {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  grid-template-areas: "marca voz avisos avatar" "conexion gasto gasto gasto";
  align-items: center;
  column-gap: 0.25rem;
  row-gap: 0.1rem;
}
.barra-acciones { display: contents; }
.marca { grid-area: marca; display: flex; align-items: center; gap: 0.6rem; margin: 0; min-width: 0; overflow: hidden; }
.marca-logo { width: 2.2rem; height: 2.2rem; fill: none; stroke: var(--cian); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(0, 217, 255, 0.55)); }
.marca-texto { display: grid; min-width: 0; font-size: var(--t-l); font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; }
.marca-texto small { font-size: 0.6875rem; font-weight: 450; color: var(--tenue); letter-spacing: 0.01em; overflow: hidden; text-overflow: ellipsis; }
.buscador { display: none; }
.conexion { grid-area: conexion; }
.gasto { grid-area: gasto; justify-self: end; }
.voz-interruptor { grid-area: voz; }
.avisos-caja { grid-area: avisos; position: relative; }
.avatar { grid-area: avatar; }

.conexion, .gasto { margin: 0; font-size: var(--t-xs); color: var(--tenue); }
.conexion { display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.punto { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--tenue); }
.app[data-red="en-linea"] .punto { background: var(--verde); box-shadow: 0 0 8px rgba(0, 214, 160, 0.7); }
.app[data-red="sin-red"] .punto { background: var(--amarillo); }
.gasto { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.gasto-cifra { font-variant-numeric: tabular-nums; }
.gasto-etiqueta { display: none; }
.gasto-barra { display: none; width: 4.5rem; height: 3px; background: var(--borde); border-radius: 2px; overflow: hidden; }
.gasto-barra span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--azul), var(--cian)); transition: width 0.6s var(--facil); }
.gasto[data-estado="aviso"] .gasto-cifra { color: var(--amarillo); }
.gasto[data-estado="aviso"] .gasto-barra span,
.gasto[data-estado="cortado"] .gasto-barra span { background: var(--amarillo); }

.icono-boton {
  position: relative;
  display: inline-grid; place-items: center;
  min-width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1px solid transparent; border-radius: 12px; background: none; color: var(--tenue);
}
.icono-boton:hover { color: var(--texto); background: rgba(22, 139, 255, 0.1); }
.icono-boton svg { width: 1.3rem; height: 1.3rem; }
.voz-interruptor #voz-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.voz-interruptor { color: var(--cian); }
.voz-interruptor .voz-off { display: none; }
.voz-interruptor[aria-pressed="false"] { color: var(--tenue); }
.voz-interruptor[aria-pressed="false"] .voz-on { display: none; }
.voz-interruptor[aria-pressed="false"] .voz-off { display: inline; }
.insignia {
  position: absolute; top: 0.3rem; right: 0.3rem;
  min-width: 1.05rem; padding: 0 0.25rem; border-radius: 999px;
  background: var(--amarillo); color: var(--fondo); font-size: 0.6875rem; font-weight: 700; line-height: 1.05rem; text-align: center;
}
.avatar {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; margin-left: 0.25rem; padding: 0;
  border: 1px solid rgba(168, 85, 247, 0.6); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3b2a8a, #151a3d 70%);
  box-shadow: 0 0 14px rgba(118, 80, 255, 0.35);
  font-weight: 650; font-size: var(--t-s);
}
.avisos-lista {
  position: absolute; right: -3rem; top: calc(100% + 0.5rem); z-index: 20;
  width: min(20rem, calc(100vw - 2rem)); padding: 0.9rem 1rem;
  border: 1px solid var(--borde-vidrio); border-radius: var(--radio-chico);
  background: var(--vidrio-fuerte); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), var(--brillo-morado);
}
.avisos-titulo { margin: 0 0 0.4rem; font-weight: 600; }
.avisos-lista ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.avisos-lista li { font-size: var(--t-s); padding-left: 0.9rem; position: relative; }
.avisos-lista li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--cian); }
.avisos-lista li[data-tipo="alerta"]::before { background: var(--amarillo); }
.avisos-lista .tenue { margin: 0; font-size: var(--t-s); }
.app:not([data-pantalla="principal"]) :is(.voz-interruptor, .avisos-caja, .avatar, .buscador) { display: none !important; }

/* ---------- navegación: pestañas abajo en el iPhone ---------- */
.navegacion {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0 calc(-1 * var(--lado-der)) 0 calc(-1 * var(--lado-izq));
  padding: 0.35rem max(0.25rem, env(safe-area-inset-right, 0px)) calc(var(--seguro-abajo) + 0.35rem) max(0.25rem, env(safe-area-inset-left, 0px));
  border-top: 1px solid var(--borde);
  background: rgba(8, 14, 32, 0.9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.navegacion button {
  position: relative;
  display: grid; justify-items: center; gap: 0.15rem;
  min-height: 3rem; padding: 0.3rem 0.1rem;
  border: 0; border-radius: 12px; background: none;
  font-size: 0.6875rem; color: var(--tenue);
}
.navegacion svg { width: 1.4rem; height: 1.4rem; }
.navegacion button[aria-current="page"] { color: var(--texto); }
.navegacion button[aria-current="page"] svg { color: var(--violeta); filter: drop-shadow(0 0 5px rgba(168, 85, 247, 0.8)); }
.navegacion .secundario { display: none; }
.navegacion[data-mas] .secundario {
  display: flex; align-items: center; gap: 0.75rem;
  position: absolute; right: 0.75rem; bottom: calc(100% + 0.5rem + var(--i) * 3.3rem);
  width: 13rem; min-height: 3rem; padding: 0 1rem;
  border: 1px solid var(--borde-vidrio); background: var(--vidrio-fuerte);
  font-size: var(--t-s); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.navegacion [data-ir="conocimiento"] { --i: 3; }
.navegacion [data-ir="calendario"] { --i: 2; }
.navegacion [data-ir="analitica"] { --i: 1; }
.navegacion [data-ir="ajustes"] { --i: 0; }
.navegacion[data-mas] #nav-mas, .navegacion:has(.secundario[aria-current]) #nav-mas { color: var(--texto); }
.contador {
  position: absolute; top: 0.1rem; right: calc(50% - 1.3rem);
  min-width: 1.15rem; padding: 0 0.3rem; border-radius: 999px;
  background: var(--amarillo); color: var(--fondo); font-weight: 700; font-size: 0.6875rem; line-height: 1.15rem;
}

/* ---------- Pepe: cerebro, conversación y botón ---------- */
.vista-pepe { flex-direction: column; align-items: center; height: 100%; min-height: 0; overflow: hidden; padding-top: 0.25rem; }
.proyeccion {
  position: relative;
  flex: none;
  width: min(84vw, 21rem, 42dvh);
  aspect-ratio: 1 / 0.92;
  transition: width 0.4s var(--facil);
  container-type: inline-size;
}
.app[data-conversacion] .proyeccion { width: min(58vw, 13rem, 28dvh); }
.holograma { position: absolute; inset: 0; width: 100%; height: 100%; }
.orbita { --rx: 52cqw; --ry: 54cqw; list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.orbita li {
  position: absolute; left: 50%; top: 40%;
  width: 2.75rem; height: 2.75rem; margin: -1.375rem 0 0 -1.375rem;
  /* Dos columnas curvas, a los lados del cerebro. */
  transform: translate(calc(cos(var(--a)) * var(--rx)), calc(sin(var(--a)) * var(--ry)));
  pointer-events: auto;
}
.orbita button {
  display: grid; place-items: center; width: 100%; height: 100%; padding: 0;
  border: 1px solid var(--borde-vidrio); border-radius: 12px;
  background: var(--vidrio); color: var(--tenue);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.orbita button[aria-disabled="true"] { opacity: 0.5; cursor: default; }
.orbita button svg { width: 1.25rem; height: 1.25rem; }
.orbita button.activa { color: var(--cian); border-color: rgba(0, 217, 255, 0.55); box-shadow: 0 0 16px rgba(0, 217, 255, 0.35); }
.orbita li:nth-child(1) { --a: 180deg; }
.orbita li:nth-child(2) { --a: -30deg; }
.orbita li:nth-child(3) { --a: -150deg; }
.orbita li:nth-child(4) { --a: 30deg; }
.orbita li:nth-child(5) { --a: 150deg; }
.orbita li:nth-child(6) { --a: 0deg; }
.app[data-conversacion] .orbita, .app:not([data-pantalla="principal"]) .orbita { display: none; }

.estado { margin: 0.4rem 0 0; min-height: 1.5em; font-size: var(--t-m); color: var(--cian); text-align: center; font-variant-numeric: tabular-nums; }
.aviso {
  margin: 0.5rem 0 0; max-width: 28rem; padding: 0.6rem 0.8rem;
  border: 1px solid rgba(255, 189, 69, 0.5); border-radius: 12px;
  background: rgba(255, 189, 69, 0.08); font-size: var(--t-s);
}
.aviso[data-tipo="info"] { border-color: var(--borde); background: var(--vidrio); }

/* acceso */
.app[data-pantalla="acceso"] .estado { display: none; }
.acceso { width: 100%; max-width: 22rem; margin-top: 1rem; display: grid; gap: 1rem; text-align: center; }
.acceso-titulo { margin: 0; font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.03em; text-wrap: balance; }
.vincular { display: grid; gap: 0.6rem; text-align: left; }
.vincular label { font-size: var(--t-s); color: var(--tenue); }
.vincular input {
  min-height: 3rem; padding: 0 0.9rem;
  border: 1px solid var(--borde-control); border-radius: 12px; background: var(--vidrio);
  font-size: var(--t-l); letter-spacing: 0.2em; font-variant-numeric: tabular-nums;
}
#bloque-entrar { display: grid; gap: 0.75rem; }

/* conversación */
.proyeccion { margin-top: auto; }
.app[data-conversacion] .proyeccion { margin-top: 0; }
.transcripcion {
  list-style: none; width: 100%; margin: 0.75rem 0 0; padding: 1rem 0 0;
  display: grid; align-content: start; gap: 0.85rem;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; scroll-behavior: smooth;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.25rem);
  mask-image: linear-gradient(to bottom, transparent 0, #000 1.25rem);
}
.linea { display: grid; grid-template-columns: 3rem 1fr; gap: 0.75rem; align-items: baseline; }
.linea-quien { font-size: var(--t-xs); color: var(--tenue); font-weight: 600; }
.linea-texto { margin: 0; font-size: var(--t-m); overflow-wrap: anywhere; }
.linea[data-quien="pepe"] .linea-quien { color: var(--cian); }
.linea[data-quien="sistema"] .linea-texto { color: var(--tenue); font-size: var(--t-s); }
.linea-meta { display: block; margin-top: 0.2rem; font-size: var(--t-xs); color: var(--tenue); }
.linea-meta button { border: 0; background: none; padding: 0; color: var(--cian); text-decoration: underline; text-underline-offset: 3px; font-size: inherit; }
.linea-meta .escuchar { min-height: 2.75rem; }
.linea-meta .escuchar:disabled { opacity: 0.5; }

/* mandos */
.mandos { display: grid; justify-items: center; gap: 0.6rem; width: 100%; padding: 0.75rem 0 0.9rem; margin-top: auto; flex: none; }
.modos {
  display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px;
  border: 1px solid var(--borde); border-radius: 999px; background: var(--vidrio);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.modos input { position: absolute; opacity: 0; pointer-events: none; }
.modos span {
  display: block; min-height: 2.75rem; padding: 0.625rem 1.1rem; border-radius: 999px;
  font-size: var(--t-s); color: var(--tenue); text-align: center; cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.modos input:checked + span { background: var(--morado); color: #fff; font-weight: 600; box-shadow: 0 0 18px rgba(118, 80, 255, 0.55); }
.modos input:focus-visible + span { outline: 2px solid var(--cian); outline-offset: 2px; }
.fondo { display: flex; align-items: center; gap: 0.5rem; font-size: var(--t-s); color: var(--tenue); min-height: 2.75rem; }
.fondo input { width: 1.15rem; height: 1.15rem; accent-color: var(--morado); }
.consola { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; gap: 0.5rem; }
.boton-lado {
  justify-self: center; display: grid; justify-items: center; gap: 0.25rem;
  min-width: 4.5rem; min-height: 3.5rem; padding: 0.4rem;
  border: 0; background: none; font-size: var(--t-xs); color: var(--tenue);
}
.boton-lado svg { width: 1.6rem; height: 1.6rem; color: var(--cian); }
.lente {
  position: relative; display: grid; place-items: center;
  width: 5.5rem; height: 5.5rem;
  border: 1px solid rgba(0, 217, 255, 0.6); border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, #4fb4ff 0%, var(--azul) 45%, #3a2bb8 80%, #160f4a 100%);
  box-shadow: 0 0 30px rgba(22, 139, 255, 0.55), 0 0 60px rgba(118, 80, 255, 0.25), inset 0 0 18px rgba(255, 255, 255, 0.14);
  transition: transform 0.15s var(--facil);
  touch-action: manipulation;
}
.lente:active { transform: scale(0.96); }
.lente-anillo { position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(0, 217, 255, 0.3); }
.lente-icono { width: 2rem; height: 2rem; color: #fff; }
.lente[aria-pressed="true"] {
  border-color: var(--amarillo);
  background: radial-gradient(circle at 50% 40%, #ffd88a 0%, var(--amarillo) 55%, #c07a10 100%);
  box-shadow: 0 0 30px rgba(255, 189, 69, 0.6);
}
.lente[aria-pressed="true"] .lente-icono { color: var(--fondo); }
.lente[aria-pressed="true"] .lente-anillo { border-color: rgba(255, 189, 69, 0.6); transform: scale(var(--nivel, 1)); transition: transform 0.08s linear; }
.lente:disabled { opacity: 0.55; cursor: progress; }

/* botones */
.boton-accion, .boton-linea, .boton-texto { min-height: 3rem; padding: 0 1.25rem; border-radius: 12px; font-size: var(--t-m); font-weight: 600; }
.boton-accion { border: 0; background: linear-gradient(135deg, var(--azul-boton), var(--morado)); color: #fff; box-shadow: 0 0 22px rgba(22, 139, 255, 0.35); }
.boton-accion:disabled { opacity: 0.6; }
.boton-linea { border: 1px solid var(--borde); background: rgba(22, 139, 255, 0.06); color: var(--texto); }
.boton-linea:hover { border-color: var(--azul); }
.boton-texto { min-height: 2.75rem; border: 0; background: none; color: var(--cian); font-weight: 500; font-size: var(--t-s); }
.error { margin: 0; color: #ffcf7a; font-size: var(--t-s); }

/* ---------- paneles de vidrio ---------- */
.panel {
  flex-direction: column;
  padding: 1.1rem 1.15rem 1.25rem;
  margin: 0.5rem 0 0.75rem;
  border: 1px solid var(--borde-vidrio);
  border-radius: var(--radio);
  background: linear-gradient(160deg, rgba(22, 36, 70, 0.55), rgba(10, 16, 36, 0.6));
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--brillo-morado);
}
.panel h2 { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-size: var(--t-l); font-weight: 600; letter-spacing: -0.015em; }
.panel h2 svg { width: 1.45rem; height: 1.45rem; color: var(--cian); filter: drop-shadow(0 0 6px rgba(0, 217, 255, 0.6)); }
.panel-cab { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.panel-sub { margin: 0.2rem 0 0; font-size: var(--t-s); color: var(--tenue); }
.ver-todo {
  min-height: 2.25rem; padding: 0 0.85rem;
  border: 1px solid var(--borde); border-radius: 999px; background: none;
  font-size: var(--t-xs); color: var(--cian); white-space: nowrap;
}
.ver-todo:hover { border-color: var(--cian); box-shadow: var(--brillo-cian); }
.panel-pie { margin: auto 0 0; padding-top: 1rem; grid-column: 1 / -1; }
.app:not([data-vista="inicio"]) .panel-pie { display: none; }
.panel h3 { margin: 1.1rem 0 0.4rem; font-size: var(--t-s); color: var(--tenue); font-weight: 550; }
.vacio-panel { margin: 0.5rem 0 0; font-size: var(--t-s); color: var(--tenue); }

/* capturar */
.capturas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-top: 0.9rem; }
.capturas button {
  display: grid; justify-items: center; gap: 0.35rem;
  min-height: 4.4rem; padding: 0.6rem 0.25rem;
  border: 1px solid var(--borde); border-radius: var(--radio-chico);
  background: rgba(8, 14, 32, 0.55); font-size: var(--t-xs); color: var(--texto);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.capturas svg { width: 1.45rem; height: 1.45rem; color: var(--cian); }
.capturas button:hover { border-color: var(--cian); box-shadow: var(--brillo-cian); }
.capturas [data-atajo="dictar"] { border-color: rgba(118, 80, 255, 0.7); background: rgba(118, 80, 255, 0.16); }
.capturas [data-atajo="dictar"] svg { color: var(--violeta); }

/* organizar */
.fichas { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fichas button {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 2.75rem; padding: 0 0.85rem;
  border: 1px solid var(--borde); border-radius: 999px; background: rgba(8, 14, 32, 0.5);
  font-size: var(--t-s);
}
.fichas button span { color: var(--tenue); font-variant-numeric: tabular-nums; font-size: var(--t-xs); }
.fichas button[aria-pressed="true"] { border-color: var(--violeta); background: rgba(168, 85, 247, 0.18); box-shadow: 0 0 14px rgba(168, 85, 247, 0.3); }
#fichas-temas button::before { content: "#"; color: var(--cian); }

/* proyectos */
.prioridades { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.prioridades button {
  display: grid; width: 100%; gap: 0.1rem; padding: 0.55rem 0.75rem;
  border: 1px solid var(--borde); border-left-width: 1px; border-radius: 12px; background: rgba(8, 14, 32, 0.5); text-align: left;
}
.prioridades .tarea { font-size: var(--t-s); }
.prioridades .de { font-size: var(--t-xs); color: var(--tenue); }
.proyectos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.proyecto-cab { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; }
/* Relleno con margen negativo: área de toque de 44 px sin cambiar el diseño. */
.proyecto-titulo { border: 0; background: none; padding: 0.6rem 0; margin: -0.6rem 0; text-align: left; font-weight: 600; font-size: var(--t-m); }
.proyecto-cifra { font-size: var(--t-xs); color: var(--tenue); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tareas { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
/* Casillas tocables: el área de toque mide 44 px aunque la caja se vea pequeña. */
.casilla {
  display: flex; gap: 0.6rem; align-items: flex-start; width: 100%;
  min-height: 2.75rem; padding: 0.55rem 0.25rem; margin: -0.25rem 0;
  border: 0; border-radius: 10px; background: none; text-align: left;
  font-size: var(--t-s); color: var(--tenue); cursor: pointer;
}
.casilla:hover { background: rgba(22, 139, 255, 0.08); color: var(--texto); }
.casilla:disabled { cursor: progress; opacity: 0.7; }
.casilla-caja {
  flex: none; position: relative; width: 1.15rem; height: 1.15rem; margin-top: 0.15rem;
  border: 1.5px solid var(--borde-control); border-radius: 5px; transition: background-color 0.2s, border-color 0.2s;
}
.casilla:hover .casilla-caja { border-color: var(--cian); }
.casilla[aria-checked="true"] { color: var(--texto); }
.casilla[aria-checked="true"] .casilla-texto { text-decoration: line-through; text-decoration-color: rgba(165, 180, 208, 0.6); }
.casilla[aria-checked="true"] .casilla-caja { border-color: var(--verde); background: var(--verde); }
.casilla[aria-checked="true"] .casilla-caja::after {
  content: ""; position: absolute; left: 0.32rem; top: 0.1rem; width: 0.3rem; height: 0.6rem;
  border: solid var(--fondo); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.mas-tareas { margin: 0.3rem 0 0; font-size: var(--t-xs); color: var(--tenue); }
.crear-fila { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.9rem 0 0; }
.app[data-vista="inicio"] .bloque-clientes { display: none; }
/* Clientes y prospectos (paso B3) */
.fila-etiquetas { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.15rem; }
.etiqueta { padding: 0.1rem 0.5rem; border: 1px solid var(--borde); border-radius: 999px; font-size: var(--t-xs); color: var(--tenue); }
.etiqueta-prospecto { border-color: var(--violeta); color: var(--texto); }
.etiqueta-cliente { border-color: var(--cian); color: var(--texto); }
.cumple { display: grid; grid-template-columns: 6rem 1fr; gap: 0.5rem; margin: 0; padding: 0; border: 0; }
.cumple legend { padding: 0; margin-top: 0.4rem; font-size: var(--t-s); color: var(--tenue); }
.campos input[type="number"], .campos input[type="date"] {
  width: 100%; min-height: 3rem; padding: 0.7rem 0.9rem;
  border: 1px solid var(--borde); border-radius: 12px; background: var(--fondo); font-size: var(--t-m); color: var(--texto);
}
.campos input[type="date"] { color-scheme: dark; }
.crear-fila .boton-linea { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; font-size: var(--t-s); }
.crear-fila svg { width: 1.1rem; height: 1.1rem; color: var(--cian); }
.app[data-vista="inicio"] :is(.crear-fila, #lista-metas .tareas, .mas-tareas) { display: none; }
.avance { height: 6px; margin-top: 0.4rem; border-radius: 3px; background: rgba(38, 59, 101, 0.7); overflow: hidden; }
.avance span { display: block; height: 100%; width: var(--p, 0%); border-radius: 3px; background: linear-gradient(90deg, var(--azul), var(--cian)); box-shadow: 0 0 10px rgba(0, 217, 255, 0.5); }

/* progreso */
.cifras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin: 0.9rem 0 0; }
.cifras div { padding: 0.6rem 0.75rem; border: 1px solid var(--borde); border-radius: 12px; background: rgba(8, 14, 32, 0.5); }
.cifras dt { font-size: var(--t-xs); color: var(--tenue); }
.cifras dd { margin: 0.1rem 0 0; font-size: var(--t-l); font-weight: 600; font-variant-numeric: tabular-nums; }
.cifras dd small { font-size: var(--t-xs); font-weight: 400; color: var(--tenue); }
.grafica { margin: 0.9rem 0 0; }
.grafica svg { width: 100%; height: auto; display: block; }
.grafica figcaption { margin-top: 0.3rem; font-size: var(--t-xs); color: var(--tenue); }
.grafica text { font-family: var(--f-sans); font-size: 9px; fill: var(--tenue); font-variant-numeric: tabular-nums; }
.grafica .barra-ideas { fill: url(#degradado-ideas); }
.grafica .linea-base { stroke: var(--borde); }

/* metas */
.metas { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.metas .grupo { margin-top: 0.4rem; font-size: var(--t-xs); color: var(--tenue); font-weight: 550; }
.metas .grupo:first-child { margin-top: 0; }
.meta-cab { display: flex; justify-content: space-between; gap: 0.75rem; font-size: var(--t-s); }
.meta-cab button { border: 0; background: none; padding: 0.7rem 0; margin: -0.7rem 0; text-align: left; }
.meta-cab span { color: var(--tenue); font-variant-numeric: tabular-nums; }
.metas li[data-cat="finanzas"] .avance span { background: linear-gradient(90deg, #c88a1a, var(--amarillo)); box-shadow: none; }
.metas li[data-cat="salud"] .avance span { background: linear-gradient(90deg, #089e78, var(--verde)); box-shadow: none; }
.metas li[data-cat="aprendizaje"] .avance span { background: linear-gradient(90deg, var(--morado), var(--violeta)); box-shadow: none; }

/* conexiones */
.grafo { width: 100%; height: auto; display: block; margin: 0.6rem 0 0.5rem; }
.grafo line { stroke: rgba(168, 85, 247, 0.4); stroke-width: 1.2; }
.grafo line[data-motivo="enlace"] { stroke: rgba(0, 217, 255, 0.55); }
.grafo circle { fill: var(--morado); stroke: rgba(255, 255, 255, 0.55); stroke-width: 1; cursor: pointer; }
.grafo circle[data-area="20-agencia"] { fill: var(--azul); }
.grafo circle[data-area="10-personal"] { fill: var(--verde); }
.grafo circle[data-area="00-inbox"] { fill: var(--violeta); }
.grafo circle[data-area="30-recursos"] { fill: var(--cian); }
.grafo text { font-family: var(--f-sans); font-size: 11px; fill: var(--tenue); }

/* calendario */
.cal-cabecera { display: flex; align-items: center; justify-content: space-between; margin-top: 0.6rem; }
.cal-mes { margin: 0; font-weight: 600; }
.cal-grilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3rem; margin-top: 0.4rem; }
.cal-grilla .dia-semana { font-size: var(--t-xs); color: var(--tenue); text-align: center; padding-bottom: 0.2rem; }
.cal-grilla button {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 1; min-height: 2.6rem; padding: 0;
  border: 1px solid transparent; border-radius: 10px; background: rgba(8, 14, 32, 0.45);
  font-size: var(--t-s); font-variant-numeric: tabular-nums;
}
.cal-grilla button:disabled { background: none; color: rgba(165, 180, 208, 0.35); cursor: default; }
.cal-grilla button[data-n] { border-color: rgba(0, 217, 255, 0.35); }
.cal-grilla button[data-n]::after {
  content: ""; position: absolute; bottom: 18%; width: 0.35rem; height: 0.35rem; border-radius: 50%;
  background: var(--cian); box-shadow: 0 0 6px var(--cian);
}
.cal-grilla button[data-hoy] { color: var(--cian); font-weight: 700; }
.cal-grilla button[aria-pressed="true"] { border-color: var(--violeta); background: rgba(168, 85, 247, 0.2); }

/* ajustes */
.ajuste {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.9rem 0; border-bottom: 1px solid var(--borde);
}
.ajuste:last-child { border-bottom: 0; }
.ajuste span { display: grid; gap: 0.15rem; }
.ajuste strong { font-weight: 550; }
.ajuste small { font-size: var(--t-xs); color: var(--tenue); }
.ajuste .boton-linea { min-height: 2.75rem; font-size: var(--t-s); white-space: nowrap; }
.ajuste input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 3.1rem; height: 1.85rem; margin: 0; border-radius: 999px;
  background: var(--borde-control); position: relative; cursor: pointer; transition: background-color 0.2s;
}
.ajuste input[type="checkbox"]::after {
  content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.45rem; height: 1.45rem; border-radius: 50%;
  background: var(--texto); transition: transform 0.2s var(--facil);
}
.ajuste input[type="checkbox"]:checked { background: var(--azul); box-shadow: 0 0 12px rgba(22, 139, 255, 0.5); }
.ajuste input[type="checkbox"]:checked::after { transform: translateX(1.25rem); }

/* filas (listas) */
.filas { list-style: none; margin: 0; padding: 0; }
.filas li { border-bottom: 1px solid var(--borde); }
.filas li:last-child { border-bottom: 0; }
.filas button { display: grid; width: 100%; gap: 0.15rem; padding: 0.65rem 0; border: 0; background: none; text-align: left; }
.filas button:hover .fila-titulo { color: var(--cian); }
.fila-titulo { font-size: var(--t-s); }
.fila-meta { font-size: var(--t-xs); color: var(--tenue); font-variant-numeric: tabular-nums; }
.fila-extracto { font-size: var(--t-s); color: var(--tenue); }
.filas .fila-cola { padding: 0.75rem 0; font-size: var(--t-s); }
.app[data-vista="inicio"] #lista-inbox li:nth-child(n+5) { display: none; }

/* ---------- hojas (escribir y notas) ---------- */
.hoja {
  width: 100%; max-width: 34rem; max-height: 88dvh;
  margin: auto auto 0; padding: 1rem 1rem calc(var(--seguro-abajo) + 1rem);
  border: 1px solid var(--borde-vidrio); border-bottom: 0; border-radius: 20px 20px 0 0;
  background: var(--vidrio-fuerte); color: var(--texto); overflow-y: auto;
}
.hoja[open] { animation: subir 0.32s var(--facil); }
.hoja::backdrop { background: rgba(2, 4, 12, 0.75); }
@keyframes subir { from { transform: translateY(24px); opacity: 0; } }
.hoja-cabecera { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.hoja h2 { margin: 0; font-size: var(--t-l); font-weight: 600; }
.hoja h3 { margin: 1.25rem 0 0.25rem; font-size: var(--t-s); color: var(--tenue); font-weight: 550; }
.hoja textarea, .buscar input, #enlace {
  width: 100%; border: 1px solid var(--borde-control); border-radius: 12px; background: var(--fondo);
  padding: 0.75rem 0.9rem; font-size: var(--t-m); resize: vertical;
}
#grupo-enlace { display: grid; gap: 0.35rem; margin-bottom: 0.6rem; }
#grupo-enlace label { font-size: var(--t-s); color: var(--tenue); }
.buscar input, #enlace { min-height: 3rem; }
.hoja-acciones { display: grid; grid-template-columns: 1fr 1.4fr; gap: 0.6rem; margin-top: 0.75rem; }
.hoja-acciones:has(#enviar-pregunta[hidden]), .hoja-acciones.una { grid-template-columns: 1fr; }
.campos { display: grid; gap: 0.4rem; }
.campos > label, .campos legend, #grupo-categoria label { font-size: var(--t-s); color: var(--tenue); margin-top: 0.4rem; }
.campos small { font-size: var(--t-xs); }
.campos input[type="text"], .campos select, #crear-tareas {
  width: 100%; min-height: 3rem; padding: 0.7rem 0.9rem;
  border: 1px solid var(--borde-control); border-radius: 12px; background: var(--fondo); font-size: var(--t-m); color: var(--texto);
}
.campos input:focus-visible, .campos select:focus-visible, #crear-tareas:focus-visible { border-color: var(--azul); outline-offset: 1px; }
#grupo-categoria { display: grid; gap: 0.4rem; }
.segmentos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin: 0; padding: 0; border: 0; }
.segmentos legend { padding: 0; grid-column: 1 / -1; }
.segmentos input { position: absolute; opacity: 0; pointer-events: none; }
.segmentos span {
  display: grid; place-items: center; min-height: 2.75rem; border: 1px solid var(--borde-control); border-radius: 12px;
  font-size: var(--t-s); color: var(--tenue); cursor: pointer;
}
.segmentos input:checked + span { border-color: var(--violeta); background: rgba(168, 85, 247, 0.18); color: var(--texto); font-weight: 600; }
.segmentos input:focus-visible + span { outline: 2px solid var(--cian); outline-offset: 2px; }
.nota-privacidad { margin: 0.75rem 0 0; font-size: var(--t-xs); }

/* Organizar una idea del inbox (paso B2) */
.filas li.con-accion { display: flex; align-items: center; gap: 0.75rem; }
.filas li.con-accion > button:first-child { flex: 1; min-width: 0; }
.filas .fila-accion {
  display: inline-grid; place-items: center; width: auto; flex: none; min-height: 2.75rem; padding: 0 0.9rem;
  border: 1px solid var(--borde); border-radius: 10px; background: rgba(22, 139, 255, 0.06);
  font-size: var(--t-xs); font-weight: 600; color: var(--cian); text-align: center;
}
.filas .fila-accion:hover { border-color: var(--azul); }
.app[data-vista="inicio"] .filas .fila-accion { display: none; }
.org-progreso { margin: 0 0 0.5rem; font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.org-idea {
  margin: 0; padding: 0.8rem 0.9rem; border-radius: 12px; border: 1px solid var(--borde); background: var(--fondo);
  max-height: 9.5rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-s); line-height: 1.5;
}
.org-estado { min-height: 1.4em; margin: 0.6rem 0 0; font-size: var(--t-s); color: var(--tenue); }
.org-propuesta h3 { margin: 0.4rem 0 0.5rem; font-size: var(--t-m); }
.org-datos { display: grid; grid-template-columns: max-content 1fr; gap: 0.45rem 1rem; margin: 0; font-size: var(--t-s); }
.org-datos dt { color: var(--tenue); }
.org-datos dd { margin: 0; overflow-wrap: anywhere; }
.org-datos ul { margin: 0; padding-left: 1.1rem; }
.org-motivo { margin: 0.7rem 0 0; font-size: var(--t-s); }
.segmentos.tres { grid-template-columns: repeat(3, 1fr); }
.campos .grupo { display: grid; gap: 0.4rem; }
.campos .grupo label { font-size: var(--t-s); color: var(--tenue); margin-top: 0.4rem; }
#org-tareas {
  width: 100%; padding: 0.7rem 0.9rem; border: 1px solid var(--borde-control); border-radius: 12px;
  background: var(--fondo); font-size: var(--t-m); color: var(--texto);
}
#org-tareas:focus-visible { border-color: var(--azul); outline-offset: 1px; }
.org-acciones:has(#org-corregir[hidden]) { grid-template-columns: 1fr; }
.org-secundarias { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.25rem; }

/* Confirmación breve abajo, sobre la barra de pestañas */
.toast {
  position: fixed; z-index: 30; left: 50%; bottom: calc(var(--seguro-abajo) + 5.25rem); transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.75rem; width: max-content; max-width: calc(100vw - 2rem);
  padding: 0.35rem 0.5rem 0.35rem 1rem; border: 1px solid var(--borde-vidrio); border-radius: 14px;
  background: var(--vidrio-fuerte); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), var(--brillo-cian);
  font-size: var(--t-s); animation: subir 0.25s var(--facil);
}
.toast #toast-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; padding: 0.55rem 0; }
.toast .boton-texto { flex: none; }
.lector { margin-top: 0.5rem; }
.lector-ruta { margin: 0.25rem 0; font-size: var(--t-xs); color: var(--tenue); overflow-wrap: anywhere; }
.lector pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--f-sans); font-size: var(--t-m); line-height: 1.55; }

/* ---------- escritorio: centro de mando ---------- */
@media (min-width: 1100px) {
  .app {
    max-width: 100rem;
    height: auto; min-height: 100dvh;
    grid-template-columns: 14.5rem minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "barra barra" "nav tablero";
    column-gap: 1.25rem;
    padding: 1rem 1.5rem 1.5rem;
  }
  .barra { display: flex; align-items: center; gap: 1.5rem; padding-bottom: 1.1rem; }
  .barra-acciones { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
  .marca { flex: none; overflow: visible; }
  .marca-logo { width: 2.7rem; height: 2.7rem; }
  .marca-texto { font-size: 1.5rem; }
  .marca-texto small { font-size: var(--t-xs); }
  .buscador {
    display: flex; align-items: center; gap: 0.6rem; flex: 1 1 12rem; max-width: 30rem; margin-left: 1rem;
    min-height: 2.9rem; padding: 0 1rem;
    border: 1px solid var(--borde); border-radius: 999px; background: var(--vidrio);
  }
  .buscador:focus-within { border-color: var(--azul); box-shadow: var(--brillo-cian); }
  .buscador svg { width: 1.2rem; height: 1.2rem; color: var(--tenue); }
  .buscador input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: var(--t-s); }
  .conexion { margin-right: 0.75rem; }
  .gasto-etiqueta { display: inline; }
  .voz-interruptor { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0 0.8rem; border-color: var(--borde); border-radius: 999px; font-size: var(--t-xs); }
  .voz-interruptor #voz-texto { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .seccion-cab { grid-column: 1 / -1; padding: 0 0.25rem 0.25rem; }
  .seccion-cab h1 { font-size: 1.9rem; }
  .navegacion [data-ir="analitica"] { margin-top: 0.9rem; }
  .navegacion [data-ir="analitica"]::before { content: ""; position: absolute; left: 0.4rem; right: 0.4rem; top: -0.5rem; border-top: 1px solid var(--borde); }
  .gasto { margin-right: 0.5rem; }
  .gasto-barra { display: block; }
  .avisos-lista { right: 0; }

  .tablero { overflow: visible; }
  .navegacion {
    position: sticky; top: 1rem; align-self: start;
    display: flex; flex-direction: column; gap: 0.2rem;
    margin: 0; padding: 0.75rem;
    border: 1px solid var(--borde-vidrio); border-radius: var(--radio);
    background: var(--vidrio);
  }
  .navegacion .secundario { display: flex; }
  .navegacion .solo-movil { display: none; }
  .navegacion button {
    display: flex; align-items: center; gap: 0.8rem;
    min-height: 2.9rem; padding: 0 0.9rem;
    font-size: var(--t-s); text-align: left;
  }
  .navegacion button:hover { background: rgba(22, 139, 255, 0.1); color: var(--texto); }
  .navegacion button[aria-current="page"] {
    background: linear-gradient(90deg, rgba(118, 80, 255, 0.5), rgba(168, 85, 247, 0.12));
    box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.45), 0 0 18px rgba(118, 80, 255, 0.25);
  }
  .contador { position: static; margin-left: auto; }

  .app[data-pantalla="principal"] .tablero { display: grid; gap: 1rem; align-content: start; }
  .app[data-pantalla="principal"] .panel { margin: 0; }

  /* Inicio: el cerebro al centro, los seis bloques alrededor. */
  .app[data-vista="inicio"][data-pantalla="principal"] .tablero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-areas:
      "capturar  cerebro   conectar"
      "organizar cerebro   proyectos"
      "progreso  progreso  metas";
  }
  .app[data-vista="inicio"] .vista-pepe { grid-area: cerebro; height: auto; min-height: 34rem; }
  .app[data-vista="inicio"] #panel-capturar { grid-area: capturar; }
  .app[data-vista="inicio"] #panel-organizar { grid-area: organizar; }
  .app[data-vista="inicio"] #panel-conectar { grid-area: conectar; }
  .app[data-vista="inicio"] #panel-proyectos { grid-area: proyectos; }
  .app[data-vista="inicio"] #panel-progreso { grid-area: progreso; }
  .app[data-vista="inicio"] #panel-metas { grid-area: metas; }
  .app[data-vista="inicio"][data-pantalla="principal"] .panel[data-en~="inicio"] { display: flex; }
  .app[data-vista="inicio"] .panel h2 { font-size: 1.125rem; }
  /* Inicio muestra resúmenes: lo demás se abre con "Ver…". */
  .app[data-vista="inicio"] #lista-inbox li:nth-child(n+4),
  .app[data-vista="inicio"] #lista-prioridades li:nth-child(n+3),
  .app[data-vista="inicio"] #lista-proyectos li:nth-child(n+3),
  .app[data-vista="inicio"] #lista-metas > li:nth-child(n+7),
  .app[data-vista="inicio"] :is(#bloque-seleccion, #lista-conexiones) { display: none; }
  .app[data-vista="inicio"] .fila-titulo { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .app[data-vista="inicio"][data-pantalla="principal"] #panel-progreso { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: 1.25rem; align-content: start; }
  .app[data-vista="inicio"] #panel-progreso :is(.panel-cab, .panel-sub) { grid-column: 1 / -1; }
  .app[data-vista="inicio"] #panel-progreso .cifras { align-self: start; }
  .app[data-vista="inicio"] #lista-proyectos .tareas { display: none; }
  .toast { bottom: 1.5rem; }

  /* Las demás secciones: sus bloques uno al lado del otro. */
  .app[data-pantalla="principal"]:not([data-vista="inicio"]) .tablero {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
    max-width: 72rem;
  }
  .app[data-vista="calendario"] #panel-calendario {
    display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); column-gap: 2.5rem; align-content: start;
  }
  #panel-calendario h2 { grid-column: 1 / -1; }
  .cal-cabecera { grid-column: 1; grid-row: 2; }
  .cal-grilla { grid-column: 1; grid-row: 3; align-self: start; }
  #cal-dia { grid-column: 2; grid-row: 2; align-self: center; margin: 0.6rem 0 0; }
  #cal-lista, #cal-vacio { grid-column: 2; grid-row: 3; align-self: start; }
  .cal-crear { grid-column: 1; grid-row: 4; }
  .proyeccion { width: min(100%, 30rem, 50dvh); }
  .app[data-conversacion] .proyeccion { width: min(100%, 24rem, 36dvh); }
  .app[data-conversacion] .orbita { display: block; }
  .vista-pepe .transcripcion {
    max-height: 19rem; margin-top: 1rem; padding: 0.9rem 1rem;
    border: 1px solid var(--borde-vidrio); border-radius: var(--radio-chico); background: rgba(8, 14, 32, 0.5);
    -webkit-mask-image: none; mask-image: none;
  }

  .app:not([data-pantalla="principal"]) .tablero { display: flex; justify-content: center; }
  .app:not([data-pantalla="principal"]) .vista-pepe { width: min(100%, 34rem); min-height: 80dvh; }
  .app:not([data-pantalla="principal"]) .navegacion { display: none; }
  .hoja { max-width: 38rem; margin: auto; border-radius: 20px; border-bottom: 1px solid var(--borde-vidrio); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}