/* ****************** CODIGO_NAVEGACION *********************** */
:root{
    --blanco: #F2F2F2;
    --amarillo: #E6E300;
    --rojo: #8F1416;
    --azul:#335366;
    --oscuro: #111B21;
    --rojo_osucuro: #3E0506;
}
html{
min-height: 100%;
}

/* ****************** CODIGO_NAVEGACION *********************** */
.navegacion_principal, .navegacion_secundaria{
  display: flex;
  align-items: center;
  background-color: #111B21;
  padding: 0px;
  width: 100%;
  height: 60px;
  box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.55);
  position: fixed;
  z-index: 100;
}
.menu, .navegacion_secundaria a{
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
  color: #F2F2F2;
}
.logo, .nav-logo{
  display: flex;
  align-items: center;
  text-decoration: none;
  height: 47px;
  margin: 5px;
}
.span_logo{
  color: #fff;
  font-family: "Hubot Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  font-size: 34px;
  cursor: pointer;
}
#span_logo_1{
  margin-left: 10px;
}
#span_logo_2{
  margin-right: 8px;
  color: var(--rojo);
}
#boton_nav, #boton_nav_sec{
  width: 100px;
  height: 17px;
  padding: 15px;
  margin: 5px 5px 10px 10px;
  border-top-left-radius: 24.5px;
  border-bottom-left-radius: 24.5px;
  border-top-right-radius: 24.5px;
  background-color: #E6E300;
  color: #111B21;
  cursor: pointer;
}
.navegacion_principal .logo{
  margin-left: 10px;
}
#boton_nav:hover, #boton_nav_sec:hover{
  width: 100px;
  height: 17px;
  border-top-left-radius: 24.5px;
  border-bottom-left-radius: 24.5px;
  border-top-right-radius: 24.5px;
  background-color: #8F1416;
  color: #F2F2F2;
}

/* ************** CODIGO_NAVEGACION PRINCIPAL ******************* */
.menu{
  margin: 5px;
  padding: 15px;
}
#nav_principal{
  width: 80%;
  display: flex;
  justify-content: end;
  align-items: center;
  margin-right: 5px;
}
#acceso{
  padding: 10.5px;
  display: inline-flex;
  align-items: center;
  justify-items: center;
}
#span_acceso{
  margin: 0 auto 0 6px;
}
.navegacion_principal{
  display: none;
}

/* ************** CODIGO_NAVEGACION SECUNDARIA ******************* */
.navegacion_secundaria{
  justify-content: space-between;
}
#acceso_secundario{
  padding: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  margin: 5px 10px 5px 5px;
}
.dropdown{
  padding: 0px ;
  display: flex;
  z-index: 4;
  align-items: center;
  justify-content: center;
  width: 74px;
  margin-left: 10px;
}
.dropdown-content{
  background-color: #111B21;
  z-index: 3;
  position: fixed;
  top: -600px;
  left: 0;
  width: 200px;
  height: 210px;
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  justify-content:space-around;
  border-bottom-right-radius: 10px;
  box-shadow: 4px 4px 10px 4px rgba(0,0,0,0.55);
}
.enlace{
  width: 100px;
  height: 17px;
  padding: 15px;
  margin-left: 10px;
}
#menu_nav_sec{
  color: #111B21;
}
#boton_nav_sec:hover #menu_nav_sec{
  color: #F2F2F2;
}
icono_1, #logo_claro_01, #logo_claro_02{
  display: inline;
}
.icono_2, #logo_oscuro_01, #logo_oscuro_02{
 display: none;
}
#icono_logo{
  margin-left: 6px;
}
.navegacion_secundaria .enlace:hover, .navegacion_principal a:hover, .enlace:hover, 
.dropdown:hover, #acceso_secundario:hover, .nav-logo:hover, .logo:hover{
  background-color: #F2F2F2;
  color: #111B21;
  border-radius: 5px;
}
.nav-logo:hover, .logo:hover{
  #span_logo_1{
    color:#000;}
}
.dropdown:hover{
  .icono_1{
    display:none;}

  .icono_2{
    display:inline;}

  .dropdown-content{
    transform:translateY(655px);
    padding-top: 10px;}
}

@media (min-width: 830px){
  .navegacion_secundaria{
    display: none;}

  .navegacion_principal{
    display: flex;
    justify-content: space-between;}
}

