/* ====== Estilos generales ====== */
abbr{
	 text-decoration: none;
	border-bottom: none;
}
body {
  margin: 0;
  font-family: Verdana, Tahoma, sans-serif;
  background-color: #f5f5f5;
}
.descuentos{
	width:100%;
	border-radius:5px;
	border:none;
	background-color:cyan;
	font-family:tahoma, verdana;
	font-size:12px;
    text-align: center;
	padding:5px;
}

#buscador_input_p
	{
		background-color:transparent;
		font-family:Tahoma,Verdana;
		font-size:17px;
		font-weight:bold;
		border:none;
		outline:none;
		color:white;
		font-weight:bold;	
		width:70%;
		
	}

/* ====== Cabecera ====== */


#logo_p {
  width: 110px;
  margin-top:50px;
}

#logo_cont{
	grid-row:1/3;
}
#barraSupCont{
	grid-column:2;
	grid-row:1;
	height:40px;
	justify-self: end; 
}

#barraSuperior_p {
  display: flex;
  gap: 15px;
}
.mdayuda{
	width:100%;
	height:90px;
	border:solid 1px gray;
	border-radius:5px;
	align-content:center;
	
	
}
 
@keyframes pulsoTexto {
    0%, 100% {
        text-shadow:
            0 0 2px rgba(0,170,255,0.2),
            0 0 5px rgba(0,170,255,0.2);
    }

    50% {
        text-shadow:
            0 0 8px rgba(0,170,255,0.8),
            0 0 16px rgba(0,170,255,0.6),
            0 0 24px rgba(0,170,255,0.4);
    }
}

/* Dropdown */
.dropdown {
  position: relative;
}
.dropbtn {
  background: transparent;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-botones{
	background-color: black;
	color:white;
	font-family:Verdana, Tahoma, San Serif;
  font-size: 12px;
  font-weight:bold;
  cursor:pointer;
  border: solid red 1px;
  border-radius:5px;
  margin:3px;
  height:30px;
  width:150px;
}
/* Variante de botones dentro del dropdown */
.dropdown-ahref{
  display:inline-block;
  background-color: black;
  color: white;
  font-family: Verdana, Tahoma, sans-serif;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  border: solid red 1px;
  border-radius: 5px;
  margin: 3px;
  height: 30px;
  width: 150px;
}
.dropdown-ahref a{
  display:inline-block;
  background-color: black;
  color: white;
  font-family: Verdana, Tahoma, sans-serif;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  border: solid red 1px;
  border-radius: 5px;
  margin: 3px;
  height: 30px;
  width: 150px;
}
.dropdown-content_p {
  position: absolute;
  background: black;
  min-width: 150px;
  z-index: 1111111;
  display:none;
  right:0px;
}
.dropdown-content_p a,
.dropdown-content_p button {
  display: block;
  color: white;
  background: transparent;
  font-family:tahoma, verdana;
  text-align: center;
  padding-top:10px;
  width: 100%;
  height:25px;
  cursor: pointer;
  text-decoration:none;
}
.dropdown-content_p a:hover,
.dropdown-content_p button:hover {
  background: red;
}


/* ====== Patch Dropdown ====== */

/* Botón principal */
.dropbtn {
  font-family: Tahoma, Verdana;
  background-color: transparent;
  color: gray;
  font-size: 15px;
  border: none;
  cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
  color: white;
}





/* Clase que activa el menú */
.show {
  display: block;
}


/* Buscador */
#buscador_display {
    background: black;
  border: 1px solid gray;
  border-radius: 8px;
  padding: 5px;  
  max-width: 600px;
  
  margin:0 auto;
  height:45px;
  grid-column:2;
  grid-row:2;
}
#buscador_input {
  flex: 1;
  background: transparent;
  border: none;
  color: white;
  font-size: 16px;
  outline: none;
}

#fondo_b{
	display:grid;
	grid-template-columns:1fr;
	align-content:center;
	padding:10px;
	background-color:red;
	
}
/* ====== Card producto ====== */
#card_producto_b {
  background: white;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  align-content:center;
  padding:10px;
  
  
}
@media (min-width: 1000px){
 #card_producto_b{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr; /* 3 columnas */
  gap:10px;
  }
  #boton_menu{
	  display:none;
  }

  
  #cabecera_b{
	  background-color:black;
	  display:grid;
    grid-template-columns: 1fr 6fr;
	grid-template-rows: 1fr 1fr 1fr;
   justify-items: center;
   align-items:center;
  }
  
  
  
}
@media (max-width: 1000px){
 #card_producto_b{ 
   height:1000px;
  }

  #cabecera_b{
	  background-color:black;
	   display:grid;
	   height:190px;
	  grid-template-columns: 2fr 3fr;
	  grid-template-rows: 1fr 1fr 1fr;
	    justify-items: center;
		align-items: center;
  }
  #logo_p_a{
	  grid-row:2/3;
  }
  
  #boton_menu_form{
	  grid-column:2;
	  grid-row:2;
	  grid-column: 2/10;
  }
 
}




