html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}


.wrong .fa-check {
    display: none;
}

.good .fa-times {
    display: none;
}

.valid-feedback,
.invalid-feedback {
    margin-left: calc(2em + 0.25rem + 1.5rem);
}


/* cards*/

/*.table-card {
    display: flex;
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 10px;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.table-id {
    width: 60px;
    height: 60px;
    background-color: #dee2e6;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    margin-right: 15px;
    flex-shrink: 0;
}

.table-details p {
    margin: 0;
    font-size: 14px;
}

.card-actions {
    display: flex;
    align-items: center; 
    gap: 8px; 
}

.delete-icon {
    color: red;
    font-size: 20px;
    cursor: pointer;
    margin-bottom: 5px;
}

.expand-icon {
    font-size: 18px;
    color: #6c757d;
    cursor: pointer;
}
*/

.table-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #f8f9fa;
    border-left: 5px solid transparent; /* Aquí va el color por estado */
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.status-green {
    border-left-color: #28a745; /* verde */
}

.status-red {
    border-left-color: #dc3545; /* rojo */
}

.status-gray {
    border-left-color: #adb5bd; /* gris */
}

.status-chartreuse {
    border-left-color: #66FF00; /* chartreuse intenso */
}


.table-header {
    display: flex;
    font-weight: bold;
    font-size: 13px;
    color: #6c757d;
    margin-bottom: 3px;
}

    .table-header div {
        flex: 1;
        text-align: center;
    }

        .table-header div:first-child {
            text-align: left;
        }

        .table-header div:last-child {
            text-align: right;
        }

.table-body {
    display: flex;
    align-items: center;
}

.table-id {
    width: 50px;
    height: 40px;
    background-color: #dee2e6;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-right: 10px;
    flex-shrink: 0;
}

.table-details p {
    margin: 0;
    font-size: 14px;
}

.card-actions {
    position: absolute;
    bottom: 5px;
    right: 5px;
    display: flex;
    gap: 10px;
}

.action-icon {
    font-size: 20px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

    .action-icon:hover {
        transform: scale(1.3);
    }


/**Menu */

.nav-link {
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease; /* Transición suave al cambiar el color */
}

    /* Efecto hover */
    .nav-link:hover {
        color: #007bff; /* Cambia el color al pasar el mouse */
        text-decoration: underline; /* Subraya el texto al pasar el ratón */
    }

/* Márgenes entre los ítems */
.nav-item {
    margin-right: 20px;
}

    /* Sombra sutil en los enlaces */
    .nav-item a {
        box-shadow: none; /* Sin sombra para mantener un estilo limpio */
    }

/* Añadir una animación suave en el hover */
.hover-underline-animation {
    position: relative;
}

    .hover-underline-animation::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: #007bff; /* Color del subrayado */
        bottom: 0;
        left: 0;
        transform: scaleX(0);
        transform-origin: bottom right;
        transition: transform 0.3s ease-out;
    }

    .hover-underline-animation:hover::after {
        transform: scaleX(1);
        transform-origin: bottom left;
    }




.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}


.custom-toggler {
    border: 2px solid #66b2ff; /* Borde azul claro */
    border-radius: 5px;
    padding: 8px 10px;
    background-color: transparent; /* Elimina fondo */
    box-shadow: none; /* Elimina sombra al hacer focus */
}

    .custom-toggler:focus,
    .custom-toggler:hover {
        background-color: #e6f2ff; /* Fondo azul claro suave al pasar el mouse */
        border-color: #3399ff; /* Un poco más intenso al hacer hover */
        outline: none;
        box-shadow: none;
    }

    .custom-toggler i {
        color: #0033cc; /* Azul fuerte para el ícono */
        font-size: 1.5rem;
    }


.nav-link.custom-link {
    color: #1e40af; /* Azul índigo (más vivo que text-dark, menos agresivo que el azul fuerte) */
    font-weight: 500;
    transition: color 0.3s ease;
}

    .nav-link.custom-link:hover {
        color: #172554; /* Azul más profundo al pasar el mouse */
        text-decoration: underline;
    }