/* ****************** CODIGO_INGRESO *********************** */
dialog{
  font-family: 'Roboto', sans-serif;
  width: min(360px, 100%);
  height: 218px;
  border: 0px;
  background-color: #F2F2F2;
  border-radius: 5px;
  box-shadow: 13px 14px 30px 4px rgba(66,80,80,0.97);
}
#titulo_acceso, #titulo_acceso_2{
  color: #650002;
  margin: 3px 0px 24px 0px;
  text-align: center;
  font-size: 25px;
  font-weight: 900;
}
.acceso{
  border: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#acceso_1{
  height: 122px;
  justify-content: space-between;
}
#acceso_2, #acceso_3{
  height: 74px;
  justify-content: center;
}
#acceso_2{
  margin-top: 40px;
  position: relative;
}
#tex_acceso_3{
  text-align: center;
}
#label_clave_log{
  top: 4px;
  left: calc((100% - 83px)/2);
}
.botones{
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}
#botones_3{
  justify-content: center;
}
.boton_acceso{
  width: 85px;
  height: 30px;
  border-radius: 5px;
  border: 1.5px solid #8F1416;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
}
#boton_ingresar_1{
  background-color: #8F1416;
  color: #F2F2F2; 
  font-weight: 700;
  cursor: pointer;
}
#boton_ingresar_1:hover{
  border: 1.5px solid #111B21;
  background-color: #111B21;
  color: #F2F2F2; 
} 
#boton_recuperar_2{
  background-color: #8F1416;
  color: #F2F2F2;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
#boton_recuperar_2:hover{
  border: 1.5px solid #111B21;
  background-color: #111B21;
  color: #F2F2F2; 
} 
#boton_cerrar_1, #boton_atras_2, #boton_atras_3{
  color: #8F1416;
  font-weight: 700;
  cursor: pointer;
}
#boton_atras_3{
  width: 120px;
}
#boton_cerrar_1:hover, #boton_atras_2:hover, #boton_atras_3:hover{
  background-color: #8F1416;
  color: #F2F2F2;
}
.text-acceso{
  display:block;
  margin: 0px auto;
  text-align: center;
  height: 24px;
  border-radius: 12px;
}
#email_acceso, #email_rec{
  width: 244px;
  height: 28px;
  border: solid 1px black;
  border-radius: 8px;
}
.cont_acceso{
  position: relative;
  display: flex;
  width: 244px;
  height: 32px;
}
#recuperar{
font-size: 16px;
font-weight: 700;
color: var(--azul);
}
/* ****************** CODIGO_FOOTER *********************** */
footer{
  grid-row: 3/4;
  background-color: #111B21;
  font-weight: 500;
  font-size: 12px;
  height: 40px;
  width: 100%;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
footer p{
  text-align: center;
}
@media (min-width: 830px){
  footer{font-size: 14px;}
}

/* ****************** CODIGO_INICIO *********************** */

.box-inicio{
  padding: 20px;
  margin: 10px;
  width: calc(100% - 20px);
  max-width: 700px;
  height: auto;
  overflow: auto;
  border: 0px;
  box-sizing: border-box;
  border-radius: 10px;
  color: black;
  background-color: rgba(242,242,242,0.85);
  box-shadow: 13px 14px 30px 4px rgba(66,80,80,0.97);
}
#titulo_inicio{
  font-family: 'Ubuntu', sans-serif;
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  color: #8F1416;
}
#bajada-inicio{
  font-family: 'Ubuntu', sans-serif;
  color: #8F1416;
  font-size: 24px;
  margin-top: 0px;
  text-align: center;
}
.parrafo_inicio{
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-align: justify;
}
@media (min-width: 720px){
  .box-inicio{
    height: 1073px;
  }
}

@media (min-width: 535px){
  #titulo_inicio{
    font-size: 80px;}
}
@media (min-width: 435px) and (max-width: 535px){
  #titulo_inicio{
    font-size: 60px;}
}

