From ef2ded646e396d0bc37d85d96940282933f7c347 Mon Sep 17 00:00:00 2001
From: anattolia <anattolia@gmail.com>
Date: Fri, 18 Oct 2024 13:56:24 -0500
Subject: [PATCH 1/5] =?UTF-8?q?=F0=9F=90=9B=20mostrar=20info=20cuando=20no?=
 =?UTF-8?q?=20hay=20datos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../www/src/componentes/FichaTecnica.astro    |  25 +++-
 aplicaciones/www/src/pages/datos.astro        | 118 +++++++++---------
 datosVisibles/ya7.ts                          |   2 +-
 3 files changed, 83 insertions(+), 62 deletions(-)

diff --git a/aplicaciones/www/src/componentes/FichaTecnica.astro b/aplicaciones/www/src/componentes/FichaTecnica.astro
index 4e641bc..a33889d 100644
--- a/aplicaciones/www/src/componentes/FichaTecnica.astro
+++ b/aplicaciones/www/src/componentes/FichaTecnica.astro
@@ -14,6 +14,7 @@ const datosIndicador = datosYa.indicadores.find((instancia) => instancia.ruta ==
 
 <div class="fichaTecnica">
   <h2 class="tituloSeccion tituloYa">{datosYa.nombre}</h2>
+  <div class="cerrarFicha">x</div>
   <p class="nombre">{datosIndicador.nombre}</p>
 
   <div class="seccion">
@@ -97,16 +98,17 @@ const datosIndicador = datosYa.indicadores.find((instancia) => instancia.ruta ==
     }
   </section>
 </div>
-
 <style lang="scss">
   @import '@/scss/constantes';
   .fichaTecnica {
     min-width: 300px;
     border: solid 2px var(--azulViejo);
-    border-radius: 15px;
+    border-radius: 15px 0 0 15px;
     color: var(--azulViejo);
     background-color: var(--blancoMarfil);
     text-align: center;
+    max-height: 85vh;
+    overflow: auto;
     z-index: 9;
     font-variation-settings:
       'MONO' 0,
@@ -114,12 +116,29 @@ const datosIndicador = datosYa.indicadores.find((instancia) => instancia.ruta ==
       'wght' 700,
       'slnt' 0,
       'CRSV' 0;
+    position: relative;
+    .cerrarFicha {
+      color: var(--blancoMarfil);
+      position: absolute;
+      right: 0.5em;
+      top: 0.1em;
+      cursor: pointer;
+      border: 1px solid var(--blancoMarfil);
+      padding: 0.2em 0.4em;
+      border-radius: 50%;
+
+      &:hover {
+        background-color: var(--blancoMarfil);
+        color: var(--azulViejo);
+        opacity: 0.8;
+      }
+    }
 
     .tituloSeccion {
       background-color: var(--azulViejo);
       color: var(--blancoMarfil);
       width: auto;
-      padding: 0.3em;
+      padding: 0.3em 2em;
       margin: 0;
       font-size: 1em;
     }
diff --git a/aplicaciones/www/src/pages/datos.astro b/aplicaciones/www/src/pages/datos.astro
index a029d70..b456c33 100644
--- a/aplicaciones/www/src/pages/datos.astro
+++ b/aplicaciones/www/src/pages/datos.astro
@@ -22,13 +22,10 @@ import { urlsAEnlacesHTML } from '@enflujo/alquimia';
       <div class="botonesSubMenu">
         {
           datos.map((ya, i) => (
-            <div
-              class={`botonYaDatos${!ya.hay_datos ? ' desactivado' : ''}${i === 0 ? ' activo' : ''}`}
-              data-ya={ya.ruta}
-            >
+            <div class={`botonYaDatos${i === 0 ? ' activo' : ''}`} data-ya={ya.ruta}>
               <span class="iconoYa" style={`background-image:url(${import.meta.env.BASE_URL}/iconos/ya${i + 1}.svg)`} />
               <span class="nombreYa">{`${i + 1} ${ya.nombre}`}</span>
-              {!ya.hay_datos && <span class="explicacion">Este indicador no tiene datos</span>}
+              {/*  {!ya.hay_datos && <span class="explicacion">Este indicador no tiene datos</span>} */}
             </div>
           ))
         }
@@ -36,59 +33,53 @@ import { urlsAEnlacesHTML } from '@enflujo/alquimia';
 
       <div id="indicadores">
         {
-          datos.map(
-            (ya, i) =>
-              ya.hay_datos && (
-                <div id={ya.ruta} class={`contenedorYa${i === 0 ? ' visible' : ''}`}>
-                  {ya.indicadores.map((indicador, j) => {
-                    const datosArchivo = pesos[indicador.archivo];
-
-                    return (
-                      <div class="indicador">
-                        <div class="columna">
-                          <p class="enlace">
-                            {datosArchivo ? (
-                              <a href={`${import.meta.env.BASE_URL}/datos/descarga/${datosArchivo.nombre}`}>
-                                <span class="nombre">{indicador.nombre}</span>
-                                <span class="peso">({datosArchivo.peso})</span>
-                              </a>
-                            ) : (
-                              <span class="nombre">{indicador.nombre}</span>
-                            )}
-                          </p>
-
-                          {datosArchivo && (
-                            <a
-                              class="botonCaja"
-                              href={`${import.meta.env.BASE_URL}/datos/descarga/${datosArchivo.nombre}`}
-                            >
-                              <img
-                                class="iconoDescarga"
-                                src={`${import.meta.env.BASE_URL}/imagenes/icono-descarga.svg`}
-                                alt="Icono Descarga"
-                              />{' '}
-                              .xlsx
-                            </a>
-                          )}
-
-                          <span class="abrirFicha botonCaja" data-ficha={`ya${i}i${j}`}>
-                            Ficha técnica
-                          </span>
-                        </div>
-
-                        <div class="columna definicion">
-                          <p set:html={urlsAEnlacesHTML(indicador.definicion)} />
-                        </div>
-
-                        <div id={`ya${i}i${j}`} class="contenedorFicha">
-                          <FichaTecnica rutaYa={ya.ruta} rutaIndicador={indicador.ruta} />
-                        </div>
-                      </div>
-                    );
-                  })}
-                </div>
-              )
-          )
+          datos.map((ya, i) => (
+            <div id={ya.ruta} class={`contenedorYa${i === 0 ? ' visible' : ''}`}>
+              {ya.indicadores.map((indicador, j) => {
+                const datosArchivo = pesos[indicador.archivo];
+
+                return (
+                  <div class="indicador">
+                    <div class="columna">
+                      <p class="enlace">
+                        {datosArchivo ? (
+                          <a href={`${import.meta.env.BASE_URL}/datos/descarga/${datosArchivo.nombre}`}>
+                            <span class="nombre">{indicador.nombre}</span>
+                            <span class="peso">({datosArchivo.peso})</span>
+                          </a>
+                        ) : (
+                          <span class="nombre">{indicador.nombre}</span>
+                        )}
+                      </p>
+
+                      {datosArchivo && (
+                        <a class="botonCaja" href={`${import.meta.env.BASE_URL}/datos/descarga/${datosArchivo.nombre}`}>
+                          <img
+                            class="iconoDescarga"
+                            src={`${import.meta.env.BASE_URL}/imagenes/icono-descarga.svg`}
+                            alt="Icono Descarga"
+                          />{' '}
+                          .xlsx
+                        </a>
+                      )}
+
+                      <span class="abrirFicha botonCaja" data-ficha={`ya${i}i${j}`}>
+                        Ficha técnica
+                      </span>
+                    </div>
+
+                    <div class="columna definicion">
+                      <p set:html={urlsAEnlacesHTML(indicador.definicion)} />
+                    </div>
+
+                    <div id={`ya${i}i${j}`} class="contenedorFicha">
+                      <FichaTecnica rutaYa={ya.ruta} rutaIndicador={indicador.ruta} />
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          ))
         }
       </div>
     </div>
@@ -99,6 +90,7 @@ import { urlsAEnlacesHTML } from '@enflujo/alquimia';
   const contenedor = document.getElementById('indicadores') as HTMLDivElement;
   const botones = document.querySelectorAll<HTMLSpanElement>('.abrirFicha');
   const botonesYa = document.querySelectorAll<HTMLDivElement>('.botonYaDatos');
+  const botonesCerrar = document.querySelectorAll('.cerrarFicha');
 
   let fichaAbierta: HTMLDivElement;
 
@@ -143,12 +135,22 @@ import { urlsAEnlacesHTML } from '@enflujo/alquimia';
   document.body.addEventListener('click', (evento) => {
     if (!fichaAbierta) return;
     const elemento = evento.target as HTMLElement;
+
     if (elemento.classList.contains('abrirFicha')) return;
 
     if (!(elemento.classList.contains('contenedorFicha') || fichaAbierta.contains(elemento))) {
       fichaAbierta.classList.remove('abierta');
     }
   });
+
+  // Cerrar fichas desde botón cerrar
+  botonesCerrar.forEach((boton) => {
+    boton.addEventListener('click', (evento) => {
+      const elemento = evento.target as HTMLElement;
+      const contenedorFicha = elemento.parentElement.parentElement;
+      contenedorFicha.classList.remove('abierta');
+    });
+  });
 </script>
 
 <style lang="scss">
diff --git a/datosVisibles/ya7.ts b/datosVisibles/ya7.ts
index 3bb40a8..69883ed 100644
--- a/datosVisibles/ya7.ts
+++ b/datosVisibles/ya7.ts
@@ -6,7 +6,7 @@ export const ya7: DatosYa = {
   ruta: 'fortalecimiento-familiar',
   definicion:
     'Es crucial fortalecer a las familias para proteger y cuidar a la niñez, asegurando vínculos emocionales y cumpliendo normativas como la Declaración Universal de Derechos Humanos. La asistencia a las familias, respaldada por la Convención sobre los Derechos del Niño y la Constitución Nacional, es esencial para la crianza. El Plan Nacional de Desarrollo (2018-2022) destaca la importancia de las familias como garantes de la protección de los niños, requiriendo oportunidades y capacidades para enfrentar su entorno y asegurar el bienestar de todos sus miembros. La familia desempeña un papel crucial en la socialización y protección integral de la niñez.',
-  hay_datos: false,
+  hay_datos: true,
   indicadores: [
     {
       nombre: 'Fortalecimiento Familiar del cuidado y la crianza de la niñez',

From 3ed04ed190ef5cfa289f40cb88f27a613f04ba6d Mon Sep 17 00:00:00 2001
From: anattolia <anattolia@gmail.com>
Date: Fri, 18 Oct 2024 17:01:05 -0500
Subject: [PATCH 2/5] =?UTF-8?q?=F0=9F=94=A7=20arreglar=20estilo=20en=20cel?=
 =?UTF-8?q?ular?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../www/src/componentes/FichaTecnica.astro    |  13 ++-
 aplicaciones/www/src/pages/datos.astro        | 106 ++++++++++++++++--
 2 files changed, 105 insertions(+), 14 deletions(-)

diff --git a/aplicaciones/www/src/componentes/FichaTecnica.astro b/aplicaciones/www/src/componentes/FichaTecnica.astro
index a33889d..001b93d 100644
--- a/aplicaciones/www/src/componentes/FichaTecnica.astro
+++ b/aplicaciones/www/src/componentes/FichaTecnica.astro
@@ -101,22 +101,21 @@ const datosIndicador = datosYa.indicadores.find((instancia) => instancia.ruta ==
 <style lang="scss">
   @import '@/scss/constantes';
   .fichaTecnica {
-    min-width: 300px;
     border: solid 2px var(--azulViejo);
     border-radius: 15px 0 0 15px;
     color: var(--azulViejo);
     background-color: var(--blancoMarfil);
     text-align: center;
-    max-height: 85vh;
-    overflow: auto;
+    position: relative;
     z-index: 9;
+
     font-variation-settings:
       'MONO' 0,
       'CASL' 0,
       'wght' 700,
       'slnt' 0,
       'CRSV' 0;
-    position: relative;
+    width: 70vw;
     .cerrarFicha {
       color: var(--blancoMarfil);
       position: absolute;
@@ -203,6 +202,7 @@ const datosIndicador = datosYa.indicadores.find((instancia) => instancia.ruta ==
     .fichaTecnica {
       min-width: 330px;
       width: 70vw;
+
       .seccion {
         .titulo {
           flex-basis: 50%;
@@ -212,6 +212,11 @@ const datosIndicador = datosYa.indicadores.find((instancia) => instancia.ruta ==
   }
 
   @media screen and (min-width: $corte2) {
+    .fichaTecnica {
+      height: 80vh;
+      overflow: auto;
+      width: 50vw;
+    }
   }
 
   @media screen and (min-width: $corte3) {
diff --git a/aplicaciones/www/src/pages/datos.astro b/aplicaciones/www/src/pages/datos.astro
index b456c33..2a05793 100644
--- a/aplicaciones/www/src/pages/datos.astro
+++ b/aplicaciones/www/src/pages/datos.astro
@@ -74,6 +74,23 @@ import { urlsAEnlacesHTML } from '@enflujo/alquimia';
 
                     <div id={`ya${i}i${j}`} class="contenedorFicha">
                       <FichaTecnica rutaYa={ya.ruta} rutaIndicador={indicador.ruta} />
+                      {!datosArchivo && (
+                        <div class="contenedorSugerenciasDatos">
+                          <div class="aviso">
+                            No hay información suficiente para reconstruir este indicador. Proponemos algunas
+                            sugerencias de cómo podría trabajarse.
+                          </div>
+
+                          <div class="sugerencia">
+                            <h4 class="titulo">Responsables de medición</h4>
+                            <p class="texto">{indicador.responsable}</p>
+                          </div>
+                          <div class="sugerencia">
+                            <h4 class="titulo">A quién le compete</h4>
+                            <p class="texto">{indicador.compete_a}</p>
+                          </div>
+                        </div>
+                      )}
                     </div>
                   </div>
                 );
@@ -162,15 +179,16 @@ import { urlsAEnlacesHTML } from '@enflujo/alquimia';
   }
 
   .contenedorFicha {
+    flex-direction: column;
     display: none;
     position: fixed;
-    justify-content: space-around;
-    background-color: var(--blancoMarfil);
-    top: 80px;
-    left: 50%;
-    transform: translateX(-50%);
-    // width: 93%;
     background-color: var(--blancoMarfil);
+    top: 20px;
+    padding: 2em;
+    width: 100vw;
+    overflow: auto;
+    height: 100vh;
+    justify-content: flex-start;
     z-index: 7;
     &.abierta {
       display: flex;
@@ -186,7 +204,6 @@ import { urlsAEnlacesHTML } from '@enflujo/alquimia';
   .botonesSubMenu {
     display: flex;
     flex-wrap: wrap;
-    justify-content: center;
     font-size: 0.75em;
 
     .botonYaDatos {
@@ -233,6 +250,9 @@ import { urlsAEnlacesHTML } from '@enflujo/alquimia';
     font-size: 1em;
     font-family: var(--fuente);
     color: var(--azulViejo);
+    /*    height: 100vh;
+    overflow: auto;
+    padding-bottom: 3em; */
     font-variation-settings:
       'MONO' 0,
       'CASL' 0,
@@ -282,7 +302,6 @@ import { urlsAEnlacesHTML } from '@enflujo/alquimia';
   }
 
   #indicadores {
-    // width: 70vw;
     margin-top: 2em;
   }
 
@@ -290,9 +309,13 @@ import { urlsAEnlacesHTML } from '@enflujo/alquimia';
     margin: 0.4em 0;
     border: 1px dotted;
     display: flex;
-
+    width: 70vw;
+    overflow-wrap: anywhere;
     .definicion {
       font-size: 0.85em;
+      font-size: 0.85em;
+      width: 65%;
+      padding: 1em;
     }
     // position: relative;
   }
@@ -323,10 +346,66 @@ import { urlsAEnlacesHTML } from '@enflujo/alquimia';
     }
   }
 
+  .contenedorSugerenciasDatos {
+    display: flex;
+    font-size: 0.9em;
+    flex-direction: column;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    width: 70vw;
+    padding-bottom: 2em;
+
+    .aviso {
+      font-size: 1em;
+      padding: 1.5em 0;
+    }
+
+    .sugerencia {
+      width: 100%;
+      .titulo {
+        background-color: var(--uvaProfunda);
+        color: var(--blancoMarfil);
+        padding: 2em 2em 1.5em 2em;
+        border-radius: 10px 10px 0 0;
+        margin-bottom: 0;
+      }
+      .texto {
+        background-color: var(--blancoMarfil);
+        color: var(--azulViejo);
+        border: solid 2px var(--uvaProfunda);
+        margin: 0;
+        padding: 2em 2em 1.5em 2em;
+      }
+    }
+  }
+
   /// ✂️ Cortes pantalla
   @media screen and (min-width: $corte1) {
+    .contenedorFicha {
+      width: 80vw;
+      left: 10vw;
+    }
+    .indicador {
+      width: 100%;
+    }
   }
   @media screen and (min-width: $corte2) {
+    .contenedorFicha {
+      flex-direction: row;
+
+      top: 3vw;
+      left: 12vw;
+    }
+    .fichaTecnica {
+      width: 50vw;
+    }
+    .contenedorSugerenciasDatos {
+      padding-right: 2em;
+      flex-direction: row;
+      margin-left: 2em;
+      height: 80vh;
+      overflow: auto;
+    }
   }
 
   @media screen and (min-width: $corte3) {
@@ -355,14 +434,21 @@ import { urlsAEnlacesHTML } from '@enflujo/alquimia';
   }
 
   @media screen and (min-width: $corte4) {
+    .contenedorFicha {
+    }
     .contenedorDatos {
       width: 40vw;
       max-width: 1000px;
       margin: 0 auto 7em auto;
     }
 
+    .contenedorSugerenciasDatos {
+      width: 50%;
+      padding-right: 2em;
+    }
+
     .contenedorFicha {
-      justify-content: flex-start;
+      //justify-content: flex-start;
     }
   }
 </style>

From 5ddac6a4318ba8c339db7e49b208c800e8304097 Mon Sep 17 00:00:00 2001
From: anattolia <anattolia@gmail.com>
Date: Fri, 18 Oct 2024 17:09:49 -0500
Subject: [PATCH 3/5] =?UTF-8?q?=F0=9F=90=9B=20Cerrar=20ficha=20desde=20bot?=
 =?UTF-8?q?=C3=B3n=20cerrar=20en=20tablero?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 aplicaciones/www/src/pages/[ya]/[indicador].astro | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/aplicaciones/www/src/pages/[ya]/[indicador].astro b/aplicaciones/www/src/pages/[ya]/[indicador].astro
index 66ddabe..4edc0d4 100644
--- a/aplicaciones/www/src/pages/[ya]/[indicador].astro
+++ b/aplicaciones/www/src/pages/[ya]/[indicador].astro
@@ -101,6 +101,7 @@ const archivosYa: { titulo: string; archivo: string; umbral?: number; ruta: stri
     const comparativo = document.getElementById('comparativo') as HTMLDivElement;
     const botonFicha = document.getElementById('abrirFicha') as HTMLSpanElement;
     const infoAdicional = document.getElementById('contenedorInfoAdicional') as HTMLDivElement;
+    const botonesCerrar = document.querySelectorAll('.cerrarFicha');
 
     if (botonFicha) {
       botonFicha.addEventListener('click', () => {
@@ -189,6 +190,13 @@ const archivosYa: { titulo: string; archivo: string; umbral?: number; ruta: stri
         infoAdicional.classList.remove('abierta');
       }
     });
+
+    // Cerrar ficha con botón cerrar
+    botonesCerrar.forEach((boton) => {
+      boton.addEventListener('click', (evento) => {
+        infoAdicional.classList.remove('abierta');
+      });
+    });
   }
 </script>
 

From 55696295a855491671823df01cc40ff5a8e13d68 Mon Sep 17 00:00:00 2001
From: anattolia <anattolia@gmail.com>
Date: Fri, 18 Oct 2024 17:16:01 -0500
Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=90=9B=20ajustar=20tama=C3=B1o=20fich?=
 =?UTF-8?q?a?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 aplicaciones/www/src/componentes/FichaTecnica.astro | 1 +
 aplicaciones/www/src/pages/datos.astro              | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/aplicaciones/www/src/componentes/FichaTecnica.astro b/aplicaciones/www/src/componentes/FichaTecnica.astro
index 001b93d..94f5983 100644
--- a/aplicaciones/www/src/componentes/FichaTecnica.astro
+++ b/aplicaciones/www/src/componentes/FichaTecnica.astro
@@ -98,6 +98,7 @@ const datosIndicador = datosYa.indicadores.find((instancia) => instancia.ruta ==
     }
   </section>
 </div>
+
 <style lang="scss">
   @import '@/scss/constantes';
   .fichaTecnica {
diff --git a/aplicaciones/www/src/pages/datos.astro b/aplicaciones/www/src/pages/datos.astro
index 2a05793..465698f 100644
--- a/aplicaciones/www/src/pages/datos.astro
+++ b/aplicaciones/www/src/pages/datos.astro
@@ -185,10 +185,10 @@ import { urlsAEnlacesHTML } from '@enflujo/alquimia';
     background-color: var(--blancoMarfil);
     top: 20px;
     padding: 2em;
-    width: 100vw;
-    overflow: auto;
+    width: fit-content;
     height: 100vh;
     justify-content: flex-start;
+    overflow: auto;
     z-index: 7;
     &.abierta {
       display: flex;
@@ -382,7 +382,7 @@ import { urlsAEnlacesHTML } from '@enflujo/alquimia';
   /// ✂️ Cortes pantalla
   @media screen and (min-width: $corte1) {
     .contenedorFicha {
-      width: 80vw;
+      max-width: 80vw;
       left: 10vw;
     }
     .indicador {

From ff5b017ecdb4e250e9b135df3510447f89daed46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20Camilo=20Gonz=C3=A1lez?=
 <j.gonzalezj@uniandes.edu.co>
Date: Mon, 21 Oct 2024 10:28:27 -0500
Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=90=9B=20bordes=20y=20"scrolls"=20en?=
 =?UTF-8?q?=20la=20ficha=20t=C3=A9cnica?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../www/src/componentes/FichaTecnica.astro    |  4 +-
 .../src/componentes/PropuestaIndicador.astro  |  1 -
 aplicaciones/www/src/pages/datos.astro        | 37 +++++++++++--------
 3 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/aplicaciones/www/src/componentes/FichaTecnica.astro b/aplicaciones/www/src/componentes/FichaTecnica.astro
index 94f5983..c6ced7f 100644
--- a/aplicaciones/www/src/componentes/FichaTecnica.astro
+++ b/aplicaciones/www/src/componentes/FichaTecnica.astro
@@ -101,6 +101,7 @@ const datosIndicador = datosYa.indicadores.find((instancia) => instancia.ruta ==
 
 <style lang="scss">
   @import '@/scss/constantes';
+
   .fichaTecnica {
     border: solid 2px var(--azulViejo);
     border-radius: 15px 0 0 15px;
@@ -109,6 +110,7 @@ const datosIndicador = datosYa.indicadores.find((instancia) => instancia.ruta ==
     text-align: center;
     position: relative;
     z-index: 9;
+    height: fit-content;
 
     font-variation-settings:
       'MONO' 0,
@@ -214,8 +216,6 @@ const datosIndicador = datosYa.indicadores.find((instancia) => instancia.ruta ==
 
   @media screen and (min-width: $corte2) {
     .fichaTecnica {
-      height: 80vh;
-      overflow: auto;
       width: 50vw;
     }
   }
diff --git a/aplicaciones/www/src/componentes/PropuestaIndicador.astro b/aplicaciones/www/src/componentes/PropuestaIndicador.astro
index eced989..8aa2cd6 100644
--- a/aplicaciones/www/src/componentes/PropuestaIndicador.astro
+++ b/aplicaciones/www/src/componentes/PropuestaIndicador.astro
@@ -49,7 +49,6 @@ import { urlsAEnlacesHTML } from '@enflujo/alquimia';
   @import '@/scss/constantes';
   .contenedorInfoAdicional {
     display: flex;
-    // position: absolute;
     flex-wrap: wrap;
     justify-content: flex-start;
     align-items: center;
diff --git a/aplicaciones/www/src/pages/datos.astro b/aplicaciones/www/src/pages/datos.astro
index 465698f..4fbac51 100644
--- a/aplicaciones/www/src/pages/datos.astro
+++ b/aplicaciones/www/src/pages/datos.astro
@@ -170,6 +170,16 @@ import { urlsAEnlacesHTML } from '@enflujo/alquimia';
   });
 </script>
 
+<style lang="scss" is:global>
+  .contenedorDatos {
+    .fichaTecnica {
+      border: none;
+      border-right: solid 2px var(--azulViejo);
+      border-radius: 15px 15px 0 15px;
+    }
+  }
+</style>
+
 <style lang="scss">
   @use 'sass:color';
   @import '@/scss/constantes';
@@ -183,15 +193,17 @@ import { urlsAEnlacesHTML } from '@enflujo/alquimia';
     display: none;
     position: fixed;
     background-color: var(--blancoMarfil);
-    top: 20px;
-    padding: 2em;
+    top: 40px;
     width: fit-content;
-    height: 100vh;
-    justify-content: flex-start;
     overflow: auto;
     z-index: 7;
+    max-height: 80vh;
+    border: solid 2px var(--azulViejo);
+    border-radius: 15px 15px 0 15px;
+
     &.abierta {
       display: flex;
+      justify-content: flex-start;
     }
   }
 
@@ -317,7 +329,6 @@ import { urlsAEnlacesHTML } from '@enflujo/alquimia';
       width: 65%;
       padding: 1em;
     }
-    // position: relative;
   }
 
   .contenedorYa {
@@ -392,19 +403,14 @@ import { urlsAEnlacesHTML } from '@enflujo/alquimia';
   @media screen and (min-width: $corte2) {
     .contenedorFicha {
       flex-direction: row;
-
-      top: 3vw;
+      top: 40px;
       left: 12vw;
     }
-    .fichaTecnica {
-      width: 50vw;
-    }
+
     .contenedorSugerenciasDatos {
       padding-right: 2em;
       flex-direction: row;
       margin-left: 2em;
-      height: 80vh;
-      overflow: auto;
     }
   }
 
@@ -435,20 +441,19 @@ import { urlsAEnlacesHTML } from '@enflujo/alquimia';
 
   @media screen and (min-width: $corte4) {
     .contenedorFicha {
+      top: 60px;
     }
+
     .contenedorDatos {
       width: 40vw;
       max-width: 1000px;
       margin: 0 auto 7em auto;
+      top: 50px;
     }
 
     .contenedorSugerenciasDatos {
       width: 50%;
       padding-right: 2em;
     }
-
-    .contenedorFicha {
-      //justify-content: flex-start;
-    }
   }
 </style>