@charset "utf-8";
<style>
 .modal-fondo {
  /* Imagen de fondo */
  background-image: url('mod/soldo.jpg');
  background-size: cover; /* Ajusta la imagen para cubrir todo */
  background-position: center; /* Centra la imagen */
  background-repeat: no-repeat; /* Evita que se repita */
  
  /* Estilos para legibilidad */
  border: none;
  border-radius: 10px;
  padding: 30px;
  color: white; /* Color del texto */
  width: 300px;
  
}

/* Opcional: Oscurecer la imagen para que el texto destaque */
.modal-fondo::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Sombra negra al 50% */
  z-index: -1;
}

/* Estilo para el fondo detrás del modal (backdrop) */
.modal-fondo::backdrop {
  background-color: rgba(0, 0, 0, 0.7);
}

 
 
            .real{
display: none;
}
.real.abierto{display:block}
        </style>
<script src="/scripts/snippet-javascript-console.min.js?v=2"></script>

<style>
body {
  font-family: "Lato", sans-serif;
  transition: background-color .5s;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
	position: absolute;
	top: 0;
	right: 33px;
	font-size: 36px;
	margin-left: 50px;
	width: 74px;
	
}

#main {
	transition: margin-left .2s;
	padding: 16px;
	font-size: 12px;
}


@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
.t18 {
	font-size: 36px;
	color: #CCC;
}

t18 {
	font-size: 18px;
}
body,td,th {
	font-family: Lato, sans-serif;
	font-size: 14px;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
	text-align: center;
}
#main table tr td h1 {
	font-family: "Lucida Console", Monaco, monospace;
	font-size: 18px;
}
t18 {
	font-size: 18px;
}

.t16 {
	font-size: 16px;
}
.plt14 {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.t16 {
	font-size: 18px;
}
</style>/* CSS Document */

<style>
        /* Estilos base para el cuerpo (solo para habilitar el scroll de prueba) */
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            min-height: 1500px; /* Para poder scrollear la página */
        }

        /* Contenedor principal del footer (fijo abajo) */
        .footer-interactivo {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* Botón de la flecha para minimizar/maximizar 
        .btn-toggle-footer {
            background-color: #222;
            color: #fff;
            border: none;
            border-radius: 8px 8px 0 0;
            padding: 5px 15px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
            transition: background-color 0.3s;
        }*/
		
		/* Botón de la flecha modificado para ir a la derecha */
.btn-toggle-footer {
    background-color: #222;
    color: #fff;
    border: none;
    border-radius: 8px 8px 0 0;
    padding: 5px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
    transition: background-color 0.3s;

    /* --- ACÁ LOS CAMBIOS PARA CORRERLO A LA DERECHA --- */
    margin-left: auto;       /* Empuja el botón todo lo posible hacia la derecha */
    margin-right: 15px;      /* Despegue de 20px del borde derecho de la pantalla */
}
		

        .btn-toggle-footer:hover {
            background-color: #444;
        }

        /* El icono del GIF de la flecha */
        .flecha-gif {
            width: 20px;
            height: 20px;
            object-fit: contain;
            transition: transform 0.3s ease;
        }

        /* Rotación de la flecha cuando el footer esté oculto */
        .footer-interactivo.oculto .flecha-gif {
            transform: rotate(180deg);
        }

        /* Cuerpo del footer donde van los avisos */
        .footer-contenido {
            background-color: #222;
            color: #fff;
            width: 100%;
            max-height: 20px; /* ex 120 Ajusta la altura según tus GIFs de avisos */
            overflow: hidden;
            transition: max-height 0.4s ease-out, padding 0.4s ease-out;
            box-shadow: 0 -4px 15px rgba(0,0,0,0.3);
            
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 30px; /* Espacio entre avisos */
            padding: 15px 0;
        }

        /* Cuando se agrega la clase .oculto mediante JS, colapsamos el contenido */
        .footer-interactivo.oculto .footer-contenido {
            max-height: 0;
            padding: 0;
        }

        /* Estilos para los GIFs de avisos publicitarios o informativos */
		
		.aviso-gif {
   /* Estilos para los GIFs de avisos */
/*.aviso-gif {
    width: 400px;         /* <-- Acá definís el ancho exacto que quieras (en píxeles) 
    height: auto;         /* <-- CLAVE: el "auto" hace que la altura se calcule sola para que el GIF NO se deforme 
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    transition: transform 0.2s;
}*/
		
        .aviso-gif {
            max-height: 80px; /* Forzamos que no deformen el footer */
            width: auto;
            border-radius: 4px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.5);
            transition: transform 0.2s;
        }

        .aviso-gif:hover {
            transform: scale(1.05);
        }
    .plt14 {	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.real {display: none;
}
.real {display:block}
.t16 {	font-size: 16px;
}
.t16 {	font-size: 18px;
}
.t18 {	font-size: 36px;
	color: #CCC;
}
    </style>