/* ****************** CODIGO_CONTACTO *********************** */
.box-contacto, .box-demo{
  padding: 20px;
  margin: 10px;
  width: calc(100% - 20px);
  max-width: 535px;
  border: 0px;
  box-sizing: border-box;
  border-radius: 10px;
  color: black;
  background-color: rgba(17, 27, 33, 0.98);
  box-shadow: 13px 14px 30px 4px rgba(66,80,80,0.97);
}
.box-contacto{
  height: 680px;
}
.box-demo{
  height: auto;
}
#titulo_contacto, #titulo_demo{
  font-family: 'Ubuntu', sans-serif;
  font-size: 40px;
  font-weight: 700;
  margin: 10px auto 30px;
  text-align: center;
  color: #F2F2F2;
}
#form_contacto_padre, #form_registro_padre{
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  display: block;
  justify-content: center;
  align-content: center;
  display: grid;
  grid-template-columns: 100%;
}
#form_contacto{
  width: 100%;
  border: none;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto;
}
#form_contacto legend, #subt_registro{
  font-family: 'Ubuntu', sans-serif;
  padding-bottom: 12px;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  color: #F2F2F2;
}
.cont_error_cont, .cont_error_demo{
  position: relative; 
  margin: 8px 3px 0px 3px;
  box-sizing: content-box;
  display: grid;
  height: auto;
  grid-template-columns: 100%;
  flex-direction: column;
  justify-content: center;
}
.cont_error_demo, #cont_nombre_contacto, #cont_correo_contacto, #cont_fono_contacto{
  grid-template-rows: 32px 23px;
}
#cont_tex_contacto{
  grid-template-rows: 200px 23px;
}
.box_contac, .demo_box{
  position: relative; 
  width: 100%;
  height: 32px;
}
.input_contacto, .input_registro, .input_clave, #clave_acceso{
  height: 32px;
  width: 100%;
  border: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  text-align: center;
  justify-content: center;
  background: white;
}
.input_contacto, .input_registro{
  border-radius: 13px; 
}
#pass_reg_1, #pass_reg_2, #clave_acceso{
  border: solid 1px black;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
#clave_acceso{
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
#label_nombre_cont{
  top: 4px;
  left: calc((100% - 64.91px)/2);
}
#label_correo_cont{
  top: 4px;
  left: calc((100% - 56.91px)/2);
}
#label_fono_cont{
  top: 4px;
  left: calc((115% - 44.47px)/2);
}
#box_cont_tex{
  height: 200px;
  padding-bottom: 23px;
  box-sizing: border-box;
}
#contador_letra{
  position: absolute;
  bottom: 5px;
  right: 10px;
  background-color: white;
  padding: 2px 5px;
  font-size: 12px;
}
#cant_letras{
  margin: 0px;
}
#label_tex_cont{
  top: 12px;
  left: calc((100% - 72.925px)/2);
}
#tex_contacto{
  height: 200px;
  padding: 12px 6px;
}
#fono_contacto, #fono_registro{
  display: flex;
  box-sizing: border-box;
  height: 32px;
}
#fono_contacto_1, #fono_registro_1{
  width: 20%;
  height: 100%;
  margin: 0;
  padding: 5px;
  box-sizing: border-box;
  border: none;
  border-top-left-radius: 13px;
  border-bottom-left-radius: 13px;
  background-color: rgba(204, 204, 204, 1);
}
#tex56{
  margin: 0;
  padding: 4px;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
}
#fono_contacto_2, #fono_registro_2{
  width: 80%;
  border: none;
  padding: 5px;
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
}
.boton_formulario{
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
#enviar_contacto, #enviar_registro{
  height: 32px;
  width: 200px;
  display: block;
  background-color: #E6E300;
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
#enviar_contacto:hover, #enviar_registro:hover{
  background-color: #8F1416;
  color: #F2F2F2;
}
@media (min-width: 567px){
  #form_contacto, #form_registro_padre{
    grid-template-columns: 50% 50%;}

  .box-demo{
    height: 740px;}

  #cont_nombre_contacto, #cont_tex_contacto, #cont_apellido_registro, #cont_nombre_registro, 
  #cont_nombre_farmacia, #cont_planes, .boton_formulario, #subt_registro{
    grid-column: 1/3;}

  #tex_contacto{
    height: 150px;}

  #box_cont_tex{
    height: 150px;}

  #cont_tex_contacto{
    grid-template-rows: 150px auto;}

  #cont_nombre_farmacia, #boton_formulario{
    margin-top: 26px;}

  #fono_contacto_1, #fono_registro_1{
    width: 30%;}

  #fono_contacto_2, #fono_registro_2{
    width: 70%;}

  .box-contacto{
    height: 600px;}
}

@media (min-width: 535px){
  #titulo_contacto, #titulo_demo{
    font-size: 70px;}
}

@media (min-width: 435px) and (max-width: 535px){
  #titulo_contacto, #titulo_demo{
    font-size: 60px;}
}

