main {
    flex: 1;  /* Hace que el main ocupe todo el espacio disponible, empujando el footer hacia abajo */
    box-sizing: border-box;  /* Incluye el padding en el tamaño total */
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;
}


.btn-container-v {
    display: flex;
    flex-direction: column; /* 🔴 Hace que los botones se ubiquen en columna */
    align-items: center; /* 🔴 Centra los botones en el eje horizontal */
    margin: 20px auto;
    gap: 15px;
    width: max-content;
}

.btn-container-v .btn {
    width: 100%; /* 🔴 Todos los botones tendrán el mismo ancho */
}

.btn-container {
    display: flex;
    justify-content: center; /* Centra el botón o botones horizontalmente */
    margin: 20px 0; /* Solo margen vertical */
    gap: 15px; /* Espacio entre botones si hay más de uno */
}





/* Estilo para eliminar el borde de enfoque del botón */
.btn:focus {
    outline: none;  /* Elimina el contorno azul */
    box-shadow: none;  /* Elimina cualquier sombra que Bootstrap pueda aplicar */
}

body {
    min-height: 100vh;
    /* Otros estilos globales */
}

/* Estilo general del footer */
footer {
    display: flex;
    flex-direction: column;
    /* Coloca las zonas una encima de la otra */
    background-color: var(--primary-color); /* Toma el color base */
    /*  filter: brightness(1.1);          /* Aclarar un 50% */

    /* Transparencia */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}



/* Zona del Dock */
footer .dock {
    display: flex;
    justify-content: space-evenly;
    /* Espaciado uniforme entre los elementos */
    align-items: center;
    height: 60px;
    /* Altura del Dock */

    width: 100%;
    /* Asegura que el Dock ocupe todo el ancho de la pantalla */
    background-color: transparent;
    /* Fondo transparente */
    box-sizing: border-box;
    /* Incluye padding y border dentro del ancho */
}

/* Ajustes para los enlaces del Dock */
footer .dock a {
    display: flex;
    flex-direction: column;
    /* Coloca el texto debajo del icono */
    align-items: center;
    /* Centra el contenido horizontalmente */
    text-decoration: none;
    /* Elimina el subrayado */
    color: #666;
    /* Color del texto */
    font-size: 12px;
    /* Tamaño del texto */
    text-align: center;
    /* Centra el texto y el icono en su espacio */
}

/* Estilo para los iconos dentro del Dock */
footer .dock a .material-symbols-outlined {
    font-size: 24px;
    /* Tamaño del icono */
    color: #333;
    /* Color del icono */
}

/* Espaciado entre icono y texto */
footer .dock a span:nth-child(2) {
    margin-top: 5px;
    /* Espacio entre el icono y el texto */
}

/* Hover para los enlaces del Dock */
footer .dock a:hover {
    color: #000;
    /* Cambia el color del texto al pasar el cursor */
}

footer .dock a:hover .material-symbols-outlined {
    color: #000;
    /* Cambia el color del icono al pasar el cursor */
}

/* Zona del texto */
footer .footer-info {
    height: 36px;
    /* Mantén la altura del footer existente */
    display: flex;
    /* Flexbox para centrar */
    align-items: center;
    /* Alinear verticalmente */
    justify-content: center;
    /* Centrar horizontalmente */
    color: #666;
    font-size: 14px;
    /* Tamaño del texto */
    background-color: rgba(255, 255, 255, 0.2);
    /* Igual al diseño existente */

}

footer .footer-info p {
    margin: 0;
    color: #666;
    /* Elimina los márgenes por defecto */
}

.circle-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.1); /* Fondo translúcido */
    /* Fondo translúcido */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
    /* Sombra suave */
    margin-top: -40px;
    /* Margen superior */
}

.circle-icon span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.table-info select,
.table-info input {
    display: inline-block;
    width: 100%;
    height: 39px;
    box-sizing: border-box;
    border:1px solid lightgrey;        /* sin borde */
}

/* Input de fecha ajustable dentro de la celda */
.table-info input[type="date"]{
    height:39px;
    line-height:39px;
    box-sizing:border-box;
    border:none;
    outline:none;
    background:#fff;
}


/* MÓVIL: solo lo que necesite (auto) */
@media (hover:none) and (pointer:coarse){
  .table-info input[type="date"]{
    width:auto;
  }
}

/* ESCRITORIO: rellena la celda al 100 % */
@media (hover:hover) and (pointer:fine){
  .table-info input[type="date"]{
    width:100%;
  }
}

/* redondea solo los labels de la 2.ª columna */
.table-info tr td:nth-child(2) label{
    border-radius:6px;   /* ajusta el valor a gusto */
}

.table-info td {
    vertical-align: middle;
}

.iti {
    width: 100%;
  }

.table-info input[type="checkbox"] {
    width: 36px;
    height: 36px;
}
.dock a {
    cursor: pointer;
  }
  
  .dock .circle-icon {
    cursor: pointer;
  }
  
  .dock .material-symbols-outlined {
    cursor: pointer;
  }
  .dock a,
  .dock .circle-icon,
  .dock .material-symbols-outlined {
    user-select: none; /* Evita selección de texto */
    -webkit-user-select: none; /* Para Safari */
    -ms-user-select: none; /* Para IE */
    touch-action: manipulation; /* Mejora el rendimiento táctil */
  }
  
  .dock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  
    padding: 12px;
    min-width: 72px;
    min-height: 72px;
    text-align: center;
  
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  
  .circle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #eee; /* si quieres mostrarlo como círculo */
    margin-bottom: 4px;
    pointer-events: auto; /* ✅ Ahora sí recibe clics */
  }
  .dock a:focus {
    outline: none !important;
    box-shadow: none !important;
}