body {
     background-image: url('/assets/img/background2.png');
     font-family: Arial, sans-serif;
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
 }

 .header {
     /*background-color: white;*/
     padding: 10px 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .logo {
     height: 120px;
     display: flex;
     align-items: center;
 }

 .logo img {
     margin-right: 10px;
 }

 .logo p {
     color: white;
     margin-top: 40px;
     margin-left: 264px;
     font-size: 1.5em;
 }


 .menu {
     display: flex;
     gap: 20px;
 }

 .active {
     background-color: #e0e0e0;
     padding: 5px 10px;
     border-radius: 5px;
 }

 .datetime {
     text-align: right;
     /*background-color: rgba(0, 0, 0, 0.6);*/
     padding: 4px;
     color: #fff;
     border-radius: 5px;
 }

 .main-content {
     padding: 20px;
     padding-top: -280px;
     /*margen superior del contenedor*/



 }

 .card {
     border: none;
     border-radius: 10px;
     padding: 20px;
     text-align: center;
     color: white;
     margin-bottom: 20px;
     height: 110px;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     background-size: cover;
     background-position: center;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     cursor: pointer;
     position: relative;
     /* 🔥 Este es el fix */
     overflow: hidden;
     /* 🔒 Opcional, para evitar que el texto se salga */
 }

 .card:hover {
     transform: scale(1.05);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
 }

 .card-content {
     background-color: rgba(0, 0, 0, 0.6);
     /* ya lo tenías */
     padding: 0px;
     border-radius: 0 0 10px 10px;
     font-size: 12px;
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     text-align: center;
     z-index: 2;
     /* asegúrate que quede encima */
 }

 .black-card {
     background-color: rgba(0, 0, 0, 0.5);
 }

 .blue-card {
     background-color: rgba(0, 102, 204, 0.5);
 }

 .app-card {
     background-color: #000;
     color: white;
     padding: 10px;
     border-radius: 5px;
     text-align: center;
     margin-bottom: 10px;
     height: 50px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     background-size: cover;
     background-position: center;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     cursor: pointer;
 }

 .app-card:hover {
     transform: scale(1.1);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
 }

 .weather-container {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 5px;
 }

 #js_w_temp {
     font-size: 1rem;
     color: white;
     font-weight: bold;
     padding: 5px;
 }

 #js_w_icon {
     margin-left: 5px;
 }

 #aviso-modal {
     display: none;
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background-color: white;
     padding: 10px;
     border-radius: 8px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
     z-index: 1000;
     width: 200px;
     height: 200px;
     text-align: center;
 }

 #modal-text {
     font-size: 14px;
     margin: 0;
 }