/* ****************** CODIGO_DEMO *********************** */
#label_nombre_reg, #label_apellido_reg{
  left: calc((100% - 72.925px)/2);
  top: 4px;
}
#label_email_reg, #label_email_rec, #label_email_log {
  left: calc((100% - 56.91px)/2);
  top: 4px;
}
#label_fono_reg{
  left: calc((115% - 44.47px)/2);
  top: 4px;
}
#label_farmacia_reg{
  left: calc((100% - 170.73px)/2);
  top: 4px;
}
#label_clave_1_reg{
  left: calc((100% - 90.72px)/2);
  top: 7px;
}
#label_clave_2_reg{
  left: calc((100% - 180px)/2);
  top: 7px;
}
#label_tratamiento_reg{
  left: calc((100% - 92.8px)/2);
  top: 4px;
}
#label_direccion_reg{
  left: calc((100% - 66.7px)/2);
  top: 4px;
}
#planes{
  cursor: default;
}
#label_planes{
  font-size: 12px;
  left: 8px;
  top: -12px;
}
#label_planes-2{
  display: flex;
  box-sizing: border-box;
  height: 32px;
  width: 100%;
}
#span_plan_int_1{
  font-size: 14px;
  padding: 0px 20px;
}
#span_planes_1{
  display: flex;
  justify-content: center;
  width: 76%;
  background-color: #F2F2F2;
  font-size: 16px;
  color: black;
  border: none;
  padding: 8px 4px;
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
#span_planes_2{
  display: flex;
  justify-content: center;
  width: 24%;
  color: black;
  font-size: 12px;
  font-weight: 700;
  line-height: 13px;
  text-decoration: none;
  margin: 0;
  padding: 9px 6px;
  box-sizing: border-box;
  border: none;
  cursor: pointer;
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
  background-color: rgba(204, 204, 204, 1);
}
.input_reg_int{
  height: 32px;
  padding: 0;
  text-align: center;
  justify-content: center;
  width: 90%;
  border: none;
  padding-right: 10px;
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
}
#cont_clave_1, #cont_clave_2{
  display: flex;
  margin: 3px;
  padding: 0px;
  height: 32px;
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
}
#cont_planes{
  display: none;
}
.boton_ojo{
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  margin: 0;
  border-top-right-radius: 13px;
  border-bottom-right-radius: 13px;
  background-color: rgba(204, 204, 204, 1);
  cursor: pointer;
}
.boton_ojo_log{
  color: black;
  margin: 0;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  background-color: rgba(204, 204, 204, 1);
  cursor: pointer;
}
.boton_ojo{
  height: 20px;
  width: 10%;
  border: none;
  padding: 6px;
}
.boton_ojo_rec, .boton_ojo_log{
  height: 18px;
  padding: 6px 12px;
  border-top : solid 1px black;
  border-right : solid 1px black;
  border-bottom : solid 1px black;
}
#boton_ojo_1:hover, #boton_ojo_2:hover, .boton_ojo_rec:hover, .boton_ojo_log:hover{
  cursor: pointer;
  color: #F2F2F2;
  background-color: #111B21;
}
#genero_registro{
  cursor:pointer;
  }
#nacimiento{
  padding: 0px 15px;
  cursor:pointer;
}
#label_nacimiento_reg{
  left: calc((100% - 182.6px)/2);
  top: 4px;
  padding: 3px 17px;
}
#label_logo{
  display: flex;
  box-sizing: border-box;
  height: 32px;
  width: 100%;
  font-weight: 400;
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
}
#span_img_1{
  display: block;
  width: 30%;
  color: black;
  font-size: 12px;
  line-height: 13px;
  margin: 0;
  padding: 2px 6px;
  box-sizing: border-box;
  border: none;
  border-top-left-radius: 13px;
  border-bottom-left-radius: 13px;
  background-color: rgba(204, 204, 204, 1);
  cursor: pointer;
}
#span_img_1:hover, #span_planes_2:hover{
  cursor: pointer;
  color: #F2F2F2;
  background-color: #111B21;
}
#span_img_2{
  width: 70%;
  background-color: #F2F2F2;
  font-size: 12px;
  color: black;
  border: none;
  padding: 8px 4px;
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
  cursor: context-menu;
}
@media (max-width: 1000px){
  #span_img_1{
    width: 130px;}
  #span_img_2{
    width: 100%;}
}

/* ****************** CODIGO_PLANES *********************** */
#cuerpo_plan{
  grid-template-rows: 77px 68px auto;
}
.box-planes{
  padding: 20px;
  margin: 10px;
  border: 0px;
  border-radius: 10px;
  color: black;
  background-color: rgba(242,242,242,0.85);
  box-shadow: 13px 14px 30px 4px rgba(66,80,80,0.97);
  width: calc(100% - 60px);
  height: auto;
  display: grid;
  grid-template-columns: 2fr 1.5fr 1.5fr 2fr;
  grid-template-rows: auto auto 1fr 1fr;
}
#titulo_plan{
  grid-row: 1 / 2;
  grid-column: 1 / 5;
  font-family: 'Ubuntu', sans-serif;
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  color: #8F1416;
  margin: 20px auto;
}
#p_plan{
  margin: 16px 20px;
  grid-row: 2 / 3;
  grid-column: 1 / 5;
}
.p_plan{
  margin: 0px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}
