@import url('../font/Orbitron/css.css');
@import url('../font/Incompleeta/css.css');
@import url('../node_modules/@fortawesome/fontawesome-free/css/all.min.css');

/* importaciónes de componentes*/
@import url('./components.css');

/* Definiciones de variables */
:root {
  --color-primario: #2196F3;
  --color-secundario:#1b233d;
  --color-solid: #fff;
  --color-primario-lite: #17d4fe;
  --color-dark:rgb(26, 23, 23);
}

/* Principal.css */
*{
  user-select: none;
}

html,
body{
    background-color: #ffffff00;
    /* background-color: #353535; */
    font-family: Orbitron;
    overflow: hidden;
}
iframe {
    border: none;
    width: 100%; /* Ajusta el iframe al ancho del contenedor */
    height: 100%; /* Ajusta la altura del iframe al 100% del contenedor */
}
.hidden {
  display: none;
}

.expanded {
  width: 100%;
  border: none;
}

.visible {
  display: block;
  opacity: 1;
}

.hidden {
  display: none;
}

#backgroundWin{
  background-color: transparent;
  position: absolute;
  width: 100%;
  height: 100%;
}

/* ventana flotante */
.draggable {
    position: absolute;
    display: none;
    width: 300px;
    height: 200px;
    background-color: #f1f1f1;
    border: 1px solid #ddd;
    padding: 10px;
    cursor: move; /* Cambia el cursor cuando se pasa sobre el elemento */
}
.header-transparente,
.header {
    background-color: var(--color-primario);
    color: #fff;
    padding: 0;
    cursor: move;
    width: 0;
    height: 0;
}
.header-all{
  cursor: auto;
}
.header-transparente{
    background-color: #f1f1f100;
}
.header-circle {
    background-color: #17D4FE;
    color: #fff;
    cursor: move;
    border-radius: 100%;
    width: 5px;
    height: 5px;
    padding: 5px;
    position: absolute;
    top: 5px;
    left: -12px;
    box-shadow: 
                0 0 5px rgba(255, 255, 255, 0.7), /* Sombra blanca clara */
                0 0 10px rgba(255, 255, 255, 0.5), /* Sombra blanca menos intensa */
                0 0 15px rgba(255, 255, 255, 0.3); /* Resplandor blanco más suave */
}

.gadget-clock>p>iframe{
    height: 90px;
}

.draggable-free {
    display: none;
    position: absolute;
    width: 300px;
    height: 200px;
    background-color: #f1f1f100;
    border: none;
    padding: 0;
    cursor: move;/* Cambia el cursor cuando se pasa sobre el elemento */
    width: 0;
    height: 0; 
}
.contenedor-draggable{
    border: solid 1px #ddd;
    border-radius: 4px;
    background-color: #000000af;
    width: 110%;
    height: 122%;
    display: block;
    margin: 0 auto;
    cursor: auto;
    margin-top: -5%;
    margin-left: -5%;
}
.contenedor-draggable-all{
  border: solid 1px #ddd;
  border-radius: 4px;
  background-color: rgb(40 42 54 / 80%);
  width: 104%;
  height: 103%;
  display: block;
  margin: 0 auto;
  cursor: auto;
  margin-top: 0%;
  margin-left: -2%;
}

.gadget-clock{
    width: 390px;
    height: 120px; 
}

.border-bottom{
    padding-bottom: 0px;
    border-bottom: solid 2px #ffff;
}

/* tooltip */
.has-tooltip {
  position: relative;
}

.has-tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%; /* Position the tooltip above the button */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 14px;
  z-index: 10;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s;
}

.has-tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%; /* Position the tooltip above the button */
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #333 transparent;
  z-index: 10;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s;
}
/* modal */

.modal-card-head,
.modal-card-foot {
  justify-content: center; /* Centrar los botones */
  text-align: center;
}
.modal-card-foot .button {
  margin: 0 10px; /* Espacio de 20px entre los botones (10px a cada lado) */
}

@supports not (selector(::-webkit-scrollbar-thumb)) {
    .scroll {
      scrollbar-color: var(--scroll-thumb-color, grey) var(--scroll-track, transparent);
      scrollbar-width: thin;
    }
  }
  .scroll::-webkit-scrollbar {
    width: var(--scroll-size, 10px);
    height: var(--scroll-size, 10px);
  }
  .scroll::-webkit-scrollbar-track {
    background-color: var(--scroll-track, transparent);
    border-radius: var(--scroll-track-radius, var(--scroll-radius));
  }
  .scroll::-webkit-scrollbar-thumb {
    background-color: var(--scroll-thumb-color, grey);
    background-image: var(--scroll-thumb, none);
    border-radius: var(--scroll-thumb-radius, var(--scroll-radius));
  }
  .scroll-1 {
    --scroll-size: 10px;
    --scroll-radius: 10px;
    --scroll-track: rgb(0 0 0 / 40%);
    --scroll-thumb-color: #dfdfdf;
  }