mejora estilo título y función ampliar gráfico

main.py

@@ -40,7 +40,8 @@ def html_principal():
                         font-style: italic;
                         font-size: 21px;
                         text-align: center;
-                        background-image: linear-gradient(180deg, #9bff5fcf, transparent);
+                        /* background-image: linear-gradient(180deg, #9bff5fcf, transparent); */
+                        background-image: linear-gradient(180deg, #b3ff5fd1, #edffd182 80%, #edffd100); /*este para usar con backdrop */
                         margin-top: 0px;
                         padding-top: 8px;
                         padding-bottom: 7px;
@@ -49,12 +50,14 @@ def html_principal():
                         position: fixed;
                         left: 0px;
                         right: 0px;
+                        backdrop-filter: blur(12px);
                     }
                     .grafico_img{
                         max-width: 98vw;
                         margin: 0 auto;
                         display: block;
                         margin-top: 20px;
+                        transition: all 0.5s ease;
                     }
                     p {
                         color: #4567a5;
@@ -181,6 +184,30 @@ def html_principal():
                     .hotmap-abierto{
                         height: 500px;
                     }
+                    .imagen-container{
+                        background-color: none;
+                        border: none;
+                    }
+                    .imagen-container-big{
+                        display: inline-flex;
+                        position: fixed;
+                        top: 0px;
+                        bottom: 0px;
+                        left: 0px;
+                        right: 0px;
+                        overflow: hidden;
+                        z-index: 999;
+                        flex-direction: column;
+                        align-items: center;
+                        justify-content: center;
+                        background-color: #000000cf;
+                    }
+                    .imagen-container-big > img {
+                        margin: 0;
+                        max-width: 90vh;
+                        transform: rotate(90deg);
+                        transform-origin: center;
+                    }
                     /* pantalla grandecita */
                     @media only screen and (min-width: 700px){
                         p {
@@ -267,7 +294,9 @@ def html_principal():
                     <!-- TradingView Widget END -->
 
                     <!-- Elemento para mostrar gráfico -->
-                    <img class="grafico_img" id="grafico_img" src="">
+                    <div class="imagen-container" id="imagen-container" onclick="this.classList.toggle('imagen-container-big')">
+                        <img class="grafico_img" id="grafico_img" src="">
+                    </div>
 
                             <!-- TradingView Widget BEGIN -->
                             <!-- Este widget se edita en: "https://www.tradingview.com/widget-docs/widgets/tickers/ticker-tape/" -->