.label_planes{
  border-radius: 12px;
  border: 3px solid black;
}
#label_plan_0{
  grid-row: 3/5;
}
#label_plan_1{
  grid-column: 2/3;
  grid-row: 3/4;
}
#label_plan_2{
  grid-column: 3/4;
  grid-row: 3/4;
}
#label_plan_3{
  grid-column: 2/3;
  grid-row: 4/5;
}
#label_plan_4{
  grid-column: 3/4;
  grid-row: 4/5;
}
.masc_label{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  box-sizing: border-box;
  cursor: pointer;
}
.titulo_planes{
  height: 46px;
  margin: 0;
  padding: 20px 0px;
  font-size: 20px;
  text-align: center;
}
#tit_plan_0{
  margin: 0;
  padding: 20px 0px;
  font-size: 30px;
}
#val_plan_0{
  text-align: center;
  font-size: 60px;
  font-weight: bold;
  margin: 10px 0px 0px 0px;
}
.val_plan{
  font-size: 30px;
  font-weight: bold;
  margin: 5px 0px 0px 0px; 
  text-align: center;
}
.plan_neto{
  font-size: 12px;
  margin: 0px 0px 10px 0px;  
  text-align: center;
}
#tit_lista_plan0{
  font-size: 20px;
  font-weight: bold;
}
.tit_lista_plan{
  font-size: 16px;
  font-weight: bold;
  margin: 6px 0px;
}
#extras{
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border: 3px solid black;
  grid-row: 3/5;
  grid-column: 4/5;
  justify-content: space-around;
  align-items: center;
}
#total{
  font-size: 40px;
  font-weight: bold;
}
#text_otros{
  font-size: 12px;
  padding: 6px;
}
#titulo_ext_2{
  margin: 10px 0px;
}
#lista_ext{
  margin: 5px 0px 20px 0px;
  padding-left: 20px;
  font-size: 16px;
}
.lista_ext_plan{
  margin: 5px 0px 20px 0px;
  padding-left: 20px;
  font-size: 12px;
}
.t_planes_p{
  width: 100%;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
@media (max-width: 800px){
  .box-planes{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto auto auto}
  #titulo_plan{
    grid-row: 1/2;
    grid-column: 1/3;}
  
  #p_plan{
    grid-row: 2/3;
    grid-column: 1/3;}

  #label_plan_0{
    grid-column: 1/3;
    grid-row: 3/4;}
  
  #label_plan_1{
    grid-column: 1/2;
    grid-row: 4/5;}
  
  #label_plan_2{
    grid-column: 2/3;
    grid-row: 4/5;}
  
  #label_plan_3{
    grid-column: 1/2;
    grid-row: 5/6;}
  
  #label_plan_4{
    grid-column: 2/3;
    grid-row: 5/6;}

  #extras{
    grid-row: 6/7;
    grid-column: 1/3;}     
}

