
html {
    background: rgb(28, 42, 57) url('../img/logo2-mini-23.png');
    
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
  }

body, html{
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    
}
main {
    flex: 1;
}
footer {
    background-color: #091221;
    color: #11673c;
    text-align: center;
    max-height: 30%;
    margin-top: 100px;
    padding-top: 10rem;
    
    position:  fixed; /* Fija el pie de página en la parte inferior */
    bottom: 0;
    width: 100%;
    flex: auto;
}
.espaciador {
    height: 100px; /* Espacio reservado para el pie de página */
    flex: 0; /* No crecerá ni se encogerá */

}
input, textarea, select {
    background-color: #000000; /* Fondo oscuro */
    color: white; /* Texto claro */
    border: 1px solid #5490ff; /* Bordes más visibles */
    border-radius: 8px;
    padding: 10px;
}
.main-container{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;    
}
.main-container > .login {
    width: 100%;
    padding: 20px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    max-width: 400px;
    min-width: 300px;
}
.div-contenedor{ 
    
    color: #e0e0e0;
    background-color: #1a212b;
    width: 100%;
    padding: 5px;  
    border: 1px solid #526e95;
    border-radius: 5px;    
}

.tabla-contenedor {
  width: 90%;              /* O un ancho fijo como 800px */
  margin: 0 auto;          /* Centra horizontalmente */
  padding: 2rem;
  overflow-x: auto;
}
.tabla-contenedor table {
  margin-left: auto;
  margin-right: auto;
  border-collapse: separate;     /* Impide que se colapsen los bordes */
  border-spacing: 0.5rem;        /* Espacio entre celdas */
}
.tabla-contenedor th,
.tabla-contenedor td {
  padding: 0.75rem 1rem;         /* Espaciado interno en celdas */
  border: 1px solid #6d8dbb;     /* Bordes individuales por celda */
  background-color: #26303f;     /* Color de fondo más oscuro */
  color: #f0f0f0;                /* Texto claro para contraste */
  border-radius: 4px;            /* Bordes redondeados por celda */
}

form {
    background-color: #202731; /* Un tono oscuro */
    padding: 20px; /* Para que no quede pegado a los bordes */
    border-radius: 8px; /* Bordes redondeados */
    border: 1px solid #014492;
}
.form-inline{
	display: inline-flex;
}

