.topbar {
    min-height: 40px;
}

/*
|--------------------------------------------------------------------------
| Fecha
|--------------------------------------------------------------------------
*/

.topbar-date {
    min-height: 40px;
    color: rgba(255, 255, 255, 0.85);
}

.topbar-date i {
    color: #ffffff;
}

.topbar-date time {
    color: rgba(255, 255, 255, 0.85);
}


/*
|--------------------------------------------------------------------------
| Redes sociales
|--------------------------------------------------------------------------
*/

.topbar-social {
    min-height: 40px;

    /* separación entre iconos */
    gap: 1rem;
}

.topbar-social a,
.topbar-social a:visited {
    width: 30px;
    height: 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* iconos blancos */
    color: #ffffff !important;

    text-decoration: none;
    border-radius: 50%;

    opacity: 0.9;

    transition:
        opacity 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

.topbar-social a i {
    color: inherit;
    font-size: 0.95rem;
}


/*
|--------------------------------------------------------------------------
| Hover
|--------------------------------------------------------------------------
*/

@media (hover: hover) {

    .topbar-social a:hover {
        color: #ffffff !important;
        background-color: rgba(255, 255, 255, 0.12);

        opacity: 1;

        transform: translateY(-2px);
    }
}


/*
|--------------------------------------------------------------------------
| Navegación con teclado
|--------------------------------------------------------------------------
*/

.topbar-social a:focus-visible {
    color: #ffffff !important;

    outline: 2px solid #ffffff;
    outline-offset: 2px;
}