/* ****************** CODIGO_PRODUCTO *********************** */
.cuerpo{
  grid-row: 2 / 3;
  justify-content: flex-end;
  width: 100vw;
  height: auto;
  background-image: url("static/Logo_circulo.png");
  background-size: cover;
}
.box-producto{
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 77px auto;
  padding: 20px;
  margin: 10px;
  border: 0px;
  border-radius: 10px;
  color: black;
  background-color: #e8e8e8;
  box-shadow: 13px 14px 30px 4px rgba(66,80,80,0.97);
  width: calc(100vw - 60px);
  min-height: calc(100vh - 160px);
}
.titulo-general_producto{
  font-family: 'Ubuntu', sans-serif;
  font-size: 40px;
  font-weight: 700;
  color: #8F1416;
  text-align: center;
  margin: 0px 0px 30px 0px;
}
@media (max-width: 1143px){
  .box-producto{
  grid-template-rows: 130px auto;}
}
@media (max-width: 649px){
  .titulo-general_producto{
    font-size: 30px;}

  .box-producto{
  grid-template-rows: 110px auto;}
}
@media (max-width: 501px){
  .titulo-general_producto{
    font-size: 30px;}

  .box-producto{
  grid-template-rows: 140px auto;}
}
@media (max-width: 362px){
  .titulo-general_producto{
    font-size: 30px;}

  .box-producto{
  grid-template-rows: 170px auto;}
}
.check_product{
  display: none;
}
.contenedor_producto{
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  display: grid;
  grid-template-columns: 40% 60%;
  grid-template-rows: 40px auto 60px;
}
.imagen_producto{
  grid-row: 1 / 3;
  padding: 6px;
}
.texto_producto, .cont_titulo_producto{
  padding: 6px 6px 6px 20px;
}
.texto_producto{
  font-family: 'Poppins', sans-serif;
}
.imagen_p, .t_producto_p{
  width: 100%;
  height: 100%;
}
.boton_prod{
  padding-left: 33px;
  padding-right: 33px;
  padding-bottom: 16px;
  padding-top: 16px;
  border-radius: 9px;
  background: #8F1416;
  border: none;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  transition: 0.2s;
  color: #F2F2F2;
  font-family: 'Roboto', sans-serif; 
  font-size: 15px;
  font-weight: bold;
}
.boton_prod:hover{
  background: #3E0506;
  box-shadow: 7px 5px 24px 2px #3E0506;
}
.boton_prod:active{
  transform: scale(0.97);
  box-shadow: 7px 5px 24px 3px #3E0506;
}
.boton_prod span{
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.2s;
}
.boton_prod span:after{
  color: #F2F2F2;
  content: "»";
  position: absolute;
  opacity: 0;
  top: 0;
  right: -15px;
  transition: 0.2s;
}
.boton_prod:hover span{
  padding-right: 15px;
}
.boton_prod:hover span:after{
  opacity: 1;
  right: 0;
}
#botones{
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 60px;
  grid-column: 1 / 3;
}
.check_botones{
  display: none;
}
.icono_botones{
  width: 40px;
  height: 40px;
  background-color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.icono_inter{
  width: 24px;
  height: 24px;
  background-color: #7C7C7C;
  border-radius: 50%;
  text-align: center;
  line-height: 24px;
  cursor: pointer;
}
.numero_icono{
  font-size: 18px;
  font-weight: bold;
  color: #FFFFFF;
}
.icono_botones:hover{
  .icono_inter{
    background-color: #bd081c;}
}
  
  
@media (max-width: 800px){
  .contenedor_producto{
    grid-template-columns: 100%;
    grid-template-rows: 60px 40px auto auto;}
    
  .box-producto{
    min-height: calc(100vh - 160px);
    height: 100%;}

  .cont_titulo_producto{
    padding: 6px;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;}
    
  .texto_producto{
    padding: 6px;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;}
    
  .imagen_producto{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 4;
    grid-row-end: 5;}
    
  #botones{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;}  
}

/* ******************* CODIGO_RESTABLECER CONTRASEÑA ******************** */
#fondo_clave{
  font-family: 'Roboto', sans-serif;
  padding: 0px;
  margin: 0px;
  border: 0px;
  min-height: 100%;
  width: 100%;
  background: linear-gradient(90deg, rgb(8 8 8 / 70%) 0%, rgb(239 239 239 / 70%) 35%, rgb(255 255 255 / 70%) 100%);
  overflow: hidden;
}
.fondo_clave_rec{
  font-family: 'Roboto', sans-serif;
  padding: 0px;
  margin: 0px;
  border: 0px;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(90deg, rgb(8 8 8 / 70%) 0%, rgb(239 239 239 / 70%) 35%, rgb(255 255 255 / 70%) 100%);
  overflow: auto;
}
.cont_rec_general{
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
#titulo_rec{
  color: #8F1416;
  margin: 12px 0px 24px 0px;
  text-align: center;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 18px;
}
.cont_error_clave{
  display: grid;
  height: 100%;
  grid-template-columns: 300px;
  grid-template-rows: 32px auto;
  flex-direction: column;
  justify-content: center;
}
.error, .error_cont, .error_demo{
  visibility: hidden;
  font-size: 11px;
  margin-top: 5px;
  padding: 3px;
  background-color: #00000000;
  height: auto;
  margin-bottom: auto;
  width: auto;
  text-align: center;
  border-radius: 8px;
  color: #F2F2F2;
}
.cont_recuperacion_0{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.cont_imagen_clave{
  display: grid;
  grid-template-columns: 340px auto;
  grid-template-rows: 100%;
  width: 100%;
  height: 100%;
}
.imagen_rec{
  width: 100%;
  max-height: calc(100vh - 112px);
  object-fit: cover;
  overflow: hidden;
}
.cont_recuperacion{
  border: 0px;
  padding: 20px 0px;
  margin: 0px 20px;
  display: grid;
  height: 100%;
  grid-template-columns: 300px;
  grid-template-rows: 80px 80px 120px;
  justify-content: center;
  box-sizing: border-box;
}
#tex_recuperacion{
  text-align: left;
  margin-left: 10px;
}
.cont_input_registro{
  display: flex;
  width: 244px;
  height: 32px;
  padding-left: 28px;
}
.rec_box{
  position: relative; 
  width: 204px;
}
.texto_label{
  position: absolute;
  padding: 3px 4px;
  font-size: 16px;
  font-weight: 400;
  color: black;
  pointer-events: none;
  transition: all 0.3s ease;
  border-radius: 4px;
  background-color: white;
}
#label_clave1, #label_clave2{
  top: 4px;
  left: calc((100% - 90.72px)/2);
}
.eye-icon{
  width: 20px;
  height: 20px;
}
.botones_clave{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.boton_rec_clave{
  background-color: #8F1416;
  color: #F2F2F2; 
  font-size: 11px;
  padding: 10px 5px;
  border-radius: 5px;
  border: 1.5px solid #8F1416;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
}
.boton_rec_clave:hover{
  border: 1.5px solid #111B21;
  background-color: #111B21;
  color: #F2F2F2;
}
.boton_salir_clave{
  text-decoration: none;
  background-color: #FFFFFF;
  color: #8F1416; 
  font-size: 11px;
  padding: 10px 27.3125px;
  border-radius: 5px;
  border: 1.5px solid #8F1416;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
}
.boton_salir_clave:hover{
  border: 1.5px solid #8F1416;
  background-color: #8F1416;
  color: #F2F2F2;
}
@media (max-width: 850px){    
  .imagen_rec{    
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    opacity: 0.7;}

  .cont_imagen_clave{
    grid-template-columns: 100%;} 
}

@media (min-width: 850px){    
  .fondo_clave{
    background: linear-gradient(60deg, rgba(17,17,17,1) 0%, rgba(115,115,115,1) 14%, rgba(208,208,208,1) 27%, rgba(249,249,249,1) 59%);};
}

@media (min-width: 1500px){
  .cont_imagen_clave{
    grid-template-columns: 23% 77%;}
}

/* ****************** CODIGO_REDES SOCIALES *********************** */
#contenedor_red{
  position: fixed;
  bottom: 60px;
  right: 16px;
  margin:0 5px;
  display: flex;
  justify-content: flex-end;
  height: 45px;
}
.fondo{
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  width: 41px;
  height: 41px;
  border-radius: 9px;
}
#redes_sociales{
  position: relative;
  width: 41px;
  height: 41px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 9px;
  border: 2px solid #4d4d4d;
  cursor: pointer;
  transition: all 0.3s;
} 
#redes_sociales .line{
  stroke: #4d4d4d;
}
#cont_redes-sociales{
  position: fixed;
  top: calc(100% - 340px);
  margin:0 5px;
  right: 16px;
  width: 45px;
}
.llenado{
  position: absolute;
  top: auto;
  bottom: 0;
  left: calc(100% - 45px);
  width: 45px;
  height: 0;
  border-radius: 9px;
  background-color: #014707;
}
#cont_2:hover{
  #redes_sociales{
    border: 2px solid #FFFFFF;}  

  #redes_sociales .line{
    stroke: #FFFFFF;}

  .llenado{
    height: 100%;
    transition: all 0.3s ease-in-out;}
}
.line{
  fill: none;
  stroke: #4d4d4d;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.line-top-bottom{
  stroke-dasharray: 12 63;
}
#check_redes_soc:checked + svg{
  transform: rotate(-45deg);
}
#check_redes_soc:checked + svg .line-top-bottom{
  stroke-dasharray: 20 300;
  stroke-dashoffset: -32.42;
}
.lista_redes{
  padding: 0px;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  align-items: center;
}
.contenedor_icono{
  margin: 0 10px;
  position: relative;
}
.tex_icono_redes, .texto_cont{
  position: absolute;
  transform: translateX(-50%);
  color: #fff;
  padding: 6px 10px;
  border-radius: 15px;
  opacity: 0;
  visibility: hidden;
  font-size: 14px;
  transition: all 0.3s ease;
}
.tex_icono_redes{
  top: -10px;
  left: -50px;
}
.texto_cont{
  bottom: 20px;
  left: calc(100% - 90px);
  background-color: #014707;
}
.contenedor_icono:hover .tex_icono_redes{
  visibility: visible;
  opacity: 1;
  top: 6px;
}
#contenedor_red:hover .texto_cont{
  visibility: visible;
  opacity: 1;
  bottom: 10px;
}
.enlace_redes{
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  border-radius: 20%;
  color: #4d4d4d;
  background-color: #ffff;
  transition: all 0.3s ease-in-out;
}
.enlace_redes:hover{
  box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 50%);
}
.icono_red{
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
}
.enlace_redes:hover{
  color: white;
}
.llenado_redes{
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #000;
  transition: all 0.3s ease-in-out;
}
.enlace_redes:hover .llenado_redes{
  height: 100%;
}
.enlace_redes[data-social="facebook"] .llenado_redes,
.enlace_redes[data-social="facebook"] ~ .tex_icono_redes{
  background-color: #3b5998;
}
.enlace_redes[data-social="instagram"] .llenado_redes,
.enlace_redes[data-social="instagram"] ~ .tex_icono_redes{
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.enlace_redes[data-social="telegram"] .llenado_redes,
.enlace_redes[data-social="telegram"] ~ .tex_icono_redes{
  background-color: #0088cc;
}
.enlace_redes[data-social="whatsapp"] .llenado_redes,
.enlace_redes[data-social="whatsapp"] ~ .tex_icono_redes{
  background-color: #075e54;
}

/* ****************** CODIGO_MENSAJES *********************** */
#msg_container_e, #msg_container_m, #msg_container{
  z-index: 9000;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background-color: rgba(0,0,0,0.8);
}
#msg_container_e, #msg_container_m{
  display: none;
}
#mensajes, #msg_error{
  z-index: 100;
  font-family: 'Roboto', sans-serif;
  width: min(380px, 100%);
  border: 0px;
  text-align: center;
  background: var(--blanco);
  padding: 30px;
  margin: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
