.tm-fondonegro
    {
    padding: 20px 20px 20px;
    border: medium none;
    background: #000000 ;
    outline: none;
    text-shadow:none;
    }

    .tm-fondo 
    {
    padding: 0px 20px 20px;
    border: medium none;
    background: #ffffff ;
    outline: none;
    text-shadow:none;
    }
          
    .tm-article-subtitle 
    {
        padding-left: 6px;
        border-left: 3px solid #1FA2D6;
        font-size: 16px;
        line-height: 16px;
    }
    
    
    .tm-cabecera 
    {
        padding: 5px 5px ;
        background: #FBFBFB;
    }
    
    .tm-cabecera  .navbar-text 
    {
        color: #ffffff;
        font-family: "Lucida Sans Typewriter", Times, serif;
        font-weight: bold;
        text-shadow: none;
    }
    
    .tm-piepagina 
    {
        padding: 5px 5px 5px;
        background: #000000;
    }
    
    .tm-piepagina  .navbar-text 
    {
        color: #ffffff;
        font-family: "Lucida Sans Typewriter", Times, serif;
        font-weight: bold;
        text-shadow: none;
    }
  
    
    /* ========================================================================
       Component: paginacion
     ========================================================================== 
     */
     
    #scroll 
    {
      overflow: auto;
      white-space: nowrap;
    }
    
    /* ========================================================================
       Colores
     ========================================================================== 
    */
    
    .color-blanco
    {
        position: relative;
        background-color: white;
        border-radius: 4px;
    }
    
    .color-negro
    {
        color:#000000;
    }
    
    /* ========================================================================
       varios
     ========================================================================== 
     */
     
    .der4bajo5
    {
        position:absolute;        
        right:4px;
        bottom:2px;
    }

    .promocion 
    {
        background: #FF3131;
        border: #dcdcdc;
        border-radius: 5px;
        color: #fff;
        display: inline-block;
        font-size: 14px;
        font-weight:bold;
        left:-10px;
        padding-left: 5px;
        padding-right:  5px;
        padding-top: 0px;
        padding-bottom: 0px;

    }

    .codigock 
    {
        background: #FF3131;
        border: #dcdcdc;
        border-radius: 0px 5px 5px 0px;
        color: #fff;
        display: inline-block;
        font-size: 10px;
        font-weight:bold;
        left:-10px;
        padding-left: 5px;
        padding-right:  5px;
        padding-top: 0px;
        padding-bottom: 0px;
        bottom: -24px;

    }

    .reparto 
    {
        background: #AAB7B8;
        border: #dcdcdc;
        border-radius: 0px 5px 5px 0px;
        color: #ffffff;
        display: inline-block;
        font-size: 10px;
        font-weight:bold;
        left:-10px;
        padding-left: 5px;
        padding-right:  5px;
        padding-top: 0px;
        padding-bottom: 0px;

    }

    .puntos 
    {
        background: #FF3131;
        border: #dcdcdc;
        border-radius: 0 2px 2px 0;
        color: #fff;
        display: inline-block;
        font-size: 11px;
        font-weight:bold;

        left: 0;

        padding-left: 5px;
        padding-right: 4px;
        position: relative;
        top: 10px;
        transform: rotate(38deg);

    }
    .puntos:before 
    {
      border-bottom: 8px transparent solid;
      border-right: 10px #E52E02 solid;
      border-top: 8px transparent solid;
      content: '';
      height: 0;
      left: -9px;
      position: absolute;
      top: 0;
      width: 0;
    }
    .puntos:after 
    { 
      background: white;
      border-radius: 50%;
      content: '';
      height: 4px;
      left: 0;
      position: absolute;
      width: 4px;
      top: 7px;
    }
    
    .cintatexto
    {
        color: red;
        font-size: 10px;
        padding-left: 17px;
    }
    
    .mtagcateg 
    {
        background: #ffffff;
        border-radius: 15px;
        color: #616161;
        border: 1px solid #B3B3B3;
        display: inline-block;
        font-size: 17px;
        left:-2px;
        padding-left: 8px;
        padding-right:8px;
        padding-top:1px;
        padding-bottom:1px;
    }
    
    /* ========================================================================
       modos de negocios
     ========================================================================== 
     */
    
    .Modo_con_admin 
    {
        height: 5px;
        width: 5px;
        background-image: url("0.png");
        background-repeat: no-repeat;
        background-position: left; 
        background-color: transparent;
        opacity: 0.9;
    }
    
    .Modo_local 
    {
        height: 5px;
        width: 5px;
        background-image: url("1.png");
        background-repeat: no-repeat;
        background-position: left; 
        background-color: transparent;
    }
    
    .Modo_nacional 
    {
        height: 5px;
        width: 5px;
        background-image: url("2.png");
        background-repeat: no-repeat;
        background-position: left; 
        background-color: transparent;
    }
    
    /* ========================================================================
       Flechas isquierda y derecha
     ========================================================================== 
     */
     
    .negro 
    {
        color:black;
    }
     
    .rojo 
    {
        color:red;
    }
     
    .verde 
    {
        color:#34BF5D;
    }
     
    .fondoblanco 
    {
        background-color:#FFFFFF;
    }
     
    .izquier-circ
    {
        background-image: url("izquier.png?v=5");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left; 
        width: 30px;
        height: 30px;      
        background-color: transparent;
        opacity: 1;
    }
    
    .derecha-circ
    {
        background-image: url("derecha.png?v=5");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right; 
        width: 30px;
        height: 30px;      
        background-color: transparent;
        opacity: 1;
    }
    
    .izquier-rect
    {
        background-image: url("izqrec.png?v=4");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left; 
        width: 27px;
        height: 80px;      
        background-color: transparent;
        opacity: 0.9;
    }
    
    .derecha-rect
    {
        background-image: url("derrec.png?v=4");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right; 
        width: 27px;
        height: 80px; 
        background-color: transparent;
        opacity: 0.9;
    }
    
    /* ========================================================================
       caja
     ========================================================================== 
     */
     
     .mtextogrande
     {
         font-size: 40px;
         font-weight: bold;
         text-align: center;
     }
     
     .mtextooblicua
     {
        font-style: oblique;
     }
     
     .mlineadown
     {
            padding: 5px 5px 5px;
            border-bottom: 2px solid #9E9E9E;
     }
     
     .mlineader
     {
        padding: 5px 5px 5px;
        border-right: 2px solid #9E9E9E;
        height: 100px;
        vertical-align: middle;
     }
     
     .malinvertcent
     {
         vertical-align: middle;
     }
     
    .box 
    {
      transition: box-shadow .3s;
    }
    
    .box:hover 
    {
        box-shadow: 0 0 15px rgba(50,50,50,.2); 
    }
    
     .mcuadropeque
     {
        padding: 4px; 
        background: #E6E4E4;
     }
     
    .mcirculo 
    {
          width: 500px;
          height: 500px;
          border-radius: 50%;
          font-size: 50px;
          color: #fff;
          line-height: 500px;
          text-align: center;
          background: #000
    }
    
    .mcuadro 
    {
        height: 100px;
        line-height: 90px;
        text-align: center;
        border: 2px dashed #f69c55;
    }
    
    /* ========================================================================
       bubles
     ========================================================================== 
     */
     
     .cerrar
     {
        background-image: url("cerrar.png?v=2");
        background-repeat: no-repeat;
        background-position: center; 
        width:15px;
        height:15px;
     }
     
     .estrella
     {
        background-image: url("star.png");
        background-repeat: no-repeat;
        background-position: center; 
        background-size: 25px 25px;
        width:25px;
        height: 25px;
     }
     
     .corazon
     {
        background-image: url("corazon.png?v=1");
        background-repeat: no-repeat;
        background-position: center; 
        width:10px;
        height: 10px;
     }
     
     .like
     {
        background-image: url("like.png?v=1");
        background-repeat: no-repeat;
        background-position: center; 
        width:10px;
        height: 10px;
     }
     
    .floatvolver
    {
        background-image: url("back.png");
        background-repeat: no-repeat;
        background-size:contain;
    	position:fixed;
    	width:40px;
    	height:40px;
    	bottom:20px;
    	left:20px;
    	border-radius:10px;
    	text-align:center;
    }
    
   .floatmigps
    {

        background-image: url("gps.png");
        background-repeat: no-repeat;
        background-size:contain;
    	position:fixed;
    	width:50px;
    	height:50px;
    	bottom:20px;
    	left:20px;
    	border-radius:25px;
    	text-align:center;
    }
     
    .floatcarrito
    {
        background-color:#FF0000; 
        background-image: url("carrorojo.png");
        background-repeat: no-repeat;
        background-size:contain;
    	position:fixed;
    	width:50px;
    	height:50px;
    	bottom:20px;
    	right:20px;
    	border-radius:10px;
    	text-align:center;
    }
    
	.floatcarrito .badge
    {
        background-color:green;
        position:relative;
        bottom:10px;
        right:25px
    }
    
    
    .floatcarritobajo
    {
        background-image: url("carrorojo.png");
        background-repeat: no-repeat;
        background-size:contain;
    	position:fixed;
    	width:50px;
    	height:50px;
    	bottom:10px;
    	left:10px;
    	border-radius:50px;
    	text-align:center;
    	box-shadow: 2px 2px 3px #999;
    }
    
    .heart 
    {
    	font-size: 150px;
    	color: #e00;
    	animation: beat .25s infinite alternate;
    	transform-origin: center;
    }
    
    /* Heart beat animation */
    @keyframes beat
    {
    	to { transform: scale(1.1); }
    }
     
    /* ========================================================================
       genercos pagina
     ========================================================================== 
     */
     
    html, body 
    {
        height: 100%;
        width: 100%;
        margin: 0;
        
    }
    
    .pad_5x
    {
        padding:5px;
    }
    
    .pad_5x_arriba
    {
        padding:5px 0px 0px 0px;
    }
    
    .pad_5x_izqder
    {
        padding:0px 5px 0px 5px;
    }
    
    .pad_5x_izqderabajo
    {
        padding:0px 5px 5px 5px;
    }
    
    .pad_5x_izqarribadere
    {
        padding:5px 5px 0px 5px;
    }
    .pad_10x
    {
        padding:10px;
    }
    
    .pad_10x_izqder
    {
        padding:0px 10px 0px 10px;
    }
    
    .pad_10x_izqderabajo
    {
        padding:0px 10px 10px 10px;
    }
    
    .pad_10x_izqarribadere
    {
        padding:10px 10px 0px 10px;
    }
    
    .colorfondo
    {
        background-color:#F5F5F5;
    }
    
    .colorbase
    {
        color:#F5F5F5;
        border-color:#E4E4E4;
    }
    
    .curba5px
    {
        border-radius: 5px 5px 5px 5px;
    }
    
    .curba10px
    {
        border-radius: 10px 10px 10px 10px;
    }
    
    .linea2px
    {
        border-width: 2px;
    }
    
    .piedepagina
    {
        z-index:1; 
        position:Fixed; 
        bottom: 0; 
        width: 100%;
        
    }
    
    .mcontainer
    {
      position:relative;
    }
    .melement{
      position:absolute;
      top: 0; bottom: 0; left: 0; right: 0;
      margin: auto;
      height: 20px; /*requires explicit height*/
    }
    
    /* ========================================================================
       genercos pagina
     ========================================================================== 
     */
     
    .error_input 
    {
        position: relative;
        animation: shake .3s linear;
        animation-iteration-count: 3;
        border-color: #ed1c24;
        color: #ed1c24;
    }
    
    @keyframes shake 
    {
      0%, 100% { left: 0px;}
      20% , 60%{left: 15px;}
      40% , 80%{left: -15px;}
    }
    
    .imagenarticuloscell
    {
        max-height: 110px;
        max-width: 512px;
        object-fit: cover;

    }
    
    .imagenarticulos
    {
        max-height: 200px;
        object-fit: cover;
    }
    
    .imagenarticulospopup
    {
        max-height: 200px;
        max-width: 512px;
        object-fit: cover;

    }
    
    .cuadroproductos
    {
        border-radius: 5px;
        display: inline-block;
        background-color:#FAFAFA;
        position:relative;
        width:260px;
        height:500px;
        margin:10px;
        
        -webkit-box-shadow: 1px 1px 5px 0px rgba(50, 50, 50, 0.75);
        -moz-box-shadow:    1px 1px 5px 0px rgba(50, 50, 50, 0.75);
        box-shadow:         1px 1px 5px 0px rgba(50, 50, 50, 0.75);
        
    }
    
    .cuadroproductoscell
    {
        border-radius: 10px;
        background-color:#F1F1F1;
        position:relative;
        width:155px;
        height:180px;
        margin:5px;
        padding:5px;
        border: 1px solid black;
        border-radius:5px;
    }
    
    .cuadrotiendas
    {
        background-color:#F1F1F1;
        position:relative;
        width:400px;
        height:260px;
        border: 1px solid black;
        padding: 4px;
    }
    
    .sindecoracion
    {
        text-decoration: none;
    }
    
    .imagentiendas
    {
        max-height: 150;
    }
    
    .botonirabajoder
    {
        position:absolute;
        bottom:5;
        right:5;
        height: 40px;
        width: 40px;
        border-radius:20px;
        margin:8px;
    }
    
    .centraimagen
    {
        max-width: 100%;
        max-height: 100%;
        display: block;
        display:block;
        margin:auto;
    }
    
    .llenarhorizontal
    {
        width: 100%;
    }
    
    .lineasimple
    {
        line-height: 1
    }
    
    .llenarvertical
    {
        height: 100%;
    }
    
    .clickable 
    {
      border: 2px solid black;
      height:100px;
      width:100px;
      display:inline-block;
    }
    
    .yapeplim
    {
        font-size: 16px;
    }
    
    /* ========================================================================
       genercos piepagina
     ========================================================================== 
     */
    
    .cross-shadow-ribbon 
    {
      position: absolute;
      background: #FBC000;
      top: 2px;
      padding: 0px 8px 0px 8px;
      margin-left: -9px;
      color: #000000;
      border-radius: 0 2px 2px 2px;
    }
    
    .cross-shadow-ribbon:before 
    {
      content: "";
      position: absolute;
      left: 0px;
      right: 0;
      top: 24px;
      bottom: 0px;
      width: 0;
      height: 0;
      border-top: 3px solid #800707;
      border-left: 3px solid transparent;
    }
    
    /* 
    ========================================================================
    genercos piepagina
    ========================================================================== 
    */
     
    .fondopie
    {
        display: flex;
        background-color:#1A1A1A;
        padding: 10px 40px 10px 40px;
    }
    
    .degradado 
    {
        background: rgb(38,50,56);
        background: linear-gradient(180deg, rgba(38,50,56,1) 0%, rgba(38,50,56,1) 70%, rgba(255,255,255,0) 100%);
    }
    
    .pietitulo
    {
        color:#747474;
    }
    
    .colorblanco
    {
        color:#ffffff;
    }
    
    .pietexto
    {
        color:#90CAF9;
    }
    
    .borderojo
    {
        border-color: #FF0000;
    }
    
    /* 
    ========================================================================
    curvas
    ========================================================================== 
    */
    
    .categoriacontenido
    {
        background: #FFFFFF;
        color:#000000;
        font-weight: bold;
    }
    
    
    .categoriacontenido:hover 
    {
        background: #F01E1E;
        color:#FFFFFF;
    }
    
    .cajaarticulo
    {
        height: 100%;
        background: #FFFFFF;
        color:#000000;
    }
    
    .cajaarticulo:hover 
    {
        height: 100%;
        box-shadow: 2px 3px 5px 1px rgba(0,0,0,0.66);
        -webkit-box-shadow: 2px 3px 5px 1px rgba(0,0,0,0.66);
        -moz-box-shadow: 2px 3px 5px 1px rgba(0,0,0,0.66);
    }
    
    .borderblanco2x
    {
        border: 2px double  rgba(0, 0, 0, 0);
    }
    
    .borderrojo2x 
    {
        border: 2px double  rgba(240, 30, 30, 1.0);
    }
    
    .lineatransparente
    {
        border: 2px double  rgba(0, 0, 0, 0);
    }
    
    .lineatransparente_abajo
    {
        border: 0px 0px 1px 0px double  rgba(0, 0, 0, 0);
    }
    
    .curva5x
    {
        border-radius: 5px 5px 5px 5px;
    }
    
    .curva5xarriba
    {
        border-radius: 5px 5px 0px 0px;
    }
    
    .curva5xabajo
    {
        border-radius: 0px 0px 5px 5px;
    }
    
    .curva5xizquierda
    {
        border-radius: 5px 0px 0px 5px;
    }
    
    .curva5xderecha
    {
        border-radius: 0px 5px 5px 0px;
    }
    
    .curva10xarriba
    {
        border-radius: 10px 10px 0px 0px;
    }
    
    .curva10xabajo
    {
        border-radius: 0px 0px 10px 10px;
    }
    
    .curva25xarriba
    {
        border-radius: 25px 25px 0px 0px;
    }
    
    .curva25xabajo
    {
        border-radius: 0px 0px 25px 25px;
    }
    
    /* 
    ========================================================================
    textos
    ========================================================================== 
    */

    .text_lineas_centro
    {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        line-height: 100%;
        text-align: center;
        -webkit-line-clamp: 2; /* number of lines to show */
        -webkit-box-orient: vertical;
    }

    .text_lineas 
    {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        line-height: 100%;
        text-align: justify;
        text-justify: inter-word;
        -webkit-line-clamp: 2; /* number of lines to show */
        -webkit-box-orient: vertical;
    }
    
    .text_unalineas 
    {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        line-height: 100%;
        text-align: justify;
        text-justify: inter-word;
        -webkit-line-clamp: 1; /* number of lines to show */
        -webkit-box-orient: vertical;
    }
    
    .text_8px
    {
        line-height: 100%;
        font-size: 11px;
    }
    
    
    .text_p 
    {
        text-transform: lowercase;
        line-height: 3; 
    } 
    
    .text_p::first-letter 
    {
        text-transform: uppercase;
        font-size: 3em;
        font-weight: bold;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; letter-spacing: 5px; 
    }
    /* 
    ========================================================================
    bordes
    ========================================================================== 
    */

    .caja_redondeada 
    {
        border: 1px solid #E3E3E3;
        border-radius: 15px;
        overflow: hidden;
    }
    
    .caja_redondeada img 
    {
        border-radius: 15px;
    }
    
    .caja_redondeada_sup 
    {
        border: 1px solid #E3E3E3;
        border-radius: 15px;
        overflow: hidden;
    }
    
    .caja_redondeada_sup img 
    {
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }

    /* 
    ========================================================================
    badge rojo
    ========================================================================== 
    */

    .badge_rojo 
    {
        box-sizing: border-box;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 500px;
        vertical-align: middle;
        /* 1 */
        background: #F01E1E;
        color: #fff !important;
        font-size: 11px;
        /* 2 */
        display: inline-flex;
        justify-content: center;
        align-items: center;
        line-height: 0;
    }
    
    /* 
    ========================================================================
    opciones radio a boton
    ========================================================================== 
    */
    
    .mradio__input
    {
        display:none;
    }

    .radio__label
    {
        padding:8px 14px;
        cursor:pointer;
        font-size: 15px;
        border: 2px solid #DADADA;
        color: #0000000 ;
        transition:background 0.1s;
        font-family:Roboto-Medium;

    }
    
    .mradio__input:checked+.radio__label
    {
        border: 2px solid #F90000;
        color: #000000;
        font-family:Roboto-Medium;
    }
    
    /* 
    ========================================================================
    css para logo animacion cargando
    ========================================================================== 
    */

	.q_logo
	{
		text-align: center;

	}
	
	@keyframes fadeIn{ 
	  from { opacity: 0; } 
	}

	.fade{
	  position: relative;	  
	  font: italic bold 5em/1 Bodoni, serif;
	  color: #555;
	  text-align: center;
	  
	  animation: fadeIn 0.5s infinite alternate;
	}
    
    #circulo {
    	-webkit-animation: rotation 1s infinite linear;
    	transform-origin: 50% 50%;
    }
    
    @-webkit-keyframes rotation {
    	from {
    			-webkit-transform: rotate(0deg);
    	}
    	to {
    			-webkit-transform: rotate(359deg);
    	}
    }
    
    /* 
    ========================================================================
    css para mi modal
    ========================================================================== 
    */
    
    .q_mcontenedor{
        background-color:rgba(0,0,0,0.2);
        display:flex;
        align-items:center;
        justify-content:center;
        position:fixed;
        opacity:0;
        top:0;
        left:0;
        height:100vh;
        width:100vw;
        pointer-events: none;
        z-index: -1;
    }
    
    .q_mcontenedor.show{
        pointer-events: auto;
        opacity:1;
        z-index: 2010;
    }
    
    .q_mcontenido{
        text_align:center;
    }
    
    /* 
    ========================================================================
    mi estilo para camara y subir imagenes
    ========================================================================== 
    */
    .q_contenedor_grid
    {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      grid-gap: 5px;
      grid-auto-flow: dense;
      justify-items: center;
      align-content: center;
      background-color: white;
      border: 1px solid;
      border-color: rgba(0, 0, 0, 0.3);
      border-radius: 5px;
      padding:10px
    }
    
    .q_contenedor_nogrid
    {
        background-color: white;
        border: 1px solid;
        border-color: rgba(0, 0, 0, 0.3);
        border-radius: 5px;
        padding: 10px;
        max-height: 300px;
        height: auto;
        overflow: auto;
    }
    
    .q_cuadrocuadroimg
    {
      width: 120px;
      height: 120px;
      border: 1px solid;
      border-radius: 5px;
      border-style: dashed;
      border-color: rgba(0, 0, 0, 0.3);
      display: inline-flex;

      justify-content: center;
      align-items: center;
    }
    
    .q_cuadrocuadroimg_70
    {
      width: 70px;
      height: 70px;
      border: 1px solid;
      border-radius: 5px;
      border-color: rgba(0, 0, 0, 0.3);
      display: inline-flex;

      justify-content: center;
      align-items: center;
    }
    
    .cuadro img 
    {
      max-width: 100%;
      max-height: 100%;
    }
    
    /* 
    ========================================================================
    sliders y carrusel
    ========================================================================== 
    */

    .q_selected 
    {
      border: 1px solid gray;
      border-radius: 5px;
      box-sizing: border-box;
    }

    @media (max-width: 959px) 
    {
      /* Regla CSS para dispositivos móviles con anulación del estilo */
      .q_selected 
      {
        border: none;
        border-radius: 0;
        box-sizing: content-box;
      }
    }
    
    .q_imagen_articulo_container
    {
        height: 40vh; /* El 33% de la altura del viewport */
        max-height: 40vh; /* El 33% del ancho del viewport */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .q_imagen_articulo_container img 
    {
        max-height: 100%;
        max-width: 100%;
        object-fit: contain;
    }
    
    .q_imagen_slider_container 
    {
        height: 25vh; /* Establece la altura al 100% de la altura de la ventana */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .q_imagen_slider_container img 
    {
        max-height: 25vh; /* Limita la altura al 20% de la altura de la ventana */
        max-width: 100%;
        object-fit: contain;
    }

    @media (max-width: 959px) 
    {

        .q_imagen_slider_container 
        {
            height: 20vh; /* Establece la altura al 100% de la altura de la ventana */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
      /* Regla CSS para dispositivos móviles con anulación del estilo */
        .q_imagen_slider_container img 
        {
            max-height: 20vh; /* Limita la altura al 20% de la altura de la ventana */
            max-width: 100%;
            object-fit: contain;
        }
        
    }
    

    /* 
    ========================================================================
    mi estilo para modal
    ========================================================================== 
    */
    
    .q_overlay 
    {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      z-index: 1010;
      transition: opacity 0.5s ease-in-out;
    }
    
    .q_overlay_hide
    {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 1010;
        transition: opacity 0.5s ease-in-out;
        opacity: 0; /* Establece la opacidad en 0 para que el contenido esté oculto */
    }
    
    .q_contenedor 
    {
        position: absolute;
        top: 0%;
        left: 50%;
        width: 600px;
        max-width: calc(100% - 20px);
        max-height: calc(100% - 20px);
        transform: translate(-50%, -50%);
        background-color: white;
        padding: 20px;
        border-radius: 10px;
        transition: top 0.5s ease-in-out, opacity 0.5s linear;
        box-sizing: border-box;
        margin: 0 auto;
        opacity: 0;
        z-index: 1010;
        overflow-y: auto;
    }
    
    .q_contenedor.subir 
    {
        animation-name: moveUpAnimation;
        animation-duration: 0.5s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        opacity: 1;
    }
    
    @keyframes moveUpAnimation 
    {
        0% 
        {
            transform: translate(-50%, 0);
        }
        100% 
        {
            top: -100%;
        }
    }
    
    .q_cerrar
    {
      position: absolute;
      top: 15px;
      right: 15px;
      cursor: pointer;
    }
    
    .q_cerrar_modal
    {
      cursor: pointer;
    }
    
    .q_pointer 
    {
        cursor: pointer;
        transition: transform 0.3s, box-shadow 0.3s;
    }
    
    .q_pointer:hover 
    {
        transform: scale(1.05);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        background-color: rgb(255, 255, 255,  0.9);
        position: relative;
        z-index: 1;
    }