/* MasterPrompt Vault · LA BIBLIOTECA PRIMERO (v1.160.0 · docs/49) --------------------------------------------------------------------------- Encargo de Diego, 2026-09-05: «las bibliotecas siguen con muchas cosas visibles que podrian estar comprimidas […] mejor navegabilidad y mejor jerarquia visual […] mejora del comportamiento en celulares». LO MEDIDO ANTES (docs/49 §1-2): en la app, a 1440x900 el primer asistente aparecia a 875 px —no se veia ninguno sin desplazarse—; en el telefono a 1.016 px. Diez capas de mobiliario, cada una defendible, sumadas en la misma columna. En la portada, 120 tarjetas de 351 px en una parrilla plana y los planes a 17.335 px (43.615 en el telefono). QUE ES ESTA HOJA. La COMPOSICION de las dos bibliotecas —la app y la portada— en una sola hoja, cargada despues de las demas: ninguna pieza cambia de id ni de clase (36 sondas los miden), cambia de forma y de sitio. Regla de la casa (doc 09): un sitio no se esconde para hacer sitio; cada funcion lleva su forma; letra pequeña es lo que no esta anunciado, no lo que esta plegado. Todo espaciado y toda letra pasan por variable: el trinquete de `motor/contrato_ui.py` no puede bajar. Ningun selector de componente del kit (.mr-chip, .mr-btn, .mr-input, .mr-seg) redeclara su geometria aqui. LAS PIEZAS .bib-cab la cabecera de trabajo: saludo como rotulo + herramientas .bib-explica la frase de que es esto, en un renglon de apoyo .bib-filtros la barra de filtros: buscar + pestañas / categorias / ejes .bib-lista la lista con cabeceras de grupo pegajosas y filas densas .bib-portada la parrilla publica: tarjeta compacta, lotes, rampa en fila .bib-acciones la banda de acciones de la ficha, en UN renglon --------------------------------------------------------------------------- */ /* ══ 1 · LA CABECERA DE TRABAJO ═══════════════════════════════════════════ El saludo deja de ser un titular de 40 px que compite con cuatro botones: es el ROTULO de la pantalla (--mr-fs-h3) con su kicker al lado. Y las cuatro acciones dejan de ser cuatro botones de tres pesos distintos —uno con borde rojo, dos fantasma, uno de oro macizo— sueltos en la fila: son UNA barra de herramientas (Diego, 2026-09-05: «presentar mejor los botones de forma que quede mas descongestionada la interfaz y que se sienta mas profesional»). La regla es la del header (doc 09, «cada funcion lleva su forma»): las herramientas comparten una sola pieza con borde, mismo alto y misma tinta; dos grupos separados por un filete —lo que se HACE (Mi Restaurante, Crear) y lo que se LLEVA (Descargar todo, Kit)—; y un unico acento, que es DATO y no decoracion: el anillo de completitud de Mi Restaurante, con el color del tono que ya calcula pintarBotonContexto(). El oro del boton de descarga pasa de fondo macizo a tinta: en la pantalla de trabajo ya no hay nada que vender (misma razon por la que el sello «Biblioteca viva» salio de aqui, v1.106). */ .barra-mi.bib-cab{align-items:center;gap:var(--mr-sp-2) var(--mr-sp-4);margin:var(--mr-sp-3) 0 0;flex-wrap:wrap} .barra-mi.bib-cab .explica-cifra{margin:0 0 0 auto;flex:0 0 auto;gap:var(--mr-sp-15)} .barra-mi.bib-cab .explica-cifra .cv{padding:var(--mr-sp-05) var(--mr-sp-2);font-size:var(--mr-fs-caption,12px);background:none;border-color:transparent;box-shadow:none;gap:var(--mr-sp-1)} .barra-mi.bib-cab .explica-cifra .cv b{font-size:var(--mr-fs-support,13px)} .barra-mi.bib-cab .explica-cifra .cv--oro{box-shadow:none} .barra-mi.bib-cab .saludo-env{display:flex;align-items:baseline;gap:var(--mr-sp-2);flex-wrap:nowrap;min-width:0;flex:0 0 auto} .barra-mi.bib-cab .saludo-env .lux-kicker{margin:0;font-size:var(--mr-fs-meta,11px);white-space:nowrap} .barra-mi.bib-cab .saludo-env .lux-kicker::after{width:var(--mr-sp-5,20px)} .barra-mi.bib-cab .saludo-titular{font-size:var(--mr-fs-h3,17px);line-height:var(--mr-lh-h3,1.3);letter-spacing:-.01em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .barra-mi.bib-cab #estado-plan{align-self:center;margin-bottom:0} /* La barra: una pieza. */ .explica-app.bib-explica .barra-acc{align-self:center;margin:0 0 0 auto;gap:var(--mr-sp-05);flex:0 1 auto;min-width:0;max-width:100%;flex-wrap:nowrap;justify-content:flex-start; padding:var(--mr-sp-05);border:1px solid var(--mr-line);border-radius:var(--mr-r-pill,999px); background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 60%),var(--mr-surface); overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity} .explica-app.bib-explica .barra-acc::-webkit-scrollbar{display:none} .explica-app.bib-explica .barra-acc .btn{min-height:calc(var(--mr-h-chip,38px) - var(--mr-sp-1));padding:var(--mr-sp-1) var(--mr-sp-25); font-size:var(--mr-fs-meta,11px);font-weight:700;letter-spacing:0;border-radius:var(--mr-r-pill,999px);white-space:nowrap;flex:none;scroll-snap-align:start; border:1px solid transparent;background:none;color:var(--mr-text-2);box-shadow:none;transform:none} .explica-app.bib-explica .barra-acc .btn:hover{color:var(--mr-text);background:var(--mr-surface-hover);border-color:var(--mr-line);transform:none;box-shadow:none} .explica-app.bib-explica .barra-acc .btn:focus-visible{box-shadow:var(--mr-glow-focus)} /* El filete entre lo que se HACE y lo que se LLEVA. */ .explica-app.bib-explica .barra-acc #bt-descarga{position:relative;margin-left:var(--mr-sp-15)} .explica-app.bib-explica .barra-acc #bt-descarga::before{content:"";position:absolute;left:calc(var(--mr-sp-1) * -1);top:22%;bottom:22%;width:1px;background:var(--mr-line-strong)} /* El oro, como tinta. */ .explica-app.bib-explica .barra-acc .btn-oro{color:var(--mr-gold-2);background:none;border-color:transparent} .explica-app.bib-explica .barra-acc .btn-oro:hover{color:var(--mr-gold-2);background:color-mix(in srgb,var(--mr-gold) 12%,transparent);border-color:color-mix(in srgb,var(--mr-gold) 30%,transparent)} /* Mi Restaurante: el borde de color se va; el dato se queda en el ANILLO. */ .explica-app.bib-explica #bt-ctx{border-color:transparent;gap:var(--mr-sp-15)} .explica-app.bib-explica #bt-ctx .ctxb__pto{width:var(--mr-sp-35,14px);height:var(--mr-sp-35,14px);animation:none; background:conic-gradient(var(--ctx-c,var(--mr-text-muted)) calc(var(--pct,0) * 1%),var(--mr-line-strong) 0); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px))} .explica-app.bib-explica #bt-ctx[data-tono="bajo"]{--ctx-c:var(--mr-error)} .explica-app.bib-explica #bt-ctx[data-tono="medio"]{--ctx-c:var(--mr-warn)} .explica-app.bib-explica #bt-ctx[data-tono="ok"]{--ctx-c:var(--mr-ok)} .explica-app.bib-explica #bt-ctx .ctxb__pct{background:none;padding:0;color:var(--ctx-c,var(--mr-text-2));font-size:var(--mr-fs-meta,11px)} .explica-app.bib-explica #bt-ctx[data-tono] .ctxb__pct{background:none;color:var(--ctx-c)} /* ══ 2 · LA FRASE DE QUE ES ESTO, EN UN RENGLON ═══════════════════════════ La tarjeta de vidrio (81 px / 170 en el telefono) decia una frase y dos cifras. Las mismas palabras, el mismo `` de ayuda y las mismas dos cifras vivas (#cv-n, #cv-total) en un renglon de apoyo: es contexto, no contenido. */ .explica-app.bib-explica{margin:var(--mr-sp-1) 0 var(--mr-sp-25);padding:0;border:0;background:none;box-shadow:none; display:flex;align-items:center;gap:var(--mr-sp-2) var(--mr-sp-4);flex-wrap:wrap} .explica-app.bib-explica::before{display:none} .explica-app.bib-explica p{margin:0;font-size:var(--mr-fs-support,13px);line-height:var(--mr-lh-support,1.55);color:var(--mr-text-muted);max-width:none;flex:1 1 36ch;min-width:0} /* ══ 2a · EL EXPLICADOR SE PLIEGA CUANDO YA SE LEYO (la ultima pasada) ═════ Encargo de Diego, 2026-09-07: «menos informacion no esencial; no se trata de quitarla sino de ocultarla para dejarla disponible a solicitud o cuando sea relevante. Son usuarios no tecnicos». La frase «cada asistente es un prompt experto…» es relevante las primeras veces; a la cuarta visita ya se leyo. El JS (plegarExplicador) cuenta las visitas y pliega: queda un rotulo-boton que dice de que va y la devuelve entera al toque. La «i» no se mueve. Con la frase plegada, el rotulo y la barra de herramientas comparten renglon. */ .explica-app.bib-explica .explica-pliegue{display:none} .explica-app.bib-explica.explica-plegada .explica-txt{display:none} .explica-app.bib-explica.explica-plegada p{flex:0 1 auto} .explica-app.bib-explica.explica-plegada .explica-pliegue{display:inline-flex;align-items:center;gap:var(--mr-sp-1); min-height:calc(var(--mr-h-chip,38px) - var(--mr-sp-1));padding:0 var(--mr-sp-1);border:0;background:none;cursor:pointer; font:inherit;font-size:var(--mr-fs-caption,12px);color:var(--mr-text-2);text-decoration:underline dotted;text-underline-offset:3px} .explica-app.bib-explica.explica-plegada .explica-pliegue::after{content:"▾";font-size:var(--mr-fs-meta,11px);opacity:.7} .explica-app.bib-explica.explica-plegada .explica-pliegue:hover{color:var(--mr-text)} .explica-app.bib-explica.explica-plegada .explica-pliegue:focus-visible{outline:0;box-shadow:var(--mr-glow-focus);border-radius:var(--mr-r-sm,10px)} /* ══ 2b · EL CROMO PEGADO, MAS FINO ══════════════════════════════════════ La subnav (miga + escalera) media 63 px en escritorio: 44 de peldaño y 19 de aire. El peldaño es una pieza de la casa (v1.88) y no se toca; el aire si. */ .subnav__fila{padding:var(--mr-sp-15) var(--mr-sp-5)} /* ══ 3 · LA BARRA DE FILTROS: TRES PREGUNTAS, TRES FILAS ══════════════════ Fila 1 · «que busca» → buscador + pestañas (Todos · Gratis · Mis descargas) Fila 2 · «de que» → categorias en UN renglon deslizable con flechas Fila 3 · «como» → profundidad N1-N5 + como se ejecuta + el conteo El orden «de que» antes que «como» es la orden de Diego de la v1.103.0 y se conserva; lo que cambia es que cada fila mide una sola altura de control. */ .filtros.bib-filtros{margin-bottom:var(--mr-sp-25);background:none;backdrop-filter:none;box-shadow:none} .filtros .bib-filtros__cabeza{display:flex;align-items:center;gap:var(--mr-sp-2) var(--mr-sp-3);flex-wrap:wrap} .filtros .bib-filtros__cabeza .fila{flex:1 1 320px;min-width:0} .filtros .bib-filtros__cabeza .fila .buscar{width:100%} /* Las pestañas como control SEGMENTADO: los mismos tres botones con su aria-selected, en una pieza con borde en vez de tres textos con filete. */ .filtros .bib-filtros__cabeza .tabs-mi{display:inline-flex;align-items:center;gap:var(--mr-sp-05);margin:0;padding:var(--mr-sp-05); border:1px solid var(--mr-line);border-radius:var(--mr-r-pill,999px);background:var(--mr-surface);flex:0 0 auto;max-width:100%;overflow-x:auto;scrollbar-width:none} .filtros .bib-filtros__cabeza .tabs-mi::-webkit-scrollbar{display:none} .filtros .bib-filtros__cabeza .tabs-mi::after{display:none} .filtros .bib-filtros__cabeza .tabs-mi button{min-height:calc(var(--mr-h-chip,38px) - var(--mr-sp-1));padding:var(--mr-sp-1) var(--mr-sp-3); font-size:var(--mr-fs-caption,12px);font-weight:700;border:0;border-radius:var(--mr-r-pill,999px);background:none;color:var(--mr-text-2);white-space:nowrap;flex:none} .filtros .bib-filtros__cabeza .tabs-mi button::after{display:none} .filtros .bib-filtros__cabeza .tabs-mi button[aria-selected="true"]{color:var(--mr-text); background:color-mix(in srgb,var(--mr-tiffany) 16%,var(--mr-surface-2));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mr-tiffany) 40%,transparent)} /* Categorias: en escritorio la fila ENVUELVE y se ven todos —decision de Diego en la v1.79 («nadie descubre los de la derecha»), que se conserva—; en angosto, el carrusel con flechas y degradado que ya existia. Aqui solo se aprieta el aire vertical entre las dos filas. */ .filtros.bib-filtros .chips-env--catalogo{margin-top:var(--mr-sp-2)} .filtros.bib-filtros .chips-env--catalogo .chips{padding:var(--mr-sp-1) 0} @media (min-width:1100px){.bib-filtros .chips-env--catalogo .chips{row-gap:var(--mr-sp-15)}} /* Fila 3: los tres ejes comparten renglon y envuelven por debajo de 1180. */ .filtros .bib-filtros__ejes{display:flex;align-items:center;gap:var(--mr-sp-2) var(--mr-sp-4);flex-wrap:wrap;margin-top:var(--mr-sp-15)} .filtros .bib-filtros__ejes .niv-esc{display:flex;margin:0;flex:0 1 auto;gap:var(--mr-sp-05);flex-wrap:nowrap;align-items:center;overflow-x:auto;scrollbar-width:none;max-width:100%} .filtros .bib-filtros__ejes .niv-esc::-webkit-scrollbar{display:none} .filtros .bib-filtros__ejes .niv-esc__t{flex:0 0 auto;grid-column:auto;margin-right:var(--mr-sp-1);position:static;order:0;letter-spacing:.04em;font-size:var(--mr-fs-meta,11px)} /* La escala N1-N5 pasa de 5 tarjetas de 123 px a chips de una altura: gema + N + nombre + cifra en linea. Misma informacion, mismo `aria-pressed`, misma explicacion al pulsar (#escala-niv-det); el nombre se lee entero. */ .filtros .bib-filtros__ejes .niv-esc__b{min-height:var(--mr-h-chip,38px);display:inline-flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:var(--mr-sp-1); padding:0 var(--mr-sp-15);white-space:nowrap;text-align:left;flex:none;border-radius:var(--mr-r-pill,999px);box-shadow:none;overflow:visible} .filtros .bib-filtros__ejes .niv-esc__b .niv-b__cab{display:inline-flex;align-items:center;gap:var(--mr-sp-1)} .filtros .bib-filtros__ejes .niv-esc__b .niv-punto{width:var(--mr-sp-25,10px);height:var(--mr-sp-25,10px)} .filtros .bib-filtros__ejes .niv-esc__b .niv-id{font-size:var(--mr-fs-meta,11px)} .filtros .bib-filtros__ejes .niv-esc__b .niv-nom{font-size:var(--mr-fs-meta,11px);font-weight:600;color:var(--mr-text-2)} .filtros .bib-filtros__ejes .niv-esc__b[aria-pressed="true"] .niv-nom{color:var(--mr-text)} .filtros .bib-filtros__ejes .niv-esc__b .niv-n{position:static;top:auto;right:auto;font-size:var(--mr-fs-meta,11px);opacity:.75;padding:0;margin:0;background:none;border:0;color:var(--mr-text-muted)} .filtros .bib-filtros__ejes .niv-esc__b::before{display:none} .filtros .bib-filtros__ejes .niv-esc__b:hover:not([disabled]){transform:none} .filtros .bib-filtros__ejes .niv-esc__b[aria-pressed="true"]{transform:none} .filtros .bib-filtros__ejes .chips-eje{margin:0;flex:0 1 auto;min-width:0;border-top:0;padding-top:0} .filtros .bib-filtros__ejes .chips-eje__rot{font-size:var(--mr-fs-meta,11px);letter-spacing:.04em;color:var(--mr-text-muted)} .filtros .bib-filtros__ejes .chips-eje .chips{padding:var(--mr-sp-05) 0} .filtros .bib-filtros__ejes .conteo{margin:0 0 0 auto;min-height:0;flex:0 1 auto;min-width:0;font-size:var(--mr-fs-caption,12px);align-self:center;order:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .filtros .bib-filtros__ejes .chips-eje{order:1;flex:1 1 auto} /* ══ 3a · LOS EJES, PLEGADOS TRAS «FILTROS» (la ultima pasada) ═════════════ Las categorias responden DE QUE es el asistente —lo que el dueño viene buscando— y se quedan a la vista. La profundidad N1-N5 y el modo de ejecucion son la segunda pregunta: siete chips con cinco conceptos que aprender (que es «Analisis con veredicto»?) antes de tocar nada. Van detras de un boton «Filtros» con su cifra de puestos, en la fila del buscador. Se ABREN SOLOS cuando son relevantes —hay un nivel o un modo puesto, por ejemplo llegando desde #/automatizables—, y la casa recuerda si la persona los dejo abiertos (mrv_bib_ejes). El conteo «Mostrando N de T» no se pliega: no es un filtro. La escala `.forzada` (insignia N pulsada dentro de la ficha, v1.99) manda sobre el pliegue, como manda sobre modo-ficha. */ .filtros .bib-filtros__cabeza .bib-filtros__bt{display:inline-flex;align-items:center;gap:var(--mr-sp-1);flex:0 0 auto; min-height:var(--mr-h-chip,38px);padding:0 var(--mr-sp-25) 0 var(--mr-sp-3);border-radius:var(--mr-r-pill,999px); font-size:var(--mr-fs-caption,12px);font-weight:700;letter-spacing:0;white-space:nowrap; border:1px solid var(--mr-line);background:var(--mr-surface);color:var(--mr-text-2);box-shadow:none;transform:none} .filtros .bib-filtros__cabeza .bib-filtros__bt:hover{color:var(--mr-text);background:var(--mr-surface-hover);transform:none;box-shadow:none} .filtros .bib-filtros__cabeza .bib-filtros__bt::after{content:"▾";font-size:var(--mr-fs-meta,11px);opacity:.7;transition:transform .18s} .filtros .bib-filtros__cabeza .bib-filtros__bt[aria-expanded="true"]{color:var(--mr-text);border-color:var(--mr-line-strong)} .filtros .bib-filtros__cabeza .bib-filtros__bt[aria-expanded="true"]::after{transform:rotate(180deg)} .filtros .bib-filtros__cabeza .bib-filtros__n{display:inline-flex;align-items:center;justify-content:center; min-width:var(--mr-sp-45,18px);height:var(--mr-sp-45,18px);padding:0 var(--mr-sp-1);border-radius:var(--mr-r-pill,999px); font-size:var(--mr-fs-meta,11px);font-weight:800;color:#04211f;background:var(--mr-tiffany-2,#3fe0db)} .filtros .bib-filtros__cabeza .bib-filtros__n[hidden]{display:none} .filtros.bib-filtros:not(.ejes-abiertos) .bib-filtros__ejes > #escala-niv:not(.forzada), .filtros.bib-filtros:not(.ejes-abiertos) .bib-filtros__ejes > #eje-modo{display:none} .filtros.bib-filtros:not(.ejes-abiertos) .bib-filtros__ejes{margin-top:var(--mr-sp-1)} .filtros.bib-filtros .niv-det{margin-top:var(--mr-sp-2)} .filtros.bib-filtros .filtros-on{margin-top:var(--mr-sp-2)} /* MODO FICHA · la escala se mudo dentro de .filtros, y `body.modo-ficha .filtros{display:none}` (v1.99) la escondia con todo lo demas. Pulsar una insignia N dentro de la ficha marca la escala como `.forzada` (v1.99) y tiene que verse: aqui la barra vuelve SOLO con la escala y su detalle. */ body.modo-ficha .filtros.bib-filtros:has(#escala-niv.forzada){display:block} body.modo-ficha .filtros.bib-filtros:has(#escala-niv.forzada) > :not(.bib-filtros__ejes):not(#escala-niv-det){display:none} body.modo-ficha .filtros.bib-filtros:has(#escala-niv.forzada) .bib-filtros__ejes > :not(#escala-niv){display:none} /* ══ 4 · LA LISTA: CABECERAS PEGAJOSAS, FILAS DENSAS ══════════════════════ La columna izquierda ya se desliza sola en escritorio (v1.121.0). La cabecera de cada categoria se pega arriba de esa columna: al bajar por las 27 fichas de Marketing, el nombre del grupo no se pierde. */ .dos-col.bib-lista .grupo-cat__cab{position:sticky;top:0;z-index:2; background:color-mix(in srgb,var(--mr-bg) 92%,transparent);backdrop-filter:blur(8px); padding:var(--mr-sp-15) var(--mr-sp-05);margin:0 0 var(--mr-sp-05);border-radius:var(--mr-r-xs,6px)} .dos-col.bib-lista .grupo-cat{margin-bottom:var(--mr-sp-25)} /* La fila: titulo en 2 renglones maximo, resumen en 1. El resumen entero vive en la ficha, que es donde se decide; aqui se elige. ~150 → ~112 px. */ .dos-col.bib-lista .item-mini .txt b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden; font-size:var(--mr-fs-body,14.5px);line-height:1.3} /* El resumen conserva su letra auditada (caption: 13 px en escritorio, el piso de 12,5 de prueba_tipografia_desktop; 12 en el telefono, que esa sonda exige intacto) y el titulo lee al cuerpo como el prompt (igual rol = igual tamaño, prueba_escala_tokens). Lo que se comprime es el numero de renglones, no la letra. */ .dos-col.bib-lista .item-mini .txt i{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden; font-size:var(--mr-fs-caption,12px);line-height:1.45;margin-top:var(--mr-sp-05)} .dos-col.bib-lista .item-mini__ins{gap:var(--mr-sp-1)} .dos-col.bib-lista .item-mini__ins .badge{font-size:var(--mr-fs-meta,11px)} /* ══ 5 · EL TELEFONO ═══════════════════════════════════════════════════════ Cromo objetivo arriba: ≤ 110 px en la lista (era 161). Nada apilado a ancho completo: cuatro botones de 52 px apilados son 208 px para cuatro verbos. El dock (64 px, fijo) no tapa nada: el main termina donde empieza el dock. */ @media (max-width:760px){ .barra-mi.bib-cab{gap:var(--mr-sp-15) var(--mr-sp-3);margin-top:var(--mr-sp-25)} .barra-mi.bib-cab .saludo-titular{font-size:var(--mr-fs-h3,17px)} /* Cuatro herramientas A LA VISTA en rejilla 2x2 (96 px), en vez de cuatro botones apilados (208) o una fila que esconde dos a la derecha. */ .explica-app.bib-explica .barra-acc{display:grid;grid-template-columns:1fr 1fr;width:100%;margin-left:0; border-radius:var(--mr-r-md,14px);overflow:visible;gap:var(--mr-sp-05)} .explica-app.bib-explica .barra-acc .btn{flex:none;justify-content:center;min-height:var(--mr-h-control,44px);white-space:normal;line-height:1.2;text-align:center;border-radius:var(--mr-r-sm,10px);padding:var(--mr-sp-1) var(--mr-sp-15)} .explica-app.bib-explica .barra-acc #bt-descarga{margin-left:0} .explica-app.bib-explica .barra-acc #bt-descarga::before{display:none} .explica-app.bib-explica{gap:var(--mr-sp-15) var(--mr-sp-3)} .explica-app.bib-explica p{font-size:var(--mr-fs-caption,12px);flex-basis:100%} .barra-mi.bib-cab .explica-cifra{margin-left:0;flex-basis:100%} /* Sin recorte de renglones: la «i» de ayuda vive al FINAL de la frase y un clamp la dejaba fuera del alcance del dedo (B2 de prueba_ayuda_ubicacion). */ .filtros .bib-filtros__cabeza{gap:var(--mr-sp-15) var(--mr-sp-2)} .filtros .bib-filtros__cabeza .fila{flex:1 1 100%} /* Cada eje en SU renglon deslizable; nunca los dos en el mismo carril, que dejaria «Como se ejecuta» escondido a la derecha. */ .filtros .bib-filtros__ejes{flex-wrap:wrap;gap:var(--mr-sp-15)} .filtros .bib-filtros__ejes .niv-esc{flex:0 0 100%;max-width:100%} .filtros .bib-filtros__ejes .chips-eje{flex:0 0 100%;max-width:100%} .filtros .bib-filtros__ejes .conteo{flex:0 0 100%;margin:var(--mr-sp-05) 0 0;text-align:left} /* EN EL TELEFONO, EL DOCK ES LA MIGA. Medido el 2026-09-07 con los modulos encendidos (cuatro peldaños): miga 32 px + escalera 40 en dos renglones, 159 px de cromo pegado; y a 60 px de la miga, el dock decia lo mismo —Inicio · Biblioteca · Agentes · Loops, con el actual marcado—. Dos piezas que dicen «donde estoy y como vuelvo» a un pulgar de distancia son una de mas. Ningun sitio se esconde: cada destino de la miga esta en el dock, a la vista y sin abrir menu (doc 09, «un sitio no se esconde para hacer sitio»; prueba_header lo pesa). La escalera se queda —Automatizables y las cifras no viven en el dock— y ocupa sola el renglon con su propio arrastre (v1.121.0). Sin dock (ninguna pantalla de la app hoy) manda vault.css. */ .subnav__fila{padding:var(--mr-sp-15) var(--mr-sp-3)} body:has(.dock) .subnav__fila{flex-wrap:nowrap;row-gap:0} body:has(.dock) .subnav__fila .miga{display:none} body:has(.dock) .subnav__fila .subnav__carril{flex:1 1 auto;min-width:0;max-width:100%} /* El boton «Filtros» comparte renglon con las pestañas. */ .filtros .bib-filtros__cabeza .bib-filtros__bt{margin-left:auto} .explica-app.bib-explica.explica-plegada p{flex-basis:auto} .esc-p{min-height:var(--mr-h-chip,38px);padding:var(--mr-sp-1) var(--mr-sp-25) var(--mr-sp-1) var(--mr-sp-15)} .esc-ico{width:var(--mr-sp-5,20px);height:var(--mr-sp-5,20px);font-size:var(--mr-fs-caption,12px)} /* El dock no tapa: el ultimo elemento visible termina donde empieza el dock. */ html{scroll-padding-bottom:var(--mr-sp-16,64px)} body:has(.dock) main.wrap{padding-bottom:var(--mr-sp-16,64px)} } /* ══ 6 · LA BANDA DE ACCIONES DE LA FICHA, EN UN RENGLON ═════════════════ Medido: 132 px en escritorio (15 % del alto) y 148 en el telefono, en dos renglones, con «Copiar prompt» naciendo a 801 px con el dock a 768. Aqui los tres controles comparten renglon; el «conoce el 0 %» es compacto. */ .acciones.bib-acciones{display:flex;align-items:center;gap:var(--mr-sp-2);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none; padding-top:var(--mr-sp-2);padding-bottom:var(--mr-sp-2)} .acciones.bib-acciones::-webkit-scrollbar{display:none} .acciones.bib-acciones .btn{white-space:nowrap;flex:none} .acciones.bib-acciones .btn-conoce{margin-left:auto;font-size:var(--mr-fs-caption,12px);padding:var(--mr-sp-15) var(--mr-sp-3)} @media (max-width:760px){ /* EN EL TELEFONO, LA BANDA VIVE EN LA ZONA DEL PULGAR. Medido antes: «Copiar prompt» nacia a 801 px con el dock a 768 —debajo del dock— porque la ficha abre con titulo, bajada, selectores y el ajuste de IA antes del prompt (v1.99, orden que se conserva). Pegada arriba, la banda nunca esta donde el dedo esta. Fija abajo, ENCIMA del dock, esta siempre: se copia sin buscar el boton y el prompt se lee entero por encima. El main gana el relleno de las dos barras para que ningun renglon quede detras. */ body.modo-ficha .acciones.bib-acciones{position:fixed;left:var(--mr-sp-3);right:var(--mr-sp-3);top:auto; bottom:calc(var(--mr-sp-16,64px) + var(--mr-sp-3) + var(--mr-sp-2));z-index:59;justify-content:center; padding:var(--mr-sp-15) var(--mr-sp-2);gap:var(--mr-sp-15);border:1px solid var(--mr-line-strong);border-radius:var(--mr-r-md,14px); background:color-mix(in srgb,var(--mr-bg) 94%,transparent);backdrop-filter:blur(14px);box-shadow:var(--mr-elev-3)} body.modo-ficha .acciones.bib-acciones{justify-content:flex-start;overflow:visible;flex-wrap:nowrap} body.modo-ficha .acciones.bib-acciones .btn{padding:var(--mr-sp-15) var(--mr-sp-25);font-size:var(--mr-fs-caption,12px);flex:1 1 auto;min-width:0;justify-content:center} body.modo-ficha .acciones.bib-acciones .btn-primario{flex:1.6 1 auto} body.modo-ficha .acciones.bib-acciones .btn-conoce{margin-left:0;flex:0 0 auto;gap:var(--mr-sp-1)} body.modo-ficha .acciones.bib-acciones .btn-conoce .conoce-txt{display:none} body.modo-ficha:has(.dock) main.wrap{padding-bottom:calc(var(--mr-sp-16,64px) * 2 + var(--mr-sp-8,32px))} body.modo-ficha .acciones--prompt+.cuerpo-prompt{border-top:1px solid var(--mr-line)} /* v1.160.1 · EL AVISO NO TAPA LO QUE SE ACABA DE PULSAR. Hallazgo ET-09 del qa-explorer (L3, 2026-09-07): el toast «¡Copiado!» nacia a 26 px del borde (vault.css) y, con la banda fija de la ficha encima del dock, caia justo sobre «Copiar prompt» y el dock (medido: toast 729-818, banda 700-760, dock 768-832). Con dock, el aviso sube por encima del dock; en la ficha, por encima de la banda. La misma aritmetica que coloca la banda, mas su alto. */ body:has(.dock) .toast{bottom:calc(var(--mr-sp-16,64px) + var(--mr-sp-3) + var(--mr-sp-3))} body.modo-ficha:has(.dock) .toast{bottom:calc(var(--mr-sp-16,64px) + var(--mr-sp-3) + var(--mr-sp-2) + var(--mr-h-control,44px) + var(--mr-sp-15) * 2 + var(--mr-sp-3))} } /* ══ 7 · LA PORTADA: TARJETA COMPACTA, LOTES, RAMPA EN FILA ══════════════ La tarjeta presenta, no decide: categoria · titulo · dos renglones · nivel. El resumen entero ya vive en la previsualizacion que abre la tarjeta. */ .bib-portada .tarjeta{gap:var(--mr-sp-15);padding:var(--mr-sp-35) var(--mr-sp-4)} .bib-portada .tarjeta h3{font-size:var(--mr-fs-body,14.5px);line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} .bib-portada .tarjeta p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden; font-size:var(--mr-fs-caption,12px);line-height:1.45;flex:0 0 auto} .bib-portada .tarjeta .pie{margin-top:var(--mr-sp-05)} .bib-portada .tarjeta:hover{transform:translateY(-2px)} /* «Ver mas»: el mismo boton fantasma de la app, centrado bajo la parrilla. */ .bib-portada .ver-mas{display:block;margin:var(--mr-sp-4) auto 0;min-width:220px} /* La rampa de niveles en UN renglon deslizable tambien en el telefono: seis pildoras apiladas eran 240 px de filtro antes de la primera tarjeta. */ .bib-portada .rampa-niv{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mr-sp-05) var(--mr-sp-1);padding-bottom:var(--mr-sp-05);margin-top:var(--mr-sp-2)} @media (max-width:760px){.bib-portada .rampa-niv{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}} .bib-portada .rampa-niv__t{flex:0 0 auto;grid-column:auto;margin-right:var(--mr-sp-1)} .bib-portada .rampa-niv .niv-chip .niv-b__cab{display:inline-flex;align-items:center;gap:var(--mr-sp-1)} .bib-portada .rampa-niv .niv-chip .niv-punto{width:var(--mr-sp-25,10px);height:var(--mr-sp-25,10px)} .bib-portada .rampa-niv .niv-chip .niv-id,.bib-portada .rampa-niv .niv-chip .niv-nom{font-size:var(--mr-fs-meta,11px)} .bib-portada .rampa-niv .niv-chip .niv-n{font-size:var(--mr-fs-meta,11px);background:none;border:0;padding:0;margin:0;color:var(--mr-text-muted)} .bib-portada .rampa-niv::-webkit-scrollbar{display:none} .bib-portada .rampa-niv .niv-chip{flex:none;white-space:nowrap;display:inline-flex;flex-direction:row;align-items:center;gap:var(--mr-sp-1); min-height:var(--mr-h-chip,38px);padding:0 var(--mr-sp-15);border-radius:var(--mr-r-pill,999px);box-shadow:none;overflow:visible;text-align:left} .bib-portada .rampa-niv .niv-chip .niv-n{position:static;top:auto;right:auto;padding:var(--mr-sp-05) var(--mr-sp-15)} .bib-portada .rampa-niv .niv-chip::before{display:none} .bib-portada .rampa-niv .niv-chip:hover:not([disabled]){transform:none} @media (max-width:760px){ .bib-portada .tarjeta p{-webkit-line-clamp:1} .bib-portada .tarjeta{padding:var(--mr-sp-3) var(--mr-sp-35)} }