#titulo_msg, #titulo_msg_error{
  font-size: 2em;
  margin-bottom: 30px;
  margin-top: 5px;
}
#titulo_msg_error{
  color: var(--rojo);
}
#titulo_msg{
  color: #014707;
}
#lista_msg, #parrafo_msg, #lista_msg_error, #parrafo_msg_error{
  margin-bottom: 40px;
  color: var(--oscuro);
  list-style-type: none;
  padding: 0;
}
#botones_msg, #botones_msg_error{
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
#boton_msg, #boton_msg_error{
  height: 30px;
  border-radius: 5px;
  text-transform: uppercase;
  font-weight: 700;
  width: 120px;
  cursor: pointer;
}
#boton_msg_error{
  border: 1.5px solid #8F1416;
  color: #8F1416;
}
#boton_msg{
  border: 1.5px solid #014707;
  color: #014707;
}
#boton_msg_error:hover{
  background-color: #8F1416;
  color: #F2F2F2;
}
#boton_msg:hover{
  background-color: #014707;
  color: #F2F2F2;
}

/* ******************  CODIGO_BARRA DE CARGA  *********************** */
#cargando{
  height: 100%;
  width: 100vw;
  position:absolute;
  background-color: rgba(0,0,0,0.8);
  z-index:9999;  
  display: none;
  justify-content: center;
  align-items: center;
}
#barra_progreso{
  position: absolute;
  width: 12rem;
  height: 12rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
#icono_carga{
  color: white;
  width: 16rem;
  height: 16rem;
  animation: movimiento 4s linear 0;
}
#logo_farmacia{
  width: 8rem;
  height: 8rem;
}
#contenido, #contenido img{
  height: 100%;
  width: 100%;
}
@keyframes movimiento{
  0%{transform: rotate(0deg);}
  6.25%{transform: rotate(0deg);}
  18.75%{transform: rotate(90deg);}
  31.25%{transform: rotate(90deg);}
  43.75%{transform: rotate(180deg);}
  56.25%{transform: rotate(180deg);}
  68.75%{transform: rotate(270deg);}
  81.25%{transform: rotate(270deg);}
  93.75%{transform: rotate(360deg);}
  100%{transform: rotate(360deg);}
}

/* ****************** CODIGO_ERROR 404 Y 500 *********************** */
#body_404, #body_500{
  font-family: Arial, sans-serif;
  color: var(--oscuro);
  height: 100vh;
  margin: 0;
}
#fondo_404, #fondo_500{
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.8);
}
#container_404, #container_500{
  width: min(400px, 100%);
  text-align: center;
  background: var(--blanco);
  padding: 30px;
  margin: 10px;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
#titulo_404, #titulo_500{
  font-size: 2em;
  margin-bottom: 40px;
  color: var(--rojo);
}
#mensaje_404, #mensaje_500{
  margin-bottom: 60px;
  color: var(--azul);
}
#boton_404, #boton_500{
  display: inline-block;
  padding: 10px 20px;
  color: var(--blanco);
  background-color: var(--rojo);
  text-decoration: none;
  border-radius: 4px;
}
#boton_404:hover, #boton_500:hover{
  background-color: var(--oscuro);
}