#imgCatalogo {
  width: 100%;
  border-radius: 5px;
}
#card_producto_titulo {
  text-align: center;
  font-size: 20px;
  margin: 10px 0;
  max-width:320px;
}
#descripcion {
  font-size: 14px;
  line-height: 1.3;
}

/* Donar */
#marcodesc {
  border: 1px solid gray;
  border-radius: 10px;
  margin-top: 10px;
  height:50px;
  text-align:center;
  
}

/* ====== Catálogo en grid ====== */
.bloque_de3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin: 20px;
}
.card_catalogo {
  background: white;
  border-radius: 5px;
  padding: 20px;
  text-align: center;
  box-shadow: -3px 3px 5px rgba(0,0,0,0.2);
}
.card_catalogo:hover {
  transform: translate(0, -1px);
  box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.8);
}

/* ====== Responsividad ====== */
@media (max-width: 768px) {

  #barraSuperior_p {
    flex-wrap: wrap;
  }
  #buscador_display {
    max-width: 90%;
  }
  #card_producto {
    width: 95%;
  }
  #card_producto_titulo {
    font-size: 16px;
  }
  #descripcion {
    font-size: 12px;
  }
}

/* Si la pantalla es menor a 1000px, ocultar */
@media (max-width: 1000px) {
  #cont_0 {
    display: none;
  }
}

/* Contenedor que envuelve la imagen */
#cont_1 {
  display: grid;
  justify-content: center; /* centra horizontal */
  align-items: center;     /* centra vertical si hay altura fija */
  text-align: center;      /* alternativa simple */
  
}

/* Imagen canvases */
.canvases_p {
  display: block;          /* asegura que se comporte como bloque */
  margin: 0 auto;          /* centra horizontalmente */
  width:260px;
  height:260px;
  border:solid 1px gray;
  border-radius:10px;
}
#butDescargaP
		{
								
				height:80px;				
				border:none;
				cursor:pointer;
				font-family:tahoma, verdana;
				font-weight:bold;
				font-size: 11px;				
				color: white;			
				text-decoration:none;
				border-radius:5px;
				border-width:0px;						
				background-size: 35px 35px;
				background-position: 28px 5px;
				background-color: green;
				background-repeat: no-repeat;
				 vertical-align: bottom;

		}
#butDescPDF
		{
	cursor: pointer;
				height:50px;
				border:none;
				cursor:pointer;
				font-family:tahoma, verdana;
				font-weight:bold;
				font-size: 15px;				
				text-decoration:none;
				border-radius:5px;
				border-width:0px;
				background:url('../../img_sitio/pago-pdfymp.svg');					
				background-size: 298px 44px;
				background-position:center;
				background-color: green;
				background-repeat: no-repeat;
				
				color:white;
				padding:0px;
				display:block;
				margin:0 auto;
				margin-top:10px;
				width:100%;
				
				
		}
#butOtrasOpciones{
	height:30px;
	border-radius:5px;
	border:none;
	background-color:rgb(0,200,0);
	color:white;
	font-family:verdana;
	font-weight:bold;	
	display:block;
				margin:0 auto;
				margin-top:10px;
				width:100%;
	
	
}
#menu_opciones_p{
	z-index: 99999;
	grid-column: 2;
	grid-row: 3;
	margin: 0 auto;
}
.celda{
	width:98px;
	height:60px;
	border:1px solid gray;
	border-radius:5px;
	background-color:lavender;
	margin:5px;
}
.dwnl{
	font-family:tahoma, verdana;
	font-weight:bold;
	color:black;
	font-size:12px;
}
.dwnl2{
	font-family:tahoma, verdana;
	font-weight:bold;
	color:green;
	font-size:25px;
}
#butConfiabilidad
		{
				
				background-size: 35px 35px;
				background-repeat: no-repeat; 
				background-position: 15px center;
				width:70px;
				height:50px;
				border:none;
				cursor:pointer;
				font-family:Tahoma,Verdana;
				font-weight:bold;
				font-size: 15px;				
				color: white;			
				text-decoration:none;
				border-radius:5px;
				border-width:0px;
				padding-left: 50px;
		}
#consulta{
	font-family:tahoma, verdana;
	font-size:13px;
	font-weight:bold;
	text-decoration:none;
}
#mesadeayuda{
			display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		justify-items: center;
		align-items:center;
		gap:10px;
		margin-top:5px;
		}