.input-contenedor{
    background-color: #0e2243;
    color: #01ff80;
    width: 100%;
}
.fila-check-option {
    display: flex;
    align-items: center; /* Alinea checkbox y input en la misma línea */
    gap: 40px; /* Espacio entre checkbox y input */
    margin-bottom: 10px; /* Espaciado entre filas */
    width: 80%;
    background-color: #0e2243;
    color: #05e173;
}
.radio-large {
    transform: scale(1.5); /* Aumenta el tamaño del radio */
    margin-right: 10px; /* Separa el radio del input */
    color: #f5f5f5;

}
@font-face {
    font-family: 'SevenSegment';
    src: url('../font/7_Segment.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
.clock-time {
    font-family: "SevenSegment";
    font-size: 60px;
    font-weight: bold;
    color: #08b61c; /* Cambia el color si deseas */
    text-decoration: none; /* Para quitar el subrayado */
}
@font-face {
    font-family: 'Latinbeauty';
    src: url('../font/latinbeauty.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-size: 28;
}

.custom-link {
    font-family: "Latinbeauty", latinbeauty;
    font-size: 60px;
    font-weight: bold;
    color: #5485e0; /* Cambia el color si deseas */
    text-decoration: none; /* Para quitar el subrayado */
    
}

.custom-link:hover {
    color: #5ff0fb; /* Cambia el color al pasar el mouse */
}
.pie-icon {
    display: flex;
    /*align-items: center; /* Alinea verticalmente icono y texto */
    color: #656251 !important; /* Cambia el color a un tono naranja */
}
.pie-icon:hover {
    color: #fdbe66 !important; /* Cambia a rojo oscuro al pasar el mouse */
}
.menu-list {
    list-style-type: none;
    padding-left: 0;
}

.menu-list li {
    margin-bottom: 10px; /* Espacio entre elementos verticales */
   
}

.menu-list a {
    display: flex;
    align-items: center; /* Alinea verticalmente icono y texto */
}

.menu-list i {
    margin-right: 8px; /* Espacio entre el icono y el texto */
}
.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
    border: #ff8f8f;
    border-width: 5px;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 150px;
    background-color: rgb(55, 55, 60);
    color: #9597ff;
    font-size: x-small;
    text-align: center;
    padding: 5px;
    border-radius: 5px;
    
    /* Posición */
    position: absolute;
    z-index: 1;
    bottom: 100%; 
    left: 50%;
    transform: translateX(-50%);
    
    /* Animación */
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


/* navar de navegacion ajuste automático segun el tema del navegador */
@media (prefers-color-scheme: dark) {
    .navbar {
      background-color: #263238; /* blue-grey darken-4 */
      color: rgb(97, 135, 206);
    }
    .navbar a,
    .navbar .navbar-link {
      color: rgb(108, 167, 255) !important;
    }
  }
  
@media (prefers-color-scheme: light) {
    .navbar {
      background-color: #f5f5f5; /* color claro */
      color: #667686;
    }
    .navbar a,
    .navbar .navbar-link {
      color: #111 !important;
    }
  }

  /* temas claro y oscuro en combinacion con js fn toggleDarkMode() */
  /* Tema oscuro */
body.dark-mode {
    background-color: #121212;
    color: #f5f5f5;
  }
  
  /* Ejemplo para navbar */
  body.dark-mode .navbar {
    background-color: #1f1f1f;
  }
  
  body.dark-mode .navbar-item,
  body.dark-mode .navbar-link {
    color: #68b6ff !important;
  }
 /* imagen upload vista preliminar */ 
 #preview-image {
  width: 150px;
  height: 150px;
  object-fit: cover; /* Recorta proporcionalmente */
  border: 1px solid #539eff;
  border-radius: 8px;
}   

  /* añadir reglas para .card, .table, etc. según tu diseño */
  label[contenteditable="true"] {
    outline: 1px solid #2a2b2c2f;
    border-radius: 4px;
    background-color: rgba(0, 123, 255, 0.1);
    padding: 2px 4px;
  }
  label[contenteditable="true"]:hover {
    outline: 1px solid #79c0ff;
    background-color: rgba(90, 120, 153, 0.2);
  }
   card de l
  .mi-card {
    border-radius: 9px;
    width: 60%;
    height: auto;
    padding: 1rem;
    margin: 1rem auto;
    background-clip: padding-box;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
    font-family: 'Segoe UI', sans-serif;
  }
  .mi-card:hover {
    transform: scale(1.01);
  }
  .mi-card.info {
    border: 2px solid #209cee;         /* Bulma info */
    background-color: #209cee22;
    color: #209cee;
  }
  .mi-card.link {
    border: 2px solid #202aee;         /* Bulma link */
    background-color: #202aee22;
    color: #202aee;
  }
  
  .mi-card.warning {
    border: 2px solid #ffdd57;         /* Bulma warning */
    background-color: #ffdd5722;
    color: #c37e00;
  }
  
  .mi-card.danger {
    border: 2px solid #ff3860;         /* Bulma danger */
    background-color: #ff386022;
    color: #b30023;
  }
  
  .mi-card.success {
    border: 2px solid #23d160;         /* Bulma success */
    background-color: #23d16022;
    color: #107e37;
  }
  .mi-card .mdi {
    position: absolute;
    top: 1rem;
    right: 1rem;
  }
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  @keyframes pulse {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.2);
      opacity: 0.55;
    }
  }
  
  .icon-spin {
    animation: spin 2s linear infinite;
  }
  
  .icon-pulse {
    animation: pulse 2.5s ease-in-out infinite;
  }
  
  