/* MINIFIER
https://www.cleancss.com/css-minify/
*/

/* <!-- Alineacion vertical: https://blog.logrocket.com/13-ways-vertically-center-html-elements-css/ --> */

/*
<!--
https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-one-element-is-hovered
If the cube is directly inside the container:
  #container:hover > #cube { background-color: yellow; }
  
If cube is next to (after containers closing tag) the container:
  #container:hover + #cube { background-color: yellow; }
  
If the cube is somewhere inside the container:
  #container:hover #cube { background-color: yellow; }
  
If the cube is a sibling of the container:
  #container:hover ~ #cube { background-color: yellow; }
-->
*/

.activoEnHover:hover {
  background-image: none;
  background-color: var(--mivar_color_coluactiva);
}

.activoAhora {
  background-color: var(--mivar_color_coluactiva);
}

.botonIdioma { 
  color: #000; 
  background-color: var(--mivar_color_off);
  border-color: transparent;
}

.botonIdioma:focus {
  /* <!-- box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%); --> */
  box-shadow: 0 0 0 0.25rem var(--mivar_color_coluactiva);
}

.menuIdioma { 
  background-color: var(--mivar_color_off);
  min-width: 7rem; /* <!-- min-width: 10rem; es el valor por defecto de bootstrap --> */
  border: 4px solid var(--mivar_color_coluactiva);
}

.menuIdioma > li > :hover {
  background-image: none;
  background-color: var(--mivar_color_coluactiva);
}

.menuIdioma > li > .dropdown-item-text {
  background-color: var(--mivar_color_coluactiva);
}

.alturaLineaReducida {
  line-height: 1px;
}

.alturaLineaNormal {
  line-height: normal;
}

/* 
<!--
- Uso esta clase (miBtnBadge) para acciones que cambien el contenido de la pagina miBtnBadge)
  como por ejemplo los botones para ordenar un listado
- Para los tooltip con una imagen usare badges (ver el template: generarLinkTema)
-->
*/
.miBtnBadge {
  background-color: var(--mivar_color_background); 
  line-height: 1.3;
  font-weight:750;
  font-size: .800rem;
  border: 1px solid lightgray; 
  border-style: outset;
}

.miBtnBadge:hover {
  background-color: var(--mivar_color_coluactiva); 
}

.miBtnBadgeActivo {
  background-color: var(--mivar_color_coluactiva); 
  cursor: default;
}

.recuadroInfo {
  box-shadow: 0.5rem 0.6em 0.5rem 0 rgb(0,0,0,0.2);
  transition: background-color 1s; /* <!-- Cuando se desactiva el hover --> */
}

.enlaceEnRecuadroInfo {
  color: var(--mivar_color_link);
  text-decoration: underline; 
}

/* 
<!--
https://blog.logrocket.com/guide-word-wrap-overflow-wrap-word-break-css/  
Para evitar overflow, se parten las frases muy largas en cualquier PALABRA
Y si aun asi hay alguna palabra muy larga, separte esa palabra en cualquier LETRA
-->
*/
.partirPalabrasLargas {
  word-wrap: anywhere;
}

.infoExtra {
  color: var(--mivar_color_info_extra);
  text-decoration: none; 
}

.recuadroInfo:hover {
  background-image: none;
  background-color: var(--mivar_color_coluactiva);
  box-shadow: 0 0 0 0;
  transition: background-color 0.5s; /* <!-- Cuando se activa el hover --> */
}

.tablaBorder { 
  border-collapse: separate; 
  border: solid black 1px; 
  border-spacing: 1px 1px; 
  background-color: var(--mivar_color_off);
  font-size:12px; 
}

/* <!-- Usar la clase 'soloConHover' para los elementos a mostrar solo en PC (no en movil) --> */
.nohover .soloConHover {
  display: none;
}

/* <!-- Usar la clase 'soloSinHover' para los elementos a mostrar solo en movil (no en PC) --> */
.sihover .soloSinHover {
  display: none;
}


/* <!-- titulo de los tooltips --> */
.ttTitulo {
  background-color: var(--mivar_color_coluactiva);
}

/* <!-- Para quitar la transparencia de los tooltips --> */
.tooltip.show {
  opacity: 1;
}

/* <!-- contenido (img) de los tooltips --> */
.tooltip-inner {
  color: black;
}