/* Barra de arriba */

/* ---------- Barra ---------- */

.barra-superior {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: 42px;
    padding: 0 16px 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--ventana);
    border-bottom: 2px solid var(--tinta);
    font-size: 12.5px;
}

.barra-izquierda,
.barra-derecha {
    display: flex;
    align-items: center;
    gap: 18px;
}

.barra-nombre {
    background: none;
    border: 0;
    padding: 4px 2px;
    font-weight: 500;
}

.barra-nombre .punto {
    color: var(--terracota);
}

.barra-nombre:hover {
    text-decoration: underline;
}

/* ---------- Selector de idioma ---------- */

.selector-idioma {
    display: flex;
    gap: 2px;
    padding: 2px;
    border: 1.5px solid var(--tinta);
    border-radius: 6px;
}

.selector-idioma button {
    background: none;
    border: 0;
    border-radius: 4px;
    padding: 1px 7px;
}

.selector-idioma button.activa {
    background: var(--tinta);
    color: var(--ventana);
}

/* ---------- Botón de modo claro / oscuro ---------- */

.boton-tema {
    height: 28px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--ventana);
    border: 1.5px solid var(--tinta);
    border-radius: 6px;
}

/* ---------- Enlaces a GitHub y LinkedIn ---------- */

.enlace-red {
    height: 28px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--ventana);
    border: 1.5px solid var(--tinta);
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.enlace-red svg {
    width: 15px;
    height: 15px;
}

.enlace-red:hover {
    background: var(--tinta);
    color: var